From 95f8a113e1308194b4ed5c41825a4d4c272d475f Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Wed, 4 Sep 2024 15:28:25 +0100 Subject: [PATCH 1/8] feat: add secondary color support for SVGs, introduce in gui-check-circled-fill --- src/core/Icon.tsx | 19 ++++++++++++-- src/core/Icon/Icon.stories.tsx | 26 +++++++++++++++++++ src/core/Icon/secondary-colors.ts | 4 +++ .../icons/icon-gui-check-circled-fill.svg | 2 +- 4 files changed, 48 insertions(+), 3 deletions(-) create mode 100644 src/core/Icon/secondary-colors.ts diff --git a/src/core/Icon.tsx b/src/core/Icon.tsx index 2c35330f7..4a46248e4 100644 --- a/src/core/Icon.tsx +++ b/src/core/Icon.tsx @@ -1,22 +1,37 @@ -import React from "react"; +import React, { CSSProperties } from "react"; +import { defaultIconSecondaryColor } from "./Icon/secondary-colors"; type IconProps = { name: string; size?: string; color?: string; + secondaryColor?: string; additionalCSS?: string; }; +const convertTailwindClassToVar = (className: string) => + className.replace(/text-([a-z0-9-]+)/gi, "var(--color-$1)"); + const Icon = ({ name, size = "0.75rem", color = "", + secondaryColor = defaultIconSecondaryColor(name), additionalCSS = "", ...additionalAttributes }: IconProps) => ( diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx index 698e4182b..5393c2165 100644 --- a/src/core/Icon/Icon.stories.tsx +++ b/src/core/Icon/Icon.stories.tsx @@ -230,3 +230,29 @@ export const ProductIcons = { export const Other = { render: () => renderIcons(otherIcons), }; + +export const IconWithSecondaryColor = { + render: () => ( +
+ + +
+ ), + parameters: { + docs: { + description: { + story: + "By setting the `secondaryColor` prop, you can change the color of the icon's secondary elements, if supported in the underlying SVG. You can set either a CSS variable directly, or use a Tailwind class.\n\nThe right-hand icon here (`icon-gui-check-circled-fill`) has this property applied, resulting in it having a dark checkmark.\n\nTo add support to an existing SVG, replace a `fill` attribute value with `var(--ui-icon-secondary-color)`.", + }, + }, + }, +}; diff --git a/src/core/Icon/secondary-colors.ts b/src/core/Icon/secondary-colors.ts new file mode 100644 index 000000000..7d000b1a6 --- /dev/null +++ b/src/core/Icon/secondary-colors.ts @@ -0,0 +1,4 @@ +export const defaultIconSecondaryColor = (name: string) => + ({ + "icon-gui-check-circled-fill": "white", + })[name] ?? "white"; diff --git a/src/core/icons/icon-gui-check-circled-fill.svg b/src/core/icons/icon-gui-check-circled-fill.svg index 9b1e8ad13..07690c870 100644 --- a/src/core/icons/icon-gui-check-circled-fill.svg +++ b/src/core/icons/icon-gui-check-circled-fill.svg @@ -1,4 +1,4 @@ - + From 214e82f9c29704659b5b9c105d7bc71e1fd3f094 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Wed, 4 Sep 2024 15:30:05 +0100 Subject: [PATCH 2/8] fix: update overline1 and overline2 size variables --- src/core/styles/properties.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/styles/properties.css b/src/core/styles/properties.css index 5a89decf5..9e8650c9b 100644 --- a/src/core/styles/properties.css +++ b/src/core/styles/properties.css @@ -189,8 +189,8 @@ --fs-standfirst: 1.5rem; --fs-sub-header: 1.125rem; --fs-sub-header-xs: 1.063rem; - --fs-overline1: 1rem; - --fs-overline2: 0.875rem; + --fs-overline1: 0.875rem; + --fs-overline2: 0.75rem; --fs-btn1: 1rem; --fs-btn2: 0.938rem; --fs-btn3: 0.875rem; From ef7bff404f208f5f305bf333f64ce578f39cedc5 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Wed, 4 Sep 2024 17:03:26 +0100 Subject: [PATCH 3/8] feat: add shadows in from design system --- src/core/styles.components.css | 5 +- src/core/styles/Shadows.stories.tsx | 53 +++++++++++ src/core/styles/shadows.css | 136 ++++++++++++++++++++++++++++ 3 files changed, 192 insertions(+), 2 deletions(-) create mode 100644 src/core/styles/Shadows.stories.tsx create mode 100644 src/core/styles/shadows.css diff --git a/src/core/styles.components.css b/src/core/styles.components.css index f705265de..983609886 100644 --- a/src/core/styles.components.css +++ b/src/core/styles.components.css @@ -1,9 +1,10 @@ @import "./styles/buttons.css"; +@import "./styles/dropdowns.css"; +@import "./styles/forms.css"; @import "./styles/layout.css"; +@import "./styles/shadows.css"; @import "./styles/text.css"; -@import "./styles/forms.css"; @import "./styles/toggles.css"; -@import "./styles/dropdowns.css"; @layer components { .ui-input { diff --git a/src/core/styles/Shadows.stories.tsx b/src/core/styles/Shadows.stories.tsx new file mode 100644 index 000000000..45471961e --- /dev/null +++ b/src/core/styles/Shadows.stories.tsx @@ -0,0 +1,53 @@ +import React from "react"; + +export default { + title: "CSS/Shadows", +}; + +const sizes = ["xs", "sm", "md", "lg", "xl"]; + +const shadowRow = (weight: "soft" | "medium" | "strong") => ( +
+ {sizes.map((size) => ( +
+ {size} +
+ ))} +
+); + +export const Soft = { + render: () => shadowRow("soft"), + parameters: { + docs: { + description: { + story: "Example usage: `.ui-shadow-xs-soft`", + }, + }, + }, +}; + +export const Medium = { + render: () => shadowRow("medium"), + parameters: { + docs: { + description: { + story: "Example usage: `.ui-shadow-xs-medium`", + }, + }, + }, +}; + +export const Strong = { + render: () => shadowRow("strong"), + parameters: { + docs: { + description: { + story: "Example usage: `.ui-shadow-xs-strong`", + }, + }, + }, +}; diff --git a/src/core/styles/shadows.css b/src/core/styles/shadows.css new file mode 100644 index 000000000..cb9da2c69 --- /dev/null +++ b/src/core/styles/shadows.css @@ -0,0 +1,136 @@ +@layer components { + .ui-shadow-xs-soft { + box-shadow: + 0px 13.699px 3.805px 0px rgba(3, 2, 13, 0), + 0px 9.133px 3.805px 0px rgba(3, 2, 13, 0.01), + 0px 5.327px 3.044px 0px rgba(3, 2, 13, 0.03), + 0px 2.283px 2.283px 0px rgba(3, 2, 13, 0.05), + 0px 0.761px 1.522px 0px rgba(3, 2, 13, 0.06); + } + + .ui-shadow-sm-soft { + box-shadow: + 0px 32.725px 9.133px 0px rgba(3, 2, 13, 0), + 0px 21.309px 8.371px 0px rgba(3, 2, 13, 0.01), + 0px 12.177px 6.849px 0px rgba(3, 2, 13, 0.03), + 0px 5.327px 5.327px 0px rgba(3, 2, 13, 0.05), + 0px 1.522px 3.044px 0px rgba(3, 2, 13, 0.06); + } + + .ui-shadow-md-soft { + box-shadow: + 0px 105.024px 29.681px 0px rgba(3, 2, 13, 0), + 0px 66.972px 26.637px 0px rgba(3, 2, 13, 0.01), + 0px 38.052px 22.831px 0px rgba(3, 2, 13, 0.02), + 0px 16.743px 16.743px 0px rgba(3, 2, 13, 0.03), + 0px 4.566px 9.133px 0px rgba(3, 2, 13, 0.04); + } + + .ui-shadow-lg-soft { + box-shadow: + 0px 200.915px 56.317px 0px rgba(20, 25, 36, 0), + 0px 128.616px 51.751px 0px rgba(20, 25, 36, 0.01), + 0px 72.299px 43.379px 0px rgba(20, 25, 36, 0.02), + 0px 31.964px 31.964px 0px rgba(20, 25, 36, 0.03), + 0px 8.371px 17.504px 0px rgba(20, 25, 36, 0.04); + } + + .ui-shadow-xl-soft { + box-shadow: + 0px 210.048px 58.6px 0px rgba(20, 25, 36, 0), + 0px 134.705px 54.034px 0px rgba(20, 25, 36, 0.01), + 0px 75.343px 45.663px 0px rgba(20, 25, 36, 0.03), + 0px 33.486px 33.486px 0px rgba(20, 25, 36, 0.04), + 0px 8.371px 18.265px 0px rgba(20, 25, 36, 0.05); + } + + .ui-shadow-xs-medium { + box-shadow: + 0px 14px 4px 0px rgba(3, 2, 13, 0), + 0px 9px 4px 0px rgba(3, 2, 13, 0.02), + 0px 5px 3px 0px rgba(3, 2, 13, 0.08), + 0px 2px 2px 0px rgba(3, 2, 13, 0.14), + 0px 1px 1px 0px rgba(3, 2, 13, 0.16); + } + + .ui-shadow-sm-medium { + box-shadow: + 0px 33px 9px 0px rgba(3, 2, 13, 0), + 0px 21px 8px 0px rgba(3, 2, 13, 0.02), + 0px 12px 7px 0px rgba(3, 2, 13, 0.08), + 0px 5px 5px 0px rgba(3, 2, 13, 0.14), + 0px 1px 3px 0px rgba(3, 2, 13, 0.16); + } + + .ui-shadow-md-medium { + box-shadow: + 0px 105px 29px 0px rgba(3, 2, 13, 0), + 0px 67px 27px 0px rgba(3, 2, 13, 0.02), + 0px 38px 23px 0px rgba(3, 2, 13, 0.06), + 0px 17px 17px 0px rgba(3, 2, 13, 0.1), + 0px 4px 9px 0px rgba(3, 2, 13, 0.12); + } + + .ui-shadow-lg-medium { + box-shadow: + 0px 201px 56px 0px rgba(20, 25, 36, 0), + 0px 129px 51px 0px rgba(20, 25, 36, 0.02), + 0px 72px 43px 0px rgba(20, 25, 36, 0.06), + 0px 32px 32px 0px rgba(20, 25, 36, 0.1), + 0px 8px 18px 0px rgba(20, 25, 36, 0.12); + } + + .ui-shadow-xl-medium { + box-shadow: + 0px 210px 59px 0px rgba(20, 25, 36, 0), + 0px 134px 54px 0px rgba(20, 25, 36, 0.02), + 0px 76px 45px 0px rgba(20, 25, 36, 0.08), + 0px 34px 34px 0px rgba(20, 25, 36, 0.13), + 0px 8px 18px 0px rgba(20, 25, 36, 0.15); + } + + .ui-shadow-xs-strong { + box-shadow: + 0px 14px 4px 0px rgba(3, 2, 13, 0.01), + 0px 9px 4px 0px rgba(3, 2, 13, 0.09), + 0px 5px 3px 0px rgba(3, 2, 13, 0.3), + 0px 2px 2px 0px rgba(3, 2, 13, 0.51), + 0px 1px 1px 0px rgba(3, 2, 13, 0.59); + } + + .ui-shadow-sm-strong { + box-shadow: + 0px 49px 14px 0px rgba(3, 2, 13, 0.01), + 0px 32px 13px 0px rgba(3, 2, 13, 0.09), + 0px 18px 11px 0px rgba(3, 2, 13, 0.3), + 0px 8px 8px 0px rgba(3, 2, 13, 0.51), + 0px 2px 4px 0px rgba(3, 2, 13, 0.59); + } + + .ui-shadow-md-strong { + box-shadow: + 0px 105px 29px 0px rgba(3, 2, 13, 0.01), + 0px 67px 27px 0px rgba(3, 2, 13, 0.09), + 0px 38px 23px 0px rgba(3, 2, 13, 0.3), + 0px 17px 17px 0px rgba(3, 2, 13, 0.51), + 0px 4px 9px 0px rgba(3, 2, 13, 0.59); + } + + .ui-shadow-lg-strong { + box-shadow: + 0px 201px 56px 0px rgba(0, 0, 0, 0.01), + 0px 129px 51px 0px rgba(0, 0, 0, 0.08), + 0px 72px 43px 0px rgba(0, 0, 0, 0.28), + 0px 32px 32px 0px rgba(0, 0, 0, 0.47), + 0px 8px 18px 0px rgba(0, 0, 0, 0.54); + } + + .ui-shadow-xl-strong { + box-shadow: + 0px 210px 59px 0px rgba(0, 0, 0, 0.01), + 0px 134px 54px 0px rgba(0, 0, 0, 0.09), + 0px 76px 45px 0px rgba(0, 0, 0, 0.3), + 0px 34px 34px 0px rgba(0, 0, 0, 0.51), + 0px 8px 18px 0px rgba(0, 0, 0, 0.59); + } +} From 07fc285aa9fe242adce3ac59066cc745fd081b8c Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Wed, 4 Sep 2024 17:27:24 +0100 Subject: [PATCH 4/8] feat: add container override classes, port layout MDX to story --- src/core/styles/Layout.stories.tsx | 150 +++++++++++++++++++++++++++++ src/core/styles/layout.css | 8 ++ src/pages/Layout.mdx | 58 ----------- 3 files changed, 158 insertions(+), 58 deletions(-) create mode 100644 src/core/styles/Layout.stories.tsx delete mode 100644 src/pages/Layout.mdx diff --git a/src/core/styles/Layout.stories.tsx b/src/core/styles/Layout.stories.tsx new file mode 100644 index 000000000..09c0423d2 --- /dev/null +++ b/src/core/styles/Layout.stories.tsx @@ -0,0 +1,150 @@ +import React from "react"; + +export default { + title: "CSS/Layout", +}; + +export const StandardContainer = { + render: () => ( +
+
+

ui-standard-container

+
+
+ ), + parameters: { + docs: { + description: { + story: + "Container that does not grow beyond the xl breakpoint (1440px), centers and contains the correct outside padding across viewport changes. Usage: `.ui-standard-container`", + }, + }, + }, +}; + +export const GridGap = { + render: () => ( +
+
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+
+
+ ), + parameters: { + docs: { + description: { + story: + "Add correct gaps across viewport changes. Usage: `.ui-grid-gap`", + }, + }, + }, +}; + +export const GridPX = { + render: () => ( +
+
+
+
+ Text +
+
+
+
+ ), + parameters: { + docs: { + description: { + story: + "Add padding on the x axis, with correct values across viewport changes. Usage: `.ui-grid-px`", + }, + }, + }, +}; + +export const GridMX = { + render: () => ( +
+
+
+
+ Text +
+
+
+
+ ), + parameters: { + docs: { + description: { + story: + "Add margin on the x axis, with correct values across viewport changes. Usage: `.ui-grid-mx`", + }, + }, + }, +}; + +export const FullContainerOverride = { + render: () => ( +
+
+
+
+ {[...Array(20)].map((_, i) => ( + + Content + + ))} +
+
+
+
+ ), + parameters: { + docs: { + description: { + story: + "Somewhat niche override for situations where you would like an element to break out from inside a container and occupy the whole width of the page. The dark blue line here shows that the element is centered, but the content starts from the left hand edge.\n\nPlace on an element that is a child of `.ui-standard-container`.\n\nUsage: `.ui-full-container-override`", + }, + }, + }, +}; + +export const FullBorderlessContainerOverride = { + render: () => ( +
+
+
+
+ {[...Array(20)].map((_, i) => ( + + Content + + ))} +
+
+
+
+ ), + parameters: { + docs: { + description: { + story: + "Even more niche application where you would like an element to break out from a standard container, but without the constraints of the window width. The dark blue line here shows that the element is centered (it's more blurry as the 'element' is far wider to achieve the borderless effect).\n\nPlace on an element that is a child of `.ui-standard-container`, and ensure that the container is within an element with `overflow:hidden` or something of that ilk.\n\nUsage: `.ui-full-borderless-container-override`", + }, + }, + }, +}; diff --git a/src/core/styles/layout.css b/src/core/styles/layout.css index ce007bfcf..a148ad2e1 100644 --- a/src/core/styles/layout.css +++ b/src/core/styles/layout.css @@ -18,4 +18,12 @@ .ui-grid-mx { @apply mx-24 sm:mx-32 md:mx-40 lg:mx-64; } + + .ui-full-borderless-container-override { + @apply w-[10000px] ml-[calc(50%-5000px)]; + } + + .ui-full-container-override { + @apply ml-[calc(-50vw+50%)] !px-0 w-screen; + } } diff --git a/src/pages/Layout.mdx b/src/pages/Layout.mdx deleted file mode 100644 index 533577b48..000000000 --- a/src/pages/Layout.mdx +++ /dev/null @@ -1,58 +0,0 @@ -import { Meta, Unstyled } from "@storybook/blocks"; - - - - -

Layout

- -
-
-

ui-standard-container

-

- Container that does not grow beyond the xl breakpoint (1440px), centers - and contains the correct outside padding across viewport changes. -

-
-
- -
-
-

ui-grid-gap

-

Add correct gaps across viewport changes.

-
-
1
-
2
-
3
-
4
-
-
-
- -
-
-

ui-grid-px

-

- Add padding on the x axis, with correct values across viewport changes. -

-
-
- Text -
-
-
-
- -
-
-

ui-grid-mx

-

- Add margin on the x axis, with correct values across viewport changes. -

-
-
- Text -
-
-
-
- From c89ac1a4baddd592a074e462da82ffed329e3c94 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 5 Sep 2024 16:47:52 +0100 Subject: [PATCH 5/8] feat: deploy test build to GH pages upon review tag --- .github/workflows/review.yml | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 .github/workflows/review.yml diff --git a/.github/workflows/review.yml b/.github/workflows/review.yml new file mode 100644 index 000000000..1bb238d45 --- /dev/null +++ b/.github/workflows/review.yml @@ -0,0 +1,31 @@ +name: Review + +on: + pull_request: + types: [labeled] + +permissions: + contents: read + pages: write + id-token: write + +jobs: + deploy-storybook: + if: ${{ github.event.label.name == 'review' }} + name: Deploy Storybook to GH Pages + runs-on: ubuntu-latest + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }} + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Build + run: yarn && yarn build-storybook + - name: Upload + uses: actions/upload-pages-artifact@v3.0.1 + with: + path: preview + - id: deploy + name: Deploy to GitHub Pages + uses: actions/deploy-pages@v4 From 00dc4604fa484143e647e89dcc6b03fd846f582c Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 5 Sep 2024 17:19:58 +0100 Subject: [PATCH 6/8] feat: add ProductTile component and story --- src/core/ProductTile.tsx | 63 ++++++++++++++ src/core/ProductTile/ProductTile.stories.tsx | 49 +++++++++++ src/core/ProductTile/data.ts | 57 +++++++++++++ ...on-product-asset-tracking-encapsulated.svg | 15 ++++ .../icons/icon-product-asset-tracking.svg | 46 ++--------- .../icons/icon-product-chat-encapsulated.svg | 20 +++++ src/core/icons/icon-product-chat.svg | 45 ++-------- .../icon-product-livesync-encapsulated.svg | 15 ++++ src/core/icons/icon-product-livesync.svg | 69 +--------------- .../icon-product-pubsub-encapsulated.svg | 21 +++++ src/core/icons/icon-product-pubsub.svg | 43 ++-------- .../icon-product-spaces-encapsulated.svg | 20 +++++ src/core/icons/icon-product-spaces.svg | 82 ++----------------- 13 files changed, 295 insertions(+), 250 deletions(-) create mode 100644 src/core/ProductTile.tsx create mode 100644 src/core/ProductTile/ProductTile.stories.tsx create mode 100644 src/core/ProductTile/data.ts create mode 100644 src/core/icons/icon-product-asset-tracking-encapsulated.svg create mode 100644 src/core/icons/icon-product-chat-encapsulated.svg create mode 100644 src/core/icons/icon-product-livesync-encapsulated.svg create mode 100644 src/core/icons/icon-product-pubsub-encapsulated.svg create mode 100644 src/core/icons/icon-product-spaces-encapsulated.svg diff --git a/src/core/ProductTile.tsx b/src/core/ProductTile.tsx new file mode 100644 index 000000000..05ff431c7 --- /dev/null +++ b/src/core/ProductTile.tsx @@ -0,0 +1,63 @@ +import React from "react"; +import Icon from "./Icon"; +import FeaturedLink from "./FeaturedLink"; +import { ProductName, products } from "./ProductTile/data"; + +type ProductTileProps = { + name: ProductName; + selected?: boolean; + currentPage?: boolean; +}; + +const ProductTile = ({ name, selected, currentPage }: ProductTileProps) => { + const { icon, label, description, link, unavailable } = products[name] ?? {}; + + return ( +
+
+ {icon ? : null} +
+

+ Ably{" "} +

+

+ {label} +

+
+
+ {unavailable ? ( +
+
+ COMING SOON +
+
+ ) : null} +

+ {description} +

+ {selected && link ? ( + + {currentPage ? "View docs" : "Explore"} + + ) : null} +
+ ); +}; + +export default ProductTile; diff --git a/src/core/ProductTile/ProductTile.stories.tsx b/src/core/ProductTile/ProductTile.stories.tsx new file mode 100644 index 000000000..265fbbe49 --- /dev/null +++ b/src/core/ProductTile/ProductTile.stories.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import ProductTile from "../ProductTile"; +import { ProductName, products } from "../ProductTile/data"; + +export default { + title: "JS Components/Product Tile", + component: ProductTile, + tags: ["autodocs"], +}; + +export const ProductTiles = { + render: () => ( +
+ {Object.keys(products).map((product) => ( + + ))} +
+ ), + parameters: { + docs: { + description: { + story: "Example usage: ``", + }, + }, + }, +}; + +export const SelectedProductTiles = { + render: () => ( +
+ {Object.keys(products).map((product, index) => ( + + ))} +
+ ), + parameters: { + docs: { + description: { + story: + "Demonstration of the odd tiles being 'selected'. The first tile is also marked as the `currentPage` (to simulate being on the Pubsub page), which alters the language of the CTA.", + }, + }, + }, +}; diff --git a/src/core/ProductTile/data.ts b/src/core/ProductTile/data.ts new file mode 100644 index 000000000..36c005132 --- /dev/null +++ b/src/core/ProductTile/data.ts @@ -0,0 +1,57 @@ +export type ProductName = + | "pubsub" + | "chat" + | "spaces" + | "liveSync" + | "assetTracking" + | "liveObjects"; + +type Products = Record< + ProductName, + { + label: string; + description: string; + link?: string; + icon?: string; + unavailable?: boolean; + } +>; + +export const products: Products = { + pubsub: { + label: "PubSub", + description: "Low-level APIs to build any realtime experience", + icon: "icon-product-pubsub-encapsulated", + link: "/docs/products/channels", + }, + chat: { + label: "Chat", + description: "Rapidly build chat features and roll-out at scale", + icon: "icon-product-chat-encapsulated", + link: "/docs/products/chat", + }, + spaces: { + label: "Spaces", + description: "Create collaborative environments in a few lines of code", + icon: "icon-product-spaces-encapsulated", + link: "/docs/products/spaces", + }, + liveSync: { + label: "LiveSync", + description: "Sync database changes with frontend clients", + icon: "icon-product-livesync-encapsulated", + link: "/docs/products/livesync", + }, + assetTracking: { + label: "Asset Tracking", + description: "Simple APIs to build realtime tracking applications", + icon: "icon-product-asset-tracking-encapsulated", + link: "/docs/products/asset-tracking", + }, + liveObjects: { + label: "LiveObjects", + description: "Sync application state across multiple devices", + link: "/docs/products/asset-tracking", + unavailable: true, + }, +}; diff --git a/src/core/icons/icon-product-asset-tracking-encapsulated.svg b/src/core/icons/icon-product-asset-tracking-encapsulated.svg new file mode 100644 index 000000000..cb5c0337a --- /dev/null +++ b/src/core/icons/icon-product-asset-tracking-encapsulated.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/core/icons/icon-product-asset-tracking.svg b/src/core/icons/icon-product-asset-tracking.svg index 7514d2ade..f83cdc876 100644 --- a/src/core/icons/icon-product-asset-tracking.svg +++ b/src/core/icons/icon-product-asset-tracking.svg @@ -1,45 +1,9 @@ - - - - - - - - - - + + - - - - - - - - - + + + - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/core/icons/icon-product-chat-encapsulated.svg b/src/core/icons/icon-product-chat-encapsulated.svg new file mode 100644 index 000000000..4965f978b --- /dev/null +++ b/src/core/icons/icon-product-chat-encapsulated.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/core/icons/icon-product-chat.svg b/src/core/icons/icon-product-chat.svg index 3a6ebe71f..5be061807 100644 --- a/src/core/icons/icon-product-chat.svg +++ b/src/core/icons/icon-product-chat.svg @@ -1,43 +1,14 @@ - - - - - - - - - - - - + + + - - - - - - - - - - - - - - - - + + - - - - - - - - - + + + diff --git a/src/core/icons/icon-product-livesync-encapsulated.svg b/src/core/icons/icon-product-livesync-encapsulated.svg new file mode 100644 index 000000000..21e142549 --- /dev/null +++ b/src/core/icons/icon-product-livesync-encapsulated.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/core/icons/icon-product-livesync.svg b/src/core/icons/icon-product-livesync.svg index 1864c4b6d..4e8dff399 100644 --- a/src/core/icons/icon-product-livesync.svg +++ b/src/core/icons/icon-product-livesync.svg @@ -1,70 +1,9 @@ - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - + diff --git a/src/core/icons/icon-product-pubsub-encapsulated.svg b/src/core/icons/icon-product-pubsub-encapsulated.svg new file mode 100644 index 000000000..bdd4491e6 --- /dev/null +++ b/src/core/icons/icon-product-pubsub-encapsulated.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/core/icons/icon-product-pubsub.svg b/src/core/icons/icon-product-pubsub.svg index 6cdd83dcf..fd1cc4287 100644 --- a/src/core/icons/icon-product-pubsub.svg +++ b/src/core/icons/icon-product-pubsub.svg @@ -1,40 +1,15 @@ - - - - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + + diff --git a/src/core/icons/icon-product-spaces-encapsulated.svg b/src/core/icons/icon-product-spaces-encapsulated.svg new file mode 100644 index 000000000..2818dbb6c --- /dev/null +++ b/src/core/icons/icon-product-spaces-encapsulated.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/core/icons/icon-product-spaces.svg b/src/core/icons/icon-product-spaces.svg index 703204003..de56223ab 100644 --- a/src/core/icons/icon-product-spaces.svg +++ b/src/core/icons/icon-product-spaces.svg @@ -1,78 +1,14 @@ - - - - - - - - - - - - - - - - - - - - - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + From b6829409b2cc06612dda1236537ad948a0aa28ea Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 5 Sep 2024 17:20:15 +0100 Subject: [PATCH 7/8] chore: bump ably-ui to 14.5.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 413fbd2e7..aed4c45c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "14.4.0", + "version": "14.5.0", "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.", "repository": { "type": "git", From 87dde35edf98209e1e8d7ab562bd92400315c927 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 5 Sep 2024 17:36:09 +0100 Subject: [PATCH 8/8] chore: update snapshots --- .../Icon/__snapshots__/Icon.stories.tsx.snap | 19 +- src/core/Icon/secondary-colors.ts | 2 +- .../ProductTile.stories.tsx.snap | 297 ++++++++++++++++++ .../__snapshots__/Table.stories.tsx.snap | 30 +- .../__snapshots__/Layout.stories.tsx.snap | 198 ++++++++++++ .../__snapshots__/Shadows.stories.tsx.snap | 61 ++++ 6 files changed, 590 insertions(+), 17 deletions(-) create mode 100644 src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap create mode 100644 src/core/styles/__snapshots__/Layout.stories.tsx.snap create mode 100644 src/core/styles/__snapshots__/Shadows.stories.tsx.snap diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap index 98f4e3873..912d1b356 100644 --- a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap +++ b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap @@ -1244,7 +1244,7 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
@@ -1705,6 +1705,23 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
`; +exports[`JS Components/Icon IconWithSecondaryColor smoke-test 1`] = ` +
+ + + + + + + + +
+`; + exports[`JS Components/Icon Other smoke-test 1`] = `
diff --git a/src/core/Icon/secondary-colors.ts b/src/core/Icon/secondary-colors.ts index 7d000b1a6..a100a9534 100644 --- a/src/core/Icon/secondary-colors.ts +++ b/src/core/Icon/secondary-colors.ts @@ -1,4 +1,4 @@ export const defaultIconSecondaryColor = (name: string) => ({ "icon-gui-check-circled-fill": "white", - })[name] ?? "white"; + })[name]; diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap new file mode 100644 index 000000000..dd4d9212b --- /dev/null +++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap @@ -0,0 +1,297 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = ` +
+
+
+ + + + +
+

+ Ably +

+

+ PubSub +

+
+
+

+ Low-level APIs to build any realtime experience +

+
+
+
+ + + + +
+

+ Ably +

+

+ Chat +

+
+
+

+ Rapidly build chat features and roll-out at scale +

+
+
+
+ + + + +
+

+ Ably +

+

+ Spaces +

+
+
+

+ Create collaborative environments in a few lines of code +

+
+
+
+ + + + +
+

+ Ably +

+

+ LiveSync +

+
+
+

+ Sync database changes with frontend clients +

+
+
+
+ + + + +
+

+ Ably +

+

+ Asset Tracking +

+
+
+

+ Simple APIs to build realtime tracking applications +

+
+
+
+
+

+ Ably +

+

+ LiveObjects +

+
+
+
+
+ COMING SOON +
+
+

+ Sync application state across multiple devices +

+
+
+`; + +exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = ` +
+
+
+ + + + +
+

+ Ably +

+

+ PubSub +

+
+
+

+ Low-level APIs to build any realtime experience +

+ + View docs + + + + + +
+
+
+ + + + +
+

+ Ably +

+

+ Chat +

+
+
+

+ Rapidly build chat features and roll-out at scale +

+
+
+
+ + + + +
+

+ Ably +

+

+ Spaces +

+
+
+

+ Create collaborative environments in a few lines of code +

+ + Explore + + + + + +
+
+
+ + + + +
+

+ Ably +

+

+ LiveSync +

+
+
+

+ Sync database changes with frontend clients +

+
+
+
+ + + + +
+

+ Ably +

+

+ Asset Tracking +

+
+
+

+ Simple APIs to build realtime tracking applications +

+ + Explore + + + + + +
+
+
+
+

+ Ably +

+

+ LiveObjects +

+
+
+
+
+ COMING SOON +
+
+

+ Sync application state across multiple devices +

+
+
+`; diff --git a/src/core/Table/__snapshots__/Table.stories.tsx.snap b/src/core/Table/__snapshots__/Table.stories.tsx.snap index 7639cbdb6..c9bd6b833 100644 --- a/src/core/Table/__snapshots__/Table.stories.tsx.snap +++ b/src/core/Table/__snapshots__/Table.stories.tsx.snap @@ -102,7 +102,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -182,7 +182,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -262,7 +262,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -342,7 +342,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -422,7 +422,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -513,7 +513,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -593,7 +593,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -673,7 +673,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -753,7 +753,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -833,7 +833,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -924,7 +924,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -1004,7 +1004,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -1084,7 +1084,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -1164,7 +1164,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` @@ -1244,7 +1244,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` diff --git a/src/core/styles/__snapshots__/Layout.stories.tsx.snap b/src/core/styles/__snapshots__/Layout.stories.tsx.snap new file mode 100644 index 000000000..95b5e2e11 --- /dev/null +++ b/src/core/styles/__snapshots__/Layout.stories.tsx.snap @@ -0,0 +1,198 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CSS/Layout FullBorderlessContainerOverride smoke-test 1`] = ` +
+
+
+
+ + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + +
+
+
+
+`; + +exports[`CSS/Layout FullContainerOverride smoke-test 1`] = ` +
+
+
+
+ + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + + + Content + +
+
+
+
+`; + +exports[`CSS/Layout GridGap smoke-test 1`] = ` +
+
+
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+
+
+`; + +exports[`CSS/Layout GridMX smoke-test 1`] = ` +
+
+
+
+ Text +
+
+
+
+`; + +exports[`CSS/Layout GridPX smoke-test 1`] = ` +
+
+
+
+ Text +
+
+
+
+`; + +exports[`CSS/Layout StandardContainer smoke-test 1`] = ` +
+
+

+ ui-standard-container +

+
+
+`; diff --git a/src/core/styles/__snapshots__/Shadows.stories.tsx.snap b/src/core/styles/__snapshots__/Shadows.stories.tsx.snap new file mode 100644 index 000000000..842da1fc8 --- /dev/null +++ b/src/core/styles/__snapshots__/Shadows.stories.tsx.snap @@ -0,0 +1,61 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CSS/Shadows Medium smoke-test 1`] = ` +
+
+ xs +
+
+ sm +
+
+ md +
+
+ lg +
+
+ xl +
+
+`; + +exports[`CSS/Shadows Soft smoke-test 1`] = ` +
+
+ xs +
+
+ sm +
+
+ md +
+
+ lg +
+
+ xl +
+
+`; + +exports[`CSS/Shadows Strong smoke-test 1`] = ` +
+
+ xs +
+
+ sm +
+
+ md +
+
+ lg +
+
+ xl +
+
+`;