@innovaccer/design-system 2.9.0 → 2.10.0

package/core/components/atoms/checkbox/__stories__/variants/Size.story.jsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Checkbox from '../../index';
+import Text from '@/components/atoms/text';
+
+// CSF format story
+export const size = () => {
+  const sizes = ['tiny', 'regular'];
+  const label = 'Checkbox';
+  return (
+    <div className="d-flex">
+      {sizes.map((CheckboxSize, ind) => {
+        return (
+          <div key={ind} className="mr-5">
+            <div className="h-50">
+              <Checkbox checked={true} disabled={false} size={CheckboxSize} label={label} />
+            </div>
+            <br />
+            <Text weight="strong">{CheckboxSize.charAt(0).toUpperCase() + CheckboxSize.slice(1)}</Text>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Checkbox/Variants/Size',
+  component: Checkbox,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Checkbox',
+      },
+    },
+  },
+};

package/core/components/atoms/checkbox/__stories__/variants/Uncontrolled.story.jsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Checkbox from '../../index';
+import { action } from '@/utils/action';
+
+// CSF format story
+export const uncontrolledCheckbox = () => {
+  const handleParentChange = (event) => {
+    return action(`onChange: ${event.target.checked}`)();
+  };
+
+  return (
+    <div>
+      <Checkbox defaultChecked={true} label={'Innovaccer'} onChange={handleParentChange} value={'Innovaccer'} />
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/Checkbox/Variants/Uncontrolled Checkbox',
+  component: Checkbox,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Checkbox',
+      },
+    },
+  },
+};

