From 9183e8a5104159b7c3cb678913c513a732766836 Mon Sep 17 00:00:00 2001 From: Micheal O'Donovan Date: Wed, 8 Apr 2026 14:14:35 +0100 Subject: [PATCH 01/26] up and running before checks --- .eslintrc | 2 +- .nvmrc | 2 +- babel.config.js | 8 +- index.html | 12 + package.json | 117 +- src/App.jsx | 53 + src/App.styles.js | 103 + .../Atoms/AmbientVideo/AmbientVideo.md | 59 - .../Atoms/AmbientVideo/AmbientVideo.style.js | 3 - .../AmbientVideo/AmbientVideoExample.jsx | 37 + src/components/Atoms/Button/Button.md | 101 - src/components/Atoms/Button/ButtonExample.jsx | 83 + .../ButtonWithStates/ButtonWithStates.md | 13 - .../ButtonWithStatesExample.jsx | 10 + .../{Checkbox.md => CheckboxExample.jsx} | 40 +- src/components/Atoms/Confetti/Confetti.md | 15 - .../Atoms/Confetti/ConfettiExample.jsx | 15 + src/components/Atoms/ErrorText/ErrorText.md | 5 - .../Atoms/ErrorText/ErrorTextExample.jsx | 8 + src/components/Atoms/Icons/Arrow.js | 8 +- src/components/Atoms/Icons/Internal.js | 6 +- .../Atoms/InfoMessage/InfoMessage.js | 68 - .../Atoms/InfoMessage/InfoMessage.md | 39 - .../Atoms/InfoMessage/InfoMessage.test.js | 35 - .../__snapshots__/InfoMessage.test.js.snap | 285 - src/components/Atoms/Input/Input.md | 152 - src/components/Atoms/Input/InputExample.jsx | 129 + src/components/Atoms/Label/Label.md | 21 - src/components/Atoms/Label/LabelExample.jsx | 27 + src/components/Atoms/Link/Link.js | 2 +- src/components/Atoms/Link/Link.md | 223 - src/components/Atoms/Link/Link.style.js | 6 +- src/components/Atoms/Link/Link.test.js | 12 +- src/components/Atoms/Link/LinkExample.jsx | 99 + src/components/Atoms/Logo/Logo.md | 22 - src/components/Atoms/Logo/LogoExample.jsx | 17 + src/components/Atoms/Pagination/Pagination.md | 159 - .../Atoms/Pagination/PaginationExample.jsx | 128 + src/components/Atoms/Picture/Picture.md | 28 - .../Atoms/Picture/PictureExample.jsx | 33 + .../Atoms/RadioButton/RadioButton.md | 16 - .../Atoms/RadioButton/RadioButtonExample.jsx | 12 + src/components/Atoms/RichText/RichText.md | 8 - .../Atoms/RichText/RichTextExample.jsx | 11 + src/components/Atoms/Select/Select.md | 47 - src/components/Atoms/Select/SelectExample.jsx | 48 + .../Atoms/SocialIcons/SocialIcons.md | 20 - .../Atoms/SocialIcons/SocialIconsExample.jsx | 23 + src/components/Atoms/Text/Text.md | 169 - src/components/Atoms/Text/TextExample.jsx | 135 + src/components/Atoms/TextArea/TextArea.md | 21 - .../Atoms/TextArea/TextAreaExample.jsx | 26 + .../TextInputWithDropdown.md | 32 - .../TextInputWithDropdownExample.jsx | 35 + .../Molecules/Accordion/Accordion.js | 10 +- .../Molecules/Accordion/Accordion.md | 51 - .../Molecules/Accordion/AccordionExample.jsx | 29 + .../__snapshots__/Accordion.test.js.snap | 16 +- .../Molecules/ArticleTeaser/ArticleTeaser.js | 8 +- .../Molecules/ArticleTeaser/ArticleTeaser.md | 68 - .../ArticleTeaser/ArticleTeaser.test.js | 4 +- .../ArticleTeaser/ArticleTeaserExample.jsx | 45 + src/components/Molecules/Banner/Banner.md | 13 - .../Molecules/Banner/BannerExample.jsx | 15 + src/components/Molecules/Box/Box.md | 33 - src/components/Molecules/Box/BoxExample.jsx | 29 + .../CTA/CTAMultiCard/CTAMultiCard.md | 230 - .../CTA/CTAMultiCard/CTAMultiCardExample.jsx | 71 + .../__snapshots__/CTAMultiCard.test.js.snap | 548 +- .../CTA/CTASingleCard/CTASingleCard.md | 124 - .../CTASingleCard/CTASingleCardExample.jsx | 44 + .../__snapshots__/CTASingleCard.test.js.snap | 286 +- .../Molecules/CTA/shared/CTACard.js | 7 +- .../Molecules/CTA/shared/CTACard.style.js | 28 +- .../Molecules/CTA/shared/_ArrowIcon.js | 22 + src/components/Molecules/Card/Card.md | 106 - src/components/Molecules/Card/CardExample.jsx | 82 + src/components/Molecules/CardDs/CardDs.md | 167 - .../Molecules/CardDs/CardDsExample.jsx | 85 + .../CardDs/__snapshots__/CardDs.test.js.snap | 18 +- src/components/Molecules/Chip/Chip.md | 14 - src/components/Molecules/Chip/ChipExample.jsx | 14 + .../Molecules/Countdown/Countdown.md | 9 - .../Molecules/Countdown/CountdownExample.jsx | 16 + .../Molecules/Descriptor/Descriptor.md | 29 - .../Descriptor/DescriptorExample.jsx | 33 + .../Molecules/DoubleCopy/DoubleCopy.md | 18 - .../DoubleCopy/DoubleCopyExample.jsx | 20 + .../Molecules/HeroBanner/HeroBanner.js | 9 +- .../Molecules/HeroBanner/HeroBanner.md | 347 - .../Molecules/HeroBanner/HeroBanner.style.js | 9 - .../HeroBanner/HeroBannerExample.jsx | 73 + .../Molecules/InfoBanner/InfoBanner.md | 21 - .../InfoBanner/InfoBannerExample.jsx | 16 + .../__snapshots__/InfoBanner.test.js.snap | 1 + .../Molecules/LogoLinked/LogoLinked.md | 16 - .../Molecules/PartnerLink/PartnerLink.md | 8 - .../Molecules/PartnerLink/PartnerLink.test.js | 1 + .../PartnerLink/PartnerLinkExample.jsx | 12 + .../PictureOrVideo/PictureOrVideo.md | 59 - .../__snapshots__/PictureOrVideo.test.js.snap | 1 - src/components/Molecules/Promo/Promo.md | 396 - .../Molecules/Promo/PromoExample.jsx | 91 + .../Promo/__snapshots__/Promo.test.js.snap | 2 + .../Molecules/QuoteSlice/QuoteSlice.md | 53 - .../QuoteSlice/QuoteSliceExample.jsx | 44 + .../__snapshots__/QuoteSlice.test.js.snap | 1 + .../Molecules/SchoolLookup/SchoolLookup.md | 18 - .../SchoolLookup/SchoolLookupExample.jsx | 17 + .../Molecules/SearchInput/SearchInput.md | 15 - .../SearchInput/SearchInputExample.jsx | 17 + .../Molecules/SearchResult/SearchResult.md | 55 - .../SearchResult/SearchResultExample.jsx | 49 + .../__snapshots__/SearchResult.test.js.snap | 4 + .../Molecules/ShareButton/ShareButton.md | 10 - .../ShareButton/ShareButtonExample.jsx | 11 + .../SimpleSchoolLookup/SimpleSchoolLookup.md | 7 - .../SimpleSchoolLookupExample.jsx | 8 + .../Molecules/SingleMessage/SingleMessage.md | 285 - .../SingleMessage/SingleMessageExample.jsx | 92 + .../__snapshots__/SingleMessage.test.js.snap | 2 + .../SingleMessageDS/SingleMessageDs.md | 190 - .../SingleMessageDsExample.jsx | 109 + .../SingleMessageDs.test.js.snap | 1 + .../Molecules/StatsSlice/StatsSlice.md | 60 - .../Molecules/Typeahead/Typeahead.md | 24 - .../Molecules/Typeahead/TypeaheadExample.jsx | 24 + .../Molecules/VideoBanner/VideoBanner.md | 26 - .../VideoBanner/VideoBannerExample.jsx | 20 + .../Molecules/shared/ctaArrow/ArrowIcon.js | 22 - .../shared/ctaArrow/CtaArrowCircle.style.js | 39 - .../Organisms/CookieBanner/CookieBanner.md | 15 - .../CookieBanner/CookieBanner.test.js | 3 + .../CookieBanner/CookieBannerExample.jsx | 18 + src/components/Organisms/Donate/Donate.md | 628 - .../Organisms/DonateBanner/DonateBanner.js | 6 +- .../Organisms/DonateBanner/DonateBanner.md | 288 - .../DonateBanner/DonateBanner.style.js | 19 +- .../DonateBanner/DonateBanner.test.js | 4 +- .../Organisms/DonateBanner/Form/Form.js | 24 +- .../__snapshots__/DonateBanner.test.js.snap | 421 +- .../DynamicGallery/DynamicGallery.md | 30 - .../DynamicGallery/DynamicGalleryExample.jsx | 31 + .../__snapshots__/DynamicGallery.test.js.snap | 48 +- .../Organisms/EmailBanner/EmailBanner.md | 264 - .../EmailBanner/EmailBanner.style.js | 1 + .../Organisms/EmailBanner/Form/Form.js | 4 +- .../Organisms/EmailSignUp/EmailSignUp.md | 17 - .../Organisms/EmailSignUp/EmailSignUpForm.js | 3 +- src/components/Organisms/Footer/Footer.md | 29 - .../Footer/__snapshots__/Footer.test.js.snap | 22 + .../Organisms/FooterNew/FooterNew.md | 48 - .../__snapshots__/FooterNew.test.js.snap | 38 +- src/components/Organisms/Header/Header.md | 194 - .../Organisms/Header2025/Header2025.md | 667 - .../Organisms/ImpactSlider/ImpactSlider.js | 12 +- .../Organisms/ImpactSlider/ImpactSlider.md | 45 - .../ImpactSlider/ImpactSlider.style.js | 11 +- .../ImpactSlider/ImpactSliderExample.jsx | 43 + .../MarketingPreferencesDS.md | 15 - .../Organisms/Membership/Membership.md | 44 - .../RichtextCarousel/RichtextCarousel.md | 14 - .../RichtextCarouselExample.jsx | 12 + .../Organisms/WYMDCarousel/WYMDCarousel.md | 40 - .../WYMDCarousel/WYMDCarouselExample.jsx | 24 + src/demos/ExampleDisplay.jsx | 47 + src/demos/index.jsx | 187 + src/index.js | 4 - src/main.jsx | 13 + src/theme/shared/assets/alt_cta_underline.svg | 2 +- vite.config.mjs | 44 + yarn.lock | 10782 +++++----------- 172 files changed, 6927 insertions(+), 14579 deletions(-) create mode 100644 index.html create mode 100644 src/App.jsx create mode 100644 src/App.styles.js delete mode 100644 src/components/Atoms/AmbientVideo/AmbientVideo.md create mode 100644 src/components/Atoms/AmbientVideo/AmbientVideoExample.jsx delete mode 100644 src/components/Atoms/Button/Button.md create mode 100644 src/components/Atoms/Button/ButtonExample.jsx delete mode 100644 src/components/Atoms/ButtonWithStates/ButtonWithStates.md create mode 100644 src/components/Atoms/ButtonWithStates/ButtonWithStatesExample.jsx rename src/components/Atoms/Checkbox/{Checkbox.md => CheckboxExample.jsx} (57%) delete mode 100644 src/components/Atoms/Confetti/Confetti.md create mode 100644 src/components/Atoms/Confetti/ConfettiExample.jsx delete mode 100644 src/components/Atoms/ErrorText/ErrorText.md create mode 100644 src/components/Atoms/ErrorText/ErrorTextExample.jsx delete mode 100644 src/components/Atoms/InfoMessage/InfoMessage.js delete mode 100644 src/components/Atoms/InfoMessage/InfoMessage.md delete mode 100644 src/components/Atoms/InfoMessage/InfoMessage.test.js delete mode 100644 src/components/Atoms/InfoMessage/__snapshots__/InfoMessage.test.js.snap delete mode 100644 src/components/Atoms/Input/Input.md create mode 100644 src/components/Atoms/Input/InputExample.jsx delete mode 100644 src/components/Atoms/Label/Label.md create mode 100644 src/components/Atoms/Label/LabelExample.jsx delete mode 100644 src/components/Atoms/Link/Link.md create mode 100644 src/components/Atoms/Link/LinkExample.jsx delete mode 100644 src/components/Atoms/Logo/Logo.md create mode 100644 src/components/Atoms/Logo/LogoExample.jsx delete mode 100644 src/components/Atoms/Pagination/Pagination.md create mode 100644 src/components/Atoms/Pagination/PaginationExample.jsx delete mode 100644 src/components/Atoms/Picture/Picture.md create mode 100644 src/components/Atoms/Picture/PictureExample.jsx delete mode 100644 src/components/Atoms/RadioButton/RadioButton.md create mode 100644 src/components/Atoms/RadioButton/RadioButtonExample.jsx delete mode 100644 src/components/Atoms/RichText/RichText.md create mode 100644 src/components/Atoms/RichText/RichTextExample.jsx delete mode 100644 src/components/Atoms/Select/Select.md create mode 100644 src/components/Atoms/Select/SelectExample.jsx delete mode 100644 src/components/Atoms/SocialIcons/SocialIcons.md create mode 100644 src/components/Atoms/SocialIcons/SocialIconsExample.jsx delete mode 100644 src/components/Atoms/Text/Text.md create mode 100644 src/components/Atoms/Text/TextExample.jsx delete mode 100644 src/components/Atoms/TextArea/TextArea.md create mode 100644 src/components/Atoms/TextArea/TextAreaExample.jsx delete mode 100644 src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.md create mode 100644 src/components/Atoms/TextInputWithDropdown/TextInputWithDropdownExample.jsx delete mode 100644 src/components/Molecules/Accordion/Accordion.md create mode 100644 src/components/Molecules/Accordion/AccordionExample.jsx delete mode 100644 src/components/Molecules/ArticleTeaser/ArticleTeaser.md create mode 100644 src/components/Molecules/ArticleTeaser/ArticleTeaserExample.jsx delete mode 100644 src/components/Molecules/Banner/Banner.md create mode 100644 src/components/Molecules/Banner/BannerExample.jsx delete mode 100644 src/components/Molecules/Box/Box.md create mode 100644 src/components/Molecules/Box/BoxExample.jsx delete mode 100644 src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md create mode 100644 src/components/Molecules/CTA/CTAMultiCard/CTAMultiCardExample.jsx delete mode 100644 src/components/Molecules/CTA/CTASingleCard/CTASingleCard.md create mode 100644 src/components/Molecules/CTA/CTASingleCard/CTASingleCardExample.jsx create mode 100644 src/components/Molecules/CTA/shared/_ArrowIcon.js delete mode 100644 src/components/Molecules/Card/Card.md create mode 100644 src/components/Molecules/Card/CardExample.jsx delete mode 100644 src/components/Molecules/CardDs/CardDs.md create mode 100644 src/components/Molecules/CardDs/CardDsExample.jsx delete mode 100644 src/components/Molecules/Chip/Chip.md create mode 100644 src/components/Molecules/Chip/ChipExample.jsx delete mode 100644 src/components/Molecules/Countdown/Countdown.md create mode 100644 src/components/Molecules/Countdown/CountdownExample.jsx delete mode 100644 src/components/Molecules/Descriptor/Descriptor.md create mode 100644 src/components/Molecules/Descriptor/DescriptorExample.jsx delete mode 100644 src/components/Molecules/DoubleCopy/DoubleCopy.md create mode 100644 src/components/Molecules/DoubleCopy/DoubleCopyExample.jsx delete mode 100644 src/components/Molecules/HeroBanner/HeroBanner.md create mode 100644 src/components/Molecules/HeroBanner/HeroBannerExample.jsx delete mode 100644 src/components/Molecules/InfoBanner/InfoBanner.md create mode 100644 src/components/Molecules/InfoBanner/InfoBannerExample.jsx delete mode 100644 src/components/Molecules/LogoLinked/LogoLinked.md delete mode 100644 src/components/Molecules/PartnerLink/PartnerLink.md create mode 100644 src/components/Molecules/PartnerLink/PartnerLinkExample.jsx delete mode 100644 src/components/Molecules/PictureOrVideo/PictureOrVideo.md delete mode 100644 src/components/Molecules/Promo/Promo.md create mode 100644 src/components/Molecules/Promo/PromoExample.jsx delete mode 100644 src/components/Molecules/QuoteSlice/QuoteSlice.md create mode 100644 src/components/Molecules/QuoteSlice/QuoteSliceExample.jsx delete mode 100644 src/components/Molecules/SchoolLookup/SchoolLookup.md create mode 100644 src/components/Molecules/SchoolLookup/SchoolLookupExample.jsx delete mode 100644 src/components/Molecules/SearchInput/SearchInput.md create mode 100644 src/components/Molecules/SearchInput/SearchInputExample.jsx delete mode 100644 src/components/Molecules/SearchResult/SearchResult.md create mode 100644 src/components/Molecules/SearchResult/SearchResultExample.jsx delete mode 100644 src/components/Molecules/ShareButton/ShareButton.md create mode 100644 src/components/Molecules/ShareButton/ShareButtonExample.jsx delete mode 100644 src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.md create mode 100644 src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookupExample.jsx delete mode 100644 src/components/Molecules/SingleMessage/SingleMessage.md create mode 100644 src/components/Molecules/SingleMessage/SingleMessageExample.jsx delete mode 100644 src/components/Molecules/SingleMessageDS/SingleMessageDs.md create mode 100644 src/components/Molecules/SingleMessageDS/SingleMessageDsExample.jsx delete mode 100644 src/components/Molecules/StatsSlice/StatsSlice.md delete mode 100644 src/components/Molecules/Typeahead/Typeahead.md create mode 100644 src/components/Molecules/Typeahead/TypeaheadExample.jsx delete mode 100644 src/components/Molecules/VideoBanner/VideoBanner.md create mode 100644 src/components/Molecules/VideoBanner/VideoBannerExample.jsx delete mode 100644 src/components/Molecules/shared/ctaArrow/ArrowIcon.js delete mode 100644 src/components/Molecules/shared/ctaArrow/CtaArrowCircle.style.js delete mode 100644 src/components/Organisms/CookieBanner/CookieBanner.md create mode 100644 src/components/Organisms/CookieBanner/CookieBannerExample.jsx delete mode 100644 src/components/Organisms/Donate/Donate.md delete mode 100644 src/components/Organisms/DonateBanner/DonateBanner.md delete mode 100644 src/components/Organisms/DynamicGallery/DynamicGallery.md create mode 100644 src/components/Organisms/DynamicGallery/DynamicGalleryExample.jsx delete mode 100644 src/components/Organisms/EmailBanner/EmailBanner.md delete mode 100644 src/components/Organisms/EmailSignUp/EmailSignUp.md delete mode 100644 src/components/Organisms/Footer/Footer.md delete mode 100644 src/components/Organisms/FooterNew/FooterNew.md delete mode 100644 src/components/Organisms/Header/Header.md delete mode 100644 src/components/Organisms/Header2025/Header2025.md delete mode 100644 src/components/Organisms/ImpactSlider/ImpactSlider.md create mode 100644 src/components/Organisms/ImpactSlider/ImpactSliderExample.jsx delete mode 100644 src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.md delete mode 100644 src/components/Organisms/Membership/Membership.md delete mode 100644 src/components/Organisms/RichtextCarousel/RichtextCarousel.md create mode 100644 src/components/Organisms/RichtextCarousel/RichtextCarouselExample.jsx delete mode 100644 src/components/Organisms/WYMDCarousel/WYMDCarousel.md create mode 100644 src/components/Organisms/WYMDCarousel/WYMDCarouselExample.jsx create mode 100644 src/demos/ExampleDisplay.jsx create mode 100644 src/demos/index.jsx create mode 100644 src/main.jsx create mode 100644 vite.config.mjs diff --git a/.eslintrc b/.eslintrc index d1bc466bf..c649764b8 100644 --- a/.eslintrc +++ b/.eslintrc @@ -21,7 +21,7 @@ "react/jsx-filename-extension": "off", "react/no-danger": "off", "import/no-extraneous-dependencies": ["error", {"devDependencies": ["importers/**/*.js"]}], - "react/jsx-curly-newline": "off", // already handled by prettier, but differently, so we have to disable one + "react/jsx-curly-newline": "off", "quotes": [ 2, "single", diff --git a/.nvmrc b/.nvmrc index 9e15be387..91f7588a1 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v16.20.0 +v18.20.0 diff --git a/babel.config.js b/babel.config.js index 0f8518bde..befa8ee62 100644 --- a/babel.config.js +++ b/babel.config.js @@ -2,10 +2,12 @@ module.exports = function (api) { api.cache(true); - const presets = [['react-app', { absoluteRuntime: false }]]; + const presets = [ + ['@babel/preset-env', { targets: { node: 'current' } }], + ['@babel/preset-react', { runtime: 'automatic' }] + ]; const plugins = [ - ['babel-plugin-styled-components'], - ['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }] + ['babel-plugin-styled-components'] ]; return { diff --git a/index.html b/index.html new file mode 100644 index 000000000..9ffc7a842 --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + Component Library + + +
+ + + diff --git a/package.json b/package.json index 29a983c99..d9cfe4254 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,19 @@ "name": "@comicrelief/component-library", "author": "Comic Relief Engineering Team", "version": "0.0.0-see.readme.for.semantic.release.process", - "main": "dist/index.js", + "main": "dist/index.cjs.js", + "module": "dist/index.es.js", + "files": [ + "dist" + ], "license": "ISC", + "repository": { + "type": "git", + "url": "https://github.com/comicrelief/component-library.git" + }, "jest": { "verbose": true, + "testEnvironment": "jsdom", "testPathIgnorePatterns": [ "/playwright/", "/dist/", @@ -16,78 +25,54 @@ "^axios$": "axios/dist/node/axios.cjs" } }, - "module": "dist/index.js", - "repository": { - "type": "git", - "url": "https://github.com/comicrelief/component-library.git" + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "test:unit": "jest", + "test:unit:update": "jest -u", + "styleguide": "cross-env FAST_REFRESH=false styleguidist server", + "styleguide:build": "styleguidist build", + "test:e2e": "playwright test --project=chromium", + "test:e2e--h": "playwright test --project=chromium --headed", + "test:e2e:ci": "NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e", + "test:e2e:local": "export NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e", + "lint": "eslint src", + "lint-fix": "yarn lint --fix" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18", + "styled-components": ">=6" }, "dependencies": { - "@babel/cli": "^7.21.5", "@hookform/resolvers": "^3.9.0", "@splidejs/react-splide": "^0.7.12", - "axios": "^1.7.2", - "babel-plugin-import": "^1.13.8", + "axios": "^1.7.7", "lazysizes": "^5.3.2", - "lodash": "^4.17.11", - "moment": "^2.29.4", + "lodash": "^4.17.21", + "moment": "^2.30.1", "prop-types": "^15.8.1", - "pure-react-carousel": "1.30.1", - "react": "^17.0.2", - "react-canvas-confetti": "^1.4.0", + "pure-react-carousel": "^1.30.1", + "react-canvas-confetti": "^2.0.7", "react-currency-format": "^1.1.0", - "react-dom": "^17.0.2", - "react-hook-form": "^7.52.1", + "react-hook-form": "^7.53.2", "react-modal": "^3.16.1", "react-range-slider-input": "^3.0.7", - "react-responsive": "^9.0.2", - "react-scripts": "4.0.3", - "react-spinners": "^0.11.0", + "react-responsive": "^10.0.0", + "react-spinners": "^0.14.1", "react-uid": "^2.3.3", - "styled-components": "^5.3.11", "youtube-player": "^5.6.0", "yup": "^1.4.0" }, - "resolutions": { - "react-scripts/workbox-webpack-plugin/workbox-build/@surma/rollup-plugin-off-main-thread/ejs": "3.1.10", - "loader-utils": "2.0.3", - "unset-value": "2.0.1", - "shell-quote": "1.7.3", - "ansi-html": "0.0.9", - "semver": "7.5.2", - "braces": "3.0.3", - "node-forge": "1.3.2", - "nth-check": "2.0.1" - }, - "scripts": { - "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js", - "test:unit": "yarn run jest", - "test:unit:update": "yarn jest -u", - "styleguide": "cross-env FAST_REFRESH=false styleguidist server", - "styleguide:build": "styleguidist build", - "test:e2e": "playwright test --project=chromium", - "test:e2e--h": "playwright test --project=chromium --headed", - "test:e2e:ci": "NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e", - "test:e2e:local": "export NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e", - "lint": "eslint src", - "lint-fix": "yarn lint --fix", - "build-pr": "rm -rf dist && NODE_ENV=development BABEL_ENV=development yarn babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js", - "postinstall": "yarn build-pr" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, "devDependencies": { - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@babel/core": "^7.24.0", + "@babel/preset-env": "^7.24.0", + "@babel/preset-react": "^7.24.0", "@playwright/test": "^1.38.1", + "@vitejs/plugin-react": "^4.3.1", + "babel-jest": "^29.7.0", + "babel-plugin-styled-components": "^2.1.4", "cross-env": "^7.0.3", "ejs": "^3.1.10", "eslint": "^7.32.0", @@ -96,13 +81,19 @@ "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", - "jest": "^26.1.0", - "jest-styled-components": "^7.1.1", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "jest-styled-components": "^8.0.0", "npm-run-all": "^4.1.5", "prettier": "^2.8.8", - "react-styleguidist": "^11.1.7", - "react-test-renderer": "^17.0.2", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-styleguidist": "^12.0.0", + "react-test-renderer": "^18.3.1", "semantic-release": "^17.4.6", - "start-server-and-test": "^2.0.4" + "start-server-and-test": "^2.0.4", + "styled-components": "^6.1.13", + "vite": "^5.4.10", + "vite-plugin-dts": "^4.3.0" } } diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 000000000..6bd09beb9 --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,53 @@ +import React, { useState } from 'react'; +import { atoms, molecules, organisms } from './demos/index.jsx'; +import { Layout, Sidebar, SidebarTitle, SidebarItem, Preview, PreviewHeader, PreviewBox, Logo, IsolateButton } from './App.styles.js'; + +const groups = [ + { label: 'Atoms', items: atoms }, + { label: 'Molecules', items: molecules }, + { label: 'Organisms', items: organisms }, +]; + +export default function App() { + const [selected, setSelected] = useState({ group: 'Atoms', name: atoms[0].name }); + const [isIsolated, setIsIsolated] = useState(false); + + const currentItem = groups + .flatMap(g => g.items) + .find(item => item.name === selected.name); + + return ( + + {!isIsolated && ( + + Comic Relief + {groups.map(group => ( +
+ {group.label} + {group.items.map(item => ( + setSelected({ group: group.label, name: item.name })} + > + {item.name} + + ))} +
+ ))} + + )} + + +

