Skip to content

Commit afa28e7

Browse files
georgewrmarshallgeorgewrmarshall
authored
feat: add Backgrounds example story for design token testing (#840)
## **Description** Adds a new Storybook example story that demonstrates the layered background token system and text/icon color variations. This story provides a visual showcase for testing and reviewing the brand color token updates implemented in PR #839. The story includes layered background examples (default → section → subsection), modal-style overlays, and comprehensive text/icon color demonstrations to validate the design token hierarchy and ensure proper color contrast relationships. ## **Related issues** Related to: #839 ## **Manual testing steps** 1. Run Storybook: `yarn storybook` 2. Navigate to **"Examples/Backgrounds"** in the sidebar 3. Review the layered background demonstrations: - **Background Default** → **Background Section** → **Background Subsection** hierarchy - **Background Alternative** with **Background Default** overlay (modal example) 4. Verify text and icon color variations: - Default text/icon colors - Alternative text/icon colors (updated to #9b9b9b) - Muted text/icon colors (updated to #48484e) 5. Compare with main branch Storybook to observe color differences 6. Test in both light and dark themes to ensure proper token application 7. Verify proper color contrast and visual hierarchy ## **Screenshots/Recordings** ### **Before** No previous version - this is a new story ### **After** <img width="1508" height="867" alt="Screenshot 2025-10-22 at 1 37 30 PM" src="https://github.com/user-attachments/assets/b067066a-9533-4725-9fb7-8fab96b4211d" /> <img width="1509" height="864" alt="Screenshot 2025-10-22 at 1 38 05 PM" src="https://github.com/user-attachments/assets/084d87ce-3d3e-40dd-8c1c-272e52ecaef3" /> ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Adds Backgrounds example stories (web and React Native) demonstrating layered background tokens and text/icon color variants, and registers the RN story in Storybook config. > > - **Storybook**: > - **New examples**: Adds `Examples/Backgrounds` stories in `apps/storybook-react/stories/Backgrounds.stories.tsx` and `apps/storybook-react-native/stories/Backgrounds.stories.tsx` showcasing layered background tokens (`BackgroundDefault → BackgroundSection → BackgroundSubsection`) with text/icon color variants and button examples. > - **React Native config**: Registers the new story in `apps/storybook-react-native/.storybook/storybook.requires.js`. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 5b50dee. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent 09a4e63 commit afa28e7

File tree

3 files changed

+235
-0
lines changed

3 files changed

+235
-0
lines changed

‎apps/storybook-react-native/.storybook/storybook.requires.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ const getStories = () => {
8484
"./../../packages/design-system-react-native/src/components/temp-components/TextOrChildren/TextOrChildren.stories.tsx": require("../../../packages/design-system-react-native/src/components/temp-components/TextOrChildren/TextOrChildren.stories.tsx"),
8585
"./../../packages/design-system-react-native/src/components/Text/Text.stories.tsx": require("../../../packages/design-system-react-native/src/components/Text/Text.stories.tsx"),
8686
"./../../packages/design-system-react-native/src/components/TextButton/TextButton.stories.tsx": require("../../../packages/design-system-react-native/src/components/TextButton/TextButton.stories.tsx"),
87+
"./stories/Backgrounds.stories.tsx": require("../stories/Backgrounds.stories.tsx"),
8788
"./stories/WalletHome.stories.tsx": require("../stories/WalletHome.stories.tsx"),
8889
};
8990
};

