Merge pull request #2023 from innovaccer/develop

Develop

core/components/css-utilities/Animation/Animation.story.tsx

@@ -67,6 +67,14 @@ export const animation = () => {
       className: 'slideIn-right',
       properties: 'The object is moving 16px from left to right while fading in, using an entrance-expressive-curve',
     },
+    {
+      className: 'rotate-clockwise',
+      properties: 'The object is rotating in a clockwise direction, using a standard-productive-curve',
+    },
+    {
+      className: 'rotate-anticlockwise',
+      properties: 'The object is rotating in an anti-clockwise direction, using a standard-productive-curve',
+    },
   ];
 
   return (

core/components/organisms/listbox/Listbox.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { BaseProps, extractBaseProps, BaseHtmlProps } from '@/utils/types';
+import classNames from 'classnames';
+import { DraggableList } from './reorderList';
+import { ListboxItem } from './listboxItem';
+
+type ListboxType = 'option' | 'description' | 'resource';
+type ListboxSize = 'standard' | 'compressed' | 'tight';
+export type TagType = 'ul' | 'ol' | 'div' | 'nav';
+
+export interface ListboxProps extends BaseProps, BaseHtmlProps<HTMLUListElement | HTMLDivElement> {
+  /**
+   * React Element to be added inside `list`
+   */
+  children: React.ReactNode;
+  /**
+   * List size
+   */
+  size: ListboxSize;
+  /**
+   * Type of List
+   */
+  type: ListboxType;
+  /**
+   * Allows list item re-ordering
+   */
+  draggable?: boolean;
+  /**
+   * Set a custom element for Listbox
+   */
+  tagName: TagType;
+  /**
+   * Add divider below all list item
+   */
+  showDivider: boolean;
+}
+
+export const ListboxContext = React.createContext<Omit<ListboxProps, 'children' | 'tagName'>>({
+  size: 'standard',
+  type: 'resource',
+  draggable: false,
+  showDivider: true,
+});
+
+const { Provider } = ListboxContext;
+
+export const Listbox = (props: ListboxProps) => {
+  const { children, className, draggable, size, type, showDivider, tagName: Tag, ...rest } = props;
+  const baseProps = extractBaseProps(props);
+
+  const classes = classNames(
+    {
+      Listbox: true,
+    },
+    className
+  );
+
+  const sharedProp = {
+    size,
+    type,
+    draggable,
+    showDivider,
+  };
+
+  return (
+    <Provider value={sharedProp}>
+      {draggable ? (
+        <DraggableList {...props} />
+      ) : (
+        <Tag data-test="DesignSystem-Listbox" {...baseProps} className={classes} {...rest}>
+          {children}
+        </Tag>
+      )}
+    </Provider>
+  );
+};
+
+Listbox.displayName = 'Listbox';
+
+Listbox.defaultProps = {
+  tagName: 'ul',
+  size: 'standard',
+  type: 'resource',
+  draggable: false,
+  showDivider: true,
+};
+
+Listbox.Item = ListboxItem;
+
+export default Listbox;

core/components/organisms/listbox/__stories__/index.story.jsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Listbox, Heading } from '@/index';
+import { ListboxItem } from '../listboxItem';
+
+export const all = () => {
+  const data = [
+    {
+      assessment: 'Alcohol Usage Disorders Identification Test - C (Audit C)',
+    },
+    {
+      assessment: 'Functional Assessment - Initial',
+    },
+    {
+      assessment: 'Functional Assessment - Discharge',
+    },
+    {
+      assessment: 'Hypertension - Diabetes Symptoms Identification Test',
+    },
+    {
+      assessment: 'Patient Health Question',
+    },
+  ];
+
+  return (
+    <div>
+      <Heading size="s" className="mb-5">
+        Select Assessment
+      </Heading>
+      <Listbox>
+        {data.map((item, key) => {
+          return <Listbox.Item key={key}>{item.assessment}</Listbox.Item>;
+        })}
+      </Listbox>
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const data = [
+    {
+      assessment: 'Alcohol Usage Disorders Identification Test - C (Audit C)',
+    },
+    {
+      assessment: 'Functional Assessment - Initial',
+    },
+    {
+      assessment: 'Functional Assessment - Discharge',
+    },
+    {
+      assessment: 'Hypertension - Diabetes Symptoms Identification Test',
+    },
+    {
+      assessment: 'Patient Health Question',
+    },
+  ];
+
+  return (
+    <div>
+      <Heading size="s" className='mb-5'>Select Assessment</Heading>
+      <Listbox>
+        {data.map((item, key) => {
+          return <Listbox.Item key={key}>{item.assessment}</Listbox.Item>;
+        })}
+      </Listbox>
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Layout/Listbox/All',
+  component: Listbox,
+  subcomponents: { Listbox, ListboxItem },
+  parameters: {
+    docs: {
+      docPage: {
+        customCode,
+        title: 'Listbox',
+      },
+    },
+  },
+};