From 5de036c63a9c22a5215bbbce666a5f2a2cd61593 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Tue, 7 Jan 2025 16:40:30 +0000 Subject: [PATCH 1/3] feat: add description labels to Status --- src/core/Status.tsx | 40 +++++++++++++++------ src/core/Status/Status.stories.tsx | 57 +++++++++++++++++++++--------- 2 files changed, 70 insertions(+), 27 deletions(-) diff --git a/src/core/Status.tsx b/src/core/Status.tsx index 701bfbfd1..526d1b4b1 100644 --- a/src/core/Status.tsx +++ b/src/core/Status.tsx @@ -1,6 +1,17 @@ import React from "react"; import useSWR from "swr"; import cn from "./utils/cn"; +import Icon from "./Icon"; + +type StatusProps = { + statusUrl: string; + additionalCSS?: string; + refreshInterval?: number; + showDescription?: boolean; +}; + +export const StatusUrl = + "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json"; // Our SWR fetcher function const fetcher = (url: string) => fetch(url).then((res) => res.json()); @@ -25,10 +36,7 @@ const indicatorClass = (indicator?: string) => { export const StatusIcon = ({ statusUrl, refreshInterval = 1000 * 60, -}: { - statusUrl: string; - refreshInterval?: number; -}) => { +}: StatusProps) => { const { data, error, isLoading } = useSWR(statusUrl, fetcher, { refreshInterval, }); @@ -45,18 +53,22 @@ export const StatusIcon = ({ }; const Status = ({ - statusUrl, + statusUrl = StatusUrl, additionalCSS, refreshInterval = 1000 * 60, -}: { - statusUrl: string; - additionalCSS?: string; - refreshInterval?: number; -}) => { + showDescription = false, +}: StatusProps) => { + const { data } = useSWR(statusUrl, fetcher, { + refreshInterval, + }); + return ( @@ -64,6 +76,12 @@ const Status = ({ statusUrl={statusUrl} refreshInterval={refreshInterval ?? 1000 * 60} /> + {showDescription && data?.status?.description && ( +
+ {data.status.description} + +
+ )} ); }; diff --git a/src/core/Status/Status.stories.tsx b/src/core/Status/Status.stories.tsx index 0880ea9c1..e573c13ff 100644 --- a/src/core/Status/Status.stories.tsx +++ b/src/core/Status/Status.stories.tsx @@ -1,15 +1,13 @@ import React from "react"; import { delay, http, HttpResponse } from "msw"; import { SWRConfig } from "swr"; -import Status from "../Status"; - -const statusUrl = "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json"; +import Status, { StatusUrl } from "../Status"; export default { title: "Components/Status", component: Status, args: { - statusUrl, + statusUrl: StatusUrl, }, tags: ["!autodocs"], }; @@ -18,16 +16,34 @@ const withEmptySWRCache = (component: JSX.Element) => ( new Map() }}>{component} ); +const getStatusDescription = (indicator: string): string => { + switch (indicator) { + case "none": + case "operational": + return "All Systems Operational"; + case "major": + return "Partial System Outage"; + case "minor": + return "Minor Service Outage"; + case "critical": + return "Major System Outage"; + case "unknown": + default: + return "Unknown Status"; + } +}; + export const Loading = { parameters: { msw: { handlers: { - statusNone: http.get(statusUrl, async () => { + statusNone: http.get(StatusUrl, async () => { await delay("infinite"); return HttpResponse.json({ status: { indicator: "will never arrive", + description: "Loading...", }, }); }), @@ -35,33 +51,34 @@ export const Loading = { }, }, render: () => - withEmptySWRCache(), + withEmptySWRCache(), }; export const Error = { parameters: { msw: { handlers: { - statusError: http.get(statusUrl, () => { + statusError: http.get(StatusUrl, () => { return HttpResponse.error(); }), }, }, }, render: () => - withEmptySWRCache(), + withEmptySWRCache(), }; const mockParametersWithStatus = (indicator: string) => { return { msw: { handlers: { - status: http.get(statusUrl, async () => { + status: http.get(StatusUrl, async () => { await delay(); return HttpResponse.json({ status: { - indicator: indicator, + indicator, + description: getStatusDescription(indicator), }, }); }), @@ -73,35 +90,43 @@ const mockParametersWithStatus = (indicator: string) => { export const None = { parameters: mockParametersWithStatus("none"), render: () => - withEmptySWRCache(), + withEmptySWRCache(), }; export const Operational = { parameters: mockParametersWithStatus("operational"), render: () => - withEmptySWRCache(), + withEmptySWRCache(), }; export const Minor = { parameters: mockParametersWithStatus("minor"), render: () => - withEmptySWRCache(), + withEmptySWRCache(), }; export const Major = { parameters: mockParametersWithStatus("major"), render: () => - withEmptySWRCache(), + withEmptySWRCache(), }; export const Critical = { parameters: mockParametersWithStatus("critical"), render: () => - withEmptySWRCache(), + withEmptySWRCache(), }; export const Unknown = { parameters: mockParametersWithStatus("unknown"), render: () => - withEmptySWRCache(), + withEmptySWRCache(), +}; + +export const WithDescription = { + parameters: mockParametersWithStatus("operational"), + render: () => + withEmptySWRCache( + , + ), }; From 6ad6fa33783154a6245102ff2965fb129c4eee02 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Tue, 7 Jan 2025 16:46:25 +0000 Subject: [PATCH 2/3] fix: set correct background on pricing card pill background --- src/core/Pricing/PricingCards.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx index 82559918c..9e5c6a2ef 100644 --- a/src/core/Pricing/PricingCards.tsx +++ b/src/core/Pricing/PricingCards.tsx @@ -72,7 +72,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => { > = { neutral: { border: "border-neutral-600 dark:border-neutral-700", - bg: "border-neutral-600 dark:bg-neutral-700", + bg: "bg-neutral-600 dark:bg-neutral-700", }, blue: { border: "border-blue-400 dark:border-blue-600", From 1787218ea9efdd3bac2b640a8e08d4f59e19b1ff Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Tue, 7 Jan 2025 16:56:31 +0000 Subject: [PATCH 3/3] chore: update version to 15.1.13 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7b8c69150..b452aab36 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ably/ui", - "version": "15.1.12", + "version": "15.1.13", "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",