{selected.name}

+ setIsIsolated(s => !s)}> + {isIsolated ? 'Show Sidebar' : 'Isolate'} + + + + {currentItem?.demo} + + + + ); +} diff --git a/src/App.styles.js b/src/App.styles.js new file mode 100644 index 000000000..626d92605 --- /dev/null +++ b/src/App.styles.js @@ -0,0 +1,103 @@ +import styled from 'styled-components'; +import color from './theme/crTheme/colors'; + +export const Layout = styled.div` + display: flex; + height: 100vh; + font-family: sans-serif; +`; + +export const Sidebar = styled.nav` + width: 240px; + min-width: 240px; + background: ${color('grey_5')}; + color: ${color('white')}; + overflow-y: auto; + padding: 1rem 0; +`; + +export const SidebarTitle = styled.div` + padding: 0.75rem 1rem 0.25rem; + font-size: 0.65rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: ${color('grey')}; +`; + +export const SidebarItem = styled.button` + display: block; + width: 100%; + text-align: left; + padding: 0.4rem 1rem; + background: ${({ $active }) => ($active ? color('grey_4_hover') : color('transparent'))}; + color: ${({ $active }) => ($active ? color('white') : color('grey'))}; + border: none; + cursor: pointer; + font-size: 0.85rem; + border-left: 3px solid ${({ $active }) => ($active ? color('red') : color('transparent'))}; + + &:hover { + background: ${color('grey_dark')}; + color: ${color('white')}; + } +`; + +export const Preview = styled.main` + flex: 1; + overflow-y: auto; + padding: 2rem; + background: ${color('grey_light')}; +`; + +export const PreviewHeader = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 0 1.5rem; + border-bottom: 1px solid ${color('grey_medium')}; + padding-bottom: 0.75rem; + + h2 { + margin: 0; + font-size: 1.25rem; + color: ${color('grey_5')}; + } +`; + +export const PreviewBox = styled.div` + background: ${color('white')}; + border: 1px solid ${color('grey_medium')}; + border-radius: 6px; + padding: 2rem; +`; + +export const Logo = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1rem 0.75rem; + font-size: 0.8rem; + font-weight: 700; + color: ${color('red')}; + letter-spacing: 0.05em; + border-bottom: 1px solid ${color('grey_dark')}; + margin-bottom: 0.5rem; +`; + +export const IsolateButton = styled.button` + background: none; + border: 1px solid ${color('grey_medium')}; + border-radius: 4px; + color: ${({ $active }) => ($active ? color('red') : color('grey_5'))}; + cursor: pointer; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.05em; + padding: 0.25rem 0.6rem; + + &:hover { + border-color: ${color('red')}; + color: ${color('red')}; + } +`; diff --git a/src/components/Atoms/AmbientVideo/AmbientVideo.md b/src/components/Atoms/AmbientVideo/AmbientVideo.md deleted file mode 100644 index 05730f777..000000000 --- a/src/components/Atoms/AmbientVideo/AmbientVideo.md +++ /dev/null @@ -1,59 +0,0 @@ -# AmbientVideo - -A muted, full-width ambient video component using the HTML5 video element. Ideal for background or decorative video. - -Default (loop, no controls). - -```js -const defaultData = require('../../../styleguide/data/data').defaultData; -const video480 = require('./big-buck-bunny-480p-30sec.mp4'); - -
- -
-``` - -With full controls. - -```js -const defaultData = require('../../../styleguide/data/data').defaultData; -const video480 = require('./big-buck-bunny-480p-30sec.mp4'); - -
- -
-``` - -With play/pause button (hover to reveal). - -```js -const defaultData = require('../../../styleguide/data/data').defaultData; -const video480 = require('./big-buck-bunny-480p-30sec.mp4'); - -
- -
-``` - -Play once (no loop). - -```js -const defaultData = require('../../../styleguide/data/data').defaultData; -const video480 = require('./big-buck-bunny-480p-30sec.mp4'); - -
- -
-``` - -Responsive: 1080p above M breakpoint (740px), 480p below. Resize the browser to see the switch. - -```js -const defaultData = require('../../../styleguide/data/data').defaultData; -const video480 = require('./thetestdatacom_480p_example.mp4'); -const video1080 = require('./big-buck-bunny-1080p-30sec.mp4'); - -
- -
-``` diff --git a/src/components/Atoms/AmbientVideo/AmbientVideo.style.js b/src/components/Atoms/AmbientVideo/AmbientVideo.style.js index f07d9e3bd..2bc348ef9 100644 --- a/src/components/Atoms/AmbientVideo/AmbientVideo.style.js +++ b/src/components/Atoms/AmbientVideo/AmbientVideo.style.js @@ -1,7 +1,5 @@ import styled from 'styled-components'; -import zIndex from '../../../theme/shared/zIndex'; - const Wrapper = styled.div` width: 100%; height: 100%; @@ -79,7 +77,6 @@ const PlayPauseButton = styled.button` justify-content: center; opacity: 0; transition: opacity 0.2s ease 2s; - ${zIndex('high')}; // Play icon is shifted to the right slightly as it // doesn't look quite right when centered normally diff --git a/src/components/Atoms/AmbientVideo/AmbientVideoExample.jsx b/src/components/Atoms/AmbientVideo/AmbientVideoExample.jsx new file mode 100644 index 000000000..d7882bfd5 --- /dev/null +++ b/src/components/Atoms/AmbientVideo/AmbientVideoExample.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import AmbientVideo from './AmbientVideo'; +import { defaultData } from '../../../styleguide/data/data'; +import video480 from './big-buck-bunny-480p-30sec.mp4'; +import video1080 from './big-buck-bunny-1080p-30sec.mp4'; +import videoMobile from './thetestdatacom_480p_example.mp4'; + +export default function AmbientVideoExample() { + return ( + <> +

Default (loop, no controls)

+
+ +
+ +

With full controls

+
+ +
+ +

With play/pause button (hover to reveal)

+
+ +
+ +

Play once (no loop)

+
+ +
+ +

Responsive: 1080p above M breakpoint (740px), 480p below

+
+ +
+ + ); +} diff --git a/src/components/Atoms/Button/Button.md b/src/components/Atoms/Button/Button.md deleted file mode 100644 index 48afd3b57..000000000 --- a/src/components/Atoms/Button/Button.md +++ /dev/null @@ -1,101 +0,0 @@ -```js - -import buttonTypes from '../../../theme/crTheme/buttonTypes'; - -<> -

