diff --git a/.storybook/Wrapper.svelte b/.storybook/Wrapper.svelte new file mode 100644 index 00000000..2ed234b6 --- /dev/null +++ b/.storybook/Wrapper.svelte @@ -0,0 +1,10 @@ + + + +
+ +
+ \ No newline at end of file diff --git a/.storybook/main.cjs b/.storybook/main.cjs index 871bccbd..4fc3918e 100644 --- a/.storybook/main.cjs +++ b/.storybook/main.cjs @@ -17,7 +17,7 @@ module.exports = { }, "features": { "storyStoreV7": false, - "previewMdx2": true, + "previewMdx2": false, // Until this is fixed: https://github.com/storybookjs/storybook/issues/18556 }, typescript: { check: false, diff --git a/.storybook/preview.js b/.storybook/preview.js index 64f54904..b9d4325a 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,8 +1,8 @@ import '../src/scss/main.scss'; import './preview.scss'; -import Article from '../src/components/Article/Article.svelte'; import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; +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'; import svelte from './svelte-highlighting.js'; @@ -41,6 +41,8 @@ export const parameters = { ], 'Layout', ['Intro', '*'], + 'Theming', + ['*'], 'Components', ['Intro', '*'], '*', @@ -65,4 +67,4 @@ export const parameters = { } }; -export const decorators = [() => ({ Component: Article })]; +export const decorators = [() => ({ Component: Wrapper })]; diff --git a/.storybook/preview.scss b/.storybook/preview.scss index 6c3d4cc1..6ff288d3 100644 --- a/.storybook/preview.scss +++ b/.storybook/preview.scss @@ -67,14 +67,21 @@ a.sbdocs-a { } -// .sbdocs { -// max-width: 800px; -// margin: 0 auto !important; -// display: block; -// } -// .sbdocs.sbdocs-pre { -// max-width: 1000px; -// } -// .sbdocs.sbdocs-wrapper, .sbdocs.sbdocs-content, .sbdocs.sbdocs-preview { -// max-width: 100%; -// } +code { + font-size: 90%; + margin-left: 2px; + margin-right: 2px; + background-color: #efefef; + padding: 2px 4px; +} + +img { + display: block; + margin-top: 1rem; + margin-bottom: 2rem; +} + +div.reset-article { + width: calc(100% + 30px); + margin-left: -15px; +} \ No newline at end of file diff --git a/src/components/Article/Article.svelte b/src/components/Article/Article.svelte index b1cdeef7..33dc5f83 100644 --- a/src/components/Article/Article.svelte +++ b/src/components/Article/Article.svelte @@ -55,6 +55,7 @@ margin: 0; padding: 0 15px; overflow-x: hidden; + background-color: var(--theme-colour-background, transparent); &.embedded { overflow: auto; } diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte index 715b8908..67e90f2d 100644 --- a/src/components/BeforeAfter/BeforeAfter.svelte +++ b/src/components/BeforeAfter/BeforeAfter.svelte @@ -100,16 +100,16 @@ const move = (e) => { if (sliding && imgOffset) { const el = e.touches ? e.touches[0] : e; - const figureOffset = figure - ? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) - : 0; + const figureOffset = figure ? + parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) : + 0; let x = el.pageX - figureOffset - imgOffset.left; x = - x < handleMargin - ? handleMargin - : x > w - handleMargin - ? w - handleMargin - : x; + x < handleMargin ? + handleMargin : + x > w - handleMargin ? + w - handleMargin : + x; offset = x / w; } }; @@ -229,7 +229,7 @@ {/if} diff --git a/src/components/Headline/stories/docs/component.md b/src/components/Headline/stories/docs/component.md index 36c5ac63..904afa54 100644 --- a/src/components/Headline/stories/docs/component.md +++ b/src/components/Headline/stories/docs/component.md @@ -9,6 +9,5 @@ Reuters Graphics headline hed="{'Reuters Graphics Interactive'}" dek="{'The beginning of a beautiful page'}" section="{'Global news'}" - sectionColour="{'orange'}" /> ``` diff --git a/src/components/Headline/stories/docs/withByline.md b/src/components/Headline/stories/docs/withByline.md index 3f59865d..1badf2df 100644 --- a/src/components/Headline/stories/docs/withByline.md +++ b/src/components/Headline/stories/docs/withByline.md @@ -9,7 +9,6 @@ Add a byline and dateline with `byline` and `dateline` named slots. hed="{'Reuters Graphics Interactive'}" dek="{'The beginning of a beautiful page'}" section="{'Global news'}" - sectionColour="{'orange'}" > By Peppa Pig diff --git a/src/components/ReutersLogo/ReutersLogo.svelte b/src/components/ReutersLogo/ReutersLogo.svelte index e218a9bf..0ba74528 100644 --- a/src/components/ReutersLogo/ReutersLogo.svelte +++ b/src/components/ReutersLogo/ReutersLogo.svelte @@ -15,8 +15,8 @@ > + style="fill: {logoColour};"> + style="fill: {textColour};"> diff --git a/src/components/SiteFooter/SiteFooter.stories.svelte b/src/components/SiteFooter/SiteFooter.stories.svelte index 9a704635..e75cead5 100644 --- a/src/components/SiteFooter/SiteFooter.stories.svelte +++ b/src/components/SiteFooter/SiteFooter.stories.svelte @@ -8,20 +8,18 @@ // @ts-ignore import customReferralsDocs from './stories/docs/customReferrals.md?raw'; - import SiteFooter, { themes } from './SiteFooter.svelte'; + import SiteFooter from './SiteFooter.svelte'; + import Theme from '../Theme/Theme.svelte'; import { withComponentDocs, - withStoryDocs, + withStoryDocs } from '$lib/docs/utils/withParams.js'; const meta = { title: 'Components/SiteFooter', component: SiteFooter, ...withComponentDocs(componentDocs), - argsTypes: { - themes: { control: { disable: true } }, - }, }; const customReferrals = [ @@ -54,11 +52,14 @@ +> +
+ + + +
+ - /** - * Exported preset themes you can use to customise the `theme` prop. - */ - export const themes = { - default: { - background: '#fff', - primary: '#404040', - rules: '#d0d0d0', - }, - dark: { - background: '#333', - primary: '#eee', - rules: '#999', - }, - }; - -