‎apps/storybook-react-native/stories/Backgrounds.stories.tsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import {
2+
Box,
3+
BoxAlignItems,
4+
BoxBackgroundColor,
5+
BoxFlexDirection,
6+
Icon,
7+
IconColor,
8+
IconName,
9+
Text,
10+
TextButton,
11+
TextColor,
12+
TextVariant,
13+
Button,
14+
ButtonVariant,
15+
} from '@metamask/design-system-react-native';
16+
import { useTailwind } from '@metamask/design-system-twrnc-preset';
17+
import type { Meta, StoryObj } from '@storybook/react';
18+
import React from 'react';
19+
import { ScrollView } from 'react-native';
20+
21+
const meta: Meta = {
22+
title: 'Examples/Backgrounds',
23+
component: () => null,
24+
};
25+
26+
export default meta;
27+
type Story = StoryObj;
28+
29+
const ButtonComponents = () => (
30+
<Box flexDirection={BoxFlexDirection.Row} gap={2}>
31+
<Button variant={ButtonVariant.Primary}>Primary Button</Button>
32+
<Button variant={ButtonVariant.Secondary}>Secondary Button</Button>
33+
<Button variant={ButtonVariant.Tertiary}>Tertiary Button</Button>
34+
<TextButton>Text Button</TextButton>
35+
</Box>
36+
);
37+
38+
const TextComponents = () => (
39+
<>
40+
<Text variant={TextVariant.HeadingSm}>Text & Icon Colors</Text>
41+
<Box twClassName="space-y-2">
42+
<Box
43+
flexDirection={BoxFlexDirection.Row}
44+
alignItems={BoxAlignItems.Center}
45+
gap={2}
46+
>
47+
<Icon name={IconName.Info} />
48+
<Text>Text Default and Icon Default</Text>
49+
</Box>
50+
<Box
51+
flexDirection={BoxFlexDirection.Row}
52+
alignItems={BoxAlignItems.Center}
53+
gap={2}
54+
>
55+
<Icon name={IconName.Info} color={IconColor.IconAlternative} />
56+
<Text color={TextColor.TextAlternative}>
57+
Text Alternative and Icon Alternative
58+
</Text>
59+
</Box>
60+
<Box
61+
flexDirection={BoxFlexDirection.Row}
62+
alignItems={BoxAlignItems.Center}
63+
gap={2}
64+
>
65+
<Icon name={IconName.Info} color={IconColor.IconMuted} />
66+
<Text color={TextColor.TextMuted}>Text Muted and Icon Muted</Text>
67+
</Box>
68+
</Box>
69+
</>
70+
);
71+
72+
const Backgrounds: React.FC = () => {
73+
const tw = useTailwind();
74+
return (
75+
<ScrollView style={tw`flex-1 bg-default`}>
76+
<Box
77+
twClassName="w-full"
78+
backgroundColor={BoxBackgroundColor.BackgroundDefault}
79+
>
80+
{/* Background Default */}
81+
<Box
82+
flexDirection={BoxFlexDirection.Column}
83+
gap={4}
84+
twClassName="rounded-2xl"
85+
>
86+
<Text variant={TextVariant.HeadingMd}>Background Default</Text>
87+
<TextComponents />
88+
<ButtonComponents />
89+
{/* Background Section */}
90+
<Box
91+
twClassName="p-4 rounded-2xl"
92+
backgroundColor={BoxBackgroundColor.BackgroundSection}
93+
flexDirection={BoxFlexDirection.Column}
94+
gap={4}
95+
>
96+
<Text variant={TextVariant.HeadingMd}>Background Section</Text>
97+
<TextComponents />
98+
<ButtonComponents />
99+
100+
{/* Background Subsection */}
101+
<Box
102+
twClassName="p-4 rounded-2xl"
103+
backgroundColor={BoxBackgroundColor.BackgroundSubsection}
104+
flexDirection={BoxFlexDirection.Column}
105+
gap={4}
106+
>
107+
<Text variant={TextVariant.HeadingMd}>Background Subsection</Text>
108+
<TextComponents />
109+
<ButtonComponents />
110+
</Box>
111+
</Box>
112+
</Box>
113+
</Box>
114+
</ScrollView>
115+
);
116+
};
117+
118+
export const Default: Story = {
119+
render: () => <Backgrounds />,
120+
};