Primary

-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
-

Secondary

- -
- -
- -
- -
- -
- -
- -
- -
- - -
- -
- -
- -
- -
-

Teritary

- -
- -
- -
- -
- -
- -
- -
- -
- - -
- -
- -
- -
- - - -``` - -```js - -``` - -```js - -``` \ No newline at end of file diff --git a/src/components/Atoms/Button/ButtonExample.jsx b/src/components/Atoms/Button/ButtonExample.jsx new file mode 100644 index 000000000..a4f24ef5e --- /dev/null +++ b/src/components/Atoms/Button/ButtonExample.jsx @@ -0,0 +1,83 @@ +import React from 'react'; +import Button from './Button'; +import buttonTypes from '../../../theme/crTheme/buttonTypes'; + +export default function ButtonExample() { + return ( + <> +

Primary

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+

Secondary

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+

Tertiary

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+

Other

+
+ +
+
+ +
+ + ); +} diff --git a/src/components/Atoms/ButtonWithStates/ButtonWithStates.md b/src/components/Atoms/ButtonWithStates/ButtonWithStates.md deleted file mode 100644 index 21325436c..000000000 --- a/src/components/Atoms/ButtonWithStates/ButtonWithStates.md +++ /dev/null @@ -1,13 +0,0 @@ -## Disabled and loading - -```js -import ButtonWithStates from './ButtonWithStates'; - - - Enter prize draw - -``` \ No newline at end of file diff --git a/src/components/Atoms/ButtonWithStates/ButtonWithStatesExample.jsx b/src/components/Atoms/ButtonWithStates/ButtonWithStatesExample.jsx new file mode 100644 index 000000000..e0de541a1 --- /dev/null +++ b/src/components/Atoms/ButtonWithStates/ButtonWithStatesExample.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ButtonWithStates from './ButtonWithStates'; + +export default function ButtonWithStatesExample() { + return ( + + Enter prize draw + + ); +} diff --git a/src/components/Atoms/Checkbox/Checkbox.md b/src/components/Atoms/Checkbox/CheckboxExample.jsx similarity index 57% rename from src/components/Atoms/Checkbox/Checkbox.md rename to src/components/Atoms/Checkbox/CheckboxExample.jsx index f600e0c32..552788f46 100644 --- a/src/components/Atoms/Checkbox/Checkbox.md +++ b/src/components/Atoms/Checkbox/CheckboxExample.jsx @@ -1,8 +1,7 @@ -# CheckBox Field - -```js -import Text from '../../Atoms/Text/Text'; -import Link from '../../Atoms/Link/Link'; +import React from 'react'; +import Checkbox from './Checkbox'; +import Text from '../Text/Text'; +import Link from '../Link/Link'; const LongLabel = () => (
@@ -22,12 +21,14 @@ const LongLabel = () => (
); -<> -

List of checkboxes

- - - - +

List of checkboxes

+ + + + ( checkboxBgChecked="green" checkboxBorderChecked="green" checkboxBorderFocus="blue" - /> -
-

A checkbox with a long label containing links

- - - - -``` + /> +
+

A checkbox with a long label containing links

+ + + + + ); +} diff --git a/src/components/Atoms/Confetti/Confetti.md b/src/components/Atoms/Confetti/Confetti.md deleted file mode 100644 index cda49319a..000000000 --- a/src/components/Atoms/Confetti/Confetti.md +++ /dev/null @@ -1,15 +0,0 @@ -# Confetti - -```js -import React, { useState } from 'react'; -import Confetti from './Confetti'; - -const [isConfetti, setIsConfetti] = useState(false); - -const handleConfettiTrigger = () => setIsConfetti(!isConfetti); - -<> - - - -``` diff --git a/src/components/Atoms/Confetti/ConfettiExample.jsx b/src/components/Atoms/Confetti/ConfettiExample.jsx new file mode 100644 index 000000000..c8a0be43c --- /dev/null +++ b/src/components/Atoms/Confetti/ConfettiExample.jsx @@ -0,0 +1,15 @@ +import React, { useState } from 'react'; +import Confetti from './Confetti'; + +export default function ConfettiExample() { + const [isConfetti, setIsConfetti] = useState(false); + + return ( + <> + + + + ); +} diff --git a/src/components/Atoms/ErrorText/ErrorText.md b/src/components/Atoms/ErrorText/ErrorText.md deleted file mode 100644 index a026d2409..000000000 --- a/src/components/Atoms/ErrorText/ErrorText.md +++ /dev/null @@ -1,5 +0,0 @@ -# ErrorText - -```jsx -This is an error -``` diff --git a/src/components/Atoms/ErrorText/ErrorTextExample.jsx b/src/components/Atoms/ErrorText/ErrorTextExample.jsx new file mode 100644 index 000000000..574a38f58 --- /dev/null +++ b/src/components/Atoms/ErrorText/ErrorTextExample.jsx @@ -0,0 +1,8 @@ +import React from 'react'; +import ErrorText from './ErrorText'; + +export default function ErrorTextExample() { + return ( + This is an error + ); +} diff --git a/src/components/Atoms/Icons/Arrow.js b/src/components/Atoms/Icons/Arrow.js index 12d202abc..009b7cf14 100644 --- a/src/components/Atoms/Icons/Arrow.js +++ b/src/components/Atoms/Icons/Arrow.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import styled, { withTheme } from 'styled-components'; const angle = { - right: '0', - left: '180deg', + right: '180deg', + left: '0', down: '-90deg', up: '90deg' }; @@ -31,10 +31,10 @@ const Arrow = ({ colour={colour} mobileColour={mobileColour} xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 15 15" + viewBox="0 0 96 96" {...rest} > - + ); diff --git a/src/components/Atoms/Icons/Internal.js b/src/components/Atoms/Icons/Internal.js index 14e209dbb..3c1afd944 100644 --- a/src/components/Atoms/Icons/Internal.js +++ b/src/components/Atoms/Icons/Internal.js @@ -13,7 +13,7 @@ const StyledSVG = styled.svg` `; const Internal = ({ - colour = 'white', mobileColour = null, theme, size = 20, ...rest + colour = 'white', mobileColour = null, theme, size = 24, ...rest }) => ( - + ); diff --git a/src/components/Atoms/InfoMessage/InfoMessage.js b/src/components/Atoms/InfoMessage/InfoMessage.js deleted file mode 100644 index c75aaacf4..000000000 --- a/src/components/Atoms/InfoMessage/InfoMessage.js +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled, { css } from 'styled-components'; - -import Text from '../Text/Text'; -import fontHelper from '../../../theme/crTheme/fontHelper'; -import spacing from '../../../theme/shared/spacing'; - -const Root = styled.div` - background-color: ${({ theme, $backgroundColor }) => theme.color($backgroundColor)}; - border-radius: ${spacing('md')}; - padding: ${spacing('l')}; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - gap: ${spacing('md')}; - box-sizing: border-box; - width: 100%; -`; - -const TitleText = styled(Text)` - ${({ theme }) => css` - ${fontHelper(theme, 'p')} - `}; - font-weight: 700; - margin: 0; -`; - -const BodyText = styled(Text)` - ${({ theme }) => css` - ${fontHelper(theme, 'p')} - `}; - margin: 0; - a { - text-decoration: underline; - } -`; - -const InfoMessage = ({ - title, - message, - backgroundColor = 'blue_light', - dataTestId = 'info-message', - ...rest -}) => ( - - {title} - {message} - -); - -InfoMessage.propTypes = { - /** Theme colour key from our colour list. */ - backgroundColor: PropTypes.string, - /** Value for `data-testid` on the root (defaults to `info-message`). */ - dataTestId: PropTypes.string, - /** Bold line; string for the title */ - title: PropTypes.node.isRequired, - /** Normal-weight line; string or include `Link` for inline links */ - message: PropTypes.node.isRequired -}; - -export default InfoMessage; diff --git a/src/components/Atoms/InfoMessage/InfoMessage.md b/src/components/Atoms/InfoMessage/InfoMessage.md deleted file mode 100644 index 6ab36a7b1..000000000 --- a/src/components/Atoms/InfoMessage/InfoMessage.md +++ /dev/null @@ -1,39 +0,0 @@ - -## Examples - -```js - -``` - -### Alternative background (`coral_light`) - -```js - -``` - -### Message with inline link (JSX) - -```js -import Link from '../Link/Link'; - - - You can only donate between £1.00 and £25,000.00 at a time. If you need help,{' '} - - contact us - - . - - } -/> -``` diff --git a/src/components/Atoms/InfoMessage/InfoMessage.test.js b/src/components/Atoms/InfoMessage/InfoMessage.test.js deleted file mode 100644 index 418d435f1..000000000 --- a/src/components/Atoms/InfoMessage/InfoMessage.test.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import 'jest-styled-components'; - -import renderWithTheme from '../../../../tests/hoc/shallowWithTheme'; -import InfoMessage from './InfoMessage'; -import Link from '../Link/Link'; - -it('renders default blue_light variant', () => { - const renderer = renderWithTheme( - - ); - expect(renderer.toJSON()).toMatchSnapshot(); -}); - -it('renders coral_light variant with message containing a link', () => { - const renderer = renderWithTheme( - - You can only donate between £1.00 and £25,000.00 at a time. If you need help,{' '} - - contact us - - . - - } - /> - ); - expect(renderer.toJSON()).toMatchSnapshot(); -}); diff --git a/src/components/Atoms/InfoMessage/__snapshots__/InfoMessage.test.js.snap b/src/components/Atoms/InfoMessage/__snapshots__/InfoMessage.test.js.snap deleted file mode 100644 index 724b9201a..000000000 --- a/src/components/Atoms/InfoMessage/__snapshots__/InfoMessage.test.js.snap +++ /dev/null @@ -1,285 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders coral_light variant with message containing a link 1`] = ` -.c1 { - font-family: 'Montserrat',Helvetica,Arial,sans-serif; - font-weight: 400; - text-transform: inherit; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - font-size: 1rem; - line-height: 1.25rem; -} - -.c1 span { - font-size: inherit; - line-height: inherit; -} - -.c4 { - position: relative; - display: inline; - color: #000000; - font-weight: normal; -} - -.c4:hover, -.c4:focus { - color: #000000; - -webkit-text-decoration: none; - text-decoration: none; -} - -.c0 { - background-color: #FFCECE; - border-radius: 1rem; - padding: 2rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - gap: 1rem; - box-sizing: border-box; - width: 100%; -} - -.c2 { - font-family: 'Montserrat',Helvetica,Arial,sans-serif; - font-weight: 400; - text-transform: inherit; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - font-size: 1rem; - line-height: 1.25rem; - font-weight: 700; - margin: 0; -} - -.c3 { - font-family: 'Montserrat',Helvetica,Arial,sans-serif; - font-weight: 400; - text-transform: inherit; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - font-size: 1rem; - line-height: 1.25rem; - margin: 0; -} - -.c3 a { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -@media (min-width:740px) { - .c1 { - font-size: 1rem; - line-height: 1.25rem; - } -} - -@media (min-width:1024px) { - .c1 { - font-size: 1.125rem; - line-height: 1.375rem; - } -} - -@media (min-width:740px) { - .c2 { - font-size: 1rem; - line-height: 1.25rem; - } -} - -@media (min-width:1024px) { - .c2 { - font-size: 1.125rem; - line-height: 1.375rem; - } -} - -@media (min-width:740px) { - .c3 { - font-size: 1rem; - line-height: 1.25rem; - } -} - -@media (min-width:1024px) { - .c3 { - font-size: 1.125rem; - line-height: 1.375rem; - } -} - -
-

- Please check your donation -

-

- You can only donate between £1.00 and £25,000.00 at a time. If you need help, - - - contact us - - . -

-
-`; - -exports[`renders default blue_light variant 1`] = ` -.c1 { - font-family: 'Montserrat',Helvetica,Arial,sans-serif; - font-weight: 400; - text-transform: inherit; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - font-size: 1rem; - line-height: 1.25rem; -} - -.c1 span { - font-size: inherit; - line-height: inherit; -} - -.c0 { - background-color: #BECCF9; - border-radius: 1rem; - padding: 2rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - gap: 1rem; - box-sizing: border-box; - width: 100%; -} - -.c2 { - font-family: 'Montserrat',Helvetica,Arial,sans-serif; - font-weight: 400; - text-transform: inherit; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - font-size: 1rem; - line-height: 1.25rem; - font-weight: 700; - margin: 0; -} - -.c3 { - font-family: 'Montserrat',Helvetica,Arial,sans-serif; - font-weight: 400; - text-transform: inherit; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - font-size: 1rem; - line-height: 1.25rem; - margin: 0; -} - -.c3 a { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -@media (min-width:740px) { - .c1 { - font-size: 1rem; - line-height: 1.25rem; - } -} - -@media (min-width:1024px) { - .c1 { - font-size: 1.125rem; - line-height: 1.375rem; - } -} - -@media (min-width:740px) { - .c2 { - font-size: 1rem; - line-height: 1.25rem; - } -} - -@media (min-width:1024px) { - .c2 { - font-size: 1.125rem; - line-height: 1.375rem; - } -} - -@media (min-width:740px) { - .c3 { - font-size: 1rem; - line-height: 1.25rem; - } -} - -@media (min-width:1024px) { - .c3 { - font-size: 1.125rem; - line-height: 1.375rem; - } -} - -
-

- Are you trying to pay in your fundraising money? -

-

- If you are, please select the ‘Pay in Fundraising’ tab above. If not, please continue with your donation. -

-
-`; diff --git a/src/components/Atoms/Input/Input.md b/src/components/Atoms/Input/Input.md deleted file mode 100644 index 3bf5b0851..000000000 --- a/src/components/Atoms/Input/Input.md +++ /dev/null @@ -1,152 +0,0 @@ -```js -

Input required with label and hint

- -``` - -```js -

Input with error message

- -``` - -```js -

Simple input (optional)

- -``` - -```js -

Simple input (required)

- -``` - - -```js -

Input Label with markup

- -``` - -```js -import styled from 'styled-components'; -import Text from '../../Atoms/Text/Text'; - -const ItalicText = styled(Text).attrs({weight: 'normal'})` - font-style: italic -`; - -<> -

Input label as React element

- Email (please check it's correct)} - errorMsg="" - id="input-example-6" - showLabel={true} - /> - -``` - -```js -

Input with prefix

-

(This example also ensures there are two decimal places onBlur)

- { - const price = event.target.value; - if (typeof Number(price) === 'number') { - event.target.value = Number(price).toFixed(2); - } - }} - /> -``` - -```js -

Input with responsive max width

- -``` - -```js -

Input with dark label

- -``` - -```js - import Text from '../../Atoms/Text/Text'; - - const exampleDescription = ( - Here's a description with some formatting - ); - - <> -

Input with Description:

- - -``` diff --git a/src/components/Atoms/Input/InputExample.jsx b/src/components/Atoms/Input/InputExample.jsx new file mode 100644 index 000000000..8b4e492af --- /dev/null +++ b/src/components/Atoms/Input/InputExample.jsx @@ -0,0 +1,129 @@ +import React from 'react'; +import styled from 'styled-components'; +import Input from './Input'; +import Text from '../Text/Text'; + +const ItalicText = styled(Text).attrs({ weight: 'normal' })` + font-style: italic; +`; + +export default function InputExample() { + return ( + <> +

Input required with label and hint

+ + +

Input with error message

+ + +

Simple input (optional)

+ + +

Simple input (required)

+ + +

Input Label with markup

+ + +

Input label as React element

+ Email (please check it's correct)} + errorMsg="" + id="input-example-6" + showLabel={true} + /> + +

Input with prefix

+

(This example also ensures there are two decimal places onBlur)

+ { + const price = event.target.value; + if (typeof Number(price) === 'number') { + event.target.value = Number(price).toFixed(2); + } + }} + /> + +

Input with responsive max width

+ + +

Input with dark label

+ + +

Input with Description:

+ Here's a description with some formatting} + /> + + ); +} diff --git a/src/components/Atoms/Label/Label.md b/src/components/Atoms/Label/Label.md deleted file mode 100644 index 3d8a41e4d..000000000 --- a/src/components/Atoms/Label/Label.md +++ /dev/null @@ -1,21 +0,0 @@ -```js - -``` - -```js -import styled from 'styled-components'; - -const StyledInput = styled.input` - max-width: 300px; - font-size: 1.5rem; - height: 2.5rem; - border-radius: 5px; - border-width: 1px; -`; - - -``` diff --git a/src/components/Atoms/Label/LabelExample.jsx b/src/components/Atoms/Label/LabelExample.jsx new file mode 100644 index 000000000..5c54b0b48 --- /dev/null +++ b/src/components/Atoms/Label/LabelExample.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import styled from 'styled-components'; +import Label from './Label'; + +const StyledInput = styled.input` + max-width: 300px; + font-size: 1.5rem; + height: 2.5rem; + border-radius: 5px; + border-width: 1px; +`; + +export default function LabelExample() { + return ( + <> + + +
+ + + + ); +} diff --git a/src/components/Atoms/Link/Link.js b/src/components/Atoms/Link/Link.js index 0eaa92a5f..0aafdbb57 100755 --- a/src/components/Atoms/Link/Link.js +++ b/src/components/Atoms/Link/Link.js @@ -57,7 +57,7 @@ const Link = ({ return ( -
- - Link standard - -
-
- } - > - Link standard icon - -
-
- - Link standard white - -
-; -``` - -```js - -import buttonTypes from '../../../theme/crTheme/buttonTypes'; - -
-
- - Link as button - -
-
- - Link as button - -
-
- - Link as button - -
- - -
- - Link as button (secondary) - -
-
- - Link as button (secondary) - -
-
- - Link as button (secondary) - -
- -
- - Link as button (tertiary) - -
-
- - Link as button (tertiary) - -
-
- - Link as button (tertiary) - -
- -
- -
- - Link as full-width red button - -
-
-
-``` - - -## Iconography -```js -import { External, Download, Favourite, Internal, Chevron, Arrow, AtSign } from '../Icons/index'; - -
-
- } - > - Internal link, 'blue' with red icon on tablet and mobile - -
- -
- } - > - External link (black on mobile, blue on desktop) - -
- -
- } - > - Download link (blue mobile-tablet icon, white desktop icon) - -
- -
- } - > - Favourite link (blue mobile-tablet icon, white desktop icon) - -
- -
- } - > - Chevron Up (blue mobile-tablet icon, white desktop icon) - -
- -
- } - > - Chevron Down (blue mobile-tablet icon, white desktop icon) - -
- -
- } - > - Chevron Left (blue mobile-tablet icon, white desktop icon) - -
- -
- } - > - Chevron Right (blue mobile-tablet icon, white desktop icon) - -
- -
- } - > - Arrow Left (blue mobile-tablet icon, white desktop icon) - -
- -
- } - > - At Sign (blue mobile-tablet icon, white desktop icon) - -
-
; -``` diff --git a/src/components/Atoms/Link/Link.style.js b/src/components/Atoms/Link/Link.style.js index 134b1a2e9..763c370bc 100644 --- a/src/components/Atoms/Link/Link.style.js +++ b/src/components/Atoms/Link/Link.style.js @@ -17,7 +17,7 @@ const buttonStyle = () => css` padding: 0.6rem 1rem; border-radius: 0.5rem; - ${({ $color, theme, buttonType }) => (theme.buttonColors($color, buttonType))}; + ${({ color, theme, buttonType }) => (theme.buttonColors(color, buttonType))}; ${({ theme }) => css` ${fontHelper(theme, 'button')}`} @@ -35,9 +35,9 @@ const buttonStyle = () => css` // Reinstate standard colours for desktop where appropriate: ${({ - mobileColour, theme, buttonType, $color + mobileColour, theme, buttonType, color }) => ( - mobileColour && theme.buttonColors($color, buttonType) + mobileColour && theme.buttonColors(color, buttonType) )}; } `; diff --git a/src/components/Atoms/Link/Link.test.js b/src/components/Atoms/Link/Link.test.js index b416e9e90..8fc0115be 100644 --- a/src/components/Atoms/Link/Link.test.js +++ b/src/components/Atoms/Link/Link.test.js @@ -28,6 +28,7 @@ it('renders a standard styled link correctly', () => { { { @@ -169,6 +171,7 @@ it('renders a standard styled link correctly with target blank and assistive tex { +

Standard links

+
+ Link standard +
+
+ }> + Link standard icon + +
+
+ Link standard white +
+ +

Links as buttons

+
+ Link as button +
+
+ Link as button +
+
+ Link as button +
+
+ Link as button (secondary) +
+
+ Link as button (secondary) +
+
+ Link as button (secondary) +
+
+ Link as button (tertiary) +
+
+ Link as button (tertiary) +
+
+ Link as button (tertiary) +
+
+
+ Link as full-width red button +
+
+ +

Iconography

+
+ }> + Internal link, 'blue' with red icon on tablet and mobile + +
+
+ }> + External link (black on mobile, blue on desktop) + +
+
+ }> + Download link (blue mobile-tablet icon, white desktop icon) + +
+
+ }> + Favourite link (blue mobile-tablet icon, white desktop icon) + +
+
+ }> + Chevron Up + +
+
+ }> + Chevron Down + +
+
+ }> + Arrow Left + +
+
+ }> + At Sign + +
+ + ); +} diff --git a/src/components/Atoms/Logo/Logo.md b/src/components/Atoms/Logo/Logo.md deleted file mode 100644 index b155eaa04..000000000 --- a/src/components/Atoms/Logo/Logo.md +++ /dev/null @@ -1,22 +0,0 @@ -# Comic Relief Logo - -```js - -``` - -# Sport Relief Logo - -```js - -``` - -# Sport Relief Game On Logo - -```js - -``` diff --git a/src/components/Atoms/Logo/LogoExample.jsx b/src/components/Atoms/Logo/LogoExample.jsx new file mode 100644 index 000000000..1c821ef42 --- /dev/null +++ b/src/components/Atoms/Logo/LogoExample.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Logo from './Logo'; + +export default function LogoExample() { + return ( + <> +

Comic Relief Logo

+ + +

Sport Relief Logo

+ + +

Sport Relief Game On Logo

+ + + ); +} diff --git a/src/components/Atoms/Pagination/Pagination.md b/src/components/Atoms/Pagination/Pagination.md deleted file mode 100644 index 68d4a067d..000000000 --- a/src/components/Atoms/Pagination/Pagination.md +++ /dev/null @@ -1,159 +0,0 @@ -### Minimalist - -```js - `example.com/page/${value}`} - onSelect={(event, value) => { - event.preventDefault(); - console.log(value); - }} - showFirst={false} - showPrevious={false} - showNext={false} - showLast={false} -/> - - `example.com/page/${value}`} - onSelect={(event, value) => { - event.preventDefault(); - console.log(value); - }} - showFirst={false} - showPrevious={false} - showNext={false} - showLast={false} - selectedBackgroundColor="black" -/> -``` - -### Full size - -```js - `example.com/page/${value}`} - onSelect={(event, value) => { - event.preventDefault(); - console.log(value); - }} - showFirst={true} - showPrevious={true} - showNext={true} - showLast={true} - showMore={true} -/> - - `example.com/page/${value}`} - onSelect={(event, value) => { - event.preventDefault(); - console.log(value); - }} - showFirst={true} - showPrevious={true} - showNext={true} - showLast={true} - showMore={true} - selectedBackgroundColor="purple" -/> - - `example.com/page/${value}`} - onSelect={(event, value) => { - event.preventDefault(); - console.log(value); - }} - showFirst={true} - showPrevious={true} - showNext={true} - showLast={true} - showMore={true} - selectedBackgroundColor="blue" -/> - - `example.com/page/${value}`} - onSelect={(event, value) => { - event.preventDefault(); - console.log(value); - }} - showFirst={true} - showPrevious={true} - showNext={true} - showLast={true} - showMore={true} - selectedBackgroundColor="green" -/> -``` - -### Custom style - -```js - `example.com/page/${value}`} - onSelect={(event, value) => { - event.preventDefault(); - console.log(value); - }} - showFirst={true} - showPrevious={true} - showNext={true} - showLast={true} - showMore={true} - color="red" - backgroundColor="yellow" - selectedColor="yellow" - selectedBackgroundColor="teal" - disabledColor="white" - disabledBackgroundColor="grey_light" - colorOnHover="yellow" - backgroundColorOnHover="teal" -/> -``` - -### Custom labels - -```js - `example.com/page/${value}`} - onSelect={(event, value) => { - event.preventDefault(); - console.log(value); - }} - showFirst={true} - showPrevious={true} - showNext={true} - showLast={true} - showMore={true} - previousLabel="Previous" - nextLabel="Next" - firstLabel="First" - lastLabel="Last" - moreLabel="More" - getPageLabel={value => `Page ${value}`} -/> -``` diff --git a/src/components/Atoms/Pagination/PaginationExample.jsx b/src/components/Atoms/Pagination/PaginationExample.jsx new file mode 100644 index 000000000..3fc983c84 --- /dev/null +++ b/src/components/Atoms/Pagination/PaginationExample.jsx @@ -0,0 +1,128 @@ +import React from 'react'; +import Pagination from './Pagination'; + +export default function PaginationExample() { + return ( + <> +

