From 167a2babb233cff6fa61ed5d14f140114bfe35e9 Mon Sep 17 00:00:00 2001 From: Ryan McCombe Date: Fri, 30 Jul 2021 11:42:55 +0100 Subject: [PATCH 1/3] Make mobile divider optional --- package.json | 2 +- .../psammead-section-label/CHANGELOG.md | 1 + .../psammead-section-label/README.md | 22 +++++++++++++++++++ .../psammead-section-label/package.json | 2 +- .../psammead-section-label/src/index.jsx | 20 ++++++++++++++--- .../src/index.stories.jsx | 3 +++ .../psammead-section-label/src/index.test.jsx | 12 ++++++++++ 7 files changed, 57 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 31bcb5f047..45bc9f21d1 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "@bbc/psammead-play-button": "3.0.22", "@bbc/psammead-rich-text-transforms": "2.0.6", "@bbc/psammead-script-link": "3.0.20", - "@bbc/psammead-section-label": "7.0.20", + "@bbc/psammead-section-label": "7.1.0", "@bbc/psammead-social-embed": "3.1.16", "@bbc/psammead-story-promo": "8.0.21", "@bbc/psammead-story-promo-list": "6.0.19", diff --git a/packages/components/psammead-section-label/CHANGELOG.md b/packages/components/psammead-section-label/CHANGELOG.md index b5de6acf8d..fb22b38e9b 100644 --- a/packages/components/psammead-section-label/CHANGELOG.md +++ b/packages/components/psammead-section-label/CHANGELOG.md @@ -3,6 +3,7 @@ | Version | Description | |---------|-------------| +| 7.1.0 | [PR#?](https://github.com/bbc/psammead/pull/?) Allows the bar to be toggled off on mobile | | 7.0.20 | [PR#4497](https://github.com/bbc/psammead/pull/4497) Bump psammead-styles | | 7.0.19 | [PR#4486](https://github.com/bbc/psammead/pull/4486) upgrade minor/patch dependencies | | 7.0.17 | [PR#4420](https://github.com/bbc/psammead/pull/4420) bumps 3rd-party dependencies | diff --git a/packages/components/psammead-section-label/README.md b/packages/components/psammead-section-label/README.md index a2f10d5080..df884683b0 100644 --- a/packages/components/psammead-section-label/README.md +++ b/packages/components/psammead-section-label/README.md @@ -18,6 +18,7 @@ The only provided child should be the title for the section, provided as a _stri | Argument | Type | Required | Default | Example | | --------- | ---- | -------- | ------- | ------- | | bar | boolean | no | `true` | `false` | +| mobileDivider | boolean | no | `true` | `false` | | visuallyHidden | boolean | no | `false` | `true` | | children | string | yes | N/A | `'Most Read'` | | dir | string | no | `'ltr'` | `'rtl'` | @@ -70,6 +71,27 @@ const WrappingComponent = () => ( ); ``` +On mobile, this component places a dividing line above the title. This can be disabled by setting the `mobileDivider` prop to `false`: + +```jsx +import SectionLabel from '@bbc/psammead-section-label'; +import { latin } from '@bbc/gel-foundations/scripts'; + +const WrappingComponent = () => ( +
+ + Example section + +
+); +``` + You can also visually hide the SectionLabel for all breakpoints by adding the `visuallyHidden` prop: ```jsx diff --git a/packages/components/psammead-section-label/package.json b/packages/components/psammead-section-label/package.json index ea24261163..85ad75d46d 100644 --- a/packages/components/psammead-section-label/package.json +++ b/packages/components/psammead-section-label/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-section-label", - "version": "7.0.20", + "version": "7.1.0", "description": "React styled component for a section label", "main": "dist/index.js", "module": "esm/index.js", diff --git a/packages/components/psammead-section-label/src/index.jsx b/packages/components/psammead-section-label/src/index.jsx index 86dd9bfdeb..e72515ba75 100644 --- a/packages/components/psammead-section-label/src/index.jsx +++ b/packages/components/psammead-section-label/src/index.jsx @@ -20,15 +20,25 @@ const Bar = styled.div` @media screen and (-ms-high-contrast: active) { border-color: windowText; } +`; + +const DesktopBar = styled(Bar)` + display: none; @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { + display: block; position: absolute; left: 0; right: 0; /* Placing bar at the vertical midpoint of the section title */ - top: ${({ script }) => - 0.5 + script.doublePica.groupD.lineHeight / 2 / 16}rem; + top: ${({ script }) => 0.5 + script.doublePica.groupD.lineHeight / 32}rem; + } +`; + +const MobileBar = styled(Bar)` + @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { + display: none; } `; @@ -71,6 +81,7 @@ const Heading = styled.h2` const SectionLabel = ({ bar, + mobileDivider, children: title, dir, href, @@ -84,7 +95,8 @@ const SectionLabel = ({ ...props }) => ( - {bar && } + {bar && } + {mobileDivider && } {linkText && href ? ( { , ); + shouldMatchSnapshot( + 'should render correctly with mobileDivider set to false', + + This is text in a SectionLabel, and there is no mobile divider + , + ); + shouldMatchSnapshot( 'should render correctly with explicit text direction', Date: Fri, 30 Jul 2021 11:44:21 +0100 Subject: [PATCH 2/3] Snappy bois --- .../src/__snapshots__/index.test.jsx.snap | 984 +++++++++++++----- 1 file changed, 740 insertions(+), 244 deletions(-) diff --git a/packages/components/psammead-section-label/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-section-label/src/__snapshots__/index.test.jsx.snap index b904e92373..97c1522ee2 100644 --- a/packages/components/psammead-section-label/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-section-label/src/__snapshots__/index.test.jsx.snap @@ -28,11 +28,28 @@ exports[`SectionLabel When hideSectionHeader is true should add styling to hide } .emotion-2 { + border-top: 0.0625rem solid #AEAEB5; + z-index: -1; +} + +@media screen and (-ms-high-contrast: active) { + .emotion-2 { + border-color: windowText; + } +} + +@media (min-width: 37.5rem) { + .emotion-2 { + display: none; + } +} + +.emotion-4 { margin: 0; padding: 0; } -.emotion-4 { +.emotion-6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -42,7 +59,7 @@ exports[`SectionLabel When hideSectionHeader is true should add styling to hide flex-direction: column; } -.emotion-6 { +.emotion-8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -62,7 +79,7 @@ exports[`SectionLabel When hideSectionHeader is true should add styling to hide } @media (min-width: 37.5rem) { - .emotion-6 { + .emotion-8 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -70,7 +87,7 @@ exports[`SectionLabel When hideSectionHeader is true should add styling to hide } } -.emotion-8 { +.emotion-10 { font-size: 1.125rem; line-height: 1.375rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -90,27 +107,27 @@ exports[`SectionLabel When hideSectionHeader is true should add styling to hide } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-8 { + .emotion-10 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-10 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-10 { margin: 0; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-10 { padding-right: 1rem; } } @@ -119,17 +136,20 @@ exports[`SectionLabel When hideSectionHeader is true should add styling to hide
-

