-
Notifications
You must be signed in to change notification settings - Fork 81
/
CustomBanner.stories.tsx
83 lines (77 loc) · 2.6 KB
/
CustomBanner.stories.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React, { ReactElement, useState } from 'react'
import { Icon } from '../Icon/Icons'
import {
Banner,
BannerButton,
BannerContent,
BannerFlag,
BannerGuidance,
BannerHeader,
BannerIcon,
MediaBlockBody,
} from '../../index'
import flagImg from '@uswds/uswds/src/img/us_flag_small.png'
import dotGovIcon from '@uswds/uswds/src/img/icon-dot-gov.svg'
import httpsIcon from '@uswds/uswds/src/img/icon-https.svg'
const CustomBanner = (): ReactElement => {
const [isOpen, setIsOpen] = useState(false)
return (
<Banner aria-label="Official website of the state department of something specific">
<BannerHeader
isOpen={isOpen}
flagImg={<BannerFlag src={flagImg} aria-hidden alt="" />}
headerText="This is an official website of the state department of something specific"
headerActionText="Here's how you know">
<BannerButton
isOpen={isOpen}
aria-controls="custom-banner"
onClick={(): void => {
setIsOpen((previousIsOpen) => !previousIsOpen)
}}>
Here's how you know
</BannerButton>
</BannerHeader>
<BannerContent id="custom-banner" isOpen={isOpen}>
<div className="grid-row grid-gap-lg">
<BannerGuidance className="tablet:grid-col-6">
<BannerIcon src={dotGovIcon} alt="" />
<MediaBlockBody>
<p>
<strong>Official websites use .gov</strong>
<br />A <strong>.gov</strong> website belongs to an official
government organization in the United States.
</p>
</MediaBlockBody>
</BannerGuidance>
<BannerGuidance className="tablet:grid-col-6">
<BannerIcon src={httpsIcon} alt="" />
<MediaBlockBody>
<p>
<strong>Secure .gov websites use HTTPS</strong>
<br />A <strong>lock (<Icon.Lock aria-label="Locked padlock icon" />)</strong> or{' '}
<strong>https://</strong> means you've safely connected to
the .gov website. Share sensitive information only on official,
secure websites.
</p>
</MediaBlockBody>
</BannerGuidance>
</div>
</BannerContent>
</Banner>
)
}
export default {
title: 'Components/Banner',
component: CustomBanner,
parameters: {
docs: {
description: {
component: `
### USWDS 3.0 Banner component
Source: https://designsystem.digital.gov/components/banner/
`,
},
},
},
}
export const customBanner = (): React.ReactElement => <CustomBanner />