text utility classes and docs with new CopyTable

.storybook/preview-head.html

@@ -1,3 +1,7 @@
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter+Tight:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 <script>
   window.global = window;
 </script>

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "i18n-ally.localesPaths": ["locales"],
   "i18n-ally.keystyle": "nested",
-  "eslint.validate": ["javascript", "svelte"],
+  "eslint.validate": ["javascript", "svelte", "jsx"],
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true

package.json

@@ -61,7 +61,12 @@
     "chromatic": "^6.19.9",
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-config-standard-jsx": "^11.0.0",
+    "eslint-config-standard-react": "^13.0.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^16.0.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-svelte3": "^4.0.0",
@@ -73,6 +78,7 @@
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "prompts": "^2.4.2",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",

src/docs/docs-components/.eslintrc.cjs

@@ -0,0 +1,36 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  ignorePatterns: ['node_modules', 'docs/**'],
+  extends: [
+    'standard',
+    'standard-jsx',
+    'standard-react',
+  ],
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  env: {
+    browser: true,
+    es2022: true,
+  },
+  rules: {
+    indent: ['error', 2],
+    semi: ['error', 'always'],
+    'comma-dangle': [
+      'error',
+      {
+        arrays: 'always-multiline',
+        objects: 'always-multiline',
+        imports: 'always-multiline',
+        exports: 'never',
+        functions: 'never',
+      },
+    ],
+    'operator-linebreak': ['error', 'after'],
+    'space-before-function-paren': ['error', 'never'],
+    'react/prop-types': 'never',
+  },
+};

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Unstyled } from '@storybook/blocks';
+import classes from './styles.module.scss';
+
+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);
+}
+
+const MultiLine = (props) => props.children.split('\n').map(t => (<div>{t}</div>))
+
+const Copyable = (props) => props.copyable && props.copyable[props.column] ?
+  <button onClick={() => handleClick(props)}>
+    <span className="material-symbols-outlined">content_copy</span>{props.children}
+  </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}>{c}</TD>))}</tr>
+const TH = (props) => <th>{props.children}</th>;
+
+const CopyTable = (props) => {
+  return (
+    <Unstyled>
+      <table className={classes.table}>
+        <thead>
+          <tr>
+            {props.header.map(h => (<TH>{h}</TH>))}
+          </tr>
+        </thead>
+        <tbody>
+          {props.body.map(b => (<TR {...props}>{b}</TR>))}
+        </tbody>
+      </table>
+    </Unstyled>
+  )
+};
+
+export default CopyTable;

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

@@ -0,0 +1,61 @@
+$copyable: #0071a1;
+$header: #5e81ac;
+
+.table {
+  min-height: 100px;
+  margin: 0 0 3rem;
+  width: 100%;
+  max-width: 600px;
+  border-collapse: collapse;
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+  th,
+  td {
+    padding: 6px 10px;
+  }
+  thead tr {
+    background-color: #5e81ac;
+    color: #ffffff;
+    text-align: left;
+    th {
+      font-weight: 500;
+      border-right: 1px solid rgba(255, 255, 255, 0.2);
+    }
+  }
+  tbody tr {
+    border-bottom: 1px solid #dddddd;
+    border-radius: 4px;
+    font-family: 'Fira Code', monospace;
+    letter-spacing: -1px;
+    font-size: 0.9rem;
+    font-weight: 400;
+    color: #404040;
+    td {
+      border-right: 1px solid #eee;
+      vertical-align: text-top;
+      button {
+        text-align: left;
+        padding: 0;
+        border: 0;
+        background-color: transparent;
+        cursor: pointer;
+        color: $copyable;
+        letter-spacing: -1px;
+        span {
+          font-size: 1rem;
+          color: inherit;
+          margin-right: 5px;
+          vertical-align: bottom;
+        }
+        &:active {
+          transform: translate(1px, 1px);
+        }
+      }
+    }
+  }
+
+  tbody tr:nth-of-type(even) {
+    background-color: #f3f3f3;
+  }
+}

src/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;

src/docs/styles/typography/styles.scss

