From 7c112112258665cd3725143b4f91980118f36957 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Tammerg=C3=A5rd?= Date: Wed, 5 Apr 2023 12:24:20 +0200 Subject: [PATCH] chore: align chart component convetions --- .../charts/LinearProgress/LinearProgress.mdx | 2 +- .../LinearProgress/LinearProgress.stories.tsx | 4 ++-- .../charts/LinearProgress/LinearProgress.tsx | 4 ++-- .../LinearVerticalProgress.mdx | 2 +- .../LinearVerticalProgress.stories.tsx | 4 ++-- .../LinearVerticalProgress.tsx | 8 +++---- .../components/charts/StepGauge/StepGauge.tsx | 22 +++++++++---------- .../charts/StepProgress/StepProgress.mdx | 2 +- .../charts/StepProgress/StepProgress.tsx | 4 ++-- .../StepVerticalProgress.mdx | 2 +- .../StepVerticalProgress.stories.tsx | 9 ++++++++ .../StepVerticalProgress.tsx | 6 ++--- 12 files changed, 38 insertions(+), 31 deletions(-) diff --git a/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.mdx b/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.mdx index a37de202b..8a91ded65 100644 --- a/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.mdx +++ b/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.mdx @@ -50,4 +50,4 @@ import { LinearProgress } from "@einride/ui" ## Accessibility -Adding a descriptive `aria-label` is required to convey what the progress is displaynig. +Adding a descriptive `aria-label` is required to convey what the progress bar is displaynig. diff --git a/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.stories.tsx b/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.stories.tsx index dd68ae266..517a3d0d3 100644 --- a/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.stories.tsx +++ b/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.stories.tsx @@ -34,7 +34,7 @@ export const Basic = { }, } satisfies Story -/** If you have a custom value range, you can set that with the `min` and `max` props, and `value` will take those into account. In this example, `value: 110` is 75% of the range between 80 and 110, which is also conveyed by the progress. */ +/** If you have a custom value range, you can set that with the `min` and `max` props, and `value` will take those into account. In this example, `value: 110` is 75% of the range between 80 and 110, which is also conveyed by the progress bar. */ export const CustomRange = { args: { ...Basic.args, @@ -51,7 +51,7 @@ export const CustomRange = { }, } satisfies Story -/** Change the color of the progress with the `color` prop. */ +/** Change the color of the progress bar with the `color` prop. */ export const CustomColor = { args: { ...Basic.args, diff --git a/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.tsx b/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.tsx index 823e261b1..736efcf6a 100644 --- a/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.tsx +++ b/packages/einride-ui/src/components/charts/LinearProgress/LinearProgress.tsx @@ -5,7 +5,7 @@ import { Color } from "../../../lib/theme/props" import { Box } from "../../layout/Box/Box" export interface LinearProgressProps extends Omit, "color"> { - /** Accessible name. Describes what information the progress is conveying. */ + /** Accessible name. Describes what information the progress bar is conveying. */ "aria-label": string /** Color of the completed progress line. Default is `positive`. */ @@ -21,7 +21,7 @@ export interface LinearProgressProps extends Omit( ({ color = "positive", max = DEFAULT_MAX, min = DEFAULT_MIN, value, ...props }, ref) => { return ( diff --git a/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.mdx b/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.mdx index 3ee50745d..67f6c2234 100644 --- a/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.mdx +++ b/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.mdx @@ -50,4 +50,4 @@ import { LinearVerticalProgress } from "@einride/ui" ## Accessibility -Adding a descriptive `aria-label` is required to convey what the progress is displaynig. +Adding a descriptive `aria-label` is required to convey what the progress bar is displaynig. diff --git a/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.stories.tsx b/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.stories.tsx index 92d57ec7a..0158f98a6 100644 --- a/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.stories.tsx +++ b/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.stories.tsx @@ -34,7 +34,7 @@ export const Basic = { }, } satisfies Story -/** If you have a custom value range, you can set that with the `min` and `max` props, and `value` will take those into account. In this example, `value: 110` is 75% of the range between 80 and 110, which is also conveyed by the progress. */ +/** If you have a custom value range, you can set that with the `min` and `max` props, and `value` will take those into account. In this example, `value: 110` is 75% of the range between 80 and 110, which is also conveyed by the progress bar. */ export const CustomRange = { args: { ...Basic.args, @@ -51,7 +51,7 @@ export const CustomRange = { }, } satisfies Story -/** Change the color of the progress with the `color` prop. */ +/** Change the color of the progress bar with the `color` prop. */ export const CustomColor = { args: { ...Basic.args, diff --git a/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.tsx b/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.tsx index 8bb50c5f0..772cfc07c 100644 --- a/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.tsx +++ b/packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.tsx @@ -6,7 +6,7 @@ import { Box } from "../../layout/Box/Box" export interface LinearVerticalProgressProps extends Omit, "color"> { - /** Accessible name. Describes what information the progress is conveying. */ + /** Accessible name. Describes what information the progress bar is conveying. */ "aria-label": string /** Color of the completed progress line. Default is `positive`. */ @@ -22,7 +22,7 @@ export interface LinearVerticalProgressProps value: number } -/** A linear vertical progress that can be used for conveying progress. */ +/** A linear vertical progress bar that can be used for conveying progress. */ export const LinearVerticalProgress = forwardRef( ({ color = "positive", max = DEFAULT_MAX, min = DEFAULT_MIN, value, ...props }, ref) => { return ( @@ -32,8 +32,8 @@ export const LinearVerticalProgress = forwardRef, "color"> { - /** Accessible name. Describes what information the progress is conveying. */ + /** Accessible name. Describes what information the gauge is conveying. */ "aria-label": string /** Color of the completed gauge stroke. Default is `positive`. */ @@ -19,7 +20,7 @@ export interface StepGaugeProps extends Omit, "c steps?: number } -/** A step gauge that can be used for conveying status. */ +/** A step gauge that can be used for conveying step-based status. */ export const StepGauge = forwardRef( ({ color = "positive", completedSteps, steps = DEFAULT_STEPS, ...props }, forwardedRef) => { const [svgHeight, setSvgHeight] = useState(0) @@ -31,7 +32,12 @@ export const StepGauge = forwardRef( setPointerHeight(node ? node.viewBox.baseVal.height : 0) }, []) return ( - ( steps={steps} ref={pointerRef} /> - + ) }, ) @@ -67,14 +73,6 @@ export const StepGauge = forwardRef( export const DEFAULT_STEPS = 3 const SVG_SIZE = 106 -const Wrapper = styled.div` - position: relative; - inline-size: ${({ theme }) => 7 * theme.spacingBase}rem; - display: flex; - justify-content: center; - align-items: center; -` - const StyledSvg = styled.svg` stroke-width: ${({ theme }) => 0.375 * theme.spacingBase}rem; inline-size: 100%; diff --git a/packages/einride-ui/src/components/charts/StepProgress/StepProgress.mdx b/packages/einride-ui/src/components/charts/StepProgress/StepProgress.mdx index d0f458c24..fd5a09b6b 100644 --- a/packages/einride-ui/src/components/charts/StepProgress/StepProgress.mdx +++ b/packages/einride-ui/src/components/charts/StepProgress/StepProgress.mdx @@ -50,4 +50,4 @@ import { StepProgress } from "@einride/ui" ## Accessibility -Adding a descriptive `aria-label` is required to convey what the gauge is displaynig. +Adding a descriptive `aria-label` is required to convey what the progress bar is displaynig. diff --git a/packages/einride-ui/src/components/charts/StepProgress/StepProgress.tsx b/packages/einride-ui/src/components/charts/StepProgress/StepProgress.tsx index 02a225e80..c1b3de5c3 100644 --- a/packages/einride-ui/src/components/charts/StepProgress/StepProgress.tsx +++ b/packages/einride-ui/src/components/charts/StepProgress/StepProgress.tsx @@ -5,7 +5,7 @@ import { Color } from "../../../lib/theme/props" import { Box } from "../../layout/Box/Box" export interface StepProgressProps extends Omit, "color"> { - /** Accessible name. Describes what information the progress is conveying. */ + /** Accessible name. Describes what information the progress bar is conveying. */ "aria-label": string /** Color of the completed steps. Default is `positive`. */ @@ -18,7 +18,7 @@ export interface StepProgressProps extends Omit, steps?: number | undefined } -/** A progress par with steps that can be used for conveying step-based progress. */ +/** A progress bar with steps that can be used for conveying step-based progress. */ export const StepProgress = forwardRef( ({ color = "positive", completedSteps, steps = DEFAULT_STEPS, ...props }, ref) => { return ( diff --git a/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.mdx b/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.mdx index 1278851bd..86e3e7c2c 100644 --- a/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.mdx +++ b/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.mdx @@ -50,4 +50,4 @@ import { StepVerticalProgress } from "@einride/ui" ## Accessibility -Adding a descriptive `aria-label` is required to convey what the gauge is displaynig. +Adding a descriptive `aria-label` is required to convey what the progress bar is displaynig. diff --git a/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.stories.tsx b/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.stories.tsx index 60aa57918..78a10e65c 100644 --- a/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.stories.tsx +++ b/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.stories.tsx @@ -2,10 +2,19 @@ import { expect } from "@storybook/jest" import { Meta, StoryObj } from "@storybook/react" import { within } from "@storybook/testing-library" import { SnapshotWrapper } from "../../../lib/storybook/SnapshotWrapper" +import { contentColors } from "../../../lib/theme/types" import { DEFAULT_STEPS, StepVerticalProgress } from "./StepVerticalProgress" const meta = { component: StepVerticalProgress, + argTypes: { + color: { + control: { + type: "select", + }, + options: contentColors, + }, + }, } satisfies Meta export default meta diff --git a/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.tsx b/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.tsx index d80073d21..27cee9d41 100644 --- a/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.tsx +++ b/packages/einride-ui/src/components/charts/StepVerticalProgress/StepVerticalProgress.tsx @@ -5,7 +5,7 @@ import { Color } from "../../../lib/theme/props" import { Box } from "../../layout/Box/Box" export interface StepVerticalProgressProps extends Omit, "color"> { - /** Accessible name. Describes what information the progress is conveying. */ + /** Accessible name. Describes what information the progress bar is conveying. */ "aria-label": string /** Color of the completed steps. Default is `positive`. */ @@ -15,10 +15,10 @@ export interface StepVerticalProgressProps extends Omit( ({ color = "positive", completedSteps, steps = DEFAULT_STEPS, ...props }, ref) => { return (