diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 282c1d23..ddca65c1 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -36,6 +36,10 @@ export type Stories = | 'Avatar' | 'Box' | 'Button' + | 'Card' + | 'CardActions' + | 'CardContent' + | 'CardHeader' | 'CircularProgressAvatar' | 'Chip' | 'ColorModeToggle' @@ -86,17 +90,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`, }, @@ -112,12 +105,21 @@ const StoryConfig: StorybookConfig = { Button: { hierarchy: `${StorybookCategories.Inputs}/Button`, }, + Card: { + hierarchy: `${StorybookCategories.Surfaces}/Card`, + }, + CardActions: { + hierarchy: `${StorybookCategories.Surfaces}/CardActions`, + }, + CardContent: { + hierarchy: `${StorybookCategories.Surfaces}/CardContent`, + }, + CardHeader: { + hierarchy: `${StorybookCategories.Surfaces}/CardHeader`, + }, CircularProgressAvatar: { hierarchy: `${StorybookCategories.DataDisplay}/Circular Progress Avatar`, }, - UserDropdownMenu: { - hierarchy: `${StorybookCategories.Navigation}/User Dropdown Menu`, - }, Chip: { hierarchy: `${StorybookCategories.DataDisplay}/Chip`, }, @@ -139,6 +141,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`, }, @@ -196,6 +209,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..7f595eb9 --- /dev/null +++ b/packages/react/src/components/Card/Card.tsx @@ -0,0 +1,41 @@ +/** + * 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 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..a44e2deb --- /dev/null +++ b/packages/react/src/components/Card/__tests__/Card.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 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'; 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..2432e53c --- /dev/null +++ b/packages/react/src/components/CardActions/CardActions.tsx @@ -0,0 +1,41 @@ +/** + * 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 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..228802fc --- /dev/null +++ b/packages/react/src/components/CardActions/__tests__/CardActions.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 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'; 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..5e8bdfa0 --- /dev/null +++ b/packages/react/src/components/CardContent/CardContent.tsx @@ -0,0 +1,41 @@ +/** + * 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 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..a15fb49a --- /dev/null +++ b/packages/react/src/components/CardContent/__tests__/CardContent.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 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'; 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..1494f416 --- /dev/null +++ b/packages/react/src/components/CardHeader/CardHeader.tsx @@ -0,0 +1,41 @@ +/** + * 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 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..8166bec2 --- /dev/null +++ b/packages/react/src/components/CardHeader/__tests__/CardHeader.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 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';