wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

closes #103

Browse source
This commit is contained in:
Jon McClure 2023-07-22 16:54:36 +01:00
parent bee17e7a0c
commit cd1d4d97f0
28 changed files with 95 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.storybook/preview.scss
View file

@ -61,8 +61,9 @@ div.sbdocs-content {
a { a {
@include font-display; @include font-display;
color: var(--gfx-colour-tr-muted-blue); color: #0071a1;
text-decoration: none; text-decoration: none;
text-underline-offset: 2px;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }

1
.storybook/preview.ts
View file

@ -67,6 +67,7 @@ export const parameters = {
], ],
'Borders', 'Borders',
'Colours', [ 'Colours', [
'Intro',
'Primary', 'Primary',
'Thematic', 'Thematic',
'*', '*',

2
src/components/BeforeAfter/BeforeAfter.svelte
View file

@ -153,7 +153,7 @@
/> />
{#if beforeSrc && beforeAlt && afterSrc && afterAlt} {#if beforeSrc && beforeAlt && afterSrc && afterAlt}
<Block width="{width}" id="{id}" cls="photo before-after"> <Block width="{width}" id="{id}" class="photo before-after">
<div <div
style="height: {containerHeight}px;" style="height: {containerHeight}px;"
bind:clientWidth="{containerWidth}" bind:clientWidth="{containerWidth}"

22
src/components/Block/Block.stories.svelte
View file

@ -73,41 +73,43 @@
<Article id="block-demo-article"> <Article id="block-demo-article">
<div class="article-boundaries"> <div class="article-boundaries">
<div class="label">Article</div> <div class="label">Article</div>
<Block width="narrower" snap="{true}" cls="block-snap-widths-demo" <Block width="narrower" snap="{true}" class="block-snap-widths-demo"
>narrower</Block >narrower</Block
> >
<Block width="narrow" snap="{true}" cls="block-snap-widths-demo" <Block width="narrow" snap="{true}" class="block-snap-widths-demo"
>narrow</Block >narrow</Block
> >
<Block width="normal" snap="{true}" cls="block-snap-widths-demo" <Block width="normal" snap="{true}" class="block-snap-widths-demo"
>normal</Block >normal</Block
> >
<Block width="wide" snap="{true}" cls="block-snap-widths-demo">wide</Block <Block width="wide" snap="{true}" class="block-snap-widths-demo"
>wide</Block
> >
<Block width="wider" snap="{true}" cls="block-snap-widths-demo" <Block width="wider" snap="{true}" class="block-snap-widths-demo"
>wider</Block >wider</Block
> >
<Block width="narrower" snap="{true}" cls="block-snap-widths-demo even" <Block width="narrower" snap="{true}" class="block-snap-widths-demo even"
>narrower</Block >narrower</Block
> >
<Block width="narrow" snap="{true}" cls="block-snap-widths-demo even" <Block width="narrow" snap="{true}" class="block-snap-widths-demo even"
>narrow</Block >narrow</Block
> >
<Block <Block
width="normal" width="normal"
snap="{true}" snap="{true}"
cls="block-snap-widths-demo even skip-narrow">normal.skip-narrow</Block class="block-snap-widths-demo even skip-narrow"
>normal.skip-narrow</Block
> >
<Block <Block
width="wide" width="wide"
snap="{true}" snap="{true}"
cls="block-snap-widths-demo even skip-normal skip-narrow" class="block-snap-widths-demo even skip-normal skip-narrow"
>wide.skip-normal.skip-narrow</Block >wide.skip-normal.skip-narrow</Block
> >
<Block <Block
width="wider" width="wider"
snap="{true}" snap="{true}"
cls="block-snap-widths-demo even skip-wide">wider.skip-wide</Block class="block-snap-widths-demo even skip-wide">wider.skip-wide</Block
> >
</div> </div>
</Article> </Article>

3
src/components/Block/Block.svelte
View file

@ -8,7 +8,8 @@
/** Add an id to the block tag to target it with custom CSS. */ /** Add an id to the block tag to target it with custom CSS. */
export let id: string = ''; export let id: string = '';
/** Add extra classes to the block tag to target it with custom CSS. */ /** Add extra classes to the block tag to target it with custom CSS. */
export let cls: string = ''; let cls: string = '';
export { cls as class };
/** Snap block to column widths, rather than fluidly resizing them. */ /** Snap block to column widths, rather than fluidly resizing them. */
export let snap: boolean = false; export let snap: boolean = false;

4
src/components/Block/stories/docs/snapWidths.md
View file

@ -12,7 +12,7 @@ If you want to skip certain block widths entirely, you can add one or more class
```html ```html
<!-- Will skip wide and go straight to normal column width on resize. --> <!-- Will skip wide and go straight to normal column width on resize. -->
<Block width="wider" snap="{true}" cls="skip-wide"> <Block width="wider" snap="{true}" class="skip-wide">
<!-- Your stuff for this block --> <!-- Your stuff for this block -->
</Block> </Block>
``` ```
@ -28,7 +28,7 @@ Snap width breakpoints are hard-coded to the default article well column widths,
Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints. Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
```html ```html
<Block width="wider" snap="{true}" cls="custom-blocks"> <Block width="wider" snap="{true}" class="custom-blocks">
<!-- Your stuff for this block --> <!-- Your stuff for this block -->
</Block> </Block>

6
src/components/BodyText/BodyText.svelte
View file

@ -7,11 +7,15 @@
*/ */
export let text: string; export let text: string;
/** Add a class to target with SCSS. */
let cls: string = '';
export { cls as class };
import { marked } from 'marked'; import { marked } from 'marked';
import Block from '../Block/Block.svelte'; import Block from '../Block/Block.svelte';
</script> </script>
<Block cls="body-text"> <Block class="body-text {cls}">
{#if text} {#if text}
{@html marked.parse(text)} {@html marked.parse(text)}
{/if} {/if}

5
src/components/DocumentCloud/DocumentCloud.svelte
View file

@ -24,12 +24,13 @@
export let id: string = ''; export let id: string = '';
/** Add a class to target with SCSS. */ /** Add a class to target with SCSS. */
export let cls: string = ''; let cls: string = '';
export { cls as class };
import Block from '../Block/Block.svelte'; import Block from '../Block/Block.svelte';
</script> </script>
<Block width="{width}" id="{id}" cls="photo {cls}"> <Block width="{width}" id="{id}" class="photo {cls}">
<iframe <iframe
src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1" src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
title="{altText}" title="{altText}"

2
src/components/FeaturePhoto/FeaturePhoto.svelte
View file

@ -70,7 +70,7 @@
}); });
</script> </script>
<Block width="{width}" cls="photo"> <Block width="{width}" class="photo">
<figure bind:this="{container}" aria-label="media"> <figure bind:this="{container}" aria-label="media">
{#if !lazy || (intersectable && intersecting)} {#if !lazy || (intersectable && intersecting)}
<img src="{src}" alt="{altText}" /> <img src="{src}" alt="{altText}" />

5
src/components/GraphicBlock/GraphicBlock.svelte
View file

@ -17,7 +17,8 @@
* Add extra classes to the block tag to target it with custom CSS. * Add extra classes to the block tag to target it with custom CSS.
* @type {string} * @type {string}
*/ */
export let cls: string = ''; let cls: string = '';
export { cls as class };
/** Snap block to column widths, rather than fluidly resizing them. */ /** Snap block to column widths, rather than fluidly resizing them. */
export let snap: boolean = false; export let snap: boolean = false;
@ -78,7 +79,7 @@
role="{role}" role="{role}"
width="{width}" width="{width}"
ariaLabel="{ariaLabel}" ariaLabel="{ariaLabel}"
cls="graphic {cls}" class="graphic {cls}"
> >
<div> <div>
{#if $$slots.title} {#if $$slots.title}

2
src/components/GraphicBlock/TextBlock.svelte
View file

@ -7,7 +7,7 @@
</script> </script>
{#if width} {#if width}
<Block width="{width}" cls="m-0"> <Block width="{width}" class="m-0">
<slot /> <slot />
</Block> </Block>
{:else} {:else}

2
src/components/Headline/Headline.svelte
View file

@ -20,7 +20,7 @@
import { marked } from 'marked'; import { marked } from 'marked';
</script> </script>
<Block cls="mb-1"> <Block class="mb-1">
<header class="headline"> <header class="headline">
{#if $$slots.crown} {#if $$slots.crown}
<div class="crown-container"> <div class="crown-container">

2
src/components/NoteText/NoteText.svelte
View file

@ -11,7 +11,7 @@
import Block from '../Block/Block.svelte'; import Block from '../Block/Block.svelte';
</script> </script>
<Block cls="notes mb-6"> <Block class="notes mb-6">
{#if text} {#if text}
{@html marked.parse(text)} {@html marked.parse(text)}
{/if} {/if}

5
src/components/PhotoCarousel/PhotoCarousel.svelte
View file

@ -9,7 +9,8 @@
export let id: string = ''; export let id: string = '';
/** Add a class to target with SCSS. */ /** Add a class to target with SCSS. */
export let cls: string = ''; let cls: string = '';
export { cls as class };
interface Image { interface Image {
/** /**
@ -96,7 +97,7 @@
}; };
</script> </script>
<Block width="{width}" id="{id}" cls="photo-carousel {cls}"> <Block width="{width}" id="{id}" class="photo-carousel {cls}">
<div class="carousel-container" bind:clientWidth="{containerWidth}"> <div class="carousel-container" bind:clientWidth="{containerWidth}">
<Splide <Splide
hasTrack="{false}" hasTrack="{false}"

5
src/components/PhotoPack/PhotoPack.svelte
View file

@ -40,7 +40,8 @@
* Add a class to target with SCSS. * Add a class to target with SCSS.
* @type {string} * @type {string}
*/ */
export let cls: string = ''; let cls: string = '';
export { cls as class };
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'; type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
@ -88,7 +89,7 @@
$: rows = groupRows(images, layout); $: rows = groupRows(images, layout);
</script> </script>
<Block width="{width}" id="{id}" cls="photopack {cls}"> <Block width="{width}" id="{id}" class="photopack {cls}">
<div class="photopack-container" bind:clientWidth="{containerWidth}"> <div class="photopack-container" bind:clientWidth="{containerWidth}">
{#each rows as row, ri} {#each rows as row, ri}
<div <div

5
src/components/ReferralBlock/ReferralBlock.svelte
View file

@ -38,7 +38,8 @@
export let id: string = ''; export let id: string = '';
/** Add a class to target with SCSS. */ /** Add a class to target with SCSS. */
export let cls: string = ''; let cls: string = '';
export { cls as class };
import Block from '../Block/Block.svelte'; import Block from '../Block/Block.svelte';
import { referrals } from './stores.js'; import { referrals } from './stores.js';
@ -75,7 +76,7 @@
</script> </script>
{#if $referrals.length === number} {#if $referrals.length === number}
<Block width="{width}" id="{id}" cls="referrals-block {cls}"> <Block width="{width}" id="{id}" class="referrals-block {cls}">
{#if heading} {#if heading}
<h4 class:stacked="{clientWidth && clientWidth < 750}">{heading}</h4> <h4 class:stacked="{clientWidth && clientWidth < 750}">{heading}</h4>
{/if} {/if}

2
src/components/Scroller/Embedded/Background.svelte
View file

@ -8,7 +8,7 @@
import Block from '../../Block/Block.svelte'; import Block from '../../Block/Block.svelte';
</script> </script>
<Block width="{backgroundWidth}" cls="background-container step-{index + 1}"> <Block width="{backgroundWidth}" class="background-container step-{index + 1}">
<div class="embedded-background step-{index + 1}" aria-hidden="true"> <div class="embedded-background step-{index + 1}" aria-hidden="true">
<svelte:component <svelte:component
this="{step.background}" this="{step.background}"

2
src/components/Scroller/Embedded/Foreground.svelte
View file

@ -18,7 +18,7 @@
</div> </div>
{/if} {/if}
{:else if typeof step.foreground === 'string'} {:else if typeof step.foreground === 'string'}
<Block cls="body-text step-{index + 1}"> <Block class="body-text step-{index + 1}">
<div class="embedded-foreground step-{index + 1}"> <div class="embedded-foreground step-{index + 1}">
{@html marked.parse(step.foreground)} {@html marked.parse(step.foreground)}
</div> </div>

12
src/components/Scroller/Scroller.svelte
View file

@ -101,11 +101,11 @@
</script> </script>
{#if !embedded} {#if !embedded}
<Block width="fluid" cls="scroller-container" id="{id}"> <Block width="fluid" class="scroller-container" id="{id}">
<SvelteScroller <SvelteScroller
bind:index bind:index="{index}"
bind:offset bind:offset="{offset}"
bind:progress bind:progress="{progress}"
threshold="{threshold}" threshold="{threshold}"
top="{top}" top="{top}"
bottom="{bottom}" bottom="{bottom}"
@ -122,7 +122,7 @@
<div class="scroller-graphic-well"> <div class="scroller-graphic-well">
<Block <Block
width="{backgroundWidth}" width="{backgroundWidth}"
cls="background-container step-{index + 1}" class="background-container step-{index + 1}"
> >
<Background <Background
index="{index}" index="{index}"
@ -140,7 +140,7 @@
</SvelteScroller> </SvelteScroller>
</Block> </Block>
{:else} {:else}
<Block width="widest" cls="scroller-container embedded" id="{id}"> <Block width="widest" class="scroller-container embedded" id="{id}">
<Embedded <Embedded
steps="{steps}" steps="{steps}"
embeddedLayout="{embeddedLayout}" embeddedLayout="{embeddedLayout}"

5
src/components/SimpleTimeline/SimpleTimeline.svelte
View file

@ -28,7 +28,8 @@
* Set a class to target with SCSS. * Set a class to target with SCSS.
* @type {string} * @type {string}
*/ */
export let cls: string = ''; let cls: string = '';
export { cls as class };
/** /**
* Set an ID to target with SCSS. * Set an ID to target with SCSS.
* @type {string} * @type {string}
@ -41,7 +42,7 @@
import { marked } from 'marked'; import { marked } from 'marked';
</script> </script>
<Block width="normal" id="{id}" cls="simple-timeline-container {cls}"> <Block width="normal" id="{id}" class="simple-timeline-container {cls}">
<div class="timeline" style="--symbol-colour:{symbolColour};"> <div class="timeline" style="--symbol-colour:{symbolColour};">
{#each dates as date} {#each dates as date}
<div class="date"> <div class="date">

5
src/components/SiteHeadline/SiteHeadline.svelte
View file

@ -38,7 +38,8 @@
* Add extra classes to target with custom CSS. * Add extra classes to target with custom CSS.
* @type {string} * @type {string}
*/ */
export let cls: string = ''; let cls: string = '';
export { cls as class };
import Block from '../Block/Block.svelte'; import Block from '../Block/Block.svelte';
import slugify from 'slugify'; import slugify from 'slugify';
@ -63,7 +64,7 @@
first.getDate() === second.getDate(); first.getDate() === second.getDate();
</script> </script>
<Block id="{id}" cls="headline-container {cls}" width="normal"> <Block id="{id}" class="headline-container {cls}" width="normal">
<header class="headline"> <header class="headline">
<div class="title"> <div class="title">
{#if section} {#if section}

5
src/components/Table/Table.svelte
View file

@ -130,7 +130,8 @@
export let id: string = ''; export let id: string = '';
/** Add a class to target with SCSS. */ /** Add a class to target with SCSS. */
export let cls: string = ''; let cls: string = '';
export { cls as class };
/** Import local helpers */ /** Import local helpers */
import Block from '../Block/Block.svelte'; import Block from '../Block/Block.svelte';
@ -213,7 +214,7 @@
}); });
</script> </script>
<Block width="{width}" id="{id}" cls="{cls}"> <Block width="{width}" id="{id}" class="{cls}">
<article class="table-wrapper"> <article class="table-wrapper">
{#if title || dek || searchable || filterList} {#if title || dek || searchable || filterList}
<header class="table--header"> <header class="table--header">

5
src/components/ToolsHeader/ToolsHeader.svelte
View file

@ -4,7 +4,8 @@
export let id: string = ''; export let id: string = '';
/** Add a class to target with SCSS. */ /** Add a class to target with SCSS. */
export let cls: string = ''; let cls: string = '';
export { cls as class };
/** /**
* Make the header stick when user scrolls. * Make the header stick when user scrolls.
@ -41,7 +42,7 @@
<header <header
id="{id}" id="{id}"
class="{cls}" class="{cls}"
class:sticky class:sticky="{sticky}"
style:background="{background}" style:background="{background}"
style:border-bottom="{borderBottom}" style:border-bottom="{borderBottom}"
> >

2
src/components/Video/Video.svelte
View file

@ -123,7 +123,7 @@
on:touchstart="{setInteractedWithDom}" on:touchstart="{setInteractedWithDom}"
/> />
<Block width="{width}" cls="video-container"> <Block width="{width}" class="video-container">
<div <div
on:mouseover="{() => { on:mouseover="{() => {
interactiveControlsOpacity = controlsOpacity; interactiveControlsOpacity = controlsOpacity;

2
src/docs/docs-components/CopyColourTable/ImportSnippet.jsx
View file

@ -15,7 +15,7 @@ const Copyable = (props) => {
useEffect(() => { useEffect(() => {
if(timeout) clearTimeout(timeout); if(timeout) clearTimeout(timeout);
timeout = setTimeout(() => { setCopied(false); }, 1000); timeout = setTimeout(() => { setCopied(false); }, 1500);
}, [copied]); }, [copied]);
const handleClick = async({ partial }) => { const handleClick = async({ partial }) => {

26
src/docs/styles/colours/intro.stories.mdx Normal file
View file

@ -0,0 +1,26 @@
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';
<Meta title="Styles/Colours/Intro" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Working with colours
Colour palettes are provided as [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) you can use in your own styles. Some are included by default, others can be imported in your global stylesheet and then used.
```scss
/* global.scss */
@import '@reuters-graphics/graphics-components/dist/scss/colours/primary/_blue.scss';
p {
color: var(--grey-400); // Included by default
}
p.blue-bg {
color: white;
background-colour: var(--blue-600); // Imported palette
}
```

2
src/scss/colours/_main.scss Normal file
View file

@ -0,0 +1,2 @@
@import 'primary/grey';
@import 'thematic/tr';

1
src/scss/main.scss
View file

@ -18,6 +18,7 @@
@import 'mixins'; @import 'mixins';
// Style rules // Style rules
@import 'colours/main';
@import 'borders/main'; @import 'borders/main';
@import 'spacers/main'; @import 'spacers/main';
@import 'typography/rules'; @import 'typography/rules';