chore: align chart component convetions

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.

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,

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<ComponentPropsWithoutRef<"div">, "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<ComponentPropsWithoutRef<"div"
   value: number
 }
 
-/** A linear progress that can be used for conveying progress. */
+/** A linear progress bar that can be used for conveying progress. */
 export const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(
   ({ color = "positive", max = DEFAULT_MAX, min = DEFAULT_MIN, value, ...props }, ref) => {
     return (

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.

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,

packages/einride-ui/src/components/charts/LinearVerticalProgress/LinearVerticalProgress.tsx

@@ -6,7 +6,7 @@ import { Box } from "../../layout/Box/Box"
 
 export interface LinearVerticalProgressProps
   extends Omit<ComponentPropsWithoutRef<"div">, "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<HTMLDivElement, LinearVerticalProgressProps>(
   ({ color = "positive", max = DEFAULT_MAX, min = DEFAULT_MIN, value, ...props }, ref) => {
     return (
@@ -32,8 +32,8 @@ export const LinearVerticalProgress = forwardRef<HTMLDivElement, LinearVerticalP
         justifyContent="flex-end"
         background="tertiary"
         borderRadius="xs"
-        inlineSize={2}
-        blockSize={8}
+        inlineSize="sm"
+        blockSize="xl"
         role="progressbar"
         aria-valuemax={max}
         aria-valuemin={min}

packages/einride-ui/src/components/charts/StepGauge/StepGauge.tsx

@@ -2,11 +2,12 @@ import isPropValid from "@emotion/is-prop-valid"
 import styled from "@emotion/styled"
 import { ComponentPropsWithoutRef, forwardRef, useCallback, useState } from "react"
 import { Color } from "../../../lib/theme/props"
+import { Box } from "../../layout/Box/Box"
 import { PointerIcon } from "./PointerIcon"
 import { StepGaugeStep } from "./StepGaugeStep"
 
 export interface StepGaugeProps extends Omit<ComponentPropsWithoutRef<"div">, "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<ComponentPropsWithoutRef<"div">, "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<HTMLDivElement, StepGaugeProps>(
   ({ color = "positive", completedSteps, steps = DEFAULT_STEPS, ...props }, forwardedRef) => {
     const [svgHeight, setSvgHeight] = useState(0)
@@ -31,7 +32,12 @@ export const StepGauge = forwardRef<HTMLDivElement, StepGaugeProps>(
       setPointerHeight(node ? node.viewBox.baseVal.height : 0)
     }, [])
     return (
-      <Wrapper
+      <Box
+        position="relative"
+        inlineSize={7}
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
         {...props}
         ref={forwardedRef}
         role="progressbar"
@@ -59,22 +65,14 @@ export const StepGauge = forwardRef<HTMLDivElement, StepGaugeProps>(
           steps={steps}
           ref={pointerRef}
         />
-      </Wrapper>
+      </Box>
     )
   },
 )
 
 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%;

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.

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<ComponentPropsWithoutRef<"div">, "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<ComponentPropsWithoutRef<"div">,
   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<HTMLDivElement, StepProgressProps>(
   ({ color = "positive", completedSteps, steps = DEFAULT_STEPS, ...props }, ref) => {
     return (

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.

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<typeof StepVerticalProgress>
 
 export default meta

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<ComponentPropsWithoutRef<"div">, "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<ComponentPropsWithoutRef
   completedSteps: number
 
   /** Number of steps. Default is `5`. */
-  steps?: number | undefined
+  steps?: number
 }
 
-/** Either `aria-label` or `aria-labelledby` is required for accessibility. */
+/** A progress bar that can be used for conveying progress. */
 export const StepVerticalProgress = forwardRef<HTMLDivElement, StepVerticalProgressProps>(
   ({ color = "positive", completedSteps, steps = DEFAULT_STEPS, ...props }, ref) => {
     return (