Skip to content

Commit

Permalink
Change ThemeProvider story to TopBar component
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophschneider
sophschneider committed Mar 22, 2024
1 parent fbd7790 commit 21135b7
Showing 1 changed file with 62 additions and 199 deletions.
261 changes: 62 additions & 199 deletions polaris-react/src/components/ThemeProvider/ThemeProvider.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,222 +1,85 @@
import React, {useState} from 'react';
import React, {useCallback, useState} from 'react';
import type {ComponentMeta} from '@storybook/react';
import {
Button,
Frame,
Icon,
TopBar,
Text,
ThemeProvider,
Card,
Popover,
ActionList,
useBreakpoints,
InlineStack,
} from '@shopify/polaris';
import {
ClipboardIcon,
DeleteIcon,
ExportIcon,
ImportIcon,
MenuHorizontalIcon,
} from '@shopify/polaris-icons';
import {SidekickIcon, NotificationIcon} from '@shopify/polaris-icons';

export default {
component: ThemeProvider,
} as ComponentMeta<typeof ThemeProvider>;

const sections = [
{
title: 'File options',
items: [
{
active: true,
content: 'Import file',
icon: ImportIcon,
},
{content: 'Export file', icon: ExportIcon},
{
destructive: true,
content: 'Delete file',
icon: DeleteIcon,
},
],
},
];

export function Default() {
const breakpoints = useBreakpoints();

const [lightThemeLightPopoverActive, setLightThemeLightPopoverActive] =
useState(false);
const [isSidekickMenuOpen, setIsSidekickMenuOpen] = useState(true);

const [darkThemeDarkPopoverActive, setDarkThemeDarkPopoverActive] =
useState(false);
const toggleIsSidekickMenuOpen = useCallback(
() => setIsSidekickMenuOpen((isSidekickMenuOpen) => !isSidekickMenuOpen),
[],
);

const [lightThemeDarkPopoverActive, setLightThemeDarkPopoverActive] =
useState(false);
const [isNotificationsMenuOpen, setIsNotificationsMenuOpen] = useState(false);

const [darkThemeLightPopoverActive, setDarkThemeLightPopoverActive] =
useState(false);
const toggleIsNotificationsMenuOpen = useCallback(
() =>
setIsNotificationsMenuOpen(
(isNotificationsMenuOpen) => !isNotificationsMenuOpen,
),
[],
);

return (
<div
style={{
display: 'grid',
gridTemplateColumns: breakpoints.mdUp ? '1fr 1fr' : '1fr',
gap: 20,
}}
>
<CustomerCard
moreActions={
<Popover
active={lightThemeLightPopoverActive}
autofocusTarget="first-node"
onClose={() => setLightThemeLightPopoverActive((active) => !active)}
activator={
<Button
variant="tertiary"
icon={MenuHorizontalIcon}
accessibilityLabel="More actions"
onClick={() =>
setLightThemeLightPopoverActive((active) => !active)
}
/>
}
>
<ActionList actionRole="menuitem" sections={sections} />
</Popover>
}
/>
<ThemeProvider theme="dark">
<CustomerCard
moreActions={
<Popover
active={darkThemeDarkPopoverActive}
autofocusTarget="first-node"
onClose={() => setDarkThemeDarkPopoverActive((active) => !active)}
activator={
<Button
variant="tertiary"
icon={MenuHorizontalIcon}
accessibilityLabel="More actions"
onClick={() =>
setDarkThemeDarkPopoverActive((active) => !active)
}
/>
}
>
<ActionList actionRole="menuitem" sections={sections} />
</Popover>
}
/>
</ThemeProvider>
<CustomerCard
moreActions={
<ThemeProvider theme="dark">
<Popover
active={lightThemeDarkPopoverActive}
autofocusTarget="first-node"
onClose={() =>
setLightThemeDarkPopoverActive((active) => !active)
}
activator={
<ThemeProvider theme="light">
<Button
variant="tertiary"
icon={MenuHorizontalIcon}
accessibilityLabel="More actions"
onClick={() =>
setLightThemeDarkPopoverActive((active) => !active)
}
/>
</ThemeProvider>
}
>
<ActionList actionRole="menuitem" sections={sections} />
</Popover>
const sidekickMenu = (
<ThemeProvider theme="light">
<TopBar.Menu
activatorContent={
<ThemeProvider theme="dark-experimental">
<Icon source={SidekickIcon} />
</ThemeProvider>
}
open={isSidekickMenuOpen}
onOpen={toggleIsSidekickMenuOpen}
onClose={toggleIsSidekickMenuOpen}
actions={[
{
items: [{content: 'Light theme popover'}],
},
]}
/>
<ThemeProvider theme="dark">
<CustomerCard
moreActions={
<ThemeProvider theme="light">
<Popover
active={darkThemeLightPopoverActive}
autofocusTarget="first-node"
onClose={() =>
setDarkThemeLightPopoverActive((active) => !active)
}
activator={
<ThemeProvider theme="dark">
<Button
variant="tertiary"
icon={MenuHorizontalIcon}
accessibilityLabel="More actions"
onClick={() =>
setDarkThemeLightPopoverActive((active) => !active)
}
/>
</ThemeProvider>
}
>
<ActionList actionRole="menuitem" sections={sections} />
</Popover>
</ThemeProvider>
}
/>
</ThemeProvider>
</div>
</ThemeProvider>
);

const notificationsMenu = (
<ThemeProvider theme="dark-experimental">
<TopBar.Menu
activatorContent={<Icon source={NotificationIcon} />}
open={isNotificationsMenuOpen}
onOpen={toggleIsNotificationsMenuOpen}
onClose={toggleIsNotificationsMenuOpen}
actions={[
{
items: [{content: 'Dark theme popover'}],
},
]}
/>
</ThemeProvider>
);
}

function CustomerCard(props: {moreActions: React.ReactNode}) {
return (
<Card>
<div style={{display: 'grid', gap: 'var(--p-space-300)'}}>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr auto',
gap: 'var(--p-space-200)',
}}
>
<Text as="h2" variant="headingSm">
Customer
</Text>
{props.moreActions}
<Text as="p" variant="bodyMd">
John Smith
</Text>
</div>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr auto',
}}
>
<Text as="h3" variant="headingSm" fontWeight="medium">
Contact Information!
</Text>
<Button
icon={ClipboardIcon}
variant="tertiary"
accessibilityLabel="Copy email address"
/>
<Text as="p" variant="bodyMd">
[email protected]
</Text>
<span />
</div>
<div>
<Text as="h3" variant="headingSm" fontWeight="medium">
Address
</Text>
<div />
<Text as="p" variant="bodyMd">
1234 Street
<br />
Anytown, CA, 12345
</Text>
</div>
</div>
</Card>
<Frame
topBar={
<TopBar
secondaryMenu={
<InlineStack>
{sidekickMenu}
{notificationsMenu}
</InlineStack>
}
/>
}
/>
);
}

0 comments on commit 21135b7

Please sign in to comment.