Merge pull request #198 from reuters-graphics/gfx-logo

Gfx logo
reuters-graphics · Nov 19, 2024 · 73edb34 · 73edb34
2 parents 6621adf + b44ed64
commit 73edb34
Show file tree

Hide file tree

Showing 43 changed files with 337 additions and 186 deletions.
diff --git a/.changeset/neat-spiders-jump.md b/.changeset/neat-spiders-jump.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Reuters Graphics logo refresh
diff --git a/.storybook/Theme.ts b/.storybook/Theme.ts
@@ -4,7 +4,6 @@ export default create({
   base: 'light',
   brandTitle: 'Reuters Graphics components',
   brandUrl: 'https://reuters-graphics.github.io/graphics-components/',
-  brandImage:
-    'https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg',
+  brandImage: './logo.svg',
   brandTarget: '_self',
 });
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -3,6 +3,7 @@ import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  staticDirs: ['../public'],
   addons: [
     '@storybook/addon-svelte-csf',
     '@storybook/addon-links',

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -7,77 +7,83 @@ import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown
 import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 import svelte from './svelte-highlighting.js';
 
+import type { Preview } from '@storybook/svelte';
+
 SyntaxHighlighter.registerLanguage('scss', scss);
 SyntaxHighlighter.registerLanguage('svelte', svelte);
 SyntaxHighlighter.registerLanguage('markdown', markdown);
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  viewMode: 'docs',
-  previewTabs: { 'storybook/docs/panel': { index: -1 } },
-  controls: {
-    expanded: true,
-    sort: 'requiredFirst',
-    matchers: {
-      color: /(background|colour|Colour)$/i,
-      date: /Date$/,
+const preview: Preview = {
+  // @ts-ignore Is OK
+  decorators: [() => Wrapper],
+  tags: ['autodocs'],
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    viewMode: 'docs',
+    previewTabs: { 'storybook/docs/panel': { index: -1 } },
+    controls: {
+      expanded: true,
+      sort: 'requiredFirst',
+      matchers: {
+        color: /(background|colour|Colour)$/i,
+        date: /Date$/,
+      },
     },
-  },
-  layout: 'fullscreen',
-  options: {
-    // https://storybook.js.org/docs/svelte/writing-stories/naming-components-and-hierarchy#sorting-stories
-    storySort: {
-      method: 'alphabetical-by-kind',
-      includeNames: true,
-      order: [
-        'Intro',
-        'Guides',
-        [
-          'Using these docs',
-          'Using with the Graphics Kit',
-          'Using with Google docs',
-          'Customising components with SCSS',
-          '*',
-          'Getting help',
-        ],
-        'Layout',
-        ['Intro', '*'],
-        'Theming',
-        ['Theme', 'CSS variables', '*'],
-        'Components',
-        ['Intro', '*'],
-        '*',
-        'Utilities',
-        ['Intro', '*'],
-        'SCSS',
-        ['Intro', '*'],
-        'Styles',
-        [
+    layout: 'fullscreen',
+    options: {
+      // https://storybook.js.org/docs/svelte/writing-stories/naming-components-and-hierarchy#sorting-stories
+      storySort: {
+        method: 'alphabetical-by-kind',
+        includeNames: true,
+        order: [
           'Intro',
-          'Colours',
-          ['Intro', 'Primary', 'Thematic', '*'],
-          'Tokens',
-          ['Intro', 'Typography', '*'],
-        ],
-        'Actions',
-        ['Intro', '*'],
-        'Contributing',
-        [
-          'Quickstart',
-          'Component Basics',
+          'Guides',
+          [
+            'Using these docs',
+            'Using with the Graphics Kit',
+            'Using with Google docs',
+            'Customising components with SCSS',
+            '*',
+            'Getting help',
+          ],
+          'Layout',
+          ['Intro', '*'],
+          'Theming',
+          ['Theme', 'CSS variables', '*'],
+          'Components',
+          ['Intro', '*'],
           '*',
-          'Writing Stories',
-          'Recipes: Basic story',
-          'Recipes: Story with custom docs',
-          'Recipes: Story with custom controls',
-          'Recipes: Story with media',
-          'Recipes: Story for a component with slots',
-          'Writing docs pages',
+          'Utilities',
+          ['Intro', '*'],
+          'SCSS',
+          ['Intro', '*'],
+          'Styles',
+          [
+            'Intro',
+            'Colours',
+            ['Intro', 'Primary', 'Thematic', '*'],
+            'Tokens',
+            ['Intro', 'Typography', '*'],
+          ],
+          'Actions',
+          ['Intro', '*'],
+          'Contributing',
+          [
+            'Quickstart',
+            'Component Basics',
+            '*',
+            'Writing Stories',
+            'Recipes: Basic story',
+            'Recipes: Story with custom docs',
+            'Recipes: Story with custom controls',
+            'Recipes: Story with media',
+            'Recipes: Story for a component with slots',
+            'Writing docs pages',
+          ],
         ],
-      ],
+      },
     },
   },
 };
 
-export const decorators = [() => Wrapper];
-export const tags = ['autodocs'];
+export default preview;
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/actions/cssVariables/cssVariables.mdx b/src/actions/cssVariables/cssVariables.mdx
@@ -3,8 +3,6 @@ import { parameters } from '../../docs/utils/docsPage.js';
 
 <Meta title="Actions/cssVariables" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # `cssVariables`
 
 An action you can use to easily set [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) on HTML elements. Useful for passing JavaScript values to your component SCSS like this:

diff --git a/src/actions/resizeObserver/resizeObserver.mdx b/src/actions/resizeObserver/resizeObserver.mdx
@@ -3,8 +3,6 @@ import { parameters } from '../../docs/utils/docsPage.js';
 
 <Meta title="Actions/resizeObserver" parameters={{ ...parameters }} />
 
-![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
-
 # `resizeObserver`
 
 An action you can use to easily to check when a DOM element's dimensions change using the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). Use it like this: