@ably/ui 13.3.0 → 14.0.0-dev.3f64b93

package/reset/styles.css

@@ -1,477 +1,2 @@
-@layer base {
-  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-  /* Document
-   ========================================================================== */
-
-  /**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-  html {
-    line-height: 1.15; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-  }
-
-  /* Sections
-   ========================================================================== */
-
-  /**
- * Remove the margin in all browsers.
- */
-
-  body {
-    margin: 0;
-  }
-
-  /**
- * Render the `main` element consistently in IE.
- */
-
-  main {
-    display: block;
-  }
-
-  /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-  h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-  }
-
-  /* Grouping content
-   ========================================================================== */
-
-  /**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-  hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
-  }
-
-  /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-  pre {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /* Text-level semantics
-   ========================================================================== */
-
-  /**
- * Remove the gray background on active links in IE 10.
- */
-
-  a {
-    background-color: transparent;
-  }
-
-  /**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-  abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
-  }
-
-  /**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-  code,
-  kbd,
-  samp {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
-  }
-
-  /**
- * Add the correct font size in all browsers.
- */
-
-  small {
-    font-size: 80%;
-  }
-
-  /**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /* Embedded content
-   ========================================================================== */
-
-  /**
- * Remove the border on images inside links in IE 10.
- */
-
-  img {
-    border-style: none;
-  }
-
-  /* Forms
-   ========================================================================== */
-
-  /**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-    margin: 0; /* 2 */
-  }
-
-  /**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-  button,
-  input {
-    /* 1 */
-    overflow: visible;
-  }
-
-  /**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-  button,
-  select {
-    /* 1 */
-    text-transform: none;
-  }
-
-  /**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-  }
-
-  /**
- * Remove the inner border and padding in Firefox.
- */
-
-  button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-
-  /**
- * Restore the focus styles unset by the previous rule.
- */
-
-  button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-
-  /**
- * Correct the padding in Firefox.
- */
-
-  fieldset {
-    padding: 0.35em 0.75em 0.625em;
-  }
-
-  /**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-  legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
-  }
-
-  /**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-  progress {
-    vertical-align: baseline;
-  }
-
-  /**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-  textarea {
-    overflow: auto;
-  }
-
-  /**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-  [type="checkbox"],
-  [type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-  }
-
-  /**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  /**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-  [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
-  }
-
-  /**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-  [type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-
-  /**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
-  }
-
-  /* Interactive
-   ========================================================================== */
-
-  /*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-  details {
-    display: block;
-  }
-
-  /*
- * Add the correct display in all browsers.
- */
-
-  summary {
-    display: list-item;
-  }
-
-  /* Misc
-   ========================================================================== */
-
-  /**
- * Add the correct display in IE 10+.
- */
-
-  template {
-    display: none;
-  }
-
-  /**
- * Add the correct display in IE 10.
- */
-
-  [hidden] {
-    display: none;
-  }
-}
-/* Reset based on https://unpkg.com/tailwindcss@1.9.6/dist/base.css */
-@layer base {
-  html {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-      "Noto Color Emoji";
-    line-height: 1.5;
-  }
-
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-
-  ol,
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  pre,
-  code,
-  kbd,
-  samp {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-      monospace;
-  }
-
-  button {
-    background-color: transparent;
-    background-image: none;
-  }
-
-  button:focus {
-    outline: 1px dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-  }
-
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-
-  *,
-  ::before,
-  ::after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: #e2e8f0;
-  }
-
-  hr {
-    border-top-width: 1px;
-  }
-
-  img {
-    border-style: solid;
-  }
-
-  textarea {
-    resize: vertical;
-  }
-
-  input::-moz-placeholder, textarea::-moz-placeholder {
-    color: #a0aec0;
-  }
-
-  input::placeholder,
-  textarea::placeholder {
-    color: #a0aec0;
-  }
-
-  input::-webkit-search-cancel-button {
-    display: none;
-  }
-
-  button,
-  [role="button"] {
-    cursor: pointer;
-  }
-
-  table {
-    border-collapse: collapse;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  svg {
-    fill: currentColor;
-  }
-}
-
+@import "./styles/normalize.css";
+@import "./styles/reset.css";

