Merge pull request #2379 from innovaccer/develop

Develop
innovaccer · Oct 17, 2024 · 78a6073 · 78a6073
2 parents f2e0f3f + 6ef83c6
commit 78a6073
Show file tree

Hide file tree

Showing 15 changed files with 19,603 additions and 28,269 deletions.
diff --git a/core/components/atoms/button/__stories__/SplitButton.story.jsx b/core/components/atoms/button/__stories__/SplitButton.story.jsx
@@ -1,26 +1,19 @@
 import * as React from 'react';
-import Button from '@/components/atoms/button';
-import Dropdown from '@/components/atoms/dropdown';
+import { Button, Menu } from '@/index';
 
 export const splitButton = () => {
-  const options = [
-    {
-      label: 'Download All',
-      value: 'Download All',
-    },
-    {
-      label: 'Download Selected',
-      value: 'Download Selected',
-    },
-  ];
-
   return (
     <div className="d-flex">
       <Button className="mr-2" aria-label="Request review">
         Request review
       </Button>
       <div className="mb-10">
-        <Dropdown menu={true} icon="expand_more" options={options} width={150} />
+        <Menu trigger={<Menu.Trigger />}>
+          <Menu.List>
+            <Menu.Item>Download All</Menu.Item>
+            <Menu.Item>Download Selected</Menu.Item>
+          </Menu.List>
+        </Menu>
       </div>
     </div>
   );

diff --git a/core/components/atoms/helpText/__stories__/index.story.jsx b/core/components/atoms/helpText/__stories__/index.story.jsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HelpText, Label, Dropdown } from '@/index';
+import { HelpText, Label, Select } from '@/index';
 
 // CSF format story
 export const all = () => {
@@ -50,14 +50,105 @@ export const all = () => {
     <>
       <Label withInput={true}>Area code</Label>
       <div className="w-25">
-        <Dropdown options={options} withSearch={true} placeholder="Select an area code" />
+        <Select
+          triggerOptions={{
+            placeholder: 'Select an area code',
+          }}
+        >
+          <Select.List>
+            {options.map((item, key) => {
+              return (
+                <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                  {item.label}
+                </Select.Option>
+              );
+            })}
+          </Select.List>
+        </Select>
         <HelpText message={'If the number with this code is not available, we will use the next best match'} />
       </div>
     </>
   );
 };
 
+const customCode = `() => {
+  const options = [
+    {
+      label: 'Alabama (205)',
+      value: 'Alabama (205)',
+    },
+    {
+      label: 'Alabama (251)',
+      value: 'Alabama (251)',
+    },
+    {
+      label: 'Alabama (256)',
+      value: 'Alabama (256)',
+    },
+    {
+      label: 'Alabama (334)',
+      value: 'Alabama (334)',
+    },
+    {
+      label: 'Alabama (938)',
+      value: 'Alabama (938)',
+    },
+    {
+      label: 'Arizona (520)',
+      value: 'Arizona (520)',
+    },
+    {
+      label: 'California (209)',
+      value: 'California (209)',
+    },
+    {
+      label: 'California (408)',
+      value: 'California (408)',
+    },
+    {
+      label: 'Colorado (719)',
+      value: 'Colorado (719)',
+    },
+    {
+      label: 'Connecticut (860)',
+      value: 'Connecticut (860)',
+    },
+  ];
+
+  return (
+    <>
+      <Label withInput={true}>Area code</Label>
+      <div className="w-25">
+        <Select
+          triggerOptions={{
+            placeholder: 'Select an area code',
+          }}
+        >
+          <Select.List>
+            {options.map((item, key) => {
+              return (
+                <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                  {item.label}
+                </Select.Option>
+              );
+            })}
+          </Select.List>
+        </Select>
+        <HelpText message={'If the number with this code is not available, we will use the next best match'} />
+      </div>
+    </>
+  );
+}`;
+
 export default {
   title: 'Components/HelpText/All',
   component: HelpText,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'HelpText',
+        customCode,
+      },
+    },
+  },
 };
