From c767bcfa2f5608a0890a16c729e28ac855b719b0 Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Feb 2023 20:18:01 +0530 Subject: [PATCH] feat(react): add `Chip` component --- packages/react/.storybook/story-config.ts | 4 ++ .../src/components/Chip/Chip.stories.mdx | 52 +++++++++++++++++++ packages/react/src/components/Chip/Chip.tsx | 44 ++++++++++++++++ .../components/Chip/__tests__/Chip.test.tsx | 32 ++++++++++++ .../__snapshots__/Chip.test.tsx.snap | 15 ++++++ packages/react/src/components/Chip/chip.scss | 21 ++++++++ packages/react/src/components/Chip/index.ts | 20 +++++++ packages/react/src/components/index.ts | 3 ++ 8 files changed, 191 insertions(+) create mode 100644 packages/react/src/components/Chip/Chip.stories.mdx create mode 100644 packages/react/src/components/Chip/Chip.tsx create mode 100644 packages/react/src/components/Chip/__tests__/Chip.test.tsx create mode 100644 packages/react/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap create mode 100644 packages/react/src/components/Chip/chip.scss create mode 100644 packages/react/src/components/Chip/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 0b8e7e56..60d1f730 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -38,6 +38,7 @@ export type Stories = | 'Header' | 'Box' | 'Button' + | 'Chip' | 'ColorModeToggle' | 'Colors' | 'Divider' @@ -112,6 +113,9 @@ const StoryConfig: StorybookConfig = { UserDropdownMenu: { hierarchy: `${StorybookCategories.Navigation}/User Dropdown Menu`, }, + Chip: { + hierarchy: `${StorybookCategories.DataDisplay}/Chip`, + }, ColorModeToggle: { hierarchy: `${StorybookCategories.Theme}/Color Mode Toggle`, }, 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, +}; + + + +export const Template = 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. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Chip` component in your components as follows. + + + ); +}`} +/> 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 = { + component?: C; +} & Omit, 'component'>; + +const COMPONENT_NAME: string = 'Chip'; + +const Chip: FC & WithWrapperProps = (props: ChipProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-chip', className); + + return ; +}; + +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(); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render(); + 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`] = ` + +
+
+ +
+
+ +`; 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/index.ts b/packages/react/src/components/index.ts index 4bef0a91..a89ad538 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -28,6 +28,9 @@ 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';