Skip to content

Commit

Permalink
fix: project overview typography sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ifrost1
ifrost1 committed Jul 21, 2022
1 parent 995a5f2 commit ce7e425
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 187 deletions.
229 changes: 52 additions & 177 deletions .storybook/pages/ProjectOverview/ProjectOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
<Heading
as="h2"
className="u-margin-bottom-xl"
size="headline-lg"
size="headline-md"
variant="base"
>
What is this Project About?
Expand All @@ -66,9 +66,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
mattis sem turpis id dictum. Volutpat ornare turpis ultrices augue
bibendum pellentesque. Habitasse.
</Text>
<Button className="u-margin-bottom-xl" variant="link">
See More
</Button>

<Heading
as="h3"
className="u-margin-bottom-sm"
Expand Down Expand Up @@ -110,54 +108,78 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
</ol>
</Text>
<Hr className="u-margin-bottom-none" />

<div className="fpo">FPO Brand asset</div>
<Section
description={
<Text
className="u-theme-typography-body-text-xs-bold"
variant="neutral"
>
Estimated schedule: Days 4,5,6
</Text>
}
overline={
<Text as="div" size="overline">
Overview
</Text>
headingSize="headline-sm"
title="Power Focus Areas"
titleAfter={
<Button size="sm" variant="icon">
<Icon
name="help"
purpose="informative"
size="1.375rem"
title="help"
/>
</Button>
}
>
<Card className="u-margin-bottom-md">
<CardBody>
<Heading
as="h3"
className="u-margin-bottom-sm"
size="title-xs"
variant="base"
>
What Was Medieval Japan Like?
</Heading>
<Text>
In this Focus Area, you explore the main question: How does
the structures of organisms enable life’s functions?
</Text>
</CardBody>
</Card>
<Card className="u-margin-bottom-md">
<CardBody>
<Heading
as="h3"
className="u-margin-bottom-sm"
size="title-xs"
variant="base"
>
What Was Medieval Japan Like?
</Heading>
<Text>
In this Focus Area, you explore the main question: How does
the structures of organisms enable life’s functions?
</Text>
</CardBody>
</Card>
<Card>
<CardBody>
<Heading
as="h3"
className="u-margin-bottom-sm"
size="title-md"
size="title-xs"
variant="base"
>
What Was Medieval Japan Like?
</Heading>
<Text>
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?
</Text>
</CardBody>
</Card>
</Section>
<Section
title="Additional Focus Areas"
titleBefore={
<img
alt="placeholder"
src="https://via.placeholder.com/32x32"
style={{ display: 'block', borderRadius: '50%' }}
/>
}
>
<Section headingSize="headline-sm" title="Additional Focus Areas">
<Card className="u-margin-bottom-md">
<CardBody>
<Heading
as="h3"
className="u-margin-bottom-sm"
size="title-md"
size="title-xs"
variant="base"
>
What Was Medieval Japan Like?
Expand All @@ -173,7 +195,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
<Heading
as="h3"
className="u-margin-bottom-sm"
size="title-md"
size="title-xs"
variant="base"
>
What Was Medieval Japan Like?
Expand All @@ -185,153 +207,6 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
</CardBody>
</Card>
</Section>
<Section
title="Cognitive Skills"
titleBefore={
<img
alt="placeholder"
src="https://via.placeholder.com/32x32"
style={{ display: 'block', borderRadius: '50%' }}
/>
}
>
<Text as="div">
<a href="https://go.czi.team/eds">Selecting Relevant Sources</a>
<a href="https://go.czi.team/eds">
Identifying Patterns and Relationships
</a>
<a href="https://go.czi.team/eds">Argumentative Claim</a>
<a href="https://go.czi.team/eds">Selection of Evidence</a>
<a href="https://go.czi.team/eds">Explanation of Evidence</a>
<a href="https://go.czi.team/eds">Multimedia in Communication</a>
<a href="https://go.czi.team/eds">Integration of Evidence</a>
</Text>
<Button className="u-margin-bottom-xl" variant="link">
See More
</Button>
<Heading as="h3" className="u-margin-bottom-sm" size="title-md">
Essential Questions
</Heading>
<Text as="div" className="u-margin-bottom-xl">
<ul>
<li>How are structures in the body organized?</li>
<li>
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.
</li>
<li>How are structures in the body organized?</li>
</ul>
</Text>
<Heading as="h3" className="u-margin-bottom-sm" size="title-md">
Key Take Aways
</Heading>
<Text as="div" className="u-margin-bottom-xl">
<ol>
<li>
Groups of specialized cells make up organs and body systems,
which work together to support an organism’s survival.
</li>
<li>
How are structures in the body organized? More text blah blah
blah.
</li>
<li>How are structures in the body organized?</li>
</ol>
</Text>
<Hr className="u-margin-bottom-none" />
<Section
title="Power Focus Areas"
titleBefore={
<img
alt="placeholder"
src="https://via.placeholder.com/32x32"
style={{ display: 'block', borderRadius: '50%' }}
/>
}
>
<Card>
<CardBody>
<Heading
as="h3"
className="u-margin-bottom-sm"
size="title-md"
>
What Was Medieval Japan Like?
</Heading>
<Text>
In this Focus Area, you explore the main question: How does
the structures of organisms enable lifes functions?
</Text>
</CardBody>
</Card>
</Section>
<Section
title="Additional Focus Areas"
titleBefore={
<img
alt="placeholder"
src="https://via.placeholder.com/32x32"
style={{ display: 'block', borderRadius: '50%' }}
/>
}
>
<Card className="u-margin-bottom-md">
<CardBody>
<Heading
as="h3"
className="u-margin-bottom-sm"
size="title-md"
>
What Was Medieval Japan Like?
</Heading>
<Text>
In this Focus Area, you explore the main question: How does
the structures of organisms enable life’s functions?
</Text>
</CardBody>
</Card>
<Card>
<CardBody>
<Heading
as="h3"
className="u-margin-bottom-sm"
size="title-md"
>
What Was Medieval Japan Like?
</Heading>
<Text>
In this Focus Area, you explore the main question: How does
the structures of organisms enable life’s functions?
</Text>
</CardBody>
</Card>
</Section>
<Section
title="Cognitive Skills"
titleBefore={
<img
alt="placeholder"
src="https://via.placeholder.com/32x32"
style={{ display: 'block', borderRadius: '50%' }}
/>
}
>
<Text as="div">
<a href="https://go.czi.team/eds">Selecting Relevant Sources</a>
<a href="https://go.czi.team/eds">
Identifying Patterns and Relationships
</a>
<a href="https://go.czi.team/eds">Argumentative Claim</a>
<a href="https://go.czi.team/eds">Selection of Evidence</a>
<a href="https://go.czi.team/eds">Explanation of Evidence</a>
<a href="https://go.czi.team/eds">
Multimedia in Communication
</a>
<a href="https://go.czi.team/eds">Integration of Evidence</a>
</Text>
</Section>
</Section>
</TimelineNavPanel>

<TimelineNavPanel title="Expectations of Samuri in Feudal Japan and Wars of 5th Century">
Expand Down
4 changes: 2 additions & 2 deletions src/components/Section/Section.tsx
View file
Original file line number Diff line number Diff line change
@@ -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:
Expand Down Expand Up @@ -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
*/
Expand Down
12 changes: 4 additions & 8 deletions src/components/TimelineNav/TimelineNav.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 */
}
}

Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit ce7e425

Please sign in to comment.