kills bootstrap per #92, but probably still some cleanup needed

.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',

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!"
-}
+}

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) => {
       </Canvas>
     </Unstyled>
   );
-}
+};
 
-export default ThemeWrapper;
+export default ThemeWrapper;

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';
 
-<Meta title="Typography/Adding custom fonts" parameters={{ ...parameters }} />
+<Meta
+  title="Styles/Typography/Adding custom fonts"
+  parameters={{ ...parameters }}
+/>
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 

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';
 
-<Meta title="Typography/Intro" parameters={{ ...parameters }} />
+<Meta title="Styles/Typography/Intro" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 

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;

src/docs/styles/typography/using-the-system.stories.mdx

@@ -5,7 +5,10 @@ import Theme from './MdxTheme.jsx';
 
 import './styles.scss';
 
-<Meta title="Typography/Using the type system" parameters={{ ...parameters }} />
+<Meta
+  title="Styles/Typography/Using the type system"
+  parameters={{ ...parameters }}
+/>
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 

src/docs/theme-builder/.eslintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ]
+};

src/docs/theme-builder/ThemeBuilder.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const ThemeBuilder = (props) => (
+  <button>Build</button>
+);
+
+export default ThemeBuilder;

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';
+
 <Meta title="Theming/Theme builder" parameters={{ ...parameters }} />
 
 # Theme builder
 
 TK...
+
+<ThemeBuilder />

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';

src/scss/bootstrap/_main.scss

@@ -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;

src/scss/bootstrap/_variables.scss

@@ -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,
-);

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';

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);
+}

src/scss/typography/_classes.scss

@@ -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);
-}

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);
+}

src/scss/typography_old/_transform.scss

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

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"

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"