Minimalist

+ `example.com/page/${value}`} + onSelect={(event, value) => { event.preventDefault(); console.log(value); }} + showFirst={false} + showPrevious={false} + showNext={false} + showLast={false} + /> + `example.com/page/${value}`} + onSelect={(event, value) => { event.preventDefault(); console.log(value); }} + showFirst={false} + showPrevious={false} + showNext={false} + showLast={false} + selectedBackgroundColor="black" + /> + +

Full size

+ `example.com/page/${value}`} + onSelect={(event, value) => { event.preventDefault(); console.log(value); }} + showFirst={true} + showPrevious={true} + showNext={true} + showLast={true} + showMore={true} + /> + `example.com/page/${value}`} + onSelect={(event, value) => { event.preventDefault(); console.log(value); }} + showFirst={true} + showPrevious={true} + showNext={true} + showLast={true} + showMore={true} + selectedBackgroundColor="purple" + /> + `example.com/page/${value}`} + onSelect={(event, value) => { event.preventDefault(); console.log(value); }} + showFirst={true} + showPrevious={true} + showNext={true} + showLast={true} + showMore={true} + selectedBackgroundColor="blue" + /> + `example.com/page/${value}`} + onSelect={(event, value) => { event.preventDefault(); console.log(value); }} + showFirst={true} + showPrevious={true} + showNext={true} + showLast={true} + showMore={true} + selectedBackgroundColor="green" + /> + +

