+ {i + 1} +
+ ))} +
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+
+
+
+ var
+
+ ably =
+
+ new
+
+
+ Ably
+
+ .
+
+ Realtime
+
+ (
+
+ '1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'
+
+ );
+
+ var
+
+ channel = ably.
+
+ channels
+
+ .
+
+ get
+
+ (
+
+ 'web-pal'
+
+ );
+
+ // Subscribe to messages on channel
+
+ channel.
+
+ subscribe
+
+ (
+
+ 'greeting'
+
+ ,
+
+ function
+
+ (
+
+ message
+
+ ) {
+
+ alert
+
+ (message.
+
+ data
+
+ );
+});
+
+
+
@@ -82,7 +180,7 @@ channel.subscribe(
`;
exports[`JS Components/Code Javascript smoke-test 1`] = `
-
@@ -157,7 +255,7 @@ exports[`JS Components/Code Javascript smoke-test 1`] = `
`;
exports[`JS Components/Code Kotlin smoke-test 1`] = `
-
@@ -212,7 +310,7 @@ exports[`JS Components/Code Kotlin smoke-test 1`] = `
`;
exports[`JS Components/Code Swift smoke-test 1`] = `
-
diff --git a/src/core/Icon.tsx b/src/core/Icon.tsx
index 4a46248e4..ca178de34 100644
--- a/src/core/Icon.tsx
+++ b/src/core/Icon.tsx
@@ -10,7 +10,7 @@ type IconProps = {
};
const convertTailwindClassToVar = (className: string) =>
- className.replace(/text-([a-z0-9-]+)/gi, "var(--color-$1)");
+ className.replace(/(text|bg)-([a-z0-9-]+)/gi, "var(--color-$2)");
const Icon = ({
name,
diff --git a/src/core/ProductTile.tsx b/src/core/ProductTile.tsx
index 05ff431c7..e0653de03 100644
--- a/src/core/ProductTile.tsx
+++ b/src/core/ProductTile.tsx
@@ -7,14 +7,23 @@ type ProductTileProps = {
name: ProductName;
selected?: boolean;
currentPage?: boolean;
+ className?: string;
+ onClick?: () => void;
};
-const ProductTile = ({ name, selected, currentPage }: ProductTileProps) => {
+const ProductTile = ({
+ name,
+ selected,
+ currentPage,
+ className,
+ onClick,
+}: ProductTileProps) => {
const { icon, label, description, link, unavailable } = products[name] ?? {};
return (
{icon ? alert("yo congrats on the click")}
+ />
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story:
+ "`className` is overridden to change the background color and cursor. `onClick` is also overridden to show an alert on click.",
+ },
+ },
+ },
+};
diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
index dd4d9212b..0fc3156d3 100644
--- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
+++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
@@ -1,8 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smoke-test 1`] = `
+
+
+
+
+
+ Ably
+
+
+ PubSub
+
+
+
+
+ Low-level APIs to build any realtime experience
+
+
+`;
+
exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-
+
-
+
-
+
-
+
-
+
-
+
@@ -132,7 +156,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/src/core/styles/Colors.stories.tsx b/src/core/styles/Colors.stories.tsx
new file mode 100644
index 000000000..f4d0f24d0
--- /dev/null
+++ b/src/core/styles/Colors.stories.tsx
@@ -0,0 +1,189 @@
+import React from "react";
+
+export default {
+ title: "CSS/Colors",
+};
+
+const neutralColors = [
+ "bg-neutral-000",
+ "bg-neutral-100",
+ "bg-neutral-200",
+ "bg-neutral-300",
+ "bg-neutral-400",
+ "bg-neutral-500",
+ "bg-neutral-600",
+ "bg-neutral-700",
+ "bg-neutral-800",
+ "bg-neutral-900",
+ "bg-neutral-1000",
+ "bg-neutral-1100",
+ "bg-neutral-1200",
+ "bg-neutral-1300",
+];
+
+const orangeColors = [
+ "bg-orange-100",
+ "bg-orange-200",
+ "bg-orange-300",
+ "bg-orange-400",
+ "bg-orange-500",
+ "bg-orange-600",
+ "bg-orange-700",
+ "bg-orange-800",
+ "bg-orange-900",
+ "bg-orange-1000",
+ "bg-orange-1100",
+];
+
+const secondaryColors = [
+ "bg-yellow-100",
+ "bg-yellow-200",
+ "bg-yellow-300",
+ "bg-yellow-400",
+ "bg-yellow-500",
+ "bg-yellow-600",
+ "bg-yellow-700",
+ "bg-yellow-800",
+ "bg-yellow-900",
+ "bg-green-100",
+ "bg-green-200",
+ "bg-green-300",
+ "bg-green-400",
+ "bg-green-500",
+ "bg-green-600",
+ "bg-green-700",
+ "bg-green-800",
+ "bg-green-900",
+ "bg-blue-100",
+ "bg-blue-200",
+ "bg-blue-300",
+ "bg-blue-400",
+ "bg-blue-500",
+ "bg-blue-600",
+ "bg-blue-700",
+ "bg-blue-800",
+ "bg-blue-900",
+ "bg-violet-100",
+ "bg-violet-200",
+ "bg-violet-300",
+ "bg-violet-400",
+ "bg-violet-500",
+ "bg-violet-600",
+ "bg-violet-700",
+ "bg-violet-800",
+ "bg-violet-900",
+ "bg-pink-100",
+ "bg-pink-200",
+ "bg-pink-300",
+ "bg-pink-400",
+ "bg-pink-500",
+ "bg-pink-600",
+ "bg-pink-700",
+ "bg-pink-800",
+ "bg-pink-900",
+];
+
+const guiColors = [
+ "bg-gui-blue-default-light",
+ "bg-gui-blue-hover-light",
+ "bg-gui-blue-active-light",
+ "bg-gui-blue-default-dark",
+ "bg-gui-blue-hover-dark",
+ "bg-gui-blue-active-dark",
+ "bg-gui-blue-focus",
+ "bg-gui-unavailable",
+ "bg-gui-success-green",
+ "bg-gui-error-red",
+ "bg-gui-focus",
+ "bg-gui-focus-outline",
+ "bg-gui-visited",
+];
+
+const colorSet = (colors) =>
+ colors.map((color) => (
+
+
+
+
+ {color.replace("bg-", "")}
+
+
+ {varToValues(color)[0]}
+
+
+ {varToValues(color)[1]}
+
+
+
+ ));
+
+const varToValues = (color: string) => {
+ // Convert the computed color value in the page to a hex string
+ const hex = getComputedStyle(document.body).getPropertyValue(
+ color.replace("bg-", "--color-"),
+ );
+
+ // Parse the hex string into its RGB components
+ const bigint = parseInt(hex.replace(/^#/, ""), 16);
+ const r = (bigint >> 16) & 255;
+ const g = (bigint >> 8) & 255;
+ const b = bigint & 255;
+
+ return [hex, `rgb(${r}, ${g}, ${b})`];
+};
+
+export const NeutralColors = {
+ render: () => (
+ {colorSet(neutralColors)}
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: "Example usage: `.text-neutral-1000`, `.bg-neutral-1000`",
+ },
+ },
+ },
+};
+
+export const OrangeColors = {
+ render: () => (
+ {colorSet(orangeColors)}
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: "Example usage: `.text-orange-600`, `.bg-orange-600`",
+ },
+ },
+ },
+};
+
+export const SecondaryColors = {
+ render: () => (
+ {colorSet(secondaryColors)}
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: "Example usage: `.text-green-1000`, `.bg-green-1000`",
+ },
+ },
+ },
+};
+
+export const GUIColors = {
+ render: () => (
+ {colorSet(guiColors)}
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story:
+ "Example usage: `.text-gui-blue-default`, `.bg-gui-blue-default`",
+ },
+ },
+ },
+};
diff --git a/src/core/styles/__snapshots__/Colors.stories.tsx.snap b/src/core/styles/__snapshots__/Colors.stories.tsx.snap
new file mode 100644
index 000000000..6037c64bf
--- /dev/null
+++ b/src/core/styles/__snapshots__/Colors.stories.tsx.snap
@@ -0,0 +1,1266 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSS/Colors GUIColors smoke-test 1`] = `
+
+
+
+
+
+
+ gui-blue-default-light
+
+
+ #006edc
+
+
+ rgb(0, 110, 220)
+
+
+
+
+
+
+
+
+ gui-blue-hover-light
+
+
+ #0862b9
+
+
+ rgb(8, 98, 185)
+
+
+
+
+
+
+
+
+ gui-blue-active-light
+
+
+ #074095
+
+
+ rgb(7, 64, 149)
+
+
+
+
+
+
+
+
+ gui-blue-default-dark
+
+
+ #4da6ff
+
+
+ rgb(77, 166, 255)
+
+
+
+
+
+
+
+
+ gui-blue-hover-dark
+
+
+ #2894ff
+
+
+ rgb(40, 148, 255)
+
+
+
+
+
+
+
+
+ gui-blue-active-dark
+
+
+ #0080ff
+
+
+ rgb(0, 128, 255)
+
+
+
+
+
+
+
+
+ gui-blue-focus
+
+
+ #80b9f2
+
+
+ rgb(128, 185, 242)
+
+
+
+
+
+
+
+
+ gui-unavailable
+
+
+ #a8a8a8
+
+
+ rgb(168, 168, 168)
+
+
+
+
+
+
+
+
+ gui-success-green
+
+
+ #11cb24
+
+
+ rgb(17, 203, 36)
+
+
+
+
+
+
+
+
+ gui-error-red
+
+
+ #fb0c0c
+
+
+ rgb(251, 12, 12)
+
+
+
+
+
+
+
+
+ gui-focus
+
+
+ #80b9f2
+
+
+ rgb(128, 185, 242)
+
+
+
+
+
+
+
+
+ gui-focus-outline
+
+
+ #80b9f2
+
+
+ rgb(128, 185, 242)
+
+
+
+
+
+
+
+
+ gui-visited
+
+
+ #4887c2
+
+
+ rgb(72, 135, 194)
+
+
+
+
+`;
+
+exports[`CSS/Colors NeutralColors smoke-test 1`] = `
+
+
+
+
+
+
+ neutral-000
+
+
+ #ffffff
+
+
+ rgb(255, 255, 255)
+
+
+
+
+
+
+
+
+ neutral-100
+
+
+ #f8fafc
+
+
+ rgb(248, 250, 252)
+
+
+
+
+
+
+
+
+ neutral-200
+
+
+ #f4f8fb
+
+
+ rgb(244, 248, 251)
+
+
+
+
+
+
+
+
+ neutral-300
+
+
+ #edf1f7
+
+
+ rgb(237, 241, 247)
+
+
+
+
+
+
+
+
+ neutral-400
+
+
+ #e2e7ef
+
+
+ rgb(226, 231, 239)
+
+
+
+
+
+
+
+
+ neutral-500
+
+
+ #c6ced9
+
+
+ rgb(198, 206, 217)
+
+
+
+
+
+
+
+
+ neutral-600
+
+
+ #adb6c2
+
+
+ rgb(173, 182, 194)
+
+
+
+
+
+
+
+
+ neutral-700
+
+
+ #89929f
+
+
+ rgb(137, 146, 159)
+
+
+
+
+
+
+
+
+ neutral-800
+
+
+ #667085
+
+
+ rgb(102, 112, 133)
+
+
+
+
+
+
+
+
+ neutral-900
+
+
+ #39414e
+
+
+ rgb(57, 65, 78)
+
+
+
+
+
+
+
+
+ neutral-1000
+
+
+ #2b303b
+
+
+ rgb(43, 48, 59)
+
+
+
+
+
+
+
+
+ neutral-1100
+
+
+ #202531
+
+
+ rgb(32, 37, 49)
+
+
+
+
+
+
+
+
+ neutral-1200
+
+
+ #141924
+
+
+ rgb(20, 25, 36)
+
+
+
+
+
+
+
+
+ neutral-1300
+
+
+ #03020d
+
+
+ rgb(3, 2, 13)
+
+
+
+
+`;
+
+exports[`CSS/Colors OrangeColors smoke-test 1`] = `
+
+
+
+
+
+
+ orange-100
+
+
+ #fff5f1
+
+
+ rgb(255, 245, 241)
+
+
+
+
+
+
+
+
+ orange-200
+
+
+ #ffe3d8
+
+
+ rgb(255, 227, 216)
+
+
+
+
+
+
+
+
+ orange-300
+
+
+ #ffc4ae
+
+
+ rgb(255, 196, 174)
+
+
+
+
+
+
+
+
+ orange-400
+
+
+ #ff9c79
+
+
+ rgb(255, 156, 121)
+
+
+
+
+
+
+
+
+ orange-500
+
+
+ #ff723f
+
+
+ rgb(255, 114, 63)
+
+
+
+
+
+
+
+
+ orange-600
+
+
+ #ff5416
+
+
+ rgb(255, 84, 22)
+
+
+
+
+
+
+
+
+ orange-700
+
+
+ #ff2739
+
+
+ rgb(255, 39, 57)
+
+
+
+
+
+
+
+
+ orange-800
+
+
+ #e40000
+
+
+ rgb(228, 0, 0)
+
+
+
+
+
+
+
+
+ orange-900
+
+
+ #b82202
+
+
+ rgb(184, 34, 2)
+
+
+
+
+
+
+
+
+ orange-1000
+
+
+ #751500
+
+
+ rgb(117, 21, 0)
+
+
+
+
+
+
+
+
+ orange-1100
+
+
+ #2a0b00
+
+
+ rgb(42, 11, 0)
+
+
+
+
+`;
+
+exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
+
+
+
+
+
+
+ yellow-100
+
+
+ #fffbef
+
+
+ rgb(255, 251, 239)
+
+
+
+
+
+
+
+
+ yellow-200
+
+
+ #fff0ba
+
+
+ rgb(255, 240, 186)
+
+
+
+
+
+
+
+
+ yellow-300
+
+
+ #ffe27c
+
+
+ rgb(255, 226, 124)
+
+
+
+
+
+
+
+
+ yellow-400
+
+
+ #ffd43d
+
+
+ rgb(255, 212, 61)
+
+
+
+
+
+
+
+
+ yellow-500
+
+
+ #f8c100
+
+
+ rgb(248, 193, 0)
+
+
+
+
+
+
+
+
+ yellow-600
+
+
+ #e8a700
+
+
+ rgb(232, 167, 0)
+
+
+
+
+
+
+
+
+ yellow-700
+
+
+ #ac8600
+
+
+ rgb(172, 134, 0)
+
+
+
+
+
+
+
+
+ yellow-800
+
+
+ #654f00
+
+
+ rgb(101, 79, 0)
+
+
+
+
+
+
+
+
+ yellow-900
+
+
+ #291c01
+
+
+ rgb(41, 28, 1)
+
+
+
+
+
+
+
+
+ green-100
+
+
+ #f1fff1
+
+
+ rgb(241, 255, 241)
+
+
+
+
+
+
+
+
+ green-200
+
+
+ #b8ffbb
+
+
+ rgb(184, 255, 187)
+
+
+
+
+
+
+
+
+ green-300
+
+
+ #80ff85
+
+
+ rgb(128, 255, 133)
+
+
+
+
+
+
+
+
+ green-400
+
+
+ #08ff13
+
+
+ rgb(8, 255, 19)
+
+
+
+
+
+
+
+
+ green-500
+
+
+ #00e80b
+
+
+ rgb(0, 232, 11)
+
+
+
+
+
+
+
+
+ green-600
+
+
+ #00c008
+
+
+ rgb(0, 192, 8)
+
+
+
+
+
+
+
+
+ green-700
+
+
+ #008e06
+
+
+ rgb(0, 142, 6)
+
+
+
+
+
+
+
+
+ green-800
+
+
+ #005303
+
+
+ rgb(0, 83, 3)
+
+
+
+
+
+
+
+
+ green-900
+
+
+ #002a02
+
+
+ rgb(0, 42, 2)
+
+
+
+
+
+
+
+
+ blue-100
+
+
+ #f1fbff
+
+
+ rgb(241, 251, 255)
+
+
+
+
+
+
+
+
+ blue-200
+
+
+ #b8eaff
+
+
+ rgb(184, 234, 255)
+
+
+
+
+
+
+
+
+ blue-300
+
+
+ #80d9ff
+
+
+ rgb(128, 217, 255)
+
+
+
+
+
+
+
+
+ blue-400
+
+
+ #4ad4ff
+
+
+ rgb(74, 212, 255)
+
+
+
+
+
+
+
+
+ blue-500
+
+
+ #2cc0ff
+
+
+ rgb(44, 192, 255)
+
+
+
+
+
+
+
+
+ blue-600
+
+
+ #00a5ec
+
+
+ rgb(0, 165, 236)
+
+
+
+
+
+
+
+
+ blue-700
+
+
+ #0284cd
+
+
+ rgb(2, 132, 205)
+
+
+
+
+
+
+
+
+ blue-800
+
+
+ #004b75
+
+
+ rgb(0, 75, 117)
+
+
+
+
+
+
+
+
+ blue-900
+
+
+ #001b2a
+
+
+ rgb(0, 27, 42)
+
+
+
+
+
+
+
+
+ violet-100
+
+
+ #f7f2fe
+
+
+ rgb(247, 242, 254)
+
+
+
+
+
+
+
+
+ violet-200
+
+
+ #d8bcfb
+
+
+ rgb(216, 188, 251)
+
+
+
+
+
+
+
+
+ violet-300
+
+
+ #b986f8
+
+
+ rgb(185, 134, 248)
+
+
+
+
+
+
+
+
+ violet-400
+
+
+ #9951f5
+
+
+ rgb(153, 81, 245)
+
+
+
+
+
+
+
+
+ violet-500
+
+
+ #7a1bf2
+
+
+ rgb(122, 27, 242)
+
+
+
+
+
+
+
+
+ violet-600
+
+
+ #5f0bc9
+
+
+ rgb(95, 11, 201)
+
+
+
+
+
+
+
+
+ violet-700
+
+
+ #460894
+
+
+ rgb(70, 8, 148)
+
+
+
+
+
+
+
+
+ violet-800
+
+
+ #2d055e
+
+
+ rgb(45, 5, 94)
+
+
+
+
+
+
+
+
+ violet-900
+
+
+ #130228
+
+
+ rgb(19, 2, 40)
+
+
+
+
+
+
+
+
+ pink-100
+
+
+ #fff1fc
+
+
+ rgb(255, 241, 252)
+
+
+
+
+
+
+
+
+ pink-200
+
+
+ #ffb8f1
+
+
+ rgb(255, 184, 241)
+
+
+
+
+
+
+
+
+ pink-300
+
+
+ #ff80e6
+
+
+ rgb(255, 128, 230)
+
+
+
+
+
+
+
+
+ pink-400
+
+
+ #ff47db
+
+
+ rgb(255, 71, 219)
+
+
+
+
+
+
+
+
+ pink-500
+
+
+ #ff17d2
+
+
+ rgb(255, 23, 210)
+
+
+
+
+
+
+
+
+ pink-600
+
+
+ #d400ab
+
+
+ rgb(212, 0, 171)
+
+
+
+
+
+
+
+
+ pink-700
+
+
+ #9c007e
+
+
+ rgb(156, 0, 126)
+
+
+
+
+
+
+
+
+ pink-800
+
+
+ #630050
+
+
+ rgb(99, 0, 80)
+
+
+
+
+
+
+
+
+ pink-900
+
+
+ #2a0022
+
+
+ rgb(42, 0, 34)
+
+
+
+
+`;
diff --git a/src/pages/Colour.mdx b/src/pages/Colour.mdx
deleted file mode 100644
index 68b40d36a..000000000
--- a/src/pages/Colour.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Fragment } from "react";
-import { Meta, Unstyled } from "@storybook/blocks";
-import { colours } from "./utils";
-
-
-
-
- Colour
- {colours.map((category) => (
-
- {category.name}
-
- {category.colours.map(({ hex, name, bg }) => (
- -
-
-
{name}
- hex {hex}
-
- ))}
-
-
- ))}
-
diff --git a/src/pages/utils.ts b/src/pages/utils.ts
index 4d5f4962b..183b61f9a 100644
--- a/src/pages/utils.ts
+++ b/src/pages/utils.ts
@@ -1,52 +1,3 @@
-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 = `