From 8361b0bd2595c1df069625461d52a37be70c90dd Mon Sep 17 00:00:00 2001 From: hobbes7878 Date: Wed, 20 Nov 2024 15:50:48 +0000 Subject: [PATCH 1/3] unify syntax highlighting as nord. Move some things about in page layout. Updates storybook. --- .storybook/Wrapper.svelte | 2 + .storybook/preview.scss | 5 + .storybook/preview.ts | 11 +- .storybook/syntax.scss | 142 ++++++++++++++++++ package.json | 25 +-- pnpm-lock.yaml | 69 +++------ .../stories/docs/component.md | 4 +- .../ReutersLogo/stories/docs/component.md | 2 +- .../CopyColourTable/ImportSnippet.jsx | 4 +- .../CopyColourTable/styles.module.scss | 2 + .../ThemeBuilder/NewTheme/NewTheme.jsx | 6 +- .../ThemeBuilder/NewTheme/styles.module.scss | 6 + src/docs/layout/intro.mdx | 2 +- src/docs/theme-builder/theme-builder.mdx | 2 +- src/docs/theming/css-variables.mdx | 2 +- 15 files changed, 205 insertions(+), 79 deletions(-) create mode 100644 .storybook/syntax.scss diff --git a/.storybook/Wrapper.svelte b/.storybook/Wrapper.svelte index b5f00996..34a37799 100644 --- a/.storybook/Wrapper.svelte +++ b/.storybook/Wrapper.svelte @@ -1,6 +1,8 @@ diff --git a/.storybook/preview.scss b/.storybook/preview.scss index c3b704b8..59b4b10c 100644 --- a/.storybook/preview.scss +++ b/.storybook/preview.scss @@ -1,3 +1,5 @@ +@use './syntax.scss'; + body { font-family: 'Nunito Sans', Helvetica, Arial, sans-serif; } @@ -136,3 +138,6 @@ div.reset-article { width: calc(100% + 30px); margin-left: -15px; } + + + diff --git a/.storybook/preview.ts b/.storybook/preview.ts index ba4d2b9c..25861fce 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -34,7 +34,7 @@ const preview: Preview = { // https://storybook.js.org/docs/svelte/writing-stories/naming-components-and-hierarchy#sorting-stories storySort: { method: 'alphabetical-by-kind', - includeNames: true, + includeNames: false, order: [ 'Intro', 'Guides', @@ -46,17 +46,8 @@ const preview: Preview = { '*', 'Getting help', ], - 'Layout', - ['Intro', '*'], - 'Theming', - ['Theme', 'CSS variables', '*'], 'Components', - ['Intro', '*'], '*', - 'Utilities', - ['Intro', '*'], - 'SCSS', - ['Intro', '*'], 'Styles', [ 'Intro', diff --git a/.storybook/syntax.scss b/.storybook/syntax.scss new file mode 100644 index 00000000..440594ab --- /dev/null +++ b/.storybook/syntax.scss @@ -0,0 +1,142 @@ +/** + * Nord theme styling for source code in docs + */ + +.docblock-source { + border: 6px solid #333 !important; + overflow: hidden; + border-radius: 6px !important; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important; + padding: 0 !important; + button { + background-color: #0071a1; + color: white; + border-top-left-radius: 0; + &:focus { + box-shadow: #4ee8c4 0 -3px 0 0 inset; + } + } +} + +div pre.prismjs{ + background-color: #2E3440 !important; + color: #f8f8f2; + + code[class*="language-"], + pre[class*="language-"] { + color: #f8f8f2; + background: none; + font-family: "Fira Code", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + } + + /* Code blocks */ + pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; + } + + :not(pre) > code[class*="language-"], + pre[class*="language-"] { + background: #2E3440; + } + + /* Inline code */ + :not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; + } + + .token.comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: #9199aa; + } + + .token.punctuation { + color: #81A1C1; + } + + .namespace { + opacity: .7; + } + + .token.property, + .token.tag, + .token.constant, + .token.symbol, + .token.deleted { + color: #81A1C1; + } + + .token.number { + color: #B48EAD; + } + + .token.boolean { + color: #81A1C1; + } + + .token.selector, + .token.attr-name, + .token.string, + .token.char, + .token.builtin, + .token.inserted { + color: #A3BE8C; + } + + .token.operator, + .token.entity, + .token.url, + .language-css .token.string, + .style .token.string, + .token.variable { + color: #81A1C1; + } + + .token.atrule, + .token.attr-value, + .token.function, + .token.class-name { + color: #88C0D0; + } + + .token.keyword { + color: #81A1C1; + } + + .token.regex, + .token.important { + color: #EBCB8B; + } + + .token.important, + .token.bold { + font-weight: bold; + } + + .token.italic { + font-style: italic; + } + + .token.entity { + cursor: help; + } +} diff --git a/package.json b/package.json index 2bff3519..169e8cb0 100644 --- a/package.json +++ b/package.json @@ -42,25 +42,24 @@ "@storybook/addon-actions": "^8.4.4", "@storybook/addon-backgrounds": "^8.4.4", "@storybook/addon-controls": "^8.4.4", - "@storybook/addon-docs": "^8.2.9", - "@storybook/addon-essentials": "^8.2.9", + "@storybook/addon-docs": "^8.4.4", "@storybook/addon-interactions": "^8.4.4", "@storybook/addon-links": "^8.4.4", - "@storybook/addon-mdx-gfm": "^8.2.9", + "@storybook/addon-mdx-gfm": "^8.4.4", "@storybook/addon-measure": "^8.4.4", "@storybook/addon-outline": "^8.4.4", "@storybook/addon-svelte-csf": "^4.1.7", "@storybook/addon-toolbars": "^8.4.4", "@storybook/addon-viewport": "^8.4.4", - "@storybook/blocks": "^8.2.9", - "@storybook/builder-vite": "^8.2.9", - "@storybook/components": "^8.2.9", - "@storybook/manager-api": "^8.2.9", + "@storybook/blocks": "^8.4.4", + "@storybook/builder-vite": "^8.4.4", + "@storybook/components": "^8.4.4", + "@storybook/manager-api": "^8.4.4", "@storybook/mdx2-csf": "^1.1.0", - "@storybook/svelte": "^8.2.9", - "@storybook/svelte-vite": "^8.2.9", - "@storybook/test": "^8.2.9", - "@storybook/theming": "^8.2.9", + "@storybook/svelte": "^8.4.4", + "@storybook/svelte-vite": "^8.4.4", + "@storybook/test": "^8.4.4", + "@storybook/theming": "^8.4.4", "@sveltejs/package": "^2.3.4", "@sveltejs/vite-plugin-svelte": "^3.1.1", "@types/css": "^0.0.37", @@ -74,6 +73,7 @@ "@types/prompts": "^2.4.9", "@types/proper-url-join": "^2.1.1", "@types/pym.js": "^1.3.2", + "@types/react": "^18.3.12", "@types/react-syntax-highlighter": "^15.5.7", "change-case": "^4.1.2", "chromatic": "^7.1.0", @@ -91,6 +91,7 @@ "postcss": "^8.4.41", "prettier": "^3.3.3", "prettier-plugin-svelte": "^3.2.6", + "prism-themes": "^1.9.0", "prompts": "^2.4.2", "prop-types": "^15.8.1", "publint": "^0.2.10", @@ -101,7 +102,7 @@ "remark-gfm": "^4.0.0", "rimraf": "^5.0.0", "sass": "^1.77.8", - "storybook": "^8.2.9", + "storybook": "^8.4.4", "svelte": "^4.2.18", "svelte-loader": "^3.2.3", "tiny-glob": "^0.2.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6d7c0f19..cce7148f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -73,10 +73,7 @@ importers: specifier: ^8.4.4 version: 8.4.4(storybook@8.4.4(prettier@3.3.3)) '@storybook/addon-docs': - specifier: ^8.2.9 - version: 8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3)) - '@storybook/addon-essentials': - specifier: ^8.2.9 + specifier: ^8.4.4 version: 8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3)) '@storybook/addon-interactions': specifier: ^8.4.4 @@ -85,7 +82,7 @@ importers: specifier: ^8.4.4 version: 8.4.4(react@18.3.1)(storybook@8.4.4(prettier@3.3.3)) '@storybook/addon-mdx-gfm': - specifier: ^8.2.9 + specifier: ^8.4.4 version: 8.4.4(storybook@8.4.4(prettier@3.3.3)) '@storybook/addon-measure': specifier: ^8.4.4 @@ -103,31 +100,31 @@ importers: specifier: ^8.4.4 version: 8.4.4(storybook@8.4.4(prettier@3.3.3)) '@storybook/blocks': - specifier: ^8.2.9 + specifier: ^8.4.4 version: 8.4.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.4(prettier@3.3.3)) '@storybook/builder-vite': - specifier: ^8.2.9 + specifier: ^8.4.4 version: 8.4.4(storybook@8.4.4(prettier@3.3.3))(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)) '@storybook/components': - specifier: ^8.2.9 + specifier: ^8.4.4 version: 8.4.4(storybook@8.4.4(prettier@3.3.3)) '@storybook/manager-api': - specifier: ^8.2.9 + specifier: ^8.4.4 version: 8.4.4(storybook@8.4.4(prettier@3.3.3)) '@storybook/mdx2-csf': specifier: ^1.1.0 version: 1.1.0 '@storybook/svelte': - specifier: ^8.2.9 + specifier: ^8.4.4 version: 8.4.4(storybook@8.4.4(prettier@3.3.3))(svelte@4.2.19) '@storybook/svelte-vite': - specifier: ^8.2.9 + specifier: ^8.4.4 version: 8.4.4(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)))(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(sass@1.81.0)(storybook@8.4.4(prettier@3.3.3))(svelte@4.2.19)(vite@5.4.11(@types/node@22.9.0)(sass@1.81.0)) '@storybook/test': - specifier: ^8.2.9 + specifier: ^8.4.4 version: 8.4.4(storybook@8.4.4(prettier@3.3.3)) '@storybook/theming': - specifier: ^8.2.9 + specifier: ^8.4.4 version: 8.4.4(storybook@8.4.4(prettier@3.3.3)) '@sveltejs/package': specifier: ^2.3.4 @@ -168,6 +165,9 @@ importers: '@types/pym.js': specifier: ^1.3.2 version: 1.3.2 + '@types/react': + specifier: ^18.3.12 + version: 18.3.12 '@types/react-syntax-highlighter': specifier: ^15.5.7 version: 15.5.13 @@ -219,6 +219,9 @@ importers: prettier-plugin-svelte: specifier: ^3.2.6 version: 3.2.8(prettier@3.3.3)(svelte@4.2.19) + prism-themes: + specifier: ^1.9.0 + version: 1.9.0 prompts: specifier: ^2.4.2 version: 2.4.2 @@ -250,7 +253,7 @@ importers: specifier: ^1.77.8 version: 1.81.0 storybook: - specifier: ^8.2.9 + specifier: ^8.4.4 version: 8.4.4(prettier@3.3.3) svelte: specifier: ^4.2.18 @@ -1008,16 +1011,6 @@ packages: peerDependencies: storybook: ^8.4.4 - '@storybook/addon-essentials@8.4.4': - resolution: {integrity: sha512-0ObUQ98zZkeWqP2k3Un5jny3WxT3THgUKZUGD+mR8eq6CuTmJ3bUXWzDHreuDxQwgr8s5f04XD8IcRvjZ9IRgA==} - peerDependencies: - storybook: ^8.4.4 - - '@storybook/addon-highlight@8.4.4': - resolution: {integrity: sha512-k7EUxiMe8RCasmgfa6ZKx7UG6kU9RooTYGwqY5TG5xAQOzDwKn4qom+OYkT/9/6lORhJrUe2GgQLCrq/WGpS1A==} - peerDependencies: - storybook: ^8.4.4 - '@storybook/addon-interactions@8.4.4': resolution: {integrity: sha512-izqcc6tY0BiKW7DYrEnoXUEH9FYDPWNfQnqqE0nVBv3BS2DoNmm8M9SB8fZx7pPfw53cMJBGt3vrlY0Wtxy1+Q==} peerDependencies: @@ -3515,6 +3508,9 @@ packages: resolution: {integrity: sha512-4yf0QO/sllf/1zbZWYnvWw3NxCQwLXKzIj0G849LSufP15BXKM0rbD2Z3wVnkMfjdn/CB0Dpp444gYAACdsplg==} engines: {node: '>=18'} + prism-themes@1.9.0: + resolution: {integrity: sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw==} + prismjs@1.27.0: resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==} engines: {node: '>=6'} @@ -5104,27 +5100,6 @@ snapshots: transitivePeerDependencies: - '@types/react' - '@storybook/addon-essentials@8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3))': - dependencies: - '@storybook/addon-actions': 8.4.4(storybook@8.4.4(prettier@3.3.3)) - '@storybook/addon-backgrounds': 8.4.4(storybook@8.4.4(prettier@3.3.3)) - '@storybook/addon-controls': 8.4.4(storybook@8.4.4(prettier@3.3.3)) - '@storybook/addon-docs': 8.4.4(@types/react@18.3.12)(storybook@8.4.4(prettier@3.3.3)) - '@storybook/addon-highlight': 8.4.4(storybook@8.4.4(prettier@3.3.3)) - '@storybook/addon-measure': 8.4.4(storybook@8.4.4(prettier@3.3.3)) - '@storybook/addon-outline': 8.4.4(storybook@8.4.4(prettier@3.3.3)) - '@storybook/addon-toolbars': 8.4.4(storybook@8.4.4(prettier@3.3.3)) - '@storybook/addon-viewport': 8.4.4(storybook@8.4.4(prettier@3.3.3)) - storybook: 8.4.4(prettier@3.3.3) - ts-dedent: 2.2.0 - transitivePeerDependencies: - - '@types/react' - - '@storybook/addon-highlight@8.4.4(storybook@8.4.4(prettier@3.3.3))': - dependencies: - '@storybook/global': 5.0.0 - storybook: 8.4.4(prettier@3.3.3) - '@storybook/addon-interactions@8.4.4(storybook@8.4.4(prettier@3.3.3))': dependencies: '@storybook/global': 5.0.0 @@ -6602,7 +6577,7 @@ snapshots: eslint-scope: 7.2.2 eslint-utils: 3.0.0(eslint@8.4.1) eslint-visitor-keys: 3.4.3 - espree: 9.2.0 + espree: 9.6.1 esquery: 1.6.0 esutils: 2.0.3 fast-deep-equal: 3.1.3 @@ -8326,6 +8301,8 @@ snapshots: dependencies: parse-ms: 4.0.0 + prism-themes@1.9.0: {} + prismjs@1.27.0: {} prismjs@1.29.0: {} diff --git a/src/components/ReutersGraphicsLogo/stories/docs/component.md b/src/components/ReutersGraphicsLogo/stories/docs/component.md index 55463813..6980dcaf 100644 --- a/src/components/ReutersGraphicsLogo/stories/docs/component.md +++ b/src/components/ReutersGraphicsLogo/stories/docs/component.md @@ -1,6 +1,6 @@ -Reuters Graphics' official logo. +Reuters Graphics team logo. -> Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-reuterslogo--default) component. +> Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component. ```svelte