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 {
@include font-display;
color: var(--gfx-colour-tr-muted-blue);
color: #0071a1;
text-decoration: none;
text-underline-offset: 2px;
&:hover {
text-decoration: underline;
}

1
.storybook/preview.ts
View file

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

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

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

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

@ -73,41 +73,43 @@
<Article id="block-demo-article">
<div class="article-boundaries">
<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
>
<Block width="narrow" snap="{true}" cls="block-snap-widths-demo"
<Block width="narrow" snap="{true}" class="block-snap-widths-demo"
>narrow</Block
>
<Block width="normal" snap="{true}" cls="block-snap-widths-demo"
<Block width="normal" snap="{true}" class="block-snap-widths-demo"
>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
>
<Block width="narrower" snap="{true}" cls="block-snap-widths-demo even"
<Block width="narrower" snap="{true}" class="block-snap-widths-demo even"
>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
>
<Block
width="normal"
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
width="wide"
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
>
<Block
width="wider"
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>
</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. */
export let id: string = '';
/** 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. */
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
<!-- 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 -->
</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.
```html
<Block width="wider" snap="{true}" cls="custom-blocks">
<Block width="wider" snap="{true}" class="custom-blocks">
<!-- Your stuff for this block -->
</Block>

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

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

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

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

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

@ -70,7 +70,7 @@
});
</script>
<Block width="{width}" cls="photo">
<Block width="{width}" class="photo">
<figure bind:this="{container}" aria-label="media">
{#if !lazy || (intersectable && intersecting)}
<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.
* @type {string}
*/
export let cls: string = '';
let cls: string = '';
export { cls as class };
/** Snap block to column widths, rather than fluidly resizing them. */
export let snap: boolean = false;
@ -78,7 +79,7 @@
role="{role}"
width="{width}"
ariaLabel="{ariaLabel}"
cls="graphic {cls}"
class="graphic {cls}"
>
<div>
{#if $$slots.title}

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

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

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

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

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

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

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

@ -9,7 +9,8 @@
export let id: string = '';
/** Add a class to target with SCSS. */
export let cls: string = '';
let cls: string = '';
export { cls as class };
interface Image {
/**
@ -96,7 +97,7 @@
};
</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}">
<Splide
hasTrack="{false}"

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

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

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

@ -38,7 +38,8 @@
export let id: string = '';
/** 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 { referrals } from './stores.js';
@ -75,7 +76,7 @@
</script>
{#if $referrals.length === number}
<Block width="{width}" id="{id}" cls="referrals-block {cls}">
<Block width="{width}" id="{id}" class="referrals-block {cls}">
{#if heading}
<h4 class:stacked="{clientWidth && clientWidth < 750}">{heading}</h4>
{/if}

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

@ -8,7 +8,7 @@
import Block from '../../Block/Block.svelte';
</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">
<svelte:component
this="{step.background}"

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

@ -18,7 +18,7 @@
</div>
{/if}
{: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}">
{@html marked.parse(step.foreground)}
</div>

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

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

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

@ -28,7 +28,8 @@
* Set a class to target with SCSS.
* @type {string}
*/
export let cls: string = '';
let cls: string = '';
export { cls as class };
/**
* Set an ID to target with SCSS.
* @type {string}
@ -41,7 +42,7 @@
import { marked } from 'marked';
</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};">
{#each dates as date}
<div class="date">

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

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

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

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

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

@ -4,7 +4,8 @@
export let id: string = '';
/** 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.
@ -41,7 +42,7 @@
<header
id="{id}"
class="{cls}"
class:sticky
class:sticky="{sticky}"
style:background="{background}"
style:border-bottom="{borderBottom}"
>

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

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

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

@ -15,7 +15,7 @@ const Copyable = (props) => {
useEffect(() => {
if(timeout) clearTimeout(timeout);
timeout = setTimeout(() => { setCopied(false); }, 1000);
timeout = setTimeout(() => { setCopied(false); }, 1500);
}, [copied]);
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';
// Style rules
@import 'colours/main';
@import 'borders/main';
@import 'spacers/main';
@import 'typography/rules';