@luscii-healthtech/web-ui 2.1.0 → 2.2.0

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { AccordionItemProps } from "./AccordionItem";
+export interface AccordionProps {
+    dataTestId?: string;
+    items: AccordionItemProps[];
+    className?: string;
+    isCollapsedByDefault?: boolean;
+}
+declare const Accordion: React.VFC<AccordionProps>;
+export default Accordion;

package/dist/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface AccordionItemProps {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+    className?: string;
+    isCollapsedByDefault?: boolean;
+}
+export declare const AccordionItem: React.VFC<AccordionItemProps>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { AccordionItem, AccordionItemProps } from "./AccordionItem";
+
+export interface AccordionProps {
+  dataTestId?: string;
+  items: AccordionItemProps[];
+  className?: string;
+  isCollapsedByDefault?: boolean;
+}
+
+const Accordion: React.VFC<AccordionProps> = ({
+  dataTestId,
+  isCollapsedByDefault = false,
+  items,
+  className,
+}) => {
+  return (
+    <ul data-test-id={dataTestId} className={className}>
+      {items.map?.((item) => (
+        <AccordionItem
+          {...item}
+          key={item.id}
+          isCollapsedByDefault={
+            item.isCollapsedByDefault ?? isCollapsedByDefault
+          }
+        />
+      ))}
+    </ul>
+  );
+};
+
+export default Accordion;

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,50 @@
+import React, { useReducer } from "react";
+import classNames from "classnames";
+
+import { ChevronRightIcon } from "../Icons/ChevronRightIcon";
+import { ChevronDownIcon } from "../Icons/ChevronDownIcon";
+import Text from "../Text/Text";
+
+export interface AccordionItemProps {
+  id: string;
+  title: string;
+  content: React.ReactNode;
+  className?: string;
+  isCollapsedByDefault?: boolean;
+}
+
+export const AccordionItem: React.VFC<AccordionItemProps> = ({
+  id,
+  title,
+  content,
+  isCollapsedByDefault = false,
+}) => {
+  const [isCollapsed, toggleIsCollapsed] = useReducer(
+    (state) => !state,
+    isCollapsedByDefault
+  );
+  const Chevron = isCollapsed ? ChevronRightIcon : ChevronDownIcon;
+
+  return (
+    <li
+      className={"bg-white border-b last:border-b-0 border-slate-100"}
+      data-test-id={id}
+    >
+      <div
+        onClick={toggleIsCollapsed}
+        className={classNames(
+          "p-4 w-full flex flex-row space-x-4 select-none",
+          "cursor-pointer hover:bg-blue-50 transition-colors ease-in-out duration-300",
+          {
+            "border-b border-slate-100": !isCollapsed,
+          }
+        )}
+      >
+        <Chevron className={"text-slate-300"} />
+        <Text text={title} type={"lg-strong"} />
+      </div>
+
+      <div className={classNames({ hidden: isCollapsed })}>{content}</div>
+    </li>
+  );
+};

package/src/types/general.types.ts

@@ -1,5 +1,5 @@
 // This type is used to allow for other props to be injected into the component
-// For instance, for a data-testid or key
+// For instance, for a data-test-id or key
 export interface RestPropped {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;