feat(label): add small variant

mondaycom · May 15, 2024 · 737cb13 · 737cb13
1 parent dbd5ac0
commit 737cb13
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/packages/core/src/components/Label/Label.tsx b/packages/core/src/components/Label/Label.tsx
@@ -12,6 +12,14 @@ import useClickableProps from "../../hooks/useClickableProps/useClickableProps";
 import useMergeRef from "../../hooks/useMergeRef";
 import styles from "./Label.module.scss";
 import LabelCelebrationAnimation from "./LabelCelebrationAnimation";
+import { TextType } from "../Text/TextConstants";
+
+type Sizes = "small" | "medium";
+
+const mapSizesToTextSize: Record<Sizes, TextType> = {
+  small: Text.types.TEXT3,
+  medium: Text.types.TEXT2
+};
 
 export interface LabelProps extends VibeComponentProps {
   /**
@@ -29,6 +37,7 @@ export interface LabelProps extends VibeComponentProps {
   isLegIncluded?: boolean;
   onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
   celebrationAnimation?: boolean;
+  size?: Sizes;
 }
 
 const Label: VibeComponent<LabelProps> & {
@@ -48,7 +57,8 @@ const Label: VibeComponent<LabelProps> & {
       id,
       "data-testid": dataTestId,
       onClick,
-      celebrationAnimation
+      celebrationAnimation,
+      size = "medium"
     },
     ref
   ) => {
@@ -111,12 +121,12 @@ const Label: VibeComponent<LabelProps> & {
         >
           <Text
             element="span"
-            type={Text.types.TEXT2}
+            type={mapSizesToTextSize[size]}
             className={classNames}
             color={Text.colors.ON_INVERTED}
             data-celebration-text={isCelebrationAnimation}
           >
-            <Text element="span" type={Text.types.TEXT2} color={Text.colors.INHERIT}>
+            <Text element="span" type={mapSizesToTextSize[size]} color={Text.colors.INHERIT}>
               {text}
             </Text>
             <span className={cx(styles.legWrapper)}>{isLegIncluded ? <Leg /> : null}</span>
@@ -133,7 +143,8 @@ const Label: VibeComponent<LabelProps> & {
       classNames,
       isCelebrationAnimation,
       text,
-      isLegIncluded
+      isLegIncluded,
+      size
     ]);
 
     // Celebration animation is applied only for line kind

diff --git a/packages/core/src/components/Label/__stories__/label.mdx b/packages/core/src/components/Label/__stories__/label.mdx
@@ -46,6 +46,12 @@ A label indicates the status of an item.
 
 <Canvas of={LabelStories.Kinds} />
 
+### Size
+
+Label can appear in 2 sizes: small and medium.
+
+<Canvas of={LabelStories.Sizes} />
+
 ### Colors
 
 <Canvas of={LabelStories.Colors} />

diff --git a/packages/core/src/components/Label/__stories__/label.stories.tsx b/packages/core/src/components/Label/__stories__/label.stories.tsx
@@ -56,6 +56,27 @@ export const Kinds = {
   }
 };
 
+export const Sizes = {
+  render: () => (
+    <>
+      <div className="monday-storybook-label_group monday-storybook-label_states-gap">
+        <Label text="New" />
+      </div>
+      <div className="monday-storybook-label_group monday-storybook-label_states-gap">
+        <Label text="New" size="small" />
+      </div>
+    </>
+  ),
+
+  name: "Sizes",
+
+  parameters: {
+    chromatic: {
+      pauseAnimationAtEnd: true
+    }
+  }
+};
+
 export const Colors = {
   render: () => (
     <>