initial migrations to 7
This commit is contained in:
Jon McClure
parent
a9ad3475ad
commit
0ec2a58a34
49 changed files with 3676 additions and 51876 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { create } from '@storybook/theming';
|
||||
import { create } from '@storybook/theming/create';
|
||||
|
||||
export default create({
|
||||
base: 'light',
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
const { mergeConfig } = require('vite');
|
||||
const preprocess = require('../bin/preprocess/index.cjs');
|
||||
|
||||
module.exports = {
|
||||
"stories": [
|
||||
"../src/**/*.stories.mdx",
|
||||
"../src/**/*.stories.svelte"
|
||||
],
|
||||
"addons": [
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-interactions",
|
||||
],
|
||||
"framework": "@storybook/svelte",
|
||||
"core": {
|
||||
"builder": "@storybook/builder-vite"
|
||||
},
|
||||
"features": {
|
||||
"storyStoreV7": false,
|
||||
"previewMdx2": false, // Until this is fixed: https://github.com/storybookjs/storybook/issues/18556
|
||||
},
|
||||
typescript: {
|
||||
check: false,
|
||||
},
|
||||
async viteFinal(config, { configType }) {
|
||||
return mergeConfig(config, {
|
||||
base: configType === 'PRODUCTION' ? 'https://reuters-graphics.github.io/graphics-components/' : '/',
|
||||
css: {
|
||||
preprocessorOptions: { scss: preprocess.scss },
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@reuters-graphics/graphics-components': './src',
|
||||
'$lib': './src',
|
||||
'$docs': './src/docs',
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
svelteOptions: {
|
||||
preprocess: preprocess.sveltePreprocess,
|
||||
},
|
||||
}
|
||||
35
.storybook/main.ts
Normal file
35
.storybook/main.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import type { StorybookConfig } from '@storybook/svelte-vite';
|
||||
import { mergeConfig } from 'vite';
|
||||
import { scss } from '../bin/preprocess/index.js';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
"stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.svelte"],
|
||||
"addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm", '@storybook/addon-svelte-csf'],
|
||||
"framework": '@storybook/svelte-vite',
|
||||
typescript: {
|
||||
check: false
|
||||
},
|
||||
async viteFinal(config, {
|
||||
configType
|
||||
}) {
|
||||
return mergeConfig(config, {
|
||||
base: configType === 'PRODUCTION' ? 'https://reuters-graphics.github.io/graphics-components/' : '/',
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@reuters-graphics/graphics-components': './src',
|
||||
'$lib': './src',
|
||||
'$docs': './src/docs'
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
docs: {
|
||||
autodocs: true
|
||||
}
|
||||
};
|
||||
export default config;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { addons } from '@storybook/addons';
|
||||
import { addons } from '@storybook/manager-api';
|
||||
import theme from './Theme';
|
||||
|
||||
addons.setConfig({
|
||||
|
|
@ -8,7 +8,6 @@ addons.setConfig({
|
|||
panelPosition: 'bottom',
|
||||
enableShortcuts: true,
|
||||
showToolbar: true,
|
||||
theme: undefined,
|
||||
selectedPanel: undefined,
|
||||
initialActive: 'sidebar',
|
||||
sidebar: {
|
||||
|
|
@ -39,32 +39,36 @@ div.sbdocs-content {
|
|||
}
|
||||
}
|
||||
|
||||
p.sbdocs-p, ul.sbdocs-ul, li.sbdocs-li {
|
||||
font-size: 18px;
|
||||
line-height: 29px;
|
||||
@include font-display;
|
||||
|
||||
.highlight {
|
||||
background-color: rgb(254, 254, 160);
|
||||
padding: 0 4px;
|
||||
}
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
a.sbdocs-a {
|
||||
@include font-display;
|
||||
color: $tr-muted-blue;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.sbdocs {
|
||||
@include font-display;
|
||||
|
||||
h1 {
|
||||
@include font-display;
|
||||
}
|
||||
|
||||
p, ul, li {
|
||||
font-size: 18px;
|
||||
line-height: 29px;
|
||||
@include font-display;
|
||||
|
||||
.highlight {
|
||||
background-color: rgb(254, 254, 160);
|
||||
padding: 0 4px;
|
||||
}
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include font-display;
|
||||
color: $tr-muted-blue;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.sbdocs-preview) {
|
||||
code {
|
||||
font-size: 90%;
|
||||
|
|
@ -88,8 +92,6 @@ a.sbdocs-a {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.reset-article {
|
||||
width: calc(100% + 30px);
|
||||
margin-left: -15px;
|
||||
|
|
|
|||
|
|
@ -67,4 +67,4 @@ export const parameters = {
|
|||
}
|
||||
};
|
||||
|
||||
export const decorators = [() => ({ Component: Wrapper })];
|
||||
export const decorators = [() => Wrapper];
|
||||
|
|
@ -2,8 +2,8 @@ import { DIST, LIB } from './../locations.js';
|
|||
|
||||
import fs from 'fs-extra';
|
||||
import path from 'path';
|
||||
import preprocess from '../../preprocess/index.cjs';
|
||||
import { preprocess as svelte } from 'svelte/compiler';
|
||||
import { sveltePreprocess } from '../../preprocess/index.js';
|
||||
|
||||
const stripLangTags = (source) =>
|
||||
source
|
||||
|
|
@ -13,7 +13,7 @@ const stripLangTags = (source) =>
|
|||
export default async (file) => {
|
||||
const filename = path.join(LIB, file);
|
||||
let source = fs.readFileSync(filename, 'utf8');
|
||||
source = (await svelte(source, preprocess.sveltePreprocess, { filename })).code
|
||||
source = (await svelte(source, sveltePreprocess, { filename })).code
|
||||
const writePath = path.join(DIST, file);
|
||||
fs.ensureDirSync(path.dirname(writePath));
|
||||
fs.writeFileSync(writePath, stripLangTags(source));
|
||||
|
|
|
|||
|
|
@ -13,9 +13,7 @@
|
|||
// @ts-ignore
|
||||
import SharkImg from './stories/shark.jpg';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/YourComponent',
|
||||
component: YourComponent,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
// https://storybook.js.org/docs/svelte/essentials/controls
|
||||
argTypes: {
|
||||
|
|
@ -27,7 +25,11 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title='Components/YourComponent'
|
||||
component={YourComponent}
|
||||
{...metaProps}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<YourComponent {...args} />
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
const autoprefixer = require('autoprefixer');
|
||||
const preprocess = require('svelte-preprocess');
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
|
||||
const scss = {
|
||||
export const scss = {
|
||||
includePaths: ['src/', 'node_modules/bootstrap/scss/'],
|
||||
importer: [
|
||||
(url) => {
|
||||
if (/^\$lib/.test(url)){ return { file: `src/${url.replace('$lib', '')}` }; }
|
||||
if (/^\$lib/.test(url)) { return { file: `src/${url.replace('$lib', '')}` }; }
|
||||
// Redirect tilde-prefixed imports to node_modules
|
||||
if (/^~/.test(url)) { return { file: `node_modules/${url.replace('~', '')}` }; }
|
||||
return null;
|
||||
|
|
@ -14,7 +14,7 @@ const scss = {
|
|||
quietDeps: true,
|
||||
};
|
||||
|
||||
const sveltePreprocess = preprocess({
|
||||
export const sveltePreprocess = preprocess({
|
||||
preserve: ['ld+json'],
|
||||
typescript: true,
|
||||
scss,
|
||||
|
|
@ -22,8 +22,3 @@ const sveltePreprocess = preprocess({
|
|||
plugins: [autoprefixer],
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
scss,
|
||||
sveltePreprocess
|
||||
}
|
||||
44296
package-lock.json
generated
44296
package-lock.json
generated
File diff suppressed because it is too large
Load diff
91
package.json
91
package.json
|
|
@ -6,10 +6,10 @@
|
|||
"homepage": "https://reuters-graphics.github.io/graphics-components",
|
||||
"repository": "https://github.com/reuters-graphics/graphics-components",
|
||||
"scripts": {
|
||||
"start": "start-storybook -p 3000",
|
||||
"start": "storybook dev -p 3000",
|
||||
"new": "node ./bin/newComponent/index.cjs",
|
||||
"build:package": "node ./bin/buildPackage/index.js",
|
||||
"build:docs": "build-storybook -o docs && touch ./docs/.nojekyll",
|
||||
"build:docs": "storybook build -o docs && touch ./docs/.nojekyll",
|
||||
"build": "npm-run-all build:package build:docs",
|
||||
"prepublishOnly": "npm run build:package",
|
||||
"postversion": "git push origin && git push origin --tags"
|
||||
|
|
@ -20,59 +20,62 @@
|
|||
"dist"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=16.7"
|
||||
"node": ">=16.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.18.9",
|
||||
"@babel/eslint-parser": "^7.15.4",
|
||||
"@babel/eslint-plugin": "^7.14.5",
|
||||
"@babel/preset-env": "^7.15.6",
|
||||
"@evilmartians/lefthook": "^1.0.1",
|
||||
"@babel/core": "^7.21.4",
|
||||
"@babel/eslint-parser": "^7.21.3",
|
||||
"@babel/eslint-plugin": "^7.19.1",
|
||||
"@babel/preset-env": "^7.21.4",
|
||||
"@evilmartians/lefthook": "^1.3.10",
|
||||
"@reuters-graphics/eslint-config": "^0.0.2",
|
||||
"@storybook/addon-actions": "6.5.9",
|
||||
"@storybook/addon-essentials": "6.5.9",
|
||||
"@storybook/addon-interactions": "6.5.9",
|
||||
"@storybook/addon-links": "6.5.9",
|
||||
"@storybook/addon-svelte-csf": "^2.0.6",
|
||||
"@storybook/builder-vite": "^0.2.1",
|
||||
"@storybook/mdx2-csf": "^0.0.3",
|
||||
"@storybook/svelte": "6.5.9",
|
||||
"@storybook/testing-library": "^0.0.13",
|
||||
"@storybook/theming": "6.5.9",
|
||||
"@sveltejs/vite-plugin-svelte": "^1.0.1",
|
||||
"@tsconfig/svelte": "^3.0.0",
|
||||
"@storybook/addon-actions": "^7.0.7",
|
||||
"@storybook/addon-essentials": "^7.0.7",
|
||||
"@storybook/addon-interactions": "^7.0.7",
|
||||
"@storybook/addon-links": "^7.0.7",
|
||||
"@storybook/addon-mdx-gfm": "^7.0.7",
|
||||
"@storybook/addon-svelte-csf": "^3.0.2",
|
||||
"@storybook/manager-api": "^7.0.7",
|
||||
"@storybook/mdx2-csf": "^1.0.0",
|
||||
"@storybook/svelte": "^7.0.7",
|
||||
"@storybook/svelte-vite": "^7.0.7",
|
||||
"@storybook/testing-library": "^0.1.0",
|
||||
"@storybook/theming": "^7.0.7",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.0.4",
|
||||
"@tsconfig/svelte": "^4.0.1",
|
||||
"@types/proper-url-join": "^2.1.1",
|
||||
"@types/react-syntax-highlighter": "^15.5.4",
|
||||
"@typescript-eslint/eslint-plugin": "^5.33.1",
|
||||
"@typescript-eslint/parser": "^5.32.0",
|
||||
"autoprefixer": "^10.2.5",
|
||||
"babel-loader": "^8.2.5",
|
||||
"@types/react-syntax-highlighter": "^15.5.6",
|
||||
"@typescript-eslint/eslint-plugin": "^5.58.0",
|
||||
"@typescript-eslint/parser": "^5.58.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"babel-loader": "^9.1.2",
|
||||
"change-case": "^4.1.2",
|
||||
"esbuild-plugin-alias": "^0.2.1",
|
||||
"esbuild-register": "^3.3.3",
|
||||
"eslint": "^8.16.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-n": "^15.2.4",
|
||||
"eslint-plugin-storybook": "^0.6.1",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-n": "^15.7.0",
|
||||
"eslint-plugin-storybook": "^0.6.11",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"fs-extra": "^10.1.0",
|
||||
"fs-extra": "^11.1.1",
|
||||
"kleur": "^4.1.5",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss": "^8.4.22",
|
||||
"postcss-load-config": "^4.0.1",
|
||||
"prettier": "^2.3.2",
|
||||
"prettier-plugin-svelte": "^2.4.0",
|
||||
"prettier": "^2.8.7",
|
||||
"prettier-plugin-svelte": "^2.10.0",
|
||||
"prompts": "^2.4.2",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass": "^1.54.0",
|
||||
"svelte": "^3.49.0",
|
||||
"svelte-loader": "^3.1.3",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
"svelte2tsx": "^0.5.13",
|
||||
"rimraf": "^5.0.0",
|
||||
"sass": "^1.62.0",
|
||||
"storybook": "^7.0.7",
|
||||
"svelte": "^3.58.0",
|
||||
"svelte-loader": "^3.1.7",
|
||||
"svelte-preprocess": "^5.0.3",
|
||||
"svelte2tsx": "^0.6.11",
|
||||
"tiny-glob": "^0.2.9",
|
||||
"typescript": "^4.7.4",
|
||||
"vite": "^3.0.4"
|
||||
"typescript": "^5.0.4",
|
||||
"vite": "^4.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
|
|
@ -237,4 +240,4 @@
|
|||
".": "./dist/index.js"
|
||||
},
|
||||
"svelte": "./dist/index.js"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<script>
|
||||
<script lang="ts">
|
||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// Don't lose the "?raw" in markdown imports!
|
||||
|
|
@ -13,16 +13,14 @@
|
|||
import {
|
||||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Layout/Article',
|
||||
component: Article,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
} from '../../docs/utils/withParams.js';
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Layout/Article"
|
||||
component="{Article}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<Article {...args} />
|
||||
|
|
|
|||
|
|
@ -20,9 +20,7 @@
|
|||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/BeforeAfter',
|
||||
component: BeforeAfter,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
handleColour: { control: 'color' },
|
||||
|
|
@ -34,7 +32,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta title="Components/BeforeAfter" component="{BeforeAfter}" {...metaProps} />
|
||||
|
||||
<Template let:args>
|
||||
<BeforeAfter {...args} />
|
||||
|
|
|
|||
|
|
@ -13,11 +13,8 @@
|
|||
|
||||
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Layout/Block',
|
||||
component: Block,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
// https://storybook.js.org/docs/svelte/essentials/controls
|
||||
argTypes: {
|
||||
width: {
|
||||
control: 'select',
|
||||
|
|
@ -35,7 +32,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta title="Layout/Block" component="{Block}" {...metaProps} />
|
||||
|
||||
<Template let:args>
|
||||
<Article id="block-demo-article">
|
||||
|
|
|
|||
|
|
@ -7,15 +7,13 @@
|
|||
import BodyText from './BodyText.svelte';
|
||||
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/BodyText',
|
||||
component: BodyText,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/BodyText"
|
||||
component="{BodyText}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<BodyText {...args} />
|
||||
|
|
|
|||
|
|
@ -13,9 +13,7 @@
|
|||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/DatawrapperChart',
|
||||
component: DatawrapperChart,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
width: {
|
||||
|
|
@ -26,7 +24,11 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/DatawrapperChart"
|
||||
component="{DatawrapperChart}"
|
||||
{...metaProps}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<DatawrapperChart {...args} />
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@
|
|||
|
||||
import { withComponentDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/DocumentCloud',
|
||||
component: DocumentCloud,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
width: {
|
||||
|
|
@ -22,7 +20,11 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/DocumentCloud"
|
||||
component="{DocumentCloud}"
|
||||
{...metaProps}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<DocumentCloud {...args} />
|
||||
|
|
|
|||
|
|
@ -6,26 +6,22 @@
|
|||
|
||||
import EmbedPreviewerLink from './EmbedPreviewerLink.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Utilities/EmbedPreviewerLink',
|
||||
component: EmbedPreviewerLink,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Utilities/EmbedPreviewerLink"
|
||||
component="{EmbedPreviewerLink}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<EmbedPreviewerLink {...args} />
|
||||
<EmbedPreviewerLink {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args={{
|
||||
dev: true
|
||||
}}
|
||||
args="{{
|
||||
dev: true,
|
||||
}}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -18,20 +18,22 @@
|
|||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/FeaturePhoto',
|
||||
component: FeaturePhoto,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
width: {
|
||||
control: 'select',
|
||||
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/FeaturePhoto"
|
||||
component="{FeaturePhoto}"
|
||||
{...metaProps}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<FeaturePhoto {...args} />
|
||||
|
|
@ -39,31 +41,31 @@
|
|||
|
||||
<Story
|
||||
name="Default"
|
||||
args={{
|
||||
args="{{
|
||||
src: sharkSrc,
|
||||
altText: 'A shark!',
|
||||
width: 'normal',
|
||||
caption: 'Carcharodon carcharias - REUTERS'
|
||||
}}
|
||||
caption: 'Carcharodon carcharias - REUTERS',
|
||||
}}"
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="🚀 QUICKIT"
|
||||
args={{
|
||||
args="{{
|
||||
src: sharkSrc,
|
||||
altText: 'A shark!',
|
||||
width: 'normal',
|
||||
caption: 'Carcharodon carcharias - REUTERS'
|
||||
}}
|
||||
caption: 'Carcharodon carcharias - REUTERS',
|
||||
}}"
|
||||
{...withStoryDocs(quickitDocs)}
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="Missing altText"
|
||||
args={{
|
||||
args="{{
|
||||
src: sharkSrc,
|
||||
width: 'normal',
|
||||
caption: 'Carcharodon carcharias - REUTERS'
|
||||
}}
|
||||
caption: 'Carcharodon carcharias - REUTERS',
|
||||
}}"
|
||||
{...withStoryDocs(missingAltTextDocs)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,14 @@
|
|||
|
||||
import Framer from './Framer.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Utilities/Framer',
|
||||
component: Framer,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Utilities/Framer"
|
||||
component="{Framer}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<Framer {...args} />
|
||||
|
|
@ -25,9 +21,9 @@
|
|||
|
||||
<Story
|
||||
name="Default"
|
||||
args={{
|
||||
args="{{
|
||||
embeds: [
|
||||
'https://graphics.reuters.com/USA-CONGRESS/FUNDRAISING/zjvqkawjlvx/embeds/en/embed/?zzz',
|
||||
],
|
||||
}}
|
||||
}}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -21,11 +21,8 @@
|
|||
// @ts-ignore
|
||||
import PlaceholderImg from './stories/placeholder.png';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/GraphicBlock',
|
||||
component: GraphicBlock,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
// https://storybook.js.org/docs/svelte/essentials/controls
|
||||
argTypes: {
|
||||
width: {
|
||||
control: 'select',
|
||||
|
|
@ -39,7 +36,11 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/GraphicBlock"
|
||||
component="{GraphicBlock}"
|
||||
{...metaProps}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<GraphicBlock {...args}>
|
||||
|
|
@ -54,15 +55,14 @@
|
|||
args="{{
|
||||
width: 'normal',
|
||||
title: 'Bacon ipsum dolor amet t-bone',
|
||||
description: "Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta.",
|
||||
notes: "Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
|
||||
description:
|
||||
'Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta.',
|
||||
notes:
|
||||
'Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)',
|
||||
}}"
|
||||
/>
|
||||
|
||||
<Story
|
||||
name="🚀 QUICKIT"
|
||||
{...withStoryDocs(quickitDocs)}
|
||||
>
|
||||
<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
|
||||
<GraphicBlock
|
||||
width="normal"
|
||||
title="Earthquake in Haiti"
|
||||
|
|
@ -73,13 +73,8 @@
|
|||
</GraphicBlock>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Custom text"
|
||||
{...withStoryDocs(customTextDocs)}
|
||||
>
|
||||
<GraphicBlock
|
||||
width="normal"
|
||||
>
|
||||
<Story name="Custom text" {...withStoryDocs(customTextDocs)}>
|
||||
<GraphicBlock width="normal">
|
||||
<div slot="title">
|
||||
<h5>My smaller title</h5>
|
||||
</div>
|
||||
|
|
@ -92,10 +87,7 @@
|
|||
</GraphicBlock>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Ai2svelte"
|
||||
{...withStoryDocs(ai2svelteDocs)}
|
||||
>
|
||||
<Story name="Ai2svelte" {...withStoryDocs(ai2svelteDocs)}>
|
||||
<GraphicBlock
|
||||
width="normal"
|
||||
title="Earthquake in Haiti"
|
||||
|
|
@ -106,10 +98,7 @@
|
|||
</GraphicBlock>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="ARIA"
|
||||
{...withStoryDocs(ariaDocs)}
|
||||
>
|
||||
<Story name="ARIA" {...withStoryDocs(ariaDocs)}>
|
||||
<GraphicBlock
|
||||
width="normal"
|
||||
title="Earthquake in Haiti"
|
||||
|
|
@ -132,4 +121,4 @@
|
|||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,15 +19,13 @@
|
|||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Headline',
|
||||
component: Headline,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/Headline"
|
||||
component="{Headline}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<Headline {...args} />
|
||||
|
|
|
|||
|
|
@ -9,19 +9,14 @@
|
|||
|
||||
import Hero from './Hero.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Hero',
|
||||
component: Hero,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/Hero"
|
||||
component="{Hero}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<Hero {...args} />
|
||||
|
|
@ -29,9 +24,9 @@
|
|||
|
||||
<Story
|
||||
name="Default"
|
||||
args={{
|
||||
args="{{
|
||||
section: 'World News',
|
||||
hed: 'Reuters Graphics interactive',
|
||||
imgSrc: polarImgSrc,
|
||||
}}
|
||||
/>
|
||||
}}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,14 @@
|
|||
|
||||
import NoteText from './NoteText.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/NoteText',
|
||||
component: NoteText,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/NoteText"
|
||||
component="{NoteText}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<NoteText {...args} />
|
||||
|
|
@ -25,13 +21,13 @@
|
|||
|
||||
<Story
|
||||
name="Default"
|
||||
args={{
|
||||
args="{{
|
||||
text: `## Source
|
||||
|
||||
[European Forest Fire Information System](https://effis.jrc.ec.europa.eu/); Reuters research
|
||||
|
||||
#### Credits
|
||||
|
||||
Jane Doe & John Doe`
|
||||
}}
|
||||
Jane Doe & John Doe`,
|
||||
}}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -8,15 +8,13 @@
|
|||
import Block from '../Block/Block.svelte';
|
||||
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Utilities/PaddingReset',
|
||||
component: PaddingReset,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Utilities/PaddingReset"
|
||||
component="{PaddingReset}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<Block width="fluid">
|
||||
|
|
|
|||
|
|
@ -15,11 +15,8 @@
|
|||
|
||||
const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
|
||||
|
||||
const meta = {
|
||||
title: 'Components/PhotoCarousel',
|
||||
component: PhotoCarousel,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
// https://storybook.js.org/docs/svelte/essentials/controls
|
||||
argTypes: {
|
||||
width: {
|
||||
control: 'select',
|
||||
|
|
@ -29,7 +26,11 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/PhotoCarousel"
|
||||
component="{PhotoCarousel}"
|
||||
{...metaProps}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<PhotoCarousel {...args} />
|
||||
|
|
|
|||
|
|
@ -13,9 +13,7 @@
|
|||
|
||||
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/PhotoPack',
|
||||
component: PhotoPack,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
width: {
|
||||
|
|
@ -121,7 +119,7 @@
|
|||
const altTextLayouts = [{ breakpoint: 450, rows: [2] }];
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta title="Components/PhotoPack" component="{PhotoPack}" {...metaProps} />
|
||||
|
||||
<Template let:args>
|
||||
<PhotoPack {...args} />
|
||||
|
|
|
|||
|
|
@ -6,24 +6,18 @@
|
|||
|
||||
import PymChild from './PymChild.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Utilities/PymChild',
|
||||
component: PymChild,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Utilities/PymChild"
|
||||
component="{PymChild}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<PymChild {...args} />
|
||||
<div>Nothing to see here. 😎</div>
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
/>
|
||||
<Story name="Default" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// Don't lose the "?raw" in markdown imports!
|
||||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
|
||||
|
|
@ -9,11 +8,8 @@
|
|||
|
||||
import { withComponentDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/ReferralBlock',
|
||||
component: ReferralBlock,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
// https://storybook.js.org/docs/svelte/essentials/controls
|
||||
argTypes: {
|
||||
width: {
|
||||
control: 'select',
|
||||
|
|
@ -39,7 +35,11 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/ReferralBlock"
|
||||
component="{ReferralBlock}"
|
||||
{...metaProps}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<ReferralBlock {...args} />
|
||||
|
|
|
|||
|
|
@ -8,16 +8,13 @@
|
|||
import ReutersGraphicsLogo from './ReutersGraphicsLogo.svelte';
|
||||
|
||||
import { withComponentDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/ReutersGraphicsLogo',
|
||||
component: ReutersGraphicsLogo,
|
||||
...withComponentDocs(componentDocs),
|
||||
// https://storybook.js.org/docs/svelte/essentials/controls
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/ReutersGraphicsLogo"
|
||||
component="{ReutersGraphicsLogo}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<ReutersGraphicsLogo {...args} />
|
||||
|
|
|
|||
|
|
@ -6,27 +6,21 @@
|
|||
|
||||
import ReutersLogo from './ReutersLogo.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/ReutersLogo',
|
||||
component: ReutersLogo,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
logoColour: { control: 'color' },
|
||||
textColour: { control: 'color' },
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta title="Components/ReutersLogo" component="{ReutersLogo}" {...metaProps} />
|
||||
|
||||
<Template let:args>
|
||||
<ReutersLogo {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
/>
|
||||
<Story name="Default" />
|
||||
|
|
|
|||
|
|
@ -12,15 +12,13 @@
|
|||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/SEO',
|
||||
component: SEO,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/SEO"
|
||||
component="{SEO}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<SEO {...args} />
|
||||
|
|
|
|||
|
|
@ -57,9 +57,7 @@
|
|||
],
|
||||
};
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Scroller',
|
||||
component: Scroller,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
steps: { control: false },
|
||||
|
|
@ -79,7 +77,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta title="Components/Scroller" component="{Scroller}" {...metaProps} />
|
||||
|
||||
<Template let:args>
|
||||
<Scroller {...args} />
|
||||
|
|
|
|||
|
|
@ -6,23 +6,17 @@
|
|||
|
||||
import Sharer from './Sharer.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Utilities/Sharer',
|
||||
component: Sharer,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Utilities/Sharer"
|
||||
component="{Sharer}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<Sharer {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
/>
|
||||
<Story name="Default" />
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@
|
|||
|
||||
import { withComponentDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/SimpleTimeline',
|
||||
component: SimpleTimeline,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
symbolColour: { control: 'color' },
|
||||
|
|
@ -94,7 +92,11 @@
|
|||
];
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/SimpleTimeline"
|
||||
component="{SimpleTimeline}"
|
||||
{...metaProps}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<SimpleTimeline {...args} />
|
||||
|
|
|
|||
|
|
@ -16,12 +16,6 @@
|
|||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/SiteFooter',
|
||||
component: SiteFooter,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
|
||||
const customReferrals = [
|
||||
{
|
||||
url: 'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/',
|
||||
|
|
@ -40,7 +34,11 @@
|
|||
];
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/SiteFooter"
|
||||
component="{SiteFooter}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<div>
|
||||
|
|
@ -48,7 +46,7 @@
|
|||
</div>
|
||||
</Template>
|
||||
|
||||
<Story name="Default" />
|
||||
<Story name="Default" id="site-footer--default" />
|
||||
|
||||
<Story name="Customised theme" {...withStoryDocs(darkThemeDocs)}>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,7 @@
|
|||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/SiteHeader',
|
||||
component: SiteHeader,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
argsTypes: {
|
||||
themes: { control: { disable: true } },
|
||||
|
|
@ -24,7 +22,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta title="Components/SiteHeader" component="{SiteHeader}" {...metaProps} />
|
||||
|
||||
<Template let:args>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -13,12 +13,6 @@
|
|||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/SiteHeadline',
|
||||
component: SiteHeadline,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
|
||||
const content = {
|
||||
Section: 'Global News',
|
||||
SectionUrl: '',
|
||||
|
|
@ -29,7 +23,11 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/SiteHeadline"
|
||||
component="{SiteHeadline}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<SiteHeadline {...args} />
|
||||
|
|
|
|||
|
|
@ -6,26 +6,23 @@
|
|||
|
||||
import Spinner from './Spinner.svelte';
|
||||
|
||||
import {
|
||||
withSource,
|
||||
withComponentDocs
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Spinner',
|
||||
component: Spinner,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
colour: { control: 'color' },
|
||||
ringWidth: { control: { type: 'range', min: 2, max: 20, step: 1 } },
|
||||
width: { control: { type: 'range', min: 5, max: 100, step: 5 } },
|
||||
speed: { control: { type: 'range', min: 0.2, max: 1.0, step: 0.1 } },
|
||||
containerPadding: { control: { type: 'range', min: 5, max: 100, step: 5 } },
|
||||
containerPadding: {
|
||||
control: { type: 'range', min: 5, max: 100, step: 5 },
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta title="Components/Spinner" component="{Spinner}" {...metaProps} />
|
||||
|
||||
<Template let:args>
|
||||
<Spinner {...args} />
|
||||
|
|
|
|||
|
|
@ -27,17 +27,13 @@
|
|||
|
||||
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
// You can import JSON you need in stories directly in code!
|
||||
// @ts-ignore
|
||||
import pressFreedom from './stories/pressFreedom.json';
|
||||
import homeRuns from './stories/homeRuns.json';
|
||||
import richestWomen from './stories/richestWomen.json';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Table',
|
||||
component: Table,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
// https://storybook.js.org/docs/svelte/essentials/controls
|
||||
argTypes: {
|
||||
width: {
|
||||
control: 'select',
|
||||
|
|
@ -47,7 +43,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta title="Components/Table" component="{Table}" {...metaProps} />
|
||||
|
||||
<Template let:args>
|
||||
<Table {...args} />
|
||||
|
|
|
|||
|
|
@ -20,9 +20,7 @@
|
|||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Theming/Theme',
|
||||
component: Theme,
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
argTypes: {
|
||||
base: {
|
||||
|
|
@ -34,7 +32,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta title="Theming/Theme" component="{Theme}" {...metaProps} />
|
||||
|
||||
<Template let:args>
|
||||
<div class="reset-article">
|
||||
|
|
|
|||
|
|
@ -8,15 +8,13 @@
|
|||
import ToolsHeader from './ToolsHeader.svelte';
|
||||
|
||||
import { withComponentDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Utilities/ToolsHeader',
|
||||
component: ToolsHeader,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Utilities/ToolsHeader"
|
||||
component="{ToolsHeader}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -21,15 +21,13 @@
|
|||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Video',
|
||||
component: Video,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/Video"
|
||||
component="{Video}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<Video {...args} />
|
||||
|
|
|
|||
|
|
@ -9,15 +9,13 @@
|
|||
import Visible from './Visible.svelte';
|
||||
|
||||
import { withSource, withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Visible',
|
||||
component: Visible,
|
||||
...withComponentDocs(componentDocs),
|
||||
};
|
||||
</script>
|
||||
|
||||
<Meta {...meta} />
|
||||
<Meta
|
||||
title="Components/Visible"
|
||||
component="{Visible}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<Visible {...args} let:visible>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,7 @@ import quickitImg from './imgs/quickit.png';
|
|||
|
||||
If you haven't, check out ["Using Reuters Graphics Components" in the Graphics Kit docs](https://reuters-graphics.github.io/docs_graphics-kit/for_developers/graphics-components/) to get a general idea of how to use components.
|
||||
|
||||
<span class="highlight">
|
||||
Look for <strong>🚀 QUICKIT</strong> stories
|
||||
</span> (Quick Kit 🤣🙄) for some of our most commonly used components. These stories
|
||||
Look <span class="highlight">for <strong>🚀 QUICKIT</strong> stories</span> (Quick Kit 🤣🙄) for some of our most commonly used components. These stories
|
||||
include easy copy/paste snippets as well as Google Doc block examples that should
|
||||
shortcut getting a component working in the Graphics Kit.
|
||||
|
||||
|
|
|
|||
14
svelte.config.js
Normal file
14
svelte.config.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import autoprefixer from 'autoprefixer';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
|
||||
const config = {
|
||||
preprocess: preprocess({
|
||||
preserve: ['ld+json'],
|
||||
scss: { quietDeps: true },
|
||||
postcss: {
|
||||
plugins: [autoprefixer],
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
@ -1,29 +1,37 @@
|
|||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"module": "es2020",
|
||||
"target": "es2019",
|
||||
"module": "esnext",
|
||||
"target": "esnext",
|
||||
"declaration": true,
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"baseUrl": ".",
|
||||
"rootDir": ".",
|
||||
"outDir": "dist",
|
||||
"paths": {
|
||||
"$lib": ["src"],
|
||||
"$lib/*": ["src/*"],
|
||||
"$docs": ["src/docs"],
|
||||
"$docs/*": ["src/docs/*"]
|
||||
}
|
||||
},
|
||||
"verbatimModuleSyntax": true,
|
||||
"sourceMap": true,
|
||||
"strict": false,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.js",
|
||||
"src/**/*.ts",
|
||||
"src/**/*.svelte",
|
||||
"bin/**/*.{js,cjs}"
|
||||
"bin/**/*.{js,cjs}",
|
||||
"*.ts",
|
||||
"*.js"
|
||||
],
|
||||
"exclude": ["dist"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { scss, sveltePreprocess } from './bin/preprocess/index.cjs';
|
||||
|
||||
import { defineConfig } from 'vite';
|
||||
import { scss } from './bin/preprocess/index.js';
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
/** @type {import('vite').UserConfig} */
|
||||
const config = {
|
||||
const config = defineConfig({
|
||||
base: 'https://reuters-graphics.github.io/graphics-components/',
|
||||
css: {
|
||||
preprocessorOptions: { scss },
|
||||
|
|
@ -16,11 +16,8 @@ const config = {
|
|||
},
|
||||
},
|
||||
plugins: [
|
||||
svelte({
|
||||
configFile: false,
|
||||
preprocess: sveltePreprocess,
|
||||
}),
|
||||
svelte({}),
|
||||
],
|
||||
};
|
||||
});
|
||||
|
||||
export default config;
|
||||
|
|
|
|||
Loading…
Reference in a new issue