colour table imports

src/docs/docs-components/CopyColourTable/ImportSnippet.jsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from 'react';
+
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
+// @ts-ignore
+import classes from './styles.module.scss';
+import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
+import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
+
+SyntaxHighlighter.registerLanguage('scss', scss);
+
+const Copyable = (props) => {
+  const [copied, setCopied] = useState(false);
+
+  let timeout;
+
+  useEffect(() => {
+    if(timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => { setCopied(false); }, 1000);
+  }, [copied]);
+
+  const handleClick = async({ partial }) => {
+    const copyText = `@import "@reuters-graphics/graphics-components/dist/scss/colours/${partial}";`
+    await navigator.clipboard.writeText(copyText);
+    setCopied(true);
+  }
+
+  return (
+    <button className="copy-btn" onClick={() => handleClick(props)}>
+      <span className="material-symbols-outlined">content_copy</span>
+      {copied && <span className="copy-tag">Copied</span>}
+    </button>
+  );
+}
+
+const ImportSnippet = ({ included = false, partial = 'thematic/_tr.scss' }) => {
+  return included ? (
+    <div className={classes.importsnippet}>
+      <p>Included</p>
+    </div>
+  ) : (
+    <div className={classes.importsnippet}>
+      <SyntaxHighlighter language="scss" style={prism}>
+        {`// global.scss \n@import "@reuters-graphics/graphics-components/dist/scss/colours/${partial}";`}
+      </SyntaxHighlighter>
+      <Copyable partial={partial} />
+    </div>
+  )
+};
+
+export default ImportSnippet;

src/docs/docs-components/CopyColourTable/Table.jsx

@@ -1,8 +1,14 @@
 import React, { useEffect, useState } from 'react';
 
+import ImportSnippet from './ImportSnippet';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 import { Unstyled } from '@storybook/blocks';
 // @ts-ignore
 import classes from './styles.module.scss';
+import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
+import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
+
+SyntaxHighlighter.registerLanguage('scss', scss);
 
 const Copyable = (props) => {
   const handleClick = async(props) => {
@@ -49,12 +55,13 @@ const Cell = (props) => {
 const TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i}>{c}</TD>))}</tr>
 const TH = (props) => <th>{props.children}</th>;
 
-const CopyTable = ({ title = null, header, body, copyable, mdnLink = null }) => {
+const CopyTable = ({ title = null, header, body, copyable, mdnLink = null, included = false, partial }) => {
   return (
     <Unstyled>
       <div className={classes.title}>
         {title}
       </div>
+      <ImportSnippet included={included} partial={partial} />
       <table className={classes.table}>
         <thead>
           <tr>

src/docs/docs-components/CopyColourTable/styles.module.scss

@@ -4,7 +4,7 @@ $header: #5e81ac;
 .title {
   font-size: 18px;
   color: #666;
-  margin-bottom: 5px;
+  margin-bottom: 0;
   font-weight: 400;
   a span {
     font-size: 18px;
@@ -129,3 +129,51 @@ $header: #5e81ac;
     margin-right: 10px;
   }
 }
+
+.importsnippet :global {
+  max-width: 600px;
+  position: relative;
+  p {
+    font-size: 0.8rem;
+    line-height: 1;
+    background-color: #0071a1;
+    padding: 5px 10px;
+    color: white;
+    display: inline-block;
+    margin-bottom: 5px;
+    border-radius: 2px;
+  }
+
+  pre {
+    margin-top: 0 !important;
+    border-radius: 4px;
+    border: 1px solid hsla(203, 50%, 30%, 0.15);
+    padding: 0.5rem 1rem !important;
+    & * {
+      font-size: 0.8rem;
+    }
+  }
+  .copy-btn {
+    position: absolute;
+    background-color: #0071a1;
+    color: white;
+    font-size: 0.8rem;
+    border: 0;
+    padding: 5px 10px;
+    top: 0;
+    right: 0;
+    z-index: 999;
+    border-top-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    .material-symbols-outlined {
+      font-size: 1.1rem;
+    }
+    span.copy-tag {
+      margin-left: 5px;
+    }
+  }
+}

src/docs/styles/colours/thematic.stories.mdx

@@ -24,16 +24,21 @@ Several colour schemes are accessible through CSS variables in the tables below.
   title="Grey"
   header={['Colour', 'CSS variable']}
   body={extractCssColourVariables(greyScheme)}
+  included
+  partial="thematic/_grey.scss"
 />
 
 <CopyColourTable
   title="Thomson Reuters"
   header={['Colour', 'CSS variable']}
   body={extractCssColourVariables(trScheme)}
+  included
+  partial="thematic/_tr.scss"
 />
 
 <CopyColourTable
   title="Nord"
   header={['Colour', 'CSS variable']}
   body={extractCssColourVariables(nordScheme)}
+  partial="thematic/_nord.scss"
 />