@innovaccer/design-system 2.9.1 → 3.0.0-2

package/src/components/text/__tests__/Text.test.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import Text, { TextProps as Props, TextAppearance, Size } from '../Text';
+import { render } from '@testing-library/react';
+import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+
+const sizes: Size[] = ['small', 'regular', 'large'];
+const appearances: TextAppearance[] = ['default', 'white', 'destructive', 'disabled', 'subtle', 'success', 'link'];
+const weight = ['strong', 'medium'];
+const BooleanValue = [true, false];
+const StringValue = 'Sample String';
+
+describe('Text component', () => {
+  const mapper = {
+    children: valueHelper(StringValue, { required: true }),
+    size: valueHelper(sizes, { required: true, iterate: true }),
+  };
+
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const { baseElement } = render(<Text {...attr} />);
+      expect(baseElement).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('Text component', () => {
+  const mapper = {
+    children: valueHelper(StringValue, { required: true }),
+    appearance: valueHelper(appearances, { required: true, iterate: true }),
+  };
+
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const { baseElement } = render(<Text {...attr} />);
+      expect(baseElement).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('Text component', () => {
+  const mapper = {
+    children: valueHelper(StringValue, { required: true }),
+    weight: valueHelper(weight, { required: true, iterate: true }),
+  };
+
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const { baseElement } = render(<Text {...attr} />);
+      expect(baseElement).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('Text component', () => {
+  const mapper = {
+    children: valueHelper(StringValue, { required: true }),
+    small: valueHelper(BooleanValue, { required: true, iterate: true }),
+  };
+
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const tree = render(<Text {...attr} />);
+      expect(tree).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('Text component', () => {
+  it('should render the text', () => {
+    const { getByTestId } = render(<Text>{'Design System'}</Text>);
+    expect(getByTestId('DesignSystem-Text')).toHaveTextContent('Design System');
+  });
+
+  it('should render componentType="span"', () => {
+    const { getByTestId } = render(<Text>{'Design System'}</Text>);
+    expect(getByTestId('DesignSystem-Text').tagName).toEqual('SPAN');
+  });
+
+  describe('Text Component with overwrite class', () => {
+    it('overwrite Text class', () => {
+      const { getByTestId } = render(<Text className="TextClass">{'Text'}</Text>);
+      expect(getByTestId('DesignSystem-Text')).toHaveClass('TextClass');
+    });
+  });
+
+  describe('Text Component with Prop:weight', () => {
+    it('should have the class Text--strong when weight="strong"', () => {
+      const { getByTestId } = render(<Text weight="strong">{'Design System'}</Text>);
+      expect(getByTestId('DesignSystem-Text')).toHaveClass('Text--strong');
+    });
+
+    it('should have the class Text--medium when weight="medium"', () => {
+      const { getByTestId } = render(<Text weight="medium">{'Design System'}</Text>);
+      expect(getByTestId('DesignSystem-Text')).toHaveClass('Text--medium');
+    });
+  });
+
+  describe('Text Component with Prop:small', () => {
+    it('should have the class Text--small when small="true"', () => {
+      const { getByTestId } = render(<Text small={true}>{'Design System'}</Text>);
+      expect(getByTestId('DesignSystem-Text')).toHaveClass('Text--small');
+    });
+  });
+
+  describe('Text Component with Prop:appearances', () => {
+    it('should have the class Text--default when appearances="default"', () => {
+      const { getByTestId } = render(<Text appearance="default">{'Design System'}</Text>);
+      expect(getByTestId('DesignSystem-Text')).toHaveClass('Text--default');
+    });
+
+    appearances.forEach((appearance) => {
+      it(`should have the Text--${appearance} class when appearances=${appearance} `, () => {
+        const { getByTestId } = render(<Text appearance={appearance}>{'Design System'}</Text>);
+        expect(getByTestId('DesignSystem-Text')).toHaveClass(`Text--${appearance}`);
+      });
+    });
+  });
+});

package/src/components/text/__tests__/__snapshots__/Text.test.tsx.snap

@@ -0,0 +1,335 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text component 
+  children: "Sample String", appearance: "default"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--default Text--regular"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Text component 
+  children: "Sample String", appearance: "destructive"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--destructive Text--regular"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Text component 
+  children: "Sample String", appearance: "disabled"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--disabled Text--regular"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Text component 
+  children: "Sample String", appearance: "link"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--link Text--regular"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Text component 
+  children: "Sample String", appearance: "subtle"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--subtle Text--regular"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Text component 
+  children: "Sample String", appearance: "success"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--success Text--regular"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Text component 
+  children: "Sample String", appearance: "white"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--white Text--regular"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Text component 
+  children: "Sample String", size: "large"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--default Text--large"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Text component 
+  children: "Sample String", size: "regular"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--default Text--regular"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Text component 
+  children: "Sample String", size: "small"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--default Text--small"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Text component 
+  children: "Sample String", small: false
+ 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <span
+        class="Text Text--default Text--regular"
+        data-test="DesignSystem-Text"
+      >
+        Sample String
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span
+      class="Text Text--default Text--regular"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Text component 
+  children: "Sample String", small: true
+ 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <span
+        class="Text Text--default Text--regular Text--small"
+        data-test="DesignSystem-Text"
+      >
+        Sample String
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span
+      class="Text Text--default Text--regular Text--small"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Text component 
+  children: "Sample String", weight: "medium"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--default Text--medium Text--regular"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Text component 
+  children: "Sample String", weight: "strong"
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Text Text--default Text--strong Text--regular"
+      data-test="DesignSystem-Text"
+    >
+      Sample String
+    </span>
+  </div>
+</body>
+`;

package/src/components/text/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './Text';
+export * from './Text';

package/src/global.d.ts

@@ -0,0 +1,9 @@
+declare module '@' {
+  const x: any;
+  export = x;
+}
+
+declare module '*.json';
+declare module 'react-dynamic-virtual-scroll';
+
+declare const __STORYBOOK_STORY_STORE__: any;

package/src/index.tsx

@@ -0,0 +1,9 @@
+export * as Utils from './utils';
+
+export * from './components/avatar';
+export { Text } from './components/text';
+export { Icon } from './components/icon';
+export { Pills } from './components/pills';
+export { Badge } from './components/badge';
+
+export { version } from '../package.json';

package/src/index.type.tsx

@@ -0,0 +1,2 @@
+export * from './index';
+export { AvatarProps } from './components/avatar';

package/src/utils/Keys.ts

@@ -0,0 +1,15 @@
+/**
+ * Key codes are deprecated, soon major browser support will end.
+ */
+
+export const BACKSPACE = 8;
+export const TAB = 9;
+export const ENTER = 13;
+export const SHIFT = 16;
+export const ESCAPE = 27;
+export const SPACE = 32;
+export const ARROW_LEFT = 37;
+export const ARROW_UP = 38;
+export const ARROW_RIGHT = 39;
+export const ARROW_DOWN = 40;
+export const DELETE = 46;

package/src/utils/OverlayManager.tsx

@@ -0,0 +1,45 @@
+class OverlayManager {
+  overlays: HTMLDivElement[];
+
+  constructor() {
+    this.overlays = [];
+  }
+
+  add(overlay: HTMLDivElement | null) {
+    if (overlay === null) return;
+
+    let overlayIdx = this.overlays.indexOf(overlay);
+
+    if (overlayIdx !== -1) {
+      return overlayIdx;
+    }
+
+    overlayIdx = this.overlays.length;
+    this.overlays.push(overlay);
+
+    return overlayIdx;
+  }
+
+  remove(overlay: HTMLDivElement | null) {
+    if (overlay === null) return;
+
+    const overlayIdx = this.overlays.indexOf(overlay);
+
+    if (overlayIdx === -1) {
+      return;
+    }
+
+    this.overlays.splice(overlayIdx, 1);
+  }
+
+  isTopOverlay(overlay: HTMLDivElement | null) {
+    if (overlay === null) return;
+
+    return !!this.overlays.length && this.overlays[this.overlays.length - 1] === overlay;
+  }
+}
+
+const instance = new OverlayManager();
+Object.freeze(instance);
+
+export default instance;

package/src/utils/__tests__/TS.test.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import * as DS from '../../index';
+import { render } from '@testing-library/react';
+
+// const noop = () => {};
+const string = 'Hello World!';
+// const dummyComp = <DS.Text>{string}</DS.Text>;
+
+export const TS = () => {
+  return (
+    <>
+      <DS.Avatar />
+      <DS.Badge>Badge</DS.Badge>
+      <DS.Pills>{string}</DS.Pills>
+      {/* <DS.AvatarGroup list={[]} />
+      <DS.Backdrop open={false} />
+      <DS.Breadcrumbs list={[]} onClick={noop} />
+      <DS.Button />
+      <DS.Card>{dummyComp}</DS.Card>
+      <DS.Chip name={string} label={string} />
+      <DS.ChipGroup list={[]} />
+      <DS.Checkbox />
+      <DS.Column />
+      <DS.DatePicker />
+      <DS.Dropdown />
+      <DS.EditableDropdown />
+      <DS.EditableInput />
+      <DS.Heading>{string}</DS.Heading>
+      <DS.Icon name={string} />
+      <DS.Input />
+      <DS.InputMask mask={[]} />
+      <DS.Label>{string}</DS.Label>
+      <DS.Caption>{string}</DS.Caption>
+      <DS.Legend>{string}</DS.Legend>
+      <DS.Link>{string}</DS.Link>
+      <DS.Message>{string}</DS.Message>
+      <DS.MetaList list={[]} />
+      <DS.OutsideClick onOutsideClick={noop}>{dummyComp}</DS.OutsideClick>
+      <DS.Paragraph>{string}</DS.Paragraph>
+      <DS.ProgressBar value={0} />
+      <DS.Radio name={string} value={string} />
+      <DS.Row />
+      <DS.StatusHint>{string}</DS.StatusHint>
+      <DS.Spinner />
+      <DS.Slider />
+      <DS.RangeSlider />
+      <DS.Subheading>{string}</DS.Subheading>
+      <DS.Switch />
+      <DS.Text>{string}</DS.Text>
+      <DS.Textarea />
+      <DS.Toast title={string} />
+      <DS.Tooltip tooltip={string}>{dummyComp}</DS.Tooltip>
+      <DS.Dialog
+        open={false}
+        onClose={noop}
+        heading={string}
+        primaryButtonLabel={string}
+        primaryButtonCallback={noop}
+        secondaryButtonLabel={string}
+        secondaryButtonCallback={noop}
+      />
+      <DS.Modal open={false} />
+      <DS.ModalHeader heading={string} onClose={noop} />
+      <DS.ModalFooter>{dummyComp}</DS.ModalFooter>
+      <DS.ModalBody>{dummyComp}</DS.ModalBody>
+      <DS.ModalDescription />
+      <DS.Pagination onPageChange={noop} />
+      <DS.Placeholder />
+      <DS.PlaceholderParagraph />
+      <DS.ProgressRing value={0} />
+      <DS.Popover trigger={dummyComp}>{dummyComp}</DS.Popover>
+      <DS.Stepper steps={[]} />
+      <DS.DateRangePicker />
+      <DS.TabsWrapper>{dummyComp}</DS.TabsWrapper>
+      <DS.Tab label={dummyComp} />
+      <DS.Grid totalRecords={50} />
+      <DS.List />
+      <DS.Table />
+      <DS.Navigation menus={[]} />
+      <DS.PageHeader title={string} />
+      <DS.EditableChipInput placeholder="" /> */}
+    </>
+  );
+};
+
+beforeAll(() => {
+  Date.now = () => new Date('2021-06-14').getTime();
+});
+
+describe('TS', () => {
+  it('renders children', () => {
+    const { asFragment } = render(TS());
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/utils/__tests__/TimeZone.test.tsx

@@ -0,0 +1,5 @@
+describe('Timezones', () => {
+  it('should always be UTC', () => {
+    expect(new Date().getTimezoneOffset()).toBe(0);
+  });
+});

package/src/utils/__tests__/__snapshots__/TS.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TS renders children 1`] = `
+<DocumentFragment>
+  <span
+    class="Avatar Avatar--regular Avatar--secondary Avatar--disabled overflow-hidden"
+    data-test="DesignSystem-Avatar"
+  >
+    <i
+      class="material-icons material-icons-round Icon Icon--white Avatar-content--secondary"
+      data-test="DesignSystem-Avatar--Icon"
+      role="button"
+      style="font-size: 16px; width: 16px;"
+    >
+      person_round
+    </i>
+  </span>
+  <span
+    class="Badge Badge--secondary"
+    data-test="DesignSystem-Badge"
+    role="status"
+  >
+    Badge
+  </span>
+  <span
+    class="Pills Badge--secondary"
+    data-test="DesignSystem-Pills"
+    role="status"
+  >
+    Hello World!
+  </span>
+</DocumentFragment>
+`;

package/src/utils/css.ts

@@ -0,0 +1 @@
+export const colorToHex = (color: string) => getComputedStyle(document.documentElement).getPropertyValue(`--${color}`);