@ably/ui 13.3.0 → 14.0.0-dev.1939f45

package/src/pages/Typography.mdx

@@ -0,0 +1,206 @@
+import { Unstyled, Meta } from "@storybook/blocks";
+
+<Meta title="Brand/Typography" />
+
+<Unstyled>
+  <section id="section-typography" className="mb-64">
+    <h1 className="ui-text-h1 mb-32">Typography</h1>
+    <p className="ui-text-p1 mb-32">
+      Type definitions do not include margin as it can be contextual. Figma
+      and the below list include recommended margins.
+    </p>
+    <p className="ui-text-p1 mb-32">
+      The below list is created with ui-text-* helpers which include
+      properties beyond the standard{" "}
+      <code className="ui-inline-code">font-size</code> and{" "}
+      <code className="ui-inline-code">line-height</code> that text-*
+      includes.
+    </p>
+    <div className="mb-40">
+      <hr className="m-0" />
+      <p className="ui-text-title mt-64 mb-40 xs:mt-80 xs:mb-32 xl:mt-96 xl:mb-32">
+        Title - this is a title
+      </p>
+      <hr className="m-0" />
+      <p className="ui-text-h1 mb-40">H1 - this is an h1</p>
+      <hr className="m-0" />
+      <p className="ui-text-h2 mb-36">H2 - this is an h2</p>
+      <hr className="m-0" />
+      <p className="ui-text-h3 mb-24">H3 - this is an h3</p>
+      <hr className="m-0" />
+      <p className="ui-text-h4 mb-16">H4 - this is an h4</p>
+      <hr className="m-0" />
+      <p className="ui-text-h5 mb-16">H5 - this is an h5</p>
+      <hr className="m-0" />
+      <p className="ui-text-p1 mb-32">Paragraph 1</p>
+      <hr className="m-0" />
+      <p className="ui-text-p1 font-bold mb-32">Paragraph 1 (strong)</p>
+      <hr className="m-0" />
+      <p className="ui-text-p2 mb-24">Paragraph 2</p>
+      <hr className="m-0" />
+      <p className="ui-text-p2 font-bold mb-24">Paragraph 2 (strong)</p>
+      <hr className="m-0" />
+      <p className="ui-text-p3 mb-24">Paragraph 3</p>
+      <hr className="m-0" />
+      <p className="ui-text-p3 font-bold mb-24">Paragraph 3 (strong)</p>
+      <hr className="m-0" />
+      <p className="ui-figcaption mb-16">This is a figure caption style</p>
+      <hr className="m-0" />
+
+      <p className="ui-text-quote mb-24">Quote</p>
+      <hr className="m-0" />
+      <p className="ui-text-sub-header mb-40 xs:mb-48">Sub-header</p>
+      <hr className="m-0" />
+      <p className="ui-text-overline1 mb-12">Overline 1</p>
+      <hr className="m-0" />
+      <p className="ui-text-overline2 mb-8">Overline 2</p>
+      <hr className="m-0" />
+      <p className="ui-text-menu1">Menu label 1</p>
+      <hr className="m-0" />
+      <p className="ui-text-menu1 font-bold">Menu label 1 (strong)</p>
+      <hr className="m-0" />
+      <p className="ui-text-menu2">Menu label 2</p>
+      <hr className="m-0" />
+      <p className="ui-text-menu2 font-bold">Menu label 2 (strong)</p>
+      <hr className="m-0" />
+      <p className="ui-text-menu3">Menu label 3</p>
+      <hr className="m-0" />
+      <p className="ui-text-menu3 font-bold">Menu label 3 (strong)</p>
+      <hr className="m-0" />
+      <p className="ui-text-code">Code 1 font for code blocks</p>
+      <hr className="m-0" />
+      <p className="ui-text-code2">Code 2 font for code blocks</p>
+      <hr className="m-0" />
+      <p className="ui-text-p1 mt-12 mb-12">
+        Text, then styling for{" "}
+        <span className="ui-text-code-inline">inline code</span>, within
+        paragraphs.
+      </p>
+      <hr className="m-0" />
+
+    </div>
+
+    {" "}
+
+    {" "}
+
+    <div className="mb-40">
+      <h3 className="ui-text-h2 mb-24">Links</h3>
+      <p className="ui-text-p1 mb-24">
+        The default text color is inherited from the surrounding text.
+      </p>
+      <div className="flex flex-wrap">
+        <div className="p-16 mb-16 mr-16 border rounded">
+          <p className="ui-text-p1 text-charcoal-grey">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
+            odio. Class aptent taciti sociosqu ad litora torquent per conubia
+            nostra, <a href="/xyz" className="ui-link"> per inceptos himenaeos</a>.
+          </p>
+        </div>
+        <div className="p-16 mb-16 mr-16 border rounded bg-cool-black">
+          <p className="ui-text-p1 text-white">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
+            odio. Class aptent taciti sociosqu ad litora torquent per conubia
+            nostra, <a href="/123" className="ui-link"> per inceptos himenaeos</a>.
+          </p>
+        </div>
+        <div className="p-16 mb-16 mr-16 border rounded bg-jazzy-pink">
+          <p className="ui-text-p1 text-charcoal-grey">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
+            odio. Class aptent taciti sociosqu ad litora torquent per conubia
+            nostra <a href="/123" className="ui-link-neutral">per inceptos himenaeos</a>.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div className="mb-40">
+      <h3 className="ui-text-h2 mb-24">Lists</h3>
+      <p className="ui-text-p1 mb-24">
+        Note that lists support having li items and li items with children,
+        while keeping the same margin (in these examples, the ordered list has
+        paragraphs).
+      </p>
+
+      <div className="mb-40">
+        <h4 className="ui-text-h3 mb-16">Unordered</h4>
+        <p className="ui-text-p1">
+          This is the preceding paragraph sed nisl id lectus scelerisque
+          facilisis consectetur eget nisl. Morbi scelerisque felis vel
+          ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
+          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
+          nulla pellentesque sapien.
+        </p>
+        <ul className="ui-unordered-list">
+          <li>
+            Pellentesque consequat elit eget tristique sagittis. Etiam et erat
+            et lorem elementum commodo. Aenean congue diam a nibh accumsan
+            tincidunt.
+            <ul>
+              <li>
+                In id ante quis quam sodales auctor in a ante. Maecenas
+                faucibus, diam sit amet sollicitudin pellentesque, est nulla
+                pellentesque sapien.
+                <ul>
+                  <li>Etiam et erat et lorem elementum commodo.</li>
+                  <li>Etiam et erat et lorem elementum commodo.</li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li>Etiam et erat et lorem elementum commodo.</li>
+        </ul>
+        <p className="ui-text-p1 mb-24">
+          This is the following paragraph sed nisl id lectus scelerisque
+          facilisis consectetur eget nisl. Morbi scelerisque felis vel
+          ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
+          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
+          nulla pellentesque sapien.
+        </p>
+      </div>
+
+      <div className="mb-40">
+        <h4 className="ui-text-h3 mb-16">Ordered</h4>
+        <p className="ui-text-p1">
+          This is the preceding paragraph sed nisl id lectus scelerisque
+          facilisis consectetur eget nisl. Morbi scelerisque felis vel
+          ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
+          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
+          nulla pellentesque sapien.
+        </p>
+        <ol className="ui-ordered-list">
+          <li>
+            <p>
+              Pellentesque consequat elit eget tristique sagittis. Etiam et
+              erat et lorem elementum commodo. Aenean congue diam a nibh
+              accumsan tincidunt.
+            </p>
+            <ol>
+              <li>
+                <p>
+                  In id ante quis quam sodales auctor in a ante. Maecenas
+                  faucibus, diam sit amet sollicitudin pellentesque, est nulla
+                  pellentesque sapien.
+                </p>
+                <ol>
+                  <li>
+                    <p>Etiam et erat et lorem elementum commodo.</p>
+                  </li>
+                </ol>
+              </li>
+            </ol>
+          </li>
+        </ol>
+        <p className="ui-text-p1 mb-24">
+          This is the following paragraph sed nisl id lectus scelerisque
+          facilisis consectetur eget nisl. Morbi scelerisque felis vel
+          ullamcorper viverra. In id ante quis quam sodales auctor in a ante.
+          Maecenas faucibus, diam sit amet sollicitudin pellentesque, est
+          nulla pellentesque sapien.
+        </p>
+      </div>
+
+    </div>
+
+  </section>
+</Unstyled>