diff --git a/core/components/molecules/editableChipInput/__stories__/OverflowBehavior.story.jsx b/core/components/molecules/editableChipInput/__stories__/OverflowBehavior.story.jsx
@@ -13,7 +13,11 @@ export const overflowBehavior = () => {
   const onClick = (item) => action(`onClick: ${item}`);
 
   const placeholder = 'Add Value';
-  const chipOptions = { onClick, clearButton: true };
+  const chipOptions = {
+    onClick,
+    clearButton: true,
+    maxWidth: 'var(--spacing-8)',
+  };
   const chipInputOptions = {
     chipOptions,
     allowDuplicates: false,
@@ -44,7 +48,11 @@ const customCode = `() => {
   const onClick = (item) =>  console.log(item);
 
   const placeholder ='Add Value';
-  const chipOptions = { onClick, clearButton:true };
+  const chipOptions = {
+    onClick,
+    clearButton: true,
+    maxWidth: 'var(--spacing-8)',
+  };
   const chipInputOptions = {
     chipOptions,
     allowDuplicates:false,

diff --git a/core/components/molecules/editableChipInput/__stories__/Uncontrolled.story.jsx b/core/components/molecules/editableChipInput/__stories__/Uncontrolled.story.jsx
@@ -6,7 +6,11 @@ import { EditableChipInput } from '@/index';
 
 export const uncontrolled = () => {
   const onClick = (item) => action(`onClick: ${item}`);
-  const chipOptions = { onClick, clearButton: true };
+  const chipOptions = {
+    onClick,
+    clearButton: true,
+    maxWidth: 'var(--spacing-8)',
+  };
   const chipInputOptions = {
     chipOptions,
     allowDuplicates: false,
@@ -27,7 +31,11 @@ export const uncontrolled = () => {
 
 const customCode = `() => {
   const onClick = (item) => console.log(\`onClick: \${item}\`);
-  const chipOptions = { onClick, clearButton: true };
+  const chipOptions = {
+    onClick,
+    clearButton: true,
+    maxWidth: 'var(--spacing-8)',
+  };
   const chipInputOptions = {
     chipOptions,
     allowDuplicates: false,

diff --git a/core/components/molecules/editableChipInput/__stories__/index.story.jsx b/core/components/molecules/editableChipInput/__stories__/index.story.jsx
@@ -13,7 +13,11 @@ export const all = () => {
   const onClick = (item) => action(`onClick: ${item}`);
 
   const placeholder = 'Add Value';
-  const chipOptions = { onClick, clearButton: true };
+  const chipOptions = {
+    onClick,
+    clearButton: true,
+    maxWidth: 'var(--spacing-8)',
+  };
   const chipInputOptions = {
     chipOptions,
     allowDuplicates: false,
@@ -43,7 +47,11 @@ const customCode = `() => {
   const onClick = (item) =>  console.log(item);
 
   const placeholder ='Add Value';
-  const chipOptions = { onClick, clearButton:true };
+  const chipOptions = {
+    onClick,
+    clearButton: true,
+    maxWidth: 'var(--spacing-8)',
+  };
   const chipInputOptions = {
     chipOptions,
     allowDuplicates:false,

diff --git a/core/components/molecules/popover/__stories__/Layering.story.jsx b/core/components/molecules/popover/__stories__/Layering.story.jsx
@@ -1,37 +1,92 @@
 import * as React from 'react';
-import { Button, Popover, Dropdown } from '@/index';
+import { Button, Popover, Select } from '@/index';
 
 // CSF format story
+const options = [
+  { label: 'Draft', value: 'draft' },
+  { label: 'In Progress', value: 'in_progress' },
+  { label: 'Sent', value: 'sent' },
+  { label: 'Scheduled', value: 'scheduled' },
+  { label: 'Partially Failed', value: 'partially_failed' },
+  { label: 'Completely Failed', value: 'completely_failed' },
+];
+
 export const layering = () => {
   return (
     <div className="mb-9">
       <Popover position="bottom" on="click" trigger={<Button appearance="basic">Open Popover</Button>} open={false}>
         <div className="pb-11 pr-10">
-          <Dropdown
-            className="p-6 w-100"
-            options={[
-              { label: 'Draft', value: 'draft' },
-              { label: 'In Progress', value: 'in_progress' },
-              { label: 'Sent', value: 'sent' },
-              { label: 'Scheduled', value: 'scheduled' },
-              { label: 'Partially Failed', value: 'partially_failed' },
-              { label: 'Completely Failed', value: 'completely_failed' },
-            ]}
-            placeholder="Status"
-          />
+          <Select
+            className="p-6"
+            width={100}
+            popoverWidth={176} /* back to default */
+            triggerOptions={{
+              placeholder: 'Status',
+            }}
+          >
+            <Select.List>
+              {options.map((option, key) => {
+                return (
+                  <Select.Option key={key} option={{ label: option.label, value: option.value }}>
+                    {option.label}
+                  </Select.Option>
+                );
+              })}
+            </Select.List>
+          </Select>
         </div>
       </Popover>
     </div>
   );
 };
 
+const customCode = `() => {
+  const options = [
+    { label: 'Draft', value: 'draft' },
+    { label: 'In Progress', value: 'in_progress' },
+    { label: 'Sent', value: 'sent' },
+    { label: 'Scheduled', value: 'scheduled' },
+    { label: 'Partially Failed', value: 'partially_failed' },
+    { label: 'Completely Failed', value: 'completely_failed' },
+  ];
+
+  return (
+    <div className="mb-9">
+      <Popover position="bottom" on="click" trigger={<Button appearance="basic">Open Popover</Button>} open={false}>
+        <div className="pb-11 pr-10">
+          <Select
+            className="p-6"
+            width={100}
+            popoverWidth={176}
+            triggerOptions={{
+              placeholder: 'Status',
+            }}
+          >
+            <Select.List>
+              {options.map((option, key) => {
+                return (
+                  <Select.Option key={key} option={{ label: option.label, value: option.value }}>
+                    {option.label}
+                  </Select.Option>
+                );
+              })}
+            </Select.List>
+          </Select>
+        </div>
+      </Popover>
+    </div>
+  );
+}
+`;
+
 export default {
   title: 'Components/Popover/Layering',
   component: Popover,
   parameters: {
     docs: {
       docPage: {
         noHtml: true,
+        customCode,
       },
     },
   },