Merge pull request #46 from thivi/main

feat(react): add Breadcrumbs component

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

@@ -37,6 +37,7 @@ export type Stories =
   | 'AppShell'
   | 'Avatar'
   | 'Badge'
+  | 'Breadcrumbs'
   | 'Box'
   | 'Button'
   | 'CircularProgress'
@@ -117,6 +118,9 @@ const StoryConfig: StorybookConfig = {
   Box: {
     hierarchy: `${StorybookCategories.Layout}/Box`,
   },
+  Breadcrumbs: {
+    hierarchy: `${StorybookCategories.Navigation}/Breadcrumbs`,
+  },
   Button: {
     hierarchy: `${StorybookCategories.Inputs}/Button`,
   },

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

@@ -0,0 +1,61 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import Breadcrumbs from './Breadcrumbs.tsx';
+import Link from "../Link";
+import Typography from "../Typography";
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+
+export const meta = {
+  component: Breadcrumbs,
+  title: StoryConfig.Breadcrumbs.hierarchy
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Breadcrumbs {...args} />;
+
+# Breadcrumbs
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Breadcrumbs can be used to show a page's location within a hierarchy and allow users to navigate to the ancestor pages.
+
+<Canvas>
+  <Story name="Overview" args={{
+    children:[
+        <Link underline="hover" color="inherit" href="#">Home</Link>,
+        <Link underline="hover" color="inherit" href="#">Security</Link>,
+        <Typography color="text.primary">Password</Typography>
+      ]
+  }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Breadcrumbs` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Breadcrumbs from '@oxygen-ui/react/Breadcrumbs';\n
+function Demo() {
+  return (
+    <Breadcrumbs>
+      <Link underline="hover" color="inherit" href="/">Home</Link>
+      <Link underline="hover" color="inherit" href="/">Security</Link>
+      <Typography color="text.primary">Password</Typography>
+    </Breadcrumbs>
+  );
+}`}
+/>

packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 MuiBreadcrumbs, {BreadcrumbsProps as MuiBreadcrumbsProps} from '@mui/material/Breadcrumbs';
+import clsx from 'clsx';
+import {FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import './breadcrumbs.scss';
+
+export type BreadcrumbsProps = MuiBreadcrumbsProps;
+
+const COMPONENT_NAME: string = 'Breadcrumbs';
+
+const Breadcrumbs: FC<BreadcrumbsProps> & WithWrapperProps = (props: BreadcrumbsProps): ReactElement => {
+  const {className, children, ...rest} = props;
+
+  const classes: string = clsx('oxygen-breadcrumbs', className);
+
+  return (
+    <MuiBreadcrumbs aria-label="breadcrumbs" className={classes} {...rest}>
+      {children}
+    </MuiBreadcrumbs>
+  );
+};
+
+Breadcrumbs.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Breadcrumbs.muiName = 'Breadcrumbs';
+Breadcrumbs.defaultProps = {};
+
+export default Breadcrumbs;

packages/react/src/components/Breadcrumbs/__tests__/Breadcrumbs.test.tsx

@@ -0,0 +1,41 @@
+/**
+ * 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 Link from '../../Link';
+import Breadcrumbs from '../Breadcrumbs';
+
+describe('Breadcrumbs', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(
+      <Breadcrumbs>
+        <Link href="/">Home</Link>
+      </Breadcrumbs>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(
+      <Breadcrumbs>
+        <Link href="/">Home</Link>
+      </Breadcrumbs>,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});

packages/react/src/components/Breadcrumbs/__tests__/__snapshots__/Breadcrumbs.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumbs should match the snapshot 1`] = `
+<body>
+  <div>
+    <nav
+      aria-label="breadcrumbs"
+      class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root oxygen-breadcrumbs css-xf9570-MuiTypography-root-MuiBreadcrumbs-root"
+    >
+      <ol
+        class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
+      >
+        <li
+          class="MuiBreadcrumbs-li"
+        >
+          <a
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover oxygen-link css-1kwgxwv-MuiTypography-root-MuiLink-root"
+            href="/"
+          >
+            Home
+          </a>
+        </li>
+      </ol>
+    </nav>
+  </div>
+</body>
+`;

packages/react/src/components/Breadcrumbs/breadcrumbs.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-breadcrumbs {
+  /** Add styles */
+}

packages/react/src/components/Breadcrumbs/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 as Breadcrumbs} from './Breadcrumbs';
+export type {BreadcrumbsProps} from './Breadcrumbs';