feat: add collapse & list components

Author: abelflopes

packages/components/all/src/collapse/index.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import styles from "./styles/index.module.scss";
+
+export interface CollapseProps extends React.DetailsHTMLAttributes<HTMLDetailsElement> {
+  header: NonNullable<React.ReactNode>;
+}
+
+export const Collapse = ({
+  header,
+  children,
+  className,
+  ...otherProps
+}: Readonly<CollapseProps>): React.ReactElement => (
+  <details {...otherProps}>
+    <summary className={styles.header}>{header}</summary>
+    {children}
+  </details>
+);

packages/components/all/src/collapse/styles/index.module.scss

@@ -0,0 +1,4 @@
+.header {
+  appearance: auto;
+  cursor: pointer;
+}

packages/components/all/src/index.ts

@@ -9,3 +9,7 @@ export * from "./card";
 export * from "./container";
 
 export * from "./chip";
+
+export * from "./collapse";
+
+export * from "./list";

packages/components/all/src/list/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "./styles/index.module.scss";
+import classNames from "classnames";
+
+export interface ListProps extends Omit<React.HTMLAttributes<HTMLUListElement>, "children"> {
+  skin?: "bordered";
+  items: React.ReactNode[];
+}
+
+export const List = ({
+  skin,
+  items,
+  className,
+  ...otherProps
+}: Readonly<ListProps>): React.ReactElement => (
+  <ul className={classNames(styles.root, skin && styles[skin], className)} {...otherProps}>
+    {items.map((item, key) => (
+      <li key={`${item?.toString()}-${key.toString()}`} className={styles.item}>
+        {item}
+      </li>
+    ))}
+  </ul>
+);

packages/components/all/src/list/styles/index.module.scss

@@ -0,0 +1,24 @@
+@import "@rck/theme";
+
+.root {
+  --border-color: transparent;
+
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: solid 1px var(--border-color);
+  border-radius: get-spacing(2);
+  overflow: hidden;
+}
+
+.item {
+  padding: get-spacing(2);
+
+  &:not(:first-child) {
+    border-top: solid 1px var(--border-color);
+  }
+}
+
+.bordered {
+  --border-color: #{get-color(neutral100)};
+}