Type system

.eslintrc.cjs

@@ -2,8 +2,8 @@ module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
   ignorePatterns: ['node_modules', 'docs/**'],
-  extends: ['standard'],
-  plugins: ['svelte3', '@typescript-eslint'],
+  extends: ['standard', 'plugin:svelte/recommended'],
+  plugins: ['@typescript-eslint'],
   parserOptions: {
     ecmaVersion: 2020,
     sourceType: 'module',
@@ -15,12 +15,8 @@ module.exports = {
     browser: true,
     es2022: true,
   },
-  settings: {
-    'svelte3/ignore-styles': () => true,
-    'svelte3/typescript': require('typescript'),
-  },
   rules: {
-    indent: ['error', 2],
+    indent: ['error', 2, { 'SwitchCase': 1 }],
     semi: ['error', 'always'],
     'comma-dangle': [
       'error',
@@ -38,7 +34,10 @@ module.exports = {
   overrides: [
     {
       files: ['*.svelte'],
-      processor: 'svelte3/svelte3',
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      },
       rules: {
         'no-multiple-empty-lines': ['error', { max: 2, maxBOF: 2 }],
         'import/first': 'off',

.github/workflows/canary.yaml

@@ -0,0 +1,59 @@
+name: Canary
+
+on:
+  push:
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    # Restricts to:
+    #   1) the base repository
+    #   2) NOT the default branch ("main")
+    #   3) NOT "ci skip" in commit message
+    #   4) NOT "skip ci" in commit message
+    if: |
+      github.repository == 'reuters-graphics/graphics-components' &&
+      endsWith(github.event.base_ref, github.event.repository.default_branch) != true &&
+      contains(github.event.head_commit.message, 'ci skip') != true &&
+      contains(github.event.head_commit.message, 'skip ci') != true
+    steps:
+      - id: checkout
+        name: Checkout repository
+        uses: actions/checkout@v3
+
+      - id: prepare
+        name: Prepare repository
+        run: git fetch --unshallow --tags
+
+      - id: setup-node
+        name: Setup Node.JS
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org
+
+      - id: cache
+        name: Cache node modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: yarn-deps-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            yarn-deps-${{ hashFiles('yarn.lock') }}
+
+      - id: install-deps
+        name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - id: build-package
+        name: Build package
+        run: npm run build:package
+
+      - id: canary-release
+        name: Create Canary Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx auto canary

.github/workflows/chromatic.yaml

@@ -5,6 +5,8 @@ on: push
 jobs:
   chromatic-deployment:
     runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: '--max_old_space_size=4096'
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3

.github/workflows/release.yaml

@@ -45,6 +45,10 @@ jobs:
         name: Build docs
         run: npm run build:docs
 
+      - id: build-package
+        name: Build package
+        run: npm run build:package
+
       - id: version
         name: Version
         run: npm version ${{ github.ref_name }} --no-git-tag-version

.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>

.storybook/preview.scss

@@ -1,5 +1,6 @@
-@import "../src/scss/mixins";
-@import "../src/scss/colours/thematic/tr";
+body {
+  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
+}
 
 table.docblock-argstable {
   p {
@@ -12,7 +13,14 @@ table.docblock-argstable {
   }
 }
 
-div.sbdocs-content {
+div.sbdocs :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {
+  font-size: 16px;
+}
+
+div.sbdocs-content  {
+  h1 {
+    font-family: 'Knowledge', sans-serif;
+  }
   & > h2, & > div > div > h2 {
     margin-top: 4rem;
     margin-bottom: 2rem;
@@ -26,7 +34,33 @@ div.sbdocs-content {
     margin: 1rem 0;
   }
 
- blockquote.sbdocs {
+  & > div > :where(p, ul, ol),
+  .sb-anchor > div > :where(p, ul, ol) {
+    font-size: 18px;
+    line-height: 29px;
+    font-family: 'Knowledge', sans-serif;
+
+    .highlight {
+      background-color: rgb(254, 254, 160);
+      padding: 0 4px;
+    }
+    .bold {
+      font-weight: bold;
+    }
+    a {
+      font-family: 'Knowledge', sans-serif;
+      color: #0071a1;
+      text-decoration: none;
+      text-underline-offset: 2px;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.sbdocs-content  {
+  blockquote:not(.sb-unstyled *) {
     background-color: #ededed;
     padding: 15px 20px;
     border: 1px solid #ccc;
@@ -39,17 +73,16 @@ div.sbdocs-content {
   }
 }
 
-.sbdocs {
-  @include font-display;
+.sbdocs-content div.sbdocs:not(.sb-unstyled) {
+  font-family: 'Knowledge', sans-serif;
 
   h1 {
-    @include font-display;
+    font-family: 'Knowledge', sans-serif;
   }
-
   p, ul, li {
     font-size: 18px;
     line-height: 29px;
-    @include font-display;
+    font-family: 'Knowledge', sans-serif;
 
     .highlight {
       background-color: rgb(254, 254, 160);
@@ -59,11 +92,11 @@ div.sbdocs-content {
       font-weight: bold;
     }
   }
-
   a {
-    @include font-display;
-    color: $tr-muted-blue;
+    font-family: 'Knowledge', sans-serif;
+    color: #0071a1;
     text-decoration: none;
+    text-underline-offset: 2px;
     &:hover {
       text-decoration: underline;
     }
@@ -92,7 +125,11 @@ div.sbdocs-content {
   }
 }
 
+.sbdocs.sbdocs-wrapper {
+  padding-top: 1rem;
+}
+
 div.reset-article {
   width: calc(100% + 30px);
   margin-left: -15px;
-}
+}

.storybook/preview.ts

@@ -1,7 +1,7 @@
 import '../src/scss/main.scss';
 import './preview.scss';
 
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { SyntaxHighlighter } from '@storybook/components';
 import Wrapper from './Wrapper.svelte';
 import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
 import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
@@ -42,14 +42,29 @@ export const parameters = {
         'Layout',
         ['Intro', '*'],
         'Theming',
-        ['*'],
+        ['Theme', '*'],
         'Components',
         ['Intro', '*'],
         '*',
         'Utilities',
         ['Intro', '*'],
         'SCSS',
         ['Intro', '*'],
+        'Styles',
+        [
+          'Intro',
+          'Colours', [
+            'Intro',
+            'Primary',
+            'Thematic',
+            '*',
+          ],
+          'Tokens', [
+            'Intro',
+            'Typography',
+            '*',
+          ],
+        ],
         'Actions',
         ['Intro', '*'],
         'Contributing',

.storybook/svelte-highlighting.d.ts

@@ -0,0 +1,6 @@
+declare function svelte(Prism: any): void;
+declare namespace svelte {
+    let displayName: string;
+    let aliases: any[];
+}
+export default svelte;

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
-    "unifiedjs.vscode-mdx"
+    "unifiedjs.vscode-mdx",
+    "somewhatstationery.some-sass"
   ]
 }

.vscode/settings.json

@@ -1,16 +1,21 @@
 {
   "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
   },
+  "emmet.excludeLanguages": [
+    "markdown",
+    "scss"
+  ],
   "files.associations": {
     "*.svx": "mdx"
   },
   "[mdx]": {
     "editor.wordWrap": "on"
   },
+
   "typescript.tsdk": "node_modules/typescript/lib"
 }