+

@@ -165,6 +185,7 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] = .emotion-2 { border-top: 0.0625rem solid #AEAEB5; z-index: -1; + display: none; } @media screen and (-ms-high-contrast: active) { @@ -175,6 +196,7 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] = @media (min-width: 37.5rem) { .emotion-2 { + display: block; position: absolute; left: 0; right: 0; @@ -183,23 +205,40 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] = } .emotion-4 { + border-top: 0.0625rem solid #AEAEB5; + z-index: -1; +} + +@media screen and (-ms-high-contrast: active) { + .emotion-4 { + border-color: windowText; + } +} + +@media (min-width: 37.5rem) { + .emotion-4 { + display: none; + } +} + +.emotion-6 { margin: 0; padding: 0; } -.emotion-6 { +.emotion-8 { color: #222222; -webkit-text-decoration: none; text-decoration: none; } -.emotion-6:focus, -.emotion-6:hover { +.emotion-8:focus, +.emotion-8:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.emotion-8 { +.emotion-10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -209,7 +248,7 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] = flex-direction: column; } -.emotion-10 { +.emotion-12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -229,7 +268,7 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] = } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-12 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -237,7 +276,7 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] = } } -.emotion-12 { +.emotion-14 { font-size: 1.125rem; line-height: 1.375rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -257,32 +296,32 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] = } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-12 { + .emotion-14 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-12 { + .emotion-14 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-12 { + .emotion-14 { margin: 0; } } @media (min-width: 37.5rem) { - .emotion-12 { + .emotion-14 { padding-right: 1rem; } } -.emotion-14 { +.emotion-16 { font-size: 0.9375rem; line-height: 1.125rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -304,21 +343,21 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] = } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-14 { + .emotion-16 { font-size: 0.9375rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-14 { + .emotion-16 { font-size: 0.875rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-14 { + .emotion-16 { margin: 0; } } @@ -330,23 +369,26 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] =
-

+

@@ -354,7 +396,7 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] =
-

+

