Add story for Flash with icon and action button (#4184)

* add example * add dismiss option
primer · Jan 26, 2024 · a92f00f · a92f00f
1 parent c9f0450
commit a92f00f
Showing 1 changed file with 105 additions and 0 deletions.
diff --git a/src/Flash/Flash.features.stories.tsx b/src/Flash/Flash.features.stories.tsx
@@ -1,6 +1,11 @@
 import React from 'react'
 import {ComponentMeta} from '@storybook/react'
 import Flash from './Flash'
+import Octicon from '../Octicon'
+import {InfoIcon, XIcon} from '@primer/octicons-react'
+import {Button, IconButton} from '../Button'
+import Link from '../Link'
+import Box from '../Box'
 
 export default {
   title: 'Components/Flash/Features',
@@ -14,3 +19,103 @@ export const Danger = () => <Flash variant="danger">Danger</Flash>
 export const Warning = () => <Flash variant="warning">Warning</Flash>
 
 export const Full = () => <Flash full>Full</Flash>
+
+export const WithIconAndAction = () => (
+  <Flash
+    sx={{
+      display: 'grid',
+      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
+      gridTemplateRows: 'min-content',
+      gridTemplateAreas: `'visual message actions'`,
+      '@media screen and (max-width: 543.98px)': {
+        gridTemplateColumns: 'min-content 1fr',
+        gridTemplateRows: 'min-content min-content',
+        gridTemplateAreas: `
+        'visual message'
+        '.      actions'
+      `,
+      },
+    }}
+  >
+    <Box sx={{display: 'grid', paddingBlock: 'var(--base-size-8)', alignSelf: 'start', gridArea: 'visual'}}>
+      <Octicon icon={InfoIcon} />
+    </Box>
+    <Box
+      sx={{
+        fontSize: 1,
+        lineHeight: '1.5',
+        padding: '0.375rem var(--base-size-8)',
+        alignSelf: 'center',
+        gridArea: 'message',
+      }}
+    >
+      This is a flash message with an icon and an action.
+      <Link href="/"> Learn more.</Link>
+    </Box>
+    <Box
+      sx={{
+        gridArea: 'actions',
+        '@media screen and (max-width: 543.98px)': {
+          alignSelf: 'start',
+          margin: 'var(--base-size-8) 0 0 var(--base-size-8)',
+        },
+      }}
+    >
+      <Button>Join waitlist</Button>
+    </Box>
+  </Flash>
+)
+
+export const WithIconActionDismiss = () => (
+  <Flash
+    sx={{
+      display: 'grid',
+      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',
+      gridTemplateRows: 'min-content',
+      gridTemplateAreas: `'visual message actions close'`,
+      '@media screen and (max-width: 543.98px)': {
+        gridTemplateColumns: 'min-content 1fr',
+        gridTemplateRows: 'min-content min-content',
+        gridTemplateAreas: `
+        'visual message close'
+        '.      actions actions'
+      `,
+      },
+    }}
+  >
+    <Box sx={{display: 'grid', paddingBlock: 'var(--base-size-8)', alignSelf: 'start', gridArea: 'visual'}}>
+      <Octicon icon={InfoIcon} />
+    </Box>
+    <Box
+      sx={{
+        fontSize: 1,
+        lineHeight: '1.5',
+        padding: '0.375rem var(--base-size-8)',
+        alignSelf: 'center',
+        gridArea: 'message',
+      }}
+    >
+      This is a flash message with an icon and an action.
+      <Link href="/"> Learn more.</Link>
+    </Box>
+    <Box
+      sx={{
+        gridArea: 'actions',
+        '@media screen and (max-width: 543.98px)': {
+          alignSelf: 'start',
+          margin: 'var(--base-size-8) 0 0 var(--base-size-8)',
+        },
+      }}
+    >
+      <Button>Join waitlist</Button>
+    </Box>
+    <Box
+      sx={{
+        gridArea: 'close',
+        marginLeft: 'var(--controlStack-medium-gap-condensed)',
+      }}
+    >
+      <IconButton variant="invisible" icon={XIcon} aria-label="Dismiss" sx={{svg: {margin: '0', color: 'fg.muted'}}} />
+    </Box>
+  </Flash>
+)