Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-13 04:16:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: theme add links textDecoration options (#1599)

Browse Source 
Co-authored-by: Anastasiia Derymarko <anastasiia@redocly.com>
Co-authored-by: Loïc Fürhoff <loic.furhoff@pix4d.com>
This commit is contained in:
Loïc Fürhoff 2022-05-16 10:49:22 +02:00 committed by GitHub
parent 660cc857bc
commit ba06485ece
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -289,6 +289,8 @@ You can use all of the following options with the standalone version of the <red
* `color`: # COMPUTED: colors.primary.main * `color`: # COMPUTED: colors.primary.main
* `visited`: # COMPUTED: typography.links.color * `visited`: # COMPUTED: typography.links.color
* `hover`: # COMPUTED: lighten(0.2 typography.links.color) * `hover`: # COMPUTED: lighten(0.2 typography.links.color)
* `textDecoration`: 'auto'
* `hoverTextDecoration`: 'auto'
* `sidebar` * `sidebar`
* `width`: '260px' * `width`: '260px'
* `backgroundColor`: '#fafafa' * `backgroundColor`: '#fafafa'

1
package.json
View File

@ -34,6 +34,7 @@
"start:benchmark": "webpack serve --mode=production --env.bench --config demo/webpack.config.ts", "start:benchmark": "webpack serve --mode=production --env.bench --config demo/webpack.config.ts",
"test": "npm run unit && npm run license-check", "test": "npm run unit && npm run license-check",
"unit": "jest --coverage", "unit": "jest --coverage",
"test:update-snapshot": "jest --updateSnapshot",
"e2e": "cypress run", "e2e": "cypress run",
"e2e-ci": "cypress run --record", "e2e-ci": "cypress run --record",
"bundlesize": "size-limit", "bundlesize": "size-limit",

3
src/components/Markdown/styled.elements.tsx
View File

@ -6,7 +6,7 @@ import { StyledComponent } from 'styled-components';
export const linksCss = css` export const linksCss = css`
a { a {
text-decoration: none; text-decoration: ${props => props.theme.typography.links.textDecoration};
color: ${props => props.theme.typography.links.color}; color: ${props => props.theme.typography.links.color};
&:visited { &:visited {
@ -15,6 +15,7 @@ export const linksCss = css`
&:hover { &:hover {
color: ${props => props.theme.typography.links.hover}; color: ${props => props.theme.typography.links.hover};
text-decoration: ${props => props.theme.typography.links.hoverTextDecoration};
} }
} }
`; `;

20
src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap
View File

@ -272,6 +272,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"links": Object { "links": Object {
"color": "#32329f", "color": "#32329f",
"hover": "#6868cf", "hover": "#6868cf",
"hoverTextDecoration": "auto",
"textDecoration": "auto",
"visited": "#32329f", "visited": "#32329f",
}, },
"optimizeSpeed": true, "optimizeSpeed": true,
@ -527,6 +529,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"links": Object { "links": Object {
"color": "#32329f", "color": "#32329f",
"hover": "#6868cf", "hover": "#6868cf",
"hoverTextDecoration": "auto",
"textDecoration": "auto",
"visited": "#32329f", "visited": "#32329f",
}, },
"optimizeSpeed": true, "optimizeSpeed": true,
@ -757,6 +761,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"links": Object { "links": Object {
"color": "#32329f", "color": "#32329f",
"hover": "#6868cf", "hover": "#6868cf",
"hoverTextDecoration": "auto",
"textDecoration": "auto",
"visited": "#32329f", "visited": "#32329f",
}, },
"optimizeSpeed": true, "optimizeSpeed": true,
@ -1054,6 +1060,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"links": Object { "links": Object {
"color": "#32329f", "color": "#32329f",
"hover": "#6868cf", "hover": "#6868cf",
"hoverTextDecoration": "auto",
"textDecoration": "auto",
"visited": "#32329f", "visited": "#32329f",
}, },
"optimizeSpeed": true, "optimizeSpeed": true,
@ -1309,6 +1317,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"links": Object { "links": Object {
"color": "#32329f", "color": "#32329f",
"hover": "#6868cf", "hover": "#6868cf",
"hoverTextDecoration": "auto",
"textDecoration": "auto",
"visited": "#32329f", "visited": "#32329f",
}, },
"optimizeSpeed": true, "optimizeSpeed": true,
@ -1539,6 +1549,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"links": Object { "links": Object {
"color": "#32329f", "color": "#32329f",
"hover": "#6868cf", "hover": "#6868cf",
"hoverTextDecoration": "auto",
"textDecoration": "auto",
"visited": "#32329f", "visited": "#32329f",
}, },
"optimizeSpeed": true, "optimizeSpeed": true,
@ -1792,6 +1804,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"links": Object { "links": Object {
"color": "#32329f", "color": "#32329f",
"hover": "#6868cf", "hover": "#6868cf",
"hoverTextDecoration": "auto",
"textDecoration": "auto",
"visited": "#32329f", "visited": "#32329f",
}, },
"optimizeSpeed": true, "optimizeSpeed": true,
@ -2086,6 +2100,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"links": Object { "links": Object {
"color": "#32329f", "color": "#32329f",
"hover": "#6868cf", "hover": "#6868cf",
"hoverTextDecoration": "auto",
"textDecoration": "auto",
"visited": "#32329f", "visited": "#32329f",
}, },
"optimizeSpeed": true, "optimizeSpeed": true,
@ -2341,6 +2357,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"links": Object { "links": Object {
"color": "#32329f", "color": "#32329f",
"hover": "#6868cf", "hover": "#6868cf",
"hoverTextDecoration": "auto",
"textDecoration": "auto",
"visited": "#32329f", "visited": "#32329f",
}, },
"optimizeSpeed": true, "optimizeSpeed": true,
@ -2571,6 +2589,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
"links": Object { "links": Object {
"color": "#32329f", "color": "#32329f",
"hover": "#6868cf", "hover": "#6868cf",
"hoverTextDecoration": "auto",
"textDecoration": "auto",
"visited": "#32329f", "visited": "#32329f",
}, },
"optimizeSpeed": true, "optimizeSpeed": true,

2
src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap
View File

@ -44,7 +44,7 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
<div> <div>
<div <div
class="sc-iJCRrE sc-ciSkZP jCdxGr emlfPd" class="sc-iJCRrE sc-ciSkZP jCdxGr lhENGb"
/> />
</div> </div>
</div> </div>

4
src/theme.ts
View File

@ -128,6 +128,8 @@ const defaultTheme: ThemeInterface = {
color: ({ colors }) => colors.primary.main, color: ({ colors }) => colors.primary.main,
visited: ({ typography }) => typography.links.color, visited: ({ typography }) => typography.links.color,
hover: ({ typography }) => lighten(0.2, typography.links.color), hover: ({ typography }) => lighten(0.2, typography.links.color),
textDecoration: 'auto',
hoverTextDecoration: 'auto',
}, },
}, },
sidebar: { sidebar: {
@ -315,6 +317,8 @@ export interface ResolvedThemeInterface {
color: string; color: string;
visited: string; visited: string;
hover: string; hover: string;
textDecoration: string;
hoverTextDecoration: string;
}; };
}; };
sidebar: { sidebar: {