colour partial formatting

This commit is contained in:
Jon McClure 2023-09-19 08:30:46 +01:00
parent 3c9cfedf97
commit 230135cc0c

View file

@ -8,6 +8,10 @@ import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
SyntaxHighlighter.registerLanguage('scss', scss);
const formatPartial = (partial) => {
return partial.replace(/\/_/, '/').replace(/\.scss$/, '');
};
const Copyable = (props) => {
const [copied, setCopied] = useState(false);
@ -19,7 +23,7 @@ const Copyable = (props) => {
}, [copied]);
const handleClick = async({ partial }) => {
const copyText = `@import "@reuters-graphics/graphics-components/dist/scss/colours/${partial}";`
const copyText = `@import "@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}";`
await navigator.clipboard.writeText(copyText);
setCopied(true);
}
@ -40,7 +44,7 @@ const ImportSnippet = ({ included = false, partial = 'thematic/_tr.scss' }) => {
) : (
<div className={classes.importsnippet}>
<SyntaxHighlighter language="scss" style={prism}>
{`// global.scss \n@import "@reuters-graphics/graphics-components/dist/scss/colours/${partial}";`}
{`// global.scss \n@import "@reuters-graphics/graphics-components/scss/colours/${formatPartial(partial)}";`}
</SyntaxHighlighter>
<Copyable partial={partial} />
</div>