diff --git a/packages/primitives/src/icons/check-circle-16.svg b/packages/primitives/src/icons/check-circle-16.svg
new file mode 100644
index 00000000..678f9d75
--- /dev/null
+++ b/packages/primitives/src/icons/check-circle-16.svg
@@ -0,0 +1,21 @@
+
+
+
diff --git a/packages/primitives/src/icons/link-16.svg b/packages/primitives/src/icons/link-16.svg
new file mode 100644
index 00000000..e574b017
--- /dev/null
+++ b/packages/primitives/src/icons/link-16.svg
@@ -0,0 +1,28 @@
+
+
+
diff --git a/packages/react/.storybook/static/assets/images/google-logo.svg b/packages/react/.storybook/static/assets/images/google-logo.svg
new file mode 100644
index 00000000..8193f0ae
--- /dev/null
+++ b/packages/react/.storybook/static/assets/images/google-logo.svg
@@ -0,0 +1,6 @@
+
diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts
index 788d4852..061b8407 100644
--- a/packages/react/.storybook/story-config.ts
+++ b/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`,
},
diff --git a/packages/react/src/components/ConnectorCard/ConnectorCard.stories.mdx b/packages/react/src/components/ConnectorCard/ConnectorCard.stories.mdx
new file mode 100644
index 00000000..aefae1d2
--- /dev/null
+++ b/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
+};
+
+
+
+export const Template = 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.
+
+
+
+## Props
+
+
+## Usage
+
+Import and use the `ConnectorCard` component in your components as follows.
+
+Title}
+ description={
description
}
+ action={{
+ text: "Action",
+ onClick: () => {alert("Action clicked")}
+ }}
+ connected={false}
+ image={}
+ />
+ );
+}`}
+/>
+
+## Variants
+
+### Connected
+
+
+
+### Disconnected
+
+
diff --git a/packages/react/src/components/ConnectorCard/ConnectorCard.tsx b/packages/react/src/components/ConnectorCard/ConnectorCard.tsx
new file mode 100644
index 00000000..0163816b
--- /dev/null
+++ b/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 {
+ /**
+ * 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 & WithWrapperProps = (props: ConnectorCardProps): ReactElement => {
+ const {className, connected, image, title, description, action, ...rest} = props;
+
+ const classes: string = clsx('oxygen-connector-card', className);
+
+ return (
+
+ }
+ title={title}
+ subheader={
+
+ {description}
+ {action && (
+ }
+ >
+ {action.text}
+
+ )}
+
+ }
+ />
+
+ );
+};
+
+ConnectorCard.displayName = COMPONENT_NAME;
+ConnectorCard.muiName = COMPONENT_NAME;
+ConnectorCard.defaultProps = {};
+
+export default ConnectorCard;
diff --git a/packages/react/src/components/ConnectorCard/__tests__/ConnectorCard.test.tsx b/packages/react/src/components/ConnectorCard/__tests__/ConnectorCard.test.tsx
new file mode 100644
index 00000000..0b2cefb5
--- /dev/null
+++ b/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 = jest.fn();
+
+const ActionCardTestComponent: ReactElement = (
+ }
+ />
+);
+
+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();
+ });
+});
diff --git a/packages/react/src/components/ConnectorCard/__tests__/__snapshots__/ConnectorCard.test.tsx.snap b/packages/react/src/components/ConnectorCard/__tests__/__snapshots__/ConnectorCard.test.tsx.snap
new file mode 100644
index 00000000..fd917c82
--- /dev/null
+++ b/packages/react/src/components/ConnectorCard/__tests__/__snapshots__/ConnectorCard.test.tsx.snap
@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConnectorCard should match the snapshot 1`] = `
+
+
+
+
+
+
+
+
+
+ Google
+
+
+
+
+ Connected
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/ConnectorCard/connector-card.scss b/packages/react/src/components/ConnectorCard/connector-card.scss
new file mode 100644
index 00000000..1edf4d82
--- /dev/null
+++ b/packages/react/src/components/ConnectorCard/connector-card.scss
@@ -0,0 +1,55 @@
+/**
+ * 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-connector-card {
+ .oxygen-card-header {
+ align-items: flex-start;
+ padding: 0;
+
+ .oxygen-connector-card-image {
+ width: 3rem;
+ margin: 0.5rem 1.5rem;
+ margin-left: 0;
+
+ .oxygen-image {
+ width: 100%;
+ }
+ }
+
+ .oxygen-connector-card-status-icon {
+ //TODO: Remove this once the `CheckCircleIcon` is improved to recieve the `color` prop.
+ color: var(--oxygen-palette-success-main);
+ }
+
+ .oxygen-connector-card-description {
+ padding-bottom: 1rem;
+ }
+
+ .oxygen-connector-button {
+ padding: 0.2rem 1rem;
+
+ &.connected {
+ padding: 0 0.5rem;
+ }
+
+ &.connected:hover {
+ background-color: transparent;
+ }
+ }
+ }
+}
diff --git a/packages/react/src/components/ConnectorCard/index.ts b/packages/react/src/components/ConnectorCard/index.ts
new file mode 100644
index 00000000..53f8b35f
--- /dev/null
+++ b/packages/react/src/components/ConnectorCard/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 './ConnectorCard';
+export type {ConnectorCardProps} from './ConnectorCard';
}
+ />
+ );
+}`}
+/>
+
+## Variants
+
+### Connected
+
+
+
+### Disconnected
+
+
diff --git a/packages/react/src/components/ConnectorCard/ConnectorCard.tsx b/packages/react/src/components/ConnectorCard/ConnectorCard.tsx
new file mode 100644
index 00000000..0163816b
--- /dev/null
+++ b/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