Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-04 04:10:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: add supoort of styled components

Browse Source
This commit is contained in:
RomanPidkostelnyi 2023-07-25 17:08:31 +03:00
parent 46c70d7fd5
commit 0eb55aca61
6 changed files with 2013 additions and 1514 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3504
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -79,7 +79,7 @@
"@types/react": "^17.0.8",
"@types/react-dom": "^17.0.5",
"@types/react-tabs": "^2.3.2",
"@types/styled-components": "^5.1.1",
"@types/styled-components": "^5.1.26",
"@types/tapable": "^2.2.2",
"@types/webpack": "^5.28.0",
"@types/webpack-env": "^1.18.0",
@ -137,7 +137,7 @@
"mobx": "^6.0.4",
"react": "^16.8.4 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0",
"styled-components": "^4.1.1 || ^5.1.1 || ^6.0.0"
"styled-components": "^4.1.1 || ^5.1.1 || ^6.0.5"
},
"dependencies": {
"@redocly/openapi-core": "^1.0.0-beta.104",

4
src/common-elements/fields.ts
View File

@ -69,7 +69,9 @@ export const TypeTitle = styled(FieldLabel)`
export const TypeFormat = TypeName;
export const RequiredLabel = styled(FieldLabel.withComponent('div'))`
export const RequiredLabel = styled(FieldLabel).attrs({
as: 'div',
})`
color: ${props => props.theme.schema.requireLabelColor};
font-size: ${props => props.theme.schema.labelsTextSize};
font-weight: normal;

4
src/common-elements/samples.tsx
View File

@ -32,7 +32,9 @@ export const SampleControlsWrap = styled.div`
}
`;
export const StyledPre = styled(PrismDiv.withComponent('pre'))`
export const StyledPre = styled(PrismDiv).attrs({
as: 'pre',
})`
font-family: ${props => props.theme.typography.code.fontFamily};
font-size: ${props => props.theme.typography.code.fontSize};
overflow-x: auto;

5
src/components/Markdown/SanitizedMdBlock.tsx
View File

@ -4,8 +4,11 @@ import * as React from 'react';
import { OptionsConsumer } from '../OptionsProvider';
import { StylingMarkdownProps } from './Markdown';
import { StyledMarkdownBlock } from './styled.elements';
import styled from 'styled-components';
const StyledMarkdownSpan = StyledMarkdownBlock.withComponent('span');
const StyledMarkdownSpan = styled(StyledMarkdownBlock)`
display: inline;
`;
const sanitize = (untrustedSpec, html) => (untrustedSpec ? DOMPurify.sanitize(html) : html);

4
src/components/Responses/styled.elements.ts
View File

@ -41,7 +41,9 @@ export const ResponseDetailsWrap = styled.div`
padding: 10px;
`;
export const HeadersCaption = styled(UnderlinedHeader.withComponent('caption'))`
export const HeadersCaption = styled(UnderlinedHeader).attrs({
as: 'button',
})`
text-align: left;
margin-top: 1em;
caption-side: top;