@innovaccer/design-system 2.9.0 → 2.10.0

package/core/components/molecules/editableChipInput/__stories__/index.story.tsx

@@ -1,80 +0,0 @@
-import * as React from 'react';
-import { text } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-import { EditableChipInput } from '@/index';
-
-// CSF format story
-
-export const all = () => {
-  const [value, setValue] = React.useState<string[]>();
-
-  const onChange = (updatedValue: string[]) => {
-    setValue(updatedValue);
-  };
-  const onClick = (item: any) => action(`onClick: ${item}`);
-
-  const placeholder = text('Placeholder', 'Add Value');
-  const chipOptions = { onClick, clearButton: true };
-  const chipInputOptions = {
-    chipOptions,
-    allowDuplicates: false,
-    defaultValue: [],
-    autoFocus: true,
-  };
-
-  const options = {
-    placeholder,
-    value,
-    onChange,
-    chipInputOptions,
-  };
-  return (
-    <div className="w-25">
-      <EditableChipInput {...options} />
-    </div>
-  );
-};
-
-const customCode = `() => {
-  const [value, setValue] = React.useState();
-
-  const onChange = (updatedValue) => {
-    setValue(updatedValue);
-  };
-  const onClick = (item) =>  console.log(item);
-
-  const placeholder ='Add Value';
-  const chipOptions = { onClick, clearButton:true };
-  const chipInputOptions = {
-    chipOptions,
-    allowDuplicates:false,
-    defaultValue:[],
-    autoFocus:true
-  };
-
-  const options = {
-    placeholder,
-    value,
-    onChange,
-    chipInputOptions
-  };
-  return (
-      <div className="w-25">
-        <EditableChipInput
-          {...options}
-        />
-      </div>
-  );
-}`;
-
-export default {
-  title: 'Components/EditableChipInput/All',
-  component: EditableChipInput,
-  parameters: {
-    docs: {
-      docPage: {
-        customCode,
-      },
-    },
-  },
-};

