From d08cce55a497bab3221663662f65814fabfc6250 Mon Sep 17 00:00:00 2001 From: Roy Johnson Date: Mon, 6 May 2024 16:44:21 -0500 Subject: [PATCH] Fix header and list-of-links structure in footer (#2204) * Use heading elements for footer headings [DISCO-44] * Structure list of links in footer as lists * Add key * No bullets in footer link lists; heading roles for Attribution/Citation headings * Bizarre losses of code coverage * Code Runner test --- src/app/components/Footer/index.tsx | 74 +- src/app/components/Footer/styled.tsx | 19 +- .../__snapshots__/routes.spec.tsx.snap | 4 +- .../content/components/Attribution.spec.tsx | 12 + .../__snapshots__/Attribution.spec.tsx.snap | 1890 ++++++++++++++++- .../__snapshots__/Content.spec.tsx.snap | 646 +++--- .../__snapshots__/Home.spec.tsx.snap | 320 +-- .../__snapshots__/ErrorBoundary.spec.tsx.snap | 640 +++--- src/app/errors/routes.ts | 21 +- src/app/messages/en/attributionText.ts | 4 +- src/app/navigation/utils.spec.ts | 4 +- 11 files changed, 2892 insertions(+), 742 deletions(-) diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx index 1bdaf7aa04..2e2f4c984c 100644 --- a/src/app/components/Footer/index.tsx +++ b/src/app/components/Footer/index.tsx @@ -72,18 +72,28 @@ const SocialIconMessage: React.FunctionComponent<{ ); +function LinkList({children}: React.PropsWithChildren<{}>) { + return ( + + {React.Children.toArray(children).map((c, i) =>
  • {c}
    • )} +     + ); +} + // tslint:disable-next-line:variable-name const Column1 = () => ( - - - + + + + + ); @@ -91,14 +101,16 @@ const Column1 = () => ( const Column2 = () => ( - - - + + + + + ); @@ -106,19 +118,21 @@ const Column2 = () => ( const Column3 = () => ( - - - - - - - + + + + + + + + + ); @@ -176,7 +190,7 @@ const Footer = ({ - + diff --git a/src/app/components/Footer/styled.tsx b/src/app/components/Footer/styled.tsx index 473df44fbc..5ac4d475ba 100644 --- a/src/app/components/Footer/styled.tsx +++ b/src/app/components/Footer/styled.tsx @@ -165,8 +165,9 @@ export const TopBoxed = styled.div` `; // tslint:disable-next-line:variable-name -export const Heading = styled.div` +export const Heading = styled.h2` grid-area: headline; + margin: 0; @media (min-width: ${desktopMinWidth}em) { font-size: 2.4rem; @@ -275,11 +276,12 @@ export const Column3 = styled.div` `; // tslint:disable-next-line:variable-name -export const ColumnHeading = styled.div` +export const ColumnHeading = styled.h3` font-size: 1.8rem; font-weight: bold; letter-spacing: -0.072rem; line-height: normal; + margin: 0; @media (max-width: ${mobileMinWidth}em) { line-height: 4.5rem; @@ -344,15 +346,26 @@ export const Copyrights = styled.div` `; // tslint:disable-next-line:variable-name -export const Social = styled.ul` +export const Social = styled.menu` align-items: center; display: grid; grid-auto-flow: column; grid-gap: 1rem; justify-content: end; + list-style: none; overflow: visible; `; +// tslint:disable-next-line:variable-name +export const LinkListWrapper = styled.menu` + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 0.5rem; + list-style: none; +`; + // tslint:disable-next-line:variable-name const InnerSocialIcon = styled.a` ${columnLink} diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap index f17897d55f..aecb785d56 100644 --- a/src/app/content/__snapshots__/routes.spec.tsx.snap +++ b/src/app/content/__snapshots__/routes.spec.tsx.snap @@ -984,7 +984,7 @@ Array [ and you must attribute OpenStax.

    -Attribution information +Attribution information
    • If you are redistributing all or part of this book in a print format, @@ -1002,7 +1002,7 @@ Array [
    -Citation information +Citation information
    • Use the information below to generate a citation. We recommend using a diff --git a/src/app/content/components/Attribution.spec.tsx b/src/app/content/components/Attribution.spec.tsx index 98a1a4a90c..8aeddd63e4 100644 --- a/src/app/content/components/Attribution.spec.tsx +++ b/src/app/content/components/Attribution.spec.tsx @@ -199,5 +199,17 @@ describe('Attribution', () => { const component = renderer.create(render()); expect(component).toMatchSnapshot(); }); + + it('renders CodeRunnerNote when slug includes python', async() => { + const saveSlug = mockCmsBook.meta.slug; + + mockCmsBook.meta.slug = 'programming-python'; + store.dispatch( + actions.receiveBook({...formatBookData(book, mockCmsBook), id: '1b4ee0ce-ee89-44fa-a5e7-a0db9f0c94b1'}) + ); + const component = renderer.create(render()); + expect(component).toMatchSnapshot(); + mockCmsBook.meta.slug = saveSlug; + }); }); }); diff --git a/src/app/content/components/__snapshots__/Attribution.spec.tsx.snap b/src/app/content/components/__snapshots__/Attribution.spec.tsx.snap index a6c9fbb626..db09627c42 100644 --- a/src/app/content/components/__snapshots__/Attribution.spec.tsx.snap +++ b/src/app/content/components/__snapshots__/Attribution.spec.tsx.snap @@ -1,5 +1,1879 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Attribution in browser renders CodeRunnerNote when slug includes python 1`] = ` +.c5 { + display: inline-block; + vertical-align: -.125em; + overflow: hidden; +} + +.c5 { + display: inline-block; + vertical-align: -.125em; + overflow: hidden; +} + +.c5 { + display: inline-block; + vertical-align: -.125em; + overflow: hidden; +} + +.c5 { + display: inline-block; + vertical-align: -.125em; + overflow: hidden; +} + +.c5 { + display: inline-block; + vertical-align: -.125em; + overflow: hidden; +} + +.c5 { + display: inline-block; + vertical-align: -.125em; + overflow: hidden; +} + +.c5 { + display: inline-block; + vertical-align: -.125em; + overflow: hidden; +} + +.c5 { + display: inline-block; + vertical-align: -.125em; + overflow: hidden; +} + +.c5 { + display: inline-block; + vertical-align: -.125em; + overflow: hidden; +} + +.c5 { + display: inline-block; + vertical-align: -.125em; + overflow: hidden; +} + +.c5 { + display: inline-block; + vertical-align: -.125em; + overflow: hidden; +} + +.c7 { + height: 1.7rem; + width: 1.7rem; +} + +.c7 { + height: 1.7rem; + width: 1.7rem; +} + +.c7 { + height: 1.7rem; + width: 1.7rem; +} + +.c7 { + height: 1.7rem; + width: 1.7rem; +} + +.c7 { + height: 1.7rem; + width: 1.7rem; +} + +.c7 { + height: 1.7rem; + width: 1.7rem; +} + +.c7 { + height: 1.7rem; + width: 1.7rem; +} + +.c7 { + height: 1.7rem; + width: 1.7rem; +} + +.c7 { + height: 1.7rem; + width: 1.7rem; +} + +.c7 { + height: 1.7rem; + width: 1.7rem; +} + +.c7 { + height: 1.7rem; + width: 1.7rem; +} + +.c10 { + height: 1.7rem; + width: 1.7rem; +} + +.c10 { + height: 1.7rem; + width: 1.7rem; +} + +.c10 { + height: 1.7rem; + width: 1.7rem; +} + +.c10 { + height: 1.7rem; + width: 1.7rem; +} + +.c10 { + height: 1.7rem; + width: 1.7rem; +} + +.c10 { + height: 1.7rem; + width: 1.7rem; +} + +.c10 { + height: 1.7rem; + width: 1.7rem; +} + +.c10 { + height: 1.7rem; + width: 1.7rem; +} + +.c10 { + height: 1.7rem; + width: 1.7rem; +} + +.c10 { + height: 1.7rem; + width: 1.7rem; +} + +.c10 { + height: 1.7rem; + width: 1.7rem; +} + +.c2 { + list-style: none; + cursor: pointer; +} + +.c2::before { + display: none; +} + +.c2::-moz-list-bullet { + list-style-type: none; +} + +.c2::-webkit-details-marker { + display: none; +} + +.c2 { + list-style: none; + cursor: pointer; +} + +.c2::before { + display: none; +} + +.c2::-moz-list-bullet { + list-style-type: none; +} + +.c2::-webkit-details-marker { + display: none; +} + +.c2 { + list-style: none; + cursor: pointer; +} + +.c2::before { + display: none; +} + +.c2::-moz-list-bullet { + list-style-type: none; +} + +.c2::-webkit-details-marker { + display: none; +} + +.c2 { + list-style: none; + cursor: pointer; +} + +.c2::before { + display: none; +} + +.c2::-moz-list-bullet { + list-style-type: none; +} + +.c2::-webkit-details-marker { + display: none; +} + +.c2 { + list-style: none; + cursor: pointer; +} + +.c2::before { + display: none; +} + +.c2::-moz-list-bullet { + list-style-type: none; +} + +.c2::-webkit-details-marker { + display: none; +} + +.c2 { + list-style: none; + cursor: pointer; +} + +.c2::before { + display: none; +} + +.c2::-moz-list-bullet { + list-style-type: none; +} + +.c2::-webkit-details-marker { + display: none; +} + +.c2 { + list-style: none; + cursor: pointer; +} + +.c2::before { + display: none; +} + +.c2::-moz-list-bullet { + list-style-type: none; +} + +.c2::-webkit-details-marker { + display: none; +} + +.c2 { + list-style: none; + cursor: pointer; +} + +.c2::before { + display: none; +} + +.c2::-moz-list-bullet { + list-style-type: none; +} + +.c2::-webkit-details-marker { + display: none; +} + +.c2 { + list-style: none; + cursor: pointer; +} + +.c2::before { + display: none; +} + +.c2::-moz-list-bullet { + list-style-type: none; +} + +.c2::-webkit-details-marker { + display: none; +} + +.c2 { + list-style: none; + cursor: pointer; +} + +.c2::before { + display: none; +} + +.c2::-moz-list-bullet { + list-style-type: none; +} + +.c2::-webkit-details-marker { + display: none; +} + +.c2 { + list-style: none; + cursor: pointer; +} + +.c2::before { + display: none; +} + +.c2::-moz-list-bullet { + list-style-type: none; +} + +.c2::-webkit-details-marker { + display: none; +} + +.c8 { + margin-left: -0.3rem; +} + +.c8 { + margin-left: -0.3rem; +} + +.c8 { + margin-left: -0.3rem; +} + +.c8 { + margin-left: -0.3rem; +} + +.c8 { + margin-left: -0.3rem; +} + +.c8 { + margin-left: -0.3rem; +} + +.c8 { + margin-left: -0.3rem; +} + +.c8 { + margin-left: -0.3rem; +} + +.c8 { + margin-left: -0.3rem; +} + +.c8 { + margin-left: -0.3rem; +} + +.c8 { + margin-left: -0.3rem; +} + +.c11 { + margin-left: -0.3rem; +} + +.c11 { + margin-left: -0.3rem; +} + +.c11 { + margin-left: -0.3rem; +} + +.c11 { + margin-left: -0.3rem; +} + +.c11 { + margin-left: -0.3rem; +} + +.c11 { + margin-left: -0.3rem; +} + +.c11 { + margin-left: -0.3rem; +} + +.c11 { + margin-left: -0.3rem; +} + +.c11 { + margin-left: -0.3rem; +} + +.c11 { + margin-left: -0.3rem; +} + +.c11 { + margin-left: -0.3rem; +} + +.c4 { + font-weight: 500; + list-style: none; +} + +.c4, +.c4 span { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 a, +.c4 span a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c4 a:hover, +.c4 span a:hover { + color: #0064A0; +} + +.c4:hover, +.c4 span:hover, +.c4:focus, +.c4 span:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + color: #0064A0; +} + +.c4 { + font-weight: 500; + list-style: none; +} + +.c4, +.c4 span { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 a, +.c4 span a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c4 a:hover, +.c4 span a:hover { + color: #0064A0; +} + +.c4:hover, +.c4 span:hover, +.c4:focus, +.c4 span:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + color: #0064A0; +} + +.c4 { + font-weight: 500; + list-style: none; +} + +.c4, +.c4 span { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 a, +.c4 span a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c4 a:hover, +.c4 span a:hover { + color: #0064A0; +} + +.c4:hover, +.c4 span:hover, +.c4:focus, +.c4 span:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + color: #0064A0; +} + +.c4 { + font-weight: 500; + list-style: none; +} + +.c4, +.c4 span { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 a, +.c4 span a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c4 a:hover, +.c4 span a:hover { + color: #0064A0; +} + +.c4:hover, +.c4 span:hover, +.c4:focus, +.c4 span:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + color: #0064A0; +} + +.c4 { + font-weight: 500; + list-style: none; +} + +.c4, +.c4 span { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 a, +.c4 span a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c4 a:hover, +.c4 span a:hover { + color: #0064A0; +} + +.c4:hover, +.c4 span:hover, +.c4:focus, +.c4 span:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + color: #0064A0; +} + +.c4 { + font-weight: 500; + list-style: none; +} + +.c4, +.c4 span { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 a, +.c4 span a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c4 a:hover, +.c4 span a:hover { + color: #0064A0; +} + +.c4:hover, +.c4 span:hover, +.c4:focus, +.c4 span:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + color: #0064A0; +} + +.c4 { + font-weight: 500; + list-style: none; +} + +.c4, +.c4 span { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 a, +.c4 span a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c4 a:hover, +.c4 span a:hover { + color: #0064A0; +} + +.c4:hover, +.c4 span:hover, +.c4:focus, +.c4 span:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + color: #0064A0; +} + +.c4 { + font-weight: 500; + list-style: none; +} + +.c4, +.c4 span { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 a, +.c4 span a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c4 a:hover, +.c4 span a:hover { + color: #0064A0; +} + +.c4:hover, +.c4 span:hover, +.c4:focus, +.c4 span:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + color: #0064A0; +} + +.c4 { + font-weight: 500; + list-style: none; +} + +.c4, +.c4 span { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 a, +.c4 span a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c4 a:hover, +.c4 span a:hover { + color: #0064A0; +} + +.c4:hover, +.c4 span:hover, +.c4:focus, +.c4 span:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + color: #0064A0; +} + +.c4 { + font-weight: 500; + list-style: none; +} + +.c4, +.c4 span { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 a, +.c4 span a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c4 a:hover, +.c4 span a:hover { + color: #0064A0; +} + +.c4:hover, +.c4 span:hover, +.c4:focus, +.c4 span:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + color: #0064A0; +} + +.c4 { + font-weight: 500; + list-style: none; +} + +.c4, +.c4 span { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c4 a, +.c4 span a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c4 a:hover, +.c4 span a:hover { + color: #0064A0; +} + +.c4:hover, +.c4 span:hover, +.c4:focus, +.c4 span:focus { + -webkit-text-decoration: underline; + text-decoration: underline; + color: #0064A0; +} + +.c12 blockquote { + margin-left: 0; +} + +.c12 blockquote { + margin-left: 0; +} + +.c12 blockquote { + margin-left: 0; +} + +.c12 blockquote { + margin-left: 0; +} + +.c12 blockquote { + margin-left: 0; +} + +.c12 blockquote { + margin-left: 0; +} + +.c12 blockquote { + margin-left: 0; +} + +.c12 blockquote { + margin-left: 0; +} + +.c12 blockquote { + margin-left: 0; +} + +.c12 blockquote { + margin-left: 0; +} + +.c12 blockquote { + margin-left: 0; +} + +.c0 { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + box-shadow: 0 -1rem 1rem -1rem rgba(0,0,0,0.1); + margin: 3rem 0 0 0; + min-height: 6rem; + padding: 0 3.2rem; + padding-top: 1.8rem; +} + +.c0[open] > summary .c6 { + display: none; +} + +.c0:not([open]) > summary .c9 { + display: none; +} + +.c0 a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0 a:hover { + color: #0064A0; +} + +.c0 > .c3 { + margin-bottom: 1.8rem; +} + +.c0 li { + margin-bottom: 1rem; + overflow: visible; +} + +.c0 { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + box-shadow: 0 -1rem 1rem -1rem rgba(0,0,0,0.1); + margin: 3rem 0 0 0; + min-height: 6rem; + padding: 0 3.2rem; + padding-top: 1.8rem; +} + +.c0[open] > summary .c6 { + display: none; +} + +.c0:not([open]) > summary .c9 { + display: none; +} + +.c0 a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0 a:hover { + color: #0064A0; +} + +.c0 > .c3 { + margin-bottom: 1.8rem; +} + +.c0 li { + margin-bottom: 1rem; + overflow: visible; +} + +.c0 { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + box-shadow: 0 -1rem 1rem -1rem rgba(0,0,0,0.1); + margin: 3rem 0 0 0; + min-height: 6rem; + padding: 0 3.2rem; + padding-top: 1.8rem; +} + +.c0[open] > summary .c6 { + display: none; +} + +.c0:not([open]) > summary .c9 { + display: none; +} + +.c0 a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0 a:hover { + color: #0064A0; +} + +.c0 > .c3 { + margin-bottom: 1.8rem; +} + +.c0 li { + margin-bottom: 1rem; + overflow: visible; +} + +.c0 { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + box-shadow: 0 -1rem 1rem -1rem rgba(0,0,0,0.1); + margin: 3rem 0 0 0; + min-height: 6rem; + padding: 0 3.2rem; + padding-top: 1.8rem; +} + +.c0[open] > summary .c6 { + display: none; +} + +.c0:not([open]) > summary .c9 { + display: none; +} + +.c0 a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0 a:hover { + color: #0064A0; +} + +.c0 > .c3 { + margin-bottom: 1.8rem; +} + +.c0 li { + margin-bottom: 1rem; + overflow: visible; +} + +.c0 { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + box-shadow: 0 -1rem 1rem -1rem rgba(0,0,0,0.1); + margin: 3rem 0 0 0; + min-height: 6rem; + padding: 0 3.2rem; + padding-top: 1.8rem; +} + +.c0[open] > summary .c6 { + display: none; +} + +.c0:not([open]) > summary .c9 { + display: none; +} + +.c0 a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0 a:hover { + color: #0064A0; +} + +.c0 > .c3 { + margin-bottom: 1.8rem; +} + +.c0 li { + margin-bottom: 1rem; + overflow: visible; +} + +.c0 { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + box-shadow: 0 -1rem 1rem -1rem rgba(0,0,0,0.1); + margin: 3rem 0 0 0; + min-height: 6rem; + padding: 0 3.2rem; + padding-top: 1.8rem; +} + +.c0[open] > summary .c6 { + display: none; +} + +.c0:not([open]) > summary .c9 { + display: none; +} + +.c0 a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0 a:hover { + color: #0064A0; +} + +.c0 > .c3 { + margin-bottom: 1.8rem; +} + +.c0 li { + margin-bottom: 1rem; + overflow: visible; +} + +.c0 { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + box-shadow: 0 -1rem 1rem -1rem rgba(0,0,0,0.1); + margin: 3rem 0 0 0; + min-height: 6rem; + padding: 0 3.2rem; + padding-top: 1.8rem; +} + +.c0[open] > summary .c6 { + display: none; +} + +.c0:not([open]) > summary .c9 { + display: none; +} + +.c0 a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0 a:hover { + color: #0064A0; +} + +.c0 > .c3 { + margin-bottom: 1.8rem; +} + +.c0 li { + margin-bottom: 1rem; + overflow: visible; +} + +.c0 { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + box-shadow: 0 -1rem 1rem -1rem rgba(0,0,0,0.1); + margin: 3rem 0 0 0; + min-height: 6rem; + padding: 0 3.2rem; + padding-top: 1.8rem; +} + +.c0[open] > summary .c6 { + display: none; +} + +.c0:not([open]) > summary .c9 { + display: none; +} + +.c0 a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0 a:hover { + color: #0064A0; +} + +.c0 > .c3 { + margin-bottom: 1.8rem; +} + +.c0 li { + margin-bottom: 1rem; + overflow: visible; +} + +.c0 { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + box-shadow: 0 -1rem 1rem -1rem rgba(0,0,0,0.1); + margin: 3rem 0 0 0; + min-height: 6rem; + padding: 0 3.2rem; + padding-top: 1.8rem; +} + +.c0[open] > summary .c6 { + display: none; +} + +.c0:not([open]) > summary .c9 { + display: none; +} + +.c0 a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0 a:hover { + color: #0064A0; +} + +.c0 > .c3 { + margin-bottom: 1.8rem; +} + +.c0 li { + margin-bottom: 1rem; + overflow: visible; +} + +.c0 { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + box-shadow: 0 -1rem 1rem -1rem rgba(0,0,0,0.1); + margin: 3rem 0 0 0; + min-height: 6rem; + padding: 0 3.2rem; + padding-top: 1.8rem; +} + +.c0[open] > summary .c6 { + display: none; +} + +.c0:not([open]) > summary .c9 { + display: none; +} + +.c0 a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0 a:hover { + color: #0064A0; +} + +.c0 > .c3 { + margin-bottom: 1.8rem; +} + +.c0 li { + margin-bottom: 1rem; + overflow: visible; +} + +.c0 { + color: #424242; + font-size: 1.6rem; + line-height: 2.5rem; + box-shadow: 0 -1rem 1rem -1rem rgba(0,0,0,0.1); + margin: 3rem 0 0 0; + min-height: 6rem; + padding: 0 3.2rem; + padding-top: 1.8rem; +} + +.c0[open] > summary .c6 { + display: none; +} + +.c0:not([open]) > summary .c9 { + display: none; +} + +.c0 a { + color: #027EB5; + cursor: pointer; + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c0 a:hover { + color: #0064A0; +} + +.c0 > .c3 { + margin-bottom: 1.8rem; +} + +.c0 li { + margin-bottom: 1rem; + overflow: visible; +} + +@media screen { + .c4 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c4 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c4 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c4 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c4 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c4 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c4 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c4 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c4 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c4 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c4 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c12 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c12 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c12 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c12 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c12 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c12 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c12 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c12 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c12 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c12 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen { + .c12 { + max-width: 82.5rem; + margin: 0 auto; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + min-height: 4rem; + padding-top: 0.8rem; + } + + .c0 > .c1 { + margin-bottom: 0.8rem; + } +} + +@media print { + .c0 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + min-height: 4rem; + padding-top: 0.8rem; + } + + .c0 > .c1 { + margin-bottom: 0.8rem; + } +} + +@media print { + .c0 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + min-height: 4rem; + padding-top: 0.8rem; + } + + .c0 > .c1 { + margin-bottom: 0.8rem; + } +} + +@media print { + .c0 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + min-height: 4rem; + padding-top: 0.8rem; + } + + .c0 > .c1 { + margin-bottom: 0.8rem; + } +} + +@media print { + .c0 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + min-height: 4rem; + padding-top: 0.8rem; + } + + .c0 > .c1 { + margin-bottom: 0.8rem; + } +} + +@media print { + .c0 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + min-height: 4rem; + padding-top: 0.8rem; + } + + .c0 > .c1 { + margin-bottom: 0.8rem; + } +} + +@media print { + .c0 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + min-height: 4rem; + padding-top: 0.8rem; + } + + .c0 > .c1 { + margin-bottom: 0.8rem; + } +} + +@media print { + .c0 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + min-height: 4rem; + padding-top: 0.8rem; + } + + .c0 > .c1 { + margin-bottom: 0.8rem; + } +} + +@media print { + .c0 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + min-height: 4rem; + padding-top: 0.8rem; + } + + .c0 > .c1 { + margin-bottom: 0.8rem; + } +} + +@media print { + .c0 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + min-height: 4rem; + padding-top: 0.8rem; + } + + .c0 > .c1 { + margin-bottom: 0.8rem; + } +} + +@media print { + .c0 { + display: none; + } +} + +@media screen and (max-width:75em) { + .c0 { + padding: 0 1.6rem; + } +} + +@media screen and (max-width:75em) { + .c0 { + min-height: 4rem; + padding-top: 0.8rem; + } + + .c0 > .c1 { + margin-bottom: 0.8rem; + } +} + +@media print { + .c0 { + display: none; + } +} + +
      + + + + + Citation/Attribution + + +
      This book may not be used in the training of large language models or otherwise be ingested into large language models or generative AI offerings without OpenStax's permission.

      +

      + Want to cite, share, or modify this book? This book uses the + + Sweet License 1.0 + and you must attribute The Michelson 20MM Foundation. Changes were made to the original material, including updates to art, structure, and other content updates. +

      + +Attribution information + + +Citation information + + +

      + © Jun 21, 2012 The Michelson 20MM Foundation. The OpenStax name, OpenStax logo, OpenStax book covers, OpenStax CNX name, and OpenStax CNX logo + are not subject to the Creative Commons license and may not be reproduced without the prior and express written + consent of Rice University. +

      +", + } + } + /> + +
      + +
      +`; + exports[`Attribution in browser renders default attribution 1`] = ` .c5 { display: inline-block; @@ -1166,7 +3040,7 @@ exports[`Attribution in browser renders default attribution 1`] = ` and you must attribute OpenStax.

      -Attribution information +Attribution information
      • If you are redistributing all or part of this book in a print format, @@ -1184,7 +3058,7 @@ exports[`Attribution in browser renders default attribution 1`] = `
      -Citation information +Citation information
      • Use the information below to generate a citation. We recommend using a @@ -2555,7 +4429,7 @@ exports[`Attribution in browser renders special licensing and attribution for HS . Changes were made to the original material, including updates to art, structure, and other content updates.

        -Attribution information +Attribution information
        • If you are redistributing all or part of this book in a print format, @@ -2573,7 +4447,7 @@ exports[`Attribution in browser renders special licensing and attribution for HS
        -Citation information +Citation information
        • Use the information below to generate a citation. We recommend using a @@ -4260,7 +6134,7 @@ exports[`Attribution in browser renders special licensing and attribution for In and you must attribute The Michelson 20MM Foundation. Changes were made to the original material, including updates to art, structure, and other content updates.

          -Attribution information +Attribution information
          • If you are redistributing all or part of this book in a print format, @@ -4278,7 +6152,7 @@ exports[`Attribution in browser renders special licensing and attribution for In
          -Citation information +Citation information
          • Use the information below to generate a citation. We recommend using a @@ -5808,7 +7682,7 @@ exports[`Attribution in browser renders special licensing and attribution for St . Changes were made to the original material, including updates to art, structure, and other content updates.

            -Attribution information +Attribution information
            • If you are redistributing all or part of this book in a print format, @@ -5826,7 +7700,7 @@ exports[`Attribution in browser renders special licensing and attribution for St
            -Citation information +Citation information
            • Use the information below to generate a citation. We recommend using a diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap index ddb459b632..45359352bf 100644 --- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap +++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap @@ -182,15 +182,15 @@ Array [ overflow: hidden; } -.c108 { +.c109 { height: 1em; } -.c110 { +.c111 { height: 1em; } -.c109 { +.c110 { height: 1em; } @@ -237,6 +237,7 @@ Array [ .c96 { grid-area: headline; + margin: 0; } .c97 { @@ -255,24 +256,24 @@ Array [ color: inherit; } -.c100 { +.c101 { color: #d5d5d5; -webkit-text-decoration: none; text-decoration: none; } -.c100:hover, -.c100:active, -.c100:focus { +.c101:hover, +.c101:active, +.c101:focus { color: inherit; } -.c100:hover { +.c101:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.c111 { +.c112 { color: #d5d5d5; display: inline-grid; grid-auto-flow: column; @@ -280,9 +281,9 @@ Array [ overflow: hidden; } -.c111:hover, -.c111:active, -.c111:focus { +.c112:hover, +.c112:active, +.c112:focus { color: inherit; } @@ -293,14 +294,14 @@ Array [ grid-area: col1; } -.c101 { +.c102 { display: grid; grid-gap: 0.5rem; overflow: visible; grid-area: col2; } -.c102 { +.c103 { display: grid; grid-gap: 0.5rem; overflow: visible; @@ -315,9 +316,10 @@ Array [ -ms-letter-spacing: -0.072rem; letter-spacing: -0.072rem; line-height: normal; + margin: 0; } -.c103 { +.c104 { font-size: 1.2rem; font-weight: normal; -webkit-letter-spacing: normal; @@ -328,7 +330,7 @@ Array [ background-color: #3b3b3b; } -.c104 { +.c105 { max-width: 131rem; -webkit-align-items: center; -webkit-box-align: center; @@ -350,28 +352,28 @@ Array [ overflow: visible; } -.c105 { +.c106 { display: grid; grid-gap: 1rem; overflow: visible; } -.c105 [data-html="copyright"] { +.c106 [data-html="copyright"] { overflow: visible; } -.c105 a { +.c106 a { color: #d5d5d5; overflow: visible; } -.c105 a:hover, -.c105 a:active, -.c105 a:focus { +.c106 a:hover, +.c106 a:active, +.c106 a:focus { color: inherit; } -.c105 sup { +.c106 sup { font-size: 66%; margin-left: 0.1rem; position: relative; @@ -379,7 +381,7 @@ Array [ vertical-align: top; } -.c106 { +.c107 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -391,10 +393,25 @@ Array [ -webkit-justify-content: end; -ms-flex-pack: end; justify-content: end; + list-style: none; overflow: visible; } -.c107 { +.c100 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 0.5rem; + list-style: none; +} + +.c108 { color: #d5d5d5; font-size: 1.6rem; line-height: 2.5rem; @@ -414,13 +431,13 @@ Array [ width: 3rem; } -.c107:hover, -.c107:active, -.c107:focus { +.c108:hover, +.c108:active, +.c108:focus { color: inherit; } -.c112 { +.c113 { height: 4rem; -webkit-transform: translateY(0.2rem); -ms-transform: translateY(0.2rem); @@ -2077,7 +2094,7 @@ li[aria-label="Current Page"] .c60 { } @media (max-width:37.5em) { - .c100 { + .c101 { line-height: 4.5rem; } } @@ -2089,25 +2106,25 @@ li[aria-label="Current Page"] .c60 { } @media (min-width:37.6em) { - .c103 { + .c104 { padding: 2.5rem 0; } } @media (max-width:37.5em) { - .c103 { + .c104 { padding: 1.5rem; } } @media (min-width:37.6em) { - .c104 { + .c105 { grid-auto-flow: column; } } @media (max-width:37.5em) { - .c104 { + .c105 { padding: 0; } } @@ -4300,7 +4317,7 @@ li[aria-label="Current Page"] .c60 { and you must attribute OpenStax.

              -Attribution information +Attribution information
              • If you are redistributing all or part of this book in a print format, @@ -4318,7 +4335,7 @@ li[aria-label="Current Page"] .c60 {
              -Citation information +Citation information
              • Use the information below to generate a citation. We recommend using a @@ -4373,13 +4390,11 @@ li[aria-label="Current Page"] .c60 { @@ -4830,15 +4878,15 @@ Array [ overflow: hidden; } -.c97 { +.c98 { height: 1em; } -.c99 { +.c100 { height: 1em; } -.c98 { +.c99 { height: 1em; } @@ -4885,6 +4933,7 @@ Array [ .c85 { grid-area: headline; + margin: 0; } .c86 { @@ -4903,24 +4952,24 @@ Array [ color: inherit; } -.c89 { +.c90 { color: #d5d5d5; -webkit-text-decoration: none; text-decoration: none; } -.c89:hover, -.c89:active, -.c89:focus { +.c90:hover, +.c90:active, +.c90:focus { color: inherit; } -.c89:hover { +.c90:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.c100 { +.c101 { color: #d5d5d5; display: inline-grid; grid-auto-flow: column; @@ -4928,9 +4977,9 @@ Array [ overflow: hidden; } -.c100:hover, -.c100:active, -.c100:focus { +.c101:hover, +.c101:active, +.c101:focus { color: inherit; } @@ -4941,14 +4990,14 @@ Array [ grid-area: col1; } -.c90 { +.c91 { display: grid; grid-gap: 0.5rem; overflow: visible; grid-area: col2; } -.c91 { +.c92 { display: grid; grid-gap: 0.5rem; overflow: visible; @@ -4963,9 +5012,10 @@ Array [ -ms-letter-spacing: -0.072rem; letter-spacing: -0.072rem; line-height: normal; + margin: 0; } -.c92 { +.c93 { font-size: 1.2rem; font-weight: normal; -webkit-letter-spacing: normal; @@ -4976,7 +5026,7 @@ Array [ background-color: #3b3b3b; } -.c93 { +.c94 { max-width: 131rem; -webkit-align-items: center; -webkit-box-align: center; @@ -4998,28 +5048,28 @@ Array [ overflow: visible; } -.c94 { +.c95 { display: grid; grid-gap: 1rem; overflow: visible; } -.c94 [data-html="copyright"] { +.c95 [data-html="copyright"] { overflow: visible; } -.c94 a { +.c95 a { color: #d5d5d5; overflow: visible; } -.c94 a:hover, -.c94 a:active, -.c94 a:focus { +.c95 a:hover, +.c95 a:active, +.c95 a:focus { color: inherit; } -.c94 sup { +.c95 sup { font-size: 66%; margin-left: 0.1rem; position: relative; @@ -5027,7 +5077,7 @@ Array [ vertical-align: top; } -.c95 { +.c96 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -5039,10 +5089,25 @@ Array [ -webkit-justify-content: end; -ms-flex-pack: end; justify-content: end; + list-style: none; overflow: visible; } -.c96 { +.c89 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 0.5rem; + list-style: none; +} + +.c97 { color: #d5d5d5; font-size: 1.6rem; line-height: 2.5rem; @@ -5062,13 +5127,13 @@ Array [ width: 3rem; } -.c96:hover, -.c96:active, -.c96:focus { +.c97:hover, +.c97:active, +.c97:focus { color: inherit; } -.c101 { +.c102 { height: 4rem; -webkit-transform: translateY(0.2rem); -ms-transform: translateY(0.2rem); @@ -5633,11 +5698,11 @@ Array [ grid-template-columns: 8rem auto auto; } -.c102[open] > summary .c66 { +.c103[open] > summary .c66 { display: none; } -.c102:not([open]) > summary .c68 { +.c103:not([open]) > summary .c68 { display: none; } @@ -6628,7 +6693,7 @@ li[aria-label="Current Page"] .c60 { } @media (max-width:37.5em) { - .c89 { + .c90 { line-height: 4.5rem; } } @@ -6640,25 +6705,25 @@ li[aria-label="Current Page"] .c60 { } @media (min-width:37.6em) { - .c92 { + .c93 { padding: 2.5rem 0; } } @media (max-width:37.5em) { - .c92 { + .c93 { padding: 1.5rem; } } @media (min-width:37.6em) { - .c93 { + .c94 { grid-auto-flow: column; } } @media (max-width:37.5em) { - .c93 { + .c94 { padding: 0; } } @@ -6876,7 +6941,7 @@ li[aria-label="Current Page"] .c60 { } @media screen and (max-width:75em) { - .c102 > .c63 { + .c103 > .c63 { margin-bottom: 0.8rem; } } @@ -8772,13 +8837,11 @@ li[aria-label="Current Page"] .c60 { diff --git a/src/app/developer/components/__snapshots__/Home.spec.tsx.snap b/src/app/developer/components/__snapshots__/Home.spec.tsx.snap index 0764175670..2c81ba1cbf 100644 --- a/src/app/developer/components/__snapshots__/Home.spec.tsx.snap +++ b/src/app/developer/components/__snapshots__/Home.spec.tsx.snap @@ -711,21 +711,21 @@ Array [ , - .c16 { + .c17 { display: inline-block; vertical-align: -.125em; overflow: hidden; } -.c17 { +.c18 { height: 1em; } -.c19 { +.c20 { height: 1em; } -.c18 { +.c19 { height: 1em; } @@ -772,6 +772,7 @@ Array [ .c4 { grid-area: headline; + margin: 0; } .c5 { @@ -790,24 +791,24 @@ Array [ color: inherit; } -.c8 { +.c9 { color: #d5d5d5; -webkit-text-decoration: none; text-decoration: none; } -.c8:hover, -.c8:active, -.c8:focus { +.c9:hover, +.c9:active, +.c9:focus { color: inherit; } -.c8:hover { +.c9:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.c20 { +.c21 { color: #d5d5d5; display: inline-grid; grid-auto-flow: column; @@ -815,9 +816,9 @@ Array [ overflow: hidden; } -.c20:hover, -.c20:active, -.c20:focus { +.c21:hover, +.c21:active, +.c21:focus { color: inherit; } @@ -828,14 +829,14 @@ Array [ grid-area: col1; } -.c9 { +.c10 { display: grid; grid-gap: 0.5rem; overflow: visible; grid-area: col2; } -.c10 { +.c11 { display: grid; grid-gap: 0.5rem; overflow: visible; @@ -850,9 +851,10 @@ Array [ -ms-letter-spacing: -0.072rem; letter-spacing: -0.072rem; line-height: normal; + margin: 0; } -.c11 { +.c12 { font-size: 1.2rem; font-weight: normal; -webkit-letter-spacing: normal; @@ -863,7 +865,7 @@ Array [ background-color: #3b3b3b; } -.c12 { +.c13 { max-width: 131rem; -webkit-align-items: center; -webkit-box-align: center; @@ -885,28 +887,28 @@ Array [ overflow: visible; } -.c13 { +.c14 { display: grid; grid-gap: 1rem; overflow: visible; } -.c13 [data-html="copyright"] { +.c14 [data-html="copyright"] { overflow: visible; } -.c13 a { +.c14 a { color: #d5d5d5; overflow: visible; } -.c13 a:hover, -.c13 a:active, -.c13 a:focus { +.c14 a:hover, +.c14 a:active, +.c14 a:focus { color: inherit; } -.c13 sup { +.c14 sup { font-size: 66%; margin-left: 0.1rem; position: relative; @@ -914,7 +916,7 @@ Array [ vertical-align: top; } -.c14 { +.c15 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -926,10 +928,25 @@ Array [ -webkit-justify-content: end; -ms-flex-pack: end; justify-content: end; + list-style: none; overflow: visible; } -.c15 { +.c8 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 0.5rem; + list-style: none; +} + +.c16 { color: #d5d5d5; font-size: 1.6rem; line-height: 2.5rem; @@ -949,13 +966,13 @@ Array [ width: 3rem; } -.c15:hover, -.c15:active, -.c15:focus { +.c16:hover, +.c16:active, +.c16:focus { color: inherit; } -.c21 { +.c22 { height: 4rem; -webkit-transform: translateY(0.2rem); -ms-transform: translateY(0.2rem); @@ -1046,7 +1063,7 @@ Array [ } @media (max-width:37.5em) { - .c8 { + .c9 { line-height: 4.5rem; } } @@ -1058,25 +1075,25 @@ Array [ } @media (min-width:37.6em) { - .c11 { + .c12 { padding: 2.5rem 0; } } @media (max-width:37.5em) { - .c11 { + .c12 { padding: 1.5rem; } } @media (min-width:37.6em) { - .c12 { + .c13 { grid-auto-flow: column; } } @media (max-width:37.5em) { - .c12 { + .c13 { padding: 0; } } @@ -1094,13 +1111,11 @@ Array [ diff --git a/src/app/errors/components/__snapshots__/ErrorBoundary.spec.tsx.snap b/src/app/errors/components/__snapshots__/ErrorBoundary.spec.tsx.snap index a8d47887f0..a19b9bdb18 100644 --- a/src/app/errors/components/__snapshots__/ErrorBoundary.spec.tsx.snap +++ b/src/app/errors/components/__snapshots__/ErrorBoundary.spec.tsx.snap @@ -68,21 +68,21 @@ Array [ } /> , - .c16 { + .c17 { display: inline-block; vertical-align: -.125em; overflow: hidden; } -.c17 { +.c18 { height: 1em; } -.c19 { +.c20 { height: 1em; } -.c18 { +.c19 { height: 1em; } @@ -129,6 +129,7 @@ Array [ .c4 { grid-area: headline; + margin: 0; } .c5 { @@ -147,24 +148,24 @@ Array [ color: inherit; } -.c8 { +.c9 { color: #d5d5d5; -webkit-text-decoration: none; text-decoration: none; } -.c8:hover, -.c8:active, -.c8:focus { +.c9:hover, +.c9:active, +.c9:focus { color: inherit; } -.c8:hover { +.c9:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.c20 { +.c21 { color: #d5d5d5; display: inline-grid; grid-auto-flow: column; @@ -172,9 +173,9 @@ Array [ overflow: hidden; } -.c20:hover, -.c20:active, -.c20:focus { +.c21:hover, +.c21:active, +.c21:focus { color: inherit; } @@ -185,14 +186,14 @@ Array [ grid-area: col1; } -.c9 { +.c10 { display: grid; grid-gap: 0.5rem; overflow: visible; grid-area: col2; } -.c10 { +.c11 { display: grid; grid-gap: 0.5rem; overflow: visible; @@ -207,9 +208,10 @@ Array [ -ms-letter-spacing: -0.072rem; letter-spacing: -0.072rem; line-height: normal; + margin: 0; } -.c11 { +.c12 { font-size: 1.2rem; font-weight: normal; -webkit-letter-spacing: normal; @@ -220,7 +222,7 @@ Array [ background-color: #3b3b3b; } -.c12 { +.c13 { max-width: 131rem; -webkit-align-items: center; -webkit-box-align: center; @@ -242,28 +244,28 @@ Array [ overflow: visible; } -.c13 { +.c14 { display: grid; grid-gap: 1rem; overflow: visible; } -.c13 [data-html="copyright"] { +.c14 [data-html="copyright"] { overflow: visible; } -.c13 a { +.c14 a { color: #d5d5d5; overflow: visible; } -.c13 a:hover, -.c13 a:active, -.c13 a:focus { +.c14 a:hover, +.c14 a:active, +.c14 a:focus { color: inherit; } -.c13 sup { +.c14 sup { font-size: 66%; margin-left: 0.1rem; position: relative; @@ -271,7 +273,7 @@ Array [ vertical-align: top; } -.c14 { +.c15 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -283,10 +285,25 @@ Array [ -webkit-justify-content: end; -ms-flex-pack: end; justify-content: end; + list-style: none; overflow: visible; } -.c15 { +.c8 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 0.5rem; + list-style: none; +} + +.c16 { color: #d5d5d5; font-size: 1.6rem; line-height: 2.5rem; @@ -306,13 +323,13 @@ Array [ width: 3rem; } -.c15:hover, -.c15:active, -.c15:focus { +.c16:hover, +.c16:active, +.c16:focus { color: inherit; } -.c21 { +.c22 { height: 4rem; -webkit-transform: translateY(0.2rem); -ms-transform: translateY(0.2rem); @@ -403,7 +420,7 @@ Array [ } @media (max-width:37.5em) { - .c8 { + .c9 { line-height: 4.5rem; } } @@ -415,25 +432,25 @@ Array [ } @media (min-width:37.6em) { - .c11 { + .c12 { padding: 2.5rem 0; } } @media (max-width:37.5em) { - .c11 { + .c12 { padding: 1.5rem; } } @media (min-width:37.6em) { - .c12 { + .c13 { grid-auto-flow: column; } } @media (max-width:37.5em) { - .c12 { + .c13 { padding: 0; } } @@ -451,13 +468,11 @@ Array [ @@ -790,21 +838,21 @@ Array [ } /> , - .c16 { + .c17 { display: inline-block; vertical-align: -.125em; overflow: hidden; } -.c17 { +.c18 { height: 1em; } -.c19 { +.c20 { height: 1em; } -.c18 { +.c19 { height: 1em; } @@ -851,6 +899,7 @@ Array [ .c4 { grid-area: headline; + margin: 0; } .c5 { @@ -869,24 +918,24 @@ Array [ color: inherit; } -.c8 { +.c9 { color: #d5d5d5; -webkit-text-decoration: none; text-decoration: none; } -.c8:hover, -.c8:active, -.c8:focus { +.c9:hover, +.c9:active, +.c9:focus { color: inherit; } -.c8:hover { +.c9:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.c20 { +.c21 { color: #d5d5d5; display: inline-grid; grid-auto-flow: column; @@ -894,9 +943,9 @@ Array [ overflow: hidden; } -.c20:hover, -.c20:active, -.c20:focus { +.c21:hover, +.c21:active, +.c21:focus { color: inherit; } @@ -907,14 +956,14 @@ Array [ grid-area: col1; } -.c9 { +.c10 { display: grid; grid-gap: 0.5rem; overflow: visible; grid-area: col2; } -.c10 { +.c11 { display: grid; grid-gap: 0.5rem; overflow: visible; @@ -929,9 +978,10 @@ Array [ -ms-letter-spacing: -0.072rem; letter-spacing: -0.072rem; line-height: normal; + margin: 0; } -.c11 { +.c12 { font-size: 1.2rem; font-weight: normal; -webkit-letter-spacing: normal; @@ -942,7 +992,7 @@ Array [ background-color: #3b3b3b; } -.c12 { +.c13 { max-width: 131rem; -webkit-align-items: center; -webkit-box-align: center; @@ -964,28 +1014,28 @@ Array [ overflow: visible; } -.c13 { +.c14 { display: grid; grid-gap: 1rem; overflow: visible; } -.c13 [data-html="copyright"] { +.c14 [data-html="copyright"] { overflow: visible; } -.c13 a { +.c14 a { color: #d5d5d5; overflow: visible; } -.c13 a:hover, -.c13 a:active, -.c13 a:focus { +.c14 a:hover, +.c14 a:active, +.c14 a:focus { color: inherit; } -.c13 sup { +.c14 sup { font-size: 66%; margin-left: 0.1rem; position: relative; @@ -993,7 +1043,7 @@ Array [ vertical-align: top; } -.c14 { +.c15 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1005,10 +1055,25 @@ Array [ -webkit-justify-content: end; -ms-flex-pack: end; justify-content: end; + list-style: none; overflow: visible; } -.c15 { +.c8 { + margin: 0; + padding: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + gap: 0.5rem; + list-style: none; +} + +.c16 { color: #d5d5d5; font-size: 1.6rem; line-height: 2.5rem; @@ -1028,13 +1093,13 @@ Array [ width: 3rem; } -.c15:hover, -.c15:active, -.c15:focus { +.c16:hover, +.c16:active, +.c16:focus { color: inherit; } -.c21 { +.c22 { height: 4rem; -webkit-transform: translateY(0.2rem); -ms-transform: translateY(0.2rem); @@ -1125,7 +1190,7 @@ Array [ } @media (max-width:37.5em) { - .c8 { + .c9 { line-height: 4.5rem; } } @@ -1137,25 +1202,25 @@ Array [ } @media (min-width:37.6em) { - .c11 { + .c12 { padding: 2.5rem 0; } } @media (max-width:37.5em) { - .c11 { + .c12 { padding: 1.5rem; } } @media (min-width:37.6em) { - .c12 { + .c13 { grid-auto-flow: column; } } @media (max-width:37.5em) { - .c12 { + .c13 { padding: 0; } } @@ -1173,13 +1238,11 @@ Array [ diff --git a/src/app/errors/routes.ts b/src/app/errors/routes.ts index a17277f895..aaf2763fa5 100644 --- a/src/app/errors/routes.ts +++ b/src/app/errors/routes.ts @@ -7,13 +7,15 @@ type Params = { url: string; }; +const loadableOptions = { + loader: () => import(/* webpackChunkName: "LoaderCentered" */ './components/LoaderCentered'), + loading: () => null, + modules: ['LoaderCentered'], + webpack: /* istanbul ignore next */ () => [(require as any).resolveWeak('./components/LoaderCentered')], +}; + export const notFound: Route = { - component: Loadable({ - loader: () => import(/* webpackChunkName: "LoaderCentered" */ './components/LoaderCentered'), - loading: () => null, - modules: ['LoaderCentered'], - webpack: /* istanbul ignore next */ () => [(require as any).resolveWeak('./components/LoaderCentered')], - }), + component: Loadable(loadableOptions), getSearch: (params: Params): string => `path=${params.url}`, getUrl: (_params: Params) => '/error/404', name: 'NotFound', @@ -21,12 +23,7 @@ export const notFound: Route = { }; export const external: Route = { - component: Loadable({ - loader: () => import(/* webpackChunkName: "LoaderCentered" */ './components/LoaderCentered'), - loading: () => null, - modules: ['LoaderCentered'], - webpack: /* istanbul ignore next */ () => [(require as any).resolveWeak('./components/LoaderCentered')], - }), + component: Loadable(loadableOptions), getUrl: (params: Params) => params.url, name: 'External', paths: [':url(/.*)'], diff --git a/src/app/messages/en/attributionText.ts b/src/app/messages/en/attributionText.ts index 1e37b6a091..46f0e614c6 100644 --- a/src/app/messages/en/attributionText.ts +++ b/src/app/messages/en/attributionText.ts @@ -15,7 +15,7 @@ export const defaultText = ` other { Changes were made to the original material, including updates to art, structure, and other content updates.}}

                -Attribution information +Attribution information
                • If you are redistributing all or part of this book in a print format, @@ -33,7 +33,7 @@ export const defaultText = `
                -Citation information +Citation information
                • Use the information below to generate a citation. We recommend using a diff --git a/src/app/navigation/utils.spec.ts b/src/app/navigation/utils.spec.ts index ff5f621d5a..107bbeede5 100644 --- a/src/app/navigation/utils.spec.ts +++ b/src/app/navigation/utils.spec.ts @@ -65,9 +65,9 @@ describe('findRouteMatch', () => { }); it('returns undefined for missing param values', () => { - const location = {pathname: '/with'} as Location; + const location = '/with'; const result = findRouteMatch(routes, location); - expect(result).toEqual({route: routes[1], params: {param: undefined}, state: {}}); + expect(result).toEqual({route: routes[1], params: {param: undefined}, state: false}); }); });