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. 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 628d1301..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; @@ -184,9 +185,9 @@ function Explain(props: Props) { className={styles.anchor} 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/components/input/Checkbox.module.scss b/src/components/input/Checkbox.module.scss index efc302a7..b1e779c3 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: 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 ae6aa0e7..a331607a 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: 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 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/_app.tsx b/src/pages/_app.tsx index 0f7264b0..1362fc38 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -49,7 +49,7 @@ function App({ Component, pageProps }) {
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 ( - +