‎apps/storybook-react/stories/Backgrounds.stories.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import {
2+
Box,
3+
BoxAlignItems,
4+
BoxBackgroundColor,
5+
BoxFlexDirection,
6+
Icon,
7+
IconColor,
8+
IconName,
9+
Text,
10+
TextColor,
11+
TextVariant,
12+
Button,
13+
ButtonVariant,
14+
TextButton,
15+
} from '@metamask/design-system-react';
16+
import type { Meta, StoryObj } from '@storybook/react';
17+
import React from 'react';
18+
19+
const meta: Meta = {
20+
title: 'Examples/Backgrounds',
21+
component: () => null,
22+
};
23+
24+
export default meta;
25+
type Story = StoryObj;
26+
27+
const ButtonComponents = () => (
28+
<Box flexDirection={BoxFlexDirection.Row} gap={2}>
29+
<Button variant={ButtonVariant.Primary}>Primary Button</Button>
30+
<Button variant={ButtonVariant.Secondary}>Secondary Button</Button>
31+
<Button variant={ButtonVariant.Tertiary}>Tertiary Button</Button>
32+
<TextButton>Text Button</TextButton>
33+
</Box>
34+
);
35+
36+
const TextComponents = () => (
37+
<>
38+
<Text variant={TextVariant.HeadingSm}>Text & Icon Colors</Text>
39+
<Box className="space-y-2">
40+
<Box
41+
flexDirection={BoxFlexDirection.Row}
42+
alignItems={BoxAlignItems.Center}
43+
gap={2}
44+
>
45+
<Icon name={IconName.Info} />
46+
<Text>Text Default and Icon Default</Text>
47+
</Box>
48+
<Box
49+
flexDirection={BoxFlexDirection.Row}
50+
alignItems={BoxAlignItems.Center}
51+
gap={2}
52+
>
53+
<Icon name={IconName.Info} color={IconColor.IconAlternative} />
54+
<Text color={TextColor.TextAlternative}>
55+
Text Alternative and Icon Alternative
56+
</Text>
57+
</Box>
58+
<Box
59+
flexDirection={BoxFlexDirection.Row}
60+
alignItems={BoxAlignItems.Center}
61+
gap={2}
62+
>
63+
<Icon name={IconName.Info} color={IconColor.IconMuted} />
64+
<Text color={TextColor.TextMuted}>Text Muted and Icon Muted</Text>
65+
</Box>
66+
</Box>
67+
</>
68+
);
69+
70+
const Backgrounds: React.FC = () => {
71+
return (
72+
<Box backgroundColor={BoxBackgroundColor.BackgroundDefault}>
73+
{/* Background Default */}
74+
<Box
75+
flexDirection={BoxFlexDirection.Column}
76+
gap={4}
77+
className="rounded-2xl"
78+
>
79+
<Text variant={TextVariant.HeadingMd}>Background Default</Text>
80+
<TextComponents />
81+
<ButtonComponents />
82+
83+
{/* Background Section */}
84+
<Box
85+
backgroundColor={BoxBackgroundColor.BackgroundSection}
86+
padding={4}
87+
flexDirection={BoxFlexDirection.Column}
88+
gap={4}
89+
className="rounded-2xl"
90+
>
91+
<Text variant={TextVariant.HeadingMd}>Background Section</Text>
92+
<TextComponents />
93+
<ButtonComponents />
94+
{/* Background Subsection */}
95+
<Box
96+
backgroundColor={BoxBackgroundColor.BackgroundSubsection}
97+
padding={4}
98+
flexDirection={BoxFlexDirection.Column}
99+
gap={4}
100+
className="rounded-2xl"
101+
>
102+
<Text variant={TextVariant.HeadingMd}>Background Subsection</Text>
103+
<TextComponents />
104+
<ButtonComponents />
105+
</Box>
106+
</Box>
107+
</Box>
108+
</Box>
109+
);
110+
};
111+
112+
export const Default: Story = {
113+
render: () => <Backgrounds />,
114+
};

0 commit comments

Comments
 (0)