package/core/components/molecules/editableDropdown/__stories__/index.story.tsx

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import { text } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-import { EditableDropdown, Label } from '@/index';
-
-// CSF format story
-const dropdownOptions: any = [];
-for (let i = 1; i <= 100; i++) {
-  dropdownOptions.push({
-    label: `Option ${i}`,
-    value: `Option ${i}`,
-    group: i >= 1 && i <= 40 ? 'Group 1' : 'Group 2',
-    selected: i === 2,
-  });
-}
-
-export const all = () => {
-  const placeholder = text('Placeholder', 'Select Option');
-
-  const getSearchedOptions = (options: any, searchTerm: string) => {
-    const result = options.filter((option: any) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
-    return result;
-  };
-
-  const fetchOptions = (searchTerm: string) => {
-    const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
-    return new Promise<any>((resolve) => {
-      window.setTimeout(() => {
-        resolve({
-          options: searchedOptions,
-          count: searchedOptions.length,
-        });
-      }, 1000);
-    });
-  };
-
-  const onChange = (selectedValues: any) => {
-    return action(`selected values length: ${selectedValues}`)();
-  };
-
-  return (
-    <div className="w-25">
-      <Label withInput={true} className="ml-5">
-        Editable Dropdown
-      </Label>
-      <EditableDropdown
-        placeholder={placeholder}
-        dropdownOptions={{
-          fetchOptions,
-          onChange,
-        }}
-      />
-    </div>
-  );
-};
-
-const customCode = `() => {
-  const dropdownOptions = [];
-  for (let i = 1; i <= 100; i++) {
-    dropdownOptions.push({
-      label: \`Option \${i}\`,
-      value: \`Option \${i}\`,
-      group: i >= 1 && i <= 40 ? 'Group 1' : 'Group 2',
-      selected: i === 2
-    });
-  };
-
-  const getSearchedOptions = (options, searchTerm) => {
-    const result = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
-    return result;
-  };
-
-  const fetchOptions = (searchTerm) => {
-    const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
-    return new Promise(resolve => {
-      window.setTimeout(() => {
-        resolve({
-          options: searchedOptions,
-          count: searchedOptions.length,
-        });
-      }, 1000);
-    });
-  };
-
-  const onChange = (selectedValues) => {
-    consol.log(selectedValues);
-  };
-
-  return (
-    <div className="w-25">
-      <Label withInput={true} className="ml-5">Editable Dropdown</Label>
-      <EditableDropdown
-        placeholder="Select Option"
-        dropdownOptions={{
-          fetchOptions,
-          onChange
-        }}
-      />
-    </div>
-  );
-}`;
-
-export default {
-  title: 'Components/EditableDropdown/All',
-  component: EditableDropdown,
-  parameters: {
-    docs: {
-      docPage: {
-        customCode,
-      },
-    },
-  },
-};

package/core/components/molecules/editableDropdown/__stories__/variants/customRenderer.story.tsx

@@ -1,131 +0,0 @@
-import * as React from 'react';
-import { action } from '@storybook/addon-actions';
-import { EditableDropdown, Label, StatusHint, Icon } from '@/index';
-
-// CSF format story
-const options: any = [];
-for (let i = 1; i <= 10; i++) {
-  options.push({
-    label: `Option ${i}`,
-    value: `Option ${i}`,
-    group: i >= 1 && i <= 40 ? 'Group 1' : 'Group 2',
-    selected: i === 2,
-  });
-}
-
-export const customRender = () => {
-  const onChange = (selectedValues: any) => {
-    return action(`selected values length: ${selectedValues}`)();
-  };
-
-  const customTrigger = (label: string) => {
-    return (
-      <div
-        className="d-flex align-items-center justify-content-between pl-5 pr-4 bg-secondary cursor-pointer w-100"
-        style={{ height: 'var(--spacing-3)' }}
-      >
-        <StatusHint appearance="warning">{label}</StatusHint>
-        <Icon name="keyboard_arrow_down" />
-      </div>
-    );
-  };
-
-  const customRenderer = (label: string) => {
-    return <StatusHint appearance="warning">{label}</StatusHint>;
-  };
-
-  const optionRenderer = (props: any) => {
-    const { label } = props.optionData;
-    return (
-      <StatusHint className="px-5 py-4 cursor-pointer" appearance="warning">
-        {label}
-      </StatusHint>
-    );
-  };
-
-  return (
-    <div className="w-25">
-      <Label withInput={true} className="ml-5">
-        Editable Dropdown
-      </Label>
-      <EditableDropdown
-        customTriggerRenderer={customRenderer}
-        dropdownOptions={{
-          options,
-          onChange,
-          optionRenderer,
-          triggerOptions: { customTrigger },
-        }}
-      />
-    </div>
-  );
-};
-
-const customCode = `() => {
-  const options = [];
-  for (let i = 1; i <= 10; i++) {
-    options.push({
-      label: \`Option \${i}\`,
-      value: \`Option \${i}\`,
-      group: i >= 1 && i <= 40 ? 'Group 1' : 'Group 2',
-      selected: i === 2
-    });
-  };
-
-  const onChange = (selectedValues) => {
-    console.log(selectedValues);
-  };
-
-  const customRenderer = (label) => {
-    return (
-      <StatusHint appearance="warning">{label}</StatusHint>
-    );
-  };
-
-  const optionRenderer = (props) => {
-    const { label } = props.optionData;
-    return (
-      <StatusHint className="px-5 py-4 cursor-pointer" appearance="warning">{label}</StatusHint>
-    );
-  };
-
-  const customTrigger = (label) => {
-    return (
-      <div
-        className="d-flex align-items-center justify-content-between pl-5 pr-4 bg-secondary cursor-pointer w-100"
-        style={{ height: 'var(--spacing-3)' }}
-      >
-        <StatusHint appearance="warning">{label}</StatusHint>
-        <Icon name="keyboard_arrow_down" />
-      </div>
-    );
-  };
-
-  return (
-    <div className="w-25">
-      <Label withInput={true} className="ml-5">Editable Dropdown</Label>
-      <EditableDropdown
-        customTriggerRenderer={customRenderer}
-        placeholder="Select Option"
-        dropdownOptions={{
-          options,
-          onChange,
-          optionRenderer,
-          triggerOptions: { customTrigger },
-        }}
-      />
-    </div>
-  );
-}`;
-
-export default {
-  title: 'Components/EditableDropdown/Variants/Custom Render',
-  component: EditableDropdown,
-  parameters: {
-    docs: {
-      docPage: {
-        customCode,
-      },
-    },
-  },
-};

package/core/components/molecules/editableInput/__stories__/index.story.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { select, text, boolean } from '@storybook/addon-knobs';
-import { EditableInput } from '@/index';
-
-// CSF format story
-export const all = () => {
-  const placeholder = text('Placeholder', 'First Name');
-  const error = boolean('error', false);
-  const errorMessage = text('Error Message', 'Error Message Description');
-
-  const [value, setValue] = React.useState('');
-
-  const size = select('size', ['regular', 'tiny'], 'regular');
-
-  const onChange = (updatedValue: string) => {
-    setValue(updatedValue);
-  };
-
-  const options = {
-    placeholder,
-    errorMessage,
-    onChange,
-    error,
-    size,
-    value,
-  };
-
-  return (
-    <div style={{ width: 'var(--spacing-9)' }}>
-      <EditableInput {...options} />
-    </div>
-  );
-};
-
-const customCode = `() => {
-  const [value, setValue] = React.useState('');
-
-  const onChange = (updatedValue) => {
-    setValue(updatedValue);
-  };
-
-  const options = {
-    placeholder: 'First Name',
-    onChange,
-    value,
-  };
-
-  return (
-    <div style={{ width: 'var(--spacing-9)', height: 'var(--spacing-3)' }}>
-      <EditableInput
-        {...options}
-      />
-    </div>
-  );
-}`;
-
-export default {
-  title: 'Components/EditableInput/All',
-  component: EditableInput,
-  parameters: {
-    docs: {
-      docPage: {
-        customCode,
-      },
-    },
-  },
-};

package/core/components/molecules/editableInput/__stories__/variants/Error.story.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { EditableInput } from '@/index';
-
-// CSF format story
-export const error = () => {
-  const [value, setValue] = React.useState('');
-
-  const onChange = (updatedValue: string) => {
-    setValue(updatedValue);
-  };
-
-  return (
-    <div style={{ width: 'var(--spacing-9)' }}>
-      <EditableInput
-        placeholder="First Name"
-        value={value}
-        onChange={onChange}
-        error={true}
-        errorMessage={'Error Message'}
-      />
-    </div>
-  );
-};
-
-const customCode = `() => {
-  const [value, setValue] = React.useState('');
-
-  const onChange = (value) => {
-    setValue(value);
-  }
-
-  return (
-    <div style={{ width: 'var(--spacing-9)' }}>
-      <EditableInput
-        placeholder="First Name"
-        value={value}
-        onChange={onChange}
-        error={true}
-        errorMessage={'Error Message'}
-      />
-    </div>
-  );
-}`;
-
-export default {
-  title: 'Components/EditableInput/Variants/Error',
-  component: EditableInput,
-  parameters: {
-    docs: {
-      docPage: {
-        customCode,
-      },
-    },
-  },
-};

package/core/components/molecules/editableInput/__stories__/variants/Size.story.tsx

@@ -1,81 +0,0 @@
-import * as React from 'react';
-import { EditableInput, Label } from '@/index';
-
-// CSF format story
-export const size = () => {
-  const [name, setName] = React.useState('');
-  const [weight, setWeight] = React.useState('');
-
-  const onChangeName = (value: string) => {
-    setName(value);
-  };
-
-  const onChangeWeight = (value: string) => {
-    setWeight(value);
-  };
-
-  return (
-    <div className="d-flex">
-      <div className="d-flex flex-column" style={{ width: 'var(--spacing-9)' }}>
-        <Label withInput={true} className="ml-5">
-          Regular
-        </Label>
-        <EditableInput placeholder="First Name" value={name} onChange={onChangeName} className="mr-5" />
-      </div>
-      <div className="d-flex flex-column" style={{ width: 'var(--spacing-7)' }}>
-        <Label withInput={true} className="ml-5">
-          Tiny
-        </Label>
-        <EditableInput placeholder="Add Weight" value={weight} onChange={onChangeWeight} size="tiny" />
-      </div>
-    </div>
-  );
-};
-
-const customCode = `() => {
-  const [name, setName] = React.useState('');
-  const [weight, setWeight] = React.useState('');
-
-  const onChangeName = (value) => {
-    setName(value);
-  };
-
-  const onChangeWeight = (value) => {
-    setWeight(value);
-  }
-
-  return (
-    <div className="d-flex">
-      <div className="d-flex flex-column" style={{ width: 'var(--spacing-9)' }}>
-        <Label withInput={true} className="ml-5">Regular</Label>
-        <EditableInput
-          placeholder="First Name"
-          value={name}
-          onChange={onChangeName}
-          className="mr-5"
-        />
-      </div>
-      <div className="d-flex flex-column" style={{ width: 'var(--spacing-7)' }}>
-        <Label withInput={true} className="ml-5">Tiny</Label>
-        <EditableInput
-          placeholder="Add Weight"
-          value={weight}
-          onChange={onChangeWeight}
-          size="tiny"
-        />
-      </div>
-    </div>
-  );
-}`;
-
-export default {
-  title: 'Components/EditableInput/Variants/Size',
-  component: EditableInput,
-  parameters: {
-    docs: {
-      docPage: {
-        customCode,
-      },
-    },
-  },
-};

package/core/components/molecules/emptyState/__stories__/index.story.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { text } from '@storybook/addon-knobs';
-import { EmptyState, Button } from '@/index';
-import noContent from './assets/noContent.png';
-
-export const all = () => {
-  const title = text('title', 'Manage your outreach campaigns');
-  const description = text(
-    'description',
-    'Campaigns let you reach out to patients with text messages, emails and voice calls'
-  );
-
-  return (
-    <div className="h-100" style={{ backgroundColor: 'var(--secondary-lightest)' }}>
-      <EmptyState title={title} description={description} size="large" imageSrc={noContent}>
-        <Button size="large" appearance="primary">
-          Add campaigns
-        </Button>
-      </EmptyState>
-    </div>
-  );
-};
-
-export default {
-  title: 'Components/EmptyState/All',
-  component: EmptyState,
-};

package/core/components/molecules/emptyState/__stories__/noContentAvailable.story.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { EmptyState, Button } from '@/index';
-import { text } from '@storybook/addon-knobs';
-import noContent from './assets/noContent.png';
-
-export const noContentAvailable = () => {
-  const title = text('title', 'Manage your outreach campaigns');
-  const description = text(
-    'description',
-    'Campaigns let you reach out to patients with text messages, emails and voice calls'
-  );
-  return (
-    <div className="h-100 pb-5" style={{ backgroundColor: 'var(--secondary-lightest)' }}>
-      <EmptyState title={title} description={description} imageSrc={noContent} size="large">
-        <Button size="large" appearance="primary">
-          Reload page
-        </Button>
-      </EmptyState>
-    </div>
-  );
-};
-
-export default {
-  title: 'Components/EmptyState/No Content Available',
-  component: EmptyState,
-};