Skip to content

Commit

Permalink
WB-1587.3: Add khanmigo theme to IconButton (#2091)
Browse files Browse the repository at this point in the history 
## Summary:

Final PR for adding khanmigo theming support to the IconButton component.

This includes the following changes:

- Add a new theme file for khanmigo.
- Included the khanmigo theme in the "All variants" stories.
- Added some new tokens to the default theme to support some changes the khanmigo theme.

Issue: WB-1587

## Test plan:

Verify that the khanmigo theme is working as expected in the "All variants"
stories, and that we didn't introduce any regressions in the default theme.

Author: jandrade

Reviewers: nishasy

Required Reviewers:

Approved By: nishasy

Checks: ❌ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Lint (ubuntu-latest, 16.x), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 16.x), ⏭  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ✅ gerald, ⏭  dependabot

Pull Request URL: #2091
  • Loading branch information
@jandrade
jandrade authored Oct 31, 2023
1 parent a1675f6 commit 0d87550
Show file tree
Hide file tree
Showing 8 changed files with 620 additions and 211 deletions.
5 changes: 5 additions & 0 deletions .changeset/small-olives-sip.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/wonder-blocks-icon-button": minor
---

Add khanmigo theme to `IconButton`
130 changes: 88 additions & 42 deletions __docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type {Meta, StoryObj} from "@storybook/react";
import paperPlaneIcon from "@phosphor-icons/core/fill/paper-plane-tilt-fill.svg";
import {View} from "@khanacademy/wonder-blocks-core";
import Spacing from "@khanacademy/wonder-blocks-spacing";
import {tokens} from "@khanacademy/wonder-blocks-theming";
import {ThemeSwitcherContext, tokens} from "@khanacademy/wonder-blocks-theming";
import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
import IconButton from "@khanacademy/wonder-blocks-icon-button";

Expand All @@ -33,56 +33,99 @@ const KindVariants = ({
light: boolean;
}) => {
return (
<>
<View style={[styles.gridRow, light && styles.darkDefault]}>
<LabelMedium style={light && {color: tokens.color.white}}>
{kind}-default
</LabelMedium>
<IconButton
icon={paperPlaneIcon}
onClick={action("clicked")}
kind={kind}
light={light}
color="default"
/>
</View>
<View style={[styles.gridRow, light && styles.darkDefault]}>
<LabelMedium style={light && {color: tokens.color.white}}>
{kind}-destructive
</LabelMedium>
<IconButton
icon={paperPlaneIcon}
onClick={action("clicked")}
kind={kind}
light={light}
color="destructive"
/>
</View>
<View style={[styles.gridRow, light && styles.darkDefault]}>
<LabelMedium style={light && {color: tokens.color.white}}>
{kind}-disabled
</LabelMedium>
<IconButton
icon={paperPlaneIcon}
onClick={action("clicked")}
kind={kind}
light={light}
disabled={true}
/>
</View>
</>
<ThemeSwitcherContext.Consumer>
{(theme) => (
<>
<View
style={[
styles.gridRow,
light &&
(theme === "khanmigo"
? styles.darkKhanmigo
: styles.darkDefault),
]}
>
<LabelMedium
style={light && {color: tokens.color.white}}
>
{kind}-default
</LabelMedium>
<IconButton
icon={paperPlaneIcon}
onClick={action("clicked")}
kind={kind}
light={light}
color="default"
/>
</View>
<View
style={[
styles.gridRow,
light &&
(theme === "khanmigo"
? styles.darkKhanmigo
: styles.darkDefault),
]}
>
<LabelMedium
style={light && {color: tokens.color.white}}
>
{kind}-destructive
</LabelMedium>
<IconButton
icon={paperPlaneIcon}
onClick={action("clicked")}
kind={kind}
light={light}
color="destructive"
/>
</View>
<View
style={[
styles.gridRow,
light &&
(theme === "khanmigo"
? styles.darkKhanmigo
: styles.darkDefault),
]}
>
<LabelMedium
style={light && {color: tokens.color.white}}
>
{kind}-disabled
</LabelMedium>
<IconButton
icon={paperPlaneIcon}
onClick={action("clicked")}
kind={kind}
light={light}
disabled={true}
/>
</View>
</>
)}
</ThemeSwitcherContext.Consumer>
);
};

const AllVariants = () => (
<>
<HeadingLarge>Default theme</HeadingLarge>
const VariantsByTheme = ({themeName = "Default"}: {themeName?: string}) => (
<View style={{marginBottom: Spacing.large_24}}>
<HeadingLarge>{themeName} theme</HeadingLarge>
<View style={styles.grid}>
<KindVariants kind="primary" light={false} />
<KindVariants kind="secondary" light={false} />
<KindVariants kind="tertiary" light={false} />
<KindVariants kind="primary" light={true} />
</View>
</View>
);

const AllVariants = () => (
<>
<VariantsByTheme />
<ThemeSwitcherContext.Provider value="khanmigo">
<VariantsByTheme themeName="Khanmigo" />
</ThemeSwitcherContext.Provider>
</>
);

Expand Down Expand Up @@ -115,6 +158,9 @@ const styles = StyleSheet.create({
darkDefault: {
backgroundColor: tokens.color.darkBlue,
},
darkKhanmigo: {
backgroundColor: tokens.color.eggplant,
},
grid: {
display: "grid",
gridTemplateColumns: "repeat(3, 250px)",
Expand Down
Loading

0 comments on commit 0d87550

Please sign in to comment.