-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #33 from Teradata/feat/dropdown
Feat/dropdown
- Loading branch information
Showing
8 changed files
with
295 additions
and
8 deletions.
There are no files selected for viewing
73 changes: 73 additions & 0 deletions
73
libs/react-components/src/lib/components/CvListItem/CvListItem.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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>; | ||
}, | ||
}; |
64 changes: 64 additions & 0 deletions
64
libs/react-components/src/lib/components/CvListItem/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
40 changes: 40 additions & 0 deletions
40
libs/react-components/src/lib/components/List/List.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
34 changes: 34 additions & 0 deletions
34
libs/react-components/src/lib/components/Select/Select.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters