feat(BoemlyList): Add textSize property

treely · Oct 7, 2022 · 4b8efb9 · 4b8efb9 · vercel · Oct 7, 2022
1 parent 767f9ef
commit 4b8efb9
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 2 deletions.
diff --git a/src/components/BoemlyList/BoemlyList.stories.tsx b/src/components/BoemlyList/BoemlyList.stories.tsx
@@ -3,10 +3,19 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import { Heart } from 'phosphor-react';
 import { BoemlyList } from './BoemlyList';
+import { TEXT_SIZES } from '../../constants/textSizes';
 
 export default {
   title: 'components/BoemlyList',
   component: BoemlyList,
+  argTypes: {
+    ordered: { control: { type: 'boolean' } },
+    textColor: { control: { type: 'color' } },
+    textSize: {
+      options: TEXT_SIZES,
+      control: { type: 'radio' },
+    },
+  },
 } as ComponentMeta<typeof BoemlyList>;
 
 const Template: ComponentStory<typeof BoemlyList> = (args) => <BoemlyList {...args} />;
@@ -39,3 +48,9 @@ WithCustomTextColor.args = {
   listItems,
   textColor: 'primary.500',
 };
+
+export const WithCustomTextSize = Template.bind({});
+WithCustomTextSize.args = {
+  listItems,
+  textSize: 'xsRegularNormal',
+};
diff --git a/src/components/BoemlyList/BoemlyList.tsx b/src/components/BoemlyList/BoemlyList.tsx
@@ -9,18 +9,20 @@ export interface BoemlyListProps extends ListProps {
   icon?: ReactNode;
   ordered?: boolean;
   textColor?: string;
+  textSize?: TextSize;
 }
 
 export const BoemlyList: React.FC<BoemlyListProps> = ({
   listItems,
   icon = <Box width="1.5" height="1.5" borderRadius="full" bg="black" />,
   ordered = false,
   textColor = 'black',
+  textSize = 'mdRegularNormal',
   ...props
 }: BoemlyListProps) => (
   <List spacing="4" as={ordered ? 'ol' : 'ul'} {...props}>
     {listItems.map(({ id, text }, index) => (
-      <ListItem key={id}>
+      <ListItem key={id} display="flex" alignItems="center">
         <ListIcon
           as={() => (
             <Center width="6" height="6" bg="primary.50" borderRadius="lg" float="left" mr="4">
@@ -35,7 +37,7 @@ export const BoemlyList: React.FC<BoemlyListProps> = ({
           )}
         />
 
-        <Text size="mdRegularNormal" color={textColor}>
+        <Text size={textSize} color={textColor}>
           {text}
         </Text>
       </ListItem>

diff --git a/src/constants/textSizes.ts b/src/constants/textSizes.ts
@@ -0,0 +1,32 @@
+export const TEXT_SIZES: TextSize[] = [
+  'xlRegularNormal',
+  'xlRegularNormalBold',
+  'xlLowNormal',
+  'xlLowBold',
+  'xlMonoNormal',
+  'xlMonoUppercase',
+  'lgRegularNormal',
+  'lgRegularNormalBold',
+  'lgLowNormal',
+  'lgLowBold',
+  'lgMonoNormal',
+  'lgMonoUppercase',
+  'mdRegularNormal',
+  'mdRegularNormalBold',
+  'mdLowNormal',
+  'mdLowBold',
+  'mdMonoNormal',
+  'mdMonoUppercase',
+  'smRegularNormal',
+  'smRegularNormalBold',
+  'smLowNormal',
+  'smLowBold',
+  'smMonoNormal',
+  'smMonoUppercase',
+  'xsRegularNormal',
+  'xsRegularNormalBold',
+  'xsLowNormal',
+  'xsLowBold',
+  'xsMonoNormal',
+  'xsMonoUppercase',
+];
diff --git a/src/types/TextSize.ts b/src/types/TextSize.ts
@@ -0,0 +1,31 @@
+type TextSize =
+  | 'xlRegularNormal'
+  | 'xlRegularNormalBold'
+  | 'xlLowNormal'
+  | 'xlLowBold'
+  | 'xlMonoNormal'
+  | 'xlMonoUppercase'
+  | 'lgRegularNormal'
+  | 'lgRegularNormalBold'
+  | 'lgLowNormal'
+  | 'lgLowBold'
+  | 'lgMonoNormal'
+  | 'lgMonoUppercase'
+  | 'mdRegularNormal'
+  | 'mdRegularNormalBold'
+  | 'mdLowNormal'
+  | 'mdLowBold'
+  | 'mdMonoNormal'
+  | 'mdMonoUppercase'
+  | 'smRegularNormal'
+  | 'smRegularNormalBold'
+  | 'smLowNormal'
+  | 'smLowBold'
+  | 'smMonoNormal'
+  | 'smMonoUppercase'
+  | 'xsRegularNormal'
+  | 'xsRegularNormalBold'
+  | 'xsLowNormal'
+  | 'xsLowBold'
+  | 'xsMonoNormal'
+  | 'xsMonoUppercase';