@innovaccer/design-system 2.3.0 → 2.4.0-0

package/core/components/organisms/inlineMessage/InlineMessage.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Icon, Text } from '@/index';
+import { BaseProps, extractBaseProps } from '@/utils/types';
+
+export type Appearance = 'default' | 'alert' | 'info' | 'success' | 'warning';
+const IconMapping = {
+  success: 'check_circle',
+  info: 'info',
+  warning: 'warning',
+  alert: 'error',
+};
+
+export interface InlineMessageProps extends BaseProps {
+  /**
+   * Color of `Inline Message`
+   */
+  appearance: Appearance;
+  /**
+   * Description of `Inline Message`
+   */
+  description: string;
+}
+
+export const InlineMessage = (props: InlineMessageProps) => {
+  const {
+    appearance,
+    className,
+    description
+  } = props;
+
+  const baseProps = extractBaseProps(props);
+
+  const InlineMessageClass = classNames({
+    ['InlineMessage']: true
+  }, className);
+
+  const IconClass = classNames({
+    ['InlineMessage-icon']: true,
+    ['InlineMessage-icon--warning']: appearance === 'warning',
+  });
+
+  const DescriptionClass = classNames({
+    [`InlineMessage-text--${appearance}`]: appearance
+  });
+
+  return (
+    <div data-test="DesignSystem-InlineMessage" {...baseProps} className={InlineMessageClass}>
+      {appearance !== 'default' && (
+        <Icon
+          data-test="DesignSystem-InlineMessage--Icon"
+          name={IconMapping[appearance]}
+          appearance={appearance}
+          className={IconClass}
+        />
+      )}
+      <div>
+        <Text
+          data-test="DesignSystem-InlineMessage--Description"
+          className={DescriptionClass}
+        >
+          {description}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+InlineMessage.displayName = 'InlineMessage';
+InlineMessage.defaultProps = {
+  appearance: 'default',
+  description: ''
+};
+
+export default InlineMessage;

package/core/components/organisms/inlineMessage/__stories__/Default.story.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { InlineMessage, Row, Column } from '@/index';
+
+// CSF format story
+export const defaultMessage = () => (
+  <Row>
+    <Column size="4">
+      <InlineMessage
+        description="Create a strong, unique password."
+      />
+    </Column>
+  </Row>
+);
+
+export default {
+  title: 'Components/InlineMessage/Default Message',
+  component: InlineMessage
+};

package/core/components/organisms/inlineMessage/__stories__/Error.story.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { InlineMessage, Row, Column } from '@/index';
+
+// CSF format story
+export const alertMessage = () => (
+  <Row>
+    <Column size="4">
+      <InlineMessage
+        appearance="alert"
+        description="Inline message goes here."
+      />
+    </Column>
+  </Row>
+);
+
+export default {
+  title: 'Components/InlineMessage/Alert Message',
+  component: InlineMessage
+};

package/core/components/organisms/inlineMessage/__stories__/Info.story.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { InlineMessage, Row, Column } from '@/index';
+
+// CSF format story
+export const infoMessage = () => (
+  <Row>
+    <Column size="4">
+      <InlineMessage
+        appearance="info"
+        description="There are two new referral requests."
+      />
+    </Column>
+  </Row>
+);
+
+export default {
+  title: 'Components/InlineMessage/Info Message',
+  component: InlineMessage
+};

package/core/components/organisms/inlineMessage/__stories__/Success.story.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { InlineMessage, Row, Column } from '@/index';
+
+// CSF format story
+export const successMessage = () => (
+  <Row>
+    <Column size="4">
+      <InlineMessage
+        appearance="success"
+        description="Inline message goes here."
+      />
+    </Column>
+  </Row>
+);
+
+export default {
+  title: 'Components/InlineMessage/Success Message',
+  component: InlineMessage
+};

package/core/components/organisms/inlineMessage/__stories__/Warning.story.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { InlineMessage, Row, Column } from '@/index';
+// CSF format story
+export const warningMessage = () => (
+  <Row>
+    <Column size="4">
+      <InlineMessage
+        appearance="warning"
+        description="Inline message goes here."
+      />
+    </Column>
+  </Row>
+);
+
+export default {
+  title: 'Components/InlineMessage/Warning Message',
+  component: InlineMessage
+};

package/core/components/organisms/inlineMessage/__stories__/variants/InlineMessageWithinTable.story.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { TableProps } from '@/index.type';
+import { Card, Table, InlineMessage } from '@/index';
+
+const data = [
+  {
+    name: 'Asthma Outreach',
+    firstName: 'Brooke',
+    lastName: 'Heeran',
+    lastUpdated: 'June 20, 2020',
+    recipients: 11846,
+  },
+  {
+    firstName: 'Frazer',
+    lastName: 'Cathro',
+    lastUpdated: 'June 19, 2020',
+    name: 'HbA1c Test due',
+    recipients: 12846,
+  },
+  {
+    firstName: 'Lemmie',
+    name: 'ER Education',
+    lastName: 'Ciric',
+    lastUpdated: 'May 19, 2020',
+    recipients: 118467,
+  }
+];
+
+export const InlineMessageWithinTable = () => {
+
+  const schema: TableProps['schema'] = [
+    {
+      name: 'name',
+      displayName: 'Name',
+      width: '30%',
+      cellType: 'WITH_META_LIST',
+      translate: (a) => ({
+        title: a.name,
+        metaList: [`${a.recipients} recipients`]
+      }),
+      sorting: false
+    },
+    {
+      name: 'lastUpdated',
+      displayName: 'Last Updated on',
+      width: '30%',
+      sorting: false,
+    },
+    {
+      name: 'user',
+      displayName: 'Message',
+      sorting: false,
+      width: '40%',
+      cellRenderer: () => (
+        <InlineMessage appearance="info" description="Patient profile updated." />
+      )
+    }
+  ];
+
+  return (
+    <Card>
+      <Table
+        showMenu={false}
+        type="data"
+        data={data}
+        schema={schema}
+        withHeader={false}
+        headerOptions={{
+          withSearch: false
+        }}
+      />
+    </Card>
+  );
+};
+
+const customCode = `
+() => {
+  const data = ${JSON.stringify(data.slice(0, 10), null, 4)};
+
+  const schema = [
+    {
+      name: 'name',
+      displayName: 'Name',
+      width: '30%',
+      cellType: 'WITH_META_LIST',
+      sorting: false,
+      translate: (a) => ({
+        title: a.name,
+        metaList: [\`\${a.recipients} recipients\`]
+      }),
+    },
+    {
+      name: 'lastUpdated',
+      displayName: 'Last Updated on',
+      width: '30%',
+      sorting: false,
+    },
+    {
+      name: 'user',
+      displayName: 'Message',
+      sorting: false,
+      width: '40%',
+      cellRenderer: (props) => {
+        const { data } = props;
+        return (
+          <InlineMessage appearance='info' description='Patient profile updated.' />
+        );
+      }
+    }
+  ];
+
+  return (
+    <Card>
+      <Table
+        showMenu={false}
+        type="data"
+        data={data}
+        schema={schema}
+        withHeader={false}
+        headerOptions={{
+          withSearch: false
+        }}
+      />
+    </Card>
+  );
+};
+`;
+
+export default {
+  title: 'Components/InlineMessage/Variants/Inline Message Within Table',
+  component: InlineMessage,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      }
+    }
+  }
+};

