From b2b39c08bdc1e549261824fd25dfb7a96e9932de Mon Sep 17 00:00:00 2001 From: savindi7 Date: Thu, 16 Feb 2023 00:22:16 +0530 Subject: [PATCH 1/5] feat(react): add `Card` components --- packages/react/.storybook/story-config.ts | 30 ++++++------ .../src/components/Card/Card.stories.mdx | 46 +++++++++++++++++++ packages/react/src/components/Card/Card.tsx | 41 +++++++++++++++++ .../components/Card/__tests__/Card.test.tsx | 32 +++++++++++++ .../__snapshots__/Card.test.tsx.snap | 11 +++++ packages/react/src/components/Card/card.scss | 21 +++++++++ packages/react/src/components/Card/index.ts | 20 ++++++++ 7 files changed, 188 insertions(+), 13 deletions(-) create mode 100644 packages/react/src/components/Card/Card.stories.mdx create mode 100644 packages/react/src/components/Card/Card.tsx create mode 100644 packages/react/src/components/Card/__tests__/Card.test.tsx create mode 100644 packages/react/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap create mode 100644 packages/react/src/components/Card/card.scss create mode 100644 packages/react/src/components/Card/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index ac9441bd..e3e1c35c 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' + | 'Card' | 'Chip' | 'ColorModeToggle' | 'Colors' @@ -85,17 +86,6 @@ export type StorybookConfig = Record< >; const StoryConfig: StorybookConfig = { - Header: { - story: { - Overview: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/HyEVOfDBGyXsvPSbNdgquW/Navigation%2FHeader?node-id=120%3A1437&t=NT0uoPAY3qLFlkmN-0', - }, - }, - }, - hierarchy: `${StorybookCategories.Navigation}/Header`, - }, ActionCard: { hierarchy: `${StorybookCategories.Surfaces}/Action Card`, }, @@ -111,8 +101,8 @@ const StoryConfig: StorybookConfig = { Button: { hierarchy: `${StorybookCategories.Inputs}/Button`, }, - UserDropdownMenu: { - hierarchy: `${StorybookCategories.Navigation}/User Dropdown Menu`, + Card: { + hierarchy: `${StorybookCategories.Surfaces}/Card`, }, Chip: { hierarchy: `${StorybookCategories.DataDisplay}/Chip`, @@ -135,6 +125,17 @@ const StoryConfig: StorybookConfig = { Grid: { hierarchy: `${StorybookCategories.Layout}/Grid`, }, + Header: { + story: { + Overview: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/HyEVOfDBGyXsvPSbNdgquW/Navigation%2FHeader?node-id=120%3A1437&t=NT0uoPAY3qLFlkmN-0', + }, + }, + }, + hierarchy: `${StorybookCategories.Navigation}/Header`, + }, Image: { hierarchy: `${StorybookCategories.DataDisplay}/Image`, }, @@ -192,6 +193,9 @@ const StoryConfig: StorybookConfig = { Typography: { hierarchy: `${StorybookCategories.DataDisplay}/Typography`, }, + UserDropdownMenu: { + hierarchy: `${StorybookCategories.Navigation}/User Dropdown Menu`, + }, Welcome: { hierarchy: 'Welcome', }, diff --git a/packages/react/src/components/Card/Card.stories.mdx b/packages/react/src/components/Card/Card.stories.mdx new file mode 100644 index 00000000..658f98fc --- /dev/null +++ b/packages/react/src/components/Card/Card.stories.mdx @@ -0,0 +1,46 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import {withDesign} from '../../../.storybook/utils.ts'; +import Card from './Card.tsx'; + +export const meta = { + component: Card, + title: StoryConfig.Card.hierarchy, +}; + + + +export const Template = args => ; + +# Card + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Use the Card component to display content and actions about a single subject. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Card` component in your components as follows. + + diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx new file mode 100644 index 00000000..2941aeb0 --- /dev/null +++ b/packages/react/src/components/Card/Card.tsx @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2022, 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 MuiCard, {CardProps as MuiCardProps} from '@mui/material/Card'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './card.scss'; + +export type CardProps = MuiCardProps; + +const COMPONENT_NAME: string = 'Card'; + +const Card: FC & WithWrapperProps = (props: CardProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-card', className); + + return ; +}; + +Card.displayName = composeComponentDisplayName(COMPONENT_NAME); +Card.muiName = COMPONENT_NAME; + +export default Card; diff --git a/packages/react/src/components/Card/__tests__/Card.test.tsx b/packages/react/src/components/Card/__tests__/Card.test.tsx new file mode 100644 index 00000000..7485fb6e --- /dev/null +++ b/packages/react/src/components/Card/__tests__/Card.test.tsx @@ -0,0 +1,32 @@ +/** + * Copyright (c) 2022, 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 Card from '../Card'; + +describe('Card', () => { + 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/Card/__tests__/__snapshots__/Card.test.tsx.snap b/packages/react/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap new file mode 100644 index 00000000..46e374f5 --- /dev/null +++ b/packages/react/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card should match the snapshot 1`] = ` + +
+
+
+ +`; diff --git a/packages/react/src/components/Card/card.scss b/packages/react/src/components/Card/card.scss new file mode 100644 index 00000000..c380bbed --- /dev/null +++ b/packages/react/src/components/Card/card.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-card { + /** Add Styles */ +} diff --git a/packages/react/src/components/Card/index.ts b/packages/react/src/components/Card/index.ts new file mode 100644 index 00000000..22422eaf --- /dev/null +++ b/packages/react/src/components/Card/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 './Card'; +export type {CardProps} from './Card'; From 455d8ba1e142a12d90d4cdea27887307a9fa0503 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Thu, 16 Feb 2023 00:42:13 +0530 Subject: [PATCH 2/5] feat(react): add `CardHeader` component --- packages/react/.storybook/story-config.ts | 4 ++ .../CardHeader/CardHeader.stories.mdx | 46 +++++++++++++++++++ .../src/components/CardHeader/CardHeader.tsx | 41 +++++++++++++++++ .../CardHeader/__tests__/CardHeader.test.tsx | 32 +++++++++++++ .../__snapshots__/CardHeader.test.tsx.snap | 15 ++++++ .../components/CardHeader/card-header.scss | 21 +++++++++ .../react/src/components/CardHeader/index.ts | 20 ++++++++ 7 files changed, 179 insertions(+) create mode 100644 packages/react/src/components/CardHeader/CardHeader.stories.mdx create mode 100644 packages/react/src/components/CardHeader/CardHeader.tsx create mode 100644 packages/react/src/components/CardHeader/__tests__/CardHeader.test.tsx create mode 100644 packages/react/src/components/CardHeader/__tests__/__snapshots__/CardHeader.test.tsx.snap create mode 100644 packages/react/src/components/CardHeader/card-header.scss create mode 100644 packages/react/src/components/CardHeader/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index e3e1c35c..b92f5934 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -39,6 +39,7 @@ export type Stories = | 'Box' | 'Button' | 'Card' + | 'CardHeader' | 'Chip' | 'ColorModeToggle' | 'Colors' @@ -104,6 +105,9 @@ const StoryConfig: StorybookConfig = { Card: { hierarchy: `${StorybookCategories.Surfaces}/Card`, }, + CardHeader: { + hierarchy: `${StorybookCategories.Surfaces}/CardHeader`, + }, Chip: { hierarchy: `${StorybookCategories.DataDisplay}/Chip`, }, diff --git a/packages/react/src/components/CardHeader/CardHeader.stories.mdx b/packages/react/src/components/CardHeader/CardHeader.stories.mdx new file mode 100644 index 00000000..f03b17e2 --- /dev/null +++ b/packages/react/src/components/CardHeader/CardHeader.stories.mdx @@ -0,0 +1,46 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import {withDesign} from '../../../.storybook/utils.ts'; +import CardHeader from './CardHeader.tsx'; + +export const meta = { + component: CardHeader, + title: StoryConfig.CardHeader.hierarchy, +}; + + + +export const Template = args => ; + +# Card Header + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Use the Card component to display content and actions about a single subject. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `CardHeader` component in your components as follows. + + diff --git a/packages/react/src/components/CardHeader/CardHeader.tsx b/packages/react/src/components/CardHeader/CardHeader.tsx new file mode 100644 index 00000000..f511a161 --- /dev/null +++ b/packages/react/src/components/CardHeader/CardHeader.tsx @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2022, 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 MuiCardHeader, {CardHeaderProps as MuiCardHeaderProps} from '@mui/material/CardHeader'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './card-header.scss'; + +export type CardHeaderProps = MuiCardHeaderProps; + +const COMPONENT_NAME: string = 'CardHeader'; + +const CardHeader: FC & WithWrapperProps = (props: CardHeaderProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-card-header', className); + + return ; +}; + +CardHeader.displayName = composeComponentDisplayName(COMPONENT_NAME); +CardHeader.muiName = COMPONENT_NAME; + +export default CardHeader; diff --git a/packages/react/src/components/CardHeader/__tests__/CardHeader.test.tsx b/packages/react/src/components/CardHeader/__tests__/CardHeader.test.tsx new file mode 100644 index 00000000..2451e8af --- /dev/null +++ b/packages/react/src/components/CardHeader/__tests__/CardHeader.test.tsx @@ -0,0 +1,32 @@ +/** + * Copyright (c) 2022, 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 CardHeader from '../CardHeader'; + +describe('CardHeader', () => { + 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/CardHeader/__tests__/__snapshots__/CardHeader.test.tsx.snap b/packages/react/src/components/CardHeader/__tests__/__snapshots__/CardHeader.test.tsx.snap new file mode 100644 index 00000000..6656e8e0 --- /dev/null +++ b/packages/react/src/components/CardHeader/__tests__/__snapshots__/CardHeader.test.tsx.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CardHeader should match the snapshot 1`] = ` + +
+
+
+
+
+ +`; diff --git a/packages/react/src/components/CardHeader/card-header.scss b/packages/react/src/components/CardHeader/card-header.scss new file mode 100644 index 00000000..d1250a8d --- /dev/null +++ b/packages/react/src/components/CardHeader/card-header.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-card-header { + /** Add Styles */ +} diff --git a/packages/react/src/components/CardHeader/index.ts b/packages/react/src/components/CardHeader/index.ts new file mode 100644 index 00000000..695d9b62 --- /dev/null +++ b/packages/react/src/components/CardHeader/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 './CardHeader'; +export type {CardHeaderProps} from './CardHeader'; From 345a10d9f8a535b469b1930ac941ea1aa9b9f430 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Thu, 16 Feb 2023 00:52:55 +0530 Subject: [PATCH 3/5] feat(react): add `CardContent` component --- packages/react/.storybook/story-config.ts | 4 ++ .../CardContent/CardContent.stories.mdx | 46 +++++++++++++++++++ .../components/CardContent/CardContent.tsx | 41 +++++++++++++++++ .../__tests__/CardContent.test.tsx | 32 +++++++++++++ .../__snapshots__/CardContent.test.tsx.snap | 11 +++++ .../components/CardContent/card-content.scss | 21 +++++++++ .../react/src/components/CardContent/index.ts | 20 ++++++++ 7 files changed, 175 insertions(+) create mode 100644 packages/react/src/components/CardContent/CardContent.stories.mdx create mode 100644 packages/react/src/components/CardContent/CardContent.tsx create mode 100644 packages/react/src/components/CardContent/__tests__/CardContent.test.tsx create mode 100644 packages/react/src/components/CardContent/__tests__/__snapshots__/CardContent.test.tsx.snap create mode 100644 packages/react/src/components/CardContent/card-content.scss create mode 100644 packages/react/src/components/CardContent/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index b92f5934..5ed1e1c1 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -39,6 +39,7 @@ export type Stories = | 'Box' | 'Button' | 'Card' + | 'CardContent' | 'CardHeader' | 'Chip' | 'ColorModeToggle' @@ -105,6 +106,9 @@ const StoryConfig: StorybookConfig = { Card: { hierarchy: `${StorybookCategories.Surfaces}/Card`, }, + CardContent: { + hierarchy: `${StorybookCategories.Surfaces}/CardContent`, + }, CardHeader: { hierarchy: `${StorybookCategories.Surfaces}/CardHeader`, }, diff --git a/packages/react/src/components/CardContent/CardContent.stories.mdx b/packages/react/src/components/CardContent/CardContent.stories.mdx new file mode 100644 index 00000000..8711ee77 --- /dev/null +++ b/packages/react/src/components/CardContent/CardContent.stories.mdx @@ -0,0 +1,46 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import {withDesign} from '../../../.storybook/utils.ts'; +import CardContent from './CardContent.tsx'; + +export const meta = { + component: CardContent, + title: StoryConfig.CardContent.hierarchy, +}; + + + +export const Template = args => ; + +# Card Content + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Use the CardContent component to display content about a single subject. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `CardContent` component in your components as follows. + + diff --git a/packages/react/src/components/CardContent/CardContent.tsx b/packages/react/src/components/CardContent/CardContent.tsx new file mode 100644 index 00000000..c47450b2 --- /dev/null +++ b/packages/react/src/components/CardContent/CardContent.tsx @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2022, 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 MuiCardContent, {CardContentProps as MuiCardContentProps} from '@mui/material/CardContent'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './card-content.scss'; + +export type CardContentProps = MuiCardContentProps; + +const COMPONENT_NAME: string = 'CardContent'; + +const CardContent: FC & WithWrapperProps = (props: CardContentProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-card-content', className); + + return ; +}; + +CardContent.displayName = composeComponentDisplayName(COMPONENT_NAME); +CardContent.muiName = COMPONENT_NAME; + +export default CardContent; diff --git a/packages/react/src/components/CardContent/__tests__/CardContent.test.tsx b/packages/react/src/components/CardContent/__tests__/CardContent.test.tsx new file mode 100644 index 00000000..9f797f58 --- /dev/null +++ b/packages/react/src/components/CardContent/__tests__/CardContent.test.tsx @@ -0,0 +1,32 @@ +/** + * Copyright (c) 2022, 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 CardContent from '../CardContent'; + +describe('CardContent', () => { + 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/CardContent/__tests__/__snapshots__/CardContent.test.tsx.snap b/packages/react/src/components/CardContent/__tests__/__snapshots__/CardContent.test.tsx.snap new file mode 100644 index 00000000..12138d97 --- /dev/null +++ b/packages/react/src/components/CardContent/__tests__/__snapshots__/CardContent.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CardContent should match the snapshot 1`] = ` + +
+
+
+ +`; diff --git a/packages/react/src/components/CardContent/card-content.scss b/packages/react/src/components/CardContent/card-content.scss new file mode 100644 index 00000000..5de09adf --- /dev/null +++ b/packages/react/src/components/CardContent/card-content.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-card-content { + /** Add Styles */ +} diff --git a/packages/react/src/components/CardContent/index.ts b/packages/react/src/components/CardContent/index.ts new file mode 100644 index 00000000..04da1fbb --- /dev/null +++ b/packages/react/src/components/CardContent/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 './CardContent'; +export type {CardContentProps} from './CardContent'; From 5b03000d724c6f8b29add614565289d228f145ca Mon Sep 17 00:00:00 2001 From: savindi7 Date: Thu, 16 Feb 2023 01:07:34 +0530 Subject: [PATCH 4/5] feat(react): add `CardActions` component --- packages/react/.storybook/story-config.ts | 7 +-- .../CardActions/CardActions.stories.mdx | 46 +++++++++++++++++++ .../components/CardActions/CardActions.tsx | 41 +++++++++++++++++ .../__tests__/CardActions.test.tsx | 32 +++++++++++++ .../__snapshots__/CardActions.test.tsx.snap | 11 +++++ .../components/CardActions/card-actions.scss | 21 +++++++++ .../react/src/components/CardActions/index.ts | 20 ++++++++ 7 files changed, 175 insertions(+), 3 deletions(-) create mode 100644 packages/react/src/components/CardActions/CardActions.stories.mdx create mode 100644 packages/react/src/components/CardActions/CardActions.tsx create mode 100644 packages/react/src/components/CardActions/__tests__/CardActions.test.tsx create mode 100644 packages/react/src/components/CardActions/__tests__/__snapshots__/CardActions.test.tsx.snap create mode 100644 packages/react/src/components/CardActions/card-actions.scss create mode 100644 packages/react/src/components/CardActions/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 82a66b44..ddca65c1 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -37,6 +37,7 @@ export type Stories = | 'Box' | 'Button' | 'Card' + | 'CardActions' | 'CardContent' | 'CardHeader' | 'CircularProgressAvatar' @@ -107,6 +108,9 @@ const StoryConfig: StorybookConfig = { Card: { hierarchy: `${StorybookCategories.Surfaces}/Card`, }, + CardActions: { + hierarchy: `${StorybookCategories.Surfaces}/CardActions`, + }, CardContent: { hierarchy: `${StorybookCategories.Surfaces}/CardContent`, }, @@ -116,9 +120,6 @@ const StoryConfig: StorybookConfig = { CircularProgressAvatar: { hierarchy: `${StorybookCategories.DataDisplay}/Circular Progress Avatar`, }, - UserDropdownMenu: { - hierarchy: `${StorybookCategories.Navigation}/User Dropdown Menu`, - }, Chip: { hierarchy: `${StorybookCategories.DataDisplay}/Chip`, }, diff --git a/packages/react/src/components/CardActions/CardActions.stories.mdx b/packages/react/src/components/CardActions/CardActions.stories.mdx new file mode 100644 index 00000000..174d88c8 --- /dev/null +++ b/packages/react/src/components/CardActions/CardActions.stories.mdx @@ -0,0 +1,46 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import {withDesign} from '../../../.storybook/utils.ts'; +import CardActions from './CardActions.tsx'; + +export const meta = { + component: CardActions, + title: StoryConfig.CardActions.hierarchy, +}; + + + +export const Template = args => ; + +# Card Actions + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Use the CardActions component for supplemental actions within the card that may be icons, text, and UI controls, typically placed at the bottom of the card. + + + Sample action}}> + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `CardActions` component in your components as follows. + + diff --git a/packages/react/src/components/CardActions/CardActions.tsx b/packages/react/src/components/CardActions/CardActions.tsx new file mode 100644 index 00000000..06242fd7 --- /dev/null +++ b/packages/react/src/components/CardActions/CardActions.tsx @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2022, 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 MuiCardActions, {CardActionsProps as MuiCardActionsProps} from '@mui/material/CardActions'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './card-actions.scss'; + +export type CardActionsProps = MuiCardActionsProps; + +const COMPONENT_NAME: string = 'CardActions'; + +const CardActions: FC & WithWrapperProps = (props: CardActionsProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-card-actions', className); + + return ; +}; + +CardActions.displayName = composeComponentDisplayName(COMPONENT_NAME); +CardActions.muiName = COMPONENT_NAME; + +export default CardActions; diff --git a/packages/react/src/components/CardActions/__tests__/CardActions.test.tsx b/packages/react/src/components/CardActions/__tests__/CardActions.test.tsx new file mode 100644 index 00000000..de043fc0 --- /dev/null +++ b/packages/react/src/components/CardActions/__tests__/CardActions.test.tsx @@ -0,0 +1,32 @@ +/** + * Copyright (c) 2022, 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 CardActions from '../CardActions'; + +describe('CardActions', () => { + 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/CardActions/__tests__/__snapshots__/CardActions.test.tsx.snap b/packages/react/src/components/CardActions/__tests__/__snapshots__/CardActions.test.tsx.snap new file mode 100644 index 00000000..c7c66b85 --- /dev/null +++ b/packages/react/src/components/CardActions/__tests__/__snapshots__/CardActions.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CardActions should match the snapshot 1`] = ` + +
+
+
+ +`; diff --git a/packages/react/src/components/CardActions/card-actions.scss b/packages/react/src/components/CardActions/card-actions.scss new file mode 100644 index 00000000..dded92c1 --- /dev/null +++ b/packages/react/src/components/CardActions/card-actions.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-card-actions { + /** Add Styles */ +} diff --git a/packages/react/src/components/CardActions/index.ts b/packages/react/src/components/CardActions/index.ts new file mode 100644 index 00000000..861931ed --- /dev/null +++ b/packages/react/src/components/CardActions/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 './CardActions'; +export type {CardActionsProps} from './CardActions'; From 53d5076b0ab6a0e5b60fcb9d1f746d2037faadb6 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Thu, 16 Feb 2023 01:51:00 +0530 Subject: [PATCH 5/5] chore(react): update license header year --- packages/react/src/components/Card/Card.tsx | 2 +- packages/react/src/components/Card/__tests__/Card.test.tsx | 2 +- packages/react/src/components/CardActions/CardActions.tsx | 2 +- .../src/components/CardActions/__tests__/CardActions.test.tsx | 2 +- packages/react/src/components/CardContent/CardContent.tsx | 2 +- .../src/components/CardContent/__tests__/CardContent.test.tsx | 2 +- packages/react/src/components/CardHeader/CardHeader.tsx | 2 +- .../src/components/CardHeader/__tests__/CardHeader.test.tsx | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx index 2941aeb0..7f595eb9 100644 --- a/packages/react/src/components/Card/Card.tsx +++ b/packages/react/src/components/Card/Card.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * 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 diff --git a/packages/react/src/components/Card/__tests__/Card.test.tsx b/packages/react/src/components/Card/__tests__/Card.test.tsx index 7485fb6e..a44e2deb 100644 --- a/packages/react/src/components/Card/__tests__/Card.test.tsx +++ b/packages/react/src/components/Card/__tests__/Card.test.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * 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 diff --git a/packages/react/src/components/CardActions/CardActions.tsx b/packages/react/src/components/CardActions/CardActions.tsx index 06242fd7..2432e53c 100644 --- a/packages/react/src/components/CardActions/CardActions.tsx +++ b/packages/react/src/components/CardActions/CardActions.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * 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 diff --git a/packages/react/src/components/CardActions/__tests__/CardActions.test.tsx b/packages/react/src/components/CardActions/__tests__/CardActions.test.tsx index de043fc0..228802fc 100644 --- a/packages/react/src/components/CardActions/__tests__/CardActions.test.tsx +++ b/packages/react/src/components/CardActions/__tests__/CardActions.test.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * 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 diff --git a/packages/react/src/components/CardContent/CardContent.tsx b/packages/react/src/components/CardContent/CardContent.tsx index c47450b2..5e8bdfa0 100644 --- a/packages/react/src/components/CardContent/CardContent.tsx +++ b/packages/react/src/components/CardContent/CardContent.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * 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 diff --git a/packages/react/src/components/CardContent/__tests__/CardContent.test.tsx b/packages/react/src/components/CardContent/__tests__/CardContent.test.tsx index 9f797f58..a15fb49a 100644 --- a/packages/react/src/components/CardContent/__tests__/CardContent.test.tsx +++ b/packages/react/src/components/CardContent/__tests__/CardContent.test.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * 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 diff --git a/packages/react/src/components/CardHeader/CardHeader.tsx b/packages/react/src/components/CardHeader/CardHeader.tsx index f511a161..1494f416 100644 --- a/packages/react/src/components/CardHeader/CardHeader.tsx +++ b/packages/react/src/components/CardHeader/CardHeader.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * 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 diff --git a/packages/react/src/components/CardHeader/__tests__/CardHeader.test.tsx b/packages/react/src/components/CardHeader/__tests__/CardHeader.test.tsx index 2451e8af..8166bec2 100644 --- a/packages/react/src/components/CardHeader/__tests__/CardHeader.test.tsx +++ b/packages/react/src/components/CardHeader/__tests__/CardHeader.test.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * 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