feat(react): add Card components

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',
   },

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,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Card {...args} />;
+
+# Card
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Use the Card component to display content and actions about a single subject.
+
+<Canvas>
+  <Story name="Overview" args={{children: 'Sample Card'}}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Card` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Card from '@oxygen-ui/react/Card';\n`}
+/>

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<CardProps> & WithWrapperProps = (props: CardProps): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-card', className);
+
+  return <MuiCard className={classes} {...rest} />;
+};
+
+Card.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Card.muiName = COMPONENT_NAME;
+
+export default Card;

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(<Card />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Card />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

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`] = `
+<body>
+  <div>
+    <div
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-card css-2in4ew-MuiPaper-root-MuiCard-root"
+    />
+  </div>
+</body>
+`;

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 */
+}

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';

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,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <CardActions {...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.
+
+<Canvas>
+  <Story name="Overview" args={{children: <button>Sample action</button>}}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `CardActions` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import CardActions from '@oxygen-ui/react/CardActions';\n`}
+/>

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<CardActionsProps> & WithWrapperProps = (props: CardActionsProps): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-card-actions', className);
+
+  return <MuiCardActions className={classes} {...rest} />;
+};
+
+CardActions.displayName = composeComponentDisplayName(COMPONENT_NAME);
+CardActions.muiName = COMPONENT_NAME;
+
+export default CardActions;

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(<CardActions />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<CardActions />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

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`] = `
+<body>
+  <div>
+    <div
+      class="MuiCardActions-root MuiCardActions-spacing oxygen-card-actions css-1t6e9jv-MuiCardActions-root"
+    />
+  </div>
+</body>
+`;