Adds Accordion

docs/docs/components/accordion.mdx

@@ -0,0 +1,238 @@
+# Accordion
+
+### Quick start
+
+Here's a quick start guide to get started with the Accordion component
+
+### Importing Component
+
+```jsx
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionContent,
+  AccordionGroup,
+} from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### Accordion Default
+
+The Accordion makes use of `Accordion`, `AccordionSummary`, and `AccordionContent` components to create an accordion.
+
+It renders a `details` element and `summary` element for the best semantic structure
+
+import "@hover-design/react/dist/style.css";
+
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionContent,
+  AccordionGroup,
+  Switch,
+} from "@hover-design/react";
+
+import AccordionAdvancedExample from "@site/src/components/examples/AccordionAdvancedUsage";
+
+export const AccordionComponent = ({ variant, children }) => (
+  <Accordion variant={variant}>{children}</Accordion>
+);
+
+```jsx
+<Accordion>
+  <AccordionSummary>This is summary</AccordionSummary>
+  <AccordionContent>Hello</AccordionContent>
+</Accordion>
+```
+
+<AccordionComponent>
+  <AccordionSummary>I am Accordion Summary</AccordionSummary>
+  <AccordionContent>I am Accordion Content</AccordionContent>
+</AccordionComponent>
+
+##### Accordion Group
+
+Use this to give required styles for accordion.
+
+```jsx
+<AccordionGroup>
+  <Accordion>
+    <AccordionSummary>Tab Navigate Me!</AccordionSummary>
+    <AccordionContent>
+      <div>I have awesome accessibility</div>
+    </AccordionContent>
+  </Accordion>
+  <Accordion>
+    <AccordionSummary>You will love tabbing me!</AccordionSummary>
+    <AccordionContent>
+      <input type="checkbox" /> I am checkbox 1
+      <input type="checkbox" /> I am checkbox 2
+      <input type="checkbox" /> I am checkbox 3
+    </AccordionContent>
+  </Accordion>
+  <Accordion>
+    <AccordionSummary>This is summary</AccordionSummary>
+    <AccordionContent>
+      <div>Hello</div>
+    </AccordionContent>
+  </Accordion>
+</AccordionGroup>
+```
+
+<AccordionGroup>
+  <Accordion>
+    <AccordionSummary>Tab Navigate Me!</AccordionSummary>
+    <AccordionContent>
+      <div>I have awesome accessibility</div>
+    </AccordionContent>
+  </Accordion>
+  <Accordion>
+    <AccordionSummary>You will love tabbing me!</AccordionSummary>
+    <AccordionContent>
+      <input type="checkbox" /> I am checkbox 1
+      <input type="checkbox" /> I am checkbox 2
+      <input type="checkbox" /> I am checkbox 3
+    </AccordionContent>
+  </Accordion>
+  <Accordion>
+    <AccordionSummary>This is summary</AccordionSummary>
+    <AccordionContent>
+      <div>Hello</div>
+    </AccordionContent>
+  </Accordion>
+</AccordionGroup>
+
+##### Accordion Icon Position
+
+Specify the position of the icon in the accordion summary. Defaults to `right`
+
+```jsx
+<Accordion>
+  <AccordionSummary iconPosition="left">This is summary</AccordionSummary>
+  <AccordionContent>
+    <div>Hello</div>
+  </AccordionContent>
+</Accordion>
+```
+
+<Accordion>
+  <AccordionSummary iconPosition="left">This is summary</AccordionSummary>
+  <AccordionContent>
+    <div>Hello</div>
+  </AccordionContent>
+</Accordion>
+
+##### Accordion Custom Icon
+
+```jsx
+<Accordion>
+  <AccordionSummary iconPosition="left">This is summary</AccordionSummary>
+  <AccordionContent>
+    <div>Hello</div>
+  </AccordionContent>
+</Accordion>
+```
+
+<Accordion>
+  <AccordionSummary Icon={<>☝️</>} iconPosition="right">
+    This is summary
+  </AccordionSummary>
+  <AccordionContent>
+    <div>Hello</div>
+  </AccordionContent>
+</Accordion>
+
+##### Accordion Icon Transition and Animation
+
+```jsx
+<Accordion>
+  <AccordionSummary
+    Icon={<>+</>}
+    iconTransform={"rotate(45deg)"}
+    iconTransition={"transform 0.5s"}
+    iconPosition="right"
+  >
+    This is summary
+  </AccordionSummary>
+  <AccordionContent>
+    <div>Hello</div>
+  </AccordionContent>
+</Accordion>
+```
+
+<Accordion>
+  <AccordionSummary
+    Icon={<>+</>}
+    iconTransform={"rotate(45deg)"}
+    iconTransition={"transform 0.5s"}
+    iconPosition="right"
+  >
+    This is summary
+  </AccordionSummary>
+  <AccordionContent>
+    <div>Hello</div>
+  </AccordionContent>
+</Accordion>
+
+##### Accordion Advanced usage
+
+The accordion allows for really flexible usage
+
+```jsx
+const [open, setOpen] = useState(false);
+.
+.
+<div>
+  <Accordion
+    onToggle={(e) => {
+      setOpen(e.target.open);
+    }}
+    open={open}
+  >
+    <AccordionSummary>This is summary</AccordionSummary>
+    <AccordionContent>Hello</AccordionContent>
+  </Accordion>
+  <Flex gap={"12px"} justifyContent={"space-between"}>
+    <Switch
+      status={open}
+      onChange={() => {
+        setOpen((prevValue) => !prevValue);
+      }}
+    />
+    <p>Accordion is {open ? "open" : "closed"}</p>
+  </Flex>
+</div>
+```
+
+<AccordionAdvancedExample />
+
+### Props Reference
+
+#### Accordion
+
+Accordion also accepts native `<details>` element props. [Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
+
+| Attributes |          Values          | Default Value | Optional ? |
+| :--------- | :----------------------: | :-----------: | ---------: |
+| open       |     `true` , `false`     |    `false`    |        Yes |
+| onToggle   | `React OnToggle Handler` |       -       |        Yes |
+
+#### AccordionSummary
+
+AccordionSummary also accepts native `<summary>` element props. [Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
+
+| Attributes     |      Values      |        Default Value         | Optional ? |
+| :------------- | :--------------: | :--------------------------: | ---------: |
+| Icon           | React.ReactNode  |          undefined           |        Yes |
+| iconPosition   | 'left' , 'right' |           'right'            |        Yes |
+| iconTransform  |      string      |       'rotate(180deg)'       |        Yes |
+| iconTransition |      string      | 'transform 0.2s ease-in-out' |        Yes |
+
+#### AccordionContent
+
+AccordionContent accepts native `<div>` element props. [Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div)
+
+#### AccordionGroup
+
+AccordionGroup accepts native `<div>` element props. [Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div)

docs/docs/components/icon.mdx

@@ -0,0 +1,35 @@
+# Icon
+
+### Quick start
+
+Here's a quick start guide to get started with the Icon component
+
+### Importing Component
+
+```jsx
+import { Icon } from "@hover-design/react";
+```
+
+### Code Snippets and Examples
+
+##### Icon Default
+
+`Icon` renders a `svg` element
+
+import "@hover-design/react/dist/style.css";
+
+import { Icon } from "@hover-design/react";
+
+```jsx
+<Icon height={24} width={24}>
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <polyline points="6 15 12 9 18 15"></polyline>
+</Icon>
+```
+
+<Icon height={24} width={24}>
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <polyline points="6 15 12 9 18 15"></polyline>
+</Icon>
+
+Note Icon is still an experimental component. Its added to make working with icons easy, it does not provide any API as of V1

docs/src/components/examples/AccordionAdvancedUsage.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionSummary,
+  Flex,
+  Switch,
+} from "@hover-design/react";
+const AccordionAdvancedExample = ({}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <Accordion
+        onToggle={(e) => {
+          setOpen(e.target.open);
+        }}
+        open={open}
+      >
+        <AccordionSummary>This is summary</AccordionSummary>
+        <AccordionContent>Hello</AccordionContent>
+      </Accordion>
+      <Flex gap={"12px"} justifyContent={"space-between"}>
+        <Switch
+          status={open}
+          onChange={() => {
+            setOpen((prevValue) => !prevValue);
+          }}
+        />
+        <p>Accordion is {open ? "open" : "closed"}</p>
+      </Flex>
+    </div>
+  );
+};
+export default AccordionAdvancedExample;

examples/vanilla-extract-react/package.json

@@ -12,8 +12,7 @@
     "polished": "^4.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "vite-tsconfig-paths": "^3.3.17",
-    "@hover-design/react": "*"
+    "vite-tsconfig-paths": "^3.3.17"
   },
   "devDependencies": {
     "@types/react": "^18.0.6",

lib/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,23 @@
+import React, { ForwardRefRenderFunction, LegacyRef } from "react";
+
+import { accordionThemeClass, detailsClass } from "./accordion.styles.css";
+import "./accordion.global.styles.css";
+import { IAccordionProps } from "./accordion.types";
+
+const Accordion: ForwardRefRenderFunction<
+  HTMLDetailsElement,
+  IAccordionProps
+> = ({ children, onToggle, className, ...nativeProps }, ref) => {
+  return (
+    <details
+      ref={ref as LegacyRef<HTMLElement> | undefined}
+      onToggle={onToggle}
+      className={`${detailsClass} ${accordionThemeClass} ${className}`}
+      {...nativeProps}
+    >
+      {children}
+    </details>
+  );
+};
+const AccordionWithRef = React.forwardRef(Accordion);
+export { AccordionWithRef as Accordion };

lib/src/components/Accordion/AccordionContent/AccordionContent.tsx

@@ -0,0 +1,17 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { accordionContentClass } from "../accordion.styles.css";
+
+const AccordionContent: ForwardRefRenderFunction<
+  HTMLDivElement,
+  JSX.IntrinsicElements["div"]
+> = ({ children, className, ...nativeProps }) => {
+  return (
+    <div className={`${accordionContentClass} ${className}`} {...nativeProps}>
+      {children}
+    </div>
+  );
+};
+
+const AccordionContentWithRef = React.forwardRef(AccordionContent);
+
+export { AccordionContentWithRef as AccordionContent };

lib/src/components/Accordion/AccordionGroup/AccordionGroup.tsx

@@ -0,0 +1,20 @@
+import React, { ForwardRefRenderFunction } from "react";
+import { accordionGroupClass } from "../accordion.styles.css";
+
+const AccordionGroup: ForwardRefRenderFunction<
+  HTMLDivElement,
+  JSX.IntrinsicElements["div"]
+> = ({ children, className, ...nativeProps }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={`${accordionGroupClass} ${className}`}
+      {...nativeProps}
+    >
+      {children}
+    </div>
+  );
+};
+
+const AccordionGroupWithRef = React.forwardRef(AccordionGroup);
+export { AccordionGroupWithRef as AccordionGroup };