From f86da147ff846a896a906971d3f71ac6d4167fbd Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 19 Sep 2024 12:43:55 +0100 Subject: [PATCH 1/3] chore: add theming to ProductTile --- src/core/ProductTile.tsx | 27 ++++---- .../ProductTile.stories.tsx.snap | 66 +++++++++---------- src/core/ProductTile/data.ts | 10 +-- 3 files changed, 54 insertions(+), 49 deletions(-) diff --git a/src/core/ProductTile.tsx b/src/core/ProductTile.tsx index e0653de0..2c3fb134 100644 --- a/src/core/ProductTile.tsx +++ b/src/core/ProductTile.tsx @@ -1,7 +1,9 @@ import React from "react"; -import Icon from "./Icon"; +import EncapsulatedIcon from "./Icon/EncapsulatedIcon"; import FeaturedLink from "./FeaturedLink"; import { ProductName, products } from "./ProductTile/data"; +import { ColorClass } from "./styles/colors/types"; +import { determineThemeColor } from "./styles/colors/utils"; type ProductTileProps = { name: ProductName; @@ -20,23 +22,28 @@ const ProductTile = ({ }: ProductTileProps) => { const { icon, label, description, link, unavailable } = products[name] ?? {}; + const t = (color: ColorClass) => + determineThemeColor("dark", selected ? "light" : "dark", color); + return (
-
- {icon ? : null} +
+ {icon ? ( + + ) : null}

Ably{" "}

{label}

@@ -44,21 +51,19 @@ const ProductTile = ({
{unavailable ? (
-
+
COMING SOON
) : null}

{description}

{selected && link ? ( diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap index 24770ab7..9118fd95 100644 --- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap +++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap @@ -10,15 +10,15 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smok
-

+

Ably

-

+

PubSub

-

+

Low-level APIs to build any realtime experience

@@ -35,15 +35,15 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-

+

Ably

-

+

PubSub

-

+

Low-level APIs to build any realtime experience

@@ -56,15 +56,15 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-

+

Ably

-

+

Chat

-

+

Rapidly build chat features and roll-out at scale

@@ -77,15 +77,15 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-

+

Ably

-

+

Spaces

-

+

Create collaborative environments in a few lines of code

@@ -98,15 +98,15 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-

+

Ably

-

+

LiveSync

-

+

Sync database changes with frontend clients

@@ -119,25 +119,25 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-

+

Ably

-

+

Asset Tracking

-

+

Simple APIs to build realtime tracking applications

-

+

Ably

-

+

LiveObjects

@@ -147,7 +147,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = ` COMING SOON
-

+

Sync application state across multiple devices

@@ -165,7 +165,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-

+

Ably

@@ -198,15 +198,15 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `

-

+

Ably

-

+

Chat

-

+

Rapidly build chat features and roll-out at scale

@@ -219,7 +219,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-

+

Ably

@@ -252,15 +252,15 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `

-

+

Ably

-

+

LiveSync

-

+

Sync database changes with frontend clients

@@ -273,7 +273,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-

+

Ably

@@ -300,10 +300,10 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `

-

+

Ably

-

+

LiveObjects

@@ -313,7 +313,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = ` COMING SOON
-

+

Sync application state across multiple devices

diff --git a/src/core/ProductTile/data.ts b/src/core/ProductTile/data.ts index 185aa8cb..6b75c00a 100644 --- a/src/core/ProductTile/data.ts +++ b/src/core/ProductTile/data.ts @@ -23,31 +23,31 @@ export const products: Products = { pubsub: { label: "PubSub", description: "Low-level APIs to build any realtime experience", - icon: "icon-product-pubsub-encapsulated", + icon: "icon-product-pubsub", link: "/docs/products/channels", }, chat: { label: "Chat", description: "Rapidly build chat features and roll-out at scale", - icon: "icon-product-chat-encapsulated", + icon: "icon-product-chat", link: "/docs/products/chat", }, spaces: { label: "Spaces", description: "Create collaborative environments in a few lines of code", - icon: "icon-product-spaces-encapsulated", + icon: "icon-product-spaces", link: "/docs/products/spaces", }, liveSync: { label: "LiveSync", description: "Sync database changes with frontend clients", - icon: "icon-product-livesync-encapsulated", + icon: "icon-product-livesync", link: "/docs/products/livesync", }, assetTracking: { label: "Asset Tracking", description: "Simple APIs to build realtime tracking applications", - icon: "icon-product-asset-tracking-encapsulated", + icon: "icon-product-asset-tracking", link: "/docs/products/asset-tracking", }, liveObjects: { From 2ef7b829e30ec9fe48406190ff1c68decfa23b87 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 19 Sep 2024 12:46:18 +0100 Subject: [PATCH 2/3] feat: add EncapsulatedIcon --- src/core/Icon.tsx | 2 +- src/core/Icon/EncapsulatedIcon.tsx | 35 ++ src/core/Icon/Icon.stories.tsx | 32 +- .../Icon/__snapshots__/Icon.stories.tsx.snap | 308 ++++++++++++++---- src/core/Icon/types.ts | 6 - .../ProductTile.stories.tsx.snap | 252 +++++++++----- ...on-product-asset-tracking-encapsulated.svg | 15 - .../icons/icon-product-chat-encapsulated.svg | 20 -- .../icon-product-livesync-encapsulated.svg | 15 - .../icon-product-pubsub-encapsulated.svg | 21 -- .../icon-product-spaces-encapsulated.svg | 20 -- 11 files changed, 483 insertions(+), 243 deletions(-) create mode 100644 src/core/Icon/EncapsulatedIcon.tsx delete mode 100644 src/core/icons/icon-product-asset-tracking-encapsulated.svg delete mode 100644 src/core/icons/icon-product-chat-encapsulated.svg delete mode 100644 src/core/icons/icon-product-livesync-encapsulated.svg delete mode 100644 src/core/icons/icon-product-pubsub-encapsulated.svg delete mode 100644 src/core/icons/icon-product-spaces-encapsulated.svg diff --git a/src/core/Icon.tsx b/src/core/Icon.tsx index 740a5ae5..a6e4370e 100644 --- a/src/core/Icon.tsx +++ b/src/core/Icon.tsx @@ -4,7 +4,7 @@ import { IconName } from "./Icon/types"; import { ColorClass } from "./styles/colors/types"; import { convertTailwindClassToVar } from "./styles/colors/utils"; -type IconProps = { +export type IconProps = { name: IconName; size?: string; color?: ColorClass; diff --git a/src/core/Icon/EncapsulatedIcon.tsx b/src/core/Icon/EncapsulatedIcon.tsx new file mode 100644 index 00000000..709ab217 --- /dev/null +++ b/src/core/Icon/EncapsulatedIcon.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import Icon, { IconProps } from "../Icon"; +import { determineThemeColor } from "../styles/colors/utils"; +import { ColorClass, Theme } from "../styles/colors/types"; + +type EncapsulatedIconProps = { + theme?: Theme; + className?: string; +} & IconProps; + +const EncapsulatedIcon = ({ + theme = "dark", + size = "40px", + className, + ...iconProps +}: EncapsulatedIconProps) => { + const t = (color: ColorClass) => determineThemeColor("dark", theme, color); + const numericalSize = parseInt(size, 10); + + return ( +
+
+ +
+
+ ); +}; + +export default EncapsulatedIcon; diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx index 0921487f..c1f53723 100644 --- a/src/core/Icon/Icon.stories.tsx +++ b/src/core/Icon/Icon.stories.tsx @@ -1,7 +1,9 @@ import React from "react"; import Icon from "../Icon"; +import EncapsulatedIcon from "./EncapsulatedIcon"; import loadIcons from "../icons"; import { IconName, iconNames } from "./types"; +import { Theme } from "../styles/colors/types"; export default { title: "JS Components/Icon", @@ -12,7 +14,11 @@ export default { tags: ["autodocs"], }; -const renderIcons = (iconSet: IconName[]) => { +const renderIcons = ( + iconSet: IconName[], + encapsulated?: boolean, + theme?: Theme, +) => { loadIcons(); return ( @@ -25,12 +31,16 @@ const renderIcons = (iconSet: IconName[]) => { {icon}
- + {encapsulated ? ( + + ) : ( + + )}
@@ -88,3 +98,11 @@ export const IconWithSecondaryColor = { }, }, }; + +export const DarkEncapsulatedIcons = { + render: () => renderIcons([...iconNames.product], true), +}; + +export const LightEncapsulatedIcons = { + render: () => renderIcons([...iconNames.product], true, "light"), +}; diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap index 84e4effb..797b5639 100644 --- a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap +++ b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap @@ -1,5 +1,148 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = ` +
+
+ + icon-product-asset-tracking + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-chat + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-liveobjects + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-livesync + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-pubsub + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-spaces + +
+
+
+
+ + + + +
+
+
+
+
+
+`; + exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
@@ -1812,128 +1955,181 @@ exports[`JS Components/Icon IconWithSecondaryColor smoke-test 1`] = `
`; -exports[`JS Components/Icon Other smoke-test 1`] = ` +exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
- quote + icon-product-asset-tracking
- - - - +
+ + + + +
+
-
-`; - -exports[`JS Components/Icon ProductIcons smoke-test 1`] = ` -
- icon-product-asset-tracking + icon-product-chat
- - - - +
+ + + + +
+
- icon-product-chat + icon-product-liveobjects
- - - - +
+ + + + +
+
- icon-product-liveobjects + icon-product-livesync
- - - - +
+ + + + +
+
- icon-product-livesync + icon-product-pubsub
- - - - +
+ + + + +
+
- icon-product-pubsub + icon-product-spaces
- - - - +
+ + + + +
+
+ +`; + +exports[`JS Components/Icon Other smoke-test 1`] = ` +
- icon-product-spaces + quote
- +
+
+`; + +exports[`JS Components/Icon ProductIcons smoke-test 1`] = ` +
- icon-product-pubsub-encapsulated + icon-product-asset-tracking
- +
@@ -1941,14 +2137,14 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
- icon-product-chat-encapsulated + icon-product-chat
- +
@@ -1956,14 +2152,14 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
- icon-product-spaces-encapsulated + icon-product-liveobjects
- +
@@ -1971,14 +2167,14 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
- icon-product-livesync-encapsulated + icon-product-livesync
- +
@@ -1986,14 +2182,14 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
- icon-product-asset-tracking-encapsulated + icon-product-pubsub
- +
@@ -2001,14 +2197,14 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
- icon-product-liveobjects-encapsulated + icon-product-spaces
- +
diff --git a/src/core/Icon/types.ts b/src/core/Icon/types.ts index aefadceb..58effbcc 100644 --- a/src/core/Icon/types.ts +++ b/src/core/Icon/types.ts @@ -180,12 +180,6 @@ const productIcons = [ "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces", - "icon-product-pubsub-encapsulated", - "icon-product-chat-encapsulated", - "icon-product-spaces-encapsulated", - "icon-product-livesync-encapsulated", - "icon-product-asset-tracking-encapsulated", - "icon-product-liveobjects-encapsulated", ] as const; export const iconNames = { diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap index 9118fd95..387e61f4 100644 --- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap +++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap @@ -2,13 +2,21 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smoke-test 1`] = `
-
- +
- - - +
+ + + + +
+

Ably @@ -27,13 +35,21 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smok exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `

-
- +
- - - +
+ + + + +
+

Ably @@ -48,13 +64,21 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `

-
- +
- - - +
+ + + + +
+

Ably @@ -69,13 +93,21 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `

-
- +
- - - +
+ + + + +
+

Ably @@ -90,13 +122,21 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `

-
- +
- - - +
+ + + + +
+

Ably @@ -111,13 +151,21 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `

-
- +
- - - +
+ + + + +
+

Ably @@ -132,7 +180,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `

-
+

Ably @@ -143,7 +191,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `

-
+
COMING SOON
@@ -156,28 +204,36 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = ` exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
-
- +
+
- - - +
+ + + + +
+

Ably

-

+

PubSub

-

+

Low-level APIs to build any realtime experience

View docs @@ -190,13 +246,21 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
- +
- - - +
+ + + + +
+

Ably @@ -210,28 +274,36 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = ` Rapidly build chat features and roll-out at scale

-
-
- +
+
- - - +
+ + + + +
+

Ably

-

+

Spaces

-

+

Create collaborative environments in a few lines of code

Explore @@ -244,13 +316,21 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
- +
- - - +
+ + + + +
+

Ably @@ -264,28 +344,36 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = ` Sync database changes with frontend clients

-
-
- +
+
- - - +
+ + + + +
+

Ably

-

+

Asset Tracking

-

+

Simple APIs to build realtime tracking applications

Explore @@ -298,7 +386,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
+

Ably @@ -309,7 +397,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `

-
+
COMING SOON
diff --git a/src/core/icons/icon-product-asset-tracking-encapsulated.svg b/src/core/icons/icon-product-asset-tracking-encapsulated.svg deleted file mode 100644 index cb5c0337..00000000 --- a/src/core/icons/icon-product-asset-tracking-encapsulated.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/src/core/icons/icon-product-chat-encapsulated.svg b/src/core/icons/icon-product-chat-encapsulated.svg deleted file mode 100644 index 4965f978..00000000 --- a/src/core/icons/icon-product-chat-encapsulated.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/src/core/icons/icon-product-livesync-encapsulated.svg b/src/core/icons/icon-product-livesync-encapsulated.svg deleted file mode 100644 index 21e14254..00000000 --- a/src/core/icons/icon-product-livesync-encapsulated.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/src/core/icons/icon-product-pubsub-encapsulated.svg b/src/core/icons/icon-product-pubsub-encapsulated.svg deleted file mode 100644 index bdd4491e..00000000 --- a/src/core/icons/icon-product-pubsub-encapsulated.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/src/core/icons/icon-product-spaces-encapsulated.svg b/src/core/icons/icon-product-spaces-encapsulated.svg deleted file mode 100644 index 2818dbb6..00000000 --- a/src/core/icons/icon-product-spaces-encapsulated.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - From 4ae83dca9923cc168fddc631e2cc43c77ec0e8eb Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Thu, 19 Sep 2024 13:52:46 +0100 Subject: [PATCH 3/3] chore: update product tile snapshots --- .../__snapshots__/ProductTile.stories.tsx.snap | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap index 387e61f4..73136d83 100644 --- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap +++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap @@ -224,12 +224,12 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `

Ably

-

+

PubSub

-

+

Low-level APIs to build any realtime experience

Ably

-

+

Spaces

-

+

Create collaborative environments in a few lines of code

Ably

-

+

Asset Tracking

-

+

Simple APIs to build realtime tracking applications