@strapi/design-system 1.3.0-beta.0 → 1.3.0-beta.1

package/.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+  env: {
+    jest: true,
+    browser: true,
+    node: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+  extends: [
+    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  rules: {
+    'react/sort-prop-types': 1,
+    'default-case': 'error',
+    'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }],
+    'no-undef': 'error',
+  },
+  overrides: [
+    {
+      files: '*.mdx',
+      parser: 'eslint-mdx',
+      rules: {
+        'react/react-in-jsx-scope': 'off',
+      },
+    },
+  ],
+};

package/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: "all",
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+};

package/babel.config.js

@@ -0,0 +1,5 @@
+// Used by jest
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+  plugins: [['@babel/plugin-transform-runtime']],
+};

package/createIndexFiles.js

@@ -0,0 +1,34 @@
+const fs = require('fs-extra');
+const path = require('path');
+const excludedFolders = require('../../tools/excludedFolders');
+
+const isV2Build = process.env.IS_V2 === 'true';
+let entryFolder = isV2Build ? path.resolve(__dirname, 'src', 'v2') : path.resolve(__dirname, 'src');
+const fileNames = fs.readdirSync(entryFolder);
+const entries = fileNames.filter((name) => !excludedFolders.includes(name));
+
+const createIndexFile = async (fileName) => {
+  const name = fileName.replace('.js', '');
+  const content = `
+  'use strict';
+  
+  if (process.env.NODE_ENV === "production") {
+    module.exports = require("./${name}.production.js");
+  } else {
+    module.exports = require("./${name}.development.js");
+  }
+  `;
+
+  try {
+    const outputPath = isV2Build
+      ? path.resolve(__dirname, 'dist', 'v2', `${name}.js`)
+      : path.resolve(__dirname, 'dist', `${name}.js`);
+    fs.writeFile(outputPath, content);
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+entries.forEach((entry) => {
+  createIndexFile(entry);
+});

package/global-setup.js

@@ -1,4 +1,4 @@
-export default async () => {
+module.exports = async () => {
   process.env.TZ = 'UTC';
   process.env.LANG = 'en_US.UTF-8';
 };

package/jest.config.js

@@ -1,10 +1,12 @@
-export default {
+module.exports = {
   testRegex: ['src/.*\\.spec\\.(jsx|js)$', 'tests/.*\\.spec.js$'],
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', './test-bundler.js'],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/__mocks__/fileMock.js',
     '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
+    '^@strapi/icons/(.*)': '<rootDir>/../strapi-icons/dist/$1',
+    '^@strapi/icons': '<rootDir>/../strapi-icons/dist/index.js',
   },
   testEnvironment: 'jsdom',
   transform: {

package/package.json

@@ -1,21 +1,8 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.3.0-beta.0",
+  "version": "1.3.0-beta.1",
+  "main": "index.js",
   "license": "MIT",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./*": {
-      "import": "./dist/*.js",
-      "require": "./dist/*.cjs"
-    }
-  },
-  "sideEffects": false,
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.0",
     "@internationalized/number": "^3.1.1",
@@ -23,6 +10,10 @@
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-transform-runtime": "^7.13.2",
+    "@babel/preset-env": "^7.13.0",
+    "@babel/preset-react": "^7.12.13",
     "@figspec/react": "^0.1.5",
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.27.1",
@@ -30,12 +21,13 @@
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/react": "^6.5.13",
-    "@strapi/icons": "^1.3.0-beta.0",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.5",
     "axe-playwright": "^1.1.11",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.3",
     "eslint": "^7.20.0",
     "eslint-config-prettier": "^7.2.0",
@@ -46,32 +38,34 @@
     "jest": "^29.2.2",
     "jest-environment-jsdom": "^29.2.2",
     "jest-styled-components": "^7.1.1",
-    "prettier": "^2.7.1",
+    "prettier": "^2.2.1",
     "qs": "^6.10.3",
     "react": "^17.0.1",
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "storybook-dark-mode": "^1.1.2",
-    "styled-components": "^5.2.1"
+    "styled-components": "^5.3.6",
+    "url-loader": "^4.1.1",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "^4.5.0"
   },
   "peerDependencies": {
-    "@strapi/icons": "^1.2.6",
+    "@strapi/icons": "^1.2.7",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "styled-components": "^5.2.1"
   },
-  "peerDependenciesMeta": {
-    "react-router-dom": {
-      "optional": true
-    }
-  },
   "scripts": {
-    "dev": "vite",
+    "analyze:bundle": "cross-env BUNDLE_ANALYZE=1 webpack",
     "prebuild": "rimraf dist",
-    "build": "yarn build:prod",
-    "build:prod": "vite build",
+    "build": "yarn build:files && cross-env IS_V2=true yarn build:files",
+    "build:files": "yarn build:dev && yarn build:prod && yarn copy:files && yarn create:index-files",
+    "build:dev": "cross-env NODE_ENV=development webpack-cli",
+    "build:prod": "cross-env NODE_ENV=production webpack-cli",
+    "copy:files": "node ../../tools/copy-files.js",
+    "create:index-files": "node ./createIndexFiles.js",
     "build-storybook": "build-storybook",
     "lint": "eslint . --ext .js,.jsx,.mdx --fix",
     "lint-staged": "eslint --fix",
@@ -83,5 +77,5 @@
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "a1a86363724b97dc619efcc96c06ffeb5cf4d62a"
+  "gitHead": "bfb372de4377a8b345c7801758c10d3d0bac509c"
 }

package/playwright.config.js

@@ -1,6 +1,6 @@
-import { devices } from '@playwright/test';
+const { devices } = require('@playwright/test');
 
-export default {
+const config = {
   testMatch: '**/__tests__/*.e2e.js',
   // Forbid test.only on CI
   forbidOnly: !!process.env.CI,
@@ -35,3 +35,5 @@ export default {
     },
   ],
 };
+
+module.exports = config;

package/src/Accordion/Accordion.js

@@ -97,6 +97,7 @@ Accordion.defaultProps = {
   expanded: false,
   hasErrorMessage: true,
   id: undefined,
+  toggle: false,
   size: 'M',
   variant: 'primary',
   onToggle: undefined,

package/src/BaseCheckbox/BaseCheckbox.js

@@ -1,7 +1,10 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+
+import { Box } from '../Box';
 import { getCheckboxSize } from './utils';
+
 import checkmarkIcon from './assets/checkmark.svg';
 import checkmarkIconDisabled from './assets/checkmark-black.svg';
 
@@ -84,15 +87,17 @@ export const BaseCheckbox = ({ indeterminate, size, name, value, onValueChange,
   };
 
   return (
-    <CheckboxInput
-      size={size}
-      checked={value}
-      onChange={handleValueChange}
-      type="checkbox"
-      ref={checkboxRef}
-      name={name}
-      {...inputProps}
-    />
+    <Box>
+      <CheckboxInput
+        size={size}
+        checked={value}
+        onChange={handleValueChange}
+        type="checkbox"
+        ref={checkboxRef}
+        name={name}
+        {...inputProps}
+      />
+    </Box>
   );
 };
 

package/src/BaseCheckbox/BaseCheckbox.stories.mdx

@@ -41,7 +41,7 @@ The `BaseCheckbox` can have an indeterminate state.
 <Canvas>
   <Story name="indeterminate">
     {() => {
-      const [checkedItems, setCheckedItems] = React.useState([true, false]);
+      const [checkedItems, setCheckedItems] = useState([true, false]);
       const allChecked = checkedItems.every(Boolean);
       const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
       return (

package/src/Checkbox/Checkbox.stories.mdx

@@ -55,7 +55,7 @@ import { Checkbox } from '@strapi/design-system/Checkbox';
     }}
   >
     {() => {
-      const [checkedItems, setCheckedItems] = React.useState([true, false]);
+      const [checkedItems, setCheckedItems] = useState([true, false]);
       const allChecked = checkedItems.every(Boolean);
       const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
       return (

package/src/DatePicker/__tests__/DatePicker.spec.js

@@ -16,6 +16,7 @@ describe('DatePicker', () => {
             locale={locale}
             selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
             selectedDate={new Date('Tue Sep 06 2022')}
+            onChange={() => null}
           />
         </ThemeProvider>,
       );

package/src/DateTimePicker/__tests__/DateTimePicker.e2e.js

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+const { test, expect } = require('@playwright/test');
 
 test.describe.parallel('DateTimePicker', () => {
   test.describe('without initial data', () => {

package/src/DismissibleLayer/DismissibleLayer.js

@@ -26,7 +26,21 @@ export const DismissibleLayer = ({ children, className, onEscapeKeyDown, onPoint
      * @type {(event: PointerEvent) => void}
      */
     const handlePointerDownOutside = (event) => {
-      if (layerRef.current && !layerRef.current.contains(event.target)) {
+      /**
+       * Because certain elements that live inside modals e.g. Selects
+       * render their dropdowns in portals the `layerRef.current.contains(event.target)` fails.
+       *
+       * Therefore we check the closest portal of the DimissibleLayer (which we're trying to close)
+       * and the event that _may_ prematurely close the layer and see if they are equal.
+       */
+      const dismissibleLayersReactPortal = layerRef.current.closest('[data-react-portal]');
+      const eventsReactPortal = event.target.closest('[data-react-portal]');
+
+      if (
+        layerRef.current &&
+        !layerRef.current.contains(event.target) &&
+        dismissibleLayersReactPortal === eventsReactPortal
+      ) {
         onPointerDownOutsideHandler();
       }
     };

package/src/DismissibleLayer/__test__/DimissibleLayer.spec.js

@@ -5,8 +5,9 @@ import { DismissibleLayer } from '../DismissibleLayer';
 describe('DismissibleLayer', () => {
   it('should fire onEscapeKeyDown when the ESCAPE key is pressed', () => {
     const onEscapeKeyDownMock = jest.fn();
+    const onPointerDownOutsideMock = jest.fn();
     render(
-      <DismissibleLayer onEscapeKeyDown={onEscapeKeyDownMock}>
+      <DismissibleLayer onEscapeKeyDown={onEscapeKeyDownMock} onPointerDownOutside={onPointerDownOutsideMock}>
         <h1>hello world</h1>
       </DismissibleLayer>,
     );
@@ -18,9 +19,10 @@ describe('DismissibleLayer', () => {
 
   it('should fire onPointerDownOutside when the user clicks outside the DismissibleLayer', () => {
     const onPointerDownOutsideMock = jest.fn();
+    const onEscapeKeyDownMock = jest.fn();
     render(
       <>
-        <DismissibleLayer onPointerDownOutside={onPointerDownOutsideMock}>
+        <DismissibleLayer onPointerDownOutside={onPointerDownOutsideMock} onEscapeKeyDown={onEscapeKeyDownMock}>
           <h1>hello world</h1>
         </DismissibleLayer>
         <button>Click me</button>

package/src/IconButton/IconButton.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Tooltip } from '../Tooltip';
 import { BaseButton } from '../BaseButton';
 import { Flex } from '../Flex';
+import { VisuallyHidden } from '../VisuallyHidden';
 
 const IconButtonWrapper = styled(BaseButton)`
   display: flex;
@@ -94,29 +95,42 @@ export const IconButtonGroup = styled(Flex)`
   }
 `;
 
-export const IconButton = React.forwardRef(({ label, noBorder, icon, disabled, onClick, ...props }, ref) => {
-  const handleClick = (e) => {
-    if (!disabled && onClick) {
-      onClick(e);
+export const IconButton = React.forwardRef(
+  ({ label, noBorder, children, icon, disabled, onClick, ['aria-label']: ariaLabel, ...restProps }, ref) => {
+    /**
+     * @type {React.MouseEventHandler<HTMLButtonElement>}
+     */
+    const handleClick = (e) => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    };
+
+    if (!label) {
+      return (
+        <IconButtonWrapper {...restProps} ref={ref} noBorder={noBorder} onClick={handleClick} aria-disabled={disabled}>
+          <VisuallyHidden as="span">{ariaLabel}</VisuallyHidden>
+          {cloneElement(children ?? icon, {
+            'aria-hidden': true,
+            focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+          })}
+        </IconButtonWrapper>
+      );
     }
-  };
 
-  if (!label) {
     return (
-      <IconButtonWrapper {...props} ref={ref} noBorder={noBorder} onClick={handleClick} aria-disabled={disabled}>
-        {icon}
-      </IconButtonWrapper>
+      <Tooltip label={label}>
+        <IconButtonWrapper {...restProps} ref={ref} noBorder={noBorder} onClick={handleClick} aria-disabled={disabled}>
+          <VisuallyHidden as="span">{label}</VisuallyHidden>
+          {cloneElement(children ?? icon, {
+            'aria-hidden': true,
+            focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+          })}
+        </IconButtonWrapper>
+      </Tooltip>
     );
-  }
-
-  return (
-    <Tooltip label={label}>
-      <IconButtonWrapper {...props} ref={ref} noBorder={noBorder} onClick={handleClick} aria-disabled={disabled}>
-        {icon}
-      </IconButtonWrapper>
-    </Tooltip>
-  );
-});
+  },
+);
 
 IconButton.displayName = 'IconButton';
 
@@ -126,10 +140,36 @@ IconButton.defaultProps = {
   disabled: false,
   onClick: undefined,
 };
+
+/**
+ * @type {(otherProps: string[]) => (props: Record<string, unknown>, propName: string) => Error | undefined}
+ */
+const throwPropErrorIfNoneAreDefined = (otherProps, propType) => (props, propName) => {
+  if (!props[propName] && otherProps.every((otherProp) => !props[otherProp])) {
+    return new Error(`One of the following props is required: ${propName}, ${otherProps.join(', ')}`);
+  }
+
+  PropTypes.checkPropTypes({ [propName]: PropTypes[propType] }, props, 'prop', 'IconButton');
+};
+
 IconButton.propTypes = {
+  /**
+   * `PropTypes.string` – must be defined if `label` is not defined.
+   */
+  ['aria-label']: throwPropErrorIfNoneAreDefined(['label'], 'string'),
+  /**
+   * `PropTypes.node` – must be defined if `icon` is not defined.
+   */
+  children: throwPropErrorIfNoneAreDefined(['icon'], 'node'),
   disabled: PropTypes.bool,
-  icon: PropTypes.element.isRequired,
-  label: PropTypes.string,
+  /**
+   * `PropTypes.node` – must be defined if `children` is not defined.
+   */
+  icon: throwPropErrorIfNoneAreDefined(['children'], 'node'),
+  /**
+   * `PropTypes.string` – must be defined if `aria-label` is not defined.
+   */
+  label: throwPropErrorIfNoneAreDefined(['aria-label'], 'string'),
   noBorder: PropTypes.bool,
   onClick: PropTypes.func,
 };

package/src/IconButton/IconButton.stories.mdx

@@ -2,13 +2,17 @@
 
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
 import { ArgsTable } from '@storybook/addon-docs';
+import { useState } from 'react';
+
 import Pencil from '@strapi/icons/Pencil';
 import Play from '@strapi/icons/Play';
 import Trash from '@strapi/icons/Trash';
 import Plus from '@strapi/icons/Plus';
+
 import { IconButton, IconButtonGroup } from './IconButton';
 import { Box } from '../Box';
 import { Flex } from '../Flex';
+import { Typography } from '../Typography';
 
 <Meta title="Design System/Components/IconButton" component={IconButton} />
 
@@ -38,14 +42,22 @@ Icon Buttons are used to perform actions within a page, a table or another objec
 
 <Canvas>
   <Story name="base">
-    <Box padding={7}>
-      <Flex>
-        <IconButton onClick={() => console.log('edit')} label="Edit" icon={<Pencil />} />
-        <IconButton onClick={() => console.log('Create')} label="Create" icon={<Plus />} />
-        <IconButton onClick={() => console.log('Delete')} label="Delete" icon={<Trash />} />
-        <IconButton onClick={() => console.log('Publish')} label="Publish" icon={<Play />} />
-      </Flex>
-    </Box>
+    {() => {
+      const [currentAction, setCurrentAction] = useState('None Selected');
+      return (
+        <Box padding={7}>
+          <Box paddingBottom={3}>
+            <Typography>{currentAction}</Typography>
+          </Box>
+          <Flex>
+            <IconButton onClick={() => setCurrentAction('edit')} label="Edit" icon={<Pencil />} />
+            <IconButton onClick={() => setCurrentAction('Create')} label="Create" icon={<Plus />} />
+            <IconButton onClick={() => setCurrentAction('Delete')} label="Delete" icon={<Trash />} />
+            <IconButton onClick={() => setCurrentAction('Publish')} label="Publish" icon={<Play />} />
+          </Flex>
+        </Box>
+      );
+    }}
   </Story>
 </Canvas>
 
@@ -55,14 +67,22 @@ Depending on the status of an action or the permissions, an IconButton can be un
 
 <Canvas>
   <Story name="disabled">
-    <Box padding={7}>
-      <Flex>
-        <IconButton disabled onClick={() => console.log('edit')} label="Edit" icon={<Pencil />} />
-        <IconButton disabled onClick={() => console.log('Create')} label="Create" icon={<Plus />} />
-        <IconButton disabled onClick={() => console.log('Delete')} label="Delete" icon={<Trash />} />
-        <IconButton disabled onClick={() => console.log('Publish')} label="Publish" icon={<Play />} />
-      </Flex>
-    </Box>
+    {() => {
+      const [currentAction, setCurrentAction] = useState('None Selected');
+      return (
+        <Box padding={7}>
+          <Box paddingBottom={3}>
+            <Typography>{currentAction}</Typography>
+          </Box>
+          <Flex>
+            <IconButton disabled onClick={() => setCurrentAction('edit')} label="Edit" icon={<Pencil />} />
+            <IconButton disabled onClick={() => setCurrentAction('Create')} label="Create" icon={<Plus />} />
+            <IconButton disabled onClick={() => setCurrentAction('Delete')} label="Delete" icon={<Trash />} />
+            <IconButton disabled onClick={() => setCurrentAction('Publish')} label="Publish" icon={<Play />} />
+          </Flex>
+        </Box>
+      );
+    }}
   </Story>
 </Canvas>
 
@@ -95,6 +115,39 @@ IconButtons can be used within another component is a Group shape.
   </Story>
 </Canvas>
 
+### Icons as Children & aria-label
+
+IconButtons can take Icons as their children and can be fully accessible without a tooltip.
+
+<Canvas>
+  <Story name="children">
+    {() => {
+      const [currentAction, setCurrentAction] = useState('None Selected');
+      return (
+        <Box padding={7}>
+          <Box paddingBottom={3}>
+            <Typography>{currentAction}</Typography>
+          </Box>
+          <Flex>
+            <IconButton onClick={() => setCurrentAction('Edit')} aria-label={'Edit'}>
+              <Pencil />
+            </IconButton>
+            <IconButton onClick={() => setCurrentAction('Create')} aria-label="Create">
+              <Plus />
+            </IconButton>
+            <IconButton onClick={() => setCurrentAction('Delete')} aria-label="Delete">
+              <Trash />
+            </IconButton>
+            <IconButton onClick={() => setCurrentAction('Publish')} aria-label="Publish">
+              <Play />
+            </IconButton>
+          </Flex>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Props
 
 <ArgsTable of={IconButton} />

package/src/ModalLayout/__tests__/ModalLayout.spec.js

@@ -506,12 +506,18 @@ describe('ModalLayout', () => {
                       Modal Title
                       <button
                         aria-disabled="false"
-                        aria-label="Close the modal"
                         class="c8 c9"
                         type="button"
                       >
+                        <span
+                          class="c0"
+                        >
+                          Close the modal
+                        </span>
                         <svg
+                          aria-hidden="true"
                           fill="none"
+                          focusable="false"
                           height="1em"
                           viewBox="0 0 24 24"
                           width="1em"

package/src/Portal/Portal.js

@@ -1,6 +1,5 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 
 export const Portal = ({ children }) => {
   const rootRef = useRef(null);
@@ -24,7 +23,3 @@ export const Portal = ({ children }) => {
 
   return createPortal(children, rootRef.current);
 };
-
-Portal.propTypes = {
-  children: PropTypes.node.isRequired,
-};

package/src/Status/Status.stories.mdx

@@ -49,20 +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>
+        <Typography fontWeight="bold" textColor="success700">
+          Published
+        </Typography>
       </Status>
       <Status variant="secondary" size="S" showBullet={false}>
-        <Typography fontWeight="bold" textColor="secondary700">Draft</Typography>
+        <Typography fontWeight="bold" textColor="secondary700">
+          Draft
+        </Typography>
       </Status>
       <Status variant="alternative" size="S" showBullet={false}>
-        <Typography fontWeight="bold" textColor="alternative700">Updated</Typography>
+        <Typography fontWeight="bold" textColor="alternative700">
+          Updated
+        </Typography>
       </Status>
     </Stack>
   </Story>