@reuters-graphics/graphics-components 1.0.30 → 1.1.1

package/dist/docs/docs-components/CopyColourTable/Table.d.ts

@@ -0,0 +1,10 @@
+export default CopyTable;
+declare function CopyTable({ title, body, copyable, mdnLink, included, partial, }: {
+    title?: null | undefined;
+    body: any;
+    copyable: any;
+    mdnLink?: null | undefined;
+    included?: boolean | undefined;
+    partial: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/docs/docs-components/CopyColourTable/Table.jsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+
+import ImportSnippet from './ImportSnippet';
+import { Unstyled } from '@storybook/blocks';
+// @ts-ignore scss
+import classes from './styles.module.scss';
+
+const Copyable = (props) => {
+  const handleClick = async (props) => {
+    const copyText = props.wrap ? `var(${props.children})` : props.children;
+    await navigator.clipboard.writeText(copyText);
+    props.setCopied(true);
+  };
+
+  return (
+    <button className="copy-btn" onClick={() => handleClick(props)}>
+      <span className="material-symbols-outlined">content_copy</span>
+      {props.children}
+      {props.copied && <div className="copy-tag">Copied</div>}
+    </button>
+  );
+};
+
+const Cell = (props) => {
+  const [copied, setCopied] = useState(false);
+
+  let timeout;
+
+  useEffect(() => {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  }, [copied]);
+
+  const copyProps = { ...props, ...{ copied, setCopied } };
+
+  return props.column === 0 ?
+      <div className="swatch-container">
+        <div
+          className="swatch"
+          style={{ backgroundColor: props.children }}
+        ></div>
+        <span>
+          <Copyable {...copyProps}>{props.children}</Copyable>
+        </span>
+      </div>
+    : props.children.map((css) => (
+        <div key={css}>
+          <Copyable {...copyProps} wrap>
+            {css}
+          </Copyable>
+        </div>
+      ));
+};
+
+const TD = (props) => (
+  <td>
+    <Cell {...props}>{props.children}</Cell>
+  </td>
+);
+const TR = (props) => (
+  <tr>
+    {props.children.map((c, i) => (
+      <TD {...props} column={i} key={i}>
+        {c}
+      </TD>
+    ))}
+  </tr>
+);
+const TH = (props) => <th>{props.children}</th>;
+
+const CopyTable = ({
+  title = null,
+  body,
+  copyable,
+  mdnLink = null,
+  included = false,
+  partial,
+}) => {
+  const header = ['Colour', 'CSS variable'];
+  return (
+    <Unstyled>
+      <div className={classes.title}>{title}</div>
+      <ImportSnippet included={included} partial={partial} />
+      <table className={classes.table}>
+        <thead>
+          <tr>
+            {header.map((h) => (
+              <TH key={h}>{h}</TH>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {body.map((b, i) => (
+            <TR {...{ title, header, body, copyable, mdnLink }} key={i}>
+              {b}
+            </TR>
+          ))}
+        </tbody>
+      </table>
+    </Unstyled>
+  );
+};
+
+export default CopyTable;

package/dist/docs/docs-components/CopyColourTable/styles.module.scss

@@ -0,0 +1,180 @@
+$copyable: #0071a1;
+$header: #5e81ac;
+
+.title {
+  font-size: 18px;
+  color: #666;
+  margin-bottom: 0;
+  font-weight: 400;
+  margin-top: 2rem;
+  a span {
+    font-size: 18px;
+    line-height: 18px;
+    margin-left: 2px;
+    vertical-align: middle;
+    font-weight: bold;
+    opacity: 0.6;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.table :global {
+  min-height: 100px;
+  margin: 0 0 3rem;
+  width: 100%;
+  max-width: 600px;
+  border-collapse: collapse;
+  border-radius: 4px;
+  overflow: hidden;
+  th,
+  td {
+    padding: 6px 13px;
+    font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  thead tr {
+    // background-color: #5e81ac;
+    color: #333;
+    text-align: left;
+    th {
+      font-weight: bold;
+      color: #2e3438;
+      border: 1px solid hsla(203, 50%, 30%, 0.15);
+      margin: 0;
+
+      border-collapse: collapse;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+  thead {
+    display: block;
+    width: 100%;
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+    }
+  }
+  tbody {
+    display: block;
+    max-height: 605px;
+    overflow-y: scroll;
+    border-bottom: 1px solid hsla(203, 50%, 30%, 0.15);
+  }
+  tbody tr {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    border: 1px solid hsla(203, 50%, 30%, 0.15);
+    border-radius: 4px;
+    font-size: 0.9rem;
+    font-weight: 400;
+    color: #404040;
+    td {
+      border-right: 1px solid #eee;
+      vertical-align: middle;
+      color: #2e3438;
+      position: relative;
+      button {
+        text-align: left;
+        padding: 0;
+        border: 0;
+        background-color: transparent;
+        cursor: pointer;
+        color: $copyable;
+
+        span {
+          font-size: 1rem;
+          color: inherit;
+          margin-right: 5px;
+          vertical-align: bottom;
+        }
+        div.copy-tag {
+          position: absolute;
+          right: 4px;
+          top: 50%;
+          transform: translate(0, -50%);
+          background-color: #333;
+          pointer-events: none;
+          color: white;
+          padding: 4px 6px;
+          border-radius: 4px;
+          font-size: 12px;
+        }
+        &:active {
+          transform: translate(1px, 1px);
+        }
+      }
+    }
+  }
+
+  tbody tr:nth-of-type(even) {
+    background-color: #f7fafc;
+  }
+
+  div.swatch-container {
+    display: flex;
+    align-items: center;
+  }
+
+  div.swatch {
+    width: 40px;
+    height: 40px;
+    border: 1px solid hsla(203, 50%, 30%, 0.15);
+    border-radius: 10px;
+    display: inline-block;
+    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;
+    }
+  }
+}

package/dist/docs/docs-components/CopyTable/Table.d.ts

@@ -0,0 +1,10 @@
+export default CopyTable;
+declare function CopyTable({ title, note, header, body, copyable, mdnLink, }: {
+    title?: null | undefined;
+    note?: null | undefined;
+    header: any;
+    body: any;
+    copyable: any;
+    mdnLink?: null | undefined;
+}): React.JSX.Element;
+import React from 'react';

package/dist/docs/docs-components/CopyTable/Table.jsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+
+import { Unstyled } from '@storybook/blocks';
+// @ts-ignore scss
+import classes from './styles.module.scss';
+
+const MultiLine = (props) =>
+  props.children.split('\n').map((t) => <div key={t}>{t}</div>);
+
+const Copyable = (props) => {
+  const handleClick = async (props) => {
+    const copyText =
+      typeof props.copyable[props.column] === 'function' ?
+        props.copyable[props.column](`${props.children}`)
+      : `${props.children}`;
+    await navigator.clipboard.writeText(copyText);
+    setCopied(true);
+  };
+
+  const [copied, setCopied] = useState(false);
+
+  let timeout;
+
+  useEffect(() => {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  }, [copied]);
+
+  return props.copyable && props.copyable[props.column] ?
+      <button className="copy-btn" onClick={() => handleClick(props)}>
+        <span className="material-symbols-outlined">content_copy</span>
+        {props.children}
+        {copied && <div className="copy-tag">Copied</div>}
+      </button>
+    : <MultiLine>{props.children}</MultiLine>;
+};
+
+const TD = (props) => (
+  <td>
+    <Copyable {...props}>{props.children}</Copyable>
+  </td>
+);
+const TR = (props) => (
+  <tr>
+    {props.children.map((c, i) => (
+      <TD {...props} column={i} key={i}>
+        {c}
+      </TD>
+    ))}
+  </tr>
+);
+const TH = (props) => <th>{props.children}</th>;
+
+const CopyTable = ({
+  title = null,
+  note = null,
+  header,
+  body,
+  copyable,
+  mdnLink = null,
+}) => {
+  return (
+    <Unstyled>
+      <div className={classes.title}>
+        {title}
+        {title && mdnLink && (
+          <a
+            href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${mdnLink}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <span className="material-symbols-outlined">link</span>
+          </a>
+        )}
+        {note && <p>{note}</p>}
+      </div>
+      <table className={classes.table}>
+        <thead>
+          <tr>
+            {header.map((h) => (
+              <TH key={h}>{h}</TH>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {body.map((b, i) => (
+            <TR {...{ title, header, body, copyable, mdnLink }} key={i}>
+              {b}
+            </TR>
+          ))}
+        </tbody>
+      </table>
+    </Unstyled>
+  );
+};
+
+export default CopyTable;

package/dist/docs/docs-components/CopyTable/styles.module.scss

@@ -0,0 +1,129 @@
+$copyable: #0071a1;
+$header: #5e81ac;
+
+.title {
+  max-width: 600px;
+  font-size: 18px;
+  color: #666;
+  margin-bottom: 5px;
+  margin-top: 2rem;
+  font-weight: 400;
+  a span {
+    font-size: 18px;
+    line-height: 18px;
+    margin-left: 2px;
+    vertical-align: middle;
+    font-weight: bold;
+    opacity: 0.6;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  p {
+    font-size: 0.85rem;
+    line-height: 1.25;
+    background-color: #f7fafc;
+    padding: 10px;
+    border-radius: 4px;
+    margin-top: 5px;
+    color: #333;
+    border: 1px solid hsla(203, 50%, 30%, 0.15);
+  }
+}
+
+.table :global {
+  min-height: 100px;
+  margin: 0 0 3rem;
+  width: 100%;
+  max-width: 600px;
+  border-collapse: collapse;
+  border-radius: 4px;
+  overflow: hidden;
+  th,
+  td {
+    padding: 6px 13px;
+    font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  thead tr {
+    // background-color: #5e81ac;
+    color: #333;
+    text-align: left;
+    th {
+      font-weight: bold;
+      color: #2e3438;
+      border: 1px solid hsla(203, 50%, 30%, 0.15);
+      margin: 0;
+
+      border-collapse: collapse;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+  thead {
+    display: block;
+    width: 100%;
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+    }
+  }
+  tbody {
+    display: block;
+    max-height: 305px;
+    overflow-y: scroll;
+    border-bottom: 1px solid hsla(203, 50%, 30%, 0.15);
+  }
+  tbody tr {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    border: 1px solid hsla(203, 50%, 30%, 0.15);
+    border-radius: 4px;
+    font-size: 0.9rem;
+    font-weight: 400;
+    color: #404040;
+    td {
+      border-right: 1px solid #eee;
+      vertical-align: text-top;
+      color: #2e3438;
+      position: relative;
+      button {
+        text-align: left;
+        padding: 0;
+        border: 0;
+        background-color: transparent;
+        cursor: pointer;
+        color: $copyable;
+
+        span {
+          font-size: 1rem;
+          color: inherit;
+          margin-right: 5px;
+          vertical-align: bottom;
+        }
+        div.copy-tag {
+          position: absolute;
+          right: 4px;
+          top: 50%;
+          transform: translate(0, -50%);
+          background-color: #333;
+          pointer-events: none;
+          color: white;
+          padding: 4px 6px;
+          border-radius: 4px;
+          font-size: 12px;
+        }
+        &:active {
+          transform: translate(1px, 1px);
+        }
+      }
+    }
+  }
+
+  tbody tr:nth-of-type(even) {
+    background-color: #f7fafc;
+  }
+}

package/dist/docs/docs-components/MdxTheme/Theme.d.ts

@@ -0,0 +1,3 @@
+export default ThemeWrapper;
+declare function ThemeWrapper(props: any): React.JSX.Element;
+import React from 'react';

package/dist/docs/docs-components/MdxTheme/Theme.jsx

@@ -0,0 +1,29 @@
+import { Canvas, Unstyled } from '@storybook/blocks';
+
+import React from 'react';
+import flatten from '../../../components/Theme/utils/flatten';
+import lightTheme from '../../../components/Theme/themes/light';
+
+// This is a React equivalent for the Svelte Theme component
+// which is useful for setting CSS variables in MDX docs around
+// typography demos. It also wraps demos in an unstyled storybook
+// canvas.
+
+const ThemeWrapper = (props) => {
+  const theme = flatten(lightTheme);
+  const styleObj = {};
+  Object.keys(theme).forEach((key) => {
+    styleObj[`--theme-${key}`] = theme[key];
+  });
+  return (
+    <Unstyled>
+      <Canvas>
+        <div className="my-theme-wrapper" style={styleObj}>
+          {props.children}
+        </div>
+      </Canvas>
+    </Unstyled>
+  );
+};
+
+export default ThemeWrapper;

package/dist/docs/docs-components/Mermaid/Mermaid.d.ts

@@ -0,0 +1,2 @@
+export default function Mermaid(props: any): React.JSX.Element;
+import React from 'react';

package/dist/docs/docs-components/Mermaid/Mermaid.jsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react';
+
+import mermaid from 'mermaid';
+
+mermaid.initialize({ startOnLoad: false });
+
+export default function Mermaid(props) {
+  const { code, name } = props;
+  const [graphSvg, setGraphSvg] = useState(null);
+
+  useEffect(() => {
+    if (!code) return;
+    const parseMermaid = async (code) => {
+      try {
+        const { svg } = await mermaid.render(name, code || '');
+        setGraphSvg(svg);
+      } catch (err) {
+        setGraphSvg('');
+
+        console.error('Invalid mermaid syntax: %o', err);
+      }
+    };
+
+    parseMermaid(code);
+  }, [code]);
+  return (
+    <div
+      className="storybook-mermaid-graph"
+      dangerouslySetInnerHTML={{ __html: graphSvg || '' }}
+    />
+  );
+}

package/dist/docs/docs-components/ThemeBuilder/CSSVariables/VariableTable.d.ts

@@ -0,0 +1,3 @@
+export default VariableTable;
+declare function VariableTable(props: any): React.JSX.Element;
+import React from 'react';

package/dist/docs/docs-components/ThemeBuilder/CSSVariables/VariableTable.jsx

@@ -0,0 +1,21 @@
+import CopyTable from '../../CopyTable/Table';
+import React from 'react';
+import flatten from '../../../../components/Theme/utils/flatten.js';
+
+const VariableTable = (props) => {
+  const { theme } = props;
+  const flatTheme = flatten(theme);
+  const themeArray = Object.keys(flatTheme).map((key) => [`--theme-${key}`]);
+
+  return (
+    <CopyTable
+      title=""
+      header={['CSS variable']}
+      note="You can also use the following CSS variables to reference values from your theme in SCSS"
+      body={themeArray}
+      copyable={[(v) => `var(${v})`]}
+    />
+  );
+};
+
+export default VariableTable;

package/dist/docs/docs-components/ThemeBuilder/Customiser/ColourPicker.d.ts

@@ -0,0 +1,6 @@
+export default ColourPicker;
+declare function ColourPicker({ colour, onChange }: {
+    colour: any;
+    onChange: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/docs/docs-components/ThemeBuilder/Customiser/ColourPicker.jsx

@@ -0,0 +1,25 @@
+import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
+
+import React from 'react';
+// @ts-ignore scss
+import classes from './styles.module.scss';
+import { fromString } from 'css-color-converter';
+
+const ColourPicker = ({ colour, onChange }) => {
+  return (
+    <div className={classes.colourpicker}>
+      <HexColorInput
+        color={fromString(colour.trim()).toHexString()}
+        onChange={onChange}
+        alpha
+        prefixed
+      />
+      <HexAlphaColorPicker
+        color={fromString(colour.trim()).toHexString()}
+        onChange={onChange}
+      />
+    </div>
+  );
+};
+
+export default ColourPicker;

package/dist/docs/docs-components/ThemeBuilder/Customiser/Customiser.d.ts

@@ -0,0 +1,7 @@
+export default Customiser;
+declare function Customiser({ theme, themeName, setTheme }: {
+    theme: any;
+    themeName: any;
+    setTheme: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/docs/docs-components/ThemeBuilder/Customiser/Customiser.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Key from './Key.jsx';
+// @ts-ignore scss
+import classes from './styles.module.scss';
+
+const Customiser = ({ theme, themeName, setTheme }) => {
+  return (
+    <div className={classes.customiser}>
+      <p>Pick parts of the theme to customise:</p>
+      {Object.entries(theme).map(([key, value]) => {
+        const props = {
+          theme,
+          setTheme,
+          themeName: themeName,
+          name: key,
+          map: key,
+          value,
+          key: themeName + key,
+        };
+        return <Key {...props} key={props.key} />;
+      })}
+    </div>
+  );
+};
+
+export default Customiser;