Custom style

+ `example.com/page/${value}`} + onSelect={(event, value) => { event.preventDefault(); console.log(value); }} + showFirst={true} + showPrevious={true} + showNext={true} + showLast={true} + showMore={true} + color="red" + backgroundColor="yellow" + selectedColor="yellow" + selectedBackgroundColor="teal" + disabledColor="white" + disabledBackgroundColor="grey_light" + colorOnHover="yellow" + backgroundColorOnHover="teal" + /> + +

Custom labels

+ `example.com/page/${value}`} + onSelect={(event, value) => { event.preventDefault(); console.log(value); }} + showFirst={true} + showPrevious={true} + showNext={true} + showLast={true} + showMore={true} + previousLabel="Previous" + nextLabel="Next" + firstLabel="First" + lastLabel="Last" + moreLabel="More" + getPageLabel={value => `Page ${value}`} + /> + + ); +} diff --git a/src/components/Atoms/Picture/Picture.md b/src/components/Atoms/Picture/Picture.md deleted file mode 100644 index 6c89d89c7..000000000 --- a/src/components/Atoms/Picture/Picture.md +++ /dev/null @@ -1,28 +0,0 @@ -Picture has depenciy of lazysizes for lazyload and blur-up for image loading state. - -Picture - -```js -const defaultData = require('../../../styleguide/data/data').defaultData; -; -``` - -Custom Size. - -```js -const defaultData = require('../../../styleguide/data/data').defaultData; -; -``` - -Single image - -```js -const defaultData = require('../../../styleguide/data/data').defaultData;; -``` diff --git a/src/components/Atoms/Picture/PictureExample.jsx b/src/components/Atoms/Picture/PictureExample.jsx new file mode 100644 index 000000000..aeeda8bbc --- /dev/null +++ b/src/components/Atoms/Picture/PictureExample.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import Picture from './Picture'; +import { defaultData } from '../../../styleguide/data/data'; + +export default function PictureExample() { + return ( + <> +

Picture

+ + +

Custom Size

+ + +

Single image

+ + + ); +} diff --git a/src/components/Atoms/RadioButton/RadioButton.md b/src/components/Atoms/RadioButton/RadioButton.md deleted file mode 100644 index e51db6529..000000000 --- a/src/components/Atoms/RadioButton/RadioButton.md +++ /dev/null @@ -1,16 +0,0 @@ -# Radio buttons - -```js - - - -``` diff --git a/src/components/Atoms/RadioButton/RadioButtonExample.jsx b/src/components/Atoms/RadioButton/RadioButtonExample.jsx new file mode 100644 index 000000000..f9940a1ff --- /dev/null +++ b/src/components/Atoms/RadioButton/RadioButtonExample.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import RadioButton from './RadioButton'; + +export default function RadioButtonExample() { + return ( + <> + + + + + ); +} diff --git a/src/components/Atoms/RichText/RichText.md b/src/components/Atoms/RichText/RichText.md deleted file mode 100644 index 4443a52c3..000000000 --- a/src/components/Atoms/RichText/RichText.md +++ /dev/null @@ -1,8 +0,0 @@ -# RichText - -```js -Some strong test markup

