feat(react): add ActionCard component

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

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
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <ActionCard {...args} />;
+
+# ActionCard
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Action cards can be used in overview pages or dashboards.
+
+<Canvas>
+  <Story name="Overview" args={{
+    title: "Secure your account by adding an extra layer of security",
+    description: "Configure additional authentications to sign in easily or to add an extra layer of security to your account.",
+    actionText: "Setup MFA",
+    onActionClick:() => {alert("Action clicked")},
+    image: <img src="/assets/images/action-card-image.svg" alt="action card" />
+  }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `ActionCard` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import ActionCard from '@oxygen-ui/react/ActionCard';\n
+function Demo() {
+  return (
+    <ActionCard
+      title="Secure your account by adding an extra layer of security"
+      description="Configure additional authentications to sign in easily or to add an extra layer of security to your account."
+      actionText="Setup MFA"
+      onActionClick={() => {alert("Action clicked")}}
+      image={<img src="/assets/images/action-card-image.svg" alt="action card" />}
+    />
+  );
+}`}
+/>

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<ActionCardProps> & WithWrapperProps = (props: ActionCardProps): ReactElement => {
+  const {className, image, title, description, actionText, onActionClick, ...rest} = props;
+
+  const classes: string = clsx('oxygen-action-card', className);
+
+  return (
+    <Card className={classes} {...rest}>
+      <CardContent>
+        {image}
+        <Typography variant="subtitle2" className="title">
+          {title}
+        </Typography>
+        <Typography variant="body1" color="secondary.main" className="description">
+          {description}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button onClick={onActionClick} variant="contained">
+          {actionText}
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+ActionCard.displayName = COMPONENT_NAME;
+ActionCard.muiName = COMPONENT_NAME;
+ActionCard.defaultProps = {};
+
+export default ActionCard;

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<any, any> = jest.fn();
+
+const ActionCardTestComponent: ReactElement = (
+  <ActionCard
+    title="Secure your account by adding an extra layer of security"
+    description={
+      'Configure additional authentications to sign in easily or to ' +
+      'add an extra layer of security to your account.'
+    }
+    actionText="Setup MFA"
+    onActionClick={onActionClick}
+    image={<img src="/assets/images/action-card-image.svg" alt="action card" />}
+  />
+);
+
+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();
+  });
+});

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`] = `
+<body>
+  <div>
+    <div
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1ico3yg-MuiPaper-root-MuiCard-root"
+    >
+      <div
+        class="MuiCardContent-root css-46bh2p-MuiCardContent-root"
+      >
+        <img
+          alt="action card"
+          src="/assets/images/action-card-image.svg"
+        />
+        <h6
+          class="MuiTypography-root MuiTypography-subtitle2 oxygen-typography css-n98czh-MuiTypography-root"
+        >
+          Secure your account by adding an extra layer of security
+        </h6>
+        <p
+          class="MuiTypography-root MuiTypography-body1 oxygen-typography css-167a66v-MuiTypography-root"
+        >
+          Configure additional authentications to sign in easily or to add an extra layer of security to your account.
+        </p>
+      </div>
+      <div
+        class="MuiCardActions-root MuiCardActions-spacing css-1t6e9jv-MuiCardActions-root"
+      >
+        <button
+          class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium oxygen-button css-1e4ccqm-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
+          id=":r1:"
+          tabindex="0"
+          type="button"
+        >
+          Setup MFA
+          <span
+            class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</body>
+`;

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;
+  }
+}

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

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