From f731417220cc49dea81ff28c8e67775021a3bd1e Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Thu, 20 Jun 2024 16:51:09 +0100 Subject: [PATCH 01/25] Add status bold tokens --- .changeset/afraid-jobs-do.md | 12 ++++++ .storybook/preview.tsx | 37 +++++++++------- .../theme/css/characteristics/status-next.css | 5 +++ packages/theme/css/characteristics/status.css | 5 +++ packages/theme/css/palette/error.css | 2 + packages/theme/css/palette/info.css | 2 + packages/theme/css/palette/success.css | 2 + packages/theme/css/palette/warning.css | 2 + .../theme/stories/characteristics/status.mdx | 42 +++++++++++++++++++ 9 files changed, 95 insertions(+), 14 deletions(-) create mode 100644 .changeset/afraid-jobs-do.md create mode 100644 packages/theme/stories/characteristics/status.mdx diff --git a/.changeset/afraid-jobs-do.md b/.changeset/afraid-jobs-do.md new file mode 100644 index 0000000000..fd79a9239a --- /dev/null +++ b/.changeset/afraid-jobs-do.md @@ -0,0 +1,12 @@ +--- +"@salt-ds/theme": minor +--- + +Added status bold background tokens + +``` +--salt-status-info-bold-background +--salt-status-error-bold-background +--salt-status-warning-bold-background +--salt-status-success-bold-background +``` diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index dc5016de19..db85e47e50 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -22,7 +22,7 @@ import { withResponsiveWrapper } from "docs/decorators/withResponsiveWrapper"; import { WithTextSpacingWrapper } from "docs/decorators/withTextSpacingWrapper"; import { withScaffold } from "docs/decorators/withScaffold"; import { withDateMock } from "docs/decorators/withDateMock"; -import { SaltProvider } from "@salt-ds/core"; +import { SaltProvider, UNSTABLE_SaltProviderNext } from "@salt-ds/core"; import { DocsContainer } from "@storybook/addon-docs"; import { initialize, mswLoader } from "msw-storybook-addon"; @@ -147,20 +147,29 @@ export const parameters: Parameters = { children, context, ...rest - }: ComponentProps) => ( - - ) => { + const ChosenProvider = + /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */ + context.store.globals.globals?.themeNext === "enable" + ? UNSTABLE_SaltProviderNext + : SaltProvider; + return ( + + - {children} - - - ), + mode={context.store.globals.globals?.mode} + enableStyleInjection={ + /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */ + context.store.globals.globals?.styleInjection === "enable" + } + /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */ + accent={context.store.globals.globals?.accent} + > + {children} + + + ); + }, }, // disables snapshotting on a global level chromatic: { disableSnapshot: true }, diff --git a/packages/theme/css/characteristics/status-next.css b/packages/theme/css/characteristics/status-next.css index 31710238e4..08a74b1193 100644 --- a/packages/theme/css/characteristics/status-next.css +++ b/packages/theme/css/characteristics/status-next.css @@ -23,6 +23,11 @@ --salt-status-warning-background: var(--salt-palette-warning-weak); --salt-status-error-background: var(--salt-palette-negative-weak); + --salt-status-info-bold-background: var(--salt-palette-info); + --salt-status-error-bold-background: var(--salt-palette-negative); + --salt-status-warning-bold-background: var(--salt-palette-warning); + --salt-status-success-bold-background: var(--salt-palette-positive); + --salt-status-success-background-selected: var(--salt-palette-positive-weak); --salt-status-warning-background-selected: var(--salt-palette-warning-weak); --salt-status-error-background-selected: var(--salt-palette-negative-weak); diff --git a/packages/theme/css/characteristics/status.css b/packages/theme/css/characteristics/status.css index 15b27be640..e213e47e3b 100644 --- a/packages/theme/css/characteristics/status.css +++ b/packages/theme/css/characteristics/status.css @@ -23,6 +23,11 @@ --salt-status-warning-background: var(--salt-palette-warning-background); --salt-status-success-background: var(--salt-palette-success-background); + --salt-status-info-bold-background: var(--salt-palette-info-bold-background); + --salt-status-error-bold-background: var(--salt-palette-error-bold-background); + --salt-status-warning-bold-background: var(--salt-palette-warning-bold-background); + --salt-status-success-bold-background: var(--salt-palette-success-bold-background); + --salt-status-error-background-selected: var(--salt-palette-error-background-selected); --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected); --salt-status-success-background-selected: var(--salt-palette-success-background-selected); diff --git a/packages/theme/css/palette/error.css b/packages/theme/css/palette/error.css index 521bf50705..06861bb1a7 100644 --- a/packages/theme/css/palette/error.css +++ b/packages/theme/css/palette/error.css @@ -1,5 +1,6 @@ .salt-theme[data-mode="light"] { --salt-palette-error-background: var(--salt-color-red-10); + --salt-palette-error-bold-background: var(--salt-color-red-500); --salt-palette-error-background-selected: var(--salt-color-red-20); --salt-palette-error-border: var(--salt-color-red-500); --salt-palette-error-foreground-decorative: var(--salt-color-red-500); @@ -8,6 +9,7 @@ .salt-theme[data-mode="dark"] { --salt-palette-error-background: var(--salt-color-red-900); + --salt-palette-error-bold-background: var(--salt-color-red-500); --salt-palette-error-background-selected: var(--salt-color-red-900); --salt-palette-error-border: var(--salt-color-red-400); --salt-palette-error-foreground-decorative: var(--salt-color-red-400); diff --git a/packages/theme/css/palette/info.css b/packages/theme/css/palette/info.css index 1b0d87e547..a64da046ff 100644 --- a/packages/theme/css/palette/info.css +++ b/packages/theme/css/palette/info.css @@ -1,5 +1,6 @@ .salt-theme[data-mode="light"] { --salt-palette-info-background: var(--salt-color-blue-10); + --salt-palette-info-bold-background: var(--salt-color-blue-500); --salt-palette-info-border: var(--salt-color-blue-500); --salt-palette-info-foreground-decorative: var(--salt-color-blue-500); --salt-palette-info-foreground-informative: var(--salt-color-blue-600); @@ -7,6 +8,7 @@ .salt-theme[data-mode="dark"] { --salt-palette-info-background: var(--salt-color-blue-900); + --salt-palette-info-bold-background: var(--salt-color-blue-500); --salt-palette-info-border: var(--salt-color-blue-400); --salt-palette-info-foreground-decorative: var(--salt-color-blue-400); --salt-palette-info-foreground-informative: var(--salt-color-blue-200); diff --git a/packages/theme/css/palette/success.css b/packages/theme/css/palette/success.css index 3e8ebde567..01d7af398e 100644 --- a/packages/theme/css/palette/success.css +++ b/packages/theme/css/palette/success.css @@ -1,5 +1,6 @@ .salt-theme[data-mode="light"] { --salt-palette-success-background: var(--salt-color-green-10); + --salt-palette-success-bold-background: var(--salt-color-green-500); --salt-palette-success-background-selected: var(--salt-color-green-20); --salt-palette-success-border: var(--salt-color-green-500); --salt-palette-success-foreground-decorative: var(--salt-color-green-500); @@ -8,6 +9,7 @@ .salt-theme[data-mode="dark"] { --salt-palette-success-background: var(--salt-color-green-900); + --salt-palette-success-bold-background: var(--salt-color-green-500); --salt-palette-success-background-selected: var(--salt-color-green-900); --salt-palette-success-border: var(--salt-color-green-400); --salt-palette-success-foreground-decorative: var(--salt-color-green-400); diff --git a/packages/theme/css/palette/warning.css b/packages/theme/css/palette/warning.css index 9862ef9a13..584c841e08 100644 --- a/packages/theme/css/palette/warning.css +++ b/packages/theme/css/palette/warning.css @@ -1,5 +1,6 @@ .salt-theme[data-mode="light"] { --salt-palette-warning-background: var(--salt-color-orange-10); + --salt-palette-warning-bold-background: var(--salt-color-orange-800); --salt-palette-warning-background-selected: var(--salt-color-orange-20); --salt-palette-warning-border: var(--salt-color-orange-700); --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700); @@ -8,6 +9,7 @@ .salt-theme[data-mode="dark"] { --salt-palette-warning-background: var(--salt-color-orange-900); + --salt-palette-warning-bold-background: var(--salt-color-orange-800); --salt-palette-warning-background-selected: var(--salt-color-orange-900); --salt-palette-warning-border: var(--salt-color-orange-500); --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500); diff --git a/packages/theme/stories/characteristics/status.mdx b/packages/theme/stories/characteristics/status.mdx new file mode 100644 index 0000000000..efbc3fd05b --- /dev/null +++ b/packages/theme/stories/characteristics/status.mdx @@ -0,0 +1,42 @@ +import { Meta } from "@storybook/blocks"; +import { ColorContainer } from "docs/components/ColorContainer"; +import { ColorItem, ColorPalette } from "@storybook/blocks"; + + + +# Status + +## Bold Background + + + + + + + + + From 7291fcfc25065998841ad59e80aaf9b14f809fcf Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Tue, 2 Jul 2024 11:41:53 +0530 Subject: [PATCH 02/25] added system status component and storybook example --- packages/core/src/index.ts | 1 + .../core/src/system-status/SystemStatus.css | 48 +++++++++++++ .../core/src/system-status/SystemStatus.tsx | 47 +++++++++++++ .../src/system-status/SystemStatusActions.css | 6 ++ .../src/system-status/SystemStatusActions.tsx | 34 ++++++++++ .../src/system-status/SystemStatusContent.css | 6 ++ .../src/system-status/SystemStatusContent.tsx | 34 ++++++++++ packages/core/src/system-status/index.tsx | 3 + .../system-status.qa.stories.tsx | 56 +++++++++++++++ .../system-status.stories.tsx | 68 +++++++++++++++++++ 10 files changed, 303 insertions(+) create mode 100644 packages/core/src/system-status/SystemStatus.css create mode 100644 packages/core/src/system-status/SystemStatus.tsx create mode 100644 packages/core/src/system-status/SystemStatusActions.css create mode 100644 packages/core/src/system-status/SystemStatusActions.tsx create mode 100644 packages/core/src/system-status/SystemStatusContent.css create mode 100644 packages/core/src/system-status/SystemStatusContent.tsx create mode 100644 packages/core/src/system-status/index.tsx create mode 100644 packages/core/stories/system-status-story/system-status.qa.stories.tsx create mode 100644 packages/core/stories/system-status-story/system-status.stories.tsx diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 43ce1577a4..f0d5721fff 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -54,6 +54,7 @@ export * from "./theme"; export * from "./toast"; export * from "./salt-provider"; export * from "./split-layout"; +export * from "./system-status"; export * from "./switch"; export * from "./tag"; export * from "./toggle-button"; diff --git a/packages/core/src/system-status/SystemStatus.css b/packages/core/src/system-status/SystemStatus.css new file mode 100644 index 0000000000..8b49d53ee7 --- /dev/null +++ b/packages/core/src/system-status/SystemStatus.css @@ -0,0 +1,48 @@ +/* Styles applied to root component */ +.saltSystemStatus { + --saltIcon-color: var(--salt-content-bold-foreground); + + background: var(--saltSystemStatus-background, var(--systemStatus-background)); + border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor)); + border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-border)); + border-style: var(--saltSystemStatus-borderStyle, var(--salt-container-borderStyle)); + box-sizing: border-box; + display: inline-flex; + gap: var(--salt-spacing-75); + padding: var(--saltSystemStatus-padding, var(--salt-spacing-50) var(--salt-spacing-100)); + width: 100%; + min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + font-family: var(--salt-text-fontFamily); + font-size: var(--salt-text-fontSize); + font-weight: var(--salt-text-fontWeight); + line-height: var(--salt-text-lineHeight); +} + +/* Styles applied to icon */ +.saltSystemStatus-icon.saltIcon { + min-height: var(--salt-size-base); +} + +/* Styles applied when state = "info" */ +.saltSystemStatus-info { + --systemStatus-borderColor: var(--salt-status-info-bold-background); + --systemStatus-background: var(--salt-status-info-bold-background); +} + +/* Styles applied when state = "error" */ +.saltSystemStatus-error { + --systemStatus-borderColor: var(--salt-status-error-bold-background); + --systemStatus-background: var(--salt-status-error-bold-background); +} + +/* Styles applied when state = "warning" */ +.saltSystemStatus-warning { + --systemStatus-borderColor: var(--salt-status-warning-bold-background); + --systemStatus-background: var(--salt-status-warning-bold-background); +} + +/* Styles applied when state = "success" */ +.saltSystemStatus-success { + --systemStatus-borderColor: var(--salt-status-success-bold-background); + --systemStatus-background: var(--salt-status-success-bold-background); +} diff --git a/packages/core/src/system-status/SystemStatus.tsx b/packages/core/src/system-status/SystemStatus.tsx new file mode 100644 index 0000000000..d6c01f71d6 --- /dev/null +++ b/packages/core/src/system-status/SystemStatus.tsx @@ -0,0 +1,47 @@ +import { forwardRef, HTMLAttributes } from "react"; +import { makePrefixer } from "../utils"; +import { StatusIndicator, ValidationStatus } from "../status-indicator"; +import { clsx } from "clsx"; + +import { useWindow } from "@salt-ds/window"; +import { useComponentCssInjection } from "@salt-ds/styles"; + +import systemStatusCss from "./SystemStatus.css"; + +export interface SystemStatusProps extends HTMLAttributes { + /** + * Emphasize the styling by applying a background color: defaults to false + */ + /** + * A string to determine the current state of the SystemStatus + */ + status?: ValidationStatus; +} + +const withBaseName = makePrefixer("saltSystemStatus"); + +export const SystemStatus = forwardRef( + function SystemStatus( + { children, className, status = "info", ...rest }, + ref + ) { + const targetWindow = useWindow(); + useComponentCssInjection({ + testId: "salt-system-status", + css: systemStatusCss, + window: targetWindow, + }); + + return ( +
+ + {children} +
+ ); + } +); diff --git a/packages/core/src/system-status/SystemStatusActions.css b/packages/core/src/system-status/SystemStatusActions.css new file mode 100644 index 0000000000..fa656d1b27 --- /dev/null +++ b/packages/core/src/system-status/SystemStatusActions.css @@ -0,0 +1,6 @@ +.saltSystemStatus { + margin-bottom: auto; + display: flex; + gap: var(--salt-spacing-100); + min-height: var(--salt-size-base); +} diff --git a/packages/core/src/system-status/SystemStatusActions.tsx b/packages/core/src/system-status/SystemStatusActions.tsx new file mode 100644 index 0000000000..0a77a04155 --- /dev/null +++ b/packages/core/src/system-status/SystemStatusActions.tsx @@ -0,0 +1,34 @@ +import { ComponentPropsWithoutRef, forwardRef, ReactNode } from "react"; +import { clsx } from "clsx"; +import { makePrefixer } from "../utils"; + +import systemStatusActionsCss from "./SystemStatusActions.css"; +import { useComponentCssInjection } from "@salt-ds/styles"; +import { useWindow } from "@salt-ds/window"; + +const withBaseName = makePrefixer("saltSystemStatusActions"); + +interface SystemStatusActionsProps extends ComponentPropsWithoutRef<"div"> { + /** + * The content of SystemStatusActions + */ + children: ReactNode; +} + +export const SystemStatusActions = forwardRef< + HTMLDivElement, + SystemStatusActionsProps +>(function SystemStatusActions(props, ref) { + const { className, ...rest } = props; + + const targetWindow = useWindow(); + useComponentCssInjection({ + testId: "salt-system-status-actions", + css: systemStatusActionsCss, + window: targetWindow, + }); + + return ( +
+ ); +}); diff --git a/packages/core/src/system-status/SystemStatusContent.css b/packages/core/src/system-status/SystemStatusContent.css new file mode 100644 index 0000000000..0099e9ddca --- /dev/null +++ b/packages/core/src/system-status/SystemStatusContent.css @@ -0,0 +1,6 @@ +/* Styles applied to BannerContent */ +.saltSystemStatusContent { + flex: 1 0; + margin: var(--salt-spacing-75) 0; + color: var(--salt-content-bold-foreground); +} diff --git a/packages/core/src/system-status/SystemStatusContent.tsx b/packages/core/src/system-status/SystemStatusContent.tsx new file mode 100644 index 0000000000..6b20683dc5 --- /dev/null +++ b/packages/core/src/system-status/SystemStatusContent.tsx @@ -0,0 +1,34 @@ +import { ComponentPropsWithoutRef, forwardRef, ReactNode } from "react"; +import { clsx } from "clsx"; +import { makePrefixer } from "../utils"; + +import systemStatusContentCss from "./SystemStatusContent.css"; +import { useComponentCssInjection } from "@salt-ds/styles"; +import { useWindow } from "@salt-ds/window"; + +const withBaseName = makePrefixer("saltSystemStatusContent"); + +interface SystemStatusContentProps extends ComponentPropsWithoutRef<"div"> { + /** + * The content of SystemStatusContent + */ + children: ReactNode; +} + +export const SystemStatusContent = forwardRef< + HTMLDivElement, + SystemStatusContentProps +>(function SystemStatusContent(props, ref) { + const { className, ...rest } = props; + + const targetWindow = useWindow(); + useComponentCssInjection({ + testId: "salt-system-status-content", + css: systemStatusContentCss, + window: targetWindow, + }); + + return ( +
+ ); +}); diff --git a/packages/core/src/system-status/index.tsx b/packages/core/src/system-status/index.tsx new file mode 100644 index 0000000000..8f485878a5 --- /dev/null +++ b/packages/core/src/system-status/index.tsx @@ -0,0 +1,3 @@ +export * from "./SystemStatus"; +export * from "./SystemStatusContent"; +export * from "./SystemStatusActions"; diff --git a/packages/core/stories/system-status-story/system-status.qa.stories.tsx b/packages/core/stories/system-status-story/system-status.qa.stories.tsx new file mode 100644 index 0000000000..1ca5c665d3 --- /dev/null +++ b/packages/core/stories/system-status-story/system-status.qa.stories.tsx @@ -0,0 +1,56 @@ +import { FC } from "react"; +import { + SystemStatus, + SystemStatusProps, + SystemStatusContent, +} from "@salt-ds/core"; +import { Meta, StoryFn } from "@storybook/react"; +import { QAContainer } from "docs/components"; + +export default { + title: "Core/System Status/System Status QA", + component: SystemStatus, +} as Meta; + +const BasicSystemStatusExample: FC = ({ status }) => { + return ( + + Example custom renderer + + ); +}; + +const InfoSystemStatus = () => ; +const ErrorSystemStatus = () => ; +const WarningSystemStatus = () => ( + +); +const SuccessSystemStatus = () => ( + +); + +export const ExamplesGrid: StoryFn = (props) => ( + + + + + + +); + +ExamplesGrid.parameters = { + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disabled", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, +}; diff --git a/packages/core/stories/system-status-story/system-status.stories.tsx b/packages/core/stories/system-status-story/system-status.stories.tsx new file mode 100644 index 0000000000..1d4faba141 --- /dev/null +++ b/packages/core/stories/system-status-story/system-status.stories.tsx @@ -0,0 +1,68 @@ +import { Meta, StoryFn } from "@storybook/react"; +import { + SystemStatus, + SystemStatusContent, + StackLayout, + Text, +} from "@salt-ds/core"; + +export default { + title: "Core/System Status", + component: SystemStatus, +} as Meta; + +export const Info: StoryFn = (props) => ( +
+ + + New feature updates are available + + +
+); + +export const Success: StoryFn = (props) => ( +
+ + + Your operation was completed successfully. + + +
+); + +export const Error: StoryFn = (props) => ( +
+ + + System failure. Please try again. + + +
+); + +export const Warning: StoryFn = (props) => ( +
+ + + The system will be down for scheduled maintenance starting Friday, June + 21 from 11:00PM EST – 1:00AM EST Saturday, June 22 + + +
+); + +export const WithTitle: StoryFn = (props) => ( +
+ + + + + Connection interrupted + + Please refresh the page. + + + +
+); From e7b3b6e79e3f5148ac5cc2340a3984da7adfe357 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Tue, 2 Jul 2024 16:43:38 +0530 Subject: [PATCH 03/25] added site docs --- .../system-status.stories.tsx | 12 ++-- .../system-status/accessibility.mdx | 15 +++++ .../components/system-status/examples.mdx | 55 +++++++++++++++++ site/docs/components/system-status/index.mdx | 14 +++++ site/docs/components/system-status/usage.mdx | 61 +++++++++++++++++++ site/src/examples/system-status/Error.tsx | 18 ++++++ site/src/examples/system-status/Info.tsx | 17 ++++++ site/src/examples/system-status/Success.tsx | 12 ++++ site/src/examples/system-status/Warning.tsx | 15 +++++ site/src/examples/system-status/WithTitle.tsx | 22 +++++++ site/src/examples/system-status/index.ts | 5 ++ 11 files changed, 241 insertions(+), 5 deletions(-) create mode 100644 site/docs/components/system-status/accessibility.mdx create mode 100644 site/docs/components/system-status/examples.mdx create mode 100644 site/docs/components/system-status/index.mdx create mode 100644 site/docs/components/system-status/usage.mdx create mode 100644 site/src/examples/system-status/Error.tsx create mode 100644 site/src/examples/system-status/Info.tsx create mode 100644 site/src/examples/system-status/Success.tsx create mode 100644 site/src/examples/system-status/Warning.tsx create mode 100644 site/src/examples/system-status/WithTitle.tsx create mode 100644 site/src/examples/system-status/index.ts diff --git a/packages/core/stories/system-status-story/system-status.stories.tsx b/packages/core/stories/system-status-story/system-status.stories.tsx index 1d4faba141..a789d6a67b 100644 --- a/packages/core/stories/system-status-story/system-status.stories.tsx +++ b/packages/core/stories/system-status-story/system-status.stories.tsx @@ -15,7 +15,7 @@ export const Info: StoryFn = (props) => (
- New feature updates are available + New feature updates are available
@@ -25,7 +25,7 @@ export const Success: StoryFn = (props) => (
- Your operation was completed successfully. + Your operation was completed successfully.
@@ -35,7 +35,7 @@ export const Error: StoryFn = (props) => (
- System failure. Please try again. + System failure. Please try again.
@@ -45,8 +45,10 @@ export const Warning: StoryFn = (props) => (
- The system will be down for scheduled maintenance starting Friday, June - 21 from 11:00PM EST – 1:00AM EST Saturday, June 22 + + The system will be down for scheduled maintenance starting Friday, + June 21 from 11:00PM EST – 1:00AM EST Saturday, June 22 +
diff --git a/site/docs/components/system-status/accessibility.mdx b/site/docs/components/system-status/accessibility.mdx new file mode 100644 index 0000000000..3ca3b6577a --- /dev/null +++ b/site/docs/components/system-status/accessibility.mdx @@ -0,0 +1,15 @@ +--- +title: + $ref: ./#/title +layout: DetailComponent +sidebar: + exclude: true +data: + $ref: ./#/data +--- + +## Best practices + +- Use the aria-live="assertive" attribute for error messages to ensure they are announced immediately, interrupting any ongoing speech to alert the user to critical issues requiring immediate attention. + +- Use the aria-live="polite" attribute for informational and warning messages, allowing the screen reader to announce these messages at the next available pause, ensuring the user is informed without disrupting their current task. diff --git a/site/docs/components/system-status/examples.mdx b/site/docs/components/system-status/examples.mdx new file mode 100644 index 0000000000..c6a56babf3 --- /dev/null +++ b/site/docs/components/system-status/examples.mdx @@ -0,0 +1,55 @@ +--- +title: + $ref: ./#/title +layout: DetailComponent +sidebar: + exclude: true +data: + $ref: ./#/data +--- + + + + + +## Info + +Use the info `SystemStatus` status to communicate important updates or new features that do not require immediate action. + + + + + +## Error + +Use error `SystemStatus` for critical issues that affect the user's ability to access or use the platform. When relevant, add a secondary action to help resolve the issue. + + + + + +## Warning + +Warnings announce scheduled outages or events that might impact the product experience, but don't prevent the user from using the application or completing their current workflow. + +Use warning `SystemStatus` to alert users about potential issues. + + + + + +## Success + +Use success `SystemStatus` to communicate successfully completed system actions. + + + + + +## With Title + +Use a title in a `SystemStatus` to highlight important information, and use description text to provide supporting details. + + + + diff --git a/site/docs/components/system-status/index.mdx b/site/docs/components/system-status/index.mdx new file mode 100644 index 0000000000..1fd9c8a15e --- /dev/null +++ b/site/docs/components/system-status/index.mdx @@ -0,0 +1,14 @@ +--- +title: System status +data: + description: "`SystemStatus` communicates essential platform-wide information or alerts, such as system maintenance or outages. These messages are designed to be quickly noticed and prompt users to take action if needed. `SystemStatus` offers 4 severity levels, each with a dedicated icon and color; `info`, `success`, `warning` and `error`. " + sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/system-status" + package: + name: "@salt-ds/core" + initialVersion: "1.0.0" + alsoKnownAs: + [ "System Message"] + relatedComponents:[] + +layout: DetailComponent +--- diff --git a/site/docs/components/system-status/usage.mdx b/site/docs/components/system-status/usage.mdx new file mode 100644 index 0000000000..4495a0acd6 --- /dev/null +++ b/site/docs/components/system-status/usage.mdx @@ -0,0 +1,61 @@ +--- +title: + $ref: ./#/title +layout: DetailComponent +sidebar: + exclude: true +data: + $ref: ./#/data +--- + +## Using the component + +The primary purpose of the `SystemStatus` is to provide information and, if necessary, prompt further action. + +We advise against embedding excessive content into the system status due to potential color contrast issues. If you need to include additional components within the system status, it will be the responsibility of the application team to ensure accessibility compliance. + +### When to use + +- To show a notification that applies to the user’s current task or workflow. + +### When not to use + +- To inform users about critical system-wide issues, security updates or vulnerabilities that require immediate attention. +- To notify users about new system-wide features or enhancements. +- To alert users about planned maintenance schedules and potential service disruptions affecting the entire platform. + +### When not to use + +- For general updates or information that requires immediate user action. +- For inline messaging. Instead, use `Banner`. +- To show a notification that applies to the user’s current task or workflow. Use `Banner` instead. +- To communicate when content is loading, instead use the Content Status pattern. +- When the notification requires immediate action and relates to the user’s current task. Instead, use `Dialog` to interrupt the user's workflow. + +## Content + +A `SystemStatus` typically has one or two lines of text. Make content short, clear, and concise, allowing users to quickly understand the situation and/or next steps. + +Body Default applies to the content, however, if titles are necessary, configure them to display the Body Strong typography style across densities. See the typography foundation for more information. + +## Import + +To import `SystemStatus` and related components from the core Salt package, use: + +``` +import { SystemStatus, SystemStatusContent, SystemStatusActions } from "@salt-ds/core"; +``` + +## Props + +### `SystemStatus` + + + +### `SystemStatusContent` + + + +### `SystemStatusActions` + + diff --git a/site/src/examples/system-status/Error.tsx b/site/src/examples/system-status/Error.tsx new file mode 100644 index 0000000000..caad3e760f --- /dev/null +++ b/site/src/examples/system-status/Error.tsx @@ -0,0 +1,18 @@ +import { ReactElement } from "react"; +import { + SystemStatus, + SystemStatusContent, + Button, + StackLayout, + Text, +} from "@salt-ds/core"; + +export const Error = (): ReactElement => ( +
+ + + System failure. Please try again. + + +
+); diff --git a/site/src/examples/system-status/Info.tsx b/site/src/examples/system-status/Info.tsx new file mode 100644 index 0000000000..d1223b78fb --- /dev/null +++ b/site/src/examples/system-status/Info.tsx @@ -0,0 +1,17 @@ +import { ReactElement } from "react"; +import { + SystemStatus, + SystemStatusContent, + StackLayout, + Text, +} from "@salt-ds/core"; + +export const Info = (): ReactElement => ( +
+ + + New feature updates are available + + +
+); diff --git a/site/src/examples/system-status/Success.tsx b/site/src/examples/system-status/Success.tsx new file mode 100644 index 0000000000..55f34e2ff2 --- /dev/null +++ b/site/src/examples/system-status/Success.tsx @@ -0,0 +1,12 @@ +import { ReactElement } from "react"; +import { SystemStatus, SystemStatusContent, Text } from "@salt-ds/core"; + +export const Success = (): ReactElement => ( +
+ + + Your operation was completed successfully. + + +
+); diff --git a/site/src/examples/system-status/Warning.tsx b/site/src/examples/system-status/Warning.tsx new file mode 100644 index 0000000000..0a24b2dfe0 --- /dev/null +++ b/site/src/examples/system-status/Warning.tsx @@ -0,0 +1,15 @@ +import { ReactElement } from "react"; +import { SystemStatus, SystemStatusContent, Text } from "@salt-ds/core"; + +export const Warning = (): ReactElement => ( +
+ + + + The system will be down for scheduled maintenance starting Friday, + June 21 from 11:00PM EST – 1:00AM EST Saturday, June 22 + + + +
+); diff --git a/site/src/examples/system-status/WithTitle.tsx b/site/src/examples/system-status/WithTitle.tsx new file mode 100644 index 0000000000..7412c9bb5e --- /dev/null +++ b/site/src/examples/system-status/WithTitle.tsx @@ -0,0 +1,22 @@ +import { + SystemStatus, + SystemStatusContent, + StackLayout, + Text, +} from "@salt-ds/core"; +import { ReactElement } from "react"; + +export const WithTitle = (): ReactElement => ( +
+ + + + + Connection interrupted + + Please refresh the page. + + + +
+); diff --git a/site/src/examples/system-status/index.ts b/site/src/examples/system-status/index.ts new file mode 100644 index 0000000000..e7f425dfee --- /dev/null +++ b/site/src/examples/system-status/index.ts @@ -0,0 +1,5 @@ +export * from "./Error"; +export * from "./Info"; +export * from "./Success"; +export * from "./Warning"; +export * from "./WithTitle"; From 1fcab51ed06f81c1fff6567b0734bf54848b0682 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Tue, 2 Jul 2024 16:51:08 +0530 Subject: [PATCH 04/25] added changeset --- .changeset/added-system-status.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 .changeset/added-system-status.md diff --git a/.changeset/added-system-status.md b/.changeset/added-system-status.md new file mode 100644 index 0000000000..6803f36b5c --- /dev/null +++ b/.changeset/added-system-status.md @@ -0,0 +1,13 @@ +--- +"@salt-ds/core": minor +--- + +Added `SystemStatus`, `SystemStatusContent`, `SystemStatusActions` component. + +```tsx + + + New feature updates are available + + +``` From db3d17d3b6ca8d9a1e37ba53dba7090f1d667d83 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Tue, 2 Jul 2024 18:14:56 +0530 Subject: [PATCH 05/25] added changeset --- .changeset/added-system-status.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 .changeset/added-system-status.md diff --git a/.changeset/added-system-status.md b/.changeset/added-system-status.md new file mode 100644 index 0000000000..6803f36b5c --- /dev/null +++ b/.changeset/added-system-status.md @@ -0,0 +1,13 @@ +--- +"@salt-ds/core": minor +--- + +Added `SystemStatus`, `SystemStatusContent`, `SystemStatusActions` component. + +```tsx + + + New feature updates are available + + +``` From 54168d66d7dabcd2c4db384ed51f6359520a8a53 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Tue, 2 Jul 2024 20:07:19 +0530 Subject: [PATCH 06/25] fixed the doc --- site/docs/components/system-status/examples.mdx | 2 +- site/docs/components/system-status/index.mdx | 13 ++++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/site/docs/components/system-status/examples.mdx b/site/docs/components/system-status/examples.mdx index c6a56babf3..de31e91608 100644 --- a/site/docs/components/system-status/examples.mdx +++ b/site/docs/components/system-status/examples.mdx @@ -14,7 +14,7 @@ data: ## Info -Use the info `SystemStatus` status to communicate important updates or new features that do not require immediate action. +Use the info `SystemStatus` to communicate important updates or new features that do not require immediate action. diff --git a/site/docs/components/system-status/index.mdx b/site/docs/components/system-status/index.mdx index 1fd9c8a15e..385f63d3d6 100644 --- a/site/docs/components/system-status/index.mdx +++ b/site/docs/components/system-status/index.mdx @@ -6,9 +6,16 @@ data: package: name: "@salt-ds/core" initialVersion: "1.0.0" - alsoKnownAs: - [ "System Message"] - relatedComponents:[] + alsoKnownAs: ["System Message"] + relatedComponents: + [ + { name: "Content status", relationship: "similarTo" }, + { name: "Dialog", relationship: "similarTo" }, + { name: "Toast", relationship: "similarTo" }, + { name: "Tooltip", relationship: "similarTo" }, + { name: "Icon", relationship: "contains" }, + { name: "Status indicator", relationship: "contains" }, + ] layout: DetailComponent --- From 39d1961fbb35ac89f388bc7f1b150bcd1ab7a393 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Wed, 3 Jul 2024 18:14:25 +0530 Subject: [PATCH 07/25] added rounded corners and nested provider example --- .../core/src/system-status/SystemStatus.css | 1 + .../system-status.stories.tsx | 57 +++++++++++++++++ .../components/system-status/examples.mdx | 7 ++ site/src/examples/system-status/FullWidth.tsx | 64 +++++++++++++++++++ site/src/examples/system-status/index.ts | 1 + 5 files changed, 130 insertions(+) create mode 100644 site/src/examples/system-status/FullWidth.tsx diff --git a/packages/core/src/system-status/SystemStatus.css b/packages/core/src/system-status/SystemStatus.css index 8b49d53ee7..26385d3d3e 100644 --- a/packages/core/src/system-status/SystemStatus.css +++ b/packages/core/src/system-status/SystemStatus.css @@ -6,6 +6,7 @@ border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor)); border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-border)); border-style: var(--saltSystemStatus-borderStyle, var(--salt-container-borderStyle)); + border-radius: var(--saltSystemStatus-borderRadius, var(--salt-palette-corner, 0)); box-sizing: border-box; display: inline-flex; gap: var(--salt-spacing-75); diff --git a/packages/core/stories/system-status-story/system-status.stories.tsx b/packages/core/stories/system-status-story/system-status.stories.tsx index a789d6a67b..44cb6a73af 100644 --- a/packages/core/stories/system-status-story/system-status.stories.tsx +++ b/packages/core/stories/system-status-story/system-status.stories.tsx @@ -4,8 +4,16 @@ import { SystemStatusContent, StackLayout, Text, + UNSTABLE_SaltProviderNext, + Banner, + BannerContent, + BannerActions, + useTheme, + Button, } from "@salt-ds/core"; +import { CloseIcon } from "@salt-ds/icons"; + export default { title: "Core/System Status", component: SystemStatus, @@ -68,3 +76,52 @@ export const WithTitle: StoryFn = (props) => (
); + +export const FullWidth: StoryFn = (props) => { + const { themeNext } = useTheme(); + + return ( + + {themeNext ? ( + + + + New feature updates are available. + + + + ) : ( + + + New feature updates are available. + + + )} + + Payment Activity + + + You have outstanding checks more than 30 days old. Review to prevent + fraud. + + + + + + + + ); +}; diff --git a/site/docs/components/system-status/examples.mdx b/site/docs/components/system-status/examples.mdx index de31e91608..163e1b1402 100644 --- a/site/docs/components/system-status/examples.mdx +++ b/site/docs/components/system-status/examples.mdx @@ -52,4 +52,11 @@ Use a title in a `SystemStatus` to highlight important information, and use desc + + +## Full width + +Use `SystemStatus` in full-width format to display information globally. + + diff --git a/site/src/examples/system-status/FullWidth.tsx b/site/src/examples/system-status/FullWidth.tsx new file mode 100644 index 0000000000..e947068270 --- /dev/null +++ b/site/src/examples/system-status/FullWidth.tsx @@ -0,0 +1,64 @@ +import { + SystemStatus, + SystemStatusContent, + StackLayout, + Text, + UNSTABLE_SaltProviderNext, + Banner, + BannerContent, + BannerActions, + useTheme, + Button, +} from "@salt-ds/core"; + +import { CloseIcon } from "@salt-ds/icons"; + +import { ReactElement } from "react"; + +export const FullWidth = (): ReactElement => { + const { themeNext } = useTheme(); + return ( + + {themeNext ? ( + + + + New feature updates are available. + + + + ) : ( + + + New feature updates are available. + + + )} + + Payment Activity + + + You have outstanding checks more than 30 days old. Review to prevent + fraud. + + + + + + + + ); +}; diff --git a/site/src/examples/system-status/index.ts b/site/src/examples/system-status/index.ts index e7f425dfee..e954fc8355 100644 --- a/site/src/examples/system-status/index.ts +++ b/site/src/examples/system-status/index.ts @@ -3,3 +3,4 @@ export * from "./Info"; export * from "./Success"; export * from "./Warning"; export * from "./WithTitle"; +export * from "./FullWidth"; From 13a87c092dfd76a8422bbcd06f6de8e65baf864f Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Thu, 4 Jul 2024 13:56:37 +0530 Subject: [PATCH 08/25] corrected docs --- site/docs/components/system-status/examples.mdx | 12 ++++++------ site/docs/components/system-status/index.mdx | 2 +- site/docs/components/system-status/usage.mdx | 16 ++++++---------- 3 files changed, 13 insertions(+), 17 deletions(-) diff --git a/site/docs/components/system-status/examples.mdx b/site/docs/components/system-status/examples.mdx index 163e1b1402..4d0592becf 100644 --- a/site/docs/components/system-status/examples.mdx +++ b/site/docs/components/system-status/examples.mdx @@ -14,7 +14,7 @@ data: ## Info -Use the info `SystemStatus` to communicate important updates or new features that do not require immediate action. +Use the info system status to communicate important updates or new features that do not require immediate action. @@ -22,7 +22,7 @@ Use the info `SystemStatus` to communicate important updates or new features tha ## Error -Use error `SystemStatus` for critical issues that affect the user's ability to access or use the platform. When relevant, add a secondary action to help resolve the issue. +Use error system status for critical issues that affect the user's ability to access or use the platform. When relevant, add a secondary action to help resolve the issue. @@ -32,7 +32,7 @@ Use error `SystemStatus` for critical issues that affect the user's ability to a Warnings announce scheduled outages or events that might impact the product experience, but don't prevent the user from using the application or completing their current workflow. -Use warning `SystemStatus` to alert users about potential issues. +Use warning system status to alert users about potential issues. @@ -40,7 +40,7 @@ Use warning `SystemStatus` to alert users about potential issues. ## Success -Use success `SystemStatus` to communicate successfully completed system actions. +Use success system status to communicate successfully completed system actions. @@ -48,7 +48,7 @@ Use success `SystemStatus` to communicate successfully completed system actions. ## With Title -Use a title in a `SystemStatus` to highlight important information, and use description text to provide supporting details. +Use a title in a system status to highlight important information, and use description text to provide supporting details. @@ -56,7 +56,7 @@ Use a title in a `SystemStatus` to highlight important information, and use desc ## Full width -Use `SystemStatus` in full-width format to display information globally. +Use system status in full-width format to display information globally. diff --git a/site/docs/components/system-status/index.mdx b/site/docs/components/system-status/index.mdx index 385f63d3d6..fb23c42120 100644 --- a/site/docs/components/system-status/index.mdx +++ b/site/docs/components/system-status/index.mdx @@ -1,7 +1,7 @@ --- title: System status data: - description: "`SystemStatus` communicates essential platform-wide information or alerts, such as system maintenance or outages. These messages are designed to be quickly noticed and prompt users to take action if needed. `SystemStatus` offers 4 severity levels, each with a dedicated icon and color; `info`, `success`, `warning` and `error`. " + description: "System status communicates essential platform-wide information or alerts, such as system maintenance or outages. These messages are designed to be quickly noticed and prompt users to take action if needed. `SystemStatus` offers 4 severity levels, each with a dedicated icon and color; `info`, `success`, `warning` and `error`. " sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/system-status" package: name: "@salt-ds/core" diff --git a/site/docs/components/system-status/usage.mdx b/site/docs/components/system-status/usage.mdx index 4495a0acd6..debcfebd52 100644 --- a/site/docs/components/system-status/usage.mdx +++ b/site/docs/components/system-status/usage.mdx @@ -10,16 +10,12 @@ data: ## Using the component -The primary purpose of the `SystemStatus` is to provide information and, if necessary, prompt further action. +The primary purpose of the system status is to provide information and, if necessary, prompt further action. We advise against embedding excessive content into the system status due to potential color contrast issues. If you need to include additional components within the system status, it will be the responsibility of the application team to ensure accessibility compliance. ### When to use -- To show a notification that applies to the user’s current task or workflow. - -### When not to use - - To inform users about critical system-wide issues, security updates or vulnerabilities that require immediate attention. - To notify users about new system-wide features or enhancements. - To alert users about planned maintenance schedules and potential service disruptions affecting the entire platform. @@ -27,16 +23,16 @@ We advise against embedding excessive content into the system status due to pote ### When not to use - For general updates or information that requires immediate user action. -- For inline messaging. Instead, use `Banner`. -- To show a notification that applies to the user’s current task or workflow. Use `Banner` instead. +- For inline messaging. Instead, use [`Banner`](../banner). +- To show a notification that applies to the user’s current task or workflow. Use [`Banner`](../banner) instead. - To communicate when content is loading, instead use the Content Status pattern. -- When the notification requires immediate action and relates to the user’s current task. Instead, use `Dialog` to interrupt the user's workflow. +- When the notification requires immediate action and relates to the user’s current task. Instead, use [`Dialog`](../dialog) to interrupt the user's workflow. ## Content -A `SystemStatus` typically has one or two lines of text. Make content short, clear, and concise, allowing users to quickly understand the situation and/or next steps. +A system status typically has one or two lines of text. Make content short, clear, and concise, allowing users to quickly understand the situation and/or next steps. -Body Default applies to the content, however, if titles are necessary, configure them to display the Body Strong typography style across densities. See the typography foundation for more information. +Body Default applies to the content, however, if titles are necessary, configure them to display the Body Strong typography style across densities. See the [typography foundation](/salt/foundations/typography/) for more information. ## Import From eac0dbce715381fd86ab39985022d53585a9ba86 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Thu, 4 Jul 2024 16:39:52 +0530 Subject: [PATCH 09/25] corrected folder name for stories --- .../system-status.qa.stories.tsx | 0 .../system-status.stories.tsx | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename packages/core/stories/{system-status-story => system-status}/system-status.qa.stories.tsx (100%) rename packages/core/stories/{system-status-story => system-status}/system-status.stories.tsx (100%) diff --git a/packages/core/stories/system-status-story/system-status.qa.stories.tsx b/packages/core/stories/system-status/system-status.qa.stories.tsx similarity index 100% rename from packages/core/stories/system-status-story/system-status.qa.stories.tsx rename to packages/core/stories/system-status/system-status.qa.stories.tsx diff --git a/packages/core/stories/system-status-story/system-status.stories.tsx b/packages/core/stories/system-status/system-status.stories.tsx similarity index 100% rename from packages/core/stories/system-status-story/system-status.stories.tsx rename to packages/core/stories/system-status/system-status.stories.tsx From 00d11bfffa596f9b915769c708f4499436bfeb93 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Thu, 4 Jul 2024 18:41:16 +0530 Subject: [PATCH 10/25] removed border radius from system status --- .../core/src/system-status/SystemStatus.css | 1 - .../system-status/system-status.stories.tsx | 24 ++++--------------- 2 files changed, 5 insertions(+), 20 deletions(-) diff --git a/packages/core/src/system-status/SystemStatus.css b/packages/core/src/system-status/SystemStatus.css index 26385d3d3e..8b49d53ee7 100644 --- a/packages/core/src/system-status/SystemStatus.css +++ b/packages/core/src/system-status/SystemStatus.css @@ -6,7 +6,6 @@ border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor)); border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-border)); border-style: var(--saltSystemStatus-borderStyle, var(--salt-container-borderStyle)); - border-radius: var(--saltSystemStatus-borderRadius, var(--salt-palette-corner, 0)); box-sizing: border-box; display: inline-flex; gap: var(--salt-spacing-75); diff --git a/packages/core/stories/system-status/system-status.stories.tsx b/packages/core/stories/system-status/system-status.stories.tsx index 44cb6a73af..5a505a6947 100644 --- a/packages/core/stories/system-status/system-status.stories.tsx +++ b/packages/core/stories/system-status/system-status.stories.tsx @@ -4,11 +4,9 @@ import { SystemStatusContent, StackLayout, Text, - UNSTABLE_SaltProviderNext, Banner, BannerContent, BannerActions, - useTheme, Button, } from "@salt-ds/core"; @@ -78,8 +76,6 @@ export const WithTitle: StoryFn = (props) => ( ); export const FullWidth: StoryFn = (props) => { - const { themeNext } = useTheme(); - return ( = (props) => { background: "var( --salt-container-primary-background)", }} > - {themeNext ? ( - - - - New feature updates are available. - - - - ) : ( - - - New feature updates are available. - - - )} + + + New feature updates are available. + + Date: Thu, 4 Jul 2024 18:58:45 +0530 Subject: [PATCH 11/25] added test cases --- .../__e2e__/system-status/SystemStatus.cy.tsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 packages/core/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx diff --git a/packages/core/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx b/packages/core/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx new file mode 100644 index 0000000000..5a7158d35a --- /dev/null +++ b/packages/core/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx @@ -0,0 +1,43 @@ +import { composeStories } from "@storybook/react"; +import { SystemStatus, SystemStatusContent } from "@salt-ds/core"; +import * as systemStatusStories from "@stories/system-status/system-status.stories"; +import { checkAccessibility } from "../../../../../../cypress/tests/checkAccessibility"; + +const composedStories = composeStories(systemStatusStories); +const { Info, Success, Error, Warning } = composedStories; + +describe("GIVEN a System status", () => { + checkAccessibility(composedStories); + + it("THEN should render info status", () => { + cy.mount(); + + cy.findByTestId("InfoSolidIcon").should("exist"); + }); + it("THEN should render success status", () => { + cy.mount(); + + cy.findByTestId("SuccessTickIcon").should("exist"); + }); + it("THEN should render warning status", () => { + cy.mount(); + + cy.findByTestId("WarningSolidIcon").should("exist"); + }); + it("THEN should render error status", () => { + cy.mount(); + + cy.findByTestId("ErrorSolidIcon").should("exist"); + }); + + xit("THEN should announce the contents of the System status", () => { + const message = "example announcement"; + cy.mount( + + {message} + + ); + + cy.get("[aria-live]").contains(message); + }); +}); From 2a8e3abda81b3d8c8df15d5ff7dd3b2ee46c1885 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Thu, 4 Jul 2024 20:14:34 +0530 Subject: [PATCH 12/25] placement example updated --- .../system-status/system-status.stories.tsx | 2 +- .../components/system-status/examples.mdx | 8 +++--- .../{FullWidth.tsx => Placement.tsx} | 25 +++++-------------- site/src/examples/system-status/index.ts | 2 +- 4 files changed, 13 insertions(+), 24 deletions(-) rename site/src/examples/system-status/{FullWidth.tsx => Placement.tsx} (62%) diff --git a/packages/core/stories/system-status/system-status.stories.tsx b/packages/core/stories/system-status/system-status.stories.tsx index 5a505a6947..fcb151a854 100644 --- a/packages/core/stories/system-status/system-status.stories.tsx +++ b/packages/core/stories/system-status/system-status.stories.tsx @@ -75,7 +75,7 @@ export const WithTitle: StoryFn = (props) => (
); -export const FullWidth: StoryFn = (props) => { +export const Placement: StoryFn = (props) => { return ( - + -## Full width +## Placement -Use system status in full-width format to display information globally. +System status alerts are displayed at the very top of the screen, extending across the full width of the page. + +They are positioned at the same level as the main content, causing any subsequent content to shift accordingly. For example, when a system status is dismissed, the content below it would move up to its original position. diff --git a/site/src/examples/system-status/FullWidth.tsx b/site/src/examples/system-status/Placement.tsx similarity index 62% rename from site/src/examples/system-status/FullWidth.tsx rename to site/src/examples/system-status/Placement.tsx index e947068270..57bcc46268 100644 --- a/site/src/examples/system-status/FullWidth.tsx +++ b/site/src/examples/system-status/Placement.tsx @@ -3,11 +3,9 @@ import { SystemStatusContent, StackLayout, Text, - UNSTABLE_SaltProviderNext, Banner, BannerContent, BannerActions, - useTheme, Button, } from "@salt-ds/core"; @@ -15,8 +13,7 @@ import { CloseIcon } from "@salt-ds/icons"; import { ReactElement } from "react"; -export const FullWidth = (): ReactElement => { - const { themeNext } = useTheme(); +export const Placement = (): ReactElement => { return ( { background: "var( --salt-container-primary-background)", }} > - {themeNext ? ( - - - - New feature updates are available. - - - - ) : ( - - - New feature updates are available. - - - )} + + + New feature updates are available. + + Date: Fri, 5 Jul 2024 19:13:55 +0530 Subject: [PATCH 13/25] design review comments --- packages/core/stories/system-status/system-status.stories.tsx | 2 +- site/docs/components/system-status/index.mdx | 2 +- site/src/examples/system-status/WithTitle.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/stories/system-status/system-status.stories.tsx b/packages/core/stories/system-status/system-status.stories.tsx index fcb151a854..afe01b61b2 100644 --- a/packages/core/stories/system-status/system-status.stories.tsx +++ b/packages/core/stories/system-status/system-status.stories.tsx @@ -64,7 +64,7 @@ export const WithTitle: StoryFn = (props) => (
- + Connection interrupted diff --git a/site/docs/components/system-status/index.mdx b/site/docs/components/system-status/index.mdx index fb23c42120..f82ef5928e 100644 --- a/site/docs/components/system-status/index.mdx +++ b/site/docs/components/system-status/index.mdx @@ -1,7 +1,7 @@ --- title: System status data: - description: "System status communicates essential platform-wide information or alerts, such as system maintenance or outages. These messages are designed to be quickly noticed and prompt users to take action if needed. `SystemStatus` offers 4 severity levels, each with a dedicated icon and color; `info`, `success`, `warning` and `error`. " + description: "System status communicates essential platform-wide information or alerts, such as system maintenance or outages. These messages are designed to be quickly noticed and prompt users to take action if needed. System status offers 4 severity levels, each with a dedicated icon and color; `info`, `success`, `warning` and `error`. " sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/system-status" package: name: "@salt-ds/core" diff --git a/site/src/examples/system-status/WithTitle.tsx b/site/src/examples/system-status/WithTitle.tsx index 7412c9bb5e..88e663f10e 100644 --- a/site/src/examples/system-status/WithTitle.tsx +++ b/site/src/examples/system-status/WithTitle.tsx @@ -10,7 +10,7 @@ export const WithTitle = (): ReactElement => (
- + Connection interrupted From b392914db8854a3555940874d87989043a397593 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Mon, 8 Jul 2024 20:04:47 +0530 Subject: [PATCH 14/25] moved to lab and updated accessibility doc --- .changeset/added-system-status.md | 4 ++-- packages/core/src/index.ts | 1 - .../stories/system-status/system-status.qa.stories.tsx | 4 ++-- .../core/stories/system-status/system-status.stories.tsx | 5 ++--- .../__tests__/__e2e__/system-status/SystemStatus.cy.tsx | 2 +- packages/lab/src/index.ts | 1 + .../{core => lab}/src/system-status/SystemStatus.css | 0 .../{core => lab}/src/system-status/SystemStatus.tsx | 7 +++++-- .../src/system-status/SystemStatusActions.css | 0 .../src/system-status/SystemStatusActions.tsx | 2 +- .../src/system-status/SystemStatusContent.css | 0 .../src/system-status/SystemStatusContent.tsx | 2 +- packages/{core => lab}/src/system-status/index.tsx | 0 site/docs/components/system-status/accessibility.mdx | 4 ++-- site/src/examples/system-status/Error.tsx | 9 ++------- site/src/examples/system-status/Info.tsx | 8 ++------ site/src/examples/system-status/Placement.tsx | 3 +-- site/src/examples/system-status/Success.tsx | 3 ++- site/src/examples/system-status/Warning.tsx | 3 ++- site/src/examples/system-status/WithTitle.tsx | 8 ++------ 20 files changed, 28 insertions(+), 38 deletions(-) rename packages/{core => lab}/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx (95%) rename packages/{core => lab}/src/system-status/SystemStatus.css (100%) rename packages/{core => lab}/src/system-status/SystemStatus.tsx (88%) rename packages/{core => lab}/src/system-status/SystemStatusActions.css (100%) rename packages/{core => lab}/src/system-status/SystemStatusActions.tsx (94%) rename packages/{core => lab}/src/system-status/SystemStatusContent.css (100%) rename packages/{core => lab}/src/system-status/SystemStatusContent.tsx (94%) rename packages/{core => lab}/src/system-status/index.tsx (100%) diff --git a/.changeset/added-system-status.md b/.changeset/added-system-status.md index 6803f36b5c..282ac188ea 100644 --- a/.changeset/added-system-status.md +++ b/.changeset/added-system-status.md @@ -1,8 +1,8 @@ --- -"@salt-ds/core": minor +"@salt-ds/lab": minor --- -Added `SystemStatus`, `SystemStatusContent`, `SystemStatusActions` component. +Added `SystemStatus`, `SystemStatusContent`, `SystemStatusActions` component to lab. ```tsx diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index f0d5721fff..43ce1577a4 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -54,7 +54,6 @@ export * from "./theme"; export * from "./toast"; export * from "./salt-provider"; export * from "./split-layout"; -export * from "./system-status"; export * from "./switch"; export * from "./tag"; export * from "./toggle-button"; diff --git a/packages/core/stories/system-status/system-status.qa.stories.tsx b/packages/core/stories/system-status/system-status.qa.stories.tsx index 1ca5c665d3..356d770468 100644 --- a/packages/core/stories/system-status/system-status.qa.stories.tsx +++ b/packages/core/stories/system-status/system-status.qa.stories.tsx @@ -3,12 +3,12 @@ import { SystemStatus, SystemStatusProps, SystemStatusContent, -} from "@salt-ds/core"; +} from "@salt-ds/lab"; import { Meta, StoryFn } from "@storybook/react"; import { QAContainer } from "docs/components"; export default { - title: "Core/System Status/System Status QA", + title: "Lab/System Status/System Status QA", component: SystemStatus, } as Meta; diff --git a/packages/core/stories/system-status/system-status.stories.tsx b/packages/core/stories/system-status/system-status.stories.tsx index afe01b61b2..22a5ccbd96 100644 --- a/packages/core/stories/system-status/system-status.stories.tsx +++ b/packages/core/stories/system-status/system-status.stories.tsx @@ -1,7 +1,5 @@ import { Meta, StoryFn } from "@storybook/react"; import { - SystemStatus, - SystemStatusContent, StackLayout, Text, Banner, @@ -9,11 +7,12 @@ import { BannerActions, Button, } from "@salt-ds/core"; +import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; import { CloseIcon } from "@salt-ds/icons"; export default { - title: "Core/System Status", + title: "Lab/System Status", component: SystemStatus, } as Meta; diff --git a/packages/core/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx b/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx similarity index 95% rename from packages/core/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx rename to packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx index 5a7158d35a..32f0850455 100644 --- a/packages/core/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx +++ b/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx @@ -1,5 +1,5 @@ import { composeStories } from "@storybook/react"; -import { SystemStatus, SystemStatusContent } from "@salt-ds/core"; +import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; import * as systemStatusStories from "@stories/system-status/system-status.stories"; import { checkAccessibility } from "../../../../../../cypress/tests/checkAccessibility"; diff --git a/packages/lab/src/index.ts b/packages/lab/src/index.ts index ad7ba6f39c..91cdff5c2f 100644 --- a/packages/lab/src/index.ts +++ b/packages/lab/src/index.ts @@ -58,6 +58,7 @@ export * from "./skip-link"; export * from "./slider"; export * from "./stepped-tracker"; export * from "./stepper-input"; +export * from "./system-status"; export * from "./tabs"; export * from "./tabs-next"; export * from "./toast-group"; diff --git a/packages/core/src/system-status/SystemStatus.css b/packages/lab/src/system-status/SystemStatus.css similarity index 100% rename from packages/core/src/system-status/SystemStatus.css rename to packages/lab/src/system-status/SystemStatus.css diff --git a/packages/core/src/system-status/SystemStatus.tsx b/packages/lab/src/system-status/SystemStatus.tsx similarity index 88% rename from packages/core/src/system-status/SystemStatus.tsx rename to packages/lab/src/system-status/SystemStatus.tsx index d6c01f71d6..912b64c1c3 100644 --- a/packages/core/src/system-status/SystemStatus.tsx +++ b/packages/lab/src/system-status/SystemStatus.tsx @@ -1,6 +1,9 @@ import { forwardRef, HTMLAttributes } from "react"; -import { makePrefixer } from "../utils"; -import { StatusIndicator, ValidationStatus } from "../status-indicator"; +import { makePrefixer } from "@salt-ds/core/src/utils"; +import { + StatusIndicator, + ValidationStatus, +} from "@salt-ds/core/src/status-indicator"; import { clsx } from "clsx"; import { useWindow } from "@salt-ds/window"; diff --git a/packages/core/src/system-status/SystemStatusActions.css b/packages/lab/src/system-status/SystemStatusActions.css similarity index 100% rename from packages/core/src/system-status/SystemStatusActions.css rename to packages/lab/src/system-status/SystemStatusActions.css diff --git a/packages/core/src/system-status/SystemStatusActions.tsx b/packages/lab/src/system-status/SystemStatusActions.tsx similarity index 94% rename from packages/core/src/system-status/SystemStatusActions.tsx rename to packages/lab/src/system-status/SystemStatusActions.tsx index 0a77a04155..3799f76aef 100644 --- a/packages/core/src/system-status/SystemStatusActions.tsx +++ b/packages/lab/src/system-status/SystemStatusActions.tsx @@ -1,6 +1,6 @@ import { ComponentPropsWithoutRef, forwardRef, ReactNode } from "react"; import { clsx } from "clsx"; -import { makePrefixer } from "../utils"; +import { makePrefixer } from "@salt-ds/core/src/utils"; import systemStatusActionsCss from "./SystemStatusActions.css"; import { useComponentCssInjection } from "@salt-ds/styles"; diff --git a/packages/core/src/system-status/SystemStatusContent.css b/packages/lab/src/system-status/SystemStatusContent.css similarity index 100% rename from packages/core/src/system-status/SystemStatusContent.css rename to packages/lab/src/system-status/SystemStatusContent.css diff --git a/packages/core/src/system-status/SystemStatusContent.tsx b/packages/lab/src/system-status/SystemStatusContent.tsx similarity index 94% rename from packages/core/src/system-status/SystemStatusContent.tsx rename to packages/lab/src/system-status/SystemStatusContent.tsx index 6b20683dc5..ee4e47a306 100644 --- a/packages/core/src/system-status/SystemStatusContent.tsx +++ b/packages/lab/src/system-status/SystemStatusContent.tsx @@ -1,6 +1,6 @@ import { ComponentPropsWithoutRef, forwardRef, ReactNode } from "react"; import { clsx } from "clsx"; -import { makePrefixer } from "../utils"; +import { makePrefixer } from "@salt-ds/core/src/utils"; import systemStatusContentCss from "./SystemStatusContent.css"; import { useComponentCssInjection } from "@salt-ds/styles"; diff --git a/packages/core/src/system-status/index.tsx b/packages/lab/src/system-status/index.tsx similarity index 100% rename from packages/core/src/system-status/index.tsx rename to packages/lab/src/system-status/index.tsx diff --git a/site/docs/components/system-status/accessibility.mdx b/site/docs/components/system-status/accessibility.mdx index 3ca3b6577a..df27da7d59 100644 --- a/site/docs/components/system-status/accessibility.mdx +++ b/site/docs/components/system-status/accessibility.mdx @@ -10,6 +10,6 @@ data: ## Best practices -- Use the aria-live="assertive" attribute for error messages to ensure they are announced immediately, interrupting any ongoing speech to alert the user to critical issues requiring immediate attention. - - Use the aria-live="polite" attribute for informational and warning messages, allowing the screen reader to announce these messages at the next available pause, ensuring the user is informed without disrupting their current task. + +- When using a system status to alert the user, apply `role="alert"`. When using a system status to notify the user, apply `role="status"`. diff --git a/site/src/examples/system-status/Error.tsx b/site/src/examples/system-status/Error.tsx index caad3e760f..f886a3fa18 100644 --- a/site/src/examples/system-status/Error.tsx +++ b/site/src/examples/system-status/Error.tsx @@ -1,11 +1,6 @@ import { ReactElement } from "react"; -import { - SystemStatus, - SystemStatusContent, - Button, - StackLayout, - Text, -} from "@salt-ds/core"; +import { Text } from "@salt-ds/core"; +import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; export const Error = (): ReactElement => (
diff --git a/site/src/examples/system-status/Info.tsx b/site/src/examples/system-status/Info.tsx index d1223b78fb..b1884f90d7 100644 --- a/site/src/examples/system-status/Info.tsx +++ b/site/src/examples/system-status/Info.tsx @@ -1,10 +1,6 @@ import { ReactElement } from "react"; -import { - SystemStatus, - SystemStatusContent, - StackLayout, - Text, -} from "@salt-ds/core"; +import { Text } from "@salt-ds/core"; +import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; export const Info = (): ReactElement => (
diff --git a/site/src/examples/system-status/Placement.tsx b/site/src/examples/system-status/Placement.tsx index 57bcc46268..35e14416c5 100644 --- a/site/src/examples/system-status/Placement.tsx +++ b/site/src/examples/system-status/Placement.tsx @@ -1,6 +1,4 @@ import { - SystemStatus, - SystemStatusContent, StackLayout, Text, Banner, @@ -8,6 +6,7 @@ import { BannerActions, Button, } from "@salt-ds/core"; +import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; import { CloseIcon } from "@salt-ds/icons"; diff --git a/site/src/examples/system-status/Success.tsx b/site/src/examples/system-status/Success.tsx index 55f34e2ff2..3045c55f27 100644 --- a/site/src/examples/system-status/Success.tsx +++ b/site/src/examples/system-status/Success.tsx @@ -1,5 +1,6 @@ import { ReactElement } from "react"; -import { SystemStatus, SystemStatusContent, Text } from "@salt-ds/core"; +import { Text } from "@salt-ds/core"; +import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; export const Success = (): ReactElement => (
diff --git a/site/src/examples/system-status/Warning.tsx b/site/src/examples/system-status/Warning.tsx index 0a24b2dfe0..811bc1a59c 100644 --- a/site/src/examples/system-status/Warning.tsx +++ b/site/src/examples/system-status/Warning.tsx @@ -1,5 +1,6 @@ import { ReactElement } from "react"; -import { SystemStatus, SystemStatusContent, Text } from "@salt-ds/core"; +import { Text } from "@salt-ds/core"; +import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; export const Warning = (): ReactElement => (
diff --git a/site/src/examples/system-status/WithTitle.tsx b/site/src/examples/system-status/WithTitle.tsx index 88e663f10e..1ba246ecfd 100644 --- a/site/src/examples/system-status/WithTitle.tsx +++ b/site/src/examples/system-status/WithTitle.tsx @@ -1,9 +1,5 @@ -import { - SystemStatus, - SystemStatusContent, - StackLayout, - Text, -} from "@salt-ds/core"; +import { StackLayout, Text } from "@salt-ds/core"; +import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; import { ReactElement } from "react"; export const WithTitle = (): ReactElement => ( From bbe8eee3369eb4bdac8400cbbc2d17d186901c62 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Mon, 8 Jul 2024 20:46:54 +0530 Subject: [PATCH 15/25] moved to lab --- .../stories/system-status/system-status.qa.stories.tsx | 0 .../stories/system-status/system-status.stories.tsx | 0 site/docs/components/system-status/index.mdx | 4 ++-- site/docs/components/system-status/usage.mdx | 4 ++-- 4 files changed, 4 insertions(+), 4 deletions(-) rename packages/{core => lab}/stories/system-status/system-status.qa.stories.tsx (100%) rename packages/{core => lab}/stories/system-status/system-status.stories.tsx (100%) diff --git a/packages/core/stories/system-status/system-status.qa.stories.tsx b/packages/lab/stories/system-status/system-status.qa.stories.tsx similarity index 100% rename from packages/core/stories/system-status/system-status.qa.stories.tsx rename to packages/lab/stories/system-status/system-status.qa.stories.tsx diff --git a/packages/core/stories/system-status/system-status.stories.tsx b/packages/lab/stories/system-status/system-status.stories.tsx similarity index 100% rename from packages/core/stories/system-status/system-status.stories.tsx rename to packages/lab/stories/system-status/system-status.stories.tsx diff --git a/site/docs/components/system-status/index.mdx b/site/docs/components/system-status/index.mdx index f82ef5928e..2c04523ec8 100644 --- a/site/docs/components/system-status/index.mdx +++ b/site/docs/components/system-status/index.mdx @@ -2,9 +2,9 @@ title: System status data: description: "System status communicates essential platform-wide information or alerts, such as system maintenance or outages. These messages are designed to be quickly noticed and prompt users to take action if needed. System status offers 4 severity levels, each with a dedicated icon and color; `info`, `success`, `warning` and `error`. " - sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/system-status" + sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/lab/src/system-status" package: - name: "@salt-ds/core" + name: "@salt-ds/lab" initialVersion: "1.0.0" alsoKnownAs: ["System Message"] relatedComponents: diff --git a/site/docs/components/system-status/usage.mdx b/site/docs/components/system-status/usage.mdx index debcfebd52..5735666e49 100644 --- a/site/docs/components/system-status/usage.mdx +++ b/site/docs/components/system-status/usage.mdx @@ -36,10 +36,10 @@ Body Default applies to the content, however, if titles are necessary, configure ## Import -To import `SystemStatus` and related components from the core Salt package, use: +To import `SystemStatus` and related components from the lab Salt package, use: ``` -import { SystemStatus, SystemStatusContent, SystemStatusActions } from "@salt-ds/core"; +import { SystemStatus, SystemStatusContent, SystemStatusActions } from "@salt-ds/lab"; ``` ## Props From c0ff9a7df960f69d5a4124cabed19aaa63cb34df Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Tue, 9 Jul 2024 11:51:53 +0530 Subject: [PATCH 16/25] tech review comments --- .../lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx | 2 +- packages/lab/src/system-status/SystemStatusActions.css | 2 +- packages/lab/src/system-status/SystemStatusContent.css | 2 +- site/docs/components/system-status/index.mdx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx b/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx index 32f0850455..06222773e0 100644 --- a/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx +++ b/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx @@ -30,7 +30,7 @@ describe("GIVEN a System status", () => { cy.findByTestId("ErrorSolidIcon").should("exist"); }); - xit("THEN should announce the contents of the System status", () => { + it("THEN should announce the contents of the System status", () => { const message = "example announcement"; cy.mount( diff --git a/packages/lab/src/system-status/SystemStatusActions.css b/packages/lab/src/system-status/SystemStatusActions.css index fa656d1b27..b4c9d1d37d 100644 --- a/packages/lab/src/system-status/SystemStatusActions.css +++ b/packages/lab/src/system-status/SystemStatusActions.css @@ -1,4 +1,4 @@ -.saltSystemStatus { +.saltSystemStatusActions { margin-bottom: auto; display: flex; gap: var(--salt-spacing-100); diff --git a/packages/lab/src/system-status/SystemStatusContent.css b/packages/lab/src/system-status/SystemStatusContent.css index 0099e9ddca..2351281408 100644 --- a/packages/lab/src/system-status/SystemStatusContent.css +++ b/packages/lab/src/system-status/SystemStatusContent.css @@ -1,4 +1,4 @@ -/* Styles applied to BannerContent */ +/* Styles applied to SystemStatusContent */ .saltSystemStatusContent { flex: 1 0; margin: var(--salt-spacing-75) 0; diff --git a/site/docs/components/system-status/index.mdx b/site/docs/components/system-status/index.mdx index 2c04523ec8..b63c006b25 100644 --- a/site/docs/components/system-status/index.mdx +++ b/site/docs/components/system-status/index.mdx @@ -5,7 +5,7 @@ data: sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/lab/src/system-status" package: name: "@salt-ds/lab" - initialVersion: "1.0.0" + initialVersion: "1.0.0-alpha.48" alsoKnownAs: ["System Message"] relatedComponents: [ From 645abc0ac2b9f02077318119b825a9622e08421f Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Tue, 9 Jul 2024 20:11:35 +0530 Subject: [PATCH 17/25] fix lint --- packages/lab/src/system-status/SystemStatus.tsx | 2 +- packages/lab/src/system-status/SystemStatusActions.tsx | 2 +- packages/lab/src/system-status/SystemStatusContent.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/lab/src/system-status/SystemStatus.tsx b/packages/lab/src/system-status/SystemStatus.tsx index 912b64c1c3..ad0f240bfb 100644 --- a/packages/lab/src/system-status/SystemStatus.tsx +++ b/packages/lab/src/system-status/SystemStatus.tsx @@ -1,5 +1,5 @@ import { forwardRef, HTMLAttributes } from "react"; -import { makePrefixer } from "@salt-ds/core/src/utils"; +import { makePrefixer } from "@salt-ds/core"; import { StatusIndicator, ValidationStatus, diff --git a/packages/lab/src/system-status/SystemStatusActions.tsx b/packages/lab/src/system-status/SystemStatusActions.tsx index 3799f76aef..276f588a67 100644 --- a/packages/lab/src/system-status/SystemStatusActions.tsx +++ b/packages/lab/src/system-status/SystemStatusActions.tsx @@ -1,6 +1,6 @@ import { ComponentPropsWithoutRef, forwardRef, ReactNode } from "react"; import { clsx } from "clsx"; -import { makePrefixer } from "@salt-ds/core/src/utils"; +import { makePrefixer } from "@salt-ds/core"; import systemStatusActionsCss from "./SystemStatusActions.css"; import { useComponentCssInjection } from "@salt-ds/styles"; diff --git a/packages/lab/src/system-status/SystemStatusContent.tsx b/packages/lab/src/system-status/SystemStatusContent.tsx index ee4e47a306..0afa9e9331 100644 --- a/packages/lab/src/system-status/SystemStatusContent.tsx +++ b/packages/lab/src/system-status/SystemStatusContent.tsx @@ -1,6 +1,6 @@ import { ComponentPropsWithoutRef, forwardRef, ReactNode } from "react"; import { clsx } from "clsx"; -import { makePrefixer } from "@salt-ds/core/src/utils"; +import { makePrefixer } from "@salt-ds/core"; import systemStatusContentCss from "./SystemStatusContent.css"; import { useComponentCssInjection } from "@salt-ds/styles"; From fcd6ed7f832cca11871114d8c53fc7d954ecd899 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Wed, 10 Jul 2024 11:46:31 +0530 Subject: [PATCH 18/25] fix lint --- packages/lab/src/system-status/SystemStatus.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/lab/src/system-status/SystemStatus.tsx b/packages/lab/src/system-status/SystemStatus.tsx index ad0f240bfb..62dab2e642 100644 --- a/packages/lab/src/system-status/SystemStatus.tsx +++ b/packages/lab/src/system-status/SystemStatus.tsx @@ -1,9 +1,5 @@ import { forwardRef, HTMLAttributes } from "react"; -import { makePrefixer } from "@salt-ds/core"; -import { - StatusIndicator, - ValidationStatus, -} from "@salt-ds/core/src/status-indicator"; +import { makePrefixer, StatusIndicator, ValidationStatus } from "@salt-ds/core"; import { clsx } from "clsx"; import { useWindow } from "@salt-ds/window"; From 8b49736e2760ba73644ae56a6d81cadb3b35d940 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Tue, 16 Jul 2024 12:02:32 +0530 Subject: [PATCH 19/25] review comments --- packages/lab/src/system-status/SystemStatus.tsx | 5 +---- .../lab/src/system-status/SystemStatusActions.css | 3 +-- .../system-status/system-status.qa.stories.tsx | 13 ++++++++++++- site/docs/components/system-status/usage.mdx | 6 +++--- 4 files changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/lab/src/system-status/SystemStatus.tsx b/packages/lab/src/system-status/SystemStatus.tsx index 62dab2e642..803e8ad01c 100644 --- a/packages/lab/src/system-status/SystemStatus.tsx +++ b/packages/lab/src/system-status/SystemStatus.tsx @@ -9,10 +9,7 @@ import systemStatusCss from "./SystemStatus.css"; export interface SystemStatusProps extends HTMLAttributes { /** - * Emphasize the styling by applying a background color: defaults to false - */ - /** - * A string to determine the current state of the SystemStatus + * A string to determine the current state of the SystemStatus. Defaults to `info`. */ status?: ValidationStatus; } diff --git a/packages/lab/src/system-status/SystemStatusActions.css b/packages/lab/src/system-status/SystemStatusActions.css index b4c9d1d37d..93925fe690 100644 --- a/packages/lab/src/system-status/SystemStatusActions.css +++ b/packages/lab/src/system-status/SystemStatusActions.css @@ -2,5 +2,4 @@ margin-bottom: auto; display: flex; gap: var(--salt-spacing-100); - min-height: var(--salt-size-base); -} +} \ No newline at end of file diff --git a/packages/lab/stories/system-status/system-status.qa.stories.tsx b/packages/lab/stories/system-status/system-status.qa.stories.tsx index 356d770468..f4cdde7efc 100644 --- a/packages/lab/stories/system-status/system-status.qa.stories.tsx +++ b/packages/lab/stories/system-status/system-status.qa.stories.tsx @@ -4,6 +4,10 @@ import { SystemStatusProps, SystemStatusContent, } from "@salt-ds/lab"; +import { + StackLayout, + Text +} from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; import { QAContainer } from "docs/components"; @@ -15,7 +19,14 @@ export default { const BasicSystemStatusExample: FC = ({ status }) => { return ( - Example custom renderer + + + + Title + + Example custom renderer + + ); }; diff --git a/site/docs/components/system-status/usage.mdx b/site/docs/components/system-status/usage.mdx index 5735666e49..134cecf22d 100644 --- a/site/docs/components/system-status/usage.mdx +++ b/site/docs/components/system-status/usage.mdx @@ -46,12 +46,12 @@ import { SystemStatus, SystemStatusContent, SystemStatusActions } from "@salt-ds ### `SystemStatus` - + ### `SystemStatusContent` - + ### `SystemStatusActions` - + From 0e65877579cdca7d96733c8feebb9d2a04e8c7ad Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Tue, 16 Jul 2024 13:58:48 +0530 Subject: [PATCH 20/25] type lint fixes --- .../lab/stories/system-status/system-status.qa.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/lab/stories/system-status/system-status.qa.stories.tsx b/packages/lab/stories/system-status/system-status.qa.stories.tsx index f4cdde7efc..4dbe84982a 100644 --- a/packages/lab/stories/system-status/system-status.qa.stories.tsx +++ b/packages/lab/stories/system-status/system-status.qa.stories.tsx @@ -1,14 +1,14 @@ -import { FC } from "react"; +import type { FC } from "react"; import { SystemStatus, - SystemStatusProps, + type SystemStatusProps, SystemStatusContent, } from "@salt-ds/lab"; import { StackLayout, Text } from "@salt-ds/core"; -import { Meta, StoryFn } from "@storybook/react"; +import type { Meta, StoryFn } from "@storybook/react"; import { QAContainer } from "docs/components"; export default { From 9c9d7e4a6088c7703a80308b07e84a85321d2c02 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Wed, 17 Jul 2024 14:24:55 +0530 Subject: [PATCH 21/25] type lint fixes --- packages/lab/src/system-status/SystemStatus.tsx | 4 ++-- packages/lab/src/system-status/SystemStatusActions.tsx | 2 +- packages/lab/src/system-status/SystemStatusContent.tsx | 2 +- packages/lab/stories/system-status/system-status.stories.tsx | 2 +- site/src/examples/system-status/Error.tsx | 2 +- site/src/examples/system-status/Info.tsx | 2 +- site/src/examples/system-status/Placement.tsx | 2 +- site/src/examples/system-status/Success.tsx | 2 +- site/src/examples/system-status/Warning.tsx | 2 +- site/src/examples/system-status/WithTitle.tsx | 2 +- 10 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/lab/src/system-status/SystemStatus.tsx b/packages/lab/src/system-status/SystemStatus.tsx index 803e8ad01c..c614d4cec6 100644 --- a/packages/lab/src/system-status/SystemStatus.tsx +++ b/packages/lab/src/system-status/SystemStatus.tsx @@ -1,5 +1,5 @@ -import { forwardRef, HTMLAttributes } from "react"; -import { makePrefixer, StatusIndicator, ValidationStatus } from "@salt-ds/core"; +import { forwardRef, type HTMLAttributes } from "react"; +import { makePrefixer, StatusIndicator, type ValidationStatus } from "@salt-ds/core"; import { clsx } from "clsx"; import { useWindow } from "@salt-ds/window"; diff --git a/packages/lab/src/system-status/SystemStatusActions.tsx b/packages/lab/src/system-status/SystemStatusActions.tsx index 276f588a67..c52a82164c 100644 --- a/packages/lab/src/system-status/SystemStatusActions.tsx +++ b/packages/lab/src/system-status/SystemStatusActions.tsx @@ -1,4 +1,4 @@ -import { ComponentPropsWithoutRef, forwardRef, ReactNode } from "react"; +import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from "react"; import { clsx } from "clsx"; import { makePrefixer } from "@salt-ds/core"; diff --git a/packages/lab/src/system-status/SystemStatusContent.tsx b/packages/lab/src/system-status/SystemStatusContent.tsx index 0afa9e9331..2d0e879bdf 100644 --- a/packages/lab/src/system-status/SystemStatusContent.tsx +++ b/packages/lab/src/system-status/SystemStatusContent.tsx @@ -1,4 +1,4 @@ -import { ComponentPropsWithoutRef, forwardRef, ReactNode } from "react"; +import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from "react"; import { clsx } from "clsx"; import { makePrefixer } from "@salt-ds/core"; diff --git a/packages/lab/stories/system-status/system-status.stories.tsx b/packages/lab/stories/system-status/system-status.stories.tsx index 22a5ccbd96..3f1c64853f 100644 --- a/packages/lab/stories/system-status/system-status.stories.tsx +++ b/packages/lab/stories/system-status/system-status.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryFn } from "@storybook/react"; +import type { Meta, StoryFn } from "@storybook/react"; import { StackLayout, Text, diff --git a/site/src/examples/system-status/Error.tsx b/site/src/examples/system-status/Error.tsx index f886a3fa18..9b8ef57630 100644 --- a/site/src/examples/system-status/Error.tsx +++ b/site/src/examples/system-status/Error.tsx @@ -1,4 +1,4 @@ -import { ReactElement } from "react"; +import type { ReactElement } from "react"; import { Text } from "@salt-ds/core"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; diff --git a/site/src/examples/system-status/Info.tsx b/site/src/examples/system-status/Info.tsx index b1884f90d7..f08979e2ba 100644 --- a/site/src/examples/system-status/Info.tsx +++ b/site/src/examples/system-status/Info.tsx @@ -1,4 +1,4 @@ -import { ReactElement } from "react"; +import type { ReactElement } from "react"; import { Text } from "@salt-ds/core"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; diff --git a/site/src/examples/system-status/Placement.tsx b/site/src/examples/system-status/Placement.tsx index 35e14416c5..6173376270 100644 --- a/site/src/examples/system-status/Placement.tsx +++ b/site/src/examples/system-status/Placement.tsx @@ -10,7 +10,7 @@ import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; import { CloseIcon } from "@salt-ds/icons"; -import { ReactElement } from "react"; +import type { ReactElement } from "react"; export const Placement = (): ReactElement => { return ( diff --git a/site/src/examples/system-status/Success.tsx b/site/src/examples/system-status/Success.tsx index 3045c55f27..6d11906f9c 100644 --- a/site/src/examples/system-status/Success.tsx +++ b/site/src/examples/system-status/Success.tsx @@ -1,4 +1,4 @@ -import { ReactElement } from "react"; +import type { ReactElement } from "react"; import { Text } from "@salt-ds/core"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; diff --git a/site/src/examples/system-status/Warning.tsx b/site/src/examples/system-status/Warning.tsx index 811bc1a59c..5ef8c031c4 100644 --- a/site/src/examples/system-status/Warning.tsx +++ b/site/src/examples/system-status/Warning.tsx @@ -1,4 +1,4 @@ -import { ReactElement } from "react"; +import type { ReactElement } from "react"; import { Text } from "@salt-ds/core"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; diff --git a/site/src/examples/system-status/WithTitle.tsx b/site/src/examples/system-status/WithTitle.tsx index 1ba246ecfd..d8a003eea8 100644 --- a/site/src/examples/system-status/WithTitle.tsx +++ b/site/src/examples/system-status/WithTitle.tsx @@ -1,6 +1,6 @@ import { StackLayout, Text } from "@salt-ds/core"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; -import { ReactElement } from "react"; +import type { ReactElement } from "react"; export const WithTitle = (): ReactElement => (
From 5f79d22d15d2215f84d5596dd3eb5c61edd89ce6 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Wed, 17 Jul 2024 14:49:45 +0530 Subject: [PATCH 22/25] type lint fixes --- .../src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx b/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx index 06222773e0..498e14e9f4 100644 --- a/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx +++ b/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx @@ -4,7 +4,7 @@ import * as systemStatusStories from "@stories/system-status/system-status.stori import { checkAccessibility } from "../../../../../../cypress/tests/checkAccessibility"; const composedStories = composeStories(systemStatusStories); -const { Info, Success, Error, Warning } = composedStories; +const { Info, Success, Error: SystemStatusError, Warning } = composedStories; describe("GIVEN a System status", () => { checkAccessibility(composedStories); @@ -25,7 +25,7 @@ describe("GIVEN a System status", () => { cy.findByTestId("WarningSolidIcon").should("exist"); }); it("THEN should render error status", () => { - cy.mount(); + cy.mount(); cy.findByTestId("ErrorSolidIcon").should("exist"); }); From 8799dc58e88c950b56bad0d942b44f96125c0d31 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Wed, 17 Jul 2024 15:37:21 +0530 Subject: [PATCH 23/25] type lint fixes --- packages/lab/src/system-status/SystemStatusActions.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lab/src/system-status/SystemStatusActions.css b/packages/lab/src/system-status/SystemStatusActions.css index 93925fe690..ea8a17c43e 100644 --- a/packages/lab/src/system-status/SystemStatusActions.css +++ b/packages/lab/src/system-status/SystemStatusActions.css @@ -2,4 +2,4 @@ margin-bottom: auto; display: flex; gap: var(--salt-spacing-100); -} \ No newline at end of file +} From 0379af8de9dc95814c7e4a6d5dd1bb87c81d4104 Mon Sep 17 00:00:00 2001 From: thushara joseph Date: Wed, 17 Jul 2024 17:14:23 +0530 Subject: [PATCH 24/25] type lint fixes --- .../__e2e__/system-status/SystemStatus.cy.tsx | 4 ++-- packages/lab/src/system-status/SystemStatus.tsx | 14 +++++++++----- .../lab/src/system-status/SystemStatusActions.tsx | 10 +++++++--- .../lab/src/system-status/SystemStatusContent.tsx | 10 +++++++--- .../system-status/system-status.qa.stories.tsx | 9 +++------ .../system-status/system-status.stories.tsx | 8 ++++---- site/src/examples/system-status/Error.tsx | 2 +- site/src/examples/system-status/Info.tsx | 2 +- site/src/examples/system-status/Placement.tsx | 6 +++--- site/src/examples/system-status/Success.tsx | 2 +- site/src/examples/system-status/Warning.tsx | 2 +- 11 files changed, 39 insertions(+), 30 deletions(-) diff --git a/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx b/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx index 498e14e9f4..28c90d9baa 100644 --- a/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx +++ b/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx @@ -1,6 +1,6 @@ -import { composeStories } from "@storybook/react"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; import * as systemStatusStories from "@stories/system-status/system-status.stories"; +import { composeStories } from "@storybook/react"; import { checkAccessibility } from "../../../../../../cypress/tests/checkAccessibility"; const composedStories = composeStories(systemStatusStories); @@ -35,7 +35,7 @@ describe("GIVEN a System status", () => { cy.mount( {message} - + , ); cy.get("[aria-live]").contains(message); diff --git a/packages/lab/src/system-status/SystemStatus.tsx b/packages/lab/src/system-status/SystemStatus.tsx index c614d4cec6..55724538f3 100644 --- a/packages/lab/src/system-status/SystemStatus.tsx +++ b/packages/lab/src/system-status/SystemStatus.tsx @@ -1,9 +1,13 @@ -import { forwardRef, type HTMLAttributes } from "react"; -import { makePrefixer, StatusIndicator, type ValidationStatus } from "@salt-ds/core"; +import { + StatusIndicator, + type ValidationStatus, + makePrefixer, +} from "@salt-ds/core"; import { clsx } from "clsx"; +import { type HTMLAttributes, forwardRef } from "react"; -import { useWindow } from "@salt-ds/window"; import { useComponentCssInjection } from "@salt-ds/styles"; +import { useWindow } from "@salt-ds/window"; import systemStatusCss from "./SystemStatus.css"; @@ -19,7 +23,7 @@ const withBaseName = makePrefixer("saltSystemStatus"); export const SystemStatus = forwardRef( function SystemStatus( { children, className, status = "info", ...rest }, - ref + ref, ) { const targetWindow = useWindow(); useComponentCssInjection({ @@ -39,5 +43,5 @@ export const SystemStatus = forwardRef( {children}
); - } + }, ); diff --git a/packages/lab/src/system-status/SystemStatusActions.tsx b/packages/lab/src/system-status/SystemStatusActions.tsx index c52a82164c..eb33199f04 100644 --- a/packages/lab/src/system-status/SystemStatusActions.tsx +++ b/packages/lab/src/system-status/SystemStatusActions.tsx @@ -1,10 +1,14 @@ -import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from "react"; -import { clsx } from "clsx"; import { makePrefixer } from "@salt-ds/core"; +import { clsx } from "clsx"; +import { + type ComponentPropsWithoutRef, + type ReactNode, + forwardRef, +} from "react"; -import systemStatusActionsCss from "./SystemStatusActions.css"; import { useComponentCssInjection } from "@salt-ds/styles"; import { useWindow } from "@salt-ds/window"; +import systemStatusActionsCss from "./SystemStatusActions.css"; const withBaseName = makePrefixer("saltSystemStatusActions"); diff --git a/packages/lab/src/system-status/SystemStatusContent.tsx b/packages/lab/src/system-status/SystemStatusContent.tsx index 2d0e879bdf..8c8b439210 100644 --- a/packages/lab/src/system-status/SystemStatusContent.tsx +++ b/packages/lab/src/system-status/SystemStatusContent.tsx @@ -1,10 +1,14 @@ -import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from "react"; -import { clsx } from "clsx"; import { makePrefixer } from "@salt-ds/core"; +import { clsx } from "clsx"; +import { + type ComponentPropsWithoutRef, + type ReactNode, + forwardRef, +} from "react"; -import systemStatusContentCss from "./SystemStatusContent.css"; import { useComponentCssInjection } from "@salt-ds/styles"; import { useWindow } from "@salt-ds/window"; +import systemStatusContentCss from "./SystemStatusContent.css"; const withBaseName = makePrefixer("saltSystemStatusContent"); diff --git a/packages/lab/stories/system-status/system-status.qa.stories.tsx b/packages/lab/stories/system-status/system-status.qa.stories.tsx index 4dbe84982a..8611559ced 100644 --- a/packages/lab/stories/system-status/system-status.qa.stories.tsx +++ b/packages/lab/stories/system-status/system-status.qa.stories.tsx @@ -1,15 +1,12 @@ -import type { FC } from "react"; +import { StackLayout, Text } from "@salt-ds/core"; import { SystemStatus, - type SystemStatusProps, SystemStatusContent, + type SystemStatusProps, } from "@salt-ds/lab"; -import { - StackLayout, - Text -} from "@salt-ds/core"; import type { Meta, StoryFn } from "@storybook/react"; import { QAContainer } from "docs/components"; +import type { FC } from "react"; export default { title: "Lab/System Status/System Status QA", diff --git a/packages/lab/stories/system-status/system-status.stories.tsx b/packages/lab/stories/system-status/system-status.stories.tsx index 3f1c64853f..abbc77e72b 100644 --- a/packages/lab/stories/system-status/system-status.stories.tsx +++ b/packages/lab/stories/system-status/system-status.stories.tsx @@ -1,13 +1,13 @@ -import type { Meta, StoryFn } from "@storybook/react"; import { - StackLayout, - Text, Banner, - BannerContent, BannerActions, + BannerContent, Button, + StackLayout, + Text, } from "@salt-ds/core"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; +import type { Meta, StoryFn } from "@storybook/react"; import { CloseIcon } from "@salt-ds/icons"; diff --git a/site/src/examples/system-status/Error.tsx b/site/src/examples/system-status/Error.tsx index 9b8ef57630..ea2f3c6eab 100644 --- a/site/src/examples/system-status/Error.tsx +++ b/site/src/examples/system-status/Error.tsx @@ -1,6 +1,6 @@ -import type { ReactElement } from "react"; import { Text } from "@salt-ds/core"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; +import type { ReactElement } from "react"; export const Error = (): ReactElement => (
diff --git a/site/src/examples/system-status/Info.tsx b/site/src/examples/system-status/Info.tsx index f08979e2ba..a91610c747 100644 --- a/site/src/examples/system-status/Info.tsx +++ b/site/src/examples/system-status/Info.tsx @@ -1,6 +1,6 @@ -import type { ReactElement } from "react"; import { Text } from "@salt-ds/core"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; +import type { ReactElement } from "react"; export const Info = (): ReactElement => (
diff --git a/site/src/examples/system-status/Placement.tsx b/site/src/examples/system-status/Placement.tsx index 6173376270..e04917f3e9 100644 --- a/site/src/examples/system-status/Placement.tsx +++ b/site/src/examples/system-status/Placement.tsx @@ -1,10 +1,10 @@ import { - StackLayout, - Text, Banner, - BannerContent, BannerActions, + BannerContent, Button, + StackLayout, + Text, } from "@salt-ds/core"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; diff --git a/site/src/examples/system-status/Success.tsx b/site/src/examples/system-status/Success.tsx index 6d11906f9c..f0ce71d612 100644 --- a/site/src/examples/system-status/Success.tsx +++ b/site/src/examples/system-status/Success.tsx @@ -1,6 +1,6 @@ -import type { ReactElement } from "react"; import { Text } from "@salt-ds/core"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; +import type { ReactElement } from "react"; export const Success = (): ReactElement => (
diff --git a/site/src/examples/system-status/Warning.tsx b/site/src/examples/system-status/Warning.tsx index 5ef8c031c4..73730523b0 100644 --- a/site/src/examples/system-status/Warning.tsx +++ b/site/src/examples/system-status/Warning.tsx @@ -1,6 +1,6 @@ -import type { ReactElement } from "react"; import { Text } from "@salt-ds/core"; import { SystemStatus, SystemStatusContent } from "@salt-ds/lab"; +import type { ReactElement } from "react"; export const Warning = (): ReactElement => (
From a156c29e179a32ce14d1ab6d57082996aef41ff2 Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Mon, 22 Jul 2024 09:35:19 +0100 Subject: [PATCH 25/25] Updates --- .changeset/added-system-status.md | 2 +- .../__e2e__/system-status/SystemStatus.cy.tsx | 17 +++++++++-------- packages/lab/src/system-status/SystemStatus.css | 2 +- packages/lab/src/system-status/SystemStatus.tsx | 2 +- .../components/system-status/accessibility.mdx | 7 ++++--- 5 files changed, 16 insertions(+), 14 deletions(-) diff --git a/.changeset/added-system-status.md b/.changeset/added-system-status.md index 282ac188ea..3e06b9e628 100644 --- a/.changeset/added-system-status.md +++ b/.changeset/added-system-status.md @@ -5,7 +5,7 @@ Added `SystemStatus`, `SystemStatusContent`, `SystemStatusActions` component to lab. ```tsx - + New feature updates are available diff --git a/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx b/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx index 28c90d9baa..a845bbd985 100644 --- a/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx +++ b/packages/lab/src/__tests__/__e2e__/system-status/SystemStatus.cy.tsx @@ -4,33 +4,34 @@ import { composeStories } from "@storybook/react"; import { checkAccessibility } from "../../../../../../cypress/tests/checkAccessibility"; const composedStories = composeStories(systemStatusStories); -const { Info, Success, Error: SystemStatusError, Warning } = composedStories; +// biome-ignore lint/suspicious/noShadowRestrictedNames: +const { Info, Success, Error, Warning } = composedStories; describe("GIVEN a System status", () => { checkAccessibility(composedStories); - it("THEN should render info status", () => { + it('should render an info status when `status="info"`', () => { cy.mount(); cy.findByTestId("InfoSolidIcon").should("exist"); }); - it("THEN should render success status", () => { + it('should render a success status when `status="success"`', () => { cy.mount(); cy.findByTestId("SuccessTickIcon").should("exist"); }); - it("THEN should render warning status", () => { + it('should render a warning status when `status="warning"`', () => { cy.mount(); cy.findByTestId("WarningSolidIcon").should("exist"); }); - it("THEN should render error status", () => { - cy.mount(); + it('should render an error status when `status="error"`', () => { + cy.mount(); cy.findByTestId("ErrorSolidIcon").should("exist"); }); - it("THEN should announce the contents of the System status", () => { + it('should have a default role of "status"', () => { const message = "example announcement"; cy.mount( @@ -38,6 +39,6 @@ describe("GIVEN a System status", () => { , ); - cy.get("[aria-live]").contains(message); + cy.findByRole("status").should("have.text", message); }); }); diff --git a/packages/lab/src/system-status/SystemStatus.css b/packages/lab/src/system-status/SystemStatus.css index 8b49d53ee7..526f4909cc 100644 --- a/packages/lab/src/system-status/SystemStatus.css +++ b/packages/lab/src/system-status/SystemStatus.css @@ -7,7 +7,7 @@ border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-border)); border-style: var(--saltSystemStatus-borderStyle, var(--salt-container-borderStyle)); box-sizing: border-box; - display: inline-flex; + display: flex; gap: var(--salt-spacing-75); padding: var(--saltSystemStatus-padding, var(--salt-spacing-50) var(--salt-spacing-100)); width: 100%; diff --git a/packages/lab/src/system-status/SystemStatus.tsx b/packages/lab/src/system-status/SystemStatus.tsx index 55724538f3..c29bd76ef5 100644 --- a/packages/lab/src/system-status/SystemStatus.tsx +++ b/packages/lab/src/system-status/SystemStatus.tsx @@ -36,8 +36,8 @@ export const SystemStatus = forwardRef(
{children} diff --git a/site/docs/components/system-status/accessibility.mdx b/site/docs/components/system-status/accessibility.mdx index df27da7d59..783a2aa30c 100644 --- a/site/docs/components/system-status/accessibility.mdx +++ b/site/docs/components/system-status/accessibility.mdx @@ -8,8 +8,9 @@ data: $ref: ./#/data --- -## Best practices +By default, the `SystemStatus` component has the role `"status"`. This means a screen reader will announce the message at the next available opportunity. -- Use the aria-live="polite" attribute for informational and warning messages, allowing the screen reader to announce these messages at the next available pause, ensuring the user is informed without disrupting their current task. +## Best practices -- When using a system status to alert the user, apply `role="alert"`. When using a system status to notify the user, apply `role="status"`. +- If the status is critical and requires immediate attention, apply `role="alert"` to ensure the message is announced immediately. +- If the status is not critical, consider applying `role="region"`.