Merge pull request #174 from FDMediagroep/develop

Margin radio, checkbox
FDMediagroep · Sep 24, 2020 · 8a60ad6 · 8a60ad6 · vercel · Sep 24, 2020
2 parents c8c8f7b + c05e222
commit 8a60ad6
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -49,11 +49,11 @@ Install `date-input-polyfill` for date-picker polyfill for older browsers.
 
 `npm i date-input-polyfill`
 
-#### Optional configuration
+### Optional configuration
 
 You can replace date-input-polyfill with an empty component.
 
-##### Webpack config
+#### Webpack config
 
 Install `null-loader` and add the following to your Webpack configuration rules.
 

diff --git a/src/components/Explain.module.scss b/src/components/Explain.module.scss
@@ -15,6 +15,16 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
+    svg {
+        width: 1rem;
+        height: 1rem;
+        fill: var(--content-copy);
+        // IE11
+        @media screen and (-ms-high-contrast: active),
+            (-ms-high-contrast: none) {
+            color: #{map-deep-get($colors, 'colors', 'neutral', 10)};
+        }
+    }
 }
 
 .previewContainer {

diff --git a/src/components/Explain.tsx b/src/components/Explain.tsx
@@ -11,6 +11,7 @@ import {
     initializeDesignTokensTooltip,
     clearDesignTokensTooltips,
 } from '../utils/designTokensTooltip';
+import { PaperclipIcon } from '../design-tokens/icons';
 
 declare let window: Window | any;
 declare let cssbeautify: (css: string) => string;
@@ -184,9 +185,9 @@ function Explain(props: Props) {
                         className={styles.anchor}
                         onClick={copyAnchor.bind(null, props.anchor)}
                         title="Copy link"
-                    >
-                        🔗
-                    </button>
+                        aria-label={`Copy link to ${props.legend}`}
+                        dangerouslySetInnerHTML={{ __html: PaperclipIcon }}
+                    />
                 ) : null}
             </h2>
             {props.description && (

diff --git a/src/components/input/Checkbox.module.scss b/src/components/input/Checkbox.module.scss
@@ -11,8 +11,8 @@
         user-select: none;
         position: relative;
         display: inline-block;
-        padding-left: 1.5rem;
-        margin-right: 1rem;
+        padding-left: 1.75rem;
+        margin-right: 2.5rem;
         margin-bottom: 0.5rem;
         cursor: pointer;
         color: var(--content-copy);

diff --git a/src/components/input/Radio.module.scss b/src/components/input/Radio.module.scss
@@ -19,8 +19,8 @@
         position: relative;
         z-index: 1;
         display: inline-block;
-        padding-left: 1.5rem;
-        margin-right: 1rem;
+        padding-left: 1.75rem;
+        margin-right: 2.5rem;
         margin-bottom: 0.5rem;
         cursor: pointer;
         color: var(--content-copy);

diff --git a/src/design-tokens/icons.ts b/src/design-tokens/icons.ts
@@ -13,6 +13,7 @@ export { default as ExpandIcon } from '../../public/assets/icons/expand.svg';
 export { default as FdmgIcon } from '../../public/assets/icons/logo-fdmg.svg';
 export { default as LinkedInIcon } from '../../public/assets/icons/linkedin.svg';
 export { default as MinimiseIcon } from '../../public/assets/icons/minimise.svg';
+export { default as PaperclipIcon } from '../../public/assets/icons/paperclip.svg';
 export { default as ReadingTimeIcon } from '../../public/assets/icons/reading-time.svg';
 export { default as SpyglassIcon } from '../../public/assets/icons/spyglass.svg';
 export { default as TwitterIcon } from '../../public/assets/icons/twitter.svg';

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -49,7 +49,7 @@ function App({ Component, pageProps }) {
             <Head>
                 <meta
                     name="viewport"
-                    content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no, minimal-ui, viewport-fit=cover"
+                    content="width=device-width,initial-scale=1,viewport-fit=cover"
                 />
             </Head>
             <section className={pageStyle}>

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -4,7 +4,7 @@ import Document, { Html, Main, NextScript, Head } from 'next/document';
 export default class MyDocument extends Document<any> {
     render() {
         return (
-            <Html lang="nl">
+            <Html lang="en">
                 <Head>
                     <link href="/favicon.ico" rel="shortcut icon" />
                     <link