package/src/pages/utils.ts

@@ -0,0 +1,70 @@
+export const colours = [
+  {
+    name: "Primary",
+    colours: [
+      { bg: "bg-cool-black", name: "Cool Black", hex: "#03020D" },
+      { bg: "bg-active-orange", name: "Active Orange", hex: "#FF5416" },
+      { bg: "bg-white", name: "White", hex: "#FFFFFF" },
+    ],
+  },
+  {
+    name: "Secondary",
+    colours: [
+      { bg: "bg-electric-cyan", name: "Electric Cyan", hex: "#4AD4FF" },
+      { bg: "bg-zingy-green", name: "Zingy Green", hex: "#08FF13" },
+      { bg: "bg-bright-red", name: "Bright Red", hex: "#FE372B" },
+      { bg: "bg-jazzy-pink", name: "Jazzy Pink", hex: "#FF17D2" },
+    ],
+  },
+  {
+    name: "Neutrals",
+    colours: [
+      { bg: "bg-extra-light-grey", name: "Extra Light Grey", hex: "#F8FAFC" },
+      { bg: "bg-light-grey", name: "Light Grey", hex: "#F4F8FB" },
+      { bg: "bg-mid-grey", name: "Mid Grey", hex: "#C6CED9" },
+      { bg: "bg-dark-grey", name: "Dark Grey", hex: "#667085" },
+      { bg: "bg-charcoal-grey", name: "Charcoal Grey", hex: "#2B303B" },
+      { bg: "bg-neutral-500", name: "Neutral 500", hex: "#C6CED9" },
+      { bg: "bg-neutral-900", name: "Neutral 900", hex: "#39414E" },
+    ],
+  },
+  {
+    name: "GUI",
+    colours: [
+      { bg: "bg-gui-default", name: "Default (Light)", hex: "#006EDC" },
+      { bg: "bg-gui-hover", name: "Hover (Light)", hex: "#0862B9" },
+      { bg: "bg-gui-active", name: "Active (Light)", hex: "#074095" },
+      { bg: "bg-gui-default-dark", name: "Default (Dark)", hex: "#4DA6FF" },
+      { bg: "bg-gui-hover-dark", name: "Hover (Dark)", hex: "#2894FF" },
+      { bg: "bg-gui-active-dark", name: "Active (Dark)", hex: "#0080FF" },
+      { bg: "bg-gui-blue-visited", name: "Visited", hex: "#4887c2" },
+      { bg: "bg-gui-focus", name: "Focus", hex: "#80B9F2" },
+      { bg: "bg-gui-focus-outline", name: "Focus Outline", hex: "#80B9F2" },
+      { bg: "bg-gui-unavailable", name: "Unavailable", hex: "#a8a8a8" },
+      { bg: "bg-gui-success", name: "Success", hex: "#11CB24" },
+      { bg: "bg-gui-error", name: "Error", hex: "#FB0C0C" },
+    ],
+  },
+];
+
+export const formsHtml = `
+<div class="ui-checkbox-p1">
+  <input
+    data-ui-checkbox-native
+    type="checkbox"
+    id="checkbox"
+    name="checkbox"
+    value="yes"
+    class="ui-checkbox-input" />
+
+  <div
+    data-ui-checkbox-styled
+    class="ui-checkbox-styled">
+    <svg class="ui-checkbox-styled-tick">
+      <use xlink:href="#sprite-icon-gui-tick"></use>
+    </svg>
+  </div>
+
+  <label for="checkbox-example" class="ui-checkbox-label-p1">Yes</label>
+</div>
+`;

package/tailwind.config.js

@@ -1,11 +1,5 @@
 module.exports = {
-  content: [
-    "./src/**/*.html.erb",
-    "./src/**/*.jsx",
-    "./src/**/*.js",
-    "./src/**/*.json",
-    "./src/**/*.css",
-  ],
+  content: ["./src/**/*.{js,json,css,ts,tsx,mdx}"],
   safelist: [
     "w-1/2",
     "w-1/3",

package/tailwind.extend.js

@@ -6,7 +6,7 @@ const ablyUiConfigPath = path.dirname(require.resolve("./tailwind.config.js"));
 const ablyUItailwindConfig = (extend) => {
   // Create absolute paths to templates in AblyUI
   const addPurgeContentPaths = () => {
-    const paths = ["*.html.erb", "*.jsx", "*.js", "*.json"].map((fileGlob) =>
+    const paths = ["*.html.erb", "*", "*.js", "*.json"].map((fileGlob) =>
       path.join(ablyUiConfigPath, "src", "**", fileGlob)
     );
 

package/core/.gitignore

@@ -1 +0,0 @@
-*