From ba06485ece27acbb6b846500817f4bff3e4997ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?= <git.noreply@posteo.no>
Date: Mon, 16 May 2022 10:49:22 +0200
Subject: [PATCH] feat: theme add links textDecoration options (#1599)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Anastasiia Derymarko <anastasiia@redocly.com>
Co-authored-by: Loïc Fürhoff <loic.furhoff@pix4d.com>
---
 README.md                                     |  2 ++
 package.json                                  |  1 +
 src/components/Markdown/styled.elements.tsx   |  3 ++-
 .../DiscriminatorDropdown.test.tsx.snap       | 20 +++++++++++++++++++
 .../__snapshots__/OneOfSchema.test.tsx.snap   |  2 +-
 src/theme.ts                                  |  4 ++++
 6 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ddc7411d..0b55dece 100644
--- a/README.md
+++ b/README.md
@@ -289,6 +289,8 @@ You can use all of the following options with the standalone version of the <red
     * `color`: # COMPUTED: colors.primary.main
     * `visited`: # COMPUTED: typography.links.color
     * `hover`: # COMPUTED: lighten(0.2 typography.links.color)
+    * `textDecoration`: 'auto'
+    * `hoverTextDecoration`: 'auto'
 * `sidebar`
   * `width`: '260px'
   * `backgroundColor`: '#fafafa'
diff --git a/package.json b/package.json
index 3296cacb..d70407b4 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "start:benchmark": "webpack serve --mode=production --env.bench --config demo/webpack.config.ts",
     "test": "npm run unit && npm run license-check",
     "unit": "jest --coverage",
+    "test:update-snapshot": "jest --updateSnapshot",
     "e2e": "cypress run",
     "e2e-ci": "cypress run --record",
     "bundlesize": "size-limit",
diff --git a/src/components/Markdown/styled.elements.tsx b/src/components/Markdown/styled.elements.tsx
index 3c1b9210..7a67d31c 100644
--- a/src/components/Markdown/styled.elements.tsx
+++ b/src/components/Markdown/styled.elements.tsx
@@ -6,7 +6,7 @@ import { StyledComponent } from 'styled-components';
 
 export const linksCss = css`
   a {
-    text-decoration: none;
+    text-decoration: ${props => props.theme.typography.links.textDecoration};
     color: ${props => props.theme.typography.links.color};
 
     &:visited {
@@ -15,6 +15,7 @@ export const linksCss = css`
 
     &:hover {
       color: ${props => props.theme.typography.links.hover};
+      text-decoration: ${props => props.theme.typography.links.hoverTextDecoration};
     }
   }
 `;
diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap
index 81245601..d2226cc6 100644
--- a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap
@@ -272,6 +272,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                         "links": Object {
                           "color": "#32329f",
                           "hover": "#6868cf",
+                          "hoverTextDecoration": "auto",
+                          "textDecoration": "auto",
                           "visited": "#32329f",
                         },
                         "optimizeSpeed": true,
@@ -527,6 +529,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                         "links": Object {
                           "color": "#32329f",
                           "hover": "#6868cf",
+                          "hoverTextDecoration": "auto",
+                          "textDecoration": "auto",
                           "visited": "#32329f",
                         },
                         "optimizeSpeed": true,
@@ -757,6 +761,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                   "links": Object {
                     "color": "#32329f",
                     "hover": "#6868cf",
+                    "hoverTextDecoration": "auto",
+                    "textDecoration": "auto",
                     "visited": "#32329f",
                   },
                   "optimizeSpeed": true,
@@ -1054,6 +1060,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                         "links": Object {
                           "color": "#32329f",
                           "hover": "#6868cf",
+                          "hoverTextDecoration": "auto",
+                          "textDecoration": "auto",
                           "visited": "#32329f",
                         },
                         "optimizeSpeed": true,
@@ -1309,6 +1317,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                         "links": Object {
                           "color": "#32329f",
                           "hover": "#6868cf",
+                          "hoverTextDecoration": "auto",
+                          "textDecoration": "auto",
                           "visited": "#32329f",
                         },
                         "optimizeSpeed": true,
@@ -1539,6 +1549,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                   "links": Object {
                     "color": "#32329f",
                     "hover": "#6868cf",
+                    "hoverTextDecoration": "auto",
+                    "textDecoration": "auto",
                     "visited": "#32329f",
                   },
                   "optimizeSpeed": true,
@@ -1792,6 +1804,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
               "links": Object {
                 "color": "#32329f",
                 "hover": "#6868cf",
+                "hoverTextDecoration": "auto",
+                "textDecoration": "auto",
                 "visited": "#32329f",
               },
               "optimizeSpeed": true,
@@ -2086,6 +2100,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                   "links": Object {
                     "color": "#32329f",
                     "hover": "#6868cf",
+                    "hoverTextDecoration": "auto",
+                    "textDecoration": "auto",
                     "visited": "#32329f",
                   },
                   "optimizeSpeed": true,
@@ -2341,6 +2357,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
                   "links": Object {
                     "color": "#32329f",
                     "hover": "#6868cf",
+                    "hoverTextDecoration": "auto",
+                    "textDecoration": "auto",
                     "visited": "#32329f",
                   },
                   "optimizeSpeed": true,
@@ -2571,6 +2589,8 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
             "links": Object {
               "color": "#32329f",
               "hover": "#6868cf",
+              "hoverTextDecoration": "auto",
+              "textDecoration": "auto",
               "visited": "#32329f",
             },
             "optimizeSpeed": true,
diff --git a/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap b/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap
index aa2d28b9..79b0c2df 100644
--- a/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
        
       <div>
         <div
-          class="sc-iJCRrE sc-ciSkZP jCdxGr emlfPd"
+          class="sc-iJCRrE sc-ciSkZP jCdxGr lhENGb"
         />
       </div>
     </div>
diff --git a/src/theme.ts b/src/theme.ts
index e8f2bf2e..791ab4f4 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -128,6 +128,8 @@ const defaultTheme: ThemeInterface = {
       color: ({ colors }) => colors.primary.main,
       visited: ({ typography }) => typography.links.color,
       hover: ({ typography }) => lighten(0.2, typography.links.color),
+      textDecoration: 'auto',
+      hoverTextDecoration: 'auto',
     },
   },
   sidebar: {
@@ -315,6 +317,8 @@ export interface ResolvedThemeInterface {
       color: string;
       visited: string;
       hover: string;
+      textDecoration: string;
+      hoverTextDecoration: string;
     };
   };
   sidebar: {