diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 03824e57..f66b4da6 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -50,8 +50,12 @@ export const parameters = {
['Intro', '*'],
'SCSS',
['Intro', '*'],
- 'Typography',
- ['Intro', 'Using the type system', ['Text styles', '*'], '*'],
+ 'Styles',
+ ['Typography', [
+ 'Intro',
+ 'Using the type system',
+ '*',
+ ]],
'Actions',
['Intro', '*'],
'Contributing',
diff --git a/package.json b/package.json
index 8acbcf82..6c56847f 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
"eslint": "^8.42.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-n": "^16.0.0",
+ "eslint-plugin-react": "^7.32.2",
"eslint-plugin-storybook": "^0.6.12",
"eslint-plugin-svelte3": "^4.0.0",
"fs-extra": "^11.1.1",
@@ -93,13 +94,13 @@
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@splidejs/svelte-splide": "^0.2.9",
"@sveltejs/svelte-scroller": "^2.0.7",
- "bootstrap": "^5.2.0",
"classnames": "^2.3.1",
"dayjs": "^1.11.3",
"journalize": "^2.5.1",
"lodash-es": "^4.17.21",
"lottie-web": "^5.7.13",
"marked": "^4.0.8",
+ "normalize.css": "^8.0.1",
"proper-url-join": "^2.1.1",
"pym.js": "^1.3.2",
"slugify": "^1.6.5",
@@ -255,4 +256,4 @@
"url": "https://github.com/reuters-graphics/graphics-components/issues"
},
"readme": "ERROR: No README data found!"
-}
\ No newline at end of file
+}
diff --git a/src/docs/typography/MdxTheme.jsx b/src/docs/styles/typography/MdxTheme.jsx
similarity index 75%
rename from src/docs/typography/MdxTheme.jsx
rename to src/docs/styles/typography/MdxTheme.jsx
index 45ea70e8..41e46e85 100644
--- a/src/docs/typography/MdxTheme.jsx
+++ b/src/docs/styles/typography/MdxTheme.jsx
@@ -1,18 +1,18 @@
import { Canvas, Unstyled } from '@storybook/blocks';
import React from 'react';
-import flatten from '../../components/Theme/utils/flatten';
-import lightTheme from '../../components/Theme/themes/light';
+import flatten from '../../../components/Theme/utils/flatten';
+import lightTheme from '../../../components/Theme/themes/light';
// This is a React equivalent for the Svelte Theme component
// which is useful for setting CSS variables in MDX docs around
-// typography demos. It also wraps demos in an unstyled storybook
+// typography demos. It also wraps demos in an unstyled storybook
// canvas.
const ThemeWrapper = (props) => {
const theme = flatten(lightTheme);
const styleObj = {};
- Object.keys(theme).map(key => {
+ Object.keys(theme).forEach(key => {
styleObj[`--theme-${key}`] = theme[key];
});
return (
@@ -24,6 +24,6 @@ const ThemeWrapper = (props) => {
);
-}
+};
-export default ThemeWrapper;
\ No newline at end of file
+export default ThemeWrapper;
diff --git a/src/docs/typography/custom-fonts.stories.mdx b/src/docs/styles/typography/custom-fonts.stories.mdx
similarity index 96%
rename from src/docs/typography/custom-fonts.stories.mdx
rename to src/docs/styles/typography/custom-fonts.stories.mdx
index 7c1d44ac..423e04de 100644
--- a/src/docs/typography/custom-fonts.stories.mdx
+++ b/src/docs/styles/typography/custom-fonts.stories.mdx
@@ -3,7 +3,10 @@ import { parameters } from '$docs/utils/docsPage.js';
import Gfont from './imgs/gfonts.png';
-
+
diff --git a/src/docs/typography/imgs/demo.png b/src/docs/styles/typography/imgs/demo.png
similarity index 100%
rename from src/docs/typography/imgs/demo.png
rename to src/docs/styles/typography/imgs/demo.png
diff --git a/src/docs/typography/imgs/gfonts.png b/src/docs/styles/typography/imgs/gfonts.png
similarity index 100%
rename from src/docs/typography/imgs/gfonts.png
rename to src/docs/styles/typography/imgs/gfonts.png
diff --git a/src/docs/typography/imgs/type-guides.png b/src/docs/styles/typography/imgs/type-guides.png
similarity index 100%
rename from src/docs/typography/imgs/type-guides.png
rename to src/docs/styles/typography/imgs/type-guides.png
diff --git a/src/docs/typography/imgs/typeset.png b/src/docs/styles/typography/imgs/typeset.png
similarity index 100%
rename from src/docs/typography/imgs/typeset.png
rename to src/docs/styles/typography/imgs/typeset.png
diff --git a/src/docs/typography/intro.stories.mdx b/src/docs/styles/typography/intro.stories.mdx
similarity index 94%
rename from src/docs/typography/intro.stories.mdx
rename to src/docs/styles/typography/intro.stories.mdx
index ca163263..66e0568d 100644
--- a/src/docs/typography/intro.stories.mdx
+++ b/src/docs/styles/typography/intro.stories.mdx
@@ -5,7 +5,7 @@ import Typeset from './imgs/typeset.png';
import TypeGuides from './imgs/type-guides.png';
import DemoImg from './imgs/demo.png';
-
+
diff --git a/src/docs/typography/styles.scss b/src/docs/styles/typography/styles.scss
similarity index 54%
rename from src/docs/typography/styles.scss
rename to src/docs/styles/typography/styles.scss
index 7042ce3f..342a1928 100644
--- a/src/docs/typography/styles.scss
+++ b/src/docs/styles/typography/styles.scss
@@ -1,6 +1,6 @@
div.type-system-demo {
- @import '../../scss/typography/mixins';
- @import '../../scss/typography/classes';
+ @import '../../../scss/typography/mixins';
+ @import '../../../scss/typography/classes';
*:first-child {
margin-top: 0;
diff --git a/src/docs/typography/using-the-system.stories.mdx b/src/docs/styles/typography/using-the-system.stories.mdx
similarity index 98%
rename from src/docs/typography/using-the-system.stories.mdx
rename to src/docs/styles/typography/using-the-system.stories.mdx
index b8d6edb7..bd15fb69 100644
--- a/src/docs/typography/using-the-system.stories.mdx
+++ b/src/docs/styles/typography/using-the-system.stories.mdx
@@ -5,7 +5,10 @@ import Theme from './MdxTheme.jsx';
import './styles.scss';
-
+
diff --git a/src/docs/theme-builder/.eslintrc.cjs b/src/docs/theme-builder/.eslintrc.cjs
new file mode 100644
index 00000000..ed3da2bc
--- /dev/null
+++ b/src/docs/theme-builder/.eslintrc.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+ "extends": [
+ "eslint:recommended",
+ "plugin:react/recommended"
+ ]
+};
diff --git a/src/docs/theme-builder/ThemeBuilder.jsx b/src/docs/theme-builder/ThemeBuilder.jsx
new file mode 100644
index 00000000..665766a1
--- /dev/null
+++ b/src/docs/theme-builder/ThemeBuilder.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ThemeBuilder = (props) => (
+
+);
+
+export default ThemeBuilder;
diff --git a/src/docs/theme-builder/theme-builder.stories.mdx b/src/docs/theme-builder/theme-builder.stories.mdx
index cfdf8795..4959e421 100644
--- a/src/docs/theme-builder/theme-builder.stories.mdx
+++ b/src/docs/theme-builder/theme-builder.stories.mdx
@@ -1,8 +1,12 @@
import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';
+import ThemeBuilder from './ThemeBuilder.jsx';
+
# Theme builder
TK...
+
+
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index ac1113b1..d34ea92f 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -1,6 +1,6 @@
@import 'mixins/block';
@import 'mixins/body-text';
-@import 'fonts/mixins';
+@import 'typography/mixins';
@import 'mixins/graphic';
@import 'mixins/note-text';
@import 'mixins/visually-hidden';
diff --git a/src/scss/bootstrap/_main.scss b/src/scss/bootstrap/_main.scss
deleted file mode 100644
index 41ecafa9..00000000
--- a/src/scss/bootstrap/_main.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// Bootstrap overrides...
-@import "variables";
-
-
-// Configuration
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-
-// Layout & components
-@import "bootstrap/scss/root";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/type";
-@import "bootstrap/scss/images";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/tables";
-@import "bootstrap/scss/forms";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-
-// // Helpers
-// @import "bootstrap/scss/helpers";
-
-// // Utilities
-// @import "bootstrap/scss/utilities/api";
-
-
-// // This should go somewhere...
-// $hr-border-width: $border-width !default;
diff --git a/src/scss/bootstrap/_variables.scss b/src/scss/bootstrap/_variables.scss
deleted file mode 100644
index 73ff8c9b..00000000
--- a/src/scss/bootstrap/_variables.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// Controls spacing like bootstrap's margin classes...
-$spacer: 1rem;
-$spacers: (
- 0: 0,
- 1: $spacer * .25,
- 2: $spacer * .5,
- 3: $spacer,
- 4: $spacer * 1.5,
- 5: $spacer * 3,
-);
\ No newline at end of file
diff --git a/src/scss/main.scss b/src/scss/main.scss
index e931f2af..cb087396 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -6,6 +6,9 @@
* 🄯2023 Reuters Graphics Style Guide
*/
+// Reset
+@import 'reset/rules';
+
@import 'fonts/font-faces';
// Variables
@@ -14,14 +17,6 @@
// Mixins
@import 'mixins';
-// Bootstrap
-@import 'bootstrap/main';
-
-// Styles
-@import 'fonts/rules';
-@import 'typography_old/rules';
-@import 'typography_old/main';
+// Style rules
@import 'spacers/rules';
-
-/* TYPOGRAPHY */
-@import 'typography/main';
+@import 'typography/rules';
diff --git a/src/scss/reset/_rules.scss b/src/scss/reset/_rules.scss
new file mode 100644
index 00000000..ac8f2bb5
--- /dev/null
+++ b/src/scss/reset/_rules.scss
@@ -0,0 +1,16 @@
+@import 'normalize.css';
+
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+ Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.5;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
diff --git a/src/scss/typography/_classes.scss b/src/scss/typography/_classes.scss
deleted file mode 100644
index b3c9baf5..00000000
--- a/src/scss/typography/_classes.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-/* FONT SIZE CLASSES */
-.font-size-1 {
- @include font-size-1($i: false);
-}
-
-.font-size-2 {
- @include font-size-2($i: false);
-}
-
-.font-size-3 {
- @include font-size-3($i: false);
-}
-
-.font-size-4 {
- @include font-size-4($i: false);
-}
-
-.font-size-5 {
- @include font-size-5($i: false);
-}
-
-.font-size-6 {
- @include font-size-6($i: false);
-}
-
-/* TYPEFACE CLASSES */
-.typeface-display {
- @include typeface-display($i: false);
-}
-
-.typeface-serif {
- @include typeface-serif($i: false);
-}
-
-.typeface-sans-serif {
- @include typeface-sans-serif($i: false);
-}
-
-.typeface-monospace {
- @include typeface-monospace($i: false);
-}
-
-/* FONT STYLE TOKEN CLASSES */
-.font-hed {
- @include font-hed($i: false);
-}
-
-.font-subhed-1 {
- @include font-subhed-1($i: false);
-}
-
-.font-subhed-2 {
- @include font-subhed-2($i: false);
-}
-
-.font-subhed-3 {
- @include font-subhed-3($i: false);
-}
-
-.font-body {
- @include font-body($i: false);
-}
-
-.font-note-1 {
- @include font-note-1($i: false);
-}
-
-.font-note-2 {
- @include font-note-2($i: false);
-}
-
-.font-note-3 {
- @include font-note-3($i: false);
-}
diff --git a/src/scss/typography/_rules.scss b/src/scss/typography/_rules.scss
index 33b642b4..0f093730 100644
--- a/src/scss/typography/_rules.scss
+++ b/src/scss/typography/_rules.scss
@@ -1,3 +1,5 @@
+@import 'mixins';
+
/* RESPONSIVE SCALING */
@media (max-width: 510px) {
div.theme {
@@ -70,3 +72,78 @@ p {
@include font-note-3;
}
}
+
+/* FONT SIZE CLASSES */
+.font-size-1 {
+ @include font-size-1($i: false);
+}
+
+.font-size-2 {
+ @include font-size-2($i: false);
+}
+
+.font-size-3 {
+ @include font-size-3($i: false);
+}
+
+.font-size-4 {
+ @include font-size-4($i: false);
+}
+
+.font-size-5 {
+ @include font-size-5($i: false);
+}
+
+.font-size-6 {
+ @include font-size-6($i: false);
+}
+
+/* TYPEFACE CLASSES */
+.typeface-display {
+ @include typeface-display($i: false);
+}
+
+.typeface-serif {
+ @include typeface-serif($i: false);
+}
+
+.typeface-sans-serif {
+ @include typeface-sans-serif($i: false);
+}
+
+.typeface-monospace {
+ @include typeface-monospace($i: false);
+}
+
+/* FONT STYLE TOKEN CLASSES */
+.font-hed {
+ @include font-hed($i: false);
+}
+
+.font-subhed-1 {
+ @include font-subhed-1($i: false);
+}
+
+.font-subhed-2 {
+ @include font-subhed-2($i: false);
+}
+
+.font-subhed-3 {
+ @include font-subhed-3($i: false);
+}
+
+.font-body {
+ @include font-body($i: false);
+}
+
+.font-note-1 {
+ @include font-note-1($i: false);
+}
+
+.font-note-2 {
+ @include font-note-2($i: false);
+}
+
+.font-note-3 {
+ @include font-note-3($i: false);
+}
diff --git a/src/scss/typography_old/_transform.scss b/src/scss/typography_old/_transform.scss
index 3c3f4893..53e90ee9 100644
--- a/src/scss/typography_old/_transform.scss
+++ b/src/scss/typography_old/_transform.scss
@@ -1,5 +1,5 @@
.uppercase {
- text-transform: uppercase !important;
+ text-transform: uppercase;
}
.lowercase {
diff --git a/tsconfig.json b/tsconfig.json
index 03751211..79fec58e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
"resolveJsonModule": true,
"allowJs": true,
"checkJs": true,
+ "jsx": "react",
"emitDeclarationOnly": true,
"baseUrl": ".",
"rootDir": ".",
@@ -28,6 +29,7 @@
"src/**/*.js",
"src/**/*.ts",
"src/**/*.svelte",
+ "src/**/*.jsx",
"bin/**/*.{js,cjs}",
"*.ts",
"*.js"
diff --git a/yarn.lock b/yarn.lock
index c32b160b..e7b65397 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3151,11 +3151,6 @@ body-parser@1.20.1:
type-is "~1.6.18"
unpipe "1.0.0"
-bootstrap@^5.2.0:
- version "5.2.3"
- resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.2.3.tgz#54739f4414de121b9785c5da3c87b37ff008322b"
- integrity sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==
-
boxen@^5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50"
@@ -4223,7 +4218,7 @@ eslint-plugin-react-hooks@*:
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
-eslint-plugin-react@*:
+eslint-plugin-react@*, eslint-plugin-react@^7.32.2:
version "7.32.2"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==
@@ -6611,6 +6606,11 @@ normalize-range@^0.1.2:
resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+normalize.css@^8.0.1:
+ version "8.0.1"
+ resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+ integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
npm-run-all@^4.1.5:
version "4.1.5"
resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"