feat(pill): update types

carlsberg · Jun 26, 2024 · 53214e1 · 53214e1
1 parent 3af9aa5
commit 53214e1
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 15 deletions.
diff --git a/malty/atoms/Pill/Pill.helper.tsx b/malty/atoms/Pill/Pill.helper.tsx
@@ -8,7 +8,7 @@ export const usePillStyles = ({ size }: UsePillStylesProps) => {
   const theme = useContext(ThemeContext) || defaultTheme;
 
   const pillStyles = {
-    [PillSize.XSmall]: {
+    [PillSize.XS]: {
       numSize: theme.sizesV2.s,
       fontWeight: theme.typographyV2.montserrat.body[10].semibold.fontWeight,
       lineHeight: theme.typographyV2.montserrat.body[10].semibold.lineHeight,
@@ -17,7 +17,7 @@ export const usePillStyles = ({ size }: UsePillStylesProps) => {
       padding: `${theme.sizesV2['4xs']} ${theme.sizesV2['3xs']}`,
       gap: theme.sizesV2['5xs']
     },
-    [PillSize.Small]: {
+    [PillSize.S]: {
       numSize: theme.sizesV2.m,
       fontWeight: theme.typographyV2.montserrat.body[10].semibold.fontWeight,
       lineHeight: theme.typographyV2.montserrat.body[10].semibold.lineHeight,
@@ -26,7 +26,7 @@ export const usePillStyles = ({ size }: UsePillStylesProps) => {
       padding: `${theme.sizesV2['4xs']} ${theme.sizesV2['3xs']}`,
       gap: theme.sizesV2['4xs']
     },
-    [PillSize.Medium]: {
+    [PillSize.M]: {
       numSize: theme.sizesV2.xl,
       fontWeight: theme.typographyV2.montserrat.body[14].semibold.fontWeight,
       lineHeight: theme.typographyV2.montserrat.body[14].semibold.lineHeight,

diff --git a/malty/atoms/Pill/Pill.stories.tsx b/malty/atoms/Pill/Pill.stories.tsx
@@ -73,7 +73,7 @@ export const Base: Story = {
   args: {
     text: 'Text',
     type: PillType.Primary,
-    size: PillSize.Medium,
+    size: PillSize.M,
     isUppercase: false
   }
 };

diff --git a/malty/atoms/Pill/Pill.styled.ts b/malty/atoms/Pill/Pill.styled.ts
@@ -25,15 +25,15 @@ export const StyledPill = styled.div<StyledPillProps>`
     let gap;
 
     if ($hasIcon && !$hasText) {
-      if ($pillSize === PillSize.XSmall) {
+      if ($pillSize === PillSize.XS) {
         padding = theme.sizesV2['4xs'];
         gap = theme.sizesV2['5xs'];
       }
-      if ($pillSize === PillSize.Small) {
+      if ($pillSize === PillSize.S) {
         padding = theme.sizesV2['4xs'];
         gap = theme.sizesV2['4xs'];
       }
-      if ($pillSize === PillSize.Medium) {
+      if ($pillSize === PillSize.M) {
         padding = theme.sizesV2['4xs'];
         gap = theme.sizesV2['3xs'];
       }

diff --git a/malty/atoms/Pill/Pill.tsx b/malty/atoms/Pill/Pill.tsx
@@ -8,7 +8,7 @@ export const Pill = ({
   text,
   icon,
   type = PillType.Primary,
-  size = PillSize.Medium,
+  size = PillSize.M,
   iconPosition = IconPosition.Leading,
   isUppercase = false,
   dataTestId,

diff --git a/malty/atoms/Pill/Pill.types.ts b/malty/atoms/Pill/Pill.types.ts
@@ -13,9 +13,9 @@ export interface PillProps extends React.HTMLAttributes<HTMLElement>, SpaceProps
 }
 
 export enum PillSize {
-  XSmall = 'xs',
-  Small = 's',
-  Medium = 'm'
+  XS = 'xs',
+  S = 's',
+  M = 'm'
 }
 
 export enum PillType {

diff --git a/malty/molecules/Banner/Banner.tsx b/malty/molecules/Banner/Banner.tsx
@@ -26,7 +26,7 @@ export const Banner = ({
   const labelProps: PillProps = {
     text: label && typeof label === 'string' ? label : '',
     type: negative ? PillType.Archive : PillType.Primary,
-    size: PillSize.Medium,
+    size: PillSize.M,
     icon: undefined
   };
   if (label && typeof label === 'object') {

diff --git a/malty/molecules/ProductCard/ProductCard.tsx b/malty/molecules/ProductCard/ProductCard.tsx
@@ -114,7 +114,7 @@ export const ProductCard = ({
                     <Pill
                       text={discountPill?.text}
                       type={discountPill?.type}
-                      size={isMobile ? PillSize.XSmall : PillSize.Small}
+                      size={isMobile ? PillSize.XS : PillSize.S}
                       icon={discountPill?.icon}
                     />
                   </StyledDiscountPill>
@@ -124,7 +124,7 @@ export const ProductCard = ({
                   <Pill
                     text={promoPill?.text}
                     type={promoPill?.type}
-                    size={isMobile ? PillSize.XSmall : PillSize.Small}
+                    size={isMobile ? PillSize.XS : PillSize.S}
                     icon={promoPill?.icon}
                   />
                 ) : null}
@@ -133,7 +133,7 @@ export const ProductCard = ({
                 <Pill
                   text={cartPill?.text}
                   type={cartPill?.type}
-                  size={isMobile ? PillSize.XSmall : PillSize.Small}
+                  size={isMobile ? PillSize.XS : PillSize.S}
                   icon={cartPill?.icon}
                 />
               ) : null}