'} -> -``` diff --git a/src/components/Atoms/RichText/RichTextExample.jsx b/src/components/Atoms/RichText/RichTextExample.jsx new file mode 100644 index 000000000..6334dbe99 --- /dev/null +++ b/src/components/Atoms/RichText/RichTextExample.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import RichText from './RichText'; + +export default function RichTextExample() { + return ( + + ); +} diff --git a/src/components/Atoms/Select/Select.md b/src/components/Atoms/Select/Select.md deleted file mode 100644 index 340b2fb0b..000000000 --- a/src/components/Atoms/Select/Select.md +++ /dev/null @@ -1,47 +0,0 @@ -# Select - -```js -

DROPDOWN MENU

- - -

DROPDOWN MENU - hide arrow / just one option

- + +

DROPDOWN MENU with error

+ + + ); +} diff --git a/src/components/Atoms/SocialIcons/SocialIcons.md b/src/components/Atoms/SocialIcons/SocialIcons.md deleted file mode 100644 index 74c4e9f97..000000000 --- a/src/components/Atoms/SocialIcons/SocialIcons.md +++ /dev/null @@ -1,20 +0,0 @@ -### Comic Relief -```js -
- -
-``` - -### Red Nose Day -```js -
- -
-``` - -### Sport Relief with self target -```js -
- -
-``` diff --git a/src/components/Atoms/SocialIcons/SocialIconsExample.jsx b/src/components/Atoms/SocialIcons/SocialIconsExample.jsx new file mode 100644 index 000000000..13864a2b2 --- /dev/null +++ b/src/components/Atoms/SocialIcons/SocialIconsExample.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import SocialIcons from './SocialIcons'; + +export default function SocialIconsExample() { + return ( + <> +

Comic Relief

+
+ +
+ +

Red Nose Day

+
+ +
+ +

Sport Relief with self target

+
+ +
+ + ); +} diff --git a/src/components/Atoms/Text/Text.md b/src/components/Atoms/Text/Text.md deleted file mode 100644 index 8c8733f73..000000000 --- a/src/components/Atoms/Text/Text.md +++ /dev/null @@ -1,169 +0,0 @@ -```js -import fontConfig from '../../../theme/crTheme/fontConfig'; - -<> -
- - H1 - - - family: {fontConfig['h1'].family} - - mobileColor: blue -
- font size (S / M / L breakpoints): {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight} - - - - H2 - - - family: {fontConfig['h2'].family} - - mobileColor: green -
- font size (S / M / L breakpoints): {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight} - - - - H3 - - - family: {fontConfig['h3'].family} - - mobileColor: red -
- font size (S / M / L breakpoints): {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight} - - - - H4 - - - family: {fontConfig['span'].family} - -
- font size (S / M / L breakpoints): {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight} - - - - P (body) - - - family: {fontConfig['p'].family} - -
- font size (S / M / L breakpoints): {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight} - - - - Tags to be phased out: - - - - H5 - - - family: {fontConfig['h5'].family} - -
- font size (S / M / L breakpoints): {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight} - - - - H6 - - - family: {fontConfig['h6'].family} -
- font size (S / M / L breakpoints): {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize} -
- line height (S / M / L breakpoints): {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight} - -
- -
- - Context styles: - - -
-

