@innovaccer/design-system 2.9.1 → 3.0.0-2

package/src/components/avatar/index.tsx

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

package/src/components/badge/Badge.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { BaseProps, extractBaseProps } from '@/utils/types';
+import { AccentAppearance } from '@/common.type';
+
+export interface BadgeProps extends BaseProps {
+  /**
+   * Color of the `Badge`
+   */
+  appearance: AccentAppearance;
+  /**
+   * Makes `Badge` appearance subtle
+   */
+  subtle?: boolean;
+  /**
+   * Text to be added inside `Badge`
+   */
+  children: React.ReactNode;
+  /**
+   * Used to provide descriptive explanation of the badge.
+   */
+  ariaLabel?: string;
+}
+
+export const Badge = (props: BadgeProps) => {
+  const { appearance, children, subtle, className, ariaLabel } = props;
+
+  const baseProps = extractBaseProps(props);
+
+  const classes = classNames(
+    {
+      Badge: true,
+      [`Badge--${appearance}`]: appearance && !subtle,
+      [`Badge--subtle-${appearance}`]: subtle,
+    },
+    className
+  );
+
+  return (
+    <span role="status" aria-label={ariaLabel} data-test="DesignSystem-Badge" {...baseProps} className={classes}>
+      {children}
+    </span>
+  );
+};
+
+Badge.displayName = 'Badge';
+Badge.defaultProps = {
+  appearance: 'secondary',
+};
+
+export default Badge;

package/src/components/badge/__tests__/Badge.test.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import Badge, { BadgeProps as Props } from '../Badge';
+import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { AccentAppearance } from '@/common.type';
+
+const appearances: AccentAppearance[] = [
+  'primary',
+  'alert',
+  'warning',
+  'success',
+  'accent1',
+  'accent2',
+  'accent3',
+  'accent4',
+];
+const BooleanValue = [true, false];
+
+const mapper = {
+  appearance: valueHelper(appearances, { required: true, iterate: true }),
+  subtle: valueHelper(BooleanValue, { required: true, iterate: true }),
+};
+
+describe('Badge component', () => {
+  const testFunc = (props: Record<string, any>): void => {
+    const attr = filterUndefined(props) as Props;
+
+    it(testMessageHelper(attr), () => {
+      const { baseElement } = render(<Badge {...attr}>Badge</Badge>);
+      expect(baseElement).toMatchSnapshot();
+    });
+  };
+
+  testHelper(mapper, testFunc);
+});
+
+describe('Badge component', () => {
+  it('renders children', () => {
+    const { getByTestId } = render(
+      <Badge subtle={true} appearance="secondary">
+        Badge
+      </Badge>
+    );
+    expect(getByTestId('DesignSystem-Badge').textContent).toMatch('Badge');
+  });
+
+  describe('Badge Component with overwrite class', () => {
+    it('overwrite badge class', () => {
+      const { getByTestId } = render(
+        <Badge className="BadgeClass" subtle={true} appearance="secondary">
+          Design
+        </Badge>
+      );
+      expect(getByTestId('DesignSystem-Badge')).toHaveClass('Badge BadgeClass');
+    });
+  });
+
+  describe('Badge component tagName', () => {
+    it('should have span element', () => {
+      const { getByTestId } = render(
+        <Badge subtle={true} appearance="secondary">
+          Design
+        </Badge>
+      );
+      expect(getByTestId('DesignSystem-Badge').tagName).toMatch('SPAN');
+    });
+  });
+
+  describe('Badge component with prop:appearance', () => {
+    appearances.forEach((appearance) => {
+      it(`should have the Badge--${appearance} class when appearance=${appearance} `, () => {
+        const { getByTestId } = render(<Badge appearance={appearance}>Design</Badge>);
+        expect(getByTestId('DesignSystem-Badge')).toHaveClass(`Badge--${appearance}`);
+      });
+    });
+  });
+
+  describe('Badge component with prop:subtle', () => {
+    appearances.forEach((appearance) => {
+      it(`should have the Badge--subtle-${appearance} class when appearance=${appearance} `, () => {
+        const { getByTestId } = render(
+          <Badge appearance={appearance} subtle={true}>
+            Design
+          </Badge>
+        );
+        expect(getByTestId('DesignSystem-Badge')).toHaveClass(`Badge--subtle-${appearance}`);
+      });
+    });
+  });
+});