@@ -579,7 +643,7 @@ exports[`SectionLabel With bar With linking title should render correctly with a
-

+

@@ -804,7 +890,7 @@ exports[`SectionLabel With bar With linking title should render correctly with e
-

+

@@ -1029,7 +1137,7 @@ exports[`SectionLabel With bar With linking title should render correctly with e
-

+

@@ -1223,6 +1353,7 @@ exports[`SectionLabel With bar With plain title should render correctly with ara .emotion-2 { border-top: 0.0625rem solid #AEAEB5; z-index: -1; + display: none; } @media screen and (-ms-high-contrast: active) { @@ -1233,6 +1364,7 @@ exports[`SectionLabel With bar With plain title should render correctly with ara @media (min-width: 37.5rem) { .emotion-2 { + display: block; position: absolute; left: 0; right: 0; @@ -1241,11 +1373,28 @@ exports[`SectionLabel With bar With plain title should render correctly with ara } .emotion-4 { + border-top: 0.0625rem solid #AEAEB5; + z-index: -1; +} + +@media screen and (-ms-high-contrast: active) { + .emotion-4 { + border-color: windowText; + } +} + +@media (min-width: 37.5rem) { + .emotion-4 { + display: none; + } +} + +.emotion-6 { margin: 0; padding: 0; } -.emotion-6 { +.emotion-8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1255,7 +1404,7 @@ exports[`SectionLabel With bar With plain title should render correctly with ara flex-direction: column; } -.emotion-8 { +.emotion-10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1275,7 +1424,7 @@ exports[`SectionLabel With bar With plain title should render correctly with ara } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-10 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -1283,7 +1432,7 @@ exports[`SectionLabel With bar With plain title should render correctly with ara } } -.emotion-10 { +.emotion-12 { font-size: 1.25rem; line-height: 1.75rem; font-family: "BBC Reith Qalam",Arial,Verdana,Geneva,Helvetica,sans-serif; @@ -1303,27 +1452,27 @@ exports[`SectionLabel With bar With plain title should render correctly with ara } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-12 { font-size: 1.25rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-12 { font-size: 1.5rem; line-height: 2rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-12 { margin: 0; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-12 { padding-left: 1rem; } } @@ -1335,17 +1484,20 @@ exports[`SectionLabel With bar With plain title should render correctly with ara
-

+

@@ -1381,6 +1533,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp .emotion-2 { border-top: 0.0625rem solid #AEAEB5; z-index: -1; + display: none; } @media screen and (-ms-high-contrast: active) { @@ -1391,6 +1544,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp @media (min-width: 37.5rem) { .emotion-2 { + display: block; position: absolute; left: 0; right: 0; @@ -1399,11 +1553,28 @@ exports[`SectionLabel With bar With plain title should render correctly with exp } .emotion-4 { + border-top: 0.0625rem solid #AEAEB5; + z-index: -1; +} + +@media screen and (-ms-high-contrast: active) { + .emotion-4 { + border-color: windowText; + } +} + +@media (min-width: 37.5rem) { + .emotion-4 { + display: none; + } +} + +.emotion-6 { margin: 0; padding: 0; } -.emotion-6 { +.emotion-8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1413,7 +1584,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp flex-direction: column; } -.emotion-8 { +.emotion-10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1433,7 +1604,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-10 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -1441,7 +1612,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp } } -.emotion-10 { +.emotion-12 { font-size: 1.125rem; line-height: 1.375rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -1461,27 +1632,27 @@ exports[`SectionLabel With bar With plain title should render correctly with exp } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-12 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-12 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-12 { margin: 0; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-12 { padding-right: 1rem; } } @@ -1493,17 +1664,20 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
-

+

@@ -1539,6 +1713,187 @@ exports[`SectionLabel With bar With plain title should render correctly with exp .emotion-2 { border-top: 0.0625rem solid #AEAEB5; z-index: -1; + display: none; +} + +@media screen and (-ms-high-contrast: active) { + .emotion-2 { + border-color: windowText; + } +} + +@media (min-width: 37.5rem) { + .emotion-2 { + display: block; + position: absolute; + left: 0; + right: 0; + top: 1.375rem; + } +} + +.emotion-4 { + border-top: 0.0625rem solid #AEAEB5; + z-index: -1; +} + +@media screen and (-ms-high-contrast: active) { + .emotion-4 { + border-color: windowText; + } +} + +@media (min-width: 37.5rem) { + .emotion-4 { + display: none; + } +} + +.emotion-6 { + margin: 0; + padding: 0; +} + +.emotion-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.emotion-10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex-flow: row nowrap; + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + min-height: 2.75rem; + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; +} + +@media (min-width: 37.5rem) { + .emotion-10 { + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + } +} + +.emotion-12 { + font-size: 1.125rem; + line-height: 1.375rem; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-weight: 400; + font-style: normal; + background-color: #FDFDFD; + margin: 1rem 0; + padding-right: 0.5rem; + 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: 20rem) and (max-width: 37.4375rem) { + .emotion-12 { + font-size: 1.25rem; + line-height: 1.5rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-12 { + font-size: 1.5rem; + line-height: 1.75rem; + } +} + +@media (min-width: 37.5rem) { + .emotion-12 { + margin: 0; + } +} + +@media (min-width: 37.5rem) { + .emotion-12 { + padding-right: 1rem; + } +} + +
+
+
+
+

+ + + + This is text in a SectionLabel, and there is a bar over to the right + + + +

+
+
+`; + +exports[`SectionLabel With bar With plain title should render correctly with mobileDivider set to false 1`] = ` +.emotion-0 { + position: relative; + z-index: 0; + color: #3F3F42; + margin-top: 2rem; +} + +@media (min-width: 37.5rem) { + .emotion-0 { + margin-top: 1.5rem; + } +} + +@media (min-width: 63rem) { + .emotion-0 { + margin-bottom: 1.5rem; + } +} + +.emotion-2 { + border-top: 0.0625rem solid #AEAEB5; + z-index: -1; + display: none; } @media screen and (-ms-high-contrast: active) { @@ -1549,6 +1904,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp @media (min-width: 37.5rem) { .emotion-2 { + display: block; position: absolute; left: 0; right: 0; @@ -1665,7 +2021,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp dir="ltr" id="test-section-label" > - This is text in a SectionLabel, and there is a bar over to the right + This is text in a SectionLabel, and there is no mobile divider @@ -1695,11 +2051,28 @@ exports[`SectionLabel With heading overriden should render a strong element inst } .emotion-2 { + border-top: 0.0625rem solid #AEAEB5; + z-index: -1; +} + +@media screen and (-ms-high-contrast: active) { + .emotion-2 { + border-color: windowText; + } +} + +@media (min-width: 37.5rem) { + .emotion-2 { + display: none; + } +} + +.emotion-4 { margin: 0; padding: 0; } -.emotion-4 { +.emotion-6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1709,7 +2082,7 @@ exports[`SectionLabel With heading overriden should render a strong element inst flex-direction: column; } -.emotion-6 { +.emotion-8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1729,7 +2102,7 @@ exports[`SectionLabel With heading overriden should render a strong element inst } @media (min-width: 37.5rem) { - .emotion-6 { + .emotion-8 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -1737,7 +2110,7 @@ exports[`SectionLabel With heading overriden should render a strong element inst } } -.emotion-8 { +.emotion-10 { font-size: 1.125rem; line-height: 1.375rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -1757,27 +2130,27 @@ exports[`SectionLabel With heading overriden should render a strong element inst } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-8 { + .emotion-10 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-10 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-10 { margin: 0; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-10 { padding-right: 1rem; } } @@ -1786,17 +2159,20 @@ exports[`SectionLabel With heading overriden should render a strong element inst
- + @@ -1830,23 +2206,40 @@ exports[`SectionLabel Without bar With linking title should render correctly 1`] } .emotion-2 { + border-top: 0.0625rem solid #AEAEB5; + z-index: -1; +} + +@media screen and (-ms-high-contrast: active) { + .emotion-2 { + border-color: windowText; + } +} + +@media (min-width: 37.5rem) { + .emotion-2 { + display: none; + } +} + +.emotion-4 { margin: 0; padding: 0; } -.emotion-4 { +.emotion-6 { color: #222222; -webkit-text-decoration: none; text-decoration: none; } -.emotion-4:focus, -.emotion-4:hover { +.emotion-6:focus, +.emotion-6:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.emotion-6 { +.emotion-8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1856,7 +2249,7 @@ exports[`SectionLabel Without bar With linking title should render correctly 1`] flex-direction: column; } -.emotion-8 { +.emotion-10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1876,7 +2269,7 @@ exports[`SectionLabel Without bar With linking title should render correctly 1`] } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-10 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -1884,7 +2277,7 @@ exports[`SectionLabel Without bar With linking title should render correctly 1`] } } -.emotion-10 { +.emotion-12 { font-size: 1.125rem; line-height: 1.375rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -1904,32 +2297,32 @@ exports[`SectionLabel Without bar With linking title should render correctly 1`] } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-12 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-12 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-12 { margin: 0; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-12 { padding-right: 1rem; } } -.emotion-12 { +.emotion-14 { font-size: 0.9375rem; line-height: 1.125rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -1951,21 +2344,21 @@ exports[`SectionLabel Without bar With linking title should render correctly 1`] } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-12 { + .emotion-14 { font-size: 0.9375rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-12 { + .emotion-14 { font-size: 0.875rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-12 { + .emotion-14 { margin: 0; } } @@ -1974,23 +2367,26 @@ exports[`SectionLabel Without bar With linking title should render correctly 1`]
-

+

@@ -1998,7 +2394,7 @@ exports[`SectionLabel Without bar With linking title should render correctly 1`]
-

+

@@ -2200,7 +2616,7 @@ exports[`SectionLabel Without bar With linking title should render correctly wit
-

+

@@ -2402,7 +2838,7 @@ exports[`SectionLabel Without bar With linking title should render correctly wit