Docs(web-react): Add Pill demo #DS-904

- Pill demo in web-react is now same as demo in web and web-twig

packages/web-react/src/components/Pill/demo/PillColors.tsx

@@ -1,27 +1,21 @@
 import React from 'react';
+import { ActionColors, EmotionColors } from '../../../constants';
 import Pill from '../Pill';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <>
-    <div className="mb-500">
-      <Pill color="primary">3</Pill>
-      <Pill color="secondary">3</Pill>
-      <Pill color="tertiary">3</Pill>
-      <Pill color="inverted">3</Pill>
-    </div>
-    <div className="mb-500">
-      <Pill color="selected">333</Pill>
-      <Pill color="unselected">333</Pill>
-    </div>
-    <div>
-      <Pill color="success">3</Pill>
-      <Pill color="informative">3</Pill>
-      <Pill color="warning">3</Pill>
-      <Pill color="danger">3</Pill>
-    </div>
-  </>
-);
+const PillColors = () => {
+  const actionColors = Object.values(ActionColors);
+  const emotionColors = Object.values(EmotionColors);
+  const colors = [...actionColors, 'selected', 'unselected', ...emotionColors];
 
-export default Story;
+  return (
+    <>
+      {colors.map((color) => (
+        <Pill key={color} color={color}>
+          3
+        </Pill>
+      ))}
+    </>
+  );
+};
+
+export default PillColors;

packages/web-react/src/components/Pill/demo/PillLongText.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Pill from '../Pill';
+
+const PillLongText = () => <Pill>333</Pill>;
+
+export default PillLongText;

packages/web-react/src/components/Pill/demo/index.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import DocsSection from '../../../../docs/DocsSections';
-import Pill from './Pill';
 import PillColors from './PillColors';
+import PillLongText from './PillLongText';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <DocsSection title="Default">
-      <Pill {...Pill.args} />
-    </DocsSection>
     <DocsSection title="Colors">
       <PillColors />
     </DocsSection>
+    <DocsSection title="Long Text">
+      <PillLongText />
+    </DocsSection>
   </React.StrictMode>,
 );