From b09a56c7bba6744032e1049eac3ca60d21d27388 Mon Sep 17 00:00:00 2001 From: Thivi Date: Tue, 14 Feb 2023 14:55:18 +0530 Subject: [PATCH] feat(react): add ActionCard component --- .../assets/images/action-card-image.svg | 5 ++ packages/react/.storybook/story-config.ts | 4 + .../ActionCard/ActionCard.stories.mdx | 61 ++++++++++++++ .../src/components/ActionCard/ActionCard.tsx | 83 +++++++++++++++++++ .../ActionCard/__tests__/ActionCard.test.tsx | 48 +++++++++++ .../__snapshots__/ActionCard.test.tsx.snap | 45 ++++++++++ .../components/ActionCard/action-card.scss | 43 ++++++++++ .../react/src/components/ActionCard/index.ts | 20 +++++ packages/react/src/components/index.ts | 3 + 9 files changed, 312 insertions(+) create mode 100644 packages/react/.storybook/static/assets/images/action-card-image.svg create mode 100644 packages/react/src/components/ActionCard/ActionCard.stories.mdx create mode 100644 packages/react/src/components/ActionCard/ActionCard.tsx create mode 100644 packages/react/src/components/ActionCard/__tests__/ActionCard.test.tsx create mode 100644 packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap create mode 100644 packages/react/src/components/ActionCard/action-card.scss create mode 100644 packages/react/src/components/ActionCard/index.ts diff --git a/packages/react/.storybook/static/assets/images/action-card-image.svg b/packages/react/.storybook/static/assets/images/action-card-image.svg new file mode 100644 index 00000000..45757f30 --- /dev/null +++ b/packages/react/.storybook/static/assets/images/action-card-image.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 483abbb1..ce2a607f 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -31,6 +31,7 @@ enum StorybookCategories { } export type Stories = + | 'ActionCard' | 'AppBar' | 'Avatar' | 'UserDropdownMenu' @@ -92,6 +93,9 @@ const StoryConfig: StorybookConfig = { }, hierarchy: `${StorybookCategories.Navigation}/Header`, }, + ActionCard: { + hierarchy: `${StorybookCategories.Surfaces}/Action Card`, + }, AppBar: { hierarchy: `${StorybookCategories.Surfaces}/App Bar`, }, diff --git a/packages/react/src/components/ActionCard/ActionCard.stories.mdx b/packages/react/src/components/ActionCard/ActionCard.stories.mdx new file mode 100644 index 00000000..cc791b89 --- /dev/null +++ b/packages/react/src/components/ActionCard/ActionCard.stories.mdx @@ -0,0 +1,61 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import ActionCard from './ActionCard.tsx'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; + +export const meta = { + component: ActionCard, + title: StoryConfig.ActionCard.hierarchy +}; + + + +export const Template = args => ; + +# ActionCard + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Action cards can be used in overview pages or dashboards. + + + {alert("Action clicked")}, + image: action card + }}> + {Template.bind({})} + + + +## Props + + +## Usage + +Import and use the `ActionCard` component in your components as follows. + + {alert("Action clicked")}} + image={action card} + /> + ); +}`} +/> diff --git a/packages/react/src/components/ActionCard/ActionCard.tsx b/packages/react/src/components/ActionCard/ActionCard.tsx new file mode 100644 index 00000000..07b0f302 --- /dev/null +++ b/packages/react/src/components/ActionCard/ActionCard.tsx @@ -0,0 +1,83 @@ +/** + * 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 Card, {CardProps} from '@mui/material/Card'; +import CardActions from '@mui/material/CardActions'; +import CardContent from '@mui/material/CardContent'; +import {FC, ReactElement, ReactNode} from 'react'; +import clsx from 'clsx'; +import Button from '../Button'; +import Typography from '../Typography'; +import {WithWrapperProps} from '../../models'; +import './action-card.scss'; + +export interface ActionCardProps extends CardProps { + /** + * The text to be displayed in the action button. + */ + actionText: string; + /** + * The description of the card. + */ + description: string; + /** + * The image to be displayed in the card. + */ + image: ReactNode; + /** + * Callback method to be called when the action button is clicked. + */ + onActionClick: () => void; + /** + * The title of the card. + */ + title: string; +} + +const COMPONENT_NAME: string = 'ActionCard'; + +const ActionCard: FC & WithWrapperProps = (props: ActionCardProps): ReactElement => { + const {className, image, title, description, actionText, onActionClick, ...rest} = props; + + const classes: string = clsx('oxygen-action-card', className); + + return ( + + + {image} + + {title} + + + {description} + + + + + + + ); +}; + +ActionCard.displayName = COMPONENT_NAME; +ActionCard.muiName = COMPONENT_NAME; +ActionCard.defaultProps = {}; + +export default ActionCard; diff --git a/packages/react/src/components/ActionCard/__tests__/ActionCard.test.tsx b/packages/react/src/components/ActionCard/__tests__/ActionCard.test.tsx new file mode 100644 index 00000000..3b9fb6be --- /dev/null +++ b/packages/react/src/components/ActionCard/__tests__/ActionCard.test.tsx @@ -0,0 +1,48 @@ +/** + * 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 {ReactElement} from 'react'; +import ActionCard from '../ActionCard'; + +const onActionClick: jest.Mock = jest.fn(); + +const ActionCardTestComponent: ReactElement = ( + } + /> +); + +describe('ActionCard', () => { + it('should render successfully', () => { + const {baseElement} = render(ActionCardTestComponent); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render(ActionCardTestComponent); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap new file mode 100644 index 00000000..7441b83e --- /dev/null +++ b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ActionCard should match the snapshot 1`] = ` + +
+
+
+ action card +
+ Secure your account by adding an extra layer of security +
+

+ Configure additional authentications to sign in easily or to add an extra layer of security to your account. +

+
+
+ +
+
+
+ +`; diff --git a/packages/react/src/components/ActionCard/action-card.scss b/packages/react/src/components/ActionCard/action-card.scss new file mode 100644 index 00000000..263d583f --- /dev/null +++ b/packages/react/src/components/ActionCard/action-card.scss @@ -0,0 +1,43 @@ +/** + * 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-action-card { + border-radius: 8px; + box-shadow: 0px 2px 20px 0px #1d20281a; + padding: 24px 40px 24px 24px; + + &:hover { + border: 1px solid #ff7300; + } + + .title { + color: #222228; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 24px; + } + + .description { + color: #8D91A3; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 20px; + } +} diff --git a/packages/react/src/components/ActionCard/index.ts b/packages/react/src/components/ActionCard/index.ts new file mode 100644 index 00000000..2f640c9b --- /dev/null +++ b/packages/react/src/components/ActionCard/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 './ActionCard'; +export type {ActionCardProps} from './ActionCard'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index ee11d1be..021bd3e2 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -16,6 +16,9 @@ * under the License. */ +export {default as ActionCard} from './ActionCard'; +export * from './ActionCard'; + export {default as AppBar} from './AppBar'; export * from './AppBar';