From b406f069e03175495a8a18d750260b7b2f435c71 Mon Sep 17 00:00:00 2001 From: Willem Liu Date: Thu, 24 Sep 2020 16:58:51 +0200 Subject: [PATCH 1/7] Margin radio, checkbox --- src/components/input/Checkbox.module.scss | 4 ++-- src/components/input/Radio.module.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/input/Checkbox.module.scss b/src/components/input/Checkbox.module.scss index efc302a7..e439071a 100644 --- 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: 1.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 index ae6aa0e7..32cb9bda 100644 --- 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: 1.5rem; margin-bottom: 0.5rem; cursor: pointer; color: var(--content-copy); From d43bec6c9101b055e8f59239145d62586a999da9 Mon Sep 17 00:00:00 2001 From: Willem Liu Date: Thu, 24 Sep 2020 17:06:49 +0200 Subject: [PATCH 2/7] radio checkbox margins --- src/components/Explain.tsx | 1 + src/components/input/Checkbox.module.scss | 2 +- src/components/input/Radio.module.scss | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Explain.tsx b/src/components/Explain.tsx index 628d1301..7611ef6c 100644 --- a/src/components/Explain.tsx +++ b/src/components/Explain.tsx @@ -184,6 +184,7 @@ function Explain(props: Props) { className={styles.anchor} onClick={copyAnchor.bind(null, props.anchor)} title="Copy link" + aria-label={`Copy link to ${props.legend}`} > 🔗 diff --git a/src/components/input/Checkbox.module.scss b/src/components/input/Checkbox.module.scss index e439071a..b1e779c3 100644 --- a/src/components/input/Checkbox.module.scss +++ b/src/components/input/Checkbox.module.scss @@ -12,7 +12,7 @@ position: relative; display: inline-block; padding-left: 1.75rem; - margin-right: 1.5rem; + 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 index 32cb9bda..a331607a 100644 --- a/src/components/input/Radio.module.scss +++ b/src/components/input/Radio.module.scss @@ -20,7 +20,7 @@ z-index: 1; display: inline-block; padding-left: 1.75rem; - margin-right: 1.5rem; + margin-right: 2.5rem; margin-bottom: 0.5rem; cursor: pointer; color: var(--content-copy); From f44c42a2c6cc55f4b4be0c02265a62caa64d9d80 Mon Sep 17 00:00:00 2001 From: Willem Liu Date: Thu, 24 Sep 2020 17:26:44 +0200 Subject: [PATCH 3/7] Paperclip --- src/components/Explain.module.scss | 10 ++++++++++ src/components/Explain.tsx | 6 +++--- src/design-tokens/icons.ts | 1 + src/pages/_document.tsx | 2 +- 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/Explain.module.scss b/src/components/Explain.module.scss index f410436b..bcc141f9 100644 --- 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 index 7611ef6c..ba15404b 100644 --- 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; @@ -185,9 +186,8 @@ function Explain(props: Props) { onClick={copyAnchor.bind(null, props.anchor)} title="Copy link" aria-label={`Copy link to ${props.legend}`} - > - 🔗 - + dangerouslySetInnerHTML={{ __html: PaperclipIcon }} + /> ) : null} {props.description && ( diff --git a/src/design-tokens/icons.ts b/src/design-tokens/icons.ts index 905acb54..76c6a077 100644 --- 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/_document.tsx b/src/pages/_document.tsx index 9985da32..7ddf4e80 100644 --- 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 { render() { return ( - + Date: Thu, 24 Sep 2020 17:28:53 +0200 Subject: [PATCH 4/7] user scalable --- src/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 0f7264b0..011e550e 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -49,7 +49,7 @@ function App({ Component, pageProps }) {
From 0df109353b1acd99b0d538c6958f105151fad35f Mon Sep 17 00:00:00 2001 From: Willem Liu Date: Thu, 24 Sep 2020 17:35:30 +0200 Subject: [PATCH 5/7] user scalable --- src/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 011e550e..7e14fafa 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -49,7 +49,7 @@ function App({ Component, pageProps }) {
From bc474db6d8cd78ecab68725cfb027e3cd7663a02 Mon Sep 17 00:00:00 2001 From: Willem Liu Date: Thu, 24 Sep 2020 17:41:26 +0200 Subject: [PATCH 6/7] viewport meta --- src/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 7e14fafa..1362fc38 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -49,7 +49,7 @@ function App({ Component, pageProps }) {
From c05e222617a47076acf286a4b0a225d2538f5696 Mon Sep 17 00:00:00 2001 From: Willem Liu Date: Thu, 24 Sep 2020 17:43:34 +0200 Subject: [PATCH 7/7] README headings --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a82c09dd..5e1ab294 100644 --- 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.