Skip to content

Commit

Permalink
feat(timelinenav)!: remove top-level sub-component (#1681)
Browse files Browse the repository at this point in the history 
* feat(timelinenav)!: remove top-level sub-component

* refactor(timelinenav): remove useless undefined typing
  • Loading branch information
@jinlee93 @booc0mtaco
jinlee93 authored and booc0mtaco committed Jul 19, 2023
1 parent ff293e3 commit f46eca7
Show file tree
Hide file tree
Showing 7 changed files with 123 additions and 144 deletions.
36 changes: 19 additions & 17 deletions .storybook/pages/FeedbackOverview/FeedbackOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
Table,
Text,
TimelineNav,
TimelineNavPanel,
Toolbar,
ToolbarItem,
} from '../../../src';
Expand Down Expand Up @@ -208,7 +207,7 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
</Tab>
<Tab title="Feedback">
<TimelineNav activeIndex={activeIndex}>
<TimelineNavPanel title="Overview">
<TimelineNav.Panel title="Overview">
<Toolbar
className={styles['feedback-overview__toolbar']}
variant="bare"
Expand Down Expand Up @@ -391,9 +390,9 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
</Card.Body>
</Card>
))}
</TimelineNavPanel>
</TimelineNav.Panel>

<TimelineNavPanel
<TimelineNav.Panel
title="Plan your body"
titleAfter={
<Icon
Expand Down Expand Up @@ -487,9 +486,9 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
</Card.Body>
</Card>
))}
</TimelineNavPanel>
</TimelineNav.Panel>

<TimelineNavPanel
<TimelineNav.Panel
title="Research and Model Cells"
variant="number"
>
Expand All @@ -504,8 +503,8 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
ullamco laboris nisi ut aliquip ex
</Text>
</div>
</TimelineNavPanel>
<TimelineNavPanel
</TimelineNav.Panel>
<TimelineNav.Panel
title="Research and Model Body Systems"
variant="number"
>
Expand All @@ -520,8 +519,8 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
ullamco laboris nisi ut aliquip ex
</Text>
</div>
</TimelineNavPanel>
<TimelineNavPanel title="Draft Your Book" variant="number">
</TimelineNav.Panel>
<TimelineNav.Panel title="Draft Your Book" variant="number">
<div className="max-w-xl">
<Heading className="mb-6" size="h3">
Draft Your Book
Expand All @@ -533,8 +532,11 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
ullamco laboris nisi ut aliquip ex
</Text>
</div>
</TimelineNavPanel>
<TimelineNavPanel title="Critique a Peer's Book" variant="number">
</TimelineNav.Panel>
<TimelineNav.Panel
title="Critique a Peer's Book"
variant="number"
>
<div className="max-w-xl">
<Heading className="mb-6" size="h3">
Critique a Peer&apos;s Book
Expand All @@ -546,8 +548,8 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
ullamco laboris nisi ut aliquip ex
</Text>
</div>
</TimelineNavPanel>
<TimelineNavPanel title="Human Body Book" variant="number">
</TimelineNav.Panel>
<TimelineNav.Panel title="Human Body Book" variant="number">
<div className="max-w-xl">
<Heading className="mb-6" size="h3">
Human Body Book
Expand All @@ -559,8 +561,8 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
ullamco laboris nisi ut aliquip ex
</Text>
</div>
</TimelineNavPanel>
<TimelineNavPanel title="Book Review" variant="incomplete">
</TimelineNav.Panel>
<TimelineNav.Panel title="Book Review" variant="incomplete">
<div className="max-w-xl">
<Heading className="mb-6" size="h3">
Book Review
Expand All @@ -572,7 +574,7 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
ullamco laboris nisi ut aliquip ex
</Text>
</div>
</TimelineNavPanel>
</TimelineNav.Panel>
</TimelineNav>
</Tab>
</Tabs>
Expand Down
21 changes: 10 additions & 11 deletions .storybook/pages/ProjectOverview/ProjectOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
Section,
Text,
TimelineNav,
TimelineNavPanel,
} from '../../../src';
// Project Overview pilot components -- not yet exported from src/index.ts
import ButtonActionCalloutCard from '../../recipes/ButtonActionCalloutCard';
Expand Down Expand Up @@ -47,7 +46,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
title="Feudal Honor Codes and Values"
/>
<TimelineNav activeIndex={activeIndex}>
<TimelineNavPanel title="Overview" variant="success">
<TimelineNav.Panel title="Overview" variant="success">
<Heading
as="h2"
className="!mb-8"
Expand Down Expand Up @@ -209,9 +208,9 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
</Card.Body>
</Card>
</Section>
</TimelineNavPanel>
</TimelineNav.Panel>