package/src/core/Accordion/Accordion.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import Accordion, { AccordionProps } from "../Accordion";
+
+export default {
+  title: "Components/Accordion",
+  component: Accordion,
+  args: {
+    data: [
+      {
+        name: "Item 1",
+        content: "Content 1",
+      },
+      {
+        name: "Item 2",
+        content: "Content 2",
+      },
+      {
+        name: "Item 3",
+        content: "Content 3",
+      },
+      {
+        name: "Item 4",
+        content: "Content 4",
+      },
+    ],
+    autoClose: false,
+    topBorder: false,
+    bottomBorder: false,
+    arrowIcon: false,
+  },
+};
+
+export const Default = {};
+
+export const AutoClose = {
+  render: (args: AccordionProps) => (
+    <Accordion data={args.data} autoClose={true} />
+  ),
+};

package/src/core/Accordion.tsx

@@ -0,0 +1,147 @@
+import React, { useState, ReactNode, JSX } from "react";
+import Icon from "./Icon";
+
+type AccordionData = {
+  name: string;
+  content: ReactNode;
+};
+
+type AccordionRowProps = {
+  bottomBorder?: boolean;
+  topBorder?: boolean;
+  active: boolean;
+  last: boolean;
+  name: string;
+  index;
+  children: ReactNode;
+  arrowIcon?: boolean;
+  setActiveIndex: (index: number) => void;
+};
+
+export type AccordionProps = {
+  data: AccordionData[];
+  arrowIcon?: boolean;
+  topBorder?: boolean;
+  bottomBorder?: boolean;
+  id?: string;
+  autoClose?: boolean;
+};
+
+const AccordionRow = ({
+  name,
+  children,
+  index,
+  setActiveIndex,
+  active,
+  topBorder,
+  bottomBorder,
+  last,
+  arrowIcon,
+}: AccordionRowProps) => {
+  let iconActive: JSX.Element, iconInactive: JSX.Element;
+  const handleSetIndex = () => {
+    setActiveIndex(index);
+  };
+
+  if (arrowIcon) {
+    iconActive = (
+      <Icon
+        name="icon-gui-disclosure-arrow"
+        color="text-dark-grey"
+        size="1.5rem"
+        additionalCSS="-rotate-90"
+      />
+    );
+    iconInactive = (
+      <Icon
+        name="icon-gui-disclosure-arrow"
+        color="text-dark-grey"
+        size="1.5rem"
+        additionalCSS="rotate-90"
+      />
+    );
+  } else {
+    iconActive = (
+      <Icon name="icon-gui-minus" color="text-dark-grey" size="1.5rem" />
+    );
+    iconInactive = (
+      <Icon name="icon-gui-plus" color="text-dark-grey" size="1.5rem" />
+    );
+  }
+
+  return (
+    <div
+      className={`border-mid-grey ${last && !bottomBorder ? "" : "border-b"} ${
+        topBorder ? "border-t" : ""
+      }`}
+    >
+      <button
+        type="button"
+        onClick={handleSetIndex}
+        className={`flex w-full px-0 focus:outline-none py-20`}
+      >
+        <span className="ui-text-p1 !font-bold text-left mr-8">{name}</span>
+        <span className="ml-auto">{active ? iconActive : iconInactive}</span>
+      </button>
+
+      <section
+        className="ui-text-p2 transition-all overflow-hidden"
+        style={{
+          maxHeight: active ? "500px" : "0",
+          paddingBottom: active ? "1.5rem" : "0",
+        }}
+      >
+        {children}
+      </section>
+    </div>
+  );
+};
+
+const Accordion = ({
+  data,
+  id = "id-accordion",
+  topBorder,
+  bottomBorder,
+  arrowIcon,
+  autoClose,
+}: AccordionProps) => {
+  const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
+
+  const handleSetIndex = (index: number) => {
+    const currentIndexIsActive = activeIndexes.includes(index);
+
+    if (autoClose) {
+      setActiveIndexes(currentIndexIsActive ? [] : [index]);
+    } else {
+      setActiveIndexes(
+        currentIndexIsActive
+          ? activeIndexes.filter((i) => i !== index)
+          : [...activeIndexes, index]
+      );
+    }
+  };
+
+  return (
+    <div className="ui-grid-mx max-w-screen-sm sm:mx-auto" id={id}>
+      {data.map((item, currentIndex) => {
+        return (
+          <AccordionRow
+            key={item.name}
+            name={item.name}
+            arrowIcon={arrowIcon}
+            index={currentIndex}
+            last={data.length === currentIndex + 1}
+            topBorder={topBorder && currentIndex === 0}
+            bottomBorder={bottomBorder && data.length === currentIndex + 1}
+            active={activeIndexes.includes(currentIndex)}
+            setActiveIndex={handleSetIndex}
+          >
+            {item.content}
+          </AccordionRow>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Accordion;