diff --git a/README.md b/README.md
index 4767a06ab..23ff0be27 100644
--- a/README.md
+++ b/README.md
@@ -15,16 +15,58 @@ 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`** — 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/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`**.
+
+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:
+
+```
+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';
```
+#### 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/babel.config.js b/babel.config.js
index 0f8518bde..ddb169761 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,13 +1,36 @@
// eslint-disable-next-line func-names
module.exports = function (api) {
- api.cache(true);
+ const format = process.env.MODULE_FORMAT;
+
+ api.cache.using(() => `${format || 'node'}:${process.env.NODE_ENV || 'development'}`);
- const presets = [['react-app', { absoluteRuntime: false }]];
const plugins = [
['babel-plugin-styled-components'],
['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }]
];
+ const presetEnvOptions = { bugfixes: true };
+
+ if (format === 'esm') {
+ presetEnvOptions.modules = false;
+ } else {
+ presetEnvOptions.modules = 'commonjs';
+ if (!format) {
+ presetEnvOptions.targets = { node: 'current' };
+ }
+ }
+
+ const presets = [
+ ['@babel/preset-env', presetEnvOptions],
+ [
+ '@babel/preset-react',
+ {
+ runtime: 'classic',
+ development: process.env.NODE_ENV === 'test' || process.env.NODE_ENV === 'development'
+ }
+ ]
+ ];
+
return {
presets,
plugins
diff --git a/package.json b/package.json
index 29a983c99..7b37d6307 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,155 @@
"name": "@comicrelief/component-library",
"author": "Comic Relief Engineering Team",
"version": "0.0.0-see.readme.for.semantic.release.process",
- "main": "dist/index.js",
+ "main": "dist/cjs/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/esm/index.js",
+ "require": "./dist/cjs/index.js",
+ "default": "./dist/esm/index.js"
+ },
+ "./theme": {
+ "import": "./dist/esm/theme.js",
+ "require": "./dist/cjs/theme.js",
+ "default": "./dist/esm/theme.js"
+ },
+ "./atoms": {
+ "import": "./dist/esm/atoms.js",
+ "require": "./dist/cjs/atoms.js",
+ "default": "./dist/esm/atoms.js"
+ },
+ "./molecules": {
+ "import": "./dist/esm/molecules.js",
+ "require": "./dist/cjs/molecules.js",
+ "default": "./dist/esm/molecules.js"
+ },
+ "./organisms": {
+ "import": "./dist/esm/organisms.js",
+ "require": "./dist/cjs/organisms.js",
+ "default": "./dist/esm/organisms.js"
+ },
+ "./atoms/form": {
+ "import": "./dist/esm/atoms-form.js",
+ "require": "./dist/cjs/atoms-form.js",
+ "default": "./dist/esm/atoms-form.js"
+ },
+ "./atoms/actions": {
+ "import": "./dist/esm/atoms-actions.js",
+ "require": "./dist/cjs/atoms-actions.js",
+ "default": "./dist/esm/atoms-actions.js"
+ },
+ "./atoms/text": {
+ "import": "./dist/esm/atoms-text.js",
+ "require": "./dist/cjs/atoms-text.js",
+ "default": "./dist/esm/atoms-text.js"
+ },
+ "./atoms/media": {
+ "import": "./dist/esm/atoms-media.js",
+ "require": "./dist/cjs/atoms-media.js",
+ "default": "./dist/esm/atoms-media.js"
+ },
+ "./atoms/brand": {
+ "import": "./dist/esm/atoms-brand.js",
+ "require": "./dist/cjs/atoms-brand.js",
+ "default": "./dist/esm/atoms-brand.js"
+ },
+ "./atoms/navigation": {
+ "import": "./dist/esm/atoms-navigation.js",
+ "require": "./dist/cjs/atoms-navigation.js",
+ "default": "./dist/esm/atoms-navigation.js"
+ },
+ "./atoms/icons": {
+ "import": "./dist/esm/atoms-icons.js",
+ "require": "./dist/cjs/atoms-icons.js",
+ "default": "./dist/esm/atoms-icons.js"
+ },
+ "./atoms/effects": {
+ "import": "./dist/esm/atoms-effects.js",
+ "require": "./dist/cjs/atoms-effects.js",
+ "default": "./dist/esm/atoms-effects.js"
+ },
+ "./molecules/search-lookup": {
+ "import": "./dist/esm/molecules-search-lookup.js",
+ "require": "./dist/cjs/molecules-search-lookup.js",
+ "default": "./dist/esm/molecules-search-lookup.js"
+ },
+ "./molecules/cards-ctas": {
+ "import": "./dist/esm/molecules-cards-ctas.js",
+ "require": "./dist/cjs/molecules-cards-ctas.js",
+ "default": "./dist/esm/molecules-cards-ctas.js"
+ },
+ "./molecules/banners-heroes": {
+ "import": "./dist/esm/molecules-banners-heroes.js",
+ "require": "./dist/cjs/molecules-banners-heroes.js",
+ "default": "./dist/esm/molecules-banners-heroes.js"
+ },
+ "./molecules/engagement": {
+ "import": "./dist/esm/molecules-engagement.js",
+ "require": "./dist/cjs/molecules-engagement.js",
+ "default": "./dist/esm/molecules-engagement.js"
+ },
+ "./molecules/cards-initiatives": {
+ "import": "./dist/esm/molecules-cards-ctas.js",
+ "require": "./dist/cjs/molecules-cards-ctas.js",
+ "default": "./dist/esm/molecules-cards-ctas.js"
+ },
+ "./molecules/footer": {
+ "import": "./dist/esm/molecules-footer.js",
+ "require": "./dist/cjs/molecules-footer.js",
+ "default": "./dist/esm/molecules-footer.js"
+ },
+ "./molecules/footer-email": {
+ "import": "./dist/esm/molecules-footer.js",
+ "require": "./dist/cjs/molecules-footer.js",
+ "default": "./dist/esm/molecules-footer.js"
+ },
+ "./molecules/icons": {
+ "import": "./dist/esm/molecules-icons.js",
+ "require": "./dist/cjs/molecules-icons.js",
+ "default": "./dist/esm/molecules-icons.js"
+ },
+ "./organisms/headers": {
+ "import": "./dist/esm/organisms-headers.js",
+ "require": "./dist/cjs/organisms-headers.js",
+ "default": "./dist/esm/organisms-headers.js"
+ },
+ "./organisms/footers": {
+ "import": "./dist/esm/organisms-footers.js",
+ "require": "./dist/cjs/organisms-footers.js",
+ "default": "./dist/esm/organisms-footers.js"
+ },
+ "./organisms/compliance": {
+ "import": "./dist/esm/organisms-compliance.js",
+ "require": "./dist/cjs/organisms-compliance.js",
+ "default": "./dist/esm/organisms-compliance.js"
+ },
+ "./organisms/donation": {
+ "import": "./dist/esm/organisms-donation.js",
+ "require": "./dist/cjs/organisms-donation.js",
+ "default": "./dist/esm/organisms-donation.js"
+ },
+ "./organisms/email-contact": {
+ "import": "./dist/esm/organisms-email-contact.js",
+ "require": "./dist/cjs/organisms-email-contact.js",
+ "default": "./dist/esm/organisms-email-contact.js"
+ },
+ "./organisms/media": {
+ "import": "./dist/esm/organisms-media.js",
+ "require": "./dist/cjs/organisms-media.js",
+ "default": "./dist/esm/organisms-media.js"
+ },
+ "./dist/cjs/*": "./dist/cjs/*",
+ "./dist/esm/*": "./dist/esm/*",
+ "./src/*": "./src/*",
+ "./package.json": "./package.json"
+ },
"license": "ISC",
"jest": {
"verbose": true,
@@ -16,17 +164,22 @@
"^axios$": "axios/dist/node/axios.cjs"
}
},
- "module": "dist/index.js",
+ "module": "dist/esm/index.js",
"repository": {
"type": "git",
"url": "https://github.com/comicrelief/component-library.git"
},
"dependencies": {
"@babel/cli": "^7.21.5",
+ "@babel/core": "^7.26.0",
+ "@babel/preset-env": "^7.26.0",
+ "@babel/preset-react": "^7.26.3",
"@hookform/resolvers": "^3.9.0",
"@splidejs/react-splide": "^0.7.12",
"axios": "^1.7.2",
"babel-plugin-import": "^1.13.8",
+ "babel-plugin-styled-components": "^2.1.4",
+ "cross-env": "^7.0.3",
"lazysizes": "^5.3.2",
"lodash": "^4.17.11",
"moment": "^2.29.4",
@@ -59,7 +212,9 @@
"nth-check": "2.0.1"
},
"scripts": {
- "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js",
+ "build": "rm -rf dist && yarn build:cjs && yarn build:esm",
+ "build:cjs": "cross-env MODULE_FORMAT=cjs NODE_ENV=production babel src --out-dir dist/cjs --copy-files --ignore __tests__,spec.js,test.js",
+ "build:esm": "cross-env MODULE_FORMAT=esm NODE_ENV=production babel src --out-dir dist/esm --copy-files --ignore __tests__,spec.js,test.js && node scripts/write-esm-package-json.js",
"test:unit": "yarn run jest",
"test:unit:update": "yarn jest -u",
"styleguide": "cross-env FAST_REFRESH=false styleguidist server",
@@ -70,7 +225,9 @@
"test:e2e:local": "export NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e",
"lint": "eslint src",
"lint-fix": "yarn lint --fix",
- "build-pr": "rm -rf dist && NODE_ENV=development BABEL_ENV=development yarn babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js",
+ "build-pr": "rm -rf dist && yarn build-pr:cjs && yarn build-pr:esm",
+ "build-pr:cjs": "cross-env MODULE_FORMAT=cjs NODE_ENV=development BABEL_ENV=development babel src --out-dir dist/cjs --copy-files --ignore __tests__,spec.js,test.js",
+ "build-pr:esm": "cross-env MODULE_FORMAT=esm NODE_ENV=development BABEL_ENV=development babel src --out-dir dist/esm --copy-files --ignore __tests__,spec.js,test.js && node scripts/write-esm-package-json.js",
"postinstall": "yarn build-pr"
},
"browserslist": {
@@ -88,7 +245,6 @@
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@playwright/test": "^1.38.1",
- "cross-env": "^7.0.3",
"ejs": "^3.1.10",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.0",
@@ -98,7 +254,6 @@
"eslint-plugin-react-hooks": "^4.6.0",
"jest": "^26.1.0",
"jest-styled-components": "^7.1.1",
- "npm-run-all": "^4.1.5",
"prettier": "^2.8.8",
"react-styleguidist": "^11.1.7",
"react-test-renderer": "^17.0.2",
diff --git a/scripts/write-esm-package-json.js b/scripts/write-esm-package-json.js
new file mode 100644
index 000000000..7818f8a2c
--- /dev/null
+++ b/scripts/write-esm-package-json.js
@@ -0,0 +1,7 @@
+const fs = require('fs');
+const path = require('path');
+
+const target = path.join(__dirname, '..', 'dist', 'esm', 'package.json');
+
+fs.mkdirSync(path.dirname(target), { recursive: true });
+fs.writeFileSync(target, `${JSON.stringify({ type: 'module' }, null, 2)}\n`);
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
new file mode 100644
index 000000000..d47c9888f
--- /dev/null
+++ b/src/atoms.js
@@ -0,0 +1,8 @@
+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/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;
+ }
+}
+