@@ -1,6 +1,6 @@
 div.type-system-demo {
   @import '../../../scss/typography/mixins';
-  @import '../../../scss/typography/classes';
+  @import '../../../scss/typography/rules';
 
   *:first-child {
     margin-top: 0;

src/docs/styles/typography/using-the-system.stories.mdx

@@ -1,7 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 import { parameters } from '$docs/utils/docsPage.js';
-import { Canvas, Unstyled } from '@storybook/blocks';
+import Theme from '../../docs-components/MdxTheme/Theme.jsx';
-import Theme from './MdxTheme.jsx';
 
 import './styles.scss';
 

src/docs/styles/typography/utilities.stories.mdx

@@ -0,0 +1,106 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+import CopyTable from '../../docs-components/CopyTable/Table.jsx';
+
+import './styles.scss';
+
+<Meta
+  title="Styles/Typography/Utility classes"
+  parameters={{ ...parameters }}
+/>
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Utility classes
+
+Utility classes apply various often used styles to your markup. Just copy a class and use it on the element you wish to style.
+
+For example, these classes will bold and uppercase your text:
+
+```html
+<div class="uppercase font-bold">My text</div>
+```
+
+### Make it `!important`
+
+You can make any utility class `!important` by adding a `!` to the front of the class name.
+
+```html
+<div class="!uppercase">My text</div>
+```
+
+---
+
+### Font style
+
+<CopyTable
+  header={['Class', 'Properties']}
+  body={[
+    ['italic', 'font-style: italic;'],
+    ['not-italic', 'font-style: normal;'],
+  ]}
+  copyable={[true, false]}
+/>
+
+### Font weight
+
+<CopyTable
+  header={['Class', 'Properties']}
+  body={[
+    ['font-thin', 'font-weight: 100;'],
+    ['font-extralight', 'font-weight: 200;'],
+    ['font-light', 'font-weight: 300;'],
+    ['font-normal', 'font-weight: 400;'],
+    ['font-medium', 'font-weight: 500;'],
+    ['font-semibold', 'font-weight: 600;'],
+    ['font-bold', 'font-weight: 700;'],
+    ['font-extrabold', 'font-weight: 800;'],
+    ['font-black', 'font-weight: 900;'],
+  ]}
+  copyable={[true, false]}
+/>
+
+### Text align
+
+<CopyTable
+  header={['Class', 'Properties']}
+  body={[
+    ['text-left', 'text-align: left;'],
+    ['text-center', 'text-align: center;'],
+    ['text-right', 'text-align: right;'],
+  ]}
+  copyable={[true, false]}
+/>
+
+### Text transform
+
+<CopyTable
+  header={['Class', 'Properties']}
+  body={[
+    ['uppercase', 'text-transform: uppercase;'],
+    ['lowercase', 'text-transform: lowercase;'],
+  ]}
+  copyable={[true, false]}
+/>
+
+### White space
+
+<CopyTable
+  header={['Class', 'Properties']}
+  body={[
+    ['whitespace-normal', 'white-space: normal;'],
+    ['whitespace-nowrap', 'white-space: nowrap;'],
+  ]}
+  copyable={[true, false]}
+/>
+
+### Word break
+
+<CopyTable
+  header={['Class', 'Properties']}
+  body={[
+    ['break-normal', 'overflow-wrap: normal;\nword-break: normal;'],
+    ['break-words', 'overflow-wrap: break-word;'],
+  ]}
+  copyable={[true, false]}
+/>

tsconfig.json

@@ -9,10 +9,11 @@
 		"resolveJsonModule": true,
 		"allowJs": true,
 		"checkJs": true,
-		"jsx": "react",
 		"emitDeclarationOnly": true,
+		"jsx": "react",
 		"baseUrl": ".",
 		"rootDir": ".",
+		"rootDirs": [".", "docs/docs-components"],
 		"outDir": "dist",
 		"paths": {
 			"$lib": ["src"],
@@ -32,7 +33,8 @@
 		"src/**/*.jsx",
 		"bin/**/*.{js,cjs}",
 		"*.ts",
-		"*.js"
+		"*.js",
+		"src/docs/**/*.css"
 	],
 	"exclude": ["dist"]
 }

yarn.lock

@@ -4119,7 +4119,12 @@ eslint-config-prettier@^8.8.0:
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz#bfda738d412adc917fd7b038857110efe98c9348"
   integrity sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==
 
-eslint-config-standard-react@*:
+eslint-config-standard-jsx@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-standard-jsx/-/eslint-config-standard-jsx-11.0.0.tgz#70852d395731a96704a592be5b0bfaccfeded239"
+  integrity sha512-+1EV/R0JxEK1L0NGolAr8Iktm3Rgotx3BKwgaX+eAuSX8D952LULKtjgZD3F+e6SvibONnhLwoTi9DPxN5LvvQ==
+
+eslint-config-standard-react@*, eslint-config-standard-react@^13.0.0:
   version "13.0.0"
   resolved "https://registry.yarnpkg.com/eslint-config-standard-react/-/eslint-config-standard-react-13.0.0.tgz#dcc85bc3210dac858bc94ac53d024a5488ce5568"
   integrity sha512-HrVPGj8UncHfV+BsdJTuJpVsomn6AIrke3Af2Fh4XFvQQDU+iO6N2ZL+UsC+scExft4fU3uf7fJwj7PKWnXJDA==
@@ -4161,7 +4166,7 @@ eslint-plugin-es@^3.0.0:
     eslint-utils "^2.0.0"
     regexpp "^3.0.0"
 
-eslint-plugin-import@*:
+eslint-plugin-import@*, eslint-plugin-import@^2.27.5:
   version "2.27.5"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65"
   integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==
@@ -4196,7 +4201,7 @@ eslint-plugin-n@^16.0.0:
     resolve "^1.22.2"
     semver "^7.5.0"
 
-eslint-plugin-node@*:
+eslint-plugin-node@*, eslint-plugin-node@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz#c95544416ee4ada26740a30474eefc5402dc671d"
   integrity sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==
@@ -4208,7 +4213,7 @@ eslint-plugin-node@*:
     resolve "^1.10.1"
     semver "^6.1.0"
 
-eslint-plugin-promise@*:
+eslint-plugin-promise@*, eslint-plugin-promise@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz#269a3e2772f62875661220631bd4dafcb4083816"
   integrity sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==