From cefae20c99258af916394c12e9e5e7d06ff4f5d0 Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Sat, 8 Jul 2023 15:57:35 +0100 Subject: [PATCH] kills bootstrap per #92, but probably still some cleanup needed --- .storybook/preview.ts | 8 +- package.json | 5 +- src/docs/{ => styles}/typography/MdxTheme.jsx | 12 +-- .../typography/custom-fonts.stories.mdx | 5 +- .../{ => styles}/typography/imgs/demo.png | Bin .../{ => styles}/typography/imgs/gfonts.png | Bin .../typography/imgs/type-guides.png | Bin .../{ => styles}/typography/imgs/typeset.png | Bin .../{ => styles}/typography/intro.stories.mdx | 2 +- src/docs/{ => styles}/typography/styles.scss | 4 +- .../typography/using-the-system.stories.mdx | 5 +- src/docs/theme-builder/.eslintrc.cjs | 6 ++ src/docs/theme-builder/ThemeBuilder.jsx | 7 ++ .../theme-builder/theme-builder.stories.mdx | 4 + src/scss/_mixins.scss | 2 +- src/scss/bootstrap/_main.scss | 34 -------- src/scss/bootstrap/_variables.scss | 10 --- src/scss/main.scss | 15 ++-- src/scss/reset/_rules.scss | 16 ++++ src/scss/typography/_classes.scss | 74 ----------------- src/scss/typography/_rules.scss | 77 ++++++++++++++++++ src/scss/typography_old/_transform.scss | 2 +- tsconfig.json | 2 + yarn.lock | 12 +-- 24 files changed, 151 insertions(+), 151 deletions(-) rename src/docs/{ => styles}/typography/MdxTheme.jsx (75%) rename src/docs/{ => styles}/typography/custom-fonts.stories.mdx (96%) rename src/docs/{ => styles}/typography/imgs/demo.png (100%) rename src/docs/{ => styles}/typography/imgs/gfonts.png (100%) rename src/docs/{ => styles}/typography/imgs/type-guides.png (100%) rename src/docs/{ => styles}/typography/imgs/typeset.png (100%) rename src/docs/{ => styles}/typography/intro.stories.mdx (94%) rename src/docs/{ => styles}/typography/styles.scss (54%) rename src/docs/{ => styles}/typography/using-the-system.stories.mdx (98%) create mode 100644 src/docs/theme-builder/.eslintrc.cjs create mode 100644 src/docs/theme-builder/ThemeBuilder.jsx delete mode 100644 src/scss/bootstrap/_main.scss delete mode 100644 src/scss/bootstrap/_variables.scss create mode 100644 src/scss/reset/_rules.scss delete mode 100644 src/scss/typography/_classes.scss 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'; - + ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) 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'; - + ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) 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'; - + ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) 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"