Skip to content

Commit

Permalink
Merge pull request #33 from Teradata/feat/dropdown
Browse files Browse the repository at this point in the history
Feat/dropdown
  • Loading branch information
bsahitya authored Dec 31, 2024
2 parents e5c5a20 + bc03f9a commit 2017294
Show file tree
Hide file tree
Showing 8 changed files with 295 additions and 8 deletions.
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 libs/react-components/src/lib/components/CvListItem/index.tsx
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 libs/react-components/src/lib/components/List/List.stories.tsx
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>
);
},
};
56 changes: 56 additions & 0 deletions libs/react-components/src/lib/components/List/index.tsx
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 libs/react-components/src/lib/components/Select/Select.stories.tsx
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>
);
},
};
26 changes: 26 additions & 0 deletions libs/react-components/src/lib/components/Select/index.tsx
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;
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
},
};
};
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -95,7 +94,6 @@
}
}


/* Mobile styles */
@media only screen and (max-width: 768px) {
.headline1 {
Expand Down

0 comments on commit 2017294

Please sign in to comment.