Merge pull request #747 from strapi/enhancement/status

Status: Add small variant

Author: gu-stav

packages/strapi-design-system/src/Status/Status.js

@@ -19,22 +19,25 @@ const StatusWrapper = styled(Box)`
   }
 `;
 
-export const Status = ({ variant, showBullet, children, ...props }) => {
+export const Status = ({ variant, showBullet, size, children, ...props }) => {
   const backgroundColor = `${variant}100`;
   const borderColor = `${variant}200`;
   const bulletColor = `${variant}600`;
   const textColor = `${variant}600`;
 
+  const paddingX = size === 'S' ? 2 : 5;
+  const paddingY = size === 'S' ? 1 : 4;
+
   return (
     <StatusWrapper
       borderColor={borderColor}
       textColor={textColor}
       background={backgroundColor}
       hasRadius
-      paddingTop={4}
-      paddingBottom={4}
-      paddingLeft={5}
-      paddingRight={5}
+      paddingTop={paddingY}
+      paddingBottom={paddingY}
+      paddingLeft={paddingX}
+      paddingRight={paddingX}
       {...props}
     >
       {showBullet ? (
@@ -51,6 +54,7 @@ export const Status = ({ variant, showBullet, children, ...props }) => {
 
 Status.defaultProps = {
   showBullet: true,
+  size: 'M',
   variant: 'primary',
 };
 
@@ -63,6 +67,8 @@ Status.propTypes = {
    */
   showBullet: PropTypes.bool, // TODO V2: remove prop and bullet
 
+  size: PropTypes.oneOf(['S', 'M']),
+
   /**
    * Color variation
    */

packages/strapi-design-system/src/Status/Status.stories.mdx

@@ -35,12 +35,12 @@ Use a Status sparingly within forms to give an important visual indication. Stat
 <Canvas>
   <Story name="base">
     <Stack spacing={3}>
-      <Status variant="success">
+      <Status variant="success" showBullet={false}>
         <Typography>
           Hello world <Typography fontWeight="bold">thing happens</Typography>
         </Typography>
       </Status>
-      <Status variant="secondary">
+      <Status variant="secondary" showBullet={false}>
         <Typography>
           Hello world <Typography fontWeight="bold">thing happens</Typography>
         </Typography>
@@ -49,6 +49,25 @@ Use a Status sparingly within forms to give an important visual indication. Stat
   </Story>
 </Canvas>
 
+
+### Size
+
+<Canvas>
+  <Story name="size S">
+    <Stack spacing={3}>
+      <Status variant="success" size="S" showBullet={false}>
+        <Typography fontWeight="bold" textColor="success700">Published</Typography>
+      </Status>
+      <Status variant="secondary" size="S" showBullet={false}>
+        <Typography fontWeight="bold" textColor="secondary700">Draft</Typography>
+      </Status>
+      <Status variant="alternative" size="S" showBullet={false}>
+        <Typography fontWeight="bold" textColor="alternative700">Updated</Typography>
+      </Status>
+    </Stack>
+  </Story>
+</Canvas>
+
 ## Props
 
 The Status component wraps all its children in the (Box)[https://design-system-git-main-strapijs.vercel.app/?path=/docs/design-system-technical-components-box--base] component, so you can pass all Box props to change its style.