diff --git a/.storybook/pages/ProjectOverview/ProjectOverview.tsx b/.storybook/pages/ProjectOverview/ProjectOverview.tsx index eb85befd4..cbe33ac9e 100644 --- a/.storybook/pages/ProjectOverview/ProjectOverview.tsx +++ b/.storybook/pages/ProjectOverview/ProjectOverview.tsx @@ -55,7 +55,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => { What is this Project About? @@ -66,9 +66,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => { mattis sem turpis id dictum. Volutpat ornare turpis ultrices augue bibendum pellentesque. Habitasse. - + {
+ +
FPO Brand asset
- Estimated schedule: Days 4,5,6 - - } - overline={ - - Overview - + headingSize="headline-sm" + title="Power Focus Areas" + titleAfter={ + } > + + + + What Was Medieval Japan Like? + + + In this Focus Area, you explore the main question: How does + the structures of organisms enable life’s functions? + + + + + + + What Was Medieval Japan Like? + + + In this Focus Area, you explore the main question: How does + the structures of organisms enable life’s functions? + + + What Was Medieval Japan Like? In this Focus Area, you explore the main question: How does - the structures of organisms enable lifes functions? + the structures of organisms enable life’s functions?
-
- } - > +
What Was Medieval Japan Like? @@ -173,7 +195,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => { What Was Medieval Japan Like? @@ -185,153 +207,6 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
-
- } - > - - Selecting Relevant Sources - - Identifying Patterns and Relationships - - Argumentative Claim - Selection of Evidence - Explanation of Evidence - Multimedia in Communication - Integration of Evidence - - - - Essential Questions - - -
    -
  • How are structures in the body organized?
    • -
  • - How do these structures work together to support life? But - really need to see what it looks like if we have an extra long - question. -
    • -
  • How are structures in the body organized?
    • -
- - - Key Take Aways - - -
    -
  1. - Groups of specialized cells make up organs and body systems, - which work together to support an organism’s survival. -
    2. -
  2. - How are structures in the body organized? More text blah blah - blah. -
    3. -
  3. How are structures in the body organized?
    4. -
- -
-
- } - > - - - - What Was Medieval Japan Like? - - - In this Focus Area, you explore the main question: How does - the structures of organisms enable lifes functions? - - - -
-
- } - > - - - - What Was Medieval Japan Like? - - - In this Focus Area, you explore the main question: How does - the structures of organisms enable life’s functions? - - - - - - - What Was Medieval Japan Like? - - - In this Focus Area, you explore the main question: How does - the structures of organisms enable life’s functions? - - - -
-
- } - > - - Selecting Relevant Sources - - Identifying Patterns and Relationships - - Argumentative Claim - Selection of Evidence - Explanation of Evidence - - Multimedia in Communication - - Integration of Evidence - -
-
diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx index 4339872e9..911c74431 100644 --- a/src/components/Section/Section.tsx +++ b/src/components/Section/Section.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import React, { ReactNode } from 'react'; import styles from './Section.module.css'; -import Heading, { HeadingElement } from '../Heading'; +import Heading, { HeadingElement, HeadingSize } from '../Heading'; export interface Props { /** * Align variations: @@ -31,7 +31,7 @@ export interface Props { /** * "size" prop, passed to Heading Component */ - headingSize?: HeadingElement; + headingSize?: HeadingSize; /** * Right slot - an area to put right-aligned content after section title */ diff --git a/src/components/TimelineNav/TimelineNav.module.css b/src/components/TimelineNav/TimelineNav.module.css index 1a24ce941..d1a009018 100644 --- a/src/components/TimelineNav/TimelineNav.module.css +++ b/src/components/TimelineNav/TimelineNav.module.css @@ -7,13 +7,13 @@ /** * 1) List of of links where each link toggles open associated information */ - .timeline-nav { +.timeline-nav { display: flex; gap: var(--eds-size-2); width: 100%; overflow: hidden; transition: transform var(--eds-anim-fade-long) var(--eds-anim-ease); - + @media all and (min-width: $eds-bp-lg) { background: var(--eds-theme-color-background-neutral-default); border-bottom-left-radius: var(--eds-border-radius-xl); @@ -86,7 +86,7 @@ visibility: visible; transform: translateX(0); padding: var(--eds-size-5) var(--eds-size-8); - box-shadow: 0px 2px 8px var(--eds-theme-color-border-neutral-subtle); /* 1 */ + box-shadow: 0px 2px 8px var(--eds-theme-color-border-neutral-subtle); /* 1 */ } } @@ -296,12 +296,8 @@ border-color: var(--eds-theme-color-border-neutral-default); position: relative; margin-right: var(--eds-size-half); - background: var(--eds-color-neutral-100); + background: var(--eds-theme-color-background-neutral-default); border-radius: 100%; - - @media all and (min-width: $eds-bp-lg) { - background: var(--eds-theme-color-background-neutral-default); - } .timeline-nav__item.eds-is-active & { color: 1px solid var(--eds-theme-color-text-neutral-default);