feat(react): add ConnectorCard component

packages/react/.storybook/story-config.ts

@@ -51,6 +51,7 @@ export type Stories =
   | 'Chip'
   | 'ColorModeToggle'
   | 'Colors'
+  | 'ConnectorCard'
   | 'Container'
   | 'Divider'
   | 'Drawer'
@@ -145,13 +146,13 @@ const StoryConfig: StorybookConfig = {
     hierarchy: `${StorybookCategories.Surfaces}/Card`,
   },
   CardActions: {
-    hierarchy: `${StorybookCategories.Surfaces}/CardActions`,
+    hierarchy: `${StorybookCategories.Surfaces}/Card Actions`,
   },
   CardContent: {
-    hierarchy: `${StorybookCategories.Surfaces}/CardContent`,
+    hierarchy: `${StorybookCategories.Surfaces}/Card Content`,
   },
   CardHeader: {
-    hierarchy: `${StorybookCategories.Surfaces}/CardHeader`,
+    hierarchy: `${StorybookCategories.Surfaces}/Card Header`,
   },
   Carousel: {
     hierarchy: `${StorybookCategories.Patterns}/Carousel`,
@@ -168,6 +169,9 @@ const StoryConfig: StorybookConfig = {
   Colors: {
     hierarchy: `${StorybookCategories.Foundations}/Colors`,
   },
+  ConnectorCard: {
+    hierarchy: `${StorybookCategories.Patterns}/Connector Card`,
+  },
   Container: {
     hierarchy: `${StorybookCategories.Layout}/Container`,
   },

packages/react/src/components/ConnectorCard/ConnectorCard.stories.mdx

@@ -0,0 +1,106 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import { action } from '@storybook/addon-actions';
+import ConnectorCard from './ConnectorCard.tsx';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Typography from '../Typography';
+import Image from '../Image';
+
+export const meta = {
+  component: ConnectorCard,
+  title: StoryConfig.ConnectorCard.hierarchy
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <ConnectorCard {...args} />;
+
+# Connector Card
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Variants](#variants)
+
+## Overview
+
+The `ConnectorCard` component is a pattern used to display a Connection with its connection status.
+
+<Canvas>
+  <Story name="Overview" args={{
+    title: <Typography variant="subtitle1">Google</Typography>,
+    description: <Typography variant="body2">Connected as Mathew Asgard<br />[email protected]</Typography>,
+    action: {
+      text: "Connect",
+      onClick: action('clicked'),
+    },
+    connected: false,
+    image: <Image src="/assets/images/google-logo.svg" alt="logo" />
+  }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `ConnectorCard` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import ConnectorCard from '@oxygen-ui/react/ConnectorCard';\n
+function Demo() {
+  return (
+    <ConnectorCard
+      title={<p>Title</p>}
+      description={<p>description</p>}
+      action={{
+        text: "Action",
+        onClick: () => {alert("Action clicked")}
+      }}
+      connected={false}
+      image={<img src="/assets/images/google-logo.svg" alt="connector card" />}
+    />
+  );
+}`}
+/>
+
+## Variants
+
+### Connected
+
+<Canvas>
+  <Story name="Connected" args={{
+    title: <Typography variant="subtitle1">Google</Typography>,
+    description: <Typography variant="body2">Connected as Mathew Asgard<br />[email protected]</Typography>,
+    action: {
+      text: "Disconnect",
+      onClick: action('clicked'),
+    },
+    connected: true,
+    image: <Image src="/assets/images/google-logo.svg" alt="logo" />
+  }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Disconnected
+
+<Canvas>
+  <Story name="Disconnected" args={{
+    title: <Typography variant="subtitle1">Google</Typography>,
+    description: <Typography variant="body2">Connected as Mathew Asgard<br />[email protected]</Typography>,
+    action: {
+      text: "Connect",
+      onClick: action('clicked'),
+    },
+    image: <Image src="/assets/images/google-logo.svg" alt="logo" />
+  }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>

packages/react/src/components/ConnectorCard/ConnectorCard.tsx

@@ -0,0 +1,102 @@
+/**
+ * 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 {LinkIcon, CheckCircleIcon} from '@oxygen-ui/react-icons';
+import clsx from 'clsx';
+import {FC, ReactElement, ReactNode} from 'react';
+import {WithWrapperProps} from '../../models';
+import Box from '../Box';
+import Button from '../Button';
+import Card, {CardProps} from '../Card';
+import CardHeader from '../CardHeader';
+import './connector-card.scss';
+
+export interface ConnectorCardProps extends Omit<CardProps, 'image' | 'title'> {
+  /**
+   * The action button.
+   */
+  action?: {
+    /**
+     * Callback method to be called when the action button is clicked.
+     * @example () => { console.log('Connected') }
+     */
+    onClick: () => void;
+    /**
+     * The text to be displayed in the action button.
+     * @example 'Connect'
+     */
+    text: string;
+  };
+  /**
+   * Whether the connector is connected or not.
+   * @default false
+   */
+  connected: boolean;
+  /**
+   * The description of the card.
+   */
+  description?: ReactNode;
+  /**
+   * The image to be displayed in the card.
+   */
+  image?: ReactNode;
+  /**
+   * The title of the card.
+   */
+  title: ReactNode;
+}
+
+const COMPONENT_NAME: string = 'ConnectorCard';
+
+const ConnectorCard: FC<ConnectorCardProps> & WithWrapperProps = (props: ConnectorCardProps): ReactElement => {
+  const {className, connected, image, title, description, action, ...rest} = props;
+
+  const classes: string = clsx('oxygen-connector-card', className);
+
+  return (
+    <Card variant="outlined" className={classes} {...rest}>
+      <CardHeader
+        classes={{action: 'oxygen-connector-card-status-icon', avatar: 'oxygen-connector-card-image'}}
+        avatar={image}
+        action={connected && <CheckCircleIcon />}
+        title={title}
+        subheader={
+          <Box>
+            <Box className="oxygen-connector-card-description">{description}</Box>
+            {action && (
+              <Button
+                className={clsx('oxygen-connector-button', {connected})}
+                onClick={action.onClick}
+                variant={connected ? 'text' : 'outlined'}
+                startIcon={<LinkIcon />}
+              >
+                {action.text}
+              </Button>
+            )}
+          </Box>
+        }
+      />
+    </Card>
+  );
+};
+
+ConnectorCard.displayName = COMPONENT_NAME;
+ConnectorCard.muiName = COMPONENT_NAME;
+ConnectorCard.defaultProps = {};
+
+export default ConnectorCard;

packages/react/src/components/ConnectorCard/__tests__/ConnectorCard.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 ConnectorCard from '../ConnectorCard';
+
+const onActionClick: jest.Mock<any, any> = jest.fn();
+
+const ActionCardTestComponent: ReactElement = (
+  <ConnectorCard
+    title="Google"
+    description="Connected"
+    connected
+    action={{
+      onClick: onActionClick,
+      text: 'Disconnect',
+    }}
+    image={<img src="/assets/images/google-logo.svg" alt="connector card" />}
+  />
+);
+
+describe('ConnectorCard', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(ActionCardTestComponent);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(ActionCardTestComponent);
+    expect(baseElement).toMatchSnapshot();
+  });
+});