Merge pull request #104 from savindi7/feat-add-accordion

feat(react): add `Accordion` component

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

@@ -32,6 +32,7 @@ enum StorybookCategories {
 }
 
 export type Stories =
+  | 'Accordion'
   | 'AccountOverview'
   | 'ActionCard'
   | 'AppBar'
@@ -112,6 +113,9 @@ export type StorybookConfig = Record<
 >;
 
 const StoryConfig: StorybookConfig = {
+  Accordion: {
+    hierarchy: `${StorybookCategories.Surfaces}/Accordion`,
+  },
   AccountOverview: {
     hierarchy: `${StorybookCategories.Patterns}/Account Overview`,
   },

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

@@ -0,0 +1,76 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Accordion from './Accordion.tsx';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import {ChevronDownIcon} from '@oxygen-ui/react-icons';
+
+export const meta = {
+  component: Accordion,
+  title: StoryConfig.Accordion.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => {
+  return (
+    <div>
+      <Accordion {...args}>
+        <AccordionSummary expandIcon={<ChevronDownIcon />} aria-controls="panel1a-content" id="panel1a-header">
+          <Typography>Accordion 1</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion {...args}>
+        <AccordionSummary expandIcon={<ChevronDownIcon />} aria-controls="panel2a-content" id="panel2a-header">
+          <Typography>Accordion 2</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  );
+};
+
+# Accordion
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+The `Accordion` component is used to display a collapsible list of items.
+
+<Canvas>
+  <Story name="Overview">
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Accordion` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Accordion from '@oxygen-ui/react/Accordion';\n`}
+/>

packages/react/src/components/Accordion/Accordion.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 MuiAccordion, {AccordionProps as MuiAccordionProps} from '@mui/material/Accordion';
+import clsx from 'clsx';
+import {FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import './accordion.scss';
+
+export type AccordionProps = MuiAccordionProps;
+
+const COMPONENT_NAME: string = 'Accordion';
+
+const Accordion: FC<AccordionProps> & WithWrapperProps = (props: AccordionProps): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-accordion', className);
+
+  return <MuiAccordion className={classes} {...rest} />;
+};
+
+Accordion.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Accordion.muiName = COMPONENT_NAME;
+
+export default Accordion;

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

@@ -0,0 +1,40 @@
+/**
+ * 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 Accordion from '../Accordion';
+
+describe('Accordion', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(
+      <Accordion>
+        <p>test accordion</p>
+      </Accordion>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(
+      <Accordion>
+        <p>test accordion</p>
+      </Accordion>,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Accordion should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters oxygen-accordion css-1qe2qtl-MuiPaper-root-MuiAccordion-root"
+    >
+      <p>
+        test accordion
+      </p>
+      <div
+        class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
+        style="min-height: 0px;"
+      >
+        <div
+          class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+        >
+          <div
+            class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+          >
+            <div
+              class="MuiAccordion-region"
+              role="region"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;

packages/react/src/components/Accordion/accordion.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-accordion {
+  /** Add Styles */
+}

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