First paragraph

-

Second paragraph

-

Third and final paragraph

-
- -
-

Only child P

-
- -
-

Only child H1

-
- -
-

First child H1

-

Second child H1

-
- -
-

h1

-

Paragraph

-

Paragraph

-

Paragraph, last child

-
- -
-

A preceding paragraph

-

A preceding paragraph

-

H1 with an added margin-top as it follows a p tag

-

Proceeding paragraph

-

Paragraph, last child

-
- -
-

A preceding paragraph

-

A preceding paragraph

-

H2 with an added margin-top as it follows a p tag

-

Proceeding paragraph

-

Paragraph, last child

-
- -
- -``` diff --git a/src/components/Atoms/Text/TextExample.jsx b/src/components/Atoms/Text/TextExample.jsx new file mode 100644 index 000000000..9e52e8eda --- /dev/null +++ b/src/components/Atoms/Text/TextExample.jsx @@ -0,0 +1,135 @@ +import React from 'react'; +import Text from './Text'; +import fontConfig from '../../../theme/crTheme/fontConfig'; + +export default function TextExample() { + return ( + <> +
+ + H1 + + + family: {fontConfig['h1'].family} - + mobileColor: blue +
+ font size (S / M / L breakpoints): {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize} +
+ line height (S / M / L breakpoints): {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight} + + + + H2 + + + family: {fontConfig['h2'].family} - + mobileColor: green +
+ font size (S / M / L breakpoints): {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize} +
+ line height (S / M / L breakpoints): {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight} + + + + H3 + + + family: {fontConfig['h3'].family} - + mobileColor: red +
+ font size (S / M / L breakpoints): {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize} +
+ line height (S / M / L breakpoints): {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight} + + + + H4 + + + family: {fontConfig['span'].family} - +
+ font size (S / M / L breakpoints): {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize} +
+ line height (S / M / L breakpoints): {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight} + + + + P (body) + + + family: {fontConfig['p'].family} - +
+ font size (S / M / L breakpoints): {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize} +
+ line height (S / M / L breakpoints): {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight} + + + + Tags to be phased out: + + + + H5 + + + family: {fontConfig['h5'].family} - +
+ font size (S / M / L breakpoints): {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize} +
+ line height (S / M / L breakpoints): {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight} + + + + H6 + + + family: {fontConfig['h6'].family} +
+ font size (S / M / L breakpoints): {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize} +
+ line height (S / M / L breakpoints): {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight} + +
+ +
+ + Context styles: + + +
+

First paragraph

+

Second paragraph

+

Third and final paragraph

+
+ +
+

Only child P

+
+ +
+

Only child H1

+
+ +
+

First child H1

+

Second child H1

+
+ +
+

h1

+

Paragraph

+

Paragraph

+

Paragraph, last child

+
+ +
+

A preceding paragraph

+

A preceding paragraph

+

H1 with an added margin-top as it follows a p tag

+

Proceeding paragraph

+

Paragraph, last child

+
+
+ + ); +} diff --git a/src/components/Atoms/TextArea/TextArea.md b/src/components/Atoms/TextArea/TextArea.md deleted file mode 100644 index c50ed7fa6..000000000 --- a/src/components/Atoms/TextArea/TextArea.md +++ /dev/null @@ -1,21 +0,0 @@ -# TextArea Field - -```js -

Long copy/Message field

-