lots
This commit is contained in:
hobbes7878
parent
c31955edac
commit
f39de5df26
62 changed files with 7283 additions and 7036 deletions
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"name": "Node.js",
|
||||
"image": "mcr.microsoft.com/devcontainers/javascript-node:0-20",
|
||||
"postCreateCommand": "npm install"
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
docs
|
||||
dist
|
||||
node_modules
|
||||
node_modules
|
||||
!src/docs/
|
||||
|
|
@ -4,14 +4,13 @@ import remarkGfm from 'remark-gfm';
|
|||
const config: StorybookConfig = {
|
||||
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
|
||||
addons: [
|
||||
'@storybook/addon-svelte-csf',
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-actions',
|
||||
'@storybook/addon-viewport',
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
options: {
|
||||
csfPluginOptions: null,
|
||||
jsxOptions: {},
|
||||
mdxPluginOptions: {
|
||||
mdxCompileOptions: {
|
||||
remarkPlugins: [remarkGfm],
|
||||
|
|
@ -25,12 +24,12 @@ const config: StorybookConfig = {
|
|||
'@storybook/addon-measure',
|
||||
'@storybook/addon-outline',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-svelte-csf',
|
||||
'@chromatic-com/storybook',
|
||||
],
|
||||
framework: '@storybook/svelte-vite',
|
||||
core: { disableTelemetry: true },
|
||||
docs: {
|
||||
autodocs: true,
|
||||
core: {
|
||||
disableTelemetry: true,
|
||||
},
|
||||
docs: {},
|
||||
};
|
||||
export default config;
|
||||
|
|
|
|||
|
|
@ -79,3 +79,4 @@ export const parameters = {
|
|||
};
|
||||
|
||||
export const decorators = [() => Wrapper];
|
||||
export const tags = ['autodocs'];
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
import autoprefixer from 'autoprefixer';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
|
||||
export const scss = {
|
||||
includePaths: ['src/', 'node_modules/bootstrap/scss/'],
|
||||
importer: [
|
||||
(url) => {
|
||||
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;
|
||||
},
|
||||
],
|
||||
quietDeps: true,
|
||||
};
|
||||
|
||||
export const sveltePreprocess = preprocess({
|
||||
preserve: ['ld+json'],
|
||||
typescript: true,
|
||||
scss,
|
||||
postcss: {
|
||||
plugins: [autoprefixer],
|
||||
},
|
||||
});
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
import { svelte } from '@reuters-graphics/yaks-eslint';
|
||||
import reactPlugin from 'eslint-plugin-react';
|
||||
import * as mdx from 'eslint-plugin-mdx';
|
||||
|
||||
/**
|
||||
* @type {import("eslint").Linter.Config[]}
|
||||
*/
|
||||
export default [
|
||||
{
|
||||
files: ['src/**/*.{js,ts,svelte,jsx,tsx}', '.storybook/**/*'],
|
||||
files: ['src/**/*.{js,ts,svelte,jsx,tsx,mdx}', '.storybook/**/*'],
|
||||
},
|
||||
{
|
||||
ignores: [
|
||||
|
|
@ -31,4 +32,18 @@ export default [
|
|||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
...mdx.flat,
|
||||
processor: mdx.createRemarkProcessor({
|
||||
lintCodeBlocks: true,
|
||||
}),
|
||||
},
|
||||
{
|
||||
...mdx.flatCodeBlocks,
|
||||
rules: {
|
||||
...mdx.flatCodeBlocks.rules,
|
||||
'no-undef': 'off',
|
||||
'@typescript-eslint/no-unused-vars': 'off',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
13365
package-lock.json
generated
13365
package-lock.json
generated
File diff suppressed because it is too large
Load diff
54
package.json
54
package.json
|
|
@ -38,26 +38,27 @@
|
|||
"devDependencies": {
|
||||
"@americanexpress/css-to-js": "^1.0.1",
|
||||
"@changesets/cli": "^2.27.7",
|
||||
"@chromatic-com/storybook": "^1.7.0",
|
||||
"@evilmartians/lefthook": "^1.7.14",
|
||||
"@mdx-js/mdx": "^3.0.1",
|
||||
"@reuters-graphics/yaks-eslint": "^0.0.6",
|
||||
"@reuters-graphics/yaks-prettier": "^0.0.4",
|
||||
"@storybook/addon-actions": "^7.4.2",
|
||||
"@storybook/addon-docs": "^7.4.2",
|
||||
"@storybook/addon-essentials": "^7.4.2",
|
||||
"@storybook/addon-interactions": "^7.4.2",
|
||||
"@storybook/addon-links": "^7.4.2",
|
||||
"@storybook/addon-mdx-gfm": "^7.4.2",
|
||||
"@storybook/addon-svelte-csf": "^4.0.7",
|
||||
"@storybook/blocks": "^7.4.2",
|
||||
"@storybook/builder-vite": "^7.4.2",
|
||||
"@storybook/manager-api": "^7.4.2",
|
||||
"@storybook/addon-actions": "^8.2.9",
|
||||
"@storybook/addon-docs": "^8.2.9",
|
||||
"@storybook/addon-essentials": "^8.2.9",
|
||||
"@storybook/addon-interactions": "^8.2.9",
|
||||
"@storybook/addon-links": "^8.2.9",
|
||||
"@storybook/addon-mdx-gfm": "^8.2.9",
|
||||
"@storybook/addon-svelte-csf": "^4.1.5",
|
||||
"@storybook/blocks": "^8.2.9",
|
||||
"@storybook/builder-vite": "^8.2.9",
|
||||
"@storybook/components": "^8.2.9",
|
||||
"@storybook/manager-api": "^8.2.9",
|
||||
"@storybook/mdx2-csf": "^1.1.0",
|
||||
"@storybook/svelte": "^7.4.2",
|
||||
"@storybook/svelte-vite": "^7.4.2",
|
||||
"@storybook/testing-library": "^0.1.0",
|
||||
"@storybook/theming": "^7.4.2",
|
||||
"@sveltejs/vite-plugin-svelte": "^2.4.1",
|
||||
"@storybook/svelte": "^8.2.9",
|
||||
"@storybook/svelte-vite": "^8.2.9",
|
||||
"@storybook/test": "^8.2.9",
|
||||
"@storybook/theming": "^8.2.9",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"@types/google-publisher-tag": "^1.20240219.0",
|
||||
"@types/gtag.js": "^0.0.12",
|
||||
|
|
@ -73,14 +74,15 @@
|
|||
"css-color-converter": "^2.0.0",
|
||||
"deep-object-diff": "^1.1.9",
|
||||
"eslint": "^9.9.0",
|
||||
"eslint-plugin-mdx": "^3.1.5",
|
||||
"eslint-plugin-react": "^7.35.0",
|
||||
"fs-extra": "^11.1.1",
|
||||
"kleur": "^4.1.5",
|
||||
"knip": "^5.27.2",
|
||||
"mermaid": "^10.3.0",
|
||||
"mermaid": "^10.9.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.24",
|
||||
"postcss-load-config": "^4.0.1",
|
||||
"postcss": "^8.4.41",
|
||||
"postcss-load-config": "^6.0.1",
|
||||
"prettier": "^3.3.3",
|
||||
"prompts": "^2.4.2",
|
||||
"prop-types": "^15.8.1",
|
||||
|
|
@ -89,17 +91,17 @@
|
|||
"react-colorful": "^5.6.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"rimraf": "^5.0.0",
|
||||
"sass": "^1.65.1",
|
||||
"storybook": "^7.4.2",
|
||||
"svelte": "^4.2.8",
|
||||
"svelte-loader": "^3.1.9",
|
||||
"svelte-preprocess": "^5.1.3",
|
||||
"sass": "^1.77.8",
|
||||
"storybook": "^8.2.9",
|
||||
"svelte": "^4.2.18",
|
||||
"svelte-loader": "^3.2.3",
|
||||
"svelte-preprocess": "^6.0.2",
|
||||
"svelte2tsx": "^0.6.27",
|
||||
"tiny-glob": "^0.2.9",
|
||||
"typescript": "^5.5.4",
|
||||
"vite": "^4.4.9"
|
||||
"vite": "^5.4.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.3",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="Actions/cssVariables" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../docs/utils/docsPage.js';
|
||||
|
||||
<Meta title="Actions/resizeObserver" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||
<script lang="ts">
|
||||
import { Template, Story, Meta } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// @ts-ignore raw
|
||||
import adDocs from './stories/docs/inline.md?raw';
|
||||
|
|
@ -7,10 +7,9 @@
|
|||
import AdScripts from './AdScripts.svelte';
|
||||
import InlineAd from './InlineAd.svelte';
|
||||
|
||||
import { withComponentDocs } from '$docs/utils/withParams.js';
|
||||
import { withComponentDocs } from '../../docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/InlineAd',
|
||||
component: InlineAd,
|
||||
...withComponentDocs(adDocs),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InlineAd--default) -->
|
||||
<script lang="ts">
|
||||
import Block from '../Block/Block.svelte';
|
||||
import { InlineAd } from './@types/ads';
|
||||
import type { InlineAd } from './@types/ads';
|
||||
import ResponsiveAd from './ResponsiveAd.svelte';
|
||||
|
||||
/** Add an ID to target with SCSS. */
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
import { withComponentDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/LeaderboardAd',
|
||||
component: LeaderboardAd,
|
||||
...withComponentDocs(adDocs),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) -->
|
||||
<script lang="ts">
|
||||
import { LeaderboardAd } from './@types/ads';
|
||||
import type { LeaderboardAd } from './@types/ads';
|
||||
import ResponsiveAd from './ResponsiveAd.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
import { withComponentDocs } from '$docs/utils/withParams.js';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/SponsorshipAd',
|
||||
component: SponsorshipAd,
|
||||
...withComponentDocs(adDocs),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->
|
||||
<script lang="ts">
|
||||
import Block from '../Block/Block.svelte';
|
||||
import { SponsorshipAd } from './@types/ads';
|
||||
import type { SponsorshipAd } from './@types/ads';
|
||||
import ResponsiveAd from './ResponsiveAd.svelte';
|
||||
|
||||
/** Add an ID to target with SCSS. */
|
||||
|
|
|
|||
|
|
@ -261,13 +261,11 @@
|
|||
}
|
||||
.overlay-container {
|
||||
position: absolute;
|
||||
:global {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
:global(:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
:global(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.before {
|
||||
left: 0;
|
||||
|
|
@ -336,10 +334,8 @@
|
|||
}
|
||||
|
||||
aside.before-after-caption {
|
||||
:global {
|
||||
p {
|
||||
@include body-caption;
|
||||
}
|
||||
:global(p) {
|
||||
@include body-caption;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,5 +32,4 @@ Use text elements in your overlays as [ARIA descriptions](https://developer.mozi
|
|||
}
|
||||
}
|
||||
</style>
|
||||
</BeforeAfter>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,7 +11,10 @@
|
|||
import Block from './Block.svelte';
|
||||
import Article from '../Article/Article.svelte';
|
||||
|
||||
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
|
||||
import {
|
||||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '../../docs/utils/withParams.js';
|
||||
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
|
|
|
|||
|
|
@ -120,51 +120,63 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
|
|||
&:before {
|
||||
content: 'H2';
|
||||
@include heading-tag;
|
||||
font-size: 22px;
|
||||
& {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: 'H3';
|
||||
@include heading-tag;
|
||||
font-size: 19px;
|
||||
h3 {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: 'H3';
|
||||
@include heading-tag;
|
||||
& {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: 'H4';
|
||||
@include heading-tag;
|
||||
font-size: 16px;
|
||||
h4 {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: 'H4';
|
||||
@include heading-tag;
|
||||
& {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: 'H5';
|
||||
@include heading-tag;
|
||||
font-size: 15px;
|
||||
h5 {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: 'H5';
|
||||
@include heading-tag;
|
||||
& {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: 'H6';
|
||||
@include heading-tag;
|
||||
font-size: 12px;
|
||||
h6 {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: 'H6';
|
||||
@include heading-tag;
|
||||
& {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
position: relative;
|
||||
&:before {
|
||||
@include heading-tag;
|
||||
content: '“';
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
blockquote:before {
|
||||
display: none;
|
||||
blockquote {
|
||||
position: relative;
|
||||
&:before {
|
||||
@include heading-tag;
|
||||
& {
|
||||
content: '“';
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
blockquote:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
|
||||
<script lang="ts">
|
||||
import { HeadlineSize } from '../@types/global';
|
||||
import type { HeadlineSize } from './../@types/global';
|
||||
|
||||
/**
|
||||
* Headline, parsed as an _inline_ markdown string in an `h1` element.
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
import Byline from '../Byline/Byline.svelte';
|
||||
import Markdown from '../Markdown/Markdown.svelte';
|
||||
|
||||
let hedClass;
|
||||
let hedClass: string;
|
||||
$: {
|
||||
switch (hedSize) {
|
||||
case 'biggest':
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) -->
|
||||
<script lang="ts">
|
||||
import { HeadlineSize } from '../@types/global';
|
||||
import type { HeadlineSize } from '../@types/global';
|
||||
|
||||
/** Set to true for embeddables. */
|
||||
export let embedded: boolean = false;
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@
|
|||
import Block from '../Block/Block.svelte';
|
||||
import { Splide, SplideSlide, SplideTrack } from '@splidejs/svelte-splide';
|
||||
import '@splidejs/svelte-splide/css/core';
|
||||
// @ts-ignore no types
|
||||
import Fa from 'svelte-fa/src/fa.svelte';
|
||||
import {
|
||||
faChevronLeft,
|
||||
|
|
@ -92,7 +93,7 @@
|
|||
import { fly } from 'svelte/transition';
|
||||
import PaddingReset from '../PaddingReset/PaddingReset.svelte';
|
||||
|
||||
let containerWidth;
|
||||
let containerWidth: number;
|
||||
|
||||
let activeImageIndex = 0;
|
||||
|
||||
|
|
@ -214,78 +215,72 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
:global {
|
||||
.splide {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.splide__arrows {
|
||||
width: 275px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
&.splide__arrow--prev {
|
||||
padding-right: 7px;
|
||||
}
|
||||
&.splide__arrow--next {
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
@include text-secondary;
|
||||
opacity: 0.4;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-color: $theme-colour-text-secondary;
|
||||
@include text-secondary;
|
||||
}
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.splide__pagination {
|
||||
width: 200px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
margin: -26px auto 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
li {
|
||||
flex-grow: 1;
|
||||
margin-top: -9px;
|
||||
button {
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
border: 1px solid $theme-colour-background;
|
||||
background: $theme-colour-text-secondary;
|
||||
opacity: 0.4;
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:global(.splide) {
|
||||
max-height: 100%;
|
||||
}
|
||||
:global(li) {
|
||||
padding: 0;
|
||||
}
|
||||
:global(.splide__arrows) {
|
||||
width: 275px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
:global(.splide__arrows button) {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
@include text-secondary;
|
||||
opacity: 0.4;
|
||||
}
|
||||
:global(.splide__arrows button.splide__arrow--prev) {
|
||||
padding-right: 7px;
|
||||
}
|
||||
:global(.splide__arrows button.splide__arrow--next) {
|
||||
padding-left: 7px;
|
||||
}
|
||||
:global(.splide__arrows button:hover) {
|
||||
opacity: 1;
|
||||
border-color: $theme-colour-text-secondary;
|
||||
@include text-secondary;
|
||||
}
|
||||
:global(.splide__arrows button:disabled) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
:global(.splide__arrows button:disabled:hover) {
|
||||
border-color: transparent;
|
||||
}
|
||||
:global(ul.splide__pagination) {
|
||||
width: 200px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
margin: -26px auto 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
:global(ul.splide__pagination li) {
|
||||
flex-grow: 1;
|
||||
margin-top: -9px;
|
||||
}
|
||||
:global(ul.splide__pagination li button) {
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
border: 1px solid $theme-colour-background;
|
||||
background: $theme-colour-text-secondary;
|
||||
opacity: 0.4;
|
||||
}
|
||||
:global(ul.splide__pagination li button.is-active) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,10 +34,10 @@ The `PhotoPack` component makes simple photo grids with custom layouts at whatev
|
|||
`layouts` describe how those images will be laid out in rows at different breakpoints. The default layout (mobile-first) is each photo on its own row, stacked vertically, but you can group photos into `rows` above a `breakpoint` by specifying the number of photos that should go in that row. For example:
|
||||
|
||||
```javascript
|
||||
{
|
||||
const layouts = [{
|
||||
breakpoint: 450,
|
||||
rows: [1,2,1],
|
||||
}
|
||||
}];
|
||||
```
|
||||
|
||||
... tells the component that when the `PhotoPack` container is 450 pixels or wider, it should group the 4 photos in 3 rows, 1 in the first, 2 in the second and 1 in the last.
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
Set the `title`, `dek`, `notes` and `source` options to add supporting metadata above and below the table.
|
||||
|
||||
```svelte
|
||||
<Table data="{yourData}" title="{'Career home run leaders'}" dek="{'In baseball,
|
||||
<Table
|
||||
data="{yourData}"
|
||||
title="{'Career home run leaders'}"
|
||||
dek="{`In baseball,
|
||||
a home run (also known as a "dinger" or "tater") occurs when a batter hits the
|
||||
ball over the outfield fence. When a home run is hit, the batter and any runners
|
||||
on base are able to score.'}" notes="{'Note: As of Opening Day 2023'}"
|
||||
source="{'Source: Baseball Reference'}" />
|
||||
on base are able to score.`}"
|
||||
notes="{'Note: As of Opening Day 2023'}"
|
||||
source="{'Source: Baseball Reference'}"
|
||||
/>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -17,12 +17,12 @@
|
|||
|
||||
import Theme, { themes } from './Theme.svelte';
|
||||
|
||||
import Headline from '../Headline/Headline.svelte';
|
||||
import Headline from './../Headline/Headline.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
} from '../../docs/utils/withParams.js';
|
||||
|
||||
const metaProps = {
|
||||
...withComponentDocs(componentDocs),
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
<Meta title="Actions/Intro" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
<Meta
|
||||
title="Contributing/Component guidelines"
|
||||
|
|
@ -83,13 +83,13 @@ Using some future syntax like [optional chaining](https://developer.mozilla.org/
|
|||
So instead of...
|
||||
|
||||
```javascript
|
||||
myObject?.myOptionalProp;
|
||||
const prop = myObject?.myOptionalProp;
|
||||
```
|
||||
|
||||
...unfortunately, use something old-fashioned like...
|
||||
|
||||
```javascript
|
||||
myObject.myOptionalProp ? myObject.myOptionalProp : null;
|
||||
const prop = myObject.myOptionalProp ? myObject.myOptionalProp : null;
|
||||
```
|
||||
|
||||
If your component docs still aren't working, check if you're using other future-JS sytax, for now.
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
<Meta title="Contributing/Quickstart" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../utils/docsPage.js';
|
||||
|
||||
<Meta
|
||||
title="Contributing/Recipes: Basic story"
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../utils/docsPage.js';
|
||||
|
||||
<Meta
|
||||
title="Contributing/Recipes: Story with custom controls"
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../utils/docsPage.js';
|
||||
|
||||
import SourceCodeImg from './source-code.png';
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../utils/docsPage.js';
|
||||
|
||||
<Meta
|
||||
title="Contributing/Recipes: Story with media"
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
<Meta title="Contributing/Writing stories" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
<Meta title="Contributing/Writing docs pages" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
import startImg from './imgs/scss-start.png';
|
||||
import highlightImg from './imgs/scss-highlight.png';
|
||||
|
|
@ -19,8 +19,10 @@ import winningImg from './imgs/scss-winning.png';
|
|||
|
||||
One of the most powerful ways to customise components isn't props or, even, Svelte.
|
||||
|
||||
<p class="sbdocs-p">
|
||||
<span class="highlight bold">It's SCSS and your web inspector!</span>
|
||||
<p className="sbdocs-p">
|
||||
<span className="highlight bold">
|
||||
It’s SCSS and your web inspector!
|
||||
</span>
|
||||
</p>
|
||||
|
||||
## How's that??
|
||||
|
|
@ -29,13 +31,13 @@ Let's say you wanted to change our `BeforeAfter` component. You want the text ov
|
|||
|
||||
<img src={startImg} width="600" />
|
||||
|
||||
The first thing you should do is <span class="highlight">check out the elements you want to change in your web inspector</span> and see if CSS can make the change you want.
|
||||
The first thing you should do is <span className="highlight">check out the elements you want to change in your web inspector</span> and see if CSS can make the change you want.
|
||||
|
||||
<img src={highlightImg} width="300" style={{ margin: '0 0 1rem' }} />
|
||||
|
||||
<img src={inspectorImg} width="100%" />
|
||||
|
||||
In our case, we want to change the absolute position of those elements. To test that'll actually work, we can <span class="highlight">try it directly in the inspector first!</span>
|
||||
In our case, we want to change the absolute position of those elements. To test that'll actually work, we can <span className="highlight">try it directly in the inspector first!</span>
|
||||
|
||||
<img src={changeImg} width="500" style={{ margin: '0 0 1rem' }} />
|
||||
|
||||
|
|
@ -47,7 +49,7 @@ First, let's look at the class of the style rule we changed in the inspector:
|
|||
|
||||
`figure.before-after-container.s-khJY-w4TYkp5 .overlay-container.before.s-khJY-w4TYkp5`
|
||||
|
||||
One thing we always need to do is <span class="highlight">strip out any Svelte class names</span>, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
|
||||
One thing we always need to do is <span className="highlight">strip out any Svelte class names</span>, i.e., those weird `.s-khJY-w4TYkp5` classes. Why? Those are random classes Svelte adds to CSS, and we can't guarantee they won't change.
|
||||
|
||||
That leaves us with:
|
||||
|
||||
|
|
@ -55,7 +57,7 @@ That leaves us with:
|
|||
|
||||
But we need our style rule to _beat_ the original style in the CSS cascade, and right now, it's less specific without those class names we stripped.
|
||||
|
||||
The easiest way to make sure your style rule wins out is to <span class="highlight">add an ID either directly to the element or to a parent</span>. In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)
|
||||
The easiest way to make sure your style rule wins out is to <span className="highlight">add an ID either directly to the element or to a parent</span>. In our case, let's add an ID through the `BeforeAfter` `id` prop. Now we can use it! (For extra credit, though, we'll drop the `.before` so our new style rule applies to _both_ overlays.)
|
||||
|
||||
```scss
|
||||
figure#my-before-after .overlay-container {
|
||||
|
|
@ -81,7 +83,7 @@ div#my-before-after figure .overlay-container {
|
|||
}
|
||||
```
|
||||
|
||||
We can <span class="highlight">confirm the new style rule is winning by looking at its order back in our web inspector!</span>
|
||||
We can <span className="highlight">confirm the new style rule is winning by looking at its order back in our web inspector!</span>
|
||||
|
||||
<img src={winningImg} width="500" style={{ margin: '0 0 1rem' }} />
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
<Meta title="Guides/Getting help" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
<Meta title="Guides/Using with Google docs" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -55,18 +55,19 @@ Now we can tie that data into your blocks loop like this:
|
|||
</script>
|
||||
|
||||
{#each content.blocks as block}
|
||||
<!-- ... -->
|
||||
|
||||
{#if block.Type}
|
||||
<!-- ... -->
|
||||
{:else if block.Type === 'profile-card'}
|
||||
<ProfileCard
|
||||
name="{block.Name}"
|
||||
img={`${assets}/${block.Image}`}
|
||||
birthday={new Date(block.Birthday)}
|
||||
img="{`${assets}/${block.Image}`}"
|
||||
birthday="{new Date(block.Birthday)}"
|
||||
bio="{block.Bio}"
|
||||
isStaff={block.Staff === 'true'}
|
||||
isStaff="{block.Staff === 'true'}"
|
||||
/>
|
||||
|
||||
<!-- ... -->
|
||||
<!-- ... -->
|
||||
{/if}
|
||||
{/each}
|
||||
```
|
||||
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
|
||||
import quickitImg from './imgs/quickit.png';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
<Meta
|
||||
title="Guides/Using with the Graphics Kit"
|
||||
|
|
@ -16,7 +14,7 @@ If you haven't, check out ["Using Reuters Graphics Components" in the Graphics K
|
|||
|
||||
## Quickit
|
||||
|
||||
Look <span class="highlight">for <strong>🚀 QUICKIT</strong> stories</span> (Quick Kit 🤣🙄) for some of our most commonly used components. These stories
|
||||
Look <span className="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.
|
||||
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
import storiesImg from './imgs/stories.png';
|
||||
import introImg from './imgs/intro.png';
|
||||
import argsImg from './imgs/argstable.png';
|
||||
import frameImg from './imgs/frame.png';
|
||||
import copyImg from './imgs/copy-code.png';
|
||||
import propImg from './imgs/prop.png';
|
||||
import moreStoriesImg from './imgs/more-stories.png';
|
||||
|
||||
<Meta title="Guides/Using these docs" parameters={{ ...parameters }} />
|
||||
|
|
@ -38,7 +37,7 @@ Next is a **frame** that shows how the component looks. Each story will have its
|
|||
|
||||
<img src={frameImg} width="650" style={{ margin: '0 0 2rem' }} />
|
||||
|
||||
Below the story frame is an **args table**. <span class="highlight bold">This is the most important part of every component's page.</span> The args table documents all the [props](https://learn.svelte.dev/tutorial/declaring-props) and [slots](https://learn.svelte.dev/tutorial/slots) a component has, i.e., all the ways you can customise it.
|
||||
Below the story frame is an **args table**. <span className="highlight bold">This is the most important part of every component’s page.</span> The args table documents all the [props](https://learn.svelte.dev/tutorial/declaring-props) and [slots](https://learn.svelte.dev/tutorial/slots) a component has, i.e., all the ways you can customise it.
|
||||
|
||||
<img src={argsImg} width="100%" style={{ margin: '0 0 2rem', maxWidth: 800 }} />
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from './utils/docsPage.js';
|
||||
|
||||
<Meta title="Intro" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -9,18 +9,11 @@ import { parameters } from '$docs/utils/docsPage.js';
|
|||
|
||||
<p>
|
||||
<a href="https://www.npmjs.com/package/@reuters-graphics/graphics-components">
|
||||
<img
|
||||
src="https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components.svg"
|
||||
alt="npm version"
|
||||
style={{ display: 'inline-block', margin: '0 5px 0 0' }}
|
||||
/>
|
||||
<img src="https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components.svg" alt="npm version" style={{ display: 'inline-block', margin: '0 5px 0 0' }} />
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/reuters-graphics/graphics-components">
|
||||
<img
|
||||
src="https://badgen.net/badge/icon/GitHub?icon=github&label"
|
||||
alt="GitHub"
|
||||
style={{ display: 'inline-block', margin: '0 5px 0 0' }}
|
||||
/>
|
||||
<img src="https://badgen.net/badge/icon/GitHub?icon=github&label" alt="GitHub" style={{ display: 'inline-block', margin: '0 5px 0 0' }} />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
import WellImg from './article-well.jpg';
|
||||
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
|
||||
import { extractCssColourVariables } from '../../utils/parseCss';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../utils/docsPage.js';
|
||||
|
||||
<Meta title="Styles/Colours/Intro" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,73 +1,29 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../utils/docsPage.js';
|
||||
import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
|
||||
import { extractCssColourVariables } from '../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import greyScheme from '$lib/scss/colours/primary/\_grey.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import slateScheme from '$lib/scss/colours/primary/\_slate.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import zincScheme from '$lib/scss/colours/primary/\_zinc.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import neutralScheme from '$lib/scss/colours/primary/\_neutral.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import stoneScheme from '$lib/scss/colours/primary/\_stone.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import redScheme from '$lib/scss/colours/primary/\_red.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import orangeScheme from '$lib/scss/colours/primary/\_orange.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import amberScheme from '$lib/scss/colours/primary/\_amber.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import yellowScheme from '$lib/scss/colours/primary/\_yellow.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import limeScheme from '$lib/scss/colours/primary/\_lime.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import greenScheme from '$lib/scss/colours/primary/\_green.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import emeraldScheme from '$lib/scss/colours/primary/\_emerald.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import tealScheme from '$lib/scss/colours/primary/\_teal.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import cyanScheme from '$lib/scss/colours/primary/\_cyan.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import skyScheme from '$lib/scss/colours/primary/\_sky.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import blueScheme from '$lib/scss/colours/primary/\_blue.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import indigoScheme from '$lib/scss/colours/primary/\_indigo.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import violetScheme from '$lib/scss/colours/primary/\_violet.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import purpleScheme from '$lib/scss/colours/primary/\_purple.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fuchsiaScheme from '$lib/scss/colours/primary/\_fuchsia.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import pinkScheme from '$lib/scss/colours/primary/\_pink.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import roseScheme from '$lib/scss/colours/primary/\_rose.scss?raw';
|
||||
import greyScheme from '../../../scss/colours/primary/_grey.scss?raw';
|
||||
import slateScheme from '../../../scss/colours/primary/_slate.scss?raw';
|
||||
import zincScheme from '../../../scss/colours/primary/_zinc.scss?raw';
|
||||
import neutralScheme from '../../../scss/colours/primary/_neutral.scss?raw';
|
||||
import stoneScheme from '../../../scss/colours/primary/_stone.scss?raw';
|
||||
import redScheme from '../../../scss/colours/primary/_red.scss?raw';
|
||||
import orangeScheme from '../../../scss/colours/primary/_orange.scss?raw';
|
||||
import amberScheme from '../../../scss/colours/primary/_amber.scss?raw';
|
||||
import yellowScheme from '../../../scss/colours/primary/_yellow.scss?raw';
|
||||
import limeScheme from '../../../scss/colours/primary/_lime.scss?raw';
|
||||
import greenScheme from '../../../scss/colours/primary/_green.scss?raw';
|
||||
import emeraldScheme from '../../../scss/colours/primary/_emerald.scss?raw';
|
||||
import tealScheme from '../../../scss/colours/primary/_teal.scss?raw';
|
||||
import cyanScheme from '../../../scss/colours/primary/_cyan.scss?raw';
|
||||
import skyScheme from '../../../scss/colours/primary/_sky.scss?raw';
|
||||
import blueScheme from '../../../scss/colours/primary/_blue.scss?raw';
|
||||
import indigoScheme from '../../../scss/colours/primary/_indigo.scss?raw';
|
||||
import violetScheme from '../../../scss/colours/primary/_violet.scss?raw';
|
||||
import purpleScheme from '../../../scss/colours/primary/_purple.scss?raw';
|
||||
import fuchsiaScheme from '../../../scss/colours/primary/_fuchsia.scss?raw';
|
||||
import pinkScheme from '../../../scss/colours/primary/_pink.scss?raw';
|
||||
import roseScheme from '../../../scss/colours/primary/_rose.scss?raw';
|
||||
|
||||
<Meta title="Styles/Colours/Primary" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,13 +1,10 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../utils/docsPage.js';
|
||||
import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
|
||||
import { extractCssColourVariables } from '../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import trScheme from '$lib/scss/colours/thematic/\_tr.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import nordScheme from '$lib/scss/colours/thematic/\_nord.scss?raw';
|
||||
import trScheme from '../../../scss/colours/thematic/_tr.scss?raw';
|
||||
import nordScheme from '../../../scss/colours/thematic/_nord.scss?raw';
|
||||
|
||||
<Meta title="Styles/Colours/Thematic" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from './../utils/docsPage.js';
|
||||
|
||||
<Meta title="Styles/Intro" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../../utils/docsPage.js';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import visibilityStyles from '$lib/scss/tokens/accessibility/\_visibility.scss?inline';
|
||||
import visibilityStyles from '../../../../scss/tokens/accessibility/_visibility.scss?inline';
|
||||
|
||||
<Meta title="Styles/Tokens/Accessibility" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../../utils/docsPage.js';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import backgroundColor from '$lib/scss/tokens/backgrounds/\_background-color.scss?inline';
|
||||
import backgroundColor from '../../../../scss/tokens/backgrounds/_background-color.scss?inline';
|
||||
|
||||
<Meta title="Styles/Tokens/Backgrounds" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,19 +1,11 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../../utils/docsPage.js';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderColor from '$lib/scss/tokens/borders/\_border-color.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderRadius from '$lib/scss/tokens/borders/\_border-radius.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderStyle from '$lib/scss/tokens/borders/\_border-style.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import borderWidth from '$lib/scss/tokens/borders/\_border-width.scss?raw';
|
||||
import borderColor from '../../../../scss/tokens/borders/_border-color.scss?raw';
|
||||
import borderRadius from '../../../../scss/tokens/borders/_border-radius.scss?raw';
|
||||
import borderStyle from '../../../../scss/tokens/borders/_border-style.scss?raw';
|
||||
import borderWidth from '../../../../scss/tokens/borders/_border-width.scss?raw';
|
||||
|
||||
<Meta title="Styles/Tokens/Borders" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,40 +1,18 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../../utils/docsPage.js';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import alignContent from '$lib/scss/tokens/layout/flex/\_align-content.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import alignItems from '$lib/scss/tokens/layout/flex/\_align-items.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import alignSelf from '$lib/scss/tokens/layout/flex/\_align-self.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import flexDirection from '$lib/scss/tokens/layout/flex/\_flex-direction.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import flexGrow from '$lib/scss/tokens/layout/flex/\_flex-grow.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import flexShrink from '$lib/scss/tokens/layout/flex/\_flex-shrink.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import flexWrap from '$lib/scss/tokens/layout/flex/\_flex-wrap.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import flex from '$lib/scss/tokens/layout/flex/\_flex.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import justifyContent from '$lib/scss/tokens/layout/flex/\_justify-content.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import justifyItems from '$lib/scss/tokens/layout/flex/\_justify-items.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import justifySelf from '$lib/scss/tokens/layout/flex/\_justify-self.scss?raw';
|
||||
import alignContent from '../../../../scss/tokens/layout/flex/_align-content.scss?raw';
|
||||
import alignItems from '../../../../scss/tokens/layout/flex/_align-items.scss?raw';
|
||||
import alignSelf from '../../../../scss/tokens/layout/flex/_align-self.scss?raw';
|
||||
import flexDirection from '../../../../scss/tokens/layout/flex/_flex-direction.scss?raw';
|
||||
import flexGrow from '../../../../scss/tokens/layout/flex/_flex-grow.scss?raw';
|
||||
import flexShrink from '../../../../scss/tokens/layout/flex/_flex-shrink.scss?raw';
|
||||
import flexWrap from '../../../../scss/tokens/layout/flex/_flex-wrap.scss?raw';
|
||||
import flex from '../../../../scss/tokens/layout/flex/_flex.scss?raw';
|
||||
import justifyContent from '../../../../scss/tokens/layout/flex/_justify-content.scss?raw';
|
||||
import justifyItems from '../../../../scss/tokens/layout/flex/_justify-items.scss?raw';
|
||||
import justifySelf from '../../../../scss/tokens/layout/flex/_justify-self.scss?raw';
|
||||
|
||||
<Meta title="Styles/Tokens/Flexbox" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,13 +1,10 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../../utils/docsPage.js';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import cursor from '$lib/scss/tokens/interactivity/\_cursor.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import pointerEvents from '$lib/scss/tokens/interactivity/\_pointer-events.scss?raw';
|
||||
import cursor from '../../../../scss/tokens/interactivity/_cursor.scss?raw';
|
||||
import pointerEvents from '../../../../scss/tokens/interactivity/_pointer-events.scss?raw';
|
||||
|
||||
<Meta title="Styles/Tokens/Interactivity" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../utils/docsPage.js';
|
||||
import Mermaid from '../../docs-components/Mermaid/Mermaid.jsx';
|
||||
import CopyTable from '../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../utils/parseCss';
|
||||
import './styles.scss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import color from '$lib/scss/tokens/text/\_color.scss?inline';
|
||||
import color from '../../../scss/tokens/text/_color.scss?inline';
|
||||
|
||||
<Meta title="Styles/Tokens/Intro" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,28 +1,14 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../../utils/docsPage.js';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import boxSizing from '$lib/scss/tokens/layout/\_box-sizing.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import display from '$lib/scss/tokens/layout/\_display.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import floats from '$lib/scss/tokens/layout/\_floats.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import objectFit from '$lib/scss/tokens/layout/\_object-fit.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import objectPosition from '$lib/scss/tokens/layout/\_object-position.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import overflow from '$lib/scss/tokens/layout/\_overflow.scss?raw';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import position from '$lib/scss/tokens/layout/\_position.scss?raw';
|
||||
import boxSizing from '../../../../scss/tokens/layout/_box-sizing.scss?raw';
|
||||
import display from '../../../../scss/tokens/layout/_display.scss?raw';
|
||||
import floats from '../../../../scss/tokens/layout/_floats.scss?raw';
|
||||
import objectFit from '../../../../scss/tokens/layout/_object-fit.scss?raw';
|
||||
import objectPosition from '../../../../scss/tokens/layout/_object-position.scss?raw';
|
||||
import overflow from '../../../../scss/tokens/layout/_overflow.scss?raw';
|
||||
import position from '../../../../scss/tokens/layout/_position.scss?raw';
|
||||
|
||||
<Meta title="Styles/Tokens/Layout" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,25 +1,13 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../../utils/docsPage.js';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import height from '$lib/scss/tokens/sizing/\_height.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import maxHeight from '$lib/scss/tokens/sizing/\_max-height.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import maxWidth from '$lib/scss/tokens/sizing/\_max-width.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import minHeight from '$lib/scss/tokens/sizing/\_min-height.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import minWidth from '$lib/scss/tokens/sizing/\_min-width.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import width from '$lib/scss/tokens/sizing/\_width.scss?inline';
|
||||
import height from '../../../../scss/tokens/sizing/_height.scss?inline';
|
||||
import maxHeight from '../../../../scss/tokens/sizing/_max-height.scss?inline';
|
||||
import maxWidth from '../../../../scss/tokens/sizing/_max-width.scss?inline';
|
||||
import minHeight from '../../../../scss/tokens/sizing/_min-height.scss?inline';
|
||||
import minWidth from '../../../../scss/tokens/sizing/_min-width.scss?inline';
|
||||
import width from '../../../../scss/tokens/sizing/_width.scss?inline';
|
||||
|
||||
<Meta title="Styles/Tokens/Sizing" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,19 +1,11 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../../utils/docsPage.js';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import margin from '$lib/scss/tokens/spacers/\_margin.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import padding from '$lib/scss/tokens/spacers/\_padding.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fluidMargin from '$lib/scss/tokens/spacers/\_fluid-margin.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fluidPadding from '$lib/scss/tokens/spacers/\_fluid-padding.scss?inline';
|
||||
import margin from '../../../../scss/tokens/spacers/_margin.scss?inline';
|
||||
import padding from '../../../../scss/tokens/spacers/_padding.scss?inline';
|
||||
import fluidMargin from '../../../../scss/tokens/spacers/_fluid-margin.scss?inline';
|
||||
import fluidPadding from '../../../../scss/tokens/spacers/_fluid-padding.scss?inline';
|
||||
|
||||
<Meta title="Styles/Tokens/Spacers" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,52 +1,22 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../../utils/docsPage.js';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { cssStringToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import role from '$lib/scss/tokens/text/\_text-role.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import color from '$lib/scss/tokens/text/\_color.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fontFamily from '$lib/scss/tokens/text/\_font-family.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fontSize from '$lib/scss/tokens/text/\_font-size.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fontStyle from '$lib/scss/tokens/text/\_font-style.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import fontWeight from '$lib/scss/tokens/text/\_font-weight.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import letterSpacing from '$lib/scss/tokens/text/\_letter-spacing.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import lineHeight from '$lib/scss/tokens/text/\_line-height.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import textAlign from '$lib/scss/tokens/text/\_text-align.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import textDecoration from '$lib/scss/tokens/text/\_text-decoration.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import textStroke from '$lib/scss/tokens/text/\_text-stroke.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import textTransform from '$lib/scss/tokens/text/\_text-transform.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import verticalAlign from '$lib/scss/tokens/text/\_vertical-align.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import whiteSpace from '$lib/scss/tokens/text/\_white-space.scss?inline';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import wordBreak from '$lib/scss/tokens/text/\_word-break.scss?inline';
|
||||
import role from '../../../../scss/tokens/text/_text-role.scss?inline';
|
||||
import color from '../../../../scss/tokens/text/_color.scss?inline';
|
||||
import fontFamily from '../../../../scss/tokens/text/_font-family.scss?inline';
|
||||
import fontSize from '../../../../scss/tokens/text/_font-size.scss?inline';
|
||||
import fontStyle from '../../../../scss/tokens/text/_font-style.scss?inline';
|
||||
import fontWeight from '../../../../scss/tokens/text/_font-weight.scss?inline';
|
||||
import letterSpacing from '../../../../scss/tokens/text/_letter-spacing.scss?inline';
|
||||
import lineHeight from '../../../../scss/tokens/text/_line-height.scss?inline';
|
||||
import textAlign from '../../../../scss/tokens/text/_text-align.scss?inline';
|
||||
import textDecoration from '../../../../scss/tokens/text/_text-decoration.scss?inline';
|
||||
import textStroke from '../../../../scss/tokens/text/_text-stroke.scss?inline';
|
||||
import textTransform from '../../../../scss/tokens/text/_text-transform.scss?inline';
|
||||
import verticalAlign from '../../../../scss/tokens/text/_vertical-align.scss?inline';
|
||||
import whiteSpace from '../../../../scss/tokens/text/_white-space.scss?inline';
|
||||
import wordBreak from '../../../../scss/tokens/text/_word-break.scss?inline';
|
||||
|
||||
import './styles.scss';
|
||||
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../../../utils/docsPage.js';
|
||||
import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
|
||||
import { scssVariablesToTableArray } from '../../../utils/parseCss';
|
||||
|
||||
{/* @ts-ignore */}
|
||||
import theme from '$lib/scss/tokens/variables/\_theme.scss?raw';
|
||||
import block from '$lib/scss/tokens/variables/\_block.scss?raw';
|
||||
import theme from '../../../../scss/tokens/variables/_theme.scss?raw';
|
||||
import block from '../../../../scss/tokens/variables/_block.scss?raw';
|
||||
|
||||
<Meta title="Styles/Tokens/SCSS Variables" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -21,6 +20,7 @@ These are SCSS mirrors of some of the default CSS variables used in the `Theme`.
|
|||
body={scssVariablesToTableArray(theme)}
|
||||
copyable={[true, false]}
|
||||
/>
|
||||
|
||||
<CopyTable
|
||||
title="Block"
|
||||
header={['Variable', 'Properties']}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
import ThemeBuilder from './../docs-components/ThemeBuilder/ThemeBuilder.jsx';
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Meta } from '@storybook/addon-docs';
|
||||
import { parameters } from '$docs/utils/docsPage.js';
|
||||
import { Meta } from '@storybook/blocks';
|
||||
import { parameters } from '../utils/docsPage.js';
|
||||
|
||||
<Meta title="Theming/CSS variables" parameters={{ ...parameters }} />
|
||||
|
||||
|
|
@ -1,14 +1,5 @@
|
|||
import autoprefixer from 'autoprefixer';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
const config = {
|
||||
preprocess: preprocess({
|
||||
preserve: ['ld+json'],
|
||||
scss: { quietDeps: true },
|
||||
postcss: {
|
||||
plugins: [autoprefixer],
|
||||
},
|
||||
}),
|
||||
export default {
|
||||
preprocess: [vitePreprocess()],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
|
|||
|
|
@ -22,9 +22,10 @@
|
|||
"$docs/*": ["src/docs/*"]
|
||||
},
|
||||
"sourceMap": true,
|
||||
"strict": false,
|
||||
"strict": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"verbatimModuleSyntax": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.js",
|
||||
|
|
|
|||
|
|
@ -1,21 +1,17 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import { scss } from './bin/preprocess/index.js';
|
||||
import { defineConfig, type UserConfig } from 'vite';
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte';
|
||||
import path from 'path';
|
||||
|
||||
/** @type {import('vite').UserConfig} */
|
||||
const config = defineConfig({
|
||||
const config: UserConfig = defineConfig({
|
||||
base: 'https://reuters-graphics.github.io/graphics-components/',
|
||||
css: {
|
||||
preprocessorOptions: { scss },
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@reuters-graphics/graphics-components': './src',
|
||||
$lib: './src',
|
||||
$docs: './src/docs',
|
||||
'@reuters-graphics/graphics-components': path.resolve('./src'),
|
||||
$lib: path.resolve('./src'),
|
||||
$docs: path.resolve('./src/docs'),
|
||||
},
|
||||
},
|
||||
plugins: [svelte({})],
|
||||
plugins: [svelte()],
|
||||
});
|
||||
|
||||
export default config;
|
||||
|
|
|
|||
Loading…
Reference in a new issue