<TimelineNavPanel title="Expectations of Samuri in Feudal Japan and Wars of 5th Century">
<TimelineNav.Panel title="Expectations of Samuri in Feudal Japan and Wars of 5th Century">
<Section
description={
<Text as="p" className={styles['project-overview__text']}>
Expand Down Expand Up @@ -338,9 +337,9 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
</Grid>
<Hr className="!mt-12" />
</Section>
</TimelineNavPanel>
</TimelineNav.Panel>

<TimelineNavPanel title="Expectations of Samuri in Feudal Japan">
<TimelineNav.Panel title="Expectations of Samuri in Feudal Japan">
<Section
description={
<Text as="p" className={styles['project-overview__text']}>
Expand All @@ -357,8 +356,8 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
nisi ut aliquip ex
</Text>
</Section>
</TimelineNavPanel>
<TimelineNavPanel title="Expectations of Samuri in Feudal Japan">
</TimelineNav.Panel>
<TimelineNav.Panel title="Expectations of Samuri in Feudal Japan">
<Section
description={
<Text as="p" className={styles['project-overview__text']}>
Expand All @@ -375,8 +374,8 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
nisi ut aliquip ex
</Text>
</Section>
</TimelineNavPanel>
<TimelineNavPanel title="Expectations of Samuri in Feudal Japan">
</TimelineNav.Panel>
<TimelineNav.Panel title="Expectations of Samuri in Feudal Japan">
<Section
description={
<Text as="p" className={styles['project-overview__text']}>
Expand All @@ -393,7 +392,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
nisi ut aliquip ex
</Text>
</Section>
</TimelineNavPanel>
</TimelineNav.Panel>
</TimelineNav>
</PageShell>
);
Expand Down
37 changes: 18 additions & 19 deletions src/components/TimelineNav/TimelineNav.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,11 @@ import { chromaticViewports } from '../../util/viewports';
import Heading from '../Heading';
import Icon from '../Icon';
import Text from '../Text';
import TimelineNavPanel from '../TimelineNavPanel';

export default {
title: 'Components/TimelineNav',
component: TimelineNav,
subcomponents: { TimelineNavPanel },
subcomponents: { 'TimlineNav.Panel': TimelineNav.Panel },
parameters: {
badges: ['1.0'],
backgrounds: {
Expand All @@ -26,7 +25,7 @@ export default {
variant: 'ordered',
children: (
<>
<TimelineNavPanel className="max-w-xl" title="Overview">
<TimelineNav.Panel className="max-w-xl" title="Overview">
<Heading className="mb-6" size="h3">
Overview
</Heading>
Expand All @@ -36,8 +35,8 @@ export default {
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex{' '}
</Text>
</TimelineNavPanel>
<TimelineNavPanel
</TimelineNav.Panel>
<TimelineNav.Panel
className="max-w-xl"
title="TimelineNavPanel 1"
titleAfter={
Expand All @@ -60,9 +59,9 @@ export default {
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex{' '}
</Text>
</TimelineNavPanel>
</TimelineNav.Panel>

<TimelineNavPanel
<TimelineNav.Panel
className="max-w-xl"
title="TimelineNavPanel 2"
variant="error"
Expand All @@ -76,9 +75,9 @@ export default {
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex{' '}
</Text>
</TimelineNavPanel>
</TimelineNav.Panel>

<TimelineNavPanel
<TimelineNav.Panel
className="max-w-xl"
title="
Panel with a long name that breaks into multiple lines on smaller
Expand All @@ -104,9 +103,9 @@ export default {
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex{' '}
</Text>
</TimelineNavPanel>
</TimelineNav.Panel>

<TimelineNavPanel
<TimelineNav.Panel
className="max-w-xl"
title="TimelineNavPanel 4"
variant="success"
Expand All @@ -120,9 +119,9 @@ export default {
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex{' '}
</Text>
</TimelineNavPanel>
</TimelineNav.Panel>

<TimelineNavPanel className="max-w-xl" title="TimelineNavPanel 5">
<TimelineNav.Panel className="max-w-xl" title="TimelineNavPanel 5">
<Heading className="mb-6" size="h3">
TimelineNavPanel 5
</Heading>
Expand All @@ -132,9 +131,9 @@ export default {
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex{' '}
</Text>
</TimelineNavPanel>
</TimelineNav.Panel>

<TimelineNavPanel
<TimelineNav.Panel
className="max-w-xl"
title="TimelineNavPanel 6"
variant="number"
Expand All @@ -148,9 +147,9 @@ export default {
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex{' '}
</Text>
</TimelineNavPanel>
</TimelineNav.Panel>

<TimelineNavPanel
<TimelineNav.Panel
className="max-w-xl"
title="Final Item - complete"
variant="complete"
Expand All @@ -164,7 +163,7 @@ export default {
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex{' '}
</Text>
</TimelineNavPanel>
</TimelineNav.Panel>
</>
),
},
Expand All @@ -177,7 +176,7 @@ export default {
},
} as Meta;

type Args = React.ComponentProps<typeof TimelineNavPanel>;
type Args = React.ComponentProps<typeof TimelineNav.Panel>;

export const Default: StoryObj<Args> = {
parameters: {
Expand Down
Loading

0 comments on commit f46eca7

Please sign in to comment.