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

little cleanup

Browse source
This commit is contained in:
Jon McClure 2022-08-20 22:47:58 +01:00
parent 3e144dd43e
commit 2862eb64ae
24 changed files with 110 additions and 486 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
package.json
View file

@ -162,6 +162,12 @@
"./components/SiteHeader/svgs/Close.svelte": "./dist/components/SiteHeader/svgs/Close.svelte",
"./components/SiteHeader/svgs/Menu.svelte": "./dist/components/SiteHeader/svgs/Menu.svelte",
"./components/Spinner/Spinner.svelte": "./dist/components/Spinner/Spinner.svelte",
"./components/Theme/@types/component.ts": "./dist/components/Theme/@types/component.ts",
"./components/Theme/Theme.svelte": "./dist/components/Theme/Theme.svelte",
"./components/Theme/themes/dark": "./dist/components/Theme/themes/dark.js",
"./components/Theme/themes/light": "./dist/components/Theme/themes/light.js",
"./components/Theme/utils/flatten": "./dist/components/Theme/utils/flatten.js",
"./components/Theme/utils/merge": "./dist/components/Theme/utils/merge.js",
"./components/Video/Controls.svelte": "./dist/components/Video/Controls.svelte",
"./components/Video/Video.svelte": "./dist/components/Video/Video.svelte",
"./components/Visible/Visible.svelte": "./dist/components/Visible/Visible.svelte",
@ -183,6 +189,8 @@
"./scss/mixins/_graphic.scss": "./dist/scss/mixins/_graphic.scss",
"./scss/mixins/_note-text.scss": "./dist/scss/mixins/_note-text.scss",
"./scss/mixins/_visually-hidden.scss": "./dist/scss/mixins/_visually-hidden.scss",
"./scss/spacers/_rules.scss": "./dist/scss/spacers/_rules.scss",
"./scss/spacers/_variables.scss": "./dist/scss/spacers/_variables.scss",
"./scss/typography/_background-color.scss": "./dist/scss/typography/_background-color.scss",
"./scss/typography/_box-shadow.scss": "./dist/scss/typography/_box-shadow.scss",
"./scss/typography/_color.scss": "./dist/scss/typography/_color.scss",
@ -197,4 +205,4 @@
"./scss/typography/_variables.scss": "./dist/scss/typography/_variables.scss",
".": "./dist/index.js"
}
}
}

5
src/components/Headline/Headline.stories.svelte
View file