package/core/components/atoms/checkbox/__stories__/variants/checkboxList.story.jsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import Checkbox from '../../index';
+
+// CSF format story
+export const checkboxList = () => {
+  const style = {
+    display: 'flex',
+    'flex-direction': 'column',
+    paddingLeft: '25px',
+  };
+  const parentObj = { checked: false, indeterminate: false };
+  const labels = ['InConnect', 'InGraph', 'InReport'];
+  const childArray = Array(labels.length).fill(false);
+
+  const [checked, setChecked] = React.useState(childArray);
+  const [parentStatus, setParentStatus] = React.useState(parentObj);
+
+  const handleParentChange = (event) => {
+    const updatedArray = [...childArray].fill(event.target.checked);
+    setChecked(updatedArray);
+    setParentStatus({ indeterminate: event.target.indeterminate, checked: event.target.checked });
+  };
+
+  const handleChildChange = (event, index) => {
+    const updateCheck = [...checked];
+    updateCheck[index] = event.target.checked;
+    const totalCount = labels.length;
+    const countT = updateCheck.filter(Boolean).length;
+    const status = countT < totalCount;
+    const obj = countT > 0 ? { checked: !status, indeterminate: status } : { checked: !status, indeterminate: false };
+    setChecked(updateCheck);
+    setParentStatus(obj);
+  };
+
+  return (
+    <div>
+      <Checkbox
+        checked={parentStatus.checked}
+        indeterminate={parentStatus.indeterminate}
+        label={'Innovaccer'}
+        onChange={handleParentChange}
+        value={'Innovaccer'}
+      />
+      <div style={style}>
+        {labels.map((label, ind) => {
+          return (
+            <Checkbox
+              key={`checkbox-${ind}`}
+              label={label}
+              checked={checked[ind]}
+              value={label}
+              onChange={(e) => handleChildChange(e, ind)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const labels = ['InConnect', 'InGraph', 'InReport'];
+
+  const childArray = Array(labels.length).fill(false);
+  const [checked, setChecked] = React.useState(childArray);
+  const [parentStatus, setParentStatus] = React.useState({ checked: false, indeterminate: false });
+
+  const handleParentChange = (event) => {
+    const updatedArray = [...childArray].fill(event.target.checked);
+    setChecked(updatedArray);
+    setParentStatus({ checked: event.target.checked, indeterminate: event.target.indeterminate });
+  };
+
+  const handleChildChange = (event, index) => {
+    const updateCheck = [...checked];
+    updateCheck[index] = event.target.checked;
+    const totalCount = labels.length;
+    const countT = updateCheck.filter(Boolean).length;
+    const status = countT < totalCount;
+    const obj = (countT > 0) ? { checked: !status, indeterminate: status } : { checked: !status, indeterminate: false };
+    setChecked(updateCheck);
+    setParentStatus(obj);
+  };
+
+  return (
+    <div>
+      <Checkbox
+        checked={parentStatus.checked}
+        indeterminate={parentStatus.indeterminate}
+        label={'Innovaccer'}
+        onChange={handleParentChange}
+        value={'Innovaccer'}
+      />
+      <div style={{
+          'flex-direction': 'column',
+        }} className="d-flex pl-7">
+        {
+          labels.map((label, ind) => {
+            return (
+              <Checkbox
+                key={\`checkbox-\${ind}\`}
+                label={label}
+                checked={checked[ind]}
+                value={label}
+                onChange={c => handleChildChange(c, ind)}
+              />
+            );
+          })
+        }
+      </div>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Checkbox/Variants/Checkbox List',
+  component: Checkbox,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};

package/core/components/atoms/chip/__stories__/Action.story.jsx

@@ -0,0 +1,26 @@
+import { action } from '@/utils/action';
+import * as React from 'react';
+import Chip from '../Chip';
+
+export const actionChip = () => (
+  <Chip
+    label="First Name"
+    clearButton={false}
+    disabled={false}
+    type="action"
+    name={'chip'}
+    onClick={action('on-click')}
+  />
+);
+
+export default {
+  title: 'Components/Chip/Action Chip',
+  component: Chip,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Chip',
+      },
+    },
+  },
+};

package/core/components/atoms/chip/__stories__/Input.story.jsx

@@ -0,0 +1,27 @@
+import { action } from '@/utils/action';
+import * as React from 'react';
+import Chip from '../Chip';
+
+export const input = () => (
+  <Chip
+    label="First Name"
+    clearButton={true}
+    disabled={false}
+    type="input"
+    name={'chip'}
+    onClick={action('on-click')}
+    onClose={action('on-close')}
+  />
+);
+
+export default {
+  title: 'Components/Chip/Input',
+  component: Chip,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Chip',
+      },
+    },
+  },
+};

package/core/components/atoms/chip/__stories__/index.story.jsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Chip from '../Chip';
+import { action } from '@/utils/action';
+
+export const all = () => {
+  const type = 'selection';
+
+  const label = 'Chip Label';
+
+  const icon = 'assessment';
+
+  const disabled = false;
+
+  let clearButton;
+  if (type !== 'action') {
+    clearButton = true;
+  }
+
+  let selected;
+  if (type === 'selection') {
+    selected = false;
+  }
+  return (
+    <Chip
+      icon={icon}
+      label={label}
+      clearButton={clearButton}
+      disabled={disabled}
+      type={type}
+      onClose={action(`onClose: ${name}`)}
+      onClick={action(`onClick: ${name}`)}
+      selected={selected}
+      name={'chip'}
+    />
+  );
+};
+export default {
+  title: 'Components/Chip/All',
+  component: Chip,
+};

package/core/components/atoms/chip/__stories__/variants/Action.story.jsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Text } from '@/index';
+import Chip from '../../Chip';
+import { action } from '@/utils/action';
+
+const BooleanValue = [true, false];
+export const Action = () => {
+  const icon = 'assessment';
+  const label = 'Action';
+  return (
+    <div className="d-flex">
+      {BooleanValue.map((booleanvalue, ind) => {
+        return (
+          <div key={ind} className="mr-9">
+            <Chip
+              icon={icon}
+              label={label}
+              disabled={booleanvalue}
+              onClose={action(`onClose: ${name}`)}
+              onClick={action(`onClick: ${name}`)}
+              type="action"
+              name={'chip'}
+            />
+            <br />
+            <Text weight="strong">{`Disabled: ${booleanvalue}`}</Text>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+export default {
+  title: 'Components/Chip/Variants/Action',
+  component: Chip,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Chip',
+      },
+    },
+  },
+};

package/core/components/atoms/chip/__stories__/variants/Input.story.jsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Text } from '@/index';
+import Chip from '../../Chip';
+import { action } from '@/utils/action';
+const BooleanValue = [true, false];
+export const Input = () => {
+  const icon = 'assessment';
+  const label = 'Input';
+  return (
+    <div className="d-flex">
+      {BooleanValue.map((booleanvalue, ind) => {
+        return (
+          <div key={ind} className="mr-9">
+            <Chip
+              icon={icon}
+              label={label}
+              clearButton={true}
+              disabled={booleanvalue}
+              type="input"
+              onClose={action(`onClose: ${name}`)}
+              onClick={action(`onClick: ${name}`)}
+              name={'chip'}
+            />
+            <br />
+            <Text weight="strong">{`Disabled: ${booleanvalue}`}</Text>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+export default {
+  title: 'Components/Chip/Variants/Input',
+  component: Chip,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Chip',
+      },
+    },
+  },
+};

package/core/components/atoms/chip/__stories__/variants/Selection.story.jsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Text } from '@/index';
+import Chip from '../../Chip';
+import { action } from '@/utils/action';
+const BooleanValue = [true, false];
+export const Selection = () => {
+  const icon = 'assessment';
+  const label = 'Selection';
+  return (
+    <div className="d-flex">
+      {BooleanValue.map((booleanvalue, ind) => {
+        return (
+          <div key={ind} className="mr-9">
+            <Chip
+              icon={icon}
+              label={label}
+              clearButton={true}
+              disabled={booleanvalue}
+              type="selection"
+              onClose={action(`onClose: ${name}`)}
+              onClick={action(`onClick: ${name}`)}
+              selected={false}
+              name={'chip'}
+            />
+            <br />
+            <Text weight="strong">{`Disabled: ${booleanvalue}`}</Text>
+          </div>
+        );
+      })}
+      <div className="mr-9">
+        <Chip
+          icon={icon}
+          label={label}
+          clearButton={true}
+          type="selection"
+          onClose={action(`onClose: ${name}`)}
+          onClick={action(`onClick: ${name}`)}
+          selected={true}
+          name={'chip'}
+        />
+        <br />
+        <Text weight="strong">Selected: true</Text>
+      </div>
+      <div className="mr-9">
+        <Chip
+          icon={icon}
+          label={label}
+          clearButton={true}
+          type="selection"
+          onClose={action(`onClose: ${name}`)}
+          onClick={action(`onClick: ${name}`)}
+          selected={true}
+          disabled={true}
+          name={'chip'}
+        />
+        <br />
+        <Text weight="strong">Selected: true</Text>
+        <br></br>
+        <Text weight="strong">Disabled: true</Text>
+      </div>
+    </div>
+  );
+};
+export default {
+  title: 'Components/Chip/Variants/Selection',
+  component: Chip,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Chip',
+      },
+    },
+  },
+};

package/core/components/atoms/chip/__stories__/variants/Type.story.jsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Chip from '../../Chip';
+import { action } from '@/utils/action';
+import Text from '@/components/atoms/text';
+export const Types = () => {
+  const types = ['action', 'selection', 'input'];
+  const icon = 'assessment';
+  const label = 'ChipLabel';
+  const clearButton = true;
+  const disabled = false;
+  const selected = false;
+  return (
+    <div className="d-flex">
+      {types.map((type, ind) => {
+        return (
+          <div key={ind} className="mr-9">
+            <Chip
+              icon={icon}
+              label={label}
+              clearButton={clearButton}
+              disabled={disabled}
+              type={type}
+              onClose={action(`onClose: ${name}`)}
+              onClick={action(`onClick: ${name}`)}
+              selected={selected}
+              name={'chip'}
+            />
+            <br />
+            <Text weight="strong">{type.charAt(0).toUpperCase() + type.slice(1)}</Text>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+export default {
+  title: 'Components/Chip/Variants/Types',
+  component: Chip,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Chip',
+      },
+    },
+  },
+};

package/core/components/atoms/chipGroup/_stories_/index.story.jsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { action } from '@/utils/action';
+import { ChipGroup } from '../ChipGroup';
+export const all = () => {
+  const type = ['action', 'input', 'selection'];
+  const list = [
+    {
+      label: 'Action',
+      icon: 'assessment',
+      disabled: false,
+      type: type[0],
+      name: '1',
+    },
+    {
+      label: 'Input',
+      icon: 'assessment',
+      clearButton: true,
+      disabled: false,
+      type: type[1],
+      name: '2',
+    },
+    {
+      label: 'Selection',
+      icon: 'assessment',
+      clearButton: true,
+      disabled: false,
+      type: type[2],
+      selected: true,
+      name: '3',
+    },
+    {
+      label: 'Selection',
+      icon: 'assessment',
+      clearButton: true,
+      disabled: false,
+      type: type[2],
+      name: '4',
+    },
+  ];
+
+  return <ChipGroup onClose={action(`onClose: ${name}`)} onClick={action(`onClick: ${name}`)} list={list} />;
+};
+export default {
+  title: 'Components/ChipGroup/All',
+  component: ChipGroup,
+};

package/core/components/atoms/collapsible/__stories__/index.story.jsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Collapsible from '@/components/atoms/collapsible';
+import { Icon, Text } from '@/index';
+
+// CSF format story
+export const all = () => {
+  const hoverable = true;
+  const [expanded, setExpanded] = React.useState(false);
+
+  return (
+    <div className="d-flex">
+      <Collapsible expanded={expanded} hoverable={hoverable} height="100vh" onToggle={setExpanded}>
+        <div className="d-flex pt-4">
+          <Icon name="events" className="d-flex align-items-center px-5 Text--regular" />
+          {expanded && <Text className="mr-6">Collapsible</Text>}
+        </div>
+      </Collapsible>
+      <div>Testing</div>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const [expanded, setExpanded] = React.useState(false);
+  return (
+    <div style={{height: "100vh"}}>
+      <Collapsible
+        expanded={expanded}
+        height="100vh"
+        onToggle={setExpanded}
+      >
+        <div className="d-flex pt-4">
+          <Icon name="events" className="d-flex align-items-center px-5 Text--regular" />
+          {expanded && (
+            <Text className="mr-6">Collapsible</Text>
+          )}
+        </div>
+      </Collapsible>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Components/Collapsible/All',
+  component: Collapsible,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        imports: { collapsible: Collapsible },
+      },
+    },
+  },
+};