npm - @innovaccer/design-system - Versions diffs - 2.13.3 → 2.13.4-2 - Mend

@innovaccer/design-system 2.13.3 → 2.13.4-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (349) hide show

package/core/components/molecules/fullscreenModal/__stories__/DefaultWidth.story.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@/utils/action';
-import { Button, Paragraph, FullscreenModal, Label, Input, Textarea } from '@/index';
+import { Button, FullscreenModal, Label, Input, Textarea } from '@/index';
 export const defaultWidth = () => {
   const [open, setOpen] = React.useState(false);
@@ -11,7 +11,9 @@ export const defaultWidth = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <FullscreenModal
         open={open}

package/core/components/molecules/fullscreenModal/__stories__/LargeWidth.story.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@/utils/action';
-import { Button, Paragraph, FullscreenModal, Label, Input, Radio, Icon, Text, Card } from '@/index';
+import { Button, FullscreenModal, Label, Input, Radio, Icon, Text, Card } from '@/index';
 export const largeWidth = () => {
   const [open, setOpen] = React.useState(false);
@@ -19,7 +19,9 @@ export const largeWidth = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <FullscreenModal
         open={open}
         dimension="large"

package/core/components/molecules/fullscreenModal/__stories__/Layering.story.jsx CHANGED Viewed

@@ -28,7 +28,9 @@ export const layering = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={openModal}>Open Modal</Button>
+      <Button appearance="primary" onClick={openModal}>
+        Open Modal
+      </Button>
       <FullscreenModal
         closeOnEscape={true}

package/core/components/molecules/fullscreenModal/__stories__/Scrolling.story.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@/utils/action';
-import { Button, Text, Paragraph, FullscreenModal } from '@/index';
+import { Button, Text, FullscreenModal } from '@/index';
 export const scrolling = () => {
   const [open, setOpen] = React.useState(false);
@@ -52,7 +52,9 @@ export const scrolling = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <FullscreenModal
         open={open}
         dimension="large"

package/core/components/molecules/fullscreenModal/__stories__/TwoStepWorkflow.story.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Paragraph, Text, Card, FullscreenModal, Input, Label } from '@/index';
+import { Button, Text, Card, FullscreenModal, Input, Label } from '@/index';
 import { List } from '@/index.type';
 export const twoStepsWorkflow = () => {
@@ -50,7 +50,6 @@ export const twoStepsWorkflow = () => {
   return (
     <div>
       <Button appearance="primary" onClick={openModal}>
         Open Modal
       </Button>

package/core/components/molecules/fullscreenModal/__stories__/twoSteps.story.jsx CHANGED Viewed

@@ -16,7 +16,6 @@ export const twoSteps = () => {
   return (
     <div>
       <Button appearance="primary" onClick={openModal}>
         Open Modal
       </Button>

package/core/components/molecules/fullscreenModal/__stories__/variants/dimension/Large.story.jsx CHANGED Viewed

@@ -16,7 +16,6 @@ export const large = () => {
   return (
     <div>
       <Button appearance="primary" onClick={openModal}>
         Open Modal
       </Button>

package/core/components/molecules/fullscreenModal/__stories__/variants/dimension/Medium.story.jsx CHANGED Viewed

@@ -16,7 +16,6 @@ export const medium = () => {
   return (
     <div>
       <Button appearance="primary" onClick={openModal}>
         Open Modal
       </Button>

package/core/components/molecules/modal/__stories__/Alert.story.jsx CHANGED Viewed

@@ -14,7 +14,9 @@ export const alerts = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         open={open}
         dimension={dimension}

package/core/components/molecules/modal/__stories__/Confirmation.story.jsx CHANGED Viewed

@@ -14,7 +14,9 @@ export const confirmations = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         open={open}
         dimension={dimension}

package/core/components/molecules/modal/__stories__/Dialog.story.jsx CHANGED Viewed

@@ -38,7 +38,9 @@ export const dialogs = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         open={open}
         dimension={dimension}

package/core/components/molecules/modal/__stories__/Input.story.jsx CHANGED Viewed

@@ -61,7 +61,9 @@ export const inputModals = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         open={open}
         dimension="large"

package/core/components/molecules/modal/__stories__/Layering.story.jsx CHANGED Viewed

@@ -20,7 +20,9 @@ export const layering = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         closeOnEscape={true}
         open={open}

package/core/components/molecules/modal/__stories__/NoFooter.story.jsx CHANGED Viewed

@@ -14,7 +14,9 @@ export const noFooter = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         open={open}
         dimension={dimension}

package/core/components/molecules/modal/__stories__/Scrolling.story.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@/utils/action';
-import { Modal, Button, Text, Paragraph } from '@/index';
+import { Modal, Button, Text } from '@/index';
 export const scrolling = () => {
   const [open, setOpen] = React.useState(false);
@@ -77,7 +77,9 @@ export const scrolling = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         open={open}
         dimension="large"

package/core/components/molecules/modal/__stories__/index.story.jsx CHANGED Viewed

@@ -14,7 +14,9 @@ export const all = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         open={open}
         dimension={dimension}

package/core/components/molecules/modal/__stories__/old.story.jsx CHANGED Viewed

@@ -14,7 +14,9 @@ export const old = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal open={open} dimension={dimension} backdropClose={backdropClose ? onClose : undefined}>
         <ModalHeader onClose={onClose} heading="Heading" subHeading="Subheading" />
         <ModalBody>

package/core/components/molecules/modal/__stories__/variants/dimension/Large.story.jsx CHANGED Viewed

@@ -14,7 +14,9 @@ export const large = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         open={open}
         dimension={dimension}

package/core/components/molecules/modal/__stories__/variants/dimension/Medium.story.jsx CHANGED Viewed

@@ -14,7 +14,9 @@ export const medium = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         open={open}
         dimension={dimension}

package/core/components/molecules/modal/__stories__/variants/dimension/Small.story.jsx CHANGED Viewed

@@ -14,7 +14,9 @@ export const small = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Modal</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Modal
+      </Button>
       <Modal
         open={open}
         dimension={dimension}

package/core/components/molecules/popover/__stories__/Actions.story.jsx CHANGED Viewed

@@ -4,12 +4,7 @@ import { Text, Button, Popover } from '@/index';
 // CSF format story
 export const popoverWithAction = () => (
   <div className="mb-10">
-    <Popover
-      position="bottom-start"
-      on="click"
-      trigger={<Button appearance="basic">Open Popover</Button>}
-      open={false}
-    >
+    <Popover position="bottom-start" on="click" trigger={<Button appearance="basic">Open Popover</Button>} open={false}>
       <div style={{ width: 'var(--spacing-9)' }} className="mx-6 my-6">
         <Text>You have some edits saved in draft state.You can resume editing or discard those changes.</Text>
         <div className="d-flex">

package/core/components/molecules/popover/__stories__/Inputs.story.jsx CHANGED Viewed

@@ -4,12 +4,7 @@ import { Button, Popover, Label, Textarea, Link, Input } from '@/index';
 // CSF format story
 export const popoverWithInput = () => (
   <div className="mb-13">
-    <Popover
-      position="bottom-start"
-      on="click"
-      trigger={<Link>Open Popover</Link>}
-      open={false}
-    >
+    <Popover position="bottom-start" on="click" trigger={<Link>Open Popover</Link>} open={false}>
       <div style={{ width: 'var(--spacing-9)', height: 'var(--spacing-8)+var(--spacing-xl)' }} className="mx-6 my-6">
         <Label required={true} withInput={true}>
           Name

package/core/components/molecules/popover/__stories__/Light.story.jsx CHANGED Viewed

@@ -4,12 +4,7 @@ import { Button, Popover } from '@/index';
 // CSF format story
 export const lightPopover = () => (
   <div className="mb-9">
-    <Popover
-      position="bottom"
-      on="click"
-      trigger={<Button appearance="basic">Open Popover</Button>}
-      open={false}
-    >
+    <Popover position="bottom" on="click" trigger={<Button appearance="basic">Open Popover</Button>} open={false}>
       <div style={{ width: 'var(--spacing-7)', height: 'var(--spacing-7)' }} />
     </Popover>
   </div>

package/core/components/molecules/popover/__stories__/variants/boundaryElement.story.jsx CHANGED Viewed

@@ -35,7 +35,7 @@ export const boundaryElement = () => {
   };
   if (on === 'hover') delete options.onToggle;
-  const ref = React.useRef<HTMLDivElement>(null);
+  const ref = React.useRef < React.HTMLDivElement > null;
   return (
     <div ref={ref.current} style={{ height: 150, border: '1px dashed', padding: 20, overflow: 'auto' }}>

package/core/components/molecules/sidesheet/__stories__/index.story.jsx CHANGED Viewed

@@ -57,7 +57,9 @@ export const all = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Sidesheet</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Sidesheet
+      </Button>
       <Sidesheet {...options}>
         <Text>Modal Body</Text>
         <ModalDescription {...modalDescriptionOptions} />

package/core/components/molecules/sidesheet/__stories__/variants/CustomHeader.story.jsx CHANGED Viewed

@@ -42,7 +42,9 @@ export const customHeader = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Sidesheet</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Sidesheet
+      </Button>
       <Sidesheet
         {...options}
         dimension="regular"

package/core/components/molecules/sidesheet/__stories__/variants/Layering.story.jsx CHANGED Viewed

@@ -80,7 +80,9 @@ export const layering = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Sidesheet</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Sidesheet
+      </Button>
       <Sidesheet {...options} dimension="large" closeOnEscape={true}>
         <Text>Modal Body</Text>
         <ModalDescription {...modalDescriptionOptions} />

package/core/components/molecules/sidesheet/__stories__/variants/LayeringWithModal.story.jsx CHANGED Viewed

@@ -64,7 +64,9 @@ export const layeringWithModal = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Sidesheet</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Sidesheet
+      </Button>
       <Sidesheet {...options} closeOnEscape={true}>
         <Text>Modal Body</Text>
         <ModalDescription {...modalDescriptionOptions} />

package/core/components/molecules/sidesheet/__stories__/variants/dimension/Large.story.jsx CHANGED Viewed

@@ -55,7 +55,9 @@ export const Large = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Sidesheet</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Sidesheet
+      </Button>
       <Sidesheet {...options} dimension="large">
         <Text>Modal Body</Text>
         <ModalDescription {...modalDescriptionOptions} />

package/core/components/molecules/sidesheet/__stories__/variants/dimension/Regular.story.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@/utils/action';
-import { Text, Paragraph, Sidesheet, ModalDescription, Button } from '@/index';
+import { Text, Sidesheet, ModalDescription, Button } from '@/index';
 export const regular = () => {
   const [open, setOpen] = React.useState(false);
@@ -55,7 +55,9 @@ export const regular = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Sidesheet</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Sidesheet
+      </Button>
       <Sidesheet {...options} dimension="regular">
         <Text>Modal Body</Text>
         <ModalDescription {...modalDescriptionOptions} />

package/core/components/molecules/sidesheet/__stories__/variants/stickyFooter.story.jsx CHANGED Viewed

@@ -55,7 +55,9 @@ export const stickyFooter = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Sidesheet</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Sidesheet
+      </Button>
       <Sidesheet {...options}>
         <Text>Modal Body</Text>
         <ModalDescription {...modalDescriptionOptions} />

package/core/components/molecules/sidesheet/__stories__/variants/twoSteps.story.jsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { action } from '@/utils/action';
 import { Heading, Text, Sidesheet, ModalDescription, Button } from '@/index';
 export const twoSteps = () => {
-  const [page, setPage] = React.useState(2);
+  const [page, setPage] = React.useState(1);
   const [animate, setAnimate] = React.useState(true);
   const [open, setOpen] = React.useState(false);
   const seperator = false;
@@ -77,7 +77,9 @@ export const twoSteps = () => {
   return (
     <div>
-      <Button appearance="primary" onClick={() => setOpen(true)}>Open Sidesheet</Button>
+      <Button appearance="primary" onClick={() => setOpen(true)}>
+        Open Sidesheet
+      </Button>
       <Sidesheet {...options}>
         <div className={animate ? 'fade-in' : ''} onAnimationEnd={() => setAnimate(false)}>
           <Heading size="s">{`Page ${page}`}</Heading>
@@ -92,11 +94,11 @@ export const twoSteps = () => {
 const customCode = `() => {
   const [open, setOpen] = React.useState(false);
-  const [page, setPage] = React.useState(2);
+  const [page, setPage] = React.useState(1);
   const [animate, setAnimate] = React.useState(true);
   const onClose = () => {
-    setOpen(!open);
+    setOpen(false);
   };
   React.useEffect(() => {

package/core/components/molecules/tabs/__stories__/DismissibleTab.story.jsx CHANGED Viewed

@@ -13,6 +13,7 @@ export const dismissibleTab = () => {
   };
   const onDismissHandler = (tabInfo) => {
+    action(`tab-change: ${tabInfo}`)();
     setHideTab(true);
   };

package/core/components/molecules/tooltip/__stories__/variants/Position.story.jsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { Tooltip, Button } from '@/index';
 // CSF format story
 export const position = () => {
-  const positions = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'right'];
+  const positions = ['top', 'top-start', 'bottom', 'top-end', 'bottom-start', 'bottom-end', 'right', 'left'];
   const appendToBody = false;
   const tooltip = 'An awesome tooltip';
@@ -18,18 +18,7 @@ export const position = () => {
         return (
           <div key={ind} className="mr-13 mt-8">
             <Tooltip position={pos} {...options}>
-              <div
-                ref={(buttonRef) => {
-                  const event = new MouseEvent('mouseover', {
-                    view: window,
-                    bubbles: true,
-                    cancelable: true,
-                  });
-                  if (buttonRef) buttonRef.dispatchEvent(event);
-                }}
-              >
-                <Button>{pos}</Button>
-              </div>
+              <Button>{pos}</Button>
             </Tooltip>
           </div>
         );

package/core/components/organisms/calendar/__stories__/index.story.jsx CHANGED Viewed

@@ -13,7 +13,7 @@ export const all = () => {
   const endDate = new Date('Jan 20 2021');
-  const view = 'year';
+  const view = 'date';
   const rangePicker = false;
@@ -37,13 +37,46 @@ export const all = () => {
   if (rangeLimit) attr.rangeLimit = rangeLimit;
   if (yearNav !== -1) attr.yearNav = yearNav;
   if (monthNav !== -1) attr.monthNav = monthNav;
-  // we redefine this function here because in storybook.json we donot get imported functions.
-  const convertToDate = (
-    d, format, validators
-  ) => {
+  // we redefine this function here because in storybook.json we do not get imported functions.
+  const isValid = (validators, ...value) => {
+    const iterator = Array.isArray(validators) ? validators : [validators];
+    return iterator.every((validator) => validator(...value));
+  };
+  const translateToDate = (format, val, validators) => {
+    if (isValid(validators, val, format)) {
+      const separator = format.includes('/') ? '/' : '-';
+      let year = -1,
+        month = -1,
+        date = -1;
+      const v = val.split(separator);
+      format.split(separator).forEach((f, i) => {
+        switch (f) {
+          case 'mm':
+            month = +v[i] - 1;
+            break;
+          case 'yyyy':
+            year = +v[i];
+            break;
+          case 'dd':
+            date = +v[i];
+            break;
+        }
+      });
+      const d = convertToDate({ year, month, date });
+      return d;
+    } else {
+      return undefined;
+    }
+  };
+  const convertToDate = (d, format, validators) => {
     let dateVal;
     if (d) {
       if (typeof d === 'number') {
         dateVal = new Date(d);

package/core/components/organisms/calendar/__stories__/variants/size.story.jsx CHANGED Viewed

@@ -5,7 +5,6 @@ import Heading from '@/components/atoms/heading';
 // CSF format story
 export const size = () => {
   return (
     <>
       <div className="mt-8">
@@ -13,7 +12,7 @@ export const size = () => {
         <div className="d-flex">
           <div className="mr-8">
             <Card className="d-inline-flex" shadow="light">
-              <Calendar date={new Date(2020, 2, 15)} size={'small'} view='date' />
+              <Calendar date={new Date(2020, 2, 15)} size={'small'} view="date" />
             </Card>
           </div>
         </div>
@@ -24,7 +23,7 @@ export const size = () => {
         <div className="d-flex">
           <div className="mr-8">
             <Card className="d-inline-flex" shadow="light">
-              <Calendar date={new Date(2020, 2, 15)} size={'large'} view='date' />
+              <Calendar date={new Date(2020, 2, 15)} size={'large'} view="date" />
             </Card>
           </div>
         </div>

package/core/components/organisms/datePicker/DatePicker.tsx CHANGED Viewed

@@ -65,7 +65,7 @@ export type DatePickerProps = SharedProps & {
   /**
    * Element to be rendered inside Popover
    */
-  children: React.ReactNode;
+  children?: React.ReactNode;
 };
 export interface DatePickerState {

package/core/components/organisms/dateRangePicker/__stories__/variants/withSingleInput.story.jsx CHANGED Viewed

@@ -28,6 +28,8 @@ export const withSingleInput = () => {
   const monthNav = -1;
+  const open = false;
   const attr = {};
   if (disabledBefore) attr.disabledBefore = disabledBefore;
   if (disabledAfter) attr.disabledAfter = disabledAfter;
@@ -55,6 +57,7 @@ export const withSingleInput = () => {
           label: 'Date',
         }}
         {...attr}
+        open={open}
       />
     </div>
   );