From b4ae279738dcf6356e2e5bc4f185905375ff292d Mon Sep 17 00:00:00 2001
From: Jon Mulhern <81927768+curlyfriesplease@users.noreply.github.com>
Date: Fri, 24 Apr 2026 14:16:45 +0100
Subject: [PATCH 1/9] Introduce subpath entrypoints for optimized imports
---
README.md | 42 +++++++++++++--
package.json | 30 +++++++++++
src/atoms.js | 23 ++++++++
src/index.js | 99 ++---------------------------------
src/molecules.js | 32 +++++++++++
src/organisms.js | 24 +++++++++
src/theme.js | 10 ++++
tests/hoc/shallowWithTheme.js | 2 +-
8 files changed, 164 insertions(+), 98 deletions(-)
create mode 100644 src/atoms.js
create mode 100644 src/molecules.js
create mode 100644 src/organisms.js
create mode 100644 src/theme.js
diff --git a/README.md b/README.md
index 4767a06ab..0982a521a 100644
--- a/README.md
+++ b/README.md
@@ -15,14 +15,50 @@ CR-CL has a dependency of Styled-components.
$ yarn add @comicrelief/component-library
```
-#### Wrap your app with the ThemeProvider and crTheme
+#### Theming
+
+Wrap your app with `ThemeProvider` and `crTheme`. For the smallest dependency graph, import from the `theme` entry (see [Subpath entrypoints](#subpath-entrypoints) below) instead of the package root.
+
+```
+import { ThemeProvider, crTheme } from '@comicrelief/component-library/theme';
+```
+
+The root import is still valid and exposes the same tokens:
+
```
import { ThemeProvider, crTheme } from '@comicrelief/component-library';
```
-#### Import components
+#### Subpath entrypoints
+
+The package exposes named entrypoints so you can import only the slice you need. Prefer these over the root barrel when you care about bundle size.
+
+- **`@comicrelief/component-library/theme`** — `ThemeProvider`, `crTheme`, and theme tokens (`zIndex`, `allBreakpoints`, `spacing`, `containers`, `hideVisually`, `allowListed`, `animations`, …).
+
+- **`@comicrelief/component-library/atoms`** — `Text`, `Link`, `Button`, `Input`, `Picture`, `Logo`, `Checkbox`, `RadioButton`, and the rest of the design-system atoms (see `src/components/Atoms` in this repo).
+
+- **`@comicrelief/component-library/molecules`** — Molecules such as `Card`, `Box`, `HeroBanner`, `SingleMessage`, `Typeahead`, `InfoBanner`, and similar building blocks (not full site chrome such as the global header).
+
+- **`@comicrelief/component-library/organisms`** — Larger UI: `Header`, `Header2025`, `Footer`, `Donate`, carousels, `MarketingPreferencesDS`, `DynamicGallery`, and other composed features.
+
+Example: atoms + theme in a small app or route:
+
+```
+import { crTheme, ThemeProvider } from '@comicrelief/component-library/theme';
+import { Text, Link, Button } from '@comicrelief/component-library/atoms';
+```
+
+Example: a molecule and an organism in separate features:
+
+```
+import { HeroBanner } from '@comicrelief/component-library/molecules';
+import { WYMDCarousel } from '@comicrelief/component-library/organisms';
+```
+
+The root entry re-exports everything; use it when you want a single import path and are not optimizing for chunk size.
+
```
-import { HeroBanner } from '@comicrelief/component-library';
+import { crTheme, ThemeProvider, Text, DynamicGallery } from '@comicrelief/component-library';
```
### Develop
diff --git a/package.json b/package.json
index 29a983c99..ec7f4bf33 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,36 @@
"author": "Comic Relief Engineering Team",
"version": "0.0.0-see.readme.for.semantic.release.process",
"main": "dist/index.js",
+ "exports": {
+ ".": {
+ "import": "./dist/index.js",
+ "require": "./dist/index.js",
+ "default": "./dist/index.js"
+ },
+ "./theme": {
+ "import": "./dist/theme.js",
+ "require": "./dist/theme.js",
+ "default": "./dist/theme.js"
+ },
+ "./atoms": {
+ "import": "./dist/atoms.js",
+ "require": "./dist/atoms.js",
+ "default": "./dist/atoms.js"
+ },
+ "./molecules": {
+ "import": "./dist/molecules.js",
+ "require": "./dist/molecules.js",
+ "default": "./dist/molecules.js"
+ },
+ "./organisms": {
+ "import": "./dist/organisms.js",
+ "require": "./dist/organisms.js",
+ "default": "./dist/organisms.js"
+ },
+ "./dist/*": "./dist/*",
+ "./src/*": "./src/*",
+ "./package.json": "./package.json"
+ },
"license": "ISC",
"jest": {
"verbose": true,
diff --git a/src/atoms.js b/src/atoms.js
new file mode 100644
index 000000000..dfc396cb8
--- /dev/null
+++ b/src/atoms.js
@@ -0,0 +1,23 @@
+/* Atoms */
+export { default as Text } from './components/Atoms/Text/Text';
+export { default as Logo } from './components/Atoms/Logo/Logo';
+export { default as Picture } from './components/Atoms/Picture/Picture';
+export { default as Link } from './components/Atoms/Link/Link';
+export { default as Button } from './components/Atoms/Button/Button';
+export { default as RadioButton } from './components/Atoms/RadioButton/RadioButton';
+export { default as Checkbox } from './components/Atoms/Checkbox/Checkbox';
+export { default as Input } from './components/Atoms/Input/Input';
+export { default as Select } from './components/Atoms/Select/Select';
+export { default as TextArea } from './components/Atoms/TextArea/TextArea';
+export { default as RichText } from './components/Atoms/RichText/RichText';
+export { default as Pagination } from './components/Atoms/Pagination/Pagination';
+export { default as SocialIcons } from './components/Atoms/SocialIcons/SocialIcons';
+export { default as TextInputWithDropdown } from './components/Atoms/TextInputWithDropdown/TextInputWithDropdown';
+export { default as ErrorText } from './components/Atoms/ErrorText/ErrorText';
+export { default as InfoMessage } from './components/Atoms/InfoMessage/InfoMessage';
+export { default as Label } from './components/Atoms/Label/Label';
+export { default as ButtonWithStates } from './components/Atoms/ButtonWithStates/ButtonWithStates';
+export { default as Confetti } from './components/Atoms/Confetti/Confetti';
+export { default as AmbientVideo } from './components/Atoms/AmbientVideo/AmbientVideo';
+export { default as External } from './components/Atoms/Icons/External';
+export { default as Internal } from './components/Atoms/Icons/Internal';
diff --git a/src/index.js b/src/index.js
index 38411fe2b..e8acd492a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,94 +1,5 @@
-/* Theme */
-export { default as crTheme } from './theme/crTheme/theme';
-export { default as ThemeProvider } from './theme/ThemeProvider';
-
-/* Utils */
-export { default as hideVisually } from './theme/shared/hideVisually';
-export { default as zIndex } from './theme/shared/zIndex';
-export { default as allowListed } from './utils/allowListed';
-export { default as spacing } from './theme/shared/spacing';
-export { default as allBreakpoints } from './theme/shared/allBreakpoints';
-export { default as containers } from './theme/shared/containers';
-export { logoRotateAnimation, springScaleAnimation } from './theme/shared/animations';
-
-/* Atoms */
-export { default as Text } from './components/Atoms/Text/Text';
-export { default as Logo } from './components/Atoms/Logo/Logo';
-export { default as Picture } from './components/Atoms/Picture/Picture';
-export { default as Link } from './components/Atoms/Link/Link';
-export { default as Button } from './components/Atoms/Button/Button';
-export { default as RadioButton } from './components/Atoms/RadioButton/RadioButton';
-export { default as Checkbox } from './components/Atoms/Checkbox/Checkbox';
-export { default as Input } from './components/Atoms/Input/Input';
-export { default as Select } from './components/Atoms/Select/Select';
-export { default as TextArea } from './components/Atoms/TextArea/TextArea';
-export { default as RichText } from './components/Atoms/RichText/RichText';
-export { default as Pagination } from './components/Atoms/Pagination/Pagination';
-export { default as SocialIcons } from './components/Atoms/SocialIcons/SocialIcons';
-export { default as TextInputWithDropdown } from './components/Atoms/TextInputWithDropdown/TextInputWithDropdown';
-export { default as ErrorText } from './components/Atoms/ErrorText/ErrorText';
-export { default as InfoMessage } from './components/Atoms/InfoMessage/InfoMessage';
-export { default as Label } from './components/Atoms/Label/Label';
-export { default as ButtonWithStates } from './components/Atoms/ButtonWithStates/ButtonWithStates';
-export { default as Confetti } from './components/Atoms/Confetti/Confetti';
-export { default as AmbientVideo } from './components/Atoms/AmbientVideo/AmbientVideo';
-export { default as External } from './components/Atoms/Icons/External';
-export { default as Internal } from './components/Atoms/Icons/Internal';
-
-/* Molecules */
-export { default as InfoBanner } from './components/Molecules/InfoBanner/InfoBanner';
-export { default as SingleMessage } from './components/Molecules/SingleMessage/SingleMessage';
-export { default as Card } from './components/Molecules/Card/Card';
-export { default as CardDs } from './components/Molecules/CardDs/CardDs';
-export { default as CTAMultiCard } from './components/Molecules/CTA/CTAMultiCard/CTAMultiCard';
-export { default as CTASingleCard } from './components/Molecules/CTA/CTASingleCard/CTASingleCard';
-export { default as Box } from './components/Molecules/Box/Box';
-export { default as ArticleTeaser } from './components/Molecules/ArticleTeaser/ArticleTeaser';
-export { default as Header } from './components/Organisms/Header/Header';
-export { default as Header2025 } from './components/Organisms/Header2025/Header2025';
-export { default as Donate } from './components/Organisms/Donate/Donate';
-export { default as DonateBanner } from './components/Organisms/DonateBanner/DonateBanner';
-export { default as DoubleCopy } from './components/Molecules/DoubleCopy/DoubleCopy';
-export { default as PartnerLink } from './components/Molecules/PartnerLink/PartnerLink';
-export { default as Footer } from './components/Organisms/Footer/Footer';
-export { default as FooterNew } from './components/Organisms/FooterNew/FooterNew';
-export { default as SearchResult } from './components/Molecules/SearchResult/SearchResult';
-export { default as SearchInput } from './components/Molecules/SearchInput/SearchInput';
-export { default as ShareButton } from './components/Molecules/ShareButton/ShareButton';
-export { default as VideoBanner } from './components/Molecules/VideoBanner/VideoBanner';
-export { default as Icon } from './components/Atoms/SocialIcons/Icon/Icon';
-export { default as Typeahead } from './components/Molecules/Typeahead/Typeahead';
-export { default as SchoolLookup } from './components/Molecules/SchoolLookup/SchoolLookup';
-export { default as SingleMessageDs } from './components/Molecules/SingleMessageDS/SingleMessageDs';
-export { default as Promo } from './components/Molecules/Promo/Promo';
-export { default as Accordion } from './components/Molecules/Accordion/Accordion';
-export { default as Countdown } from './components/Molecules/Countdown/Countdown';
-export { default as Banner } from './components/Molecules/Banner/Banner';
-export { default as Chip } from './components/Molecules/Chip/Chip';
-export { default as Descriptor } from './components/Molecules/Descriptor/Descriptor';
-export { default as Lookup } from './components/Molecules/Lookup/Lookup';
-export { default as SimpleSchoolLookup } from './components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup';
-export { default as LogoLinked } from './components/Molecules/LogoLinked/LogoLinked';
-export { default as HeroBanner } from './components/Molecules/HeroBanner/HeroBanner';
-export { default as PictureOrVideo } from './components/Molecules/PictureOrVideo/PictureOrVideo';
-export { default as QuoteSlice } from './components/Molecules/QuoteSlice/QuoteSlice';
-export { default as StatsSlice } from './components/Molecules/StatsSlice/StatsSlice';
-
-/* Organisms */
-export {
- EmailSignUp,
- buildEsuValidationSchema,
- ESU_FIELDS
-} from './components/Organisms/EmailSignUp/_EmailSignUp';
-export { default as CookieBanner } from './components/Organisms/CookieBanner/CookieBanner';
-export { default as EmailBanner } from './components/Organisms/EmailBanner/EmailBanner';
-export { default as Membership } from './components/Organisms/Membership/Membership';
-export {
- MarketingPreferencesDS,
- setInitialValues,
- buildValidationSchema
-} from './components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS';
-export { default as ImpactSlider } from './components/Organisms/ImpactSlider/ImpactSlider';
-export { default as WYMDCarousel } from './components/Organisms/WYMDCarousel/WYMDCarousel';
-export { default as RichtextCarousel } from './components/Organisms/RichtextCarousel/RichtextCarousel';
-export { default as DynamicGallery } from './components/Organisms/DynamicGallery/DynamicGallery';
+// Re-exports all layers; use /atoms, /theme, /molecules, or /organisms to limit scope.
+export * from './theme';
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';
diff --git a/src/molecules.js b/src/molecules.js
new file mode 100644
index 000000000..af5c41e83
--- /dev/null
+++ b/src/molecules.js
@@ -0,0 +1,32 @@
+/* Molecules (smaller building blocks) */
+export { default as InfoBanner } from './components/Molecules/InfoBanner/InfoBanner';
+export { default as SingleMessage } from './components/Molecules/SingleMessage/SingleMessage';
+export { default as Card } from './components/Molecules/Card/Card';
+export { default as CardDs } from './components/Molecules/CardDs/CardDs';
+export { default as CTAMultiCard } from './components/Molecules/CTA/CTAMultiCard/CTAMultiCard';
+export { default as CTASingleCard } from './components/Molecules/CTA/CTASingleCard/CTASingleCard';
+export { default as Box } from './components/Molecules/Box/Box';
+export { default as ArticleTeaser } from './components/Molecules/ArticleTeaser/ArticleTeaser';
+export { default as DoubleCopy } from './components/Molecules/DoubleCopy/DoubleCopy';
+export { default as PartnerLink } from './components/Molecules/PartnerLink/PartnerLink';
+export { default as SearchResult } from './components/Molecules/SearchResult/SearchResult';
+export { default as SearchInput } from './components/Molecules/SearchInput/SearchInput';
+export { default as ShareButton } from './components/Molecules/ShareButton/ShareButton';
+export { default as VideoBanner } from './components/Molecules/VideoBanner/VideoBanner';
+export { default as Icon } from './components/Atoms/SocialIcons/Icon/Icon';
+export { default as Typeahead } from './components/Molecules/Typeahead/Typeahead';
+export { default as SchoolLookup } from './components/Molecules/SchoolLookup/SchoolLookup';
+export { default as SingleMessageDs } from './components/Molecules/SingleMessageDS/SingleMessageDs';
+export { default as Promo } from './components/Molecules/Promo/Promo';
+export { default as Accordion } from './components/Molecules/Accordion/Accordion';
+export { default as Countdown } from './components/Molecules/Countdown/Countdown';
+export { default as Banner } from './components/Molecules/Banner/Banner';
+export { default as Chip } from './components/Molecules/Chip/Chip';
+export { default as Descriptor } from './components/Molecules/Descriptor/Descriptor';
+export { default as Lookup } from './components/Molecules/Lookup/Lookup';
+export { default as SimpleSchoolLookup } from './components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup';
+export { default as LogoLinked } from './components/Molecules/LogoLinked/LogoLinked';
+export { default as HeroBanner } from './components/Molecules/HeroBanner/HeroBanner';
+export { default as PictureOrVideo } from './components/Molecules/PictureOrVideo/PictureOrVideo';
+export { default as QuoteSlice } from './components/Molecules/QuoteSlice/QuoteSlice';
+export { default as StatsSlice } from './components/Molecules/StatsSlice/StatsSlice';
diff --git a/src/organisms.js b/src/organisms.js
new file mode 100644
index 000000000..053d08d2a
--- /dev/null
+++ b/src/organisms.js
@@ -0,0 +1,24 @@
+/* Organisms (larger composed UI, often heavier dependencies) */
+export { default as Header } from './components/Organisms/Header/Header';
+export { default as Header2025 } from './components/Organisms/Header2025/Header2025';
+export { default as Donate } from './components/Organisms/Donate/Donate';
+export { default as DonateBanner } from './components/Organisms/DonateBanner/DonateBanner';
+export { default as Footer } from './components/Organisms/Footer/Footer';
+export { default as FooterNew } from './components/Organisms/FooterNew/FooterNew';
+export {
+ EmailSignUp,
+ buildEsuValidationSchema,
+ ESU_FIELDS
+} from './components/Organisms/EmailSignUp/_EmailSignUp';
+export { default as CookieBanner } from './components/Organisms/CookieBanner/CookieBanner';
+export { default as EmailBanner } from './components/Organisms/EmailBanner/EmailBanner';
+export { default as Membership } from './components/Organisms/Membership/Membership';
+export {
+ MarketingPreferencesDS,
+ setInitialValues,
+ buildValidationSchema
+} from './components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS';
+export { default as ImpactSlider } from './components/Organisms/ImpactSlider/ImpactSlider';
+export { default as WYMDCarousel } from './components/Organisms/WYMDCarousel/WYMDCarousel';
+export { default as RichtextCarousel } from './components/Organisms/RichtextCarousel/RichtextCarousel';
+export { default as DynamicGallery } from './components/Organisms/DynamicGallery/DynamicGallery';
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 000000000..8dcae9876
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,10 @@
+/* Theme + shared theme utils */
+export { default as crTheme } from './theme/crTheme/theme';
+export { default as ThemeProvider } from './theme/ThemeProvider';
+export { default as hideVisually } from './theme/shared/hideVisually';
+export { default as zIndex } from './theme/shared/zIndex';
+export { default as allowListed } from './utils/allowListed';
+export { default as spacing } from './theme/shared/spacing';
+export { default as allBreakpoints } from './theme/shared/allBreakpoints';
+export { default as containers } from './theme/shared/containers';
+export { logoRotateAnimation, springScaleAnimation } from './theme/shared/animations';
diff --git a/tests/hoc/shallowWithTheme.js b/tests/hoc/shallowWithTheme.js
index 860ca0e74..d8fbc689a 100644
--- a/tests/hoc/shallowWithTheme.js
+++ b/tests/hoc/shallowWithTheme.js
@@ -1,7 +1,7 @@
import React from 'react';
import renderer from 'react-test-renderer';
-import { crTheme } from '../../src/index';
+import { crTheme } from '../../src/theme';
import ThemeProvider from '../../src/theme/ThemeProvider';
export default function renderWithTheme(component) {
From e555c389be2db84df8d3178b36f414fac98c00cd Mon Sep 17 00:00:00 2001
From: Jon Mulhern <81927768+curlyfriesplease@users.noreply.github.com>
Date: Fri, 24 Apr 2026 14:45:06 +0100
Subject: [PATCH 2/9] Revert changeto test import path
---
tests/hoc/shallowWithTheme.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/tests/hoc/shallowWithTheme.js b/tests/hoc/shallowWithTheme.js
index d8fbc689a..860ca0e74 100644
--- a/tests/hoc/shallowWithTheme.js
+++ b/tests/hoc/shallowWithTheme.js
@@ -1,7 +1,7 @@
import React from 'react';
import renderer from 'react-test-renderer';
-import { crTheme } from '../../src/theme';
+import { crTheme } from '../../src/index';
import ThemeProvider from '../../src/theme/ThemeProvider';
export default function renderWithTheme(component) {
From ff39e074e8274b2fa81403effa4587c16e5dc84f Mon Sep 17 00:00:00 2001
From: Jon Mulhern <81927768+curlyfriesplease@users.noreply.github.com>
Date: Fri, 24 Apr 2026 16:42:18 +0100
Subject: [PATCH 3/9] Add sideEffects property to package.json for improved
tree-shaking support
---
README.md | 4 ++++
package.json | 7 +++++++
2 files changed, 11 insertions(+)
diff --git a/README.md b/README.md
index 0982a521a..ca38d7aab 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,10 @@ The root entry re-exports everything; use it when you want a single import path
import { crTheme, ThemeProvider, Text, DynamicGallery } from '@comicrelief/component-library';
```
+#### Tree shaking hint 'sideEffects'
+
+`package.json` sets `sideEffects` so Webpack 4+ and similar tools can treat most of the published JavaScript as free of import time side effects, while still keeping anything that is: all `*.css` files inside this package, and a few modules that pull in CSS files from dependencies (like `lazysizes` on `Picture`, carousel CSS from `pure-react-carousel`, and the range-slider stylesheet from `react-range-slider-input` on the ImpactSlider).
+
### Develop
To install CR-CL locally, run:
diff --git a/package.json b/package.json
index ec7f4bf33..57440b5f5 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,13 @@
"author": "Comic Relief Engineering Team",
"version": "0.0.0-see.readme.for.semantic.release.process",
"main": "dist/index.js",
+ "sideEffects": [
+ "**/*.css",
+ "**/components/Atoms/Picture/Picture.js",
+ "**/components/Organisms/WYMDCarousel/WYMDCarousel.js",
+ "**/components/Organisms/RichtextCarousel/RichtextCarousel.js",
+ "**/components/Organisms/ImpactSlider/_Slider.js"
+ ],
"exports": {
".": {
"import": "./dist/index.js",
From a1068fa9323c517ead205f8554da9a013bf5e47f Mon Sep 17 00:00:00 2001
From: Jon Mulhern <81927768+curlyfriesplease@users.noreply.github.com>
Date: Mon, 27 Apr 2026 11:51:03 +0100
Subject: [PATCH 4/9] Split out all exports into categories and sub-categories,
to benefit bundle size reduction
---
README.md | 8 ++-
package.json | 105 +++++++++++++++++++++++++++++
src/atoms-actions.js | 3 +
src/atoms-brand.js | 2 +
src/atoms-effects.js | 3 +
src/atoms-form.js | 9 +++
src/atoms-icons.js | 1 +
src/atoms-media.js | 2 +
src/atoms-navigation.js | 3 +
src/atoms-text.js | 2 +
src/atoms.js | 31 +++------
src/index.js | 1 -
src/molecules-banners-heroes.js | 8 +++
src/molecules-cards-ctas.js | 9 +++
src/molecules-cards-initiatives.js | 3 +
src/molecules-engagement.js | 6 ++
src/molecules-footer-email.js | 3 +
src/molecules-icons.js | 3 +
src/molecules-search-lookup.js | 6 ++
src/molecules.js | 39 ++---------
src/organisms-compliance.js | 3 +
src/organisms-donation.js | 3 +
src/organisms-email-contact.js | 12 ++++
src/organisms-footers.js | 2 +
src/organisms-headers.js | 2 +
src/organisms-media.js | 3 +
src/organisms.js | 30 ++-------
27 files changed, 219 insertions(+), 83 deletions(-)
create mode 100644 src/atoms-actions.js
create mode 100644 src/atoms-brand.js
create mode 100644 src/atoms-effects.js
create mode 100644 src/atoms-form.js
create mode 100644 src/atoms-icons.js
create mode 100644 src/atoms-media.js
create mode 100644 src/atoms-navigation.js
create mode 100644 src/atoms-text.js
create mode 100644 src/molecules-banners-heroes.js
create mode 100644 src/molecules-cards-ctas.js
create mode 100644 src/molecules-cards-initiatives.js
create mode 100644 src/molecules-engagement.js
create mode 100644 src/molecules-footer-email.js
create mode 100644 src/molecules-icons.js
create mode 100644 src/molecules-search-lookup.js
create mode 100644 src/organisms-compliance.js
create mode 100644 src/organisms-donation.js
create mode 100644 src/organisms-email-contact.js
create mode 100644 src/organisms-footers.js
create mode 100644 src/organisms-headers.js
create mode 100644 src/organisms-media.js
diff --git a/README.md b/README.md
index ca38d7aab..b84d856d1 100644
--- a/README.md
+++ b/README.md
@@ -35,11 +35,13 @@ The package exposes named entrypoints so you can import only the slice you need.
- **`@comicrelief/component-library/theme`** — `ThemeProvider`, `crTheme`, and theme tokens (`zIndex`, `allBreakpoints`, `spacing`, `containers`, `hideVisually`, `allowListed`, `animations`, …).
-- **`@comicrelief/component-library/atoms`** — `Text`, `Link`, `Button`, `Input`, `Picture`, `Logo`, `Checkbox`, `RadioButton`, and the rest of the design-system atoms (see `src/components/Atoms` in this repo).
+- **`@comicrelief/component-library/atoms`** — This is split into these sub-categories: **`atoms/form`**, **`atoms/actions`**, **`atoms/text`**, **`atoms/media`**, **`atoms/brand`**, **`atoms/navigation`**, **`atoms/icons`**, **`atoms/effects`**.
-- **`@comicrelief/component-library/molecules`** — Molecules such as `Card`, `Box`, `HeroBanner`, `SingleMessage`, `Typeahead`, `InfoBanner`, and similar building blocks (not full site chrome such as the global header).
+- **`@comicrelief/component-library/molecules`** — This is split into these sub-categories: **`molecules/search-lookup`**, **`molecules/cards-ctas`**, **`molecules/banners-heroes`**, **`molecules/engagement`**, **`molecules/cards-initiatives`** (Descriptor), **`molecules/footer-email`** (footer/inline `FooterEmailSignUp` — the organism `EmailSignUp` lives under organisms), **`molecules/icons`** (`Icon` re-export, aligned with **`atoms/icons`** for SocialIcons).
-- **`@comicrelief/component-library/organisms`** — Larger UI: `Header`, `Header2025`, `Footer`, `Donate`, carousels, `MarketingPreferencesDS`, `DynamicGallery`, and other composed features.
+- **`@comicrelief/component-library/organisms`** — This is split into these sub-categories: **`organisms/headers`**, **`organisms/footers`**, **`organisms/compliance`**, **`organisms/donation`**, **`organisms/email-contact`**, **`organisms/media`**.
+
+If desired you can import the whole sections (`/atoms`, `/molecules`, `/organisms`) which re-export the same set of names as the subpaths combined.
Example: atoms + theme in a small app or route:
diff --git a/package.json b/package.json
index 57440b5f5..228715d41 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,111 @@
"require": "./dist/organisms.js",
"default": "./dist/organisms.js"
},
+ "./atoms/form": {
+ "import": "./dist/atoms-form.js",
+ "require": "./dist/atoms-form.js",
+ "default": "./dist/atoms-form.js"
+ },
+ "./atoms/actions": {
+ "import": "./dist/atoms-actions.js",
+ "require": "./dist/atoms-actions.js",
+ "default": "./dist/atoms-actions.js"
+ },
+ "./atoms/text": {
+ "import": "./dist/atoms-text.js",
+ "require": "./dist/atoms-text.js",
+ "default": "./dist/atoms-text.js"
+ },
+ "./atoms/media": {
+ "import": "./dist/atoms-media.js",
+ "require": "./dist/atoms-media.js",
+ "default": "./dist/atoms-media.js"
+ },
+ "./atoms/brand": {
+ "import": "./dist/atoms-brand.js",
+ "require": "./dist/atoms-brand.js",
+ "default": "./dist/atoms-brand.js"
+ },
+ "./atoms/navigation": {
+ "import": "./dist/atoms-navigation.js",
+ "require": "./dist/atoms-navigation.js",
+ "default": "./dist/atoms-navigation.js"
+ },
+ "./atoms/icons": {
+ "import": "./dist/atoms-icons.js",
+ "require": "./dist/atoms-icons.js",
+ "default": "./dist/atoms-icons.js"
+ },
+ "./atoms/effects": {
+ "import": "./dist/atoms-effects.js",
+ "require": "./dist/atoms-effects.js",
+ "default": "./dist/atoms-effects.js"
+ },
+ "./molecules/search-lookup": {
+ "import": "./dist/molecules-search-lookup.js",
+ "require": "./dist/molecules-search-lookup.js",
+ "default": "./dist/molecules-search-lookup.js"
+ },
+ "./molecules/cards-ctas": {
+ "import": "./dist/molecules-cards-ctas.js",
+ "require": "./dist/molecules-cards-ctas.js",
+ "default": "./dist/molecules-cards-ctas.js"
+ },
+ "./molecules/banners-heroes": {
+ "import": "./dist/molecules-banners-heroes.js",
+ "require": "./dist/molecules-banners-heroes.js",
+ "default": "./dist/molecules-banners-heroes.js"
+ },
+ "./molecules/engagement": {
+ "import": "./dist/molecules-engagement.js",
+ "require": "./dist/molecules-engagement.js",
+ "default": "./dist/molecules-engagement.js"
+ },
+ "./molecules/cards-initiatives": {
+ "import": "./dist/molecules-cards-initiatives.js",
+ "require": "./dist/molecules-cards-initiatives.js",
+ "default": "./dist/molecules-cards-initiatives.js"
+ },
+ "./molecules/footer-email": {
+ "import": "./dist/molecules-footer-email.js",
+ "require": "./dist/molecules-footer-email.js",
+ "default": "./dist/molecules-footer-email.js"
+ },
+ "./molecules/icons": {
+ "import": "./dist/molecules-icons.js",
+ "require": "./dist/molecules-icons.js",
+ "default": "./dist/molecules-icons.js"
+ },
+ "./organisms/headers": {
+ "import": "./dist/organisms-headers.js",
+ "require": "./dist/organisms-headers.js",
+ "default": "./dist/organisms-headers.js"
+ },
+ "./organisms/footers": {
+ "import": "./dist/organisms-footers.js",
+ "require": "./dist/organisms-footers.js",
+ "default": "./dist/organisms-footers.js"
+ },
+ "./organisms/compliance": {
+ "import": "./dist/organisms-compliance.js",
+ "require": "./dist/organisms-compliance.js",
+ "default": "./dist/organisms-compliance.js"
+ },
+ "./organisms/donation": {
+ "import": "./dist/organisms-donation.js",
+ "require": "./dist/organisms-donation.js",
+ "default": "./dist/organisms-donation.js"
+ },
+ "./organisms/email-contact": {
+ "import": "./dist/organisms-email-contact.js",
+ "require": "./dist/organisms-email-contact.js",
+ "default": "./dist/organisms-email-contact.js"
+ },
+ "./organisms/media": {
+ "import": "./dist/organisms-media.js",
+ "require": "./dist/organisms-media.js",
+ "default": "./dist/organisms-media.js"
+ },
"./dist/*": "./dist/*",
"./src/*": "./src/*",
"./package.json": "./package.json"
diff --git a/src/atoms-actions.js b/src/atoms-actions.js
new file mode 100644
index 000000000..7db68a8bd
--- /dev/null
+++ b/src/atoms-actions.js
@@ -0,0 +1,3 @@
+export { default as Button } from './components/Atoms/Button/Button';
+export { default as ButtonWithStates } from './components/Atoms/ButtonWithStates/ButtonWithStates';
+export { default as Link } from './components/Atoms/Link/Link';
diff --git a/src/atoms-brand.js b/src/atoms-brand.js
new file mode 100644
index 000000000..259d77099
--- /dev/null
+++ b/src/atoms-brand.js
@@ -0,0 +1,2 @@
+export { default as Logo } from './components/Atoms/Logo/Logo';
+export { default as SocialIcons } from './components/Atoms/SocialIcons/SocialIcons';
diff --git a/src/atoms-effects.js b/src/atoms-effects.js
new file mode 100644
index 000000000..ac0d03205
--- /dev/null
+++ b/src/atoms-effects.js
@@ -0,0 +1,3 @@
+// this exception can be removed when we have more exports in this category
+/* eslint-disable import/prefer-default-export */
+export { default as Confetti } from './components/Atoms/Confetti/Confetti';
diff --git a/src/atoms-form.js b/src/atoms-form.js
new file mode 100644
index 000000000..fdabd004d
--- /dev/null
+++ b/src/atoms-form.js
@@ -0,0 +1,9 @@
+export { default as Input } from './components/Atoms/Input/Input';
+export { default as Select } from './components/Atoms/Select/Select';
+export { default as TextArea } from './components/Atoms/TextArea/TextArea';
+export { default as Checkbox } from './components/Atoms/Checkbox/Checkbox';
+export { default as RadioButton } from './components/Atoms/RadioButton/RadioButton';
+export { default as TextInputWithDropdown } from './components/Atoms/TextInputWithDropdown/TextInputWithDropdown';
+export { default as Label } from './components/Atoms/Label/Label';
+export { default as ErrorText } from './components/Atoms/ErrorText/ErrorText';
+export { default as InfoMessage } from './components/Atoms/InfoMessage/InfoMessage';
diff --git a/src/atoms-icons.js b/src/atoms-icons.js
new file mode 100644
index 000000000..0a0386757
--- /dev/null
+++ b/src/atoms-icons.js
@@ -0,0 +1 @@
+export * from './components/Atoms/Icons';
diff --git a/src/atoms-media.js b/src/atoms-media.js
new file mode 100644
index 000000000..fd1c70563
--- /dev/null
+++ b/src/atoms-media.js
@@ -0,0 +1,2 @@
+export { default as Picture } from './components/Atoms/Picture/Picture';
+export { default as AmbientVideo } from './components/Atoms/AmbientVideo/AmbientVideo';
diff --git a/src/atoms-navigation.js b/src/atoms-navigation.js
new file mode 100644
index 000000000..f3c1e5c72
--- /dev/null
+++ b/src/atoms-navigation.js
@@ -0,0 +1,3 @@
+// this exception can be removed when we have more exports in this category
+/* eslint-disable import/prefer-default-export */
+export { default as Pagination } from './components/Atoms/Pagination/Pagination';
diff --git a/src/atoms-text.js b/src/atoms-text.js
new file mode 100644
index 000000000..694ab88ac
--- /dev/null
+++ b/src/atoms-text.js
@@ -0,0 +1,2 @@
+export { default as Text } from './components/Atoms/Text/Text';
+export { default as RichText } from './components/Atoms/RichText/RichText';
diff --git a/src/atoms.js b/src/atoms.js
index dfc396cb8..d47c9888f 100644
--- a/src/atoms.js
+++ b/src/atoms.js
@@ -1,23 +1,8 @@
-/* Atoms */
-export { default as Text } from './components/Atoms/Text/Text';
-export { default as Logo } from './components/Atoms/Logo/Logo';
-export { default as Picture } from './components/Atoms/Picture/Picture';
-export { default as Link } from './components/Atoms/Link/Link';
-export { default as Button } from './components/Atoms/Button/Button';
-export { default as RadioButton } from './components/Atoms/RadioButton/RadioButton';
-export { default as Checkbox } from './components/Atoms/Checkbox/Checkbox';
-export { default as Input } from './components/Atoms/Input/Input';
-export { default as Select } from './components/Atoms/Select/Select';
-export { default as TextArea } from './components/Atoms/TextArea/TextArea';
-export { default as RichText } from './components/Atoms/RichText/RichText';
-export { default as Pagination } from './components/Atoms/Pagination/Pagination';
-export { default as SocialIcons } from './components/Atoms/SocialIcons/SocialIcons';
-export { default as TextInputWithDropdown } from './components/Atoms/TextInputWithDropdown/TextInputWithDropdown';
-export { default as ErrorText } from './components/Atoms/ErrorText/ErrorText';
-export { default as InfoMessage } from './components/Atoms/InfoMessage/InfoMessage';
-export { default as Label } from './components/Atoms/Label/Label';
-export { default as ButtonWithStates } from './components/Atoms/ButtonWithStates/ButtonWithStates';
-export { default as Confetti } from './components/Atoms/Confetti/Confetti';
-export { default as AmbientVideo } from './components/Atoms/AmbientVideo/AmbientVideo';
-export { default as External } from './components/Atoms/Icons/External';
-export { default as Internal } from './components/Atoms/Icons/Internal';
+export * from './atoms-form';
+export * from './atoms-actions';
+export * from './atoms-text';
+export * from './atoms-media';
+export * from './atoms-brand';
+export * from './atoms-navigation';
+export * from './atoms-icons';
+export * from './atoms-effects';
diff --git a/src/index.js b/src/index.js
index e8acd492a..1716aece6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-// Re-exports all layers; use /atoms, /theme, /molecules, or /organisms to limit scope.
export * from './theme';
export * from './atoms';
export * from './molecules';
diff --git a/src/molecules-banners-heroes.js b/src/molecules-banners-heroes.js
new file mode 100644
index 000000000..27a11302d
--- /dev/null
+++ b/src/molecules-banners-heroes.js
@@ -0,0 +1,8 @@
+export { default as InfoBanner } from './components/Molecules/InfoBanner/InfoBanner';
+export { default as SingleMessage } from './components/Molecules/SingleMessage/SingleMessage';
+export { default as SingleMessageDs } from './components/Molecules/SingleMessageDS/SingleMessageDs';
+export { default as VideoBanner } from './components/Molecules/VideoBanner/VideoBanner';
+export { default as HeroBanner } from './components/Molecules/HeroBanner/HeroBanner';
+export { default as PictureOrVideo } from './components/Molecules/PictureOrVideo/PictureOrVideo';
+export { default as Promo } from './components/Molecules/Promo/Promo';
+export { default as Banner } from './components/Molecules/Banner/Banner';
diff --git a/src/molecules-cards-ctas.js b/src/molecules-cards-ctas.js
new file mode 100644
index 000000000..e91dec41e
--- /dev/null
+++ b/src/molecules-cards-ctas.js
@@ -0,0 +1,9 @@
+export { default as Card } from './components/Molecules/Card/Card';
+export { default as CardDs } from './components/Molecules/CardDs/CardDs';
+export { default as CTAMultiCard } from './components/Molecules/CTA/CTAMultiCard/CTAMultiCard';
+export { default as CTASingleCard } from './components/Molecules/CTA/CTASingleCard/CTASingleCard';
+export { default as Box } from './components/Molecules/Box/Box';
+export { default as ArticleTeaser } from './components/Molecules/ArticleTeaser/ArticleTeaser';
+export { default as PartnerLink } from './components/Molecules/PartnerLink/PartnerLink';
+export { default as Chip } from './components/Molecules/Chip/Chip';
+export { default as LogoLinked } from './components/Molecules/LogoLinked/LogoLinked';
diff --git a/src/molecules-cards-initiatives.js b/src/molecules-cards-initiatives.js
new file mode 100644
index 000000000..19450e715
--- /dev/null
+++ b/src/molecules-cards-initiatives.js
@@ -0,0 +1,3 @@
+// this exception can be removed when we have more exports in this category
+/* eslint-disable import/prefer-default-export */
+export { default as Descriptor } from './components/Molecules/Descriptor/Descriptor';
diff --git a/src/molecules-engagement.js b/src/molecules-engagement.js
new file mode 100644
index 000000000..f30b697ec
--- /dev/null
+++ b/src/molecules-engagement.js
@@ -0,0 +1,6 @@
+export { default as Accordion } from './components/Molecules/Accordion/Accordion';
+export { default as DoubleCopy } from './components/Molecules/DoubleCopy/DoubleCopy';
+export { default as Countdown } from './components/Molecules/Countdown/Countdown';
+export { default as StatsSlice } from './components/Molecules/StatsSlice/StatsSlice';
+export { default as QuoteSlice } from './components/Molecules/QuoteSlice/QuoteSlice';
+export { default as ShareButton } from './components/Molecules/ShareButton/ShareButton';
diff --git a/src/molecules-footer-email.js b/src/molecules-footer-email.js
new file mode 100644
index 000000000..b45211d4a
--- /dev/null
+++ b/src/molecules-footer-email.js
@@ -0,0 +1,3 @@
+// this exception can be removed when we have more exports in this category
+/* eslint-disable import/prefer-default-export */
+export { default as FooterEmailSignUp } from './components/Molecules/EmailSignUp/EmailSignUp';
diff --git a/src/molecules-icons.js b/src/molecules-icons.js
new file mode 100644
index 000000000..2fd3e67a4
--- /dev/null
+++ b/src/molecules-icons.js
@@ -0,0 +1,3 @@
+// this exception can be removed when we have more exports in this category
+/* eslint-disable import/prefer-default-export */
+export { default as Icon } from './components/Atoms/SocialIcons/Icon/Icon';
diff --git a/src/molecules-search-lookup.js b/src/molecules-search-lookup.js
new file mode 100644
index 000000000..820fbf1e2
--- /dev/null
+++ b/src/molecules-search-lookup.js
@@ -0,0 +1,6 @@
+export { default as Typeahead } from './components/Molecules/Typeahead/Typeahead';
+export { default as SearchInput } from './components/Molecules/SearchInput/SearchInput';
+export { default as SearchResult } from './components/Molecules/SearchResult/SearchResult';
+export { default as SchoolLookup } from './components/Molecules/SchoolLookup/SchoolLookup';
+export { default as SimpleSchoolLookup } from './components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup';
+export { default as Lookup } from './components/Molecules/Lookup/Lookup';
diff --git a/src/molecules.js b/src/molecules.js
index af5c41e83..3640b45cc 100644
--- a/src/molecules.js
+++ b/src/molecules.js
@@ -1,32 +1,7 @@
-/* Molecules (smaller building blocks) */
-export { default as InfoBanner } from './components/Molecules/InfoBanner/InfoBanner';
-export { default as SingleMessage } from './components/Molecules/SingleMessage/SingleMessage';
-export { default as Card } from './components/Molecules/Card/Card';
-export { default as CardDs } from './components/Molecules/CardDs/CardDs';
-export { default as CTAMultiCard } from './components/Molecules/CTA/CTAMultiCard/CTAMultiCard';
-export { default as CTASingleCard } from './components/Molecules/CTA/CTASingleCard/CTASingleCard';
-export { default as Box } from './components/Molecules/Box/Box';
-export { default as ArticleTeaser } from './components/Molecules/ArticleTeaser/ArticleTeaser';
-export { default as DoubleCopy } from './components/Molecules/DoubleCopy/DoubleCopy';
-export { default as PartnerLink } from './components/Molecules/PartnerLink/PartnerLink';
-export { default as SearchResult } from './components/Molecules/SearchResult/SearchResult';
-export { default as SearchInput } from './components/Molecules/SearchInput/SearchInput';
-export { default as ShareButton } from './components/Molecules/ShareButton/ShareButton';
-export { default as VideoBanner } from './components/Molecules/VideoBanner/VideoBanner';
-export { default as Icon } from './components/Atoms/SocialIcons/Icon/Icon';
-export { default as Typeahead } from './components/Molecules/Typeahead/Typeahead';
-export { default as SchoolLookup } from './components/Molecules/SchoolLookup/SchoolLookup';
-export { default as SingleMessageDs } from './components/Molecules/SingleMessageDS/SingleMessageDs';
-export { default as Promo } from './components/Molecules/Promo/Promo';
-export { default as Accordion } from './components/Molecules/Accordion/Accordion';
-export { default as Countdown } from './components/Molecules/Countdown/Countdown';
-export { default as Banner } from './components/Molecules/Banner/Banner';
-export { default as Chip } from './components/Molecules/Chip/Chip';
-export { default as Descriptor } from './components/Molecules/Descriptor/Descriptor';
-export { default as Lookup } from './components/Molecules/Lookup/Lookup';
-export { default as SimpleSchoolLookup } from './components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup';
-export { default as LogoLinked } from './components/Molecules/LogoLinked/LogoLinked';
-export { default as HeroBanner } from './components/Molecules/HeroBanner/HeroBanner';
-export { default as PictureOrVideo } from './components/Molecules/PictureOrVideo/PictureOrVideo';
-export { default as QuoteSlice } from './components/Molecules/QuoteSlice/QuoteSlice';
-export { default as StatsSlice } from './components/Molecules/StatsSlice/StatsSlice';
+export * from './molecules-search-lookup';
+export * from './molecules-cards-ctas';
+export * from './molecules-banners-heroes';
+export * from './molecules-engagement';
+export * from './molecules-cards-initiatives';
+export * from './molecules-footer-email';
+export * from './molecules-icons';
diff --git a/src/organisms-compliance.js b/src/organisms-compliance.js
new file mode 100644
index 000000000..667c1397f
--- /dev/null
+++ b/src/organisms-compliance.js
@@ -0,0 +1,3 @@
+// this exception can be removed when we have more exports in this category
+/* eslint-disable import/prefer-default-export */
+export { default as CookieBanner } from './components/Organisms/CookieBanner/CookieBanner';
diff --git a/src/organisms-donation.js b/src/organisms-donation.js
new file mode 100644
index 000000000..e08226ec7
--- /dev/null
+++ b/src/organisms-donation.js
@@ -0,0 +1,3 @@
+export { default as Donate } from './components/Organisms/Donate/Donate';
+export { default as DonateBanner } from './components/Organisms/DonateBanner/DonateBanner';
+export { default as ImpactSlider } from './components/Organisms/ImpactSlider/ImpactSlider';
diff --git a/src/organisms-email-contact.js b/src/organisms-email-contact.js
new file mode 100644
index 000000000..af4a93e3a
--- /dev/null
+++ b/src/organisms-email-contact.js
@@ -0,0 +1,12 @@
+export {
+ EmailSignUp,
+ buildEsuValidationSchema,
+ ESU_FIELDS
+} from './components/Organisms/EmailSignUp/_EmailSignUp';
+export { default as EmailBanner } from './components/Organisms/EmailBanner/EmailBanner';
+export { default as Membership } from './components/Organisms/Membership/Membership';
+export {
+ MarketingPreferencesDS,
+ setInitialValues,
+ buildValidationSchema
+} from './components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS';
diff --git a/src/organisms-footers.js b/src/organisms-footers.js
new file mode 100644
index 000000000..0afa12973
--- /dev/null
+++ b/src/organisms-footers.js
@@ -0,0 +1,2 @@
+export { default as Footer } from './components/Organisms/Footer/Footer';
+export { default as FooterNew } from './components/Organisms/FooterNew/FooterNew';
diff --git a/src/organisms-headers.js b/src/organisms-headers.js
new file mode 100644
index 000000000..ed46b3d29
--- /dev/null
+++ b/src/organisms-headers.js
@@ -0,0 +1,2 @@
+export { default as Header } from './components/Organisms/Header/Header';
+export { default as Header2025 } from './components/Organisms/Header2025/Header2025';
diff --git a/src/organisms-media.js b/src/organisms-media.js
new file mode 100644
index 000000000..81d4ae7fc
--- /dev/null
+++ b/src/organisms-media.js
@@ -0,0 +1,3 @@
+export { default as WYMDCarousel } from './components/Organisms/WYMDCarousel/WYMDCarousel';
+export { default as RichtextCarousel } from './components/Organisms/RichtextCarousel/RichtextCarousel';
+export { default as DynamicGallery } from './components/Organisms/DynamicGallery/DynamicGallery';
diff --git a/src/organisms.js b/src/organisms.js
index 053d08d2a..3852d8d23 100644
--- a/src/organisms.js
+++ b/src/organisms.js
@@ -1,24 +1,6 @@
-/* Organisms (larger composed UI, often heavier dependencies) */
-export { default as Header } from './components/Organisms/Header/Header';
-export { default as Header2025 } from './components/Organisms/Header2025/Header2025';
-export { default as Donate } from './components/Organisms/Donate/Donate';
-export { default as DonateBanner } from './components/Organisms/DonateBanner/DonateBanner';
-export { default as Footer } from './components/Organisms/Footer/Footer';
-export { default as FooterNew } from './components/Organisms/FooterNew/FooterNew';
-export {
- EmailSignUp,
- buildEsuValidationSchema,
- ESU_FIELDS
-} from './components/Organisms/EmailSignUp/_EmailSignUp';
-export { default as CookieBanner } from './components/Organisms/CookieBanner/CookieBanner';
-export { default as EmailBanner } from './components/Organisms/EmailBanner/EmailBanner';
-export { default as Membership } from './components/Organisms/Membership/Membership';
-export {
- MarketingPreferencesDS,
- setInitialValues,
- buildValidationSchema
-} from './components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS';
-export { default as ImpactSlider } from './components/Organisms/ImpactSlider/ImpactSlider';
-export { default as WYMDCarousel } from './components/Organisms/WYMDCarousel/WYMDCarousel';
-export { default as RichtextCarousel } from './components/Organisms/RichtextCarousel/RichtextCarousel';
-export { default as DynamicGallery } from './components/Organisms/DynamicGallery/DynamicGallery';
+export * from './organisms-headers';
+export * from './organisms-footers';
+export * from './organisms-compliance';
+export * from './organisms-donation';
+export * from './organisms-email-contact';
+export * from './organisms-media';
From d33dee4f64a2b62047f9466878a18a3e90fdfd0e Mon Sep 17 00:00:00 2001
From: Jon Mulhern <81927768+curlyfriesplease@users.noreply.github.com>
Date: Mon, 27 Apr 2026 15:26:02 +0100
Subject: [PATCH 5/9] Filename changes
---
README.md | 2 +-
package.json | 17 +++++++++++------
src/molecules-cards-ctas.js | 1 +
src/molecules-cards-initiatives.js | 3 ---
...ules-footer-email.js => molecules-footer.js} | 0
src/molecules.js | 3 +--
6 files changed, 14 insertions(+), 12 deletions(-)
delete mode 100644 src/molecules-cards-initiatives.js
rename src/{molecules-footer-email.js => molecules-footer.js} (100%)
diff --git a/README.md b/README.md
index b84d856d1..23ff0be27 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ The package exposes named entrypoints so you can import only the slice you need.
- **`@comicrelief/component-library/atoms`** — This is split into these sub-categories: **`atoms/form`**, **`atoms/actions`**, **`atoms/text`**, **`atoms/media`**, **`atoms/brand`**, **`atoms/navigation`**, **`atoms/icons`**, **`atoms/effects`**.
-- **`@comicrelief/component-library/molecules`** — This is split into these sub-categories: **`molecules/search-lookup`**, **`molecules/cards-ctas`**, **`molecules/banners-heroes`**, **`molecules/engagement`**, **`molecules/cards-initiatives`** (Descriptor), **`molecules/footer-email`** (footer/inline `FooterEmailSignUp` — the organism `EmailSignUp` lives under organisms), **`molecules/icons`** (`Icon` re-export, aligned with **`atoms/icons`** for SocialIcons).
+- **`@comicrelief/component-library/molecules`** — This is split into these sub-categories: **`molecules/search-lookup`**, **`molecules/cards-ctas`**, **`molecules/banners-heroes`**, **`molecules/engagement`**, **`molecules/footer`** , **`molecules/icons`**
- **`@comicrelief/component-library/organisms`** — This is split into these sub-categories: **`organisms/headers`**, **`organisms/footers`**, **`organisms/compliance`**, **`organisms/donation`**, **`organisms/email-contact`**, **`organisms/media`**.
diff --git a/package.json b/package.json
index 228715d41..8ec63774d 100644
--- a/package.json
+++ b/package.json
@@ -97,14 +97,19 @@
"default": "./dist/molecules-engagement.js"
},
"./molecules/cards-initiatives": {
- "import": "./dist/molecules-cards-initiatives.js",
- "require": "./dist/molecules-cards-initiatives.js",
- "default": "./dist/molecules-cards-initiatives.js"
+ "import": "./dist/molecules-cards-ctas.js",
+ "require": "./dist/molecules-cards-ctas.js",
+ "default": "./dist/molecules-cards-ctas.js"
+ },
+ "./molecules/footer": {
+ "import": "./dist/molecules-footer.js",
+ "require": "./dist/molecules-footer.js",
+ "default": "./dist/molecules-footer.js"
},
"./molecules/footer-email": {
- "import": "./dist/molecules-footer-email.js",
- "require": "./dist/molecules-footer-email.js",
- "default": "./dist/molecules-footer-email.js"
+ "import": "./dist/molecules-footer.js",
+ "require": "./dist/molecules-footer.js",
+ "default": "./dist/molecules-footer.js"
},
"./molecules/icons": {
"import": "./dist/molecules-icons.js",
diff --git a/src/molecules-cards-ctas.js b/src/molecules-cards-ctas.js
index e91dec41e..4b0923887 100644
--- a/src/molecules-cards-ctas.js
+++ b/src/molecules-cards-ctas.js
@@ -2,6 +2,7 @@ export { default as Card } from './components/Molecules/Card/Card';
export { default as CardDs } from './components/Molecules/CardDs/CardDs';
export { default as CTAMultiCard } from './components/Molecules/CTA/CTAMultiCard/CTAMultiCard';
export { default as CTASingleCard } from './components/Molecules/CTA/CTASingleCard/CTASingleCard';
+export { default as Descriptor } from './components/Molecules/Descriptor/Descriptor';
export { default as Box } from './components/Molecules/Box/Box';
export { default as ArticleTeaser } from './components/Molecules/ArticleTeaser/ArticleTeaser';
export { default as PartnerLink } from './components/Molecules/PartnerLink/PartnerLink';
diff --git a/src/molecules-cards-initiatives.js b/src/molecules-cards-initiatives.js
deleted file mode 100644
index 19450e715..000000000
--- a/src/molecules-cards-initiatives.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// this exception can be removed when we have more exports in this category
-/* eslint-disable import/prefer-default-export */
-export { default as Descriptor } from './components/Molecules/Descriptor/Descriptor';
diff --git a/src/molecules-footer-email.js b/src/molecules-footer.js
similarity index 100%
rename from src/molecules-footer-email.js
rename to src/molecules-footer.js
diff --git a/src/molecules.js b/src/molecules.js
index 3640b45cc..2d81f47bd 100644
--- a/src/molecules.js
+++ b/src/molecules.js
@@ -2,6 +2,5 @@ export * from './molecules-search-lookup';
export * from './molecules-cards-ctas';
export * from './molecules-banners-heroes';
export * from './molecules-engagement';
-export * from './molecules-cards-initiatives';
-export * from './molecules-footer-email';
+export * from './molecules-footer';
export * from './molecules-icons';
From 88ef4253c50a4adaff307d13f1091096792f2e23 Mon Sep 17 00:00:00 2001
From: Jon Mulhern <81927768+curlyfriesplease@users.noreply.github.com>
Date: Mon, 27 Apr 2026 15:45:09 +0100
Subject: [PATCH 6/9] Import path update for theme
---
tests/hoc/shallowWithTheme.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/tests/hoc/shallowWithTheme.js b/tests/hoc/shallowWithTheme.js
index 860ca0e74..d8fbc689a 100644
--- a/tests/hoc/shallowWithTheme.js
+++ b/tests/hoc/shallowWithTheme.js
@@ -1,7 +1,7 @@
import React from 'react';
import renderer from 'react-test-renderer';
-import { crTheme } from '../../src/index';
+import { crTheme } from '../../src/theme';
import ThemeProvider from '../../src/theme/ThemeProvider';
export default function renderWithTheme(component) {
From caf388c6afef46797e223ec5a42cc6138b04a50c Mon Sep 17 00:00:00 2001
From: Jon Mulhern <81927768+curlyfriesplease@users.noreply.github.com>
Date: Mon, 27 Apr 2026 15:45:35 +0100
Subject: [PATCH 7/9] Snapshot updates as class names have changed now that the
imports are different
---
.../__snapshots__/InfoMessage.test.js.snap | 28 +-
.../Banner/__snapshots__/Banner.test.js.snap | 38 +-
.../__snapshots__/CTASingleCard.test.js.snap | 108 +-
.../CardDs/__snapshots__/CardDs.test.js.snap | 40 +-
.../Molecules/DoubleCopy/DoubleCopy.test.js | 8 +-
.../__snapshots__/HeroBanner.test.js.snap | 112 +-
.../Molecules/PartnerLink/PartnerLink.test.js | 56 +-
.../Promo/__snapshots__/Promo.test.js.snap | 446 ++---
.../__snapshots__/QuoteSlice.test.js.snap | 120 +-
.../__snapshots__/SingleMessage.test.js.snap | 722 ++++----
.../SingleMessageDs.test.js.snap | 144 +-
.../__snapshots__/DynamicGallery.test.js.snap | 28 +-
.../__snapshots__/EmailBanner.test.js.snap | 1628 ++++++++---------
.../__snapshots__/EmailSignUp.test.js.snap | 180 +-
.../Footer/__snapshots__/Footer.test.js.snap | 140 +-
.../__snapshots__/FooterNew.test.js.snap | 704 +++----
.../Organisms/Membership/Membership.test.js | 28 +-
17 files changed, 2265 insertions(+), 2265 deletions(-)
diff --git a/src/components/Atoms/InfoMessage/__snapshots__/InfoMessage.test.js.snap b/src/components/Atoms/InfoMessage/__snapshots__/InfoMessage.test.js.snap
index 724b9201a..69e3c5cf8 100644
--- a/src/components/Atoms/InfoMessage/__snapshots__/InfoMessage.test.js.snap
+++ b/src/components/Atoms/InfoMessage/__snapshots__/InfoMessage.test.js.snap
@@ -18,20 +18,6 @@ exports[`renders coral_light variant with message containing a link 1`] = `
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;
@@ -85,6 +71,20 @@ exports[`renders coral_light variant with message containing a link 1`] = `
text-decoration: underline;
}
+.c4 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+}
+
+.c4:hover,
+.c4:focus {
+ color: #000000;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
@media (min-width:740px) {
.c1 {
font-size: 1rem;
diff --git a/src/components/Molecules/Banner/__snapshots__/Banner.test.js.snap b/src/components/Molecules/Banner/__snapshots__/Banner.test.js.snap
index 7d94bc9fb..b0e60f695 100644
--- a/src/components/Molecules/Banner/__snapshots__/Banner.test.js.snap
+++ b/src/components/Molecules/Banner/__snapshots__/Banner.test.js.snap
@@ -1,6 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
+.c0 {
+ background: #48276E;
+}
+
+.c1 {
+ text-align: center;
+ padding: calc(1.5rem * 2) 1.5rem;
+ margin: 0 auto;
+ max-width: 1440px;
+}
+
.c2 {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
@@ -24,15 +35,16 @@ exports[`renders correctly 1`] = `
line-height: inherit;
}
-.c0 {
- background: #48276E;
+@media (min-width:740px) {
+ .c1 {
+ padding: 4rem 2rem;
+ }
}
-.c1 {
- text-align: center;
- padding: calc(1.5rem * 2) 1.5rem;
- margin: 0 auto;
- max-width: 1440px;
+@media (min-width:1440px) {
+ .c1 {
+ padding: 4rem 4rem;
+ }
}
@media (min-width:740px) {
@@ -49,18 +61,6 @@ exports[`renders correctly 1`] = `
}
}
-@media (min-width:740px) {
- .c1 {
- padding: 4rem 2rem;
- }
-}
-
-@media (min-width:1440px) {
- .c1 {
- padding: 4rem 4rem;
- }
-}
-
diff --git a/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap b/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap
index 3893c4836..8bf20229f 100644
--- a/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap
+++ b/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap
@@ -1,23 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly with data prop 1`] = `
-.c12 {
- 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;
-}
-
-.c12 span {
- font-size: inherit;
- line-height: inherit;
-}
-
.c7 {
display: block;
width: 100%;
@@ -288,18 +271,21 @@ exports[`renders correctly with data prop 1`] = `
margin: 0 auto;
}
-@media (min-width:740px) {
- .c12 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
+.c12 {
+ 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;
}
-@media (min-width:1024px) {
- .c12 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
+.c12 span {
+ font-size: inherit;
+ line-height: inherit;
}
@media (min-width:1024px) {
@@ -488,6 +474,20 @@ exports[`renders correctly with data prop 1`] = `
}
}
+@media (min-width:740px) {
+ .c12 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c12 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
@@ -594,23 +594,6 @@ exports[`renders correctly with data prop 1`] = `
`;
exports[`renders correctly without image 1`] = `
-.c8 {
- 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;
-}
-
-.c8 span {
- font-size: inherit;
- line-height: inherit;
-}
-
.c3 {
position: relative;
display: inline;
@@ -850,18 +833,21 @@ exports[`renders correctly without image 1`] = `
margin: 0 auto;
}
-@media (min-width:740px) {
- .c8 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
+.c8 {
+ 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;
}
-@media (min-width:1024px) {
- .c8 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
+.c8 span {
+ font-size: inherit;
+ line-height: inherit;
}
@media (min-width:1024px) {
@@ -1006,6 +992,20 @@ exports[`renders correctly without image 1`] = `
}
}
+@media (min-width:740px) {
+ .c8 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c8 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
diff --git a/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap b/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap
index 102e29c0a..720743b55 100644
--- a/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap
+++ b/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap
@@ -77,10 +77,6 @@ exports[`renders Column view correctly 1`] = `
opacity: 0.5;
}
-.c9 {
- fill: #FFFFFF;
-}
-
.c0 {
display: -webkit-box;
display: -webkit-flex;
@@ -135,6 +131,10 @@ exports[`renders Column view correctly 1`] = `
z-index: 2;
}
+.c9 {
+ fill: #FFFFFF;
+}
+
@media (min-width:740px) {
.c8 {
width: auto;
@@ -169,12 +169,6 @@ exports[`renders Column view correctly 1`] = `
}
}
-@media (min-width:1024px) {
- .c9 {
- fill: #FFFFFF;
- }
-}
-
@media (min-width:1440px) {
.c0 {
-webkit-flex-direction: column;
@@ -208,6 +202,12 @@ exports[`renders Column view correctly 1`] = `
}
}
+@media (min-width:1024px) {
+ .c9 {
+ fill: #FFFFFF;
+ }
+}
+
@@ -358,10 +358,6 @@ exports[`renders correctly 1`] = `
opacity: 0.5;
}
-.c9 {
- fill: #FFFFFF;
-}
-
.c0 {
display: -webkit-box;
display: -webkit-flex;
@@ -416,6 +412,10 @@ exports[`renders correctly 1`] = `
z-index: 2;
}
+.c9 {
+ fill: #FFFFFF;
+}
+
@media (min-width:740px) {
.c8 {
width: auto;
@@ -450,12 +450,6 @@ exports[`renders correctly 1`] = `
}
}
-@media (min-width:1024px) {
- .c9 {
- fill: #FFFFFF;
- }
-}
-
@media (min-width:740px) {
.c0 {
-webkit-flex-direction: row;
@@ -522,6 +516,12 @@ exports[`renders correctly 1`] = `
}
}
+@media (min-width:1024px) {
+ .c9 {
+ fill: #FFFFFF;
+ }
+}
+
diff --git a/src/components/Molecules/DoubleCopy/DoubleCopy.test.js b/src/components/Molecules/DoubleCopy/DoubleCopy.test.js
index 8905c7dc1..fab8d87ed 100644
--- a/src/components/Molecules/DoubleCopy/DoubleCopy.test.js
+++ b/src/components/Molecules/DoubleCopy/DoubleCopy.test.js
@@ -15,10 +15,6 @@ it('renders correctly', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
- .c2 {
- text-align: left;
- }
-
.c0 {
width: 100%;
}
@@ -31,6 +27,10 @@ it('renders correctly', () => {
padding: 4rem;
}
+ .c2 {
+ text-align: left;
+ }
+
@media (min-width:740px) {
.c0 {
display: -webkit-box;
diff --git a/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap b/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap
index 63508695f..e1d1d808e 100644
--- a/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap
+++ b/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap
@@ -1,6 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
+.c3 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c4 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
.c8 {
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
@@ -43,20 +57,6 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
line-height: inherit;
}
-.c3 {
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
-}
-
-.c4 {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
-}
-
.c0 {
width: 100%;
height: auto;
@@ -330,6 +330,20 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
`;
exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
+.c3 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c4 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
.c8 {
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
@@ -372,20 +386,6 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
line-height: inherit;
}
-.c3 {
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
-}
-
-.c4 {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
-}
-
.c0 {
width: 100%;
height: auto;
@@ -924,6 +924,34 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
`;
exports[`renders "Text Banner" Hero Banner correctly 2`] = `
+.c3 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c11 {
+ display: block;
+ width: 100%;
+ height: auto;
+ position: relative;
+}
+
+.c4 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
+.c13 {
+ width: 100%;
+ height: auto;
+ display: block;
+ object-fit: contain;
+}
+
.c8 {
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
@@ -958,34 +986,6 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
line-height: inherit;
}
-.c3 {
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
-}
-
-.c11 {
- display: block;
- width: 100%;
- height: auto;
- position: relative;
-}
-
-.c4 {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
-}
-
-.c13 {
- width: 100%;
- height: auto;
- display: block;
- object-fit: contain;
-}
-
.c0 {
width: 100%;
height: auto;
diff --git a/src/components/Molecules/PartnerLink/PartnerLink.test.js b/src/components/Molecules/PartnerLink/PartnerLink.test.js
index 6fd6a05d9..83ab49a44 100644
--- a/src/components/Molecules/PartnerLink/PartnerLink.test.js
+++ b/src/components/Molecules/PartnerLink/PartnerLink.test.js
@@ -17,6 +17,20 @@ it('renders correctly', () => {
).toJSON();
expect(tree).toMatchInlineSnapshot(`
+ .c0 {
+ position: relative;
+ display: inline;
+ color: #000000;
+ font-weight: normal;
+ }
+
+ .c0:hover,
+ .c0:focus {
+ color: #000000;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ }
+
.c4 {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
@@ -40,34 +54,6 @@ it('renders correctly', () => {
line-height: inherit;
}
- .c2 {
- display: block;
- width: 100%;
- height: auto;
- position: relative;
- }
-
- .c3 {
- width: 100%;
- height: auto;
- display: block;
- object-fit: none;
- }
-
- .c0 {
- position: relative;
- display: inline;
- color: #000000;
- font-weight: normal;
- }
-
- .c0:hover,
- .c0:focus {
- color: #000000;
- -webkit-text-decoration: none;
- text-decoration: none;
- }
-
.c6 {
border: 0;
-webkit-clip: rect(0 0 0 0);
@@ -128,6 +114,20 @@ it('renders correctly', () => {
background-color: #E52630;
}
+ .c2 {
+ display: block;
+ width: 100%;
+ height: auto;
+ position: relative;
+ }
+
+ .c3 {
+ width: 100%;
+ height: auto;
+ display: block;
+ object-fit: none;
+ }
+
@media (min-width:740px) {
.c4 {
font-size: 1rem;
diff --git a/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap b/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap
index 87a01b61d..63314c122 100644
--- a/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap
+++ b/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap
@@ -1,6 +1,84 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders Promo correctly 1`] = `
+.c0 {
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ position: relative;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow: hidden;
+ background: #274084;
+}
+
+.c4 {
+ width: 100%;
+ max-width: 1200px;
+ height: 100%;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ position: relative;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+
+.c6 {
+ width: 100%;
+ padding: 1.5rem 1.5rem 4rem;
+ z-index: 1;
+}
+
+.c1 {
+ width: 100%;
+ height: auto;
+}
+
+.c1 img {
+ object-position: center;
+}
+
+.c5 {
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.c2 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c3 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
.c7 {
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
@@ -52,20 +130,6 @@ exports[`renders Promo correctly 1`] = `
line-height: inherit;
}
-.c2 {
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
-}
-
-.c3 {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
-}
-
.c9 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
@@ -116,68 +180,43 @@ exports[`renders Promo correctly 1`] = `
opacity: 0.5;
}
-.c0 {
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow: hidden;
- background: #274084;
-}
-
-.c4 {
- width: 100%;
- max-width: 1200px;
- height: 100%;
- left: 0;
- right: 0;
- margin: 0 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- position: relative;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
+@media (min-width:1024px) {
+ .c0 {
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ }
}
-.c6 {
- width: 100%;
- padding: 1.5rem 1.5rem 4rem;
- z-index: 1;
+@media (min-width:1024px) {
+ .c4 {
+ min-height: calc(100vh - 90px);
+ }
}
-.c1 {
- width: 100%;
- height: auto;
+@media (min-width:1024px) {
+ .c6 {
+ width: 100%;
+ padding: 8rem 1.5rem;
+ }
}
-.c1 img {
- object-position: center;
+@media (min-width:1024px) {
+ .c1 {
+ height: 100%;
+ position: absolute;
+ }
}
-.c5 {
- width: 100%;
- height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+@media (min-width:1024px) {
+ .c5 {
+ width: 50%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ left: auto;
+ right: 0;
+ }
}
@media (min-width:740px) {
@@ -250,45 +289,6 @@ exports[`renders Promo correctly 1`] = `
}
}
-@media (min-width:1024px) {
- .c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- }
-}
-
-@media (min-width:1024px) {
- .c4 {
- min-height: calc(100vh - 90px);
- }
-}
-
-@media (min-width:1024px) {
- .c6 {
- width: 100%;
- padding: 8rem 1.5rem;
- }
-}
-
-@media (min-width:1024px) {
- .c1 {
- height: 100%;
- position: absolute;
- }
-}
-
-@media (min-width:1024px) {
- .c5 {
- width: 50%;
- position: absolute;
- top: 0;
- left: 0;
- left: auto;
- right: 0;
- }
-}
-
@@ -350,6 +350,87 @@ exports[`renders Promo correctly 1`] = `
`;
exports[`renders Promo correctly end position 1`] = `
+.c0 {
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ position: relative;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow: hidden;
+ background: #274084;
+ -webkit-clip-path: polygon(0 0,100% 0,100% 90%,0 101%);
+ clip-path: polygon(0 0,100% 0,100% 90%,0 101%);
+ border-radius: 0 0 0 2rem;
+}
+
+.c4 {
+ width: 100%;
+ max-width: 1200px;
+ height: 100%;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ position: relative;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+
+.c6 {
+ width: 100%;
+ padding: 1.5rem 1.5rem 4rem;
+ z-index: 1;
+}
+
+.c1 {
+ width: 100%;
+ height: auto;
+}
+
+.c1 img {
+ object-position: center;
+}
+
+.c5 {
+ width: 100%;
+ height: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.c2 {
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+
+.c3 {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
.c7 {
font-family: 'Anton',Impact,sans-serif;
font-weight: 400;
@@ -401,20 +482,6 @@ exports[`renders Promo correctly end position 1`] = `
line-height: inherit;
}
-.c2 {
- display: block;
- width: 100%;
- height: 100%;
- position: relative;
-}
-
-.c3 {
- width: 100%;
- height: 100%;
- display: block;
- object-fit: cover;
-}
-
.c9 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
@@ -465,71 +532,51 @@ exports[`renders Promo correctly end position 1`] = `
opacity: 0.5;
}
-.c0 {
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- position: relative;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- overflow: hidden;
- background: #274084;
- -webkit-clip-path: polygon(0 0,100% 0,100% 90%,0 101%);
- clip-path: polygon(0 0,100% 0,100% 90%,0 101%);
- border-radius: 0 0 0 2rem;
+@media (min-width:1024px) {
+ .c0 {
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ }
}
-.c4 {
- width: 100%;
- max-width: 1200px;
- height: 100%;
- left: 0;
- right: 0;
- margin: 0 auto;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- position: relative;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
+@media (min-width:1024px) {
+ .c0 {
+ -webkit-clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
+ clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
+ border-radius: 0 0 0 4rem;
+ }
}
-.c6 {
- width: 100%;
- padding: 1.5rem 1.5rem 4rem;
- z-index: 1;
+@media (min-width:1024px) {
+ .c4 {
+ min-height: calc(100vh - 90px);
+ }
}
-.c1 {
- width: 100%;
- height: auto;
+@media (min-width:1024px) {
+ .c6 {
+ width: 100%;
+ padding: 8rem 1.5rem;
+ }
}
-.c1 img {
- object-position: center;
+@media (min-width:1024px) {
+ .c1 {
+ height: 100%;
+ position: absolute;
+ }
}
-.c5 {
- width: 100%;
- height: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+@media (min-width:1024px) {
+ .c5 {
+ width: 50%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ left: auto;
+ right: 0;
+ }
}
@media (min-width:740px) {
@@ -602,53 +649,6 @@ exports[`renders Promo correctly end position 1`] = `
}
}
-@media (min-width:1024px) {
- .c0 {
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- }
-}
-
-@media (min-width:1024px) {
- .c0 {
- -webkit-clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
- clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
- border-radius: 0 0 0 4rem;
- }
-}
-
-@media (min-width:1024px) {
- .c4 {
- min-height: calc(100vh - 90px);
- }
-}
-
-@media (min-width:1024px) {
- .c6 {
- width: 100%;
- padding: 8rem 1.5rem;
- }
-}
-
-@media (min-width:1024px) {
- .c1 {
- height: 100%;
- position: absolute;
- }
-}
-
-@media (min-width:1024px) {
- .c5 {
- width: 50%;
- position: absolute;
- top: 0;
- left: 0;
- left: auto;
- right: 0;
- }
-}
-
diff --git a/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap b/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap
index cfb2800b0..5d2fc57f0 100644
--- a/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap
+++ b/src/components/Molecules/QuoteSlice/__snapshots__/QuoteSlice.test.js.snap
@@ -1,44 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders a Quote Slice with basic props 1`] = `
-.c4 {
- font-family: 'Anton',Impact,sans-serif;
- font-weight: 400;
- text-transform: uppercase;
- -webkit-letter-spacing: 0;
- -moz-letter-spacing: 0;
- -ms-letter-spacing: 0;
- letter-spacing: 0;
- font-size: 1.5rem;
- line-height: 1.5rem;
-}
-
-.c4 span {
- font-size: inherit;
- line-height: inherit;
-}
-
-.c6 {
- 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;
-}
-
-.c6 {
- text-align: center;
-}
-
-.c6 span {
- font-size: inherit;
- line-height: inherit;
-}
-
.c8 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
@@ -104,6 +66,44 @@ exports[`renders a Quote Slice with basic props 1`] = `
width: 1px;
}
+.c4 {
+ font-family: 'Anton',Impact,sans-serif;
+ font-weight: 400;
+ text-transform: uppercase;
+ -webkit-letter-spacing: 0;
+ -moz-letter-spacing: 0;
+ -ms-letter-spacing: 0;
+ letter-spacing: 0;
+ font-size: 1.5rem;
+ line-height: 1.5rem;
+}
+
+.c4 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c6 {
+ 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;
+}
+
+.c6 {
+ text-align: center;
+}
+
+.c6 span {
+ font-size: inherit;
+ line-height: inherit;
+}
+
.c0 {
width: 100%;
display: -webkit-box;
@@ -197,56 +197,56 @@ exports[`renders a Quote Slice with basic props 1`] = `
}
@media (min-width:740px) {
- .c4 {
- font-size: 1.875rem;
- line-height: 1.875rem;
+ .c8 {
+ font-size: 1rem;
+ line-height: 1.25rem;
}
}
@media (min-width:1024px) {
- .c4 {
- font-size: 2rem;
- line-height: 2rem;
+ .c8 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
}
}
@media (min-width:740px) {
- .c6 {
- font-size: 1rem;
- line-height: 1.25rem;
+ .c8 {
+ width: auto;
}
}
@media (min-width:1024px) {
- .c6 {
- font-size: 1.125rem;
- line-height: 1.375rem;
+ .c8 {
+ width: auto;
}
}
@media (min-width:740px) {
- .c8 {
- font-size: 1rem;
- line-height: 1.25rem;
+ .c4 {
+ font-size: 1.875rem;
+ line-height: 1.875rem;
}
}
@media (min-width:1024px) {
- .c8 {
- font-size: 1.125rem;
- line-height: 1.375rem;
+ .c4 {
+ font-size: 2rem;
+ line-height: 2rem;
}
}
@media (min-width:740px) {
- .c8 {
- width: auto;
+ .c6 {
+ font-size: 1rem;
+ line-height: 1.25rem;
}
}
@media (min-width:1024px) {
- .c8 {
- width: auto;
+ .c6 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
}
}
diff --git a/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap b/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap
index 3205f6897..17d726d06 100644
--- a/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap
+++ b/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap
@@ -1,29 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders Single Message with 100% vertical height image correctly 1`] = `
-.c6 {
- 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;
-}
-
-.c6 {
- font-size: 3rem;
- line-height: normal;
- color: #FFFFFF;
-}
-
-.c6 span {
- font-size: inherit;
- line-height: inherit;
-}
-
.c3 {
display: block;
width: 100%;
@@ -81,18 +58,27 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
z-index: 1;
}
-@media (min-width:740px) {
- .c6 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
+.c6 {
+ 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;
}
-@media (min-width:1024px) {
- .c6 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
+.c6 {
+ font-size: 3rem;
+ line-height: normal;
+ color: #FFFFFF;
+}
+
+.c6 span {
+ font-size: inherit;
+ line-height: inherit;
}
@media (min-width:740px) {
@@ -155,6 +141,20 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
}
}
+@media (min-width:740px) {
+ .c6 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c6 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
a {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.c21:hover,
-.c21:focus,
-.c21:focus-within,
-.c21:focus-visible {
- background-color: #890B11;
- outline-offset: 3px;
-}
-
-.c21:disabled {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
-.c13 {
- width: 100%;
- position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- color: #000000;
-}
-
-.c15 {
- margin-bottom: 0.5rem;
- 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;
-}
-
-.c16 {
- position: relative;
- font-size: 1.25rem;
-}
-
-.c17 {
- position: relative;
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.c18 {
- position: relative;
- box-sizing: border-box;
- width: 100%;
- height: 48px;
- padding: 1rem 2.4rem 1rem 1.5rem;
- background-color: #F4F3F5;
- border: 1px solid;
- border-color: #969598;
- box-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- color: #000000;
- border-radius: 0.5rem;
- font-size: inherit;
- z-index: 2;
- font-family: inherit;
-}
-
-.c18:focus {
- border: 1px solid #666;
-}
-
.c9 {
text-align: left;
}
-.c22:disabled {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
.c0 {
position: relative;
display: -webkit-box;
@@ -346,80 +214,164 @@ exports[`Image banner left orientation renders correctly 1`] = `
min-height: 48px;
}
-@media (min-width:740px) {
- .c6 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
+.c13 {
+ width: 100%;
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ color: #000000;
}
-@media (min-width:1024px) {
- .c6 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
+.c15 {
+ margin-bottom: 0.5rem;
+ 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;
}
-@media (min-width:740px) {
- .c14 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
+.c16 {
+ position: relative;
+ font-size: 1.25rem;
}
-@media (min-width:1024px) {
- .c14 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
+.c17 {
+ position: relative;
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
-@media (min-width:740px) {
- .c21 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
+.c18 {
+ position: relative;
+ box-sizing: border-box;
+ width: 100%;
+ height: 48px;
+ padding: 1rem 2.4rem 1rem 1.5rem;
+ background-color: #F4F3F5;
+ border: 1px solid;
+ border-color: #969598;
+ box-shadow: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ color: #000000;
+ border-radius: 0.5rem;
+ font-size: inherit;
+ z-index: 2;
+ font-family: inherit;
}
-@media (min-width:1024px) {
- .c21 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
+.c18:focus {
+ border: 1px solid #666;
}
-@media (min-width:740px) {
- .c21 {
- width: auto;
- }
+.c21 {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ position: relative;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 0.2s;
+ transition: all 0.2s;
+ height: 2.5rem;
+ width: 100%;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border: none;
+ cursor: pointer;
+ padding: 0.6rem 1rem;
+ border-radius: 0.5rem;
+ background-color: #E52630;
+ color: #FFFFFF;
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 700;
+ 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;
}
-@media (min-width:1024px) {
- .c21 {
- width: auto;
- }
+.c21 > a {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c21:hover,
+.c21:focus,
+.c21:focus-within,
+.c21:focus-visible {
+ background-color: #890B11;
+ outline-offset: 3px;
+}
+
+.c21:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.c22:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
}
@media (min-width:740px) {
- .c15 {
+ .c6 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:1024px) {
- .c15 {
- font-size: 1rem;
- line-height: 1.25rem;
+ .c6 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
}
}
@media (min-width:740px) {
-
+ .c14 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
}
@media (min-width:1024px) {
-
+ .c14 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
}
@media (min-width:740px) {
@@ -491,53 +443,101 @@ exports[`Image banner left orientation renders correctly 1`] = `
}
}
-@media (min-width:1024px) {
- .c4 {
- border-radius: 1rem;
- max-width: 461px;
- min-width: 400px;
- margin-left: 0;
- margin-right: 0;
+@media (min-width:1024px) {
+ .c4 {
+ border-radius: 1rem;
+ max-width: 461px;
+ min-width: 400px;
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
+
+@media (min-width:740px) {
+ .c5 {
+ padding: 2rem;
+ }
+}
+
+@media (min-width:740px) {
+ .c7 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c7 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:740px) {
+ .c8 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c8 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:740px) {
+ .c20 button {
+ padding: 1rem 2rem;
}
}
@media (min-width:740px) {
- .c5 {
- padding: 2rem;
+ .c15 {
+ font-size: 1rem;
+ line-height: 1.25rem;
}
}
-@media (min-width:740px) {
- .c7 {
+@media (min-width:1024px) {
+ .c15 {
font-size: 1rem;
line-height: 1.25rem;
}
}
+@media (min-width:740px) {
+
+}
+
@media (min-width:1024px) {
- .c7 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
+
}
@media (min-width:740px) {
- .c8 {
+ .c21 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:1024px) {
- .c8 {
+ .c21 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
@media (min-width:740px) {
- .c20 button {
- padding: 1rem 2rem;
+ .c21 {
+ width: auto;
+ }
+}
+
+@media (min-width:1024px) {
+ .c21 {
+ width: auto;
}
}
@@ -780,142 +780,10 @@ exports[`Image banner renders correctly 1`] = `
line-height: inherit;
}
-.c21 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- position: relative;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- height: 2.5rem;
- width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border: none;
- cursor: pointer;
- padding: 0.6rem 1rem;
- border-radius: 0.5rem;
- background-color: #E52630;
- color: #FFFFFF;
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 700;
- 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;
-}
-
-.c21 > a {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.c21:hover,
-.c21:focus,
-.c21:focus-within,
-.c21:focus-visible {
- background-color: #890B11;
- outline-offset: 3px;
-}
-
-.c21:disabled {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
-.c13 {
- width: 100%;
- position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- color: #000000;
-}
-
-.c15 {
- margin-bottom: 0.5rem;
- 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;
-}
-
-.c16 {
- position: relative;
- font-size: 1.25rem;
-}
-
-.c17 {
- position: relative;
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.c18 {
- position: relative;
- box-sizing: border-box;
- width: 100%;
- height: 48px;
- padding: 1rem 2.4rem 1rem 1.5rem;
- background-color: #F4F3F5;
- border: 1px solid;
- border-color: #969598;
- box-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- color: #000000;
- border-radius: 0.5rem;
- font-size: inherit;
- z-index: 2;
- font-family: inherit;
-}
-
-.c18:focus {
- border: 1px solid #666;
-}
-
.c9 {
text-align: left;
}
-.c22:disabled {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
.c0 {
position: relative;
display: -webkit-box;
@@ -1020,9 +888,90 @@ exports[`Image banner renders correctly 1`] = `
display: block;
width: 100%;
margin-bottom: 0.5rem;
- text-align: left;
+ text-align: left;
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 700;
+ 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-family: 'Montserrat',Helvetica,Arial,sans-serif;
+}
+
+.c11 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ gap: 0;
+ width: 100%;
+}
+
+.c12 {
+ width: 100%;
+ margin-bottom: 1rem;
+}
+
+.c8 {
+ padding-bottom: 1rem;
+ color: #000000;
+ 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;
+}
+
+.c19 {
+ color: #000000;
+ font-size: 0.75rem;
+ line-height: normal;
+ padding-bottom: 0.5rem;
+}
+
+.c19 p,
+.c19 span,
+.c19 * {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.c20 {
+ margin-top: 1rem;
+}
+
+.c20 button {
+ width: 100%;
+ min-height: 48px;
+}
+
+.c13 {
+ width: 100%;
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ color: #000000;
+}
+
+.c15 {
+ margin-bottom: 0.5rem;
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 700;
+ font-weight: 400;
text-transform: inherit;
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
@@ -1030,31 +979,82 @@ exports[`Image banner renders correctly 1`] = `
letter-spacing: 0;
font-size: 1rem;
line-height: 1.25rem;
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
}
-.c11 {
+.c16 {
+ position: relative;
+ font-size: 1.25rem;
+}
+
+.c17 {
+ position: relative;
+ width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- gap: 0;
- width: 100%;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
-.c12 {
+.c18 {
+ position: relative;
+ box-sizing: border-box;
width: 100%;
- margin-bottom: 1rem;
+ height: 48px;
+ padding: 1rem 2.4rem 1rem 1.5rem;
+ background-color: #F4F3F5;
+ border: 1px solid;
+ border-color: #969598;
+ box-shadow: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ color: #000000;
+ border-radius: 0.5rem;
+ font-size: inherit;
+ z-index: 2;
+ font-family: inherit;
}
-.c8 {
- padding-bottom: 1rem;
- color: #000000;
+.c18:focus {
+ border: 1px solid #666;
+}
+
+.c21 {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ position: relative;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 0.2s;
+ transition: all 0.2s;
+ height: 2.5rem;
+ width: 100%;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border: none;
+ cursor: pointer;
+ padding: 0.6rem 1rem;
+ border-radius: 0.5rem;
+ background-color: #E52630;
+ color: #FFFFFF;
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 400;
+ font-weight: 700;
text-transform: inherit;
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
@@ -1064,27 +1064,27 @@ exports[`Image banner renders correctly 1`] = `
line-height: 1.25rem;
}
-.c19 {
- color: #000000;
- font-size: 0.75rem;
- line-height: normal;
- padding-bottom: 0.5rem;
+.c21 > a {
+ -webkit-text-decoration: none;
+ text-decoration: none;
}
-.c19 p,
-.c19 span,
-.c19 * {
- font-size: inherit;
- line-height: inherit;
+.c21:hover,
+.c21:focus,
+.c21:focus-within,
+.c21:focus-visible {
+ background-color: #890B11;
+ outline-offset: 3px;
}
-.c20 {
- margin-top: 1rem;
+.c21:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
}
-.c20 button {
- width: 100%;
- min-height: 48px;
+.c22:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
}
@media (min-width:740px) {
@@ -1115,54 +1115,6 @@ exports[`Image banner renders correctly 1`] = `
}
}
-@media (min-width:740px) {
- .c21 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
-}
-
-@media (min-width:1024px) {
- .c21 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
-}
-
-@media (min-width:740px) {
- .c21 {
- width: auto;
- }
-}
-
-@media (min-width:1024px) {
- .c21 {
- width: auto;
- }
-}
-
-@media (min-width:740px) {
- .c15 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
-}
-
-@media (min-width:1024px) {
- .c15 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:1024px) {
-
-}
-
@media (min-width:740px) {
.c0 {
padding: 0rem 2rem 2rem 2rem;
@@ -1282,6 +1234,54 @@ exports[`Image banner renders correctly 1`] = `
}
}
+@media (min-width:740px) {
+ .c15 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c15 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:740px) {
+
+}
+
+@media (min-width:1024px) {
+
+}
+
+@media (min-width:740px) {
+ .c21 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c21 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:740px) {
+ .c21 {
+ width: auto;
+ }
+}
+
+@media (min-width:1024px) {
+ .c21 {
+ width: auto;
+ }
+}
+
@@ -1470,85 +1470,22 @@ exports[`Image banner renders correctly 1`] = `
>
Sign up
-
-
-
-
-
-
-
-
-`;
-
-exports[`Text-only email widget renders correctly 1`] = `
-.c6 {
- 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;
-}
-
-.c6 {
- color: #000000;
-}
-
-.c6 span {
- font-size: inherit;
- line-height: inherit;
-}
-
-.c14 {
- 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;
-}
-
-.c14 span {
- font-size: inherit;
- line-height: inherit;
-}
+ className=""
+ />
+
+
+
+
+
+
+
+
+`;
-.c21 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- position: relative;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- height: 2.5rem;
- width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border: none;
- cursor: pointer;
- padding: 0.6rem 1rem;
- border-radius: 0.5rem;
- background-color: #E52630;
- color: #FFFFFF;
+exports[`Text-only email widget renders correctly 1`] = `
+.c6 {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 700;
+ font-weight: 400;
text-transform: inherit;
-webkit-letter-spacing: 0;
-moz-letter-spacing: 0;
@@ -1558,39 +1495,16 @@ exports[`Text-only email widget renders correctly 1`] = `
line-height: 1.25rem;
}
-.c21 > a {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.c21:hover,
-.c21:focus,
-.c21:focus-within,
-.c21:focus-visible {
- background-color: #890B11;
- outline-offset: 3px;
-}
-
-.c21:disabled {
- cursor: not-allowed;
- opacity: 0.5;
+.c6 {
+ color: #000000;
}
-.c13 {
- width: 100%;
- position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- color: #000000;
+.c6 span {
+ font-size: inherit;
+ line-height: inherit;
}
-.c15 {
- margin-bottom: 0.5rem;
+.c14 {
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-weight: 400;
text-transform: inherit;
@@ -1602,61 +1516,15 @@ exports[`Text-only email widget renders correctly 1`] = `
line-height: 1.25rem;
}
-.c16 {
- position: relative;
- font-size: 1.25rem;
-}
-
-.c17 {
- position: relative;
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.c18 {
- position: relative;
- box-sizing: border-box;
- width: 100%;
- height: 48px;
- padding: 1rem 2.4rem 1rem 1.5rem;
- background-color: #F4F3F5;
- border: 1px solid;
- border-color: #969598;
- box-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- color: #000000;
- border-radius: 0.5rem;
+.c14 span {
font-size: inherit;
- z-index: 2;
- font-family: inherit;
-}
-
-.c18:focus {
- border: 1px solid #666;
+ line-height: inherit;
}
.c9 {
text-align: left;
}
-.c22:disabled {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
.c0 {
position: relative;
display: -webkit-box;
@@ -1819,13 +1687,145 @@ exports[`Text-only email widget renders correctly 1`] = `
line-height: inherit;
}
-.c20 {
- margin-top: 1rem;
+.c20 {
+ margin-top: 1rem;
+}
+
+.c20 button {
+ width: 100%;
+ min-height: 48px;
+}
+
+.c13 {
+ width: 100%;
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ color: #000000;
+}
+
+.c15 {
+ margin-bottom: 0.5rem;
+ 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;
+}
+
+.c16 {
+ position: relative;
+ font-size: 1.25rem;
+}
+
+.c17 {
+ position: relative;
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.c18 {
+ position: relative;
+ box-sizing: border-box;
+ width: 100%;
+ height: 48px;
+ padding: 1rem 2.4rem 1rem 1.5rem;
+ background-color: #F4F3F5;
+ border: 1px solid;
+ border-color: #969598;
+ box-shadow: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ color: #000000;
+ border-radius: 0.5rem;
+ font-size: inherit;
+ z-index: 2;
+ font-family: inherit;
+}
+
+.c18:focus {
+ border: 1px solid #666;
+}
+
+.c21 {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ position: relative;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 0.2s;
+ transition: all 0.2s;
+ height: 2.5rem;
+ width: 100%;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border: none;
+ cursor: pointer;
+ padding: 0.6rem 1rem;
+ border-radius: 0.5rem;
+ background-color: #E52630;
+ color: #FFFFFF;
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 700;
+ 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;
+}
+
+.c21 > a {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c21:hover,
+.c21:focus,
+.c21:focus-within,
+.c21:focus-visible {
+ background-color: #890B11;
+ outline-offset: 3px;
+}
+
+.c21:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
}
-.c20 button {
- width: 100%;
- min-height: 48px;
+.c22:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
}
@media (min-width:740px) {
@@ -1856,54 +1856,6 @@ exports[`Text-only email widget renders correctly 1`] = `
}
}
-@media (min-width:740px) {
- .c21 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
-}
-
-@media (min-width:1024px) {
- .c21 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
-}
-
-@media (min-width:740px) {
- .c21 {
- width: auto;
- }
-}
-
-@media (min-width:1024px) {
- .c21 {
- width: auto;
- }
-}
-
-@media (min-width:740px) {
- .c15 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
-}
-
-@media (min-width:1024px) {
- .c15 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
-}
-
-@media (min-width:740px) {
-
-}
-
-@media (min-width:1024px) {
-
-}
-
@media (min-width:740px) {
.c0 {
padding: 2rem 2rem 2rem 2rem;
@@ -2023,6 +1975,54 @@ exports[`Text-only email widget renders correctly 1`] = `
}
}
+@media (min-width:740px) {
+ .c15 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c15 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:740px) {
+
+}
+
+@media (min-width:1024px) {
+
+}
+
+@media (min-width:740px) {
+ .c21 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c21 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:740px) {
+ .c21 {
+ width: auto;
+ }
+}
+
+@media (min-width:1024px) {
+ .c21 {
+ width: auto;
+ }
+}
+
@@ -2230,172 +2230,40 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
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;
-}
-
-.c6 {
- color: #000000;
-}
-
-.c6 span {
- font-size: inherit;
- line-height: inherit;
-}
-
-.c14 {
- 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;
-}
-
-.c14 span {
- font-size: inherit;
- line-height: inherit;
-}
-
-.c21 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- position: relative;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- height: 2.5rem;
- width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border: none;
- cursor: pointer;
- padding: 0.6rem 1rem;
- border-radius: 0.5rem;
- background-color: #E52630;
- color: #FFFFFF;
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 700;
- 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;
-}
-
-.c21 > a {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.c21:hover,
-.c21:focus,
-.c21:focus-within,
-.c21:focus-visible {
- background-color: #890B11;
- outline-offset: 3px;
-}
-
-.c21:disabled {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
-.c13 {
- width: 100%;
- position: relative;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- color: #000000;
-}
-
-.c15 {
- margin-bottom: 0.5rem;
- 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;
-}
-
-.c16 {
- position: relative;
- font-size: 1.25rem;
-}
-
-.c17 {
- position: relative;
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
- justify-content: flex-end;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.c18 {
- position: relative;
- box-sizing: border-box;
- width: 100%;
- height: 48px;
- padding: 1rem 2.4rem 1rem 1.5rem;
- background-color: #F4F3F5;
- border: 1px solid;
- border-color: #969598;
- box-shadow: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ -ms-letter-spacing: 0;
+ letter-spacing: 0;
+ font-size: 1rem;
+ line-height: 1.25rem;
+}
+
+.c6 {
color: #000000;
- border-radius: 0.5rem;
+}
+
+.c6 span {
font-size: inherit;
- z-index: 2;
- font-family: inherit;
+ line-height: inherit;
}
-.c18:focus {
- border: 1px solid #666;
+.c14 {
+ 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;
}
-.c9 {
- text-align: left;
+.c14 span {
+ font-size: inherit;
+ line-height: inherit;
}
-.c22:disabled {
- cursor: not-allowed;
- opacity: 0.5;
+.c9 {
+ text-align: left;
}
.c0 {
@@ -2569,80 +2437,164 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
min-height: 48px;
}
-@media (min-width:740px) {
- .c6 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
+.c13 {
+ width: 100%;
+ position: relative;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ color: #000000;
}
-@media (min-width:1024px) {
- .c6 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
+.c15 {
+ margin-bottom: 0.5rem;
+ 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;
}
-@media (min-width:740px) {
- .c14 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
+.c16 {
+ position: relative;
+ font-size: 1.25rem;
}
-@media (min-width:1024px) {
- .c14 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
+.c17 {
+ position: relative;
+ width: 100%;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -webkit-justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
-@media (min-width:740px) {
- .c21 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
+.c18 {
+ position: relative;
+ box-sizing: border-box;
+ width: 100%;
+ height: 48px;
+ padding: 1rem 2.4rem 1rem 1.5rem;
+ background-color: #F4F3F5;
+ border: 1px solid;
+ border-color: #969598;
+ box-shadow: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ color: #000000;
+ border-radius: 0.5rem;
+ font-size: inherit;
+ z-index: 2;
+ font-family: inherit;
}
-@media (min-width:1024px) {
- .c21 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
+.c18:focus {
+ border: 1px solid #666;
}
-@media (min-width:740px) {
- .c21 {
- width: auto;
- }
+.c21 {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ position: relative;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 0.2s;
+ transition: all 0.2s;
+ height: 2.5rem;
+ width: 100%;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border: none;
+ cursor: pointer;
+ padding: 0.6rem 1rem;
+ border-radius: 0.5rem;
+ background-color: #E52630;
+ color: #FFFFFF;
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 700;
+ 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;
}
-@media (min-width:1024px) {
- .c21 {
- width: auto;
- }
+.c21 > a {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c21:hover,
+.c21:focus,
+.c21:focus-within,
+.c21:focus-visible {
+ background-color: #890B11;
+ outline-offset: 3px;
+}
+
+.c21:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.c22:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
}
@media (min-width:740px) {
- .c15 {
+ .c6 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width:1024px) {
- .c15 {
- font-size: 1rem;
- line-height: 1.25rem;
+ .c6 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
}
}
@media (min-width:740px) {
-
+ .c14 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
}
@media (min-width:1024px) {
-
+ .c14 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
}
@media (min-width:740px) {
@@ -2764,6 +2716,54 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
}
}
+@media (min-width:740px) {
+ .c15 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c15 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:740px) {
+
+}
+
+@media (min-width:1024px) {
+
+}
+
+@media (min-width:740px) {
+ .c21 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c21 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:740px) {
+ .c21 {
+ width: auto;
+ }
+}
+
+@media (min-width:1024px) {
+ .c21 {
+ width: auto;
+ }
+}
+
diff --git a/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap b/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
index b2cfca625..34f6579f6 100644
--- a/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
+++ b/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap
@@ -42,61 +42,6 @@ exports[`renders correctly 1`] = `
line-height: inherit;
}
-.c15 {
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
- display: inline-flex;
- position: relative;
- -webkit-text-decoration: none;
- text-decoration: none;
- -webkit-transition: all 0.2s;
- transition: all 0.2s;
- height: 2.5rem;
- width: 100%;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- border: none;
- cursor: pointer;
- padding: 0.6rem 1rem;
- border-radius: 0.5rem;
- background-color: #E52630;
- color: #FFFFFF;
- font-family: 'Montserrat',Helvetica,Arial,sans-serif;
- font-weight: 700;
- 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;
-}
-
-.c15 > a {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.c15:hover,
-.c15:focus,
-.c15:focus-within,
-.c15:focus-visible {
- background-color: #890B11;
- outline-offset: 3px;
-}
-
-.c15:disabled {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
.c8 {
width: 100%;
position: relative;
@@ -169,15 +114,6 @@ exports[`renders correctly 1`] = `
border: 1px solid #666;
}
-.c5 {
- text-align: left;
-}
-
-.c16:disabled {
- cursor: not-allowed;
- opacity: 0.5;
-}
-
.c0 {
display: -webkit-box;
display: -webkit-flex;
@@ -264,6 +200,70 @@ exports[`renders correctly 1`] = `
margin-bottom: 1.5rem;
}
+.c15 {
+ display: -webkit-inline-box;
+ display: -webkit-inline-flex;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ position: relative;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ -webkit-transition: all 0.2s;
+ transition: all 0.2s;
+ height: 2.5rem;
+ width: 100%;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border: none;
+ cursor: pointer;
+ padding: 0.6rem 1rem;
+ border-radius: 0.5rem;
+ background-color: #E52630;
+ color: #FFFFFF;
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+ font-weight: 700;
+ 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;
+}
+
+.c15 > a {
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c15:hover,
+.c15:focus,
+.c15:focus-within,
+.c15:focus-visible {
+ background-color: #890B11;
+ outline-offset: 3px;
+}
+
+.c15:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.c16:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
+
+.c5 {
+ text-align: left;
+}
+
@media (min-width:740px) {
.c1 {
font-size: 1.875rem;
@@ -292,32 +292,6 @@ exports[`renders correctly 1`] = `
}
}
-@media (min-width:740px) {
- .c15 {
- font-size: 1rem;
- line-height: 1.25rem;
- }
-}
-
-@media (min-width:1024px) {
- .c15 {
- font-size: 1.125rem;
- line-height: 1.375rem;
- }
-}
-
-@media (min-width:740px) {
- .c15 {
- width: auto;
- }
-}
-
-@media (min-width:1024px) {
- .c15 {
- width: auto;
- }
-}
-
@media (min-width:740px) {
.c10 {
font-size: 1rem;
@@ -359,6 +333,32 @@ exports[`renders correctly 1`] = `
}
}
+@media (min-width:740px) {
+ .c15 {
+ font-size: 1rem;
+ line-height: 1.25rem;
+ }
+}
+
+@media (min-width:1024px) {
+ .c15 {
+ font-size: 1.125rem;
+ line-height: 1.375rem;
+ }
+}
+
+@media (min-width:740px) {
+ .c15 {
+ width: auto;
+ }
+}
+
+@media (min-width:1024px) {
+ .c15 {
+ width: auto;
+ }
+}
+