package/core/components/organisms/inlineMessage/__tests__/InlineMessage.test.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { Appearance, InlineMessage } from '../InlineMessage';
+import { InlineMessageProps as Props } from '@/index.type';
+
+const appearance: Appearance[] = [
+  'default',
+  'alert',
+  'info',
+  'success',
+  'warning'
+];
+
+const description = 'Inline Message here.';
+
+describe('InlineMessage component', () => {
+  const mapper: Record<string, any> = {
+    appearance: valueHelper(appearance, { required: true, iterate: true }),
+    description: valueHelper(description, { required: true })
+  };
+
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const { baseElement } = render(
+        <InlineMessage
+          {...attr}
+        />
+      );
+      expect(baseElement).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('InlineMessage Component with overwrite class', () => {
+  it('overwrite InlineMessage class', () => {
+    const { getByTestId } = render(<InlineMessage className="CustomClass" />);
+    expect(getByTestId('DesignSystem-InlineMessage')).toHaveClass('CustomClass');
+  });
+});
+
+describe('InlineMessage component with prop:appearance', () => {
+  appearance.forEach((color) => {
+    it(`should have the InlineMessage-text--${color} class when appearance=${color} `, () => {
+      const { getByTestId } = render(<InlineMessage appearance={color} />);
+      expect(getByTestId('DesignSystem-InlineMessage--Description')).toHaveClass(`InlineMessage-text--${color}`);
+    });
+  });
+});
+
+describe('InlineMessage component ', () => {
+
+  it('check for icon when appearance:default', () => {
+    render(<InlineMessage appearance="default" description={description} />);
+    const IconComponent = screen.queryByText('DesignSystem-InlineMessage--Icon');
+    expect(IconComponent).not.toBeInTheDocument();
+  });
+
+  it('render component when appearance is not default', () => {
+    const { getByTestId } = render(
+      <InlineMessage
+        appearance="info"
+        description={description}
+      />
+    );
+    const descriptionID = getByTestId('DesignSystem-InlineMessage--Description');
+    expect(descriptionID).toBeInTheDocument();
+    expect(descriptionID.textContent).toMatch(description);
+    expect(getByTestId('DesignSystem-InlineMessage--Icon')).toBeInTheDocument();
+  });
+
+  it('check for icon in case of default props', () => {
+    render(<InlineMessage />);
+
+    const IconComponent = screen.queryByText('DesignSystem-InlineMessage--Icon');
+    expect(IconComponent).not.toBeInTheDocument();
+  });
+
+  it('check for description in case of default props', () => {
+    const { getByTestId } = render(<InlineMessage />);
+
+    const descriptionID = getByTestId('DesignSystem-InlineMessage--Description');
+    expect(descriptionID).toBeInTheDocument();
+    expect(descriptionID).toHaveClass('InlineMessage-text--default');
+    expect(descriptionID.textContent).toMatch('');
+  });
+});

package/core/components/organisms/inlineMessage/__tests__/__snapshots__/InlineMessage.test.tsx.snap

@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InlineMessage component 
+  appearance: "alert", description: "Inline Message here."
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="InlineMessage"
+      data-test="DesignSystem-InlineMessage"
+    >
+      <i
+        class="material-icons material-icons-round Icon Icon--alert InlineMessage-icon"
+        data-test="DesignSystem-InlineMessage--Icon"
+        style="font-size: 16px; width: 16px;"
+      >
+        error_round
+      </i>
+      <div>
+        <span
+          class="Text Text--default Text--regular InlineMessage-text--alert"
+          data-test="DesignSystem-InlineMessage--Description"
+        >
+          Inline Message here.
+        </span>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`InlineMessage component 
+  appearance: "default", description: "Inline Message here."
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="InlineMessage"
+      data-test="DesignSystem-InlineMessage"
+    >
+      <div>
+        <span
+          class="Text Text--default Text--regular InlineMessage-text--default"
+          data-test="DesignSystem-InlineMessage--Description"
+        >
+          Inline Message here.
+        </span>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`InlineMessage component 
+  appearance: "info", description: "Inline Message here."
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="InlineMessage"
+      data-test="DesignSystem-InlineMessage"
+    >
+      <i
+        class="material-icons material-icons-round Icon Icon--info InlineMessage-icon"
+        data-test="DesignSystem-InlineMessage--Icon"
+        style="font-size: 16px; width: 16px;"
+      >
+        info_round
+      </i>
+      <div>
+        <span
+          class="Text Text--default Text--regular InlineMessage-text--info"
+          data-test="DesignSystem-InlineMessage--Description"
+        >
+          Inline Message here.
+        </span>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`InlineMessage component 
+  appearance: "success", description: "Inline Message here."
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="InlineMessage"
+      data-test="DesignSystem-InlineMessage"
+    >
+      <i
+        class="material-icons material-icons-round Icon Icon--success InlineMessage-icon"
+        data-test="DesignSystem-InlineMessage--Icon"
+        style="font-size: 16px; width: 16px;"
+      >
+        check_circle_round
+      </i>
+      <div>
+        <span
+          class="Text Text--default Text--regular InlineMessage-text--success"
+          data-test="DesignSystem-InlineMessage--Description"
+        >
+          Inline Message here.
+        </span>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`InlineMessage component 
+  appearance: "warning", description: "Inline Message here."
+ 1`] = `
+<body>
+  <div>
+    <div
+      class="InlineMessage"
+      data-test="DesignSystem-InlineMessage"
+    >
+      <i
+        class="material-icons material-icons-round Icon Icon--warning InlineMessage-icon InlineMessage-icon--warning"
+        data-test="DesignSystem-InlineMessage--Icon"
+        style="font-size: 16px; width: 16px;"
+      >
+        warning_round
+      </i>
+      <div>
+        <span
+          class="Text Text--default Text--regular InlineMessage-text--warning"
+          data-test="DesignSystem-InlineMessage--Description"
+        >
+          Inline Message here.
+        </span>
+      </div>
+    </div>
+  </div>
+</body>
+`;

package/core/components/organisms/inlineMessage/index.tsx

@@ -0,0 +1 @@
+export * from './InlineMessage';

package/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`TimePicker component prop:inputFormat snapshot
   <div>
     <div
       class="d-flex flex-column flex-grow-1"
+      data-test="DesignSystem-InputMask--Wrapper"
     >
       <div
         class="Input Input--regular"
@@ -45,6 +46,7 @@ exports[`TimePicker component prop:inputFormat snapshot
   <div>
     <div
       class="d-flex flex-column flex-grow-1"
+      data-test="DesignSystem-InputMask--Wrapper"
     >
       <div
         class="Input Input--regular"
@@ -83,6 +85,7 @@ exports[`TimePicker component prop:outputFormat snapshot
   <div>
     <div
       class="d-flex flex-column flex-grow-1"
+      data-test="DesignSystem-InputMask--Wrapper"
     >
       <div
         class="Input Input--regular"
@@ -121,6 +124,7 @@ exports[`TimePicker component prop:outputFormat snapshot
   <div>
     <div
       class="d-flex flex-column flex-grow-1"
+      data-test="DesignSystem-InputMask--Wrapper"
     >
       <div
         class="Input Input--regular"
@@ -159,6 +163,7 @@ exports[`TimePicker component prop:time snapshot
   <div>
     <div
       class="d-flex flex-column flex-grow-1"
+      data-test="DesignSystem-InputMask--Wrapper"
     >
       <div
         class="Input Input--regular"
@@ -208,6 +213,7 @@ exports[`TimePicker component prop:time snapshot
   <div>
     <div
       class="d-flex flex-column flex-grow-1"
+      data-test="DesignSystem-InputMask--Wrapper"
     >
       <div
         class="Input Input--regular"
@@ -257,6 +263,7 @@ exports[`TimePicker component prop:validators snapshot
   <div>
     <div
       class="d-flex flex-column flex-grow-1"
+      data-test="DesignSystem-InputMask--Wrapper"
     >
       <div
         class="Input Input--regular"
@@ -295,6 +302,7 @@ exports[`TimePicker component prop:validators snapshot
   <div>
     <div
       class="d-flex flex-column flex-grow-1"
+      data-test="DesignSystem-InputMask--Wrapper"
     >
       <div
         class="Input Input--regular"

package/core/index.tsx

@@ -79,5 +79,7 @@ export { Navigation } from './components/organisms/navigation';
 export { PageHeader } from './components/organisms/pageHeader';
 export { FileList } from './components/molecules/fileList';
 export { VerificationCodeInput } from './components/molecules/verificationCodeInput';
+export { InlineMessage } from './components/organisms/inlineMessage';
+
 // @ts-ignore
 export { version } from '../package.json';

package/core/index.type.tsx

@@ -77,3 +77,4 @@ export { NavigationProps } from './components/organisms/navigation';
 export { PageHeaderProps } from './components/organisms/pageHeader';
 export { FileListProps } from './components/molecules/fileList';
 export { VerificationCodeInputProps } from './components/molecules/verificationCodeInput';
+export { InlineMessageProps } from './components/organisms/inlineMessage';