package/src/components/badge/__tests__/__snapshots__/Badge.test.tsx.snap

@@ -0,0 +1,257 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badge component 
+  appearance: "accent1", subtle: false
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--accent1"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "accent1", subtle: true
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--subtle-accent1"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "accent2", subtle: false
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--accent2"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "accent2", subtle: true
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--subtle-accent2"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "accent3", subtle: false
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--accent3"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "accent3", subtle: true
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--subtle-accent3"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "accent4", subtle: false
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--accent4"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "accent4", subtle: true
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--subtle-accent4"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "alert", subtle: false
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--alert"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "alert", subtle: true
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--subtle-alert"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "primary", subtle: false
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--primary"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "primary", subtle: true
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--subtle-primary"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "success", subtle: false
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--success"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "success", subtle: true
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--subtle-success"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "warning", subtle: false
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--warning"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;
+
+exports[`Badge component 
+  appearance: "warning", subtle: true
+ 1`] = `
+<body>
+  <div>
+    <span
+      class="Badge Badge--subtle-warning"
+      data-test="DesignSystem-Badge"
+      role="status"
+    >
+      Badge
+    </span>
+  </div>
+</body>
+`;

package/src/components/badge/_stories_/index.story.jsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { Badge, Text } from '@/index';
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+  parameters: {
+    docs: {
+      docPage: {
+        title: 'Badge',
+        description: 'Badges are used to tag entities with concise and relevant information.',
+        a11yProps: `
+          **ariaLabel:** Add \`ariaLabel='Current Status'\` to describe additional information for badge.
+         `,
+      },
+    },
+  },
+};
+
+export const SolidAppearances = () => {
+  const weight = 'strong';
+  const appearances = [
+    'primary',
+    'secondary',
+    'alert',
+    'warning',
+    'success',
+    'accent1',
+    'accent2',
+    'accent3',
+    'accent4',
+  ];
+
+  return (
+    <div className="d-flex">
+      {appearances.map((appear, ind) => {
+        return (
+          <div key={ind} className="mr-9">
+            <Badge ariaLabel='Current Status' appearance={appear}>Badge</Badge>
+            <br />
+            <Text weight={weight}>{appear.charAt(0).toUpperCase() + appear.slice(1)}</Text>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export const SubtleAppearances = () => {
+  const appearances = [
+    'primary',
+    'secondary',
+    'alert',
+    'warning',
+    'success',
+    'accent1',
+    'accent2',
+    'accent3',
+    'accent4',
+  ];
+
+  return (
+    <div className="d-flex">
+      {appearances.map((appear, ind) => {
+        return (
+          <div key={ind} className="mr-9">
+            <Badge ariaLabel='Current Status' appearance={appear} subtle={true}>
+              Badge
+            </Badge>
+            <br />
+            <Text weight="strong">{appear.charAt(0).toUpperCase() + appear.slice(1)}</Text>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export const Default = () => <Badge ariaLabel='Current Status'>Badge</Badge>;
+
+export const SolidWarning = () => <Badge ariaLabel='Current Status' appearance="warning">Disapproved</Badge>;
+
+export const SubtleWarning = () => (
+  <Badge ariaLabel='Current Status' appearance="warning" subtle={true}>
+    Pending
+  </Badge>
+);

package/src/components/badge/index.tsx

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

package/src/components/icon/Icon.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { BaseProps, extractBaseProps } from '@/utils/types';
+import { useAccessibilityProps } from '@/accessibility/utils';
+
+export type IconAppearance =
+  | 'default'
+  | 'destructive'
+  | 'white'
+  | 'subtle'
+  | 'disabled'
+  | 'info'
+  | 'alert'
+  | 'warning'
+  | 'success'
+  | 'primary_lighter'
+  | 'primary'
+  | 'primary_dark'
+  | 'alert_lighter'
+  | 'alert_dark'
+  | 'warning_lighter'
+  | 'warning_dark'
+  | 'success_lighter'
+  | 'success_dark'
+  | 'accent1'
+  | 'accent1_lighter'
+  | 'accent1_dark'
+  | 'accent2'
+  | 'accent2_lighter'
+  | 'accent2_dark'
+  | 'accent3'
+  | 'accent3_lighter'
+  | 'accent3_dark'
+  | 'accent4'
+  | 'accent4_lighter'
+  | 'accent4_dark'
+  | 'inverse';
+export type IconType = 'filled' | 'outlined' | 'outline' | 'rounded' | 'round' | 'two-tone' | 'sharp'; // 'outline', 'rounded' to be deprecated soon.
+
+export interface IconProps extends BaseProps {
+  /**
+   * Material icon name
+   */
+  name?: string;
+  /**
+   * Size of `Icon`
+   */
+  size: number;
+  /**
+   * Type of material `Icon`
+   *
+   * ** `'outline' | 'rounded'` will be deprecated**
+   */
+  type?: IconType;
+  /**
+   * Color of `Icon`    // 'info' appearance will be deprecated soon.
+   */
+  appearance?: IconAppearance;
+  /**
+   * Handler to be called when icon is clicked
+   */
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  /**
+   * Handler to be called when key is pressed on icon
+   */
+  onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+  /**
+   * DOM node to be passed as child to the component
+   */
+  children?: React.ReactNode;
+  /**
+   * The tabindex global attribute indicates that its element can be focused, and
+   * where it participates in sequential keyboard navigation.
+   */
+  tabIndex?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>['tabIndex'];
+}
+
+export const Icon = (props: IconProps) => {
+  const { appearance, className, name, size, children } = props;
+  const accessibilityProps = useAccessibilityProps(props);
+
+  const baseProps = extractBaseProps(props);
+
+  const mapper = (val: IconProps['type']) => {
+    if (val === 'outline') return 'outlined';
+    if (val === 'rounded') return 'round';
+    return val;
+  };
+
+  const type = mapper(props.type);
+
+  const getIconAppearance = (iconColor: string) => {
+    const x = iconColor.indexOf('_');
+    return iconColor.slice(0, x) + iconColor.charAt(x + 1).toUpperCase() + iconColor.slice(x + 2);
+  };
+
+  const color = appearance && appearance.includes('_') ? getIconAppearance(appearance) : appearance;
+
+  const iconClass = classNames({
+    ['material-icons']: true, // change to !type || type === 'filled' after migration
+    [`material-icons-${mapper(type)}`]: type && type !== 'filled',
+    ['Icon']: true,
+    [`Icon--${color}`]: appearance,
+    [`${className}`]: className,
+  });
+
+  const styles = {
+    fontSize: `${size}px`,
+    width: `${size}px`,
+  };
+
+  // change `children` to {name} after migration
+  if (children && React.isValidElement(children)) {
+    return (
+      <span {...baseProps} className={className}>
+        {children}
+      </span>
+    );
+  }
+  return (
+    <i {...baseProps} className={iconClass} style={styles} {...accessibilityProps}>
+      {type ? `${name}_${type}` : name}
+    </i>
+  );
+};
+
+Icon.displayName = 'Icon';
+Icon.defaultProps = {
+  size: 16,
+  type: 'round',
+};
+
+export default Icon;

package/src/components/icon/__stories__/index.story.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { select, number, text } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import Icon from '../index';
+
+// CSF format story
+export const all = () => {
+  const appearance = select(
+    'appearance',
+    ['destructive', 'white', 'subtle', 'disabled', 'info', 'alert', 'warning', 'success'],
+    undefined
+  );
+
+  const iconType = select('type', ['filled', 'outlined', 'round', 'two-tone', 'sharp'], undefined);
+
+  const size = number('size', 50);
+
+  const name = text('Name', 'info');
+
+  return (
+    <div style={{ background: appearance === 'white' ? 'black' : 'transparent' }}>
+      <Icon appearance={appearance} type={iconType} size={size} name={name} onClick={action('click-event')} />
+    </div>
+  );
+};
+const customCode = `() => {
+  return(
+    <Icon size={50} name='place'/>
+    );
+}`;
+
+export default {
+  title: 'Components/Icon/All',
+  component: Icon,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+      },
+    },
+  },
+};