diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 4d153042..282c1d23 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -37,8 +37,10 @@ export type Stories = | 'Box' | 'Button' | 'CircularProgressAvatar' + | 'Chip' | 'ColorModeToggle' | 'Colors' + | 'Container' | 'Divider' | 'Drawer' | 'Grid' @@ -116,12 +118,18 @@ const StoryConfig: StorybookConfig = { UserDropdownMenu: { hierarchy: `${StorybookCategories.Navigation}/User Dropdown Menu`, }, + Chip: { + hierarchy: `${StorybookCategories.DataDisplay}/Chip`, + }, ColorModeToggle: { hierarchy: `${StorybookCategories.Theme}/Color Mode Toggle`, }, Colors: { hierarchy: `${StorybookCategories.Foundations}/Colors`, }, + Container: { + hierarchy: `${StorybookCategories.Layout}/Container`, + }, Divider: { hierarchy: `${StorybookCategories.DataDisplay}/Divider`, }, diff --git a/packages/react/src/components/Chip/Chip.stories.mdx b/packages/react/src/components/Chip/Chip.stories.mdx new file mode 100644 index 00000000..4a798fcc --- /dev/null +++ b/packages/react/src/components/Chip/Chip.stories.mdx @@ -0,0 +1,52 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Chip from './Chip.tsx'; + +export const meta = { + component: Chip, + title: StoryConfig.Chip.hierarchy, +}; + +<Meta title={meta.title} component={meta.component} /> + +export const Template = args => <Chip {...args} />; + +# Chip + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Chips allow users to enter information, make selections, filter content, or trigger actions. + +While included here as a standalone component, the most common use will be in some form of input, so some of the behavior demonstrated here is not shown in context. + +<Canvas> + <Story name="Overview" args={{label: 'Chip Filled'}}> + {Template.bind({})} + </Story> +</Canvas> + +## Props + +<ArgsTable story="Overview" /> + +## Usage + +Import and use the `Chip` component in your components as follows. + +<Source + language="jsx" + dark + format + code={dedent` +import Chip from '@oxygen-ui/react/Chip';\n +function Demo() { + return ( + <Chip label="Chip Filled" /> + ); +}`} +/> diff --git a/packages/react/src/components/Chip/Chip.tsx b/packages/react/src/components/Chip/Chip.tsx new file mode 100644 index 00000000..f485d6c1 --- /dev/null +++ b/packages/react/src/components/Chip/Chip.tsx @@ -0,0 +1,44 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import MuiChip, {ChipProps as MuiChipProps} from '@mui/material/Chip'; +import clsx from 'clsx'; +import {ElementType, FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './chip.scss'; + +export type ChipProps<C extends ElementType = ElementType> = { + component?: C; +} & Omit<MuiChipProps<C>, 'component'>; + +const COMPONENT_NAME: string = 'Chip'; + +const Chip: FC<ChipProps> & WithWrapperProps = <C extends ElementType>(props: ChipProps<C>): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-chip', className); + + return <MuiChip className={classes} {...rest} />; +}; + +Chip.displayName = composeComponentDisplayName(COMPONENT_NAME); +Chip.muiName = COMPONENT_NAME; +Chip.defaultProps = {}; + +export default Chip; diff --git a/packages/react/src/components/Chip/__tests__/Chip.test.tsx b/packages/react/src/components/Chip/__tests__/Chip.test.tsx new file mode 100644 index 00000000..c0c3cad8 --- /dev/null +++ b/packages/react/src/components/Chip/__tests__/Chip.test.tsx @@ -0,0 +1,32 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import {render} from '@unit-testing'; +import Chip from '../Chip'; + +describe('Chip', () => { + it('should render successfully', () => { + const {baseElement} = render(<Chip />); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render(<Chip />); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap new file mode 100644 index 00000000..5b51cfb0 --- /dev/null +++ b/packages/react/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Chip should match the snapshot 1`] = ` +<body> + <div> + <div + class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault oxygen-chip css-1cbo6kg-MuiChip-root" + > + <span + class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label" + /> + </div> + </div> +</body> +`; diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss new file mode 100644 index 00000000..702c63ca --- /dev/null +++ b/packages/react/src/components/Chip/chip.scss @@ -0,0 +1,21 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.oxygen-chip { + /* Add Styles */ +} diff --git a/packages/react/src/components/Chip/index.ts b/packages/react/src/components/Chip/index.ts new file mode 100644 index 00000000..2f5c4d46 --- /dev/null +++ b/packages/react/src/components/Chip/index.ts @@ -0,0 +1,20 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export {default} from './Chip'; +export type {ChipProps} from './Chip'; diff --git a/packages/react/src/components/Container/Container.stories.mdx b/packages/react/src/components/Container/Container.stories.mdx new file mode 100644 index 00000000..69946e72 --- /dev/null +++ b/packages/react/src/components/Container/Container.stories.mdx @@ -0,0 +1,57 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Container from './Container.tsx'; +import Box from '../Box/Box.tsx'; + +export const meta = { + component: Container, + title: StoryConfig.Container.hierarchy, +}; + +<Meta title={meta.title} component={meta.component} /> + +export const Template = args => ( + <Container {...args}> + <Box sx={{bgcolor: '#cfe8fc', height: '100vh'}} /> + </Container> +); + +# Container + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The container centers your content horizontally. It's the most basic layout element. + +<Canvas> + <Story name="Overview" args={{maxWidth: 'sm'}}> + {Template.bind({})} + </Story> +</Canvas> + +## Props + +<ArgsTable story="Overview" /> + +## Usage + +Import and use the `Container` component in your components as follows. + +<Source + language="jsx" + dark + format + code={dedent` +import Container from '@oxygen-ui/react/Container';\n +function Demo() { + return ( + <Container> + {/* Content */} + </Container> + ); +}`} +/> diff --git a/packages/react/src/components/Container/Container.tsx b/packages/react/src/components/Container/Container.tsx new file mode 100644 index 00000000..c260ad03 --- /dev/null +++ b/packages/react/src/components/Container/Container.tsx @@ -0,0 +1,46 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import MuiContainer, {ContainerProps as MuiContainerProps} from '@mui/material/Container'; +import clsx from 'clsx'; +import {ElementType, FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './container.scss'; + +export type ContainerProps<C extends ElementType = ElementType> = { + component?: C; +} & Omit<MuiContainerProps<C>, 'component'>; + +const COMPONENT_NAME: string = 'Container'; + +const Container: FC<ContainerProps> & WithWrapperProps = <C extends ElementType>( + props: ContainerProps<C>, +): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-container', className); + + return <MuiContainer className={classes} {...rest} />; +}; + +Container.displayName = composeComponentDisplayName(COMPONENT_NAME); +Container.muiName = COMPONENT_NAME; +Container.defaultProps = {}; + +export default Container; diff --git a/packages/react/src/components/Container/__tests__/Container.test.tsx b/packages/react/src/components/Container/__tests__/Container.test.tsx new file mode 100644 index 00000000..0926d3a4 --- /dev/null +++ b/packages/react/src/components/Container/__tests__/Container.test.tsx @@ -0,0 +1,32 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import {render} from '@unit-testing'; +import Container from '../Container'; + +describe('Container', () => { + it('should render successfully', () => { + const {baseElement} = render(<Container />); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render(<Container />); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/Container/__tests__/__snapshots__/Container.test.tsx.snap b/packages/react/src/components/Container/__tests__/__snapshots__/Container.test.tsx.snap new file mode 100644 index 00000000..30059c3e --- /dev/null +++ b/packages/react/src/components/Container/__tests__/__snapshots__/Container.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Container should match the snapshot 1`] = ` +<body> + <div> + <div + class="MuiContainer-root MuiContainer-maxWidthLg oxygen-container css-1oqqzyl-MuiContainer-root" + /> + </div> +</body> +`; diff --git a/packages/react/src/components/Container/container.scss b/packages/react/src/components/Container/container.scss new file mode 100644 index 00000000..ff5e44c3 --- /dev/null +++ b/packages/react/src/components/Container/container.scss @@ -0,0 +1,21 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.oxygen-container { + /* Add Styles */ +} diff --git a/packages/react/src/components/Container/index.ts b/packages/react/src/components/Container/index.ts new file mode 100644 index 00000000..708dd540 --- /dev/null +++ b/packages/react/src/components/Container/index.ts @@ -0,0 +1,20 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export {default} from './Container'; +export type {ContainerProps} from './Container'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 4bef0a91..e41bcbe7 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -28,9 +28,15 @@ export * from './Box'; export {default as Button} from './Button'; export * from './Button'; +export {default as Chip} from './Chip'; +export * from './Chip'; + export {default as ColorModeToggle} from './ColorModeToggle'; export * from './ColorModeToggle'; +export {default as Container} from './Container'; +export * from './Container'; + export {default as Divider} from './Divider'; export * from './Divider';