@innovaccer/design-system 2.13.3 → 2.13.4-2

package/core/components/organisms/horizontalNav/__stories__/leftAlign.story.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@/utils/action';
-import { Modal, Button, Paragraph, HorizontalNav, Dropdown, Label } from '@/index';
+import { Modal, Button, Paragraph, HorizontalNav, Dropdown, Label, Heading } from '@/index';
 
 export const leftAlignedNavigationTabs = () => {
   const options = [];
@@ -44,6 +44,17 @@ export const leftAlignedNavigationTabs = () => {
     setActive(menu);
   };
 
+  const subHeading = (
+    <HorizontalNav align="left" menus={data} active={active} onClick={onClickHandler} className="ml-5 mt-4" />
+  );
+
+  const header = (
+    <div>
+      <Heading className="ml-7 mb-3">Medication</Heading>
+      {subHeading}
+    </div>
+  );
+
   return (
     <div>
       <Paragraph>
@@ -69,9 +80,7 @@ export const leftAlignedNavigationTabs = () => {
         open={open}
         dimension="large"
         onClose={onClose}
-        headerOptions={{
-          heading: 'Medication',
-        }}
+        header={header}
         footer={
           <>
             <Button appearance="basic">Discard</Button>
@@ -80,11 +89,9 @@ export const leftAlignedNavigationTabs = () => {
             </Button>
           </>
         }
+        seperator={true}
       >
-        <div className="pb-4" style={{ borderBottom: 'var(--border)' }}>
-          <HorizontalNav menus={data} active={active} onClick={onClickHandler} />
-        </div>
-        <div className="pt-5 w-50">
+        <div className="py-5 w-50">
           <Label withInput={true} required={true}>
             Type
           </Label>
@@ -144,6 +151,23 @@ const customCode = `() => {
     setActive(menu);
   };
 
+  const subHeading = (
+    <HorizontalNav
+      align="left"
+      menus={data}
+      active={active}
+      onClick={onClickHandler}
+      className="ml-5 mt-4"
+    />
+  );
+
+  const header = (
+    <div>
+      <Heading className="ml-7 mb-3">Medication</Heading>
+      {subHeading}
+    </div>
+  );
+
   return (
     <div>
       <Paragraph>
@@ -160,24 +184,16 @@ const customCode = `() => {
         open={open}
         dimension="large"
         onClose={onClose}
-        headerOptions={{
-          heading: 'Medication',
-        }}
+        header={header}
         footer={(
           <>
             <Button appearance="basic">Discard</Button>
             <Button appearance="primary" className="ml-4">Create</Button>
           </>
         )}
+        seperator={true}
       >
-        <div className="pb-4" style={{ borderBottom: 'var(--border)' }}>
-          <HorizontalNav
-            menus={data}
-            active={active}
-            onClick={onClickHandler}
-          />
-        </div>
-        <div className="pt-5 w-50">
+        <div className="py-5 w-50">
           <Label withInput={true} required={true}>Type</Label>
           <Dropdown
             options={options}

package/core/components/organisms/inlineMessage/__stories__/variants/Default.story.jsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import { InlineMessage } from '@/index';
 
 // CSF format story
-export const defaultMessage = () => (
-  <InlineMessage description="Create a strong, unique password." />
-);
+export const defaultMessage = () => <InlineMessage description="Create a strong, unique password." />;
 
 export default {
   title: 'Components/InlineMessage/Variants/Default Message',

package/core/components/organisms/inlineMessage/__stories__/variants/Error.story.jsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import { InlineMessage } from '@/index';
 
 // CSF format story
-export const alertMessage = () => (
-  <InlineMessage appearance="alert" description="Inline message goes here." />
-);
+export const alertMessage = () => <InlineMessage appearance="alert" description="Inline message goes here." />;
 
 export default {
   title: 'Components/InlineMessage/Variants/Alert Message',

package/core/components/organisms/inlineMessage/__stories__/variants/Info.story.jsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import { InlineMessage } from '@/index';
 
 // CSF format story
-export const infoMessage = () => (
-  <InlineMessage appearance="info" description="There are two new referral requests." />
-);
+export const infoMessage = () => <InlineMessage appearance="info" description="There are two new referral requests." />;
 
 export default {
   title: 'Components/InlineMessage/Variants/Info Message',

package/core/components/organisms/inlineMessage/__stories__/variants/Success.story.jsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import { InlineMessage } from '@/index';
 
 // CSF format story
-export const successMessage = () => (
-  <InlineMessage appearance="success" description="Inline message goes here." />
-);
+export const successMessage = () => <InlineMessage appearance="success" description="Inline message goes here." />;
 
 export default {
   title: 'Components/InlineMessage/Variants/Success Message',

package/core/components/organisms/inlineMessage/__stories__/variants/Warning.story.jsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import { InlineMessage } from '@/index';
 
 // CSF format story
-export const warningMessage = () => (
-  <InlineMessage appearance="warning" description="Inline message goes here." />
-);
+export const warningMessage = () => <InlineMessage appearance="warning" description="Inline message goes here." />;
 
 export default {
   title: 'Components/InlineMessage/Variants/Warning Message',

package/core/components/organisms/pageHeader/__stories__/Responsiveness.story.jsx

@@ -75,7 +75,7 @@ export const Responsiveness = () => {
   const navigation = <Navigation menus={navigationData} onClick={onClickHandler} active={active} />;
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader
         navigationPosition="bottom"
         title="Pac Follow-Up Protocol"
@@ -174,7 +174,7 @@ const customCode = `() => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest">
+    <div className="py-6 bg-secondary-lightest">
       <PageHeader
         navigationPosition="bottom"
         title="Pac Follow-Up Protocol"

package/core/components/organisms/pageHeader/__stories__/variants/withNavigation.story.jsx

@@ -39,7 +39,7 @@ export const withNavigation = () => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -77,7 +77,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/variants/withNavigationL1.story.jsx

@@ -59,7 +59,7 @@ export const withNavigation = () => {
     meta: <MetaList list={[{ label: 'Meta data' }]} seperator={true} />,
   };
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -134,7 +134,7 @@ const customCode = `() => {
     )
   };
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/variants/withStepper.story.jsx

@@ -51,7 +51,7 @@ export const withStepper = () => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -100,7 +100,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/variants/withStepperL1.story.jsx

@@ -65,7 +65,7 @@ export const withStepper = () => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -144,7 +144,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/variants/withTabs.story.jsx

@@ -67,7 +67,7 @@ export const withTabs = () => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -136,7 +136,7 @@ const customCode = `() => {
   };
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/variants/withTabsL1.story.jsx

@@ -78,7 +78,7 @@ export const withTabs = () => {
     meta: <MetaList list={[{ label: 'Meta data' }]} seperator={true} />,
   };
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );
@@ -174,7 +174,7 @@ const customCode = `() => {
     )
   };
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader {...options} />
     </div>
   );

package/core/components/organisms/pageHeader/__stories__/withFilter.story.jsx

@@ -31,7 +31,7 @@ export const level0WithFilter = () => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{ width: '900px' }}>
       <PageHeader title="Users" separator={true} tabs={tab} actions={actions} />
     </div>
   );
@@ -71,7 +71,7 @@ const customCode = `() => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{width:'900px'}}>
       <PageHeader
         title="Users"
         separator={true}

package/core/components/organisms/pageHeader/__stories__/withFilterL1.story.jsx

@@ -35,7 +35,7 @@ export const level1WithFilter = () => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{ width: '900px' }}>
       <PageHeader title="Sender creation report" separator={true} tabs={tab} breadcrumbs={breadcrumbs} />
     </div>
   );
@@ -78,7 +78,7 @@ const customCode = `() => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{width:'900px'}}>
       <PageHeader
         title="Sender creation report"
         separator={true}

package/core/components/organisms/pageHeader/__stories__/withNavigation.story.jsx

@@ -29,7 +29,7 @@ export const level0WithNavigation = () => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{ width: '900px' }}>
       <PageHeader title="Dashboard" separator={true} navigation={navigation} actions={actions} />
     </div>
   );
@@ -64,7 +64,7 @@ const customCode = `() => {
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{width:'900px'}}>
       <PageHeader
         title="Dashboard"
         separator={true}

package/core/components/organisms/pageHeader/__stories__/withNavigationL1.story.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Navigation, Breadcrumbs, Badge, MetaList, PageHeader } from '@/index';
+import { Navigation, Breadcrumbs, Badge, MetaList, PageHeader, StatusHint } from '@/index';
 import { action } from '@/utils/action';
 
 export const level1WithNavigation = () => {
@@ -41,8 +41,11 @@ export const level1WithNavigation = () => {
     </Badge>
   );
   const meta = <MetaList list={[{ label: 'Text' }, { label: 'Email' }]} />;
+
+  const status = <StatusHint appearance="info">Ongoing</StatusHint>;
+
   return (
-    <div className="p-5 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-5 bg-secondary-lightest" style={{ width: '900px' }}>
       <PageHeader
         title="Covid-19"
         separator={true}
@@ -106,8 +109,11 @@ const customCode = `() => {
       list={[{ label: 'Text' }, { label: 'Email' }]}
     />
   );
+
+  const status = <StatusHint appearance="info">Ongoing</StatusHint>;
+
   return (
-    <div className="p-5 bg-secondary-lightest" style={{width:'900px'}}>
+    <div className="py-5 bg-secondary-lightest" style={{width:'900px'}}>
       <PageHeader
         title="Covid-19"
         separator={true}

package/core/components/organisms/pageHeader/__stories__/withStepperL1.story.jsx

@@ -71,10 +71,10 @@ export const level1WithStepper = () => {
     />
   );
   const badge = <Badge appearance="secondary">Message</Badge>;
-  const meta = <MetaList list={[{ label: 'Draft' }]} seperator={true} />;
+  const meta = <MetaList list={[{ label: 'Draft' }]} seperator={false} />;
 
   return (
-    <div className="w-100 p-6 bg-secondary-lightest">
+    <div className="w-100 py-6 bg-secondary-lightest">
       <PageHeader
         title="Annual Wellness Visit"
         separator={true}
@@ -163,12 +163,12 @@ const customCode = `() => {
   const meta = (
     <MetaList
       list={[{ label: 'Draft' }]}
-      seperator={true}
+      seperator={false}
     />
   );
 
   return (
-    <div className="p-6 bg-secondary-lightest" style={{width:'1200px'}}>
+    <div className="py-6 bg-secondary-lightest" style={{width:'1200px'}}>
       <PageHeader
         title="Annual Wellness Visit"
         separator={true}

package/core/components/organisms/table/__stories__/TableAsDescriptionList.story.jsx

@@ -29,7 +29,7 @@ export const tableAsDescriptionList = () => {
     {
       name: 'info',
       displayName: 'Info',
-      width: '80%',
+      width: '75%',
       cellType: 'AVATAR_WITH_META_LIST',
       translate: (a) => ({
         firstName: a.firstName,
@@ -41,7 +41,7 @@ export const tableAsDescriptionList = () => {
     {
       name: 'rights',
       displayName: 'Rights',
-      width: '20%',
+      width: '25%',
       cellRenderer: (props) => {
         const renderRights = () => {
           if (props.data.owner) {
@@ -132,7 +132,7 @@ const customCode = `() => {
     {
       name: 'info',
       displayName: 'Info',
-      width: '80%',
+      width: '75%',
       cellType: 'AVATAR_WITH_META_LIST',
       translate: a => ({
         firstName: a.firstName,
@@ -144,7 +144,7 @@ const customCode = `() => {
     {
       name: 'rights',
       displayName: 'Rights',
-      width: '20%',
+      width: '25%',
       cellRenderer: (props) => {
         const renderRights = () => {
           if (props.data.owner) {

package/core/components/organisms/timePicker/TimePicker.tsx

@@ -1,123 +1,16 @@
 import * as React from 'react';
-import { InputMask, Utils } from '@/index';
-import { InputMaskProps } from '@/index.type';
-import { Validators } from '@/utils/types';
+import TimePickerWithSearch, { TimePickerDropdownProps } from './TimePickerWithSearch';
+import TimePickerWithInput, { TimePickerInputProps } from './TimePickerWithInput';
 
-import { translateToTime, getOutputTimeString, placeholders, isPlaceholderPresent } from './utils';
-
-export type AMPMType = 'AM' | 'PM';
-export type TimeFormat = 'hh:mm AM' | 'hh:mm';
-export type TimeType = number | string;
-
-export interface TimePickerProps {
-  /**
-   * Selected time
-   *
-   * `number` - number of milliseconds elapsed since January 1, 1970, 00:00:00 UTC
-   *
-   * **`string` - Time string value as per `inputFormat`**
-   */
-  time?: TimeType;
-  /**
-   * Props to be used for `InputMask`
-   */
-  inputOptions: Omit<InputMaskProps, 'mask' | 'value' | 'validators'>;
-  /**
-   * Should be used if `time` is of type `string`
-   *
-   * Also determines mask format
-   */
-  inputFormat: TimeFormat;
-  /**
-   * Should be used to translate `time` to desired format for `onTimeChange` callback
-   */
-  outputFormat: TimeFormat;
-  /**
-   * custom Validator for `TimePicker`
-   * `boolean | ((val?: string) => boolean)`
-   */
-  validators: Validators;
-  /**
-   * Callback function called when input field is blurred
-   */
-  onTimeChange?: (timeVal?: string) => void;
-}
+export type TimePickerProps = TimePickerInputProps & TimePickerDropdownProps;
 
 export const TimePicker = (props: TimePickerProps) => {
-  const { validators, inputOptions, inputFormat, outputFormat, onTimeChange, time: timeProp } = props;
-
-  const [time, setTime] = React.useState(timeProp);
-  const [init, setInit] = React.useState(false);
-  const { placeholderChar = '_' } = inputOptions;
-
-  React.useEffect(() => {
-    const timeStr = translateToTime(inputFormat, time);
-    const updatedTime = timeProp === undefined && timeStr.includes(placeholderChar) ? time : timeProp;
-
-    setTime(updatedTime);
-  }, [timeProp]);
-
-  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>, val = '') => {
-    const updatedTime = val?.toUpperCase();
-    setTime(updatedTime);
-
-    if (inputOptions.onChange) {
-      inputOptions.onChange(e, val);
-    }
-  };
-
-  const onBlurHandler = (e: React.ChangeEvent<HTMLInputElement>, val = '') => {
-    const updatedTime = translateToTime(inputFormat, time);
-    setInit(true);
-
-    if (onTimeChange) {
-      const outputTimeStr =
-        updatedTime && !isPlaceholderPresent(placeholderChar, updatedTime)
-          ? getOutputTimeString(inputFormat, outputFormat, updatedTime)
-          : undefined;
-
-      onTimeChange(outputTimeStr);
-    }
-
-    if (inputOptions.onBlur) inputOptions.onBlur(e, val);
-  };
-
-  const onClearHandler = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
-    const updatedTime = '';
-    setInit(true);
-
-    if (onTimeChange) onTimeChange(updatedTime);
-    if (inputOptions.onClear) inputOptions.onClear(e);
-  };
-
-  const inputValidator = (val: string): boolean => {
-    return Utils.validators.isValid(validators, val, inputFormat);
-  };
-
-  const mask = Utils.masks.time[inputFormat];
-  return (
-    <InputMask
-      placeholder={placeholders[inputFormat]}
-      placeholderChar={placeholderChar}
-      {...inputOptions}
-      mask={mask}
-      value={
-        time ? translateToTime(inputFormat, time) : init ? InputMask.utils.getDefaultValue(mask, placeholderChar) : ''
-      }
-      validators={inputValidator}
-      onChange={onChangeHandler}
-      onClear={onClearHandler}
-      onBlur={onBlurHandler}
-      id="parent-TimePicker"
-    />
-  );
+  return props.withSearch ? <TimePickerWithSearch {...props} /> : <TimePickerWithInput {...props} />;
 };
 
 TimePicker.defaultProps = {
-  inputFormat: 'hh:mm AM',
-  outputFormat: 'hh:mm AM',
-  inputOptions: {},
-  validators: [Utils.validators.time],
+  ...TimePickerWithInput.defaultProps,
+  ...TimePickerWithSearch.defaultProps,
 };
 
 TimePicker.displayName = 'TimePicker';