Skip to content

Commit 7b86499

Browse files
ricksmith130ricksmith130
committed
consolidated react component extensions into this lib
1 parent 30a3bec commit 7b86499

File tree

11 files changed

+391
-12
lines changed

11 files changed

+391
-12
lines changed

‎.storybook/preview.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const preview: Preview = {
1010
'Welcome',
1111
'Migration Guides',
1212
'Form Elements',
13+
'Extensions',
1314
'Content Presentation',
1415
'Navigation',
1516
'Layout',

‎bundle-base.tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"outDir": "./dist",
1919
"paths": {
2020
"@components/*": ["src/components/*"],
21+
"@extensions/*": ["src/components/extension/*"],
2122
"@content-presentation/*": ["src/components/content-presentation/*"],
2223
"@form-elements/*": ["src/components/form-elements/*"],
2324
"@navigation/*": ["src/components/navigation/*"],

stories/AccordianMenu/AccordionMenu.stories.tsx renamed to stories/Extensions/AccordianMenu/AccordionMenu.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
44
import AccordionMenu from '@components/accordion-menu/AccordionMenu';
55

66
const meta: Meta<typeof AccordionMenu> = {
7-
title: 'Accordion Menu',
7+
title: 'Extensions/Accordion Menu',
88
component: AccordionMenu,
99
};
1010
export default meta;

‎stories/Extensions/HeaderWithLogo/HeaderWithLogo.stories.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import React from 'react';
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
import HeaderWithLogo from '@components/header-with-logo/HeaderWithLogo';
5+
6+
const meta: Meta<typeof HeaderWithLogo> = {
7+
title: 'Extensions/Header with logo next to nav links',
8+
component: HeaderWithLogo,
9+
};
10+
export default meta;
11+
12+
type Story = StoryObj<typeof HeaderWithLogo>;
13+
14+
export const Standard: Story = {
15+
render: () => (
16+
<>
17+
<HeaderWithLogo>
18+
<HeaderWithLogo.Logo href="/" />
19+
<HeaderWithLogo.ServiceName>Your information page</HeaderWithLogo.ServiceName>
20+
<HeaderWithLogo.Nav>
21+
<HeaderWithLogo.NavItem href="/conditions">Health A-Z</HeaderWithLogo.NavItem>
22+
<HeaderWithLogo.NavItem href="/live-well">Live Well</HeaderWithLogo.NavItem>
23+
<HeaderWithLogo.NavItem href="/social-care-and-support">Care and support</HeaderWithLogo.NavItem>
24+
<HeaderWithLogo.NavItem href="/news">Health news</HeaderWithLogo.NavItem>
25+
<HeaderWithLogo.NavItem href="/service-search">Services near you</HeaderWithLogo.NavItem>
26+
<HeaderWithLogo.NavItem href="/" home>Home</HeaderWithLogo.NavItem>
27+
<HeaderWithLogo.NavDropdownMenu />
28+
</HeaderWithLogo.Nav>
29+
<HeaderWithLogo.Search />
30+
</HeaderWithLogo>
31+
</>
32+
),
33+
};

‎stories/Extensions/RibbonLink/RibbonLink.stories.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import React from 'react';
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
import RibbonLink from '@components/ribbon-link/RibbonLink';
5+
6+
const meta: Meta<typeof RibbonLink> = {
7+
title: 'Extensions/ RibbonLink',
8+
component: RibbonLink,
9+
};
10+
export default meta;
11+
12+
type Story = StoryObj<typeof RibbonLink>;
13+
14+
export const CoolRibbon: Story = {
15+
render: () => (
16+
<div className="ribbonlink-demo">
17+
<RibbonLink flavour="cool">Cool Ribbon</RibbonLink>
18+
</div>
19+
),
20+
};
21+
22+
export const MildRibbon: Story = {
23+
render: () => (
24+
<div className="ribbonlink-demo">
25+
<RibbonLink flavour="mild">Mild Ribbon</RibbonLink>
26+
</div>
27+
),
28+
};
29+
30+
export const HotRibbon: Story = {
31+
render: () => (
32+
<div className="ribbonlink-demo">
33+
<RibbonLink flavour="hot">Hot Ribbon</RibbonLink>
34+
</div>
35+
),
36+
};
37+
38+
export const RibbonLinkBar: Story = {
39+
render: () => (
40+
<RibbonLink.Bar className="ribbonlink-demo">
41+
<RibbonLink flavour="cool">Cool Ribbon</RibbonLink>
42+
<RibbonLink flavour="mild">Mild Ribbon</RibbonLink>
43+
<RibbonLink flavour="hot">Hot Ribbon</RibbonLink>
44+
</RibbonLink.Bar>
45+
),
46+
};

‎stories/Extensions/SubNavigation/SubNavigation.stories.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import React from 'react';
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
import SubNavigation from '@components/sub-navigation/SubNavigation';
5+
6+
const meta: Meta<typeof SubNavigation> = {
7+
title: 'Extensions/Sub Navigation Panel',
8+
component: SubNavigation,
9+
};
10+
export default meta;
11+
12+
type Story = StoryObj<typeof SubNavigation>;
13+
14+
export const Standard: Story = {
15+
render: () => {
16+
const [activeTab, setActiveTab] = React.useState(1);
17+
18+
return (
19+
<SubNavigation>
20+
<SubNavigation.Item
21+
aria-current={activeTab === 1 ? 'page' : false}
22+
onClick={() => setActiveTab(1)}
23+
>
24+
Tab 1
25+
</SubNavigation.Item>
26+
<SubNavigation.Item
27+
aria-current={activeTab === 2 ? 'page' : false}
28+
onClick={() => setActiveTab(2)}
29+
>
30+
Tab 2
31+
</SubNavigation.Item>
32+
<SubNavigation.Item
33+
aria-current={activeTab === 3 ? 'page' : false}
34+
onClick={() => setActiveTab(3)}
35+
>
36+
Tab 3
37+
</SubNavigation.Item>
38+
</SubNavigation>
39+
);
40+
},
41+
};

‎stories/Extensions/TabSet/TabSet.stories.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import React from 'react';
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
import TabSet from '@components/tab-set/TabSet';
5+
6+
const meta: Meta<typeof TabSet> = {
7+
title: 'Extensions/TabSet',
8+
component: TabSet,
9+
};
10+
export default meta;
11+
12+
type Story = StoryObj<typeof TabSet>;
13+
14+
export const Standard: Story = {
15+
render: () => (
16+
<>
17+
<TabSet>
18+
<TabSet.Tab>Overview</TabSet.Tab>
19+
<TabSet.Tab active>Demographics</TabSet.Tab>
20+
<TabSet.Tab>Clinicals</TabSet.Tab>
21+
<TabSet.Tab>Documents</TabSet.Tab>
22+
</TabSet>
23+
<br />
24+
</>
25+
),
26+
};
27+
28+
export const WithDisabledTab: Story = {
29+
render: () => (
30+
<>
31+
<TabSet>
32+
<TabSet.Tab>Overview</TabSet.Tab>
33+
<TabSet.Tab active>Demographics</TabSet.Tab>
34+
<TabSet.Tab disabled>Clinicals</TabSet.Tab>
35+
<TabSet.Tab>Documents</TabSet.Tab>
36+
</TabSet>
37+
<br />
38+
</>
39+
),
40+
};
41+
42+
export const WithEmptyTab: Story = {
43+
render: () => (
44+
<>
45+
<TabSet>
46+
<TabSet.Tab>Overview</TabSet.Tab>
47+
<TabSet.Tab active>Demographics</TabSet.Tab>
48+
<TabSet.Tab empty>Clinicals</TabSet.Tab>
49+
<TabSet.Tab>Documents</TabSet.Tab>
50+
</TabSet>
51+
<br />
52+
</>
53+
),
54+
};
55+
56+
export const WithDifferentSizes: Story = {
57+
render: () => (
58+
<>
59+
<TabSet>
60+
<TabSet.Tab style={{ maxWidth: 200 }}>Overview</TabSet.Tab>
61+
<TabSet.Tab style={{ minWidth: 450 }}>Demographics</TabSet.Tab>
62+
<TabSet.Tab style={{ flexGrow: 2 }}>Clinicals</TabSet.Tab>
63+
<TabSet.Tab style={{ flexGrow: 0.5 }}>Documents</TabSet.Tab>
64+
<TabSet.Tab>Settings</TabSet.Tab>
65+
</TabSet>
66+
<br />
67+
</>
68+
),
69+
};

‎stories/Extensions/Tag/Tag.stories.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
import Tag from '@components/content-presentation/tag/Tag';
4+
5+
const meta: Meta<typeof Tag> = {
6+
title: 'Extensions/Tags',
7+
component: Tag,
8+
};
9+
export default meta;
10+
11+
type Story = StoryObj<typeof Tag>;
12+
13+
export const Basic: Story = {
14+
render: () => (
15+
<div className="tag-demo">
16+
<Tag>Standard</Tag>
17+
<Tag>Done</Tag>
18+
<Tag color="white">Started</Tag>
19+
<Tag color="grey">Not Started</Tag>
20+
<Tag color="blue">Ready to submit</Tag>
21+
<Tag color="red">FP69</Tag>
22+
<Tag color="orange">Ceased - no cervix</Tag>
23+
</div>
24+
),
25+
};
26+
27+
export const Colours: Story = {
28+
render: () => (
29+
<div className="tag-demo">
30+
<Tag>Standard</Tag>
31+
<Tag color="white">Started</Tag>
32+
<Tag color="grey">Not Started</Tag>
33+
<Tag color="green">New</Tag>
34+
<Tag color="aqua-green">Active</Tag>
35+
<Tag color="blue">Pending</Tag>
36+
<Tag color="purple">Received</Tag>
37+
<Tag color="pink">Sent</Tag>
38+
<Tag color="red">Rejected</Tag>
39+
<Tag color="orange">Declined</Tag>
40+
<Tag color="yellow">Delayed</Tag>
41+
</div>
42+
),
43+
};

‎stories/Extensions/Timeline/Timeline.stories.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import React from 'react';
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
import Timeline from '@components/timeline';
5+
import { EventProps } from '@components/timeline/components/Event';
6+
import Tag from '@components/content-presentation/tag/Tag';
7+
8+
const meta: Meta<typeof Timeline> = {
9+
title: 'Extensions/Timeline',
10+
component: Timeline,
11+
};
12+
export default meta;
13+
14+
type Story = StoryObj<typeof Timeline>;
15+
16+
const actionStyle = {
17+
marginLeft: '8px',
18+
color: '#768692',
19+
};
20+
const tagStyle = {
21+
marginLeft: '8px',
22+
};
23+
const linkStyle = {
24+
marginLeft: '8px',
25+
fontWeight: 400,
26+
};
27+
28+
const storybookEvents: EventProps[] = [
29+
{
30+
title: <>Result sent</>,
31+
instigator: <>System</>,
32+
date: '19 Nov 2019, 7:49:10 pm',
33+
description: [
34+
<>Test Result: (39S) Low-grade dyskaryosis, HPV positive, Repeat Advised</>,
35+
<>Test Date: 19-Oct-2020, 9:00:00 am</>,
36+
],
37+
action: (
38+
<span style={actionStyle}>
39+
-
40+
<Tag style={tagStyle} color="yellow">
41+
Send to printer
42+
</Tag>
43+
<a style={linkStyle} href="/placeholder/">
44+
Cancel
45+
</a>
46+
</span>
47+
),
48+
},
49+
{
50+
title: <>Patient deferred</>,
51+
instigator: <>James Smith</>,
52+
date: '19 Nov 2019, 4:28:57 pm',
53+
description: [
54+
<>Defer Reason: Pregnancy</>,
55+
<>CRM Case Number: CAS-12345-ABCDE</>,
56+
<>Comments: Requested via the GP form</>,
57+
],
58+
},
59+
{
60+
title: <>Next test due date changed</>,
61+
instigator: <>System</>,
62+
date: '19 Nov 2019, 11:59:59 am',
63+
description: [<>Next test due date changed to 10-Oct-2021</>],
64+
},
65+
{
66+
title: <>Test result added</>,
67+
date: '19 Nov 2019, 9:12:42 am',
68+
description: [<>Test Result: (39S) Low-grade dyskaryosis, HPV positive, Repeat Advised</>],
69+
},
70+
{
71+
title: <>Screening invitation sent</>,
72+
date: '18 Nov 2019, 7:49:10 pm',
73+
action: (
74+
<span style={actionStyle}>
75+
-
76+
<Tag style={tagStyle} color="grey">
77+
Sent to patient
78+
</Tag>
79+
<a style={linkStyle} href="/placeholder2">
80+
Resend
81+
</a>
82+
</span>
83+
),
84+
},
85+
];
86+
87+
export const Standard: Story = {
88+
render: () => <Timeline events={storybookEvents} />,
89+
};

‎stories/Extensions/ToolTip/Tooltip.stories.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
import { WarningIcon } from '@components/icons';
4+
import Tooltip from '@components/tooltip/Tooltip';
5+
const meta: Meta<typeof Tooltip> = {
6+
title: 'Extensions/Tooltip',
7+
component: Tooltip,
8+
};
9+
export default meta;
10+
11+
type Story = StoryObj<typeof Tooltip>;
12+
13+
export const Standard: Story = {
14+
render: () => (
15+
<div className="tooltip-demo">
16+
<Tooltip tooltip="Hello!">
17+
<div>Hover Over Me!</div>
18+
</Tooltip>
19+
</div>
20+
),
21+
};
22+
23+
export const WithIcon: Story = {
24+
render: () => (
25+
<div className="tooltip-demo">
26+
<Tooltip tooltip="Data Quality Issues">
27+
<WarningIcon />
28+
</Tooltip>
29+
</div>
30+
),
31+
};

0 commit comments

Comments
 (0)