feat: hide non-filled chip variants

Simspace · Jul 21, 2023 · 0d1f99f · 0d1f99f
1 parent 9f8eec1
commit 0d1f99f
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 192 deletions.
diff --git a/packages/storybook/src/Chip/Chip.stories.tsx b/packages/storybook/src/Chip/Chip.stories.tsx
@@ -23,9 +23,10 @@ import {
   TagFaces,
   Warning,
 } from '@monorail/components/icons'
+import { useTheme } from '@monorail/utils'
 
 import { capitalizeFirstLetter } from '../helpers/helpers.js'
-import { story } from '../helpers/storybook.js'
+import { isMeteorTheme, story } from '../helpers/storybook.js'
 
 /**
  * Metadata for Chip stories - update/extend as needed
@@ -53,7 +54,12 @@ const args: Partial<ChipStoryArgs> = {
 
 const argTypes = {
   variant: {
-    options: ['filled', 'outlined', 'muted', 'rectangular'],
+    options: [
+      'filled',
+      'outlined (N/A in Meteor)',
+      'muted  (N/A in Meteor)',
+      'rectangular (N/A in Meteor)',
+    ],
     control: {
       type: 'radio',
     },
@@ -91,41 +97,60 @@ const colors = [
 export const Variants = story<ChipStoryArgs>(
   args => {
     const { avatar, avatarText, icon, dismissible, ...chipArgs } = args
+    const theme = useTheme()
     return (
-      <Stack direction="row" spacing={2}>
-        <Chip
-          label="Muted"
-          variant="muted"
-          {...chipArgs}
-          avatar={avatar === true ? <Avatar>{avatarText}</Avatar> : undefined}
-          icon={icon === true ? <Face /> : undefined}
-          onDelete={dismissible === true ? action('onDelete') : undefined}
-        />
-        <Chip
-          label="Filled"
-          variant="filled"
-          {...chipArgs}
-          avatar={avatar === true ? <Avatar>{avatarText}</Avatar> : undefined}
-          icon={icon === true ? <Face /> : undefined}
-          onDelete={dismissible === true ? action('onDelete') : undefined}
-        />
-        <Chip
-          label="Outlined"
-          variant="outlined"
-          {...chipArgs}
-          avatar={avatar === true ? <Avatar>{avatarText}</Avatar> : undefined}
-          icon={icon === true ? <Face /> : undefined}
-          onDelete={dismissible === true ? action('onDelete') : undefined}
-        />
-        <Chip
-          label="Rectangular"
-          variant="rectangular"
-          {...chipArgs}
-          avatar={avatar === true ? <Avatar>{avatarText}</Avatar> : undefined}
-          icon={icon === true ? <Face /> : undefined}
-          onDelete={dismissible === true ? action('onDelete') : undefined}
-        />
-      </Stack>
+      <div>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Chip
+            label="Filled"
+            variant="filled"
+            {...chipArgs}
+            avatar={avatar === true ? <Avatar>{avatarText}</Avatar> : undefined}
+            icon={icon === true ? <Face /> : undefined}
+            onDelete={dismissible === true ? action('onDelete') : undefined}
+          />
+          {!isMeteorTheme(theme.name) && (
+            <>
+              <Chip
+                label="Muted"
+                variant="muted"
+                {...chipArgs}
+                avatar={
+                  avatar === true ? <Avatar>{avatarText}</Avatar> : undefined
+                }
+                icon={icon === true ? <Face /> : undefined}
+                onDelete={dismissible === true ? action('onDelete') : undefined}
+              />
+              <Chip
+                label="Outlined"
+                variant="outlined"
+                {...chipArgs}
+                avatar={
+                  avatar === true ? <Avatar>{avatarText}</Avatar> : undefined
+                }
+                icon={icon === true ? <Face /> : undefined}
+                onDelete={dismissible === true ? action('onDelete') : undefined}
+              />
+              <Chip
+                label="Rectangular"
+                variant="rectangular"
+                {...chipArgs}
+                avatar={
+                  avatar === true ? <Avatar>{avatarText}</Avatar> : undefined
+                }
+                icon={icon === true ? <Face /> : undefined}
+                onDelete={dismissible === true ? action('onDelete') : undefined}
+              />
+            </>
+          )}
+        </Stack>
+        {isMeteorTheme(theme.name) && (
+          <Typography variant="body2" mt={6}>
+            The Muted, Outlined, and Rectangular variants are not available in
+            the Meteor theme.
+          </Typography>
+        )}
+      </div>
     )
   },
   {

diff --git a/packages/storybook/src/Chip/ChipShowcase.stories.tsx b/packages/storybook/src/Chip/ChipShowcase.stories.tsx
@@ -6,9 +6,10 @@ import { action } from '@storybook/addon-actions'
 
 import type { ChipProps } from '@monorail/components'
 import { Avatar, Chip, Stack, Typography } from '@monorail/components'
+import { useTheme } from '@monorail/utils'
 
 import { capitalizeFirstLetter } from '../helpers/helpers.js'
-import { story } from '../helpers/storybook.js'
+import { isMeteorTheme, story } from '../helpers/storybook.js'
 
 /**
  * Metadata for Chip stories - update/extend as needed
@@ -95,6 +96,7 @@ export const Filled = story<ChipProps>(() => {
 })
 
 export const Outlined = story<ChipProps>(() => {
+  const theme = useTheme()
   const examples = React.useMemo(() => {
     return {
       readOnly: colors.map(color => (
@@ -138,7 +140,9 @@ export const Outlined = story<ChipProps>(() => {
     }
   }, [])
 
-  return (
+  return isMeteorTheme(theme.name) ? (
+    <Typography>This variant is not available in the Meteor theme</Typography>
+  ) : (
     <Stack>
       <Stack direction="row" spacing={4}>
         <Stack direction="column" alignItems="flex-start" spacing={2}>
@@ -163,7 +167,10 @@ export const Outlined = story<ChipProps>(() => {
 })
 
 export const Rectangular = story<ChipProps>(() => {
-  return (
+  const theme = useTheme()
+  return isMeteorTheme(theme.name) ? (
+    <Typography>This variant is not available in the Meteor theme</Typography>
+  ) : (
     <Stack>
       <Stack direction="row" spacing={4}>
         <Stack direction="column" alignItems="flex-start" spacing={2}>
@@ -212,7 +219,10 @@ export const Rectangular = story<ChipProps>(() => {
 })
 
 export const Muted = story<ChipProps>(() => {
-  return (
+  const theme = useTheme()
+  return isMeteorTheme(theme.name) ? (
+    <Typography>This variant is not available in the Meteor theme</Typography>
+  ) : (
     <Stack>
       <Stack direction="row" spacing={4}>
         <Stack direction="column" alignItems="flex-start" spacing={2}>

diff --git a/packages/storybook/src/helpers/storybook.ts b/packages/storybook/src/helpers/storybook.ts
@@ -264,3 +264,6 @@ export const getRawColorObject = (themeName: ThemeName) => {
       return MeteorDarkRawColors
   }
 }
+
+export const isMeteorTheme = (themeName: ThemeName) =>
+  themeName === ThemeName.MeteorLight || themeName === ThemeName.MeteorDark