@ -14,7 +14,7 @@
import {
withComponentDocs,
withStoryDocs,
withStoryDocs
} from '$lib/docs/utils/withParams.js';
const meta = {
@ -34,7 +34,7 @@
name="Default"
args={{
section: 'World News',
hed: 'Reuters Graphics interactive'
hed: 'Reuters Graphics interactive',
}}
/>
@ -46,7 +46,6 @@
hed="{'Reuters Graphics Interactive'}"
dek="{'The beginning of a beautiful page'}"
section="{'Global news'}"
sectionColour="{'orange'}"
>
<!-- Use named slots to add a byline... -->
<span slot="byline">By <strong>Peppa Pig</strong></span>

4
src/components/Theme/Theme.stories.svelte
View file

@ -14,7 +14,7 @@
import {
withComponentDocs,
withStoryDocs,
withStoryDocs
} from '$lib/docs/utils/withParams.js';
const meta = {
@ -91,7 +91,7 @@
</Story>
<style lang="scss">
@import '../../scss/mixins/fonts';
@import '../../scss/fonts/mixins';
div.themed {
background-color: var(--theme-colour-background);
padding: 2rem;

4
src/components/Theme/stories/docs/customise.md
View file

@ -2,7 +2,9 @@ You can customise the theme of your page in two ways:
First, you can choose the `base` theme, either `light` or `dark`.
From there, you can pass a custom theme object to the `theme` prop. (Check out the "Control" column for `theme` in the table above to see what properties you can customise.)
From there, you can pass a custom theme object to the `theme` prop. Any custom styles you pass to `theme` will override themes in the `base` theme.
> Check out the "Control" column for `theme` in the properties table above to see what properties you can customise.
```svelte
<Theme

9
src/docs/guides/graphics-kit.stories.mdx
View file

@ -14,10 +14,11 @@ import quickitImg from './imgs/quickit.png';
If you haven't, check out ["Using Reuters Graphics Components" in the Graphics Kit docs](https://reuters-graphics.github.io/docs_graphics-kit/for_developers/graphics-components/) to get a general idea of how to use components.
<span class="highlight">Look for **🚀 QUICKIT** 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.
<span class="highlight">
Look 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.
<img src={quickitImg} width="200" />

2
src/docs/intro.stories.mdx
View file

@ -27,7 +27,7 @@ All the bits that make Reuters Graphics pages... Reuters-y.
yarn add @reuters-graphics/graphics-components
```
2. Checkout the guides, if you haven't, or dive straight into the component docs to start using components.
2. Checkout the [guides](?path=/docs/guides-using-these-docs--page), if you haven't, or dive straight into the docs to start using components.
```svelte
<script>

6
src/docs/layout/intro.stories.mdx
View file

@ -9,7 +9,7 @@ import WellImg from './article-well.jpg';
# Layout
Layout components are special Svelte components that setup our default page layout.
Layout components setup our default page structure.
Generally, our page layout includes a central text well and a few preset block breakpoints, wider and narrower than the well.
@ -22,8 +22,8 @@ Here's how it works:
style={{ margin: '3rem 0' }}
/>
The `Article` component sets up the set dimensions of the well and the block breakpoints.
The [`Article`](?path=/docs/layout-article--default) component sets up the set dimensions of the well and the block breakpoints.
The `Block` component is a wrapper for individual parts of a page that can be as wide as any of those breakpoints.
The [`Block`](?path=/docs/layout-block--default) component is a wrapper for individual parts of a page that can be as wide as any of those breakpoints.
The docs in this section explain how to use our layout components to build the basic structure of your page and also how to break out of our default layout if you need to do something different.

54
src/docs/scss/fonts.stories.mdx Normal file
View file

@ -0,0 +1,54 @@
import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';
<Meta title="SCSS/Fonts" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Fonts
There are several ways to specify font styles.
## Classes
```svelte
<p>
<span class="font-serif">Lorem</span>
<span class="font-sans">ipsum</span>
<span class="font-mono">dolor</span>
</p>
```
## Variables
```svelte
<style lang="scss">
// Import SCSS variables
@import 'reuters-graphics/graphics-components/dist/scss/variables';
p {
// Use one...
font-family: $font-family-serif;
font-family: $font-family-sans-serif;
font-family: $font-family-display;
font-family: $font-family-monospace;
}
</style>
```
## Mixins
```svelte
<style lang="scss">
// Import SCSS mixins
@import 'reuters-graphics/graphics-components/dist/scss/mixins';
p {
// Use one...
@include font-serif;
@include font-sans;
@include font-display;
@include font-monospace;
}
</style>
```

34
src/docs/scss/mixins.stories.mdx
View file

@ -13,40 +13,6 @@ Mixins allow you to re-use styles we've already defined in your components. Read
## Available mixins
### `font-{sans|serif|display|monospace}`
Mixin our fonts.
```svelte
<p>
<span class="serif">Lorem</span>
<span class="sans">ipsum</span>
<span class="display">dolor</span>
<span class="mono">sit</span>
</p>
<style lang="scss">
// Import SCSS mixins
@import 'reuters-graphics/graphics-components/dist/scss/mixins';
// Use them with classes.
p {
.serif {
@include font-serif;
}
.sans {
@include font-sans;
}
.display {
@include font-display;
}
.mono {
@include font-monospace;
}
}
</style>
```
### `body-text`
Mixin our default body text styles.

2
src/scss/_mixins.scss
View file

@ -1,6 +1,6 @@
@import "mixins/block";
@import "mixins/body-text";
@import "mixins/fonts";
@import "fonts/mixins";
@import "mixins/graphic";
@import "mixins/note-text";
@import "mixins/visually-hidden";

0
src/scss/mixins/_fonts.scss → src/scss/fonts/_mixins.scss
View file

11
src/scss/fonts/_rules.scss
View file

@ -1,17 +1,14 @@
@import '../mixins';
@import 'variables';
.font-sans {
@include font-sans(true);
font-family: var(--theme-font-family-sans-serif, $font-family-display) !important;
}
.font-serif {
@include font-serif(true);
font-family: var(--theme-font-family-serif, $font-family-serif) !important;
}
.font-monospace {
@include font-monospace(true);
font-family: var(--theme-font-family-monospace, $font-family-monospace) !important;
}
.font-display {
@include font-display(true);
}

8
src/scss/fonts/_variables.scss
View file

@ -1,9 +1,7 @@
$font-family-serif: "freight-book", serif;
$font-family-base: $font-family-serif;
$font-family-serif: var(--theme-font-family-serif, "freight-book", serif);
$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-sans-serif: var(--theme-font-family-sans-serif, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif);
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
$font-family-monospace: var(--theme-font-family-monspace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
$font-family-display: "Knowledge", "Source Sans Pro", Arial, sans-serif;
$font-family-knowledge: $font-family-display; // deprecate

2
src/scss/mixins/_body-text.scss
View file

@ -1,4 +1,4 @@
@import './fonts';
@import '../fonts/mixins';
@import '../fonts/variables';
@import '../typography/font-size';
@import '../colours/thematic/tr';

2
src/scss/mixins/_graphic.scss
View file

@ -1,5 +1,5 @@
@import '../colours/thematic/tr';
@import './fonts';
@import '../fonts/mixins';
@mixin graphic-text {
h3 {

71
src/scss/typography/_background-color.scss
View file

@ -1,71 +0,0 @@
@import "~@reuters-graphics/style-color/scss/thematic/brand";
$white-background: $brand-background !default;
$black-background: $brand-inverted-background !default;
.background,
.background-light {
background-color: $white-background;
&.important {
background-color: $white-background !important;
}
}
.background-dark {
background-color: $black-background;
&.important {
background-color: $black-background !important;
}
}
.background-alpha,
.background-alpha-light {
background-color: rgba($white-background, 0.75);
&.important {
background-color: rgba($white-background, 0.75) !important;
}
}
.background-alpha-lighter {
background-color: rgba($white-background, 0.5);
&.important {
background-color: rgba($white-background, 0.5) !important;
}
}
.background-alpha-lightest {
background-color: rgba($white-background, 0.25);
&.important {
background-color: rgba($white-background, 0.25) !important;
}
}
.background-alpha-dark {
background-color: rgba($black-background, 0.3);
&.important {
background-color: rgba($black-background, 0.3) !important;
}
}
.background-alpha-darker {
background-color: rgba($black-background, 0.6);
&.important {
background-color: rgba($black-background, 0.6) !important;
}
}
.background-alpha-darkest {
background-color: rgba($black-background, 0.9);
&.important {
background-color: rgba($black-background, 0.9) !important;
}
}

20
src/scss/typography/_box-shadow.scss
View file

@ -1,26 +1,12 @@
.box-shadow-low {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.16);
&.important {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.16) !important;
}
.box-shadow {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.24);
&.important {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.24) !important;
}
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.24) !important;
}
.box-shadow-high {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.24);
&.important {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.24) !important;
}
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.24) !important;
}

73
src/scss/typography/_color.scss
View file

@ -1,73 +0,0 @@
@import "~@reuters-graphics/style-color/scss/categorical/base";
.color-black {
color: $black;
&.important {
color: $black !important;
}
}
.color-gray {
color: $gray;
&.important {
color: $gray !important;
}
}
.color-white {
color: $white;
&.important {
color: $white !important;
}
}
.color-yellow {
color: $yellow;
&.important {
color: $yellow !important;
}
}
.color-orange {
color: $orange;
&.important {
color: $orange !important;
}
}
.color-red {
color: $red;
&.important {
color: $red !important;
}
}
.color-green {
color: $green;
&.important {
color: $green !important;
}
}
.color-blue {
color: $blue;
&.important {
color: $blue !important;
}
}
.color-purple {
color: $purple;
&.important {
color: $purple !important;
}
}

36
src/scss/typography/_letter-spacing.scss
View file

@ -1,41 +1,15 @@
.spaced-least {
letter-spacing: 0.1rem;
&.important {
letter-spacing: 0.1rem !important;
}
letter-spacing: 0.1rem !important;
}
.spaced-less {
letter-spacing: 0.25rem;
&.important {
letter-spacing: 0.25rem !important;
}
letter-spacing: 0.25rem !important;
}
.spaced {
letter-spacing: 0.5rem;
&.important {
letter-spacing: 0.5rem !important;
}
letter-spacing: 0.5rem !important;
}
.spaced-extra,
.spaced-more {
letter-spacing: 0.75rem;
&.important {
letter-spacing: 0.75rem !important;
}
letter-spacing: 0.75rem !important;
}
.spaced-super,
.spaced-most {
letter-spacing: 1rem;
&.important {
letter-spacing: 1rem !important;
}
letter-spacing: 1rem !important;
}

3
src/scss/typography/_main.scss
View file

@ -1,8 +1,5 @@
@import "background-color";
@import "box-shadow";
@import "color";
@import "font-size";
@import "letter-spacing";
@import "separator";
@import "text-shadow";
@import "transform";

206
src/scss/typography/_separator.scss
View file

@ -1,206 +0,0 @@
@import "~@reuters-graphics/style-color/scss/sequential/sesame";
.separator-rule {
display: block;
content: '';
background: $gray-200;
height: 1px;
width: 50%;
margin: 35px auto;
}
.separator-rule-darker {
@extend .separator-rule;
background: $gray-300 !important;
}
.separator-rule-darkest {
@extend .separator-rule;
background: $gray-600 !important;
}
.separator-rule-thicker {
@extend .separator-rule;
height: 2px !important;
width: 40% !important;
}
.separator-rule-thickest {
@extend .separator-rule;
height: 4px !important;
width: 100px !important;
}
.separated {
&::before {
@extend .separator-rule;
}
&::after {
@extend .separator-rule;
}
}
.separated-darker {
&::before {
@extend .separator-rule-darker;
}
&::after {
@extend .separator-rule-darker;
}
}
.separated-darkest {
&::before {
@extend .separator-rule-darkest;
}
&::after {
@extend .separator-rule-darkest;
}
}
.separated-over {
&::before {
@extend .separator-rule;
}
}
.separated-over-darker {
&::before {
@extend .separator-rule-darker;
}
}
.separated-over-darkest {
&::before {
@extend .separator-rule-darkest;
}
}
.separated-under {
&::after {
@extend .separator-rule;
}
}
.separated-under-darker {
&::after {
@extend .separator-rule-darker;
}
}
.separated-under-darkest {
&::after {
@extend .separator-rule-darkest;
}
}
.separated-thicker {
&::before {
@extend .separator-rule-thicker;
}
&::after {
@extend .separator-rule-thicker;
}
}
.separated-over-thicker {
&::before {
@extend .separator-rule-thicker;
}
}
.separated-under-thicker {
&::after {
@extend .separator-rule-thicker;
}
}
.separated-thickest {
&::before {
@extend .separator-rule-thickest;
}
&::after {
@extend .separator-rule-thickest;
}
}
.separated-over-thickest {
&::before {
@extend .separator-rule-thickest;
}
}
.separated-under-thickest {
&::after {
@extend .separator-rule-thickest;
}
}
.separated-darker-thicker {
@extend .separated-thicker;
@extend .separated-darker;
}
.separated-darkest-thicker {
@extend .separated-thicker;
@extend .separated-darkest;
}
.separated-darker-thickest {
@extend .separated-thickest;
@extend .separated-darker;
}
.separated-darkest-thickest {
@extend .separated-thickest;
@extend .separated-darkest;
}
.separated-over-darker-thicker {
@extend .separated-over-thicker;
@extend .separated-over-darker;
}
.separated-over-darkest-thicker {
@extend .separated-over-thicker;
@extend .separated-over-darkest;
}
.separated-over-darker-thickest {
@extend .separated-over-thickest;
@extend .separated-over-darker;
}
.separated-over-darkest-thickest {
@extend .separated-over-thickest;
@extend .separated-over-darkest;
}
.separated-under-darker-thicker {
@extend .separated-under-thicker;
@extend .separated-under-darker;
}
.separated-under-darkest-thicker {
@extend .separated-under-thicker;
@extend .separated-under-darkest;
}
.separated-under-darker-thickest {
@extend .separated-under-thickest;
@extend .separated-under-darker;
}
.separated-under-darkest-thickest {
@extend .separated-under-thickest;
@extend .separated-under-darkest;
}

14
src/scss/typography/_text-shadow.scss
View file

@ -1,25 +1,25 @@
@import "~@reuters-graphics/style-color/scss/sequential/sesame";
@import "../colours/thematic/tr";
.text-shadow {
text-shadow: 2px 2px 4px $gray-300;
text-shadow: 2px 2px 4px $tr-light-grey;
&.important {
text-shadow: 2px 2px 4px $gray-300 !important;
text-shadow: 2px 2px 4px $tr-light-grey !important;
}
}
.text-shadow-darker {
text-shadow: 2px 2px 4px $gray-500;
text-shadow: 2px 2px 4px $tr-medium-grey;
&.important {
text-shadow: 2px 2px 4px $gray-500 !important;
text-shadow: 2px 2px 4px $tr-medium-grey !important;
}
}
.text-shadow-darkest {
text-shadow: 2px 2px 4px $gray-600;
text-shadow: 2px 2px 4px $tr-dark-grey;
&.important {
text-shadow: 2px 2px 4px $gray-600 !important;
text-shadow: 2px 2px 4px $tr-dark-grey !important;
}
}

12
src/scss/typography/_transform.scss
View file

@ -1,15 +1,7 @@
.uppercase {
text-transform: uppercase;
&.important {
text-transform: uppercase !important;
}
text-transform: uppercase !important;
}
.lowercase {
text-transform: lowercase;
&.important {
text-transform: lowercase !important;
}
text-transform: lowercase !important;
}

8
src/scss/typography/_variables.scss
View file

@ -1,5 +1,5 @@
@import "../fonts/variables";
@import "@reuters-graphics/style-color/scss/sequential/sesame";
@import "../colours/thematic/tr";
// Font sizes
$font-size-xs: 0.8rem !default;
@ -17,11 +17,11 @@ $blockquote-font-size: ($font-size-base * 1.5) !default;
$line-height-base: 1.5 !default;
$text-muted: $brand-text-secondary;
$text-muted: $tr-medium-grey;
$blockquote-small-color: $brand-text-secondary;
$blockquote-small-color: $tr-medium-grey;;
$blockquote-border-color: $gray-200 !default;
$blockquote-border-color: $tr-dark-grey !default;
$blockquote-border-width: 0.25rem !default;