Merge pull request #33 from Teradata/feat/dropdown

Feat/dropdown

Author: bsahitya

libs/react-components/src/lib/components/CvListItem/CvListItem.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CvListItem from './index';
+
+const meta = {
+  title: 'Components/CvListItem',
+  component: CvListItem,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+
+  args: {
+    /**
+     * Value associated with this list item
+     */
+    value: '',
+    /**
+     * Used to group items together
+     */
+    group: '',
+    /**
+     * Reflects tabindex and sets internal tab indices.
+     */
+    tabindex: 1,
+    /**
+     * Reflects disabled and sets internal disabled attributes.
+     */
+    disabled: false,
+    /**
+     * Activates the two-line variant and enables the secondary slot.
+     */
+    twoline: false,
+    /**
+     * Activates focus-persistent ripple.
+     */
+    activated: false,
+    /**
+     * Determines which graphic layout to show and enables the graphic slot.
+     */
+    graphic: '',
+    /**
+     * Allows arbitrary width for multiple slotted graphics.
+     */
+    multipleGraphics: false,
+    /**
+     * Activates the meta layout tile and enables the meta slot.
+     */
+    hasMeta: false,
+    /**
+     * Disables focus and pointer events for the list item.
+     */
+    noninteractive: false,
+    /**
+     * Denotes that the list item is selected.
+     */
+    selected: false,
+    /**
+     * Content to be rendered in the list item.
+     */
+    children: <span>List Item</span>,
+  },
+} satisfies Meta<typeof CvListItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    return <CvListItem {...args}>{args.children}</CvListItem>;
+  },
+};

libs/react-components/src/lib/components/CvListItem/index.tsx

@@ -0,0 +1,64 @@
+import { CovalentListItem } from '@covalent/components/list/list-item';
+import { createComponent } from '@lit/react';
+import React from 'react';
+import '@covalent/components/icon';
+
+interface ListItemProps {
+  /**
+   * Value associated with this list item
+   */
+  value?: string;
+  /**
+   * Used to group items together
+   */
+  group?: string;
+  /**
+   * Reflects tabindex and sets internal tab indices.
+   */
+  tabindex?: number;
+  /**
+   * Reflects disabled and sets internal disabled attributes.
+   */
+  disabled?: boolean;
+  /**
+   * Activates the two-line variant and enables the secondary slot.
+   */
+  twoline?: boolean;
+  /**
+   * Activates focus-persistent ripple.
+   */
+  activated?: boolean;
+  /**
+   * Determines which graphic layout to show and enables the graphic slot.
+   */
+  graphic?: string;
+  /**
+   * Allows arbitrary width for multiple slotted graphics.
+   */
+  multipleGraphics?: boolean;
+  /**
+   * Activates the meta layout tile and enables the meta slot.
+   */
+  hasMeta?: boolean;
+  /**
+   * Disables focus and pointer events for the list item.
+   */
+  noninteractive?: boolean;
+  /**
+   * Denotes that the list item is selected.
+   */
+  selected?: boolean;
+  children?: React.ReactNode;
+}
+const ListItemComponent = createComponent({
+  tagName: 'cv-list-item',
+  elementClass: CovalentListItem as never,
+  react: React,
+});
+
+const CvListItem: React.FC<ListItemProps> = (props) => {
+  return <ListItemComponent {...props}></ListItemComponent>;
+};
+
+CvListItem.displayName = 'CvListItem';
+export default CvListItem;

libs/react-components/src/lib/components/List/List.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import List from './index';
+import CvListItem from '../CvListItem';
+
+const meta = {
+  title: 'Components/List',
+  component: List,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+
+  args: {
+    activatible: true,
+    rootTabbable: false,
+    multi: false,
+    wrapFocus: false,
+    noninteractive: false,
+    itemRoles: '',
+    innerAriaLabel: '',
+    innerRole: '',
+  },
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    return (
+      <List {...args}>
+        <CvListItem>sub item</CvListItem>
+        <CvListItem>sub item</CvListItem>
+        <CvListItem>sub item</CvListItem>
+      </List>
+    );
+  },
+};

libs/react-components/src/lib/components/List/index.tsx

@@ -0,0 +1,56 @@
+import { CovalentList } from '@covalent/components/list/list';
+import { createComponent } from '@lit/react';
+import React from 'react';
+import '@covalent/components/icon';
+
+interface ListProps {
+  /**
+   * Whether the list items are activatable
+   */
+  activatible: boolean;
+  /**
+   * When true, sets tabindex=0 on the internal list
+   */
+  rootTabbable: boolean;
+  /**
+   * When true, enables selection of multiple items
+   */
+  multi: boolean;
+  /**
+   * When true, wraps focus between the first and last list item
+   */
+  wrapFocus: boolean;
+  /**
+   * When true, disables interaction on the list
+   */
+  noninteractive: boolean;
+  /**
+   * Role for the list items
+   */
+  itemRoles: string;
+  /**
+   * aria-label for the internal list element
+   */
+  innerAriaLabel: string;
+  /**
+   * Role for the internal list element
+   */
+  innerRole: string;
+  /**
+   * Children elements to be rendered inside the list
+   */
+  children?: React.ReactNode;
+}
+
+const ListComponent = createComponent({
+  tagName: 'cv-list',
+  elementClass: CovalentList as never,
+  react: React,
+});
+
+const List: React.FC<ListProps> = (props) => {
+  return <ListComponent {...props} />;
+};
+
+List.displayName = 'List';
+export default List;

libs/react-components/src/lib/components/Select/Select.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Select from './index';
+import CvListItem from '../CvListItem';
+
+const meta = {
+  title: 'Components/Select',
+  component: Select,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    icon: 'info',
+    titleText: 'Select title',
+    descriptionText: 'Select description',
+    state: 'active',
+    inline: false,
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    return (
+      <Select {...args}>
+        <CvListItem>sub item</CvListItem>
+        <CvListItem>sub item</CvListItem>
+        <CvListItem>sub item</CvListItem>
+      </Select>
+    );
+  },
+};

libs/react-components/src/lib/components/Select/index.tsx

@@ -0,0 +1,26 @@
+import { CovalentSelect } from '@covalent/components/select';
+import { createComponent } from '@lit/react';
+import React, { ReactNode } from 'react';
+import '@covalent/components/icon';
+
+interface SelectProps {
+  icon: string;
+  titleText: string;
+  descriptionText: string;
+  state: string;
+  inline: boolean;
+  children?: ReactNode;
+}
+
+const SelectComponent = createComponent({
+  tagName: 'cv-select',
+  elementClass: CovalentSelect as never,
+  react: React,
+});
+
+const Select: React.FC<SelectProps> = (props) => {
+  return <SelectComponent {...props}>{props.children}</SelectComponent>;
+};
+
+Select.displayName = 'Select';
+export default Select;

libs/react-components/src/lib/components/Typography/Typography.stories.tsx

@@ -73,10 +73,6 @@ export const LeftAlignedEyebrow: Story = {
       'story--components-typography--left-aligned-eyebrow-inner'
     );
     element?.style.setProperty('--td-web-typography-eyebrow-alignment', 'left');
-    return (
-      <Typography scale="eyebrow">
-        Left aligned eyebrow
-      </Typography>
-    );
+    return <Typography scale="eyebrow">Left aligned eyebrow</Typography>;
   },
-};
+};

libs/react-components/src/lib/components/Typography/styles.module.scss

@@ -79,7 +79,6 @@
   line-height: var(--td-web-typography-caption-line-height);
 }
 
-
 .eyebrow {
   align-items: var(--td-web-typography-eyebrow-alignment, 'center');
   display: flex;
@@ -95,7 +94,6 @@
   }
 }
 
-
 /* Mobile styles */
 @media only screen and (max-width: 768px) {
   .headline1 {