From 7911cd4ce6910d1c53f5293267f368a8d33e0922 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Tue, 11 Mar 2025 17:54:55 +0100 Subject: [PATCH 1/4] Wizard redesign --- apps/website/pages/components/wizard/code.tsx | 17 + .../website/pages/components/wizard/index.tsx | 24 +- .../components/wizard/specifications.tsx | 21 - .../website/pages/components/wizard/usage.tsx | 21 - .../components/wizard/WizardPageLayout.tsx | 5 +- .../components/wizard/code/WizardCodePage.tsx | 50 +- .../WizardOverviewPage.tsx} | 22 +- .../{usage => overview}/examples/content.ts | 0 .../examples/description.ts | 0 .../examples/validation.ts | 0 .../{usage => overview}/examples/variants.ts | 0 .../wizard/specs/WizardSpecsPage.tsx | 761 ------------------ .../wizard/specs/images/wizard_anatomy.png | Bin 17673 -> 0 bytes .../specs/images/wizard_specs_spacing.png | Bin 27151 -> 0 bytes .../specs/images/wizard_specs_stepper.png | Bin 22179 -> 0 bytes .../wizard/specs/images/wizard_states.png | Bin 15830 -> 0 bytes packages/lib/src/wizard/Icons.tsx | 31 +- packages/lib/src/wizard/Wizard.stories.tsx | 84 +- packages/lib/src/wizard/Wizard.tsx | 425 ++++------ 19 files changed, 265 insertions(+), 1196 deletions(-) create mode 100644 apps/website/pages/components/wizard/code.tsx delete mode 100644 apps/website/pages/components/wizard/specifications.tsx delete mode 100644 apps/website/pages/components/wizard/usage.tsx rename apps/website/screens/components/wizard/{usage/WizardUsagePage.tsx => overview/WizardOverviewPage.tsx} (84%) rename apps/website/screens/components/wizard/{usage => overview}/examples/content.ts (100%) rename apps/website/screens/components/wizard/{usage => overview}/examples/description.ts (100%) rename apps/website/screens/components/wizard/{usage => overview}/examples/validation.ts (100%) rename apps/website/screens/components/wizard/{usage => overview}/examples/variants.ts (100%) delete mode 100644 apps/website/screens/components/wizard/specs/WizardSpecsPage.tsx delete mode 100644 apps/website/screens/components/wizard/specs/images/wizard_anatomy.png delete mode 100644 apps/website/screens/components/wizard/specs/images/wizard_specs_spacing.png delete mode 100644 apps/website/screens/components/wizard/specs/images/wizard_specs_stepper.png delete mode 100644 apps/website/screens/components/wizard/specs/images/wizard_states.png diff --git a/apps/website/pages/components/wizard/code.tsx b/apps/website/pages/components/wizard/code.tsx new file mode 100644 index 0000000000..f3430b8f11 --- /dev/null +++ b/apps/website/pages/components/wizard/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import WizardPageLayout from "screens/components/wizard/WizardPageLayout"; +import WizardCodePage from "screens/components/wizard/code/WizardCodePage"; + +const Code = () => ( + <> + + Wizard code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/wizard/index.tsx b/apps/website/pages/components/wizard/index.tsx index f8f803289e..d4e5c6f311 100644 --- a/apps/website/pages/components/wizard/index.tsx +++ b/apps/website/pages/components/wizard/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; import WizardPageLayout from "screens/components/wizard/WizardPageLayout"; -import WizardCodePage from "screens/components/wizard/code/WizardCodePage"; +import WizardOverviewPage from "screens/components/wizard/overview/WizardOverviewPage"; -const Index = () => { - return ( - <> - - Wizard — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Wizard — Halstack Design System + + + +); -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/wizard/specifications.tsx b/apps/website/pages/components/wizard/specifications.tsx deleted file mode 100644 index 310adc86f0..0000000000 --- a/apps/website/pages/components/wizard/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import WizardPageLayout from "screens/components/wizard/WizardPageLayout"; -import WizardSpecsPage from "screens/components/wizard/specs/WizardSpecsPage"; - -const Specifications = () => { - return ( - <> - - Wizard Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/wizard/usage.tsx b/apps/website/pages/components/wizard/usage.tsx deleted file mode 100644 index 551fd09e34..0000000000 --- a/apps/website/pages/components/wizard/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import WizardPageLayout from "screens/components/wizard/WizardPageLayout"; -import WizardUsagePage from "screens/components/wizard/usage/WizardUsagePage"; - -const Usage = () => { - return ( - <> - - Wizard Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/wizard/WizardPageLayout.tsx b/apps/website/screens/components/wizard/WizardPageLayout.tsx index fef897a481..18a263bca4 100644 --- a/apps/website/screens/components/wizard/WizardPageLayout.tsx +++ b/apps/website/screens/components/wizard/WizardPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const WizardPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/wizard" }, - { label: "Usage", path: "/components/wizard/usage" }, - { label: "Specifications", path: "/components/wizard/specifications" }, + { label: "Overview", path: "/components/wizard" }, + { label: "Code", path: "/components/wizard/code" }, ]; return ( diff --git a/apps/website/screens/components/wizard/code/WizardCodePage.tsx b/apps/website/screens/components/wizard/code/WizardCodePage.tsx index acb4d9f9bb..8ba4e24d7f 100644 --- a/apps/website/screens/components/wizard/code/WizardCodePage.tsx +++ b/apps/website/screens/components/wizard/code/WizardCodePage.tsx @@ -24,6 +24,17 @@ const sections = [ + + currentStep + + number + + + Defines which step is marked as the current. The numeration starts at 0. If undefined, the component will + be uncontrolled and the step will be managed internally by the component. + + - + defaultCurrentStep @@ -35,13 +46,13 @@ const sections = [ - currentStep + margin - number + 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin - Defines which step is marked as the current. The numeration starts at 0. If undefined, the component will - be uncontrolled and the step will be managed internally by the component. + Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and + 'right' properties in order to specify different margin sizes. - @@ -55,6 +66,16 @@ const sections = [ 'horizontal' + + onStepClick + + {"(currentStep: number) => void"} + + + This function will be called when the user clicks a step. The step number will be passed as a parameter. + + - + @@ -95,27 +116,6 @@ const sections = [ - - - onStepClick - - {"(currentStep: number) => void"} - - - This function will be called when the user clicks a step. The step number will be passed as a parameter. - - - - - - margin - - 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin - - - Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and - 'right' properties in order to specify different margin sizes. - - - - tabIndex diff --git a/apps/website/screens/components/wizard/usage/WizardUsagePage.tsx b/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx similarity index 84% rename from apps/website/screens/components/wizard/usage/WizardUsagePage.tsx rename to apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx index 3cb16d962e..fb4dd48f0e 100644 --- a/apps/website/screens/components/wizard/usage/WizardUsagePage.tsx +++ b/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx @@ -10,7 +10,7 @@ import description from "./examples/description"; const sections = [ { - title: "Usage", + title: "Introduction", content: ( @@ -75,15 +75,13 @@ const sections = [ }, ]; -const WizardUsagePage = () => { - return ( - - - - - - - ); -}; +const WizardOverviewPage = () => ( + + + + + + +); -export default WizardUsagePage; +export default WizardOverviewPage; diff --git a/apps/website/screens/components/wizard/usage/examples/content.ts b/apps/website/screens/components/wizard/overview/examples/content.ts similarity index 100% rename from apps/website/screens/components/wizard/usage/examples/content.ts rename to apps/website/screens/components/wizard/overview/examples/content.ts diff --git a/apps/website/screens/components/wizard/usage/examples/description.ts b/apps/website/screens/components/wizard/overview/examples/description.ts similarity index 100% rename from apps/website/screens/components/wizard/usage/examples/description.ts rename to apps/website/screens/components/wizard/overview/examples/description.ts diff --git a/apps/website/screens/components/wizard/usage/examples/validation.ts b/apps/website/screens/components/wizard/overview/examples/validation.ts similarity index 100% rename from apps/website/screens/components/wizard/usage/examples/validation.ts rename to apps/website/screens/components/wizard/overview/examples/validation.ts diff --git a/apps/website/screens/components/wizard/usage/examples/variants.ts b/apps/website/screens/components/wizard/overview/examples/variants.ts similarity index 100% rename from apps/website/screens/components/wizard/usage/examples/variants.ts rename to apps/website/screens/components/wizard/overview/examples/variants.ts diff --git a/apps/website/screens/components/wizard/specs/WizardSpecsPage.tsx b/apps/website/screens/components/wizard/specs/WizardSpecsPage.tsx deleted file mode 100644 index 8ca0081969..0000000000 --- a/apps/website/screens/components/wizard/specs/WizardSpecsPage.tsx +++ /dev/null @@ -1,761 +0,0 @@ -import { DxcTable, DxcParagraph, DxcBulletedList, DxcFlex, DxcLink } from "@dxc-technology/halstack-react"; -import Image from "@/common/Image"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Figure from "@/common/Figure"; -import Code from "@/common/Code"; -import DocFooter from "@/common/DocFooter"; -import spacingImage from "./images/wizard_specs_spacing.png"; -import stepperImage from "./images/wizard_specs_stepper.png"; -import statesImage from "./images/wizard_states.png"; -import anatomyImage from "./images/wizard_anatomy.png"; - -const sections = [ - { - title: "Specifications", - content: ( - <> -
- Wizard step design specifications -
-
- Wizard variants design specifications -
- - ), - }, - { - title: "States", - content: ( - <> - - States: enabled, focus, selected,{" "} - unvisited and disabled. - -
- Wizard states -
- - ), - }, - { - title: "Anatomy", - content: ( - <> - Wizard anatomy - - Step - Label - Separator - - Helper text (Optional) - - - Step validator (Optional) - - - - ), - }, - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - - - - Component token - Element - Core token - Value - - - - - - visitedStepFontColor - - Step:visited text - - color-black - - #000000 - - - - selectedStepFontColor - - Step:selected text - - color-white - - #ffffff - - - - unvisitedStepFontColor - - Step:unvisited text - - color-grey-700 - - #666666 - - - - disabledStepFontColor - - Step:disabled text - - color-grey-500 - - #999999 - - - - visitedStepBackgroundColor - - Step:visited - - color-white - - #ffffff - - - - selectedStepBackgroundColor - - Step:selected background - - color-purple-700 - - #5f249f - - - - unvisitedStepBackgroundColor - - Step:unvisited background - - color-transparent - - transparent - - - - disabledStepBackgroundColor - - Step:disabled background - - color-grey-100 - - #f2f2f2 - - - - visitedStepBorderColor - - Step:visited border - - color-black - - #000000 - - - - selectedStepBorderColor - - Step:selected border - - color-purple-700 - - #5f249f - - - - unvisitedStepBorderColor - - Step:unvisited border - - color-grey-700 - - #666666 - - - - disabledStepBorderColor - - Step:disabled border - - color-grey-100 - - #f2f2f2 - - - - visitedLabelFontColor - - Label:visited - - color-black - - #000000 - - - - selectedLabelFontColor - - Label:selected - - color-black - - #000000 - - - - disabledLabelFontColor - - Label:disabled - - color-grey-500 - - #999999 - - - - visitedHelperTextFontColor - - Helper text:visited - - color-black - - #000000 - - - - selectedHelperTextFontColor - - Helper text:selected - - color-black - - #000000 - - - - separatorColor - - Separator - - color-grey-700 - - #666666 - - - - focusColor - - Focus outline - - color-blue-600 - - #0095ff - - - - ), - }, - { - title: "Margin", - content: ( - <> - - Different values can be applied to each side of the component: - top, bottom, left, right. - - - - - Margin - Value - - - - - - xxsmall - - 6px - - - - xsmall - - 16px - - - - small - - 24px - - - - medium - - 36px - - - - large - - 48px - - - - xlarge - - 64px - - - - xxlarge - - 100px - - - - - ), - }, - { - title: "Typography", - content: ( - - - - Component token - Element - Core token - Value - - - - - - stepFontSize - - Step text - - font-scale-03 - - 1rem / 16px - - - - stepFontFamily - - Step text - - font-family-sans - - Open Sans - - - - stepFontStyle - - Step text - - font-style-normal - - normal - - - - stepFontWeight - - Step text - - font-style-regular - - 400 - - - - stepFontTracking - - Step text - - font-tracking-wide-02 - - 0.05em - - - - labelFontSize - - Label - - font-scale-03 - - 1rem / 16px - - - - labelFontFamily - - Label - - font-family-sans - - Open Sans - - - - labelFontStyle - - Label - - font-style-normal - - normal - - - - labelFontWeight - - Label - - font-style-regular - - 400 - - - - labelFontTracking - - Label - - font-tracking-normal - - 0em - - - - helperTextFontSize - - Helper text - - font-scale-02 - - 0.875rem / 14px - - - - helperTextFontFamily - - Helper text - - font-family-sans - - Open Sans - - - - helperTextFontStyle - - Helper text - - font-style-normal - - normal - - - - helperTextFontWeight - - Helper text - - font-style-regular - - 400 - - - - helperTextFontTracking - - Helper text - - font-tracking-normal - - 0em - - - - ), - }, - { - title: "Border", - content: ( - - - - Component token - Element - Core token - Value - - - - - - stepBorderStyle - - Step border - - border-style-solid - - solid - - - - stepBorderWidth - - Step border - - border-width-2 - - 2px - - - - selectedStepBorderWidth - - Step border:selected - - border-width-2 - - 2px - - - - disabledStepBorderWidth - - Step border:disabled - - border-width-2 - - 2px - - - - stepBorderWidth - - Step border-radius - - border-radius-full - - 9999px - - - - separatorBorderWidth - - Separator - - border-width-1 - - 1px - - - - separatorBorderStyle - - Separator - - border-style-solid - - solid - - - - ), - }, - { - title: "Size", - content: ( - - - - Property - Element - Core token - Value - - - - - - width - - Step - - - 32px - - - - height - - Step - - - 32px - - - - ), - }, - { - title: "Spacing", - content: ( - - - - Property - Element - Core token - Value - - - - - - margin-left - - Label - - spacing-12 - - 0.75rem / 12px - - - - margin-left - - Step container - - spacing-24 - - 1.5rem / 24px - - - - margin-right - - Step container - - spacing-24 - - 1.5rem / 24px - - - - ), - }, - { - title: "Iconography", - content: ( - - - - Property - Element - Value - - - - - - height/ width - - Custom icon - 20/20px - - - - height/ width - - Validation icon - 18/18px - - - - ), - }, - ], - }, - { - title: "Accessibility", - subSections: [ - { - title: "WCAG 2.2", - content: ( - - - Understanding WCAG 2.2 -{" "} - - SC 1.3.1: Info and Relationships - - - - Understanding WCAG 2.2 -{" "} - - SC 2.2.1: Timing Adjustable - - - - Understanding WCAG 2.2 -{" "} - - SC 2.2.2: Pause, Stop, Hide - - - - Understanding WCAG 2.2 -{" "} - - SC 3.3.2: Labels or Instructions - - - - ), - }, - { - title: "WAI-ARIA", - content: ( - - - Web accessibility tutorials -{" "} - - Multi-page forms - - - - ), - }, - ], - }, -]; - -const WizardSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default WizardSpecsPage; diff --git a/apps/website/screens/components/wizard/specs/images/wizard_anatomy.png b/apps/website/screens/components/wizard/specs/images/wizard_anatomy.png deleted file mode 100644 index 6534dfc97e5cd07087f730fb0bde7c2e6d77318d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 17673 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 Oehl?ZPv@Mnzx!YRQAi*F diff --git a/apps/website/screens/components/wizard/specs/images/wizard_specs_spacing.png b/apps/website/screens/components/wizard/specs/images/wizard_specs_spacing.png deleted file mode 100644 index 956567e9e9fa3c2bf90a7330011b601833232b19..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 27151 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 diff --git a/apps/website/screens/components/wizard/specs/images/wizard_specs_stepper.png b/apps/website/screens/components/wizard/specs/images/wizard_specs_stepper.png deleted file mode 100644 index 659e964e5ae6fc4f3b5c145edfda75cf38a419fa..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 22179 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 diff --git a/apps/website/screens/components/wizard/specs/images/wizard_states.png b/apps/website/screens/components/wizard/specs/images/wizard_states.png deleted file mode 100644 index 48d29934384833929a2bee8f3bb96f68ac73e5bd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15830 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 z 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 - + - ), invalid: ( - - - + ), diff --git a/packages/lib/src/wizard/Wizard.stories.tsx b/packages/lib/src/wizard/Wizard.stories.tsx index fcf3ca7902..e3a081c773 100644 --- a/packages/lib/src/wizard/Wizard.stories.tsx +++ b/packages/lib/src/wizard/Wizard.stories.tsx @@ -1,7 +1,6 @@ import { userEvent, within } from "@storybook/test"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; import Title from "../../.storybook/components/Title"; -import { HalstackProvider } from "../HalstackContext"; import DxcWizard from "./Wizard"; import { Meta, StoryObj } from "@storybook/react"; @@ -63,17 +62,17 @@ const stepWithLongDescription = [ { label: "First step", description: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", }, { label: "Second step", description: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", }, { label: "Third step", description: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", }, ]; @@ -148,111 +147,68 @@ const stepMaterialSymbols = [ }, ]; -const opinionatedTheme = { - wizard: { - baseColor: "#5f249f", - fontColor: "#000000", - selectedStepFontColor: "#ffffff", - }, -}; - const Wizard = () => ( <> - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + ); @@ -260,7 +216,7 @@ const Wizard = () => ( const WizardSelected = () => ( - + ); diff --git a/packages/lib/src/wizard/Wizard.tsx b/packages/lib/src/wizard/Wizard.tsx index 5e50e4dece..398a2acba5 100644 --- a/packages/lib/src/wizard/Wizard.tsx +++ b/packages/lib/src/wizard/Wizard.tsx @@ -1,303 +1,228 @@ -import { useContext, useMemo, useState } from "react"; -import styled, { ThemeProvider } from "styled-components"; +import { useState } from "react"; +import styled from "styled-components"; import { spaces } from "../common/variables"; +import DxcDivider from "../divider/Divider"; import DxcIcon from "../icon/Icon"; -import HalstackContext from "../HalstackContext"; import WizardPropsType, { StepProps } from "./types"; +import DxcFlex from "../flex/Flex"; import icons from "./Icons"; -const StepsContainer = styled.div<{ +const Wizard = styled.div<{ mode: WizardPropsType["mode"]; margin: WizardPropsType["margin"]; }>` display: flex; - flex-direction: ${(props) => (props.mode === "vertical" ? "column" : "row")}; + flex-direction: ${({ mode }) => (mode === "vertical" ? "column" : "row")}; justify-content: center; - ${(props) => props.mode === "vertical" && "height: 500px"}; - font-family: ${(props) => props.theme.fontFamily}; - margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")}; - margin-top: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""}; - margin-right: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : ""}; - margin-bottom: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""}; - margin-left: ${(props) => - props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""}; + ${({ mode }) => mode === "vertical" && "height: 100%; width: fit-content;"}; + margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "0px")}; + margin-top: ${({ margin }) => (margin && typeof margin === "object" && margin.top ? spaces[margin.top] : "")}; + margin-right: ${({ margin }) => (margin && typeof margin === "object" && margin.right ? spaces[margin.right] : "")}; + margin-bottom: ${({ margin }) => + margin && typeof margin === "object" && margin.bottom ? spaces[margin.bottom] : ""}; + margin-left: ${({ margin }) => (margin && typeof margin === "object" && margin.left ? spaces[margin.left] : "")}; `; const StepContainer = styled.div<{ mode: WizardPropsType["mode"]; lastStep: boolean; }>` - display: inline-flex; - ${(props) => props.mode !== "vertical" && "align-items: center;"} - flex-grow: ${(props) => (props.lastStep ? "0" : "1")}; - flex-direction: ${(props) => (props.mode === "vertical" ? "column" : "row")}; - ${(props) => props.mode === "vertical" && "width: fit-content;"} -`; - -const Step = styled.button<{ - mode: WizardPropsType["mode"]; - disabled: StepProps["disabled"]; - first: boolean; - last: boolean; -}>` - display: flex; - justify-content: flex-start; - align-items: center; - gap: 0.75rem; - border: none; - border-radius: 0.25rem; - background: inherit; - margin: ${(props) => - props.first - ? props.mode === "vertical" - ? "0 0 24px 0" - : "0 24px 0 0" - : props.last - ? props.mode === "vertical" - ? "24px 0 0 0" - : "0 0 0 24px" - : props.mode === "vertical" - ? "24px 0" - : "0 24px"}; - - padding: 0px; - ${(props) => (props.disabled ? "cursor: not-allowed" : "")}; - - &:hover { - ${(props) => (props.disabled ? "" : "cursor: pointer")}; - } - &:focus { - outline: 2px solid ${(props) => props.theme.focusColor}; - } -`; - -const StepHeader = styled.div<{ validityIcon: boolean }>` - position: relative; - display: inline-flex; - ${(props) => props.validityIcon && "padding-bottom: 4px;"} + flex-grow: ${({ lastStep }) => (lastStep ? "0" : "1")}; + display: grid; + ${({ mode }) => (mode === "horizontal" ? "grid-template-columns: auto 1fr;" : "grid-template-rows: auto 1fr;")} + place-items: center; `; const IconContainer = styled.div<{ current: boolean; - visited: boolean; disabled: StepProps["disabled"]; + visited: boolean; }>` - width: ${(props) => - props.disabled - ? props.theme.disabledStepWidth - : props.current - ? props.theme.selectedStepWidth - : props.theme.stepWidth}; - height: ${(props) => - props.disabled - ? props.theme.disabledStepHeight - : props.current - ? props.theme.selectedStepHeight - : props.theme.stepHeight}; - - ${(props) => ` - ${ - props.disabled - ? `border: ${props.theme.disabledStepBorderThickness} ${props.theme.disabledStepBorderStyle} ${props.theme.disabledStepBorderColor};` - : props.current - ? `border: ${props.theme.selectedStepBorderThickness} ${props.theme.selectedStepBorderStyle} ${props.theme.selectedStepBorderColor};` - : props.visited - ? `border: ${props.theme.stepBorderThickness} ${props.theme.stepBorderStyle} ${props.theme.visitedStepBorderColor};` - : `border: ${props.theme.stepBorderThickness} ${props.theme.stepBorderStyle} ${props.theme.unvisitedStepBorderColor};` - } - background: ${ - props.disabled - ? `${props.theme.disabledStepBackgroundColor}` - : props.current - ? `${props.theme.selectedStepBackgroundColor}` - : !props.visited - ? `${props.theme.unvisitedStepBackgroundColor}` - : `${props.theme.visitedStepBackgroundColor}` - }; - `} - ${(props) => - props.disabled - ? `color: ${props.theme.disabledStepFontColor};` - : `color: ${ - props.current - ? props.theme.selectedStepFontColor - : !props.visited - ? props.theme.unvisitedStepFontColor - : props.theme.visitedStepFontColor - };`}; - - border-radius: ${(props) => - !props.current && !props.disabled - ? props.theme.stepBorderRadius - : props.current - ? props.theme.selectedStepBorderRadius - : props.disabled - ? props.theme.disabledStepBorderRadius - : ""}; - - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - font-size: ${(props) => props.theme.stepIconSize}; + box-sizing: border-box; + display: grid; + place-items: center; + border-radius: 50%; + border: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); + height: 32px; + width: 32px; + font-size: var(--height-xxs); svg { - width: ${(props) => props.theme.stepIconSize}; - height: ${(props) => props.theme.stepIconSize}; + height: var(--height-xxs); + width: 16px; } `; -const Number = styled.p` - font-size: ${(props) => props.theme.stepFontSize}; - font-family: ${(props) => props.theme.stepFontFamily}; - font-style: ${(props) => props.theme.stepFontStyle}; - font-weight: ${(props) => props.theme.stepFontWeight}; - letter-spacing: ${(props) => props.theme.stepFontTracking}; - opacity: 1; - margin: 0px 0px 0px 1px; +const Number = styled.span` + color: var(--color-fg-neutral-dark); + font-family: var(--typography-font-family); + font-size: var(--typography-label-l); + font-weight: var(--typography-label-regular); `; -const ValidityIconContainer = styled.div` - width: 18px; - height: 18px; - position: absolute; - top: 22.5px; - left: 22.5px; +const Label = styled.span` + color: var(--color-fg-neutral-dark); + font-family: var(--typography-font-family); + font-size: var(--typography-label-l); + font-weight: var(--typography-label-regular); + white-space: nowrap; `; -const Label = styled.p<{ - current: boolean; - visited: boolean; - disabled: StepProps["disabled"]; +const Description = styled.span` + color: var(--color-fg-neutral-dark); + font-family: var(--typography-font-family); + font-size: var(--typography-helper-text-m); + font-weight: var(--typography-helper-text-regular); + text-align: left; +`; + +const Step = styled.button<{ + mode: WizardPropsType["mode"]; + unvisited: boolean; }>` - text-align: ${(props) => props.theme.labelTextAlign}; - font-family: ${(props) => props.theme.labelFontFamily}; - font-size: ${(props) => props.theme.labelFontSize}; - font-style: ${(props) => props.theme.labelFontStyle}; - font-weight: ${(props) => props.theme.labelFontWeight}; - letter-spacing: ${(props) => props.theme.labelFontTracking}; - ${(props) => - props.disabled - ? `color: ${props.theme.disabledLabelFontColor};` - : `color: ${ - !props.visited - ? props.theme.unvisitedLabelFontColor - : props.current - ? props.theme.selectedLabelFontColor - : props.theme.visitedLabelFontColor - };`}; - text-transform: ${(props) => props.theme.labelFontTextTransform}; - margin: 0; + display: flex; + align-items: center; + gap: var(--spacing-gap-s); + background-color: transparent; + border: none; + border-radius: var(--border-radius-s); + padding: var(--spacing-padding-none); + margin: ${({ mode }) => + mode === "horizontal" + ? "var(--spacing-padding-none) var(--spacing-padding-l)" + : "var(--spacing-padding-l) var(--spacing-padding-none)"}; + cursor: pointer; + + &[aria-current="true"] { + ${IconContainer} { + background-color: var(--color-bg-primary-strong); + border: none; + } + ${IconContainer}, ${Number} { + color: var(--color-fg-neutral-bright); + } + } + ${({ unvisited }) => + unvisited && + `${IconContainer} { + border-color: var(--border-color-neutral-strongest); + } + ${IconContainer}, ${Number}, ${Label}, ${Description} { + color: var(--color-fg-neutral-stronger); + } + `} + &:focus:enabled { + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + } + &:disabled { + cursor: not-allowed; + ${IconContainer} { + background-color: var(--color-bg-neutral-light); + border: none; + } + ${IconContainer}, ${Number}, ${Label}, ${Description} { + color: var(--color-fg-neutral-medium); + } + } `; -const Description = styled.p<{ - current: boolean; - visited: boolean; - disabled: StepProps["disabled"]; +const StepIndicator = styled.div<{ + hasValidityIcon: boolean; }>` - text-align: ${(props) => props.theme.helperTextTextAlign}; - font-family: ${(props) => props.theme.helperTextFontFamily}; - font-size: ${(props) => props.theme.helperTextFontSize}; - font-style: ${(props) => props.theme.helperTextFontStyle}; - font-weight: ${(props) => props.theme.helperTextFontWeight}; - letter-spacing: ${(props) => props.theme.helperTextFontTracking}; - text-transform: ${(props) => props.theme.helperTextFontTextTransform}; - ${(props) => - props.disabled - ? `color: ${props.theme.disabledHelperTextFontColor};` - : `color: ${ - !props.visited - ? props.theme.unvisitedHelperTextFontColor - : props.current - ? props.theme.selectedHelperTextFontColor - : props.theme.visitedHelperTextFontColor - };`}; - margin: 0; + position: relative; + height: ${({ hasValidityIcon }) => (hasValidityIcon ? "var(--height-l)" : "var(--height-m)")}; + width: ${({ hasValidityIcon }) => (hasValidityIcon ? "36px" : "32px")}; `; -const StepSeparator = styled.div<{ mode: WizardPropsType["mode"] }>` - ${(props) => (props.mode === "horizontal" ? "height: 0;" : "width: 0;")}; - ${(props) => props.mode === "vertical" && "margin: 0 18px;"} - border: ${(props) => - `${props.theme.separatorBorderStyle} ${props.theme.separatorBorderThickness} ${props.theme.separatorColor}`}; - opacity: 1; - flex-grow: 1; +const ValidityIconContainer = styled.div<{ disabled?: boolean; valid: boolean }>` + position: absolute; + bottom: 0; + right: 0; + display: flex; + background-color: ${({ disabled, valid }) => + disabled + ? valid + ? "var(--color-bg-success-lightest)" + : "var(--color-bg-error-lightest)" + : valid + ? "var(--color-bg-success-lighter)" + : "var(--color-bg-error-lighter)"}; + border-radius: 50%; + color: ${({ disabled, valid }) => + disabled + ? valid + ? "var(--color-fg-success-lighter)" + : "var(--color-fg-error-lighter)" + : valid + ? "var(--color-fg-success-stronger)" + : "var(--color-fg-error-stronger)"}; + svg { + width: 16px; + height: var(--height-xxs); + } `; -const DxcWizard = ({ - mode = "horizontal", - defaultCurrentStep = 0, +export default function DxcWizard({ currentStep, + defaultCurrentStep = 0, + margin, + mode = "horizontal", onStepClick, steps, - margin, tabIndex = 0, -}: WizardPropsType): JSX.Element => { - const colorsTheme = useContext(HalstackContext); +}: WizardPropsType) { const [innerCurrent, setInnerCurrentStep] = useState(defaultCurrentStep); - const renderedCurrent = useMemo(() => currentStep ?? innerCurrent, [currentStep, innerCurrent]); - - const handleStepClick = (newValue: number) => { + const handleStepOnClick = (newValue: number) => { setInnerCurrentStep(newValue); onStepClick?.(newValue); }; return ( - - - {steps.map((step, i) => ( - - { - handleStepClick(i); - }} - disabled={step.disabled} - mode={mode} - first={i === 0} - last={i === steps.length - 1} - aria-current={renderedCurrent === i ? "step" : "false"} - tabIndex={tabIndex} - > - - - {step.icon ? ( - typeof step.icon === "string" ? ( - - ) : ( - step.icon - ) + + {steps.map((step, i) => ( + + { + handleStepOnClick(i); + }} + tabIndex={tabIndex} + unvisited={i > (currentStep ?? innerCurrent)} + > + + + {step.icon ? ( + typeof step.icon === "string" ? ( + ) : ( - {i + 1} - )} - - {step.valid != null && ( - {step.valid ? icons.valid : icons.invalid} + step.icon + ) + ) : ( + {i + 1} )} - - {(step.label || step.description) && ( -
- {step.label && ( - - )} - {step.description && ( - - {step.description} - - )} -
+ + {step.valid != null && ( + + {step.valid ? icons.valid : icons.invalid} + )} - - {i === steps.length - 1 ? "" : } - - ))} - - + + {(step.label || step.description) && ( + + {step.label && } + {step.description && {step.description}} + + )} + + {i !== steps.length - 1 && } + + ))} + ); -}; - -export default DxcWizard; +} From 4112b97d9b361bafed7b51cc989eedcb8280a062 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Tue, 11 Mar 2025 18:09:42 +0100 Subject: [PATCH 2/4] Restoring correct aria value --- .../wizard/code/examples/controlled.ts | 2 +- packages/lib/src/wizard/Wizard.tsx | 22 ++++++------------- 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/apps/website/screens/components/wizard/code/examples/controlled.ts b/apps/website/screens/components/wizard/code/examples/controlled.ts index f8cbbba02c..8a129f92f3 100644 --- a/apps/website/screens/components/wizard/code/examples/controlled.ts +++ b/apps/website/screens/components/wizard/code/examples/controlled.ts @@ -19,7 +19,7 @@ const code = `() => { }, { label: "Policy", - valid: true, + valid: false, }, { label: "Payment", diff --git a/packages/lib/src/wizard/Wizard.tsx b/packages/lib/src/wizard/Wizard.tsx index 398a2acba5..34b244848f 100644 --- a/packages/lib/src/wizard/Wizard.tsx +++ b/packages/lib/src/wizard/Wizard.tsx @@ -92,7 +92,7 @@ const Step = styled.button<{ : "var(--spacing-padding-l) var(--spacing-padding-none)"}; cursor: pointer; - &[aria-current="true"] { + &[aria-current="step"] { ${IconContainer} { background-color: var(--color-bg-primary-strong); border: none; @@ -138,23 +138,15 @@ const ValidityIconContainer = styled.div<{ disabled?: boolean; valid: boolean }> bottom: 0; right: 0; display: flex; - background-color: ${({ disabled, valid }) => - disabled - ? valid - ? "var(--color-bg-success-lightest)" - : "var(--color-bg-error-lightest)" - : valid - ? "var(--color-bg-success-lighter)" - : "var(--color-bg-error-lighter)"}; border-radius: 50%; - color: ${({ disabled, valid }) => + ${({ disabled, valid }) => disabled ? valid - ? "var(--color-fg-success-lighter)" - : "var(--color-fg-error-lighter)" + ? "background-color: var(--color-bg-success-lightest); color: var(--color-fg-success-lighter);" + : "background-color: var(--color-bg-error-lightest); color: var(--color-fg-error-lighter);" : valid - ? "var(--color-fg-success-stronger)" - : "var(--color-fg-error-stronger)"}; + ? "background-color: var(--color-bg-success-lighter); color: var(--color-fg-success-stronger);" + : "background-color: var(--color-bg-error-lighter); color: var(--color-fg-error-stronger);"} svg { width: 16px; height: var(--height-xxs); @@ -182,7 +174,7 @@ export default function DxcWizard({ {steps.map((step, i) => ( { From 2df75e5c0352d6b74fa3cdf37302018ab0837afc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 19 Mar 2025 16:53:39 +0100 Subject: [PATCH 3/4] Wizard documentation --- .../components/wizard/WizardPageLayout.tsx | 2 +- .../components/wizard/code/WizardCodePage.tsx | 36 ++-- .../wizard/overview/WizardOverviewPage.tsx | 200 ++++++++++++++---- .../wizard/overview/examples/content.ts | 40 ---- .../wizard/overview/examples/description.ts | 19 +- .../wizard/overview/examples/horizontal.ts | 23 ++ .../overview/examples/linearNonLinear.ts | 23 ++ .../overview/examples/stepNavigation.ts | 28 +++ .../wizard/overview/examples/validation.ts | 45 ++-- .../wizard/overview/examples/variants.ts | 39 ---- .../wizard/overview/examples/vertical.ts | 24 +++ .../wizard/overview/images/wizard_anatomy.png | Bin 0 -> 24891 bytes packages/lib/src/wizard/Wizard.stories.tsx | 40 ++-- packages/lib/src/wizard/Wizard.tsx | 21 +- 14 files changed, 341 insertions(+), 199 deletions(-) delete mode 100644 apps/website/screens/components/wizard/overview/examples/content.ts create mode 100644 apps/website/screens/components/wizard/overview/examples/horizontal.ts create mode 100644 apps/website/screens/components/wizard/overview/examples/linearNonLinear.ts create mode 100644 apps/website/screens/components/wizard/overview/examples/stepNavigation.ts delete mode 100644 apps/website/screens/components/wizard/overview/examples/variants.ts create mode 100644 apps/website/screens/components/wizard/overview/examples/vertical.ts create mode 100644 apps/website/screens/components/wizard/overview/images/wizard_anatomy.png diff --git a/apps/website/screens/components/wizard/WizardPageLayout.tsx b/apps/website/screens/components/wizard/WizardPageLayout.tsx index 18a263bca4..b296958789 100644 --- a/apps/website/screens/components/wizard/WizardPageLayout.tsx +++ b/apps/website/screens/components/wizard/WizardPageLayout.tsx @@ -20,7 +20,7 @@ const WizardPageHeading = ({ children }: { children: ReactNode }) => { with several bullet points where the user need to interact with the content of each step during the workflow. - + {children} diff --git a/apps/website/screens/components/wizard/code/WizardCodePage.tsx b/apps/website/screens/components/wizard/code/WizardCodePage.tsx index 8ba4e24d7f..e06612bbba 100644 --- a/apps/website/screens/components/wizard/code/WizardCodePage.tsx +++ b/apps/website/screens/components/wizard/code/WizardCodePage.tsx @@ -7,9 +7,19 @@ import Example from "@/common/example/Example"; import controlled from "./examples/controlled"; import uncontrolled from "./examples/uncontrolled"; import icons from "./examples/icons"; -import TableCode from "@/common/TableCode"; +import TableCode, { ExtendedTableCode } from "@/common/TableCode"; import StatusBadge from "@/common/StatusBadge"; +const stepsType = `{ + label: string; + description?: string; + disabled?: boolean; + icon?: string | + (React.ReactNode & + React.SVGProps); + valid?: boolean; +}[]`; + const sections = [ { title: "Props", @@ -84,11 +94,7 @@ const sections = [ - - { - "{ label: string; description?: string; icon?: string | (React.ReactNode & React.SVGProps ); disabled?: boolean; valid?: boolean; }[]" - } - + {stepsType} An array of objects representing the steps. Each of them has the following properties: @@ -151,15 +157,13 @@ const sections = [ }, ]; -const WizardCodePage = () => { - return ( - - - - - - - ); -}; +const WizardCodePage = () => ( + + + + + + +); export default WizardCodePage; diff --git a/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx b/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx index fb4dd48f0e..53dcb10517 100644 --- a/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx +++ b/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx @@ -3,74 +3,186 @@ import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; -import variants from "./examples/variants"; -import validation from "./examples/validation"; -import content from "./examples/content"; import description from "./examples/description"; +import anatomy from "./images/wizard_anatomy.png"; +import Image from "@/common/Image"; +import vertical from "./examples/vertical"; +import horizontal from "./examples/horizontal"; +import stepNavigation from "./examples/stepNavigation"; +import linearNonLinear from "./examples/linearNonLinear"; +import validation from "./examples/validation"; const sections = [ { title: "Introduction", content: ( - - - The horizontal/vertical line should not extend to the left of the first circle or to the right of the last - circle. - - - Do not overwhelmed the component with too many steps, it won't be a good idea for the user workflow neither - for the display of the information. - - + + The wizard component helps users navigate through multi-step processes in a structured and guided manner. It + breaks down complex workflows into manageable steps, improving clarity and reducing cognitive load.{" "} + Each step represents a key stage of the process, allowing users to track progress and move + forward or backward as needed. Wizards are commonly used in forms, onboarding flows, and setup configurations + where sequential input is required. + ), }, { - title: "Variants", + title: "Anatomy", content: ( <> - - The wizard component has two variants: horizontal and vertical. - - + Wizard's anatomy + + + Step: represents an individual stage in the wizard navigation. Each step corresponds to a + specific section of a multi-step process, guiding the user progressively through a flow. + + + Label: a descriptive title for the step that provides users with a clear understanding of + the content or action required at that stage. + + + Separator: a visual connector between steps that indicates the sequence and relationship + between them, reinforcing the step-by-step progression. + + + Step validator: a status indicator (checkmark or error icon) that provides feedback on + whether the step has been successfully completed or requires attention. + + + Description: an optional text displayed alongside a step to offer additional guidance, + clarifications, or instructions, ensuring users understand the requirements before proceeding. + + ), }, { - title: "Validation", + title: "Key interactions and features", content: ( - <> - - There could be some scenarios in which the content of a step wants to be validated while the user is filling - the fields with information or doing relevant actions in every step of the wizard. For that case, a validation - mark can be represented in every step once the user navigate to the next step in the linear progression. This - will represent the status of the validation respecting the content, with a success mark or an error mark - visible on the step mark. - - - + + To better understand the wizard component, and its possible use cases when working with a form, it's important + to review its key characteristics and interactions. + ), + subSections: [ + { + title: "Step navigation", + content: ( + <> + + Users progress through the wizard by clicking on steps, using navigation buttons, or interacting with the + interface if direct access to steps is enabled. Navigation can be controlled based on the form's + requirements, preventing users from skipping essential steps when necessary. + + + + ), + }, + { + title: "Linear vs. Non-Linear Flow", + content: ( + <> + + Wizards can follow a linear approach, where users must complete each step in sequence + before proceeding, or a non-linear approach, which allows free movement between steps. + The choice depends on the complexity of the process and whether dependencies exist between steps. + + + + ), + }, + { + title: "Step validation", + content: ( + <> + + There may be scenarios where the content of a step needs to be validated while the user is filling in + fields or performing relevant actions within each step of the wizard. In such cases, a validation mark can + be displayed on each step once the user progresses to the next one. This mark will indicate the validation + status of the content, showing either a success or error mark on the step. + + + + ), + }, + { + title: "Optional description and icons", + content: ( + <> + + Each step can include description or validation icons to provide context and feedback. + + + + ), + }, + ], }, { - title: "Content", + title: "Variants", content: ( - <> - Different variations of the content can be performed in the step: - - Only numbers - Only icons - Numbers/icons with step label - - - + + The wizard component has two variants depending on its orientation: horizontal and{" "} + vertical. + ), + subSections: [ + { + title: "Horizontal", + content: ( + <> + + The horizontal variant of the wizard is suitable for workflows where space is available horizontally, + making it ideal for tasks like multi-step forms and progress tracking. For example, setting up a user + account with several steps. + + + + ), + }, + { + title: "Vertical", + content: ( + <> + + The vertical variant works well when horizontal space is limited, often used in scenarios like long forms + or detailed steps in a process. An example could be an onboarding process with in-depth configuration + options. + + + + ), + }, + ], }, { - title: "Description", + title: "Best practices", content: ( - <> - Description can be added to the wizard component step: - - + + + Keep steps clear and logical: ensure that each step represents a meaningful part of the + process, following a natural order that users can easily follow. + + + Use concise and descriptive labels: step labels should clearly indicate the purpose of each + step to help users understand where they are in the process. + + + Provide real-time validation: if validation is required before moving forward, display clear + and immediate error messages to help users correct mistakes. + + + Indicate progress visually: use clear indicators to show the user's current step, completed + steps, and upcoming steps to enhance orientation and usability. + + + Confirm before final submission: if the wizard leads to an irreversible action (e.g., + submitting an application), provide a review step where users can check and edit their inputs. + + + Choose the right layout: use the horizontal variant for processes with a small number of + steps and the vertical variant for complex flows with long step descriptions. + + ), }, ]; diff --git a/apps/website/screens/components/wizard/overview/examples/content.ts b/apps/website/screens/components/wizard/overview/examples/content.ts deleted file mode 100644 index 5d16984bda..0000000000 --- a/apps/website/screens/components/wizard/overview/examples/content.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react"; - -const code = `() => { - const userIcon = ( - - - - - ); - - return ( - - - - ); -}`; - -const scope = { - DxcWizard, - DxcInset, -}; - -export default { code, scope }; diff --git a/apps/website/screens/components/wizard/overview/examples/description.ts b/apps/website/screens/components/wizard/overview/examples/description.ts index 6ca9a1946d..b20c64bbef 100644 --- a/apps/website/screens/components/wizard/overview/examples/description.ts +++ b/apps/website/screens/components/wizard/overview/examples/description.ts @@ -4,23 +4,24 @@ const code = `() => { return ( + /> ); }`; diff --git a/apps/website/screens/components/wizard/overview/examples/horizontal.ts b/apps/website/screens/components/wizard/overview/examples/horizontal.ts new file mode 100644 index 0000000000..acf2d8e007 --- /dev/null +++ b/apps/website/screens/components/wizard/overview/examples/horizontal.ts @@ -0,0 +1,23 @@ +import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + ); +}`; + +const scope = { + DxcWizard, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/wizard/overview/examples/linearNonLinear.ts b/apps/website/screens/components/wizard/overview/examples/linearNonLinear.ts new file mode 100644 index 0000000000..3af9696e8b --- /dev/null +++ b/apps/website/screens/components/wizard/overview/examples/linearNonLinear.ts @@ -0,0 +1,23 @@ +import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + ); +}`; + +const scope = { + DxcWizard, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/wizard/overview/examples/stepNavigation.ts b/apps/website/screens/components/wizard/overview/examples/stepNavigation.ts new file mode 100644 index 0000000000..7359d726d8 --- /dev/null +++ b/apps/website/screens/components/wizard/overview/examples/stepNavigation.ts @@ -0,0 +1,28 @@ +import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + ); +}`; + +const scope = { + DxcWizard, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/wizard/overview/examples/validation.ts b/apps/website/screens/components/wizard/overview/examples/validation.ts index 71c6c7964e..a3c83a6dae 100644 --- a/apps/website/screens/components/wizard/overview/examples/validation.ts +++ b/apps/website/screens/components/wizard/overview/examples/validation.ts @@ -1,34 +1,24 @@ -import { DxcWizard, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; +import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react"; const code = `() => { return ( - - - - + ); }`; @@ -36,7 +26,6 @@ const code = `() => { const scope = { DxcWizard, DxcInset, - DxcFlex, }; export default { code, scope }; diff --git a/apps/website/screens/components/wizard/overview/examples/variants.ts b/apps/website/screens/components/wizard/overview/examples/variants.ts deleted file mode 100644 index 218247ea1b..0000000000 --- a/apps/website/screens/components/wizard/overview/examples/variants.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { DxcWizard, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; - -const code = `() => { - return ( - - - - - - - ); -}`; - -const scope = { - DxcWizard, - DxcInset, - DxcFlex, -}; - -export default { code, scope }; diff --git a/apps/website/screens/components/wizard/overview/examples/vertical.ts b/apps/website/screens/components/wizard/overview/examples/vertical.ts new file mode 100644 index 0000000000..006cec61bb --- /dev/null +++ b/apps/website/screens/components/wizard/overview/examples/vertical.ts @@ -0,0 +1,24 @@ +import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + ); +}`; + +const scope = { + DxcWizard, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/wizard/overview/images/wizard_anatomy.png b/apps/website/screens/components/wizard/overview/images/wizard_anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..aca827a69cccc4205facd27bf25fa53a64e39ad1 GIT binary patch literal 24891 zcmeFZc~DbX*FG8$MMTtwc3=>?TalJo5Rh50TLc-Dc@Btx7zQECApsS!RRk58XPL(! zLzoi;1tpN6K*AglLWBT80tpb3+!Ok{@9+EjR^7UFtKL*8M@;tFXYIAude*a^ooBZ! zO+=1J907qqBBnR~vIcUH-X{z1c^(9TJcdmFGO~^2TbYh+^!A3!a7@w_oX8Gb(9vI1 zvjk3j8@p=zQQ*R}ulBF@&M2q{xE<{tNia_levdpi;wg)jqn_InLB7|; zsm66?{%Wr({}RalYlsgbf5VmEiHZd|SrWCvXZj3?@Z%JsJ~Ib~pJr}3Q>$BYfsT`z$|$$$DesF|6YOa9pqE}_wwq^!*P87UOF3tj{bW!B+Bpc z?^Rsd3DALmFB{`QXa2n^kQM0q_X?!+JBVj3;B`;vzeE1lmZ1MS5$M0W2lW5zu#x8g zgtH8B!TcTjorTkAXX(i8pBtaWtim|(jiBSHa>q&F+|ZS;Xrtm9K=R2IkhZz zZ09T}Lzy-V>M~o;x%TuJyd4;(&VR#m<7NIXJ%pJqqZA<%*_b$=n3ANFzPEA{{`n|K zY!NO2a`fAer`TddLCkO&=Z-sh=uYQc&T#)?KCJb42A{_-9aaZG3aPyK>mlxs*@B93 zueMGi-M8!Oce>M0gFHO<-;lZg1|c~6*<*704D)9Qx5w&j$*Zu#Tv9BXUYQ8;5SS_B zi__c>>58vi4A>|{O9TqBUZ5@7YK*+RTTc0qAi6Zb9p z5qoO00`sS!Z{3CvsPqf(-r@WA7IL|GQaAI?Mz0k+iZ5>Tarq%hqOPi|0n`*1~xe@^{=pBKvmCxiF#;6x&ycJxD%MQ{Srg}#L@tr6FPM% zmn0Ll_hlnf#nAe~(ptBrg4g8k>G;Im(Gn{P}aRs}&5ci+&4qmmKx zR(S@@gEbd;E*GMH@G@ZZc=P+tU*geRGHGuZCy4Fa+^*A-(ZoRJA^qOSo%d=N^Y^+P zgh7qt#WQ6Qd;L`GNz4OA$GTQw5O3ui1LgNkc-PwQ@2zVK=I2`JNh)uTbC(W~=X#j3 zN6{-yhJ*^8=P}zk7_06BV)u1H1C^$oR@@1kZhsj##I%(QNluN3-Ng5wKF-Z%u6$-~ za<{DT)V&<$k}V$*qm;n2-tYU%EVfZ11i!-igw%IOu-BhrnKB&a-1Wb28(hV`eS_3n z{TPC~X}K)W?F6ga$q3fp(6TxSy4L{Qjl$lx3+k-!t!t;Jfd545(*-FrWn2!|Niy<1 zZyN}E9=QiNnNZY1(6KbrosXT|qM$m~=Xuh!6|zaN?`Id$_7vYxU`kBB^smd(F^jh{ zFY_#DypMw}6pIg74wHhag>(Gmdv&EyH&cPfIgn8O(*he3lOHev9fg2_5btC#+G`F3^l*Ob>=nh>O)J}ua_$m@mHdB<}^S9&;2^A zm>YA3aE~<#)IH=*rojKQu`w=kF4+4`TMr3L3O3118@9^xpXBo(nD4^d^5yciZ7&Q0 z8@cYpzy7UFAamQ824(~sp!gb*_9MdL>A03V@oeoT`&NPPl5$jX3TgG+B9xM7enKderJ*^>Jo zjs8zPkdeWh+HI|86JY&j>j_Xx1zHRp|0~E*>B5#l?r%E_^GTV)ZyWr3&dVdRd7El} zKWCUbR>l%KRt>{BxnV5Q&kNKe{B@PQKskZ?b%^IFX=Vjl$hfUt#8!7Y>y~(&UElwS zuNOZ*MU~~pxMtezT#ceXQBeTZN$h75b6(k@DvRM_xsicxT~2Q_*?mC1Ita2?2VCH) z%YIxhJwK}J0NxbyCUii1tg@{|JtrXv@gESe*bZ?q`!h=&`dpo2&f5h8f`{tNo0$pLcFvgb4XO$J%Q1 z{ZF#nuZ-&ArK7%k>`-XC_o5blKK8zt6TI=B%*O2LK!o_a4)e?u@Egya91qc2fn>=h z;8XofHNIwp+23%DX`rs|{hXqgs9u84UYOsPEMUnmFcCU(qE)4Lz{@Z@!^0~o&we#?)jBX6< z9UT^E;Uu@dnUbu#N4x!$tB>wj>~mk}xeIdS=UFB7D$nF~#(P69Go&4+f=o*X2-NTi z7)({+zcu22D_PKgSpm?0D_PM0Czb4e_2u{rdgCEh7)U8yzwHNjyG5KXO;PZ;v?7Vi zCV_D})av>yz3th@BSn}j;pC4>sX zuo)r!7t1#FP;3@6Jy$m(95K@zl+R1cafJ7W0N|vm&e=tB+p68#QP7(=T2BaFrb2Dz z`j9|5(;6G;n8fB~ zl@Mz_Ak21+_><6`HmRMqIDO_6t`QfIGXvm8(Dg!o-kmGHj7;71WAAR|O7h0F--j?6 z&*L$KIbMNPQo?(eV_3a%K=+qw3m5O2F&j(m5_R}``D62jN_IB9%x#=WzEu>5!B{IJ0Z$W zQ^;kbxtCfqSL#Hs6#7rQ^HXe(5#yS`2 zulw91ro-sF3bFX`-Lq6QoTbCn>=}tB{YJ@+aQB7nXu-ct?P5E!mWPErTCgr z+E#7(|mC>){2g;Jx?KGgqh@$DCFv_R4HnDsH`+msLb{7{vMwv`_ksUif-pi6NdN>-W42ld_V`GDXH z8FdwlaJ-SZs(9C82C<^*Mi>Uf=nsxawl<9IV()z+L z_W)4W74q*u#v%b?frR_Bw?{RCvM0q+`Q_9jO!a5$TFXE0l6nZAR%>0?nrm)LXKw{p zdG_gC9L|YujapOl-fq0+1I#Dm5QGO2tBkt|@!4Uk)8@>aikPPd+rH|j((6FlHiB}h z(w7g0Cf3tDvp!G@?oZ3}-8cS@nDc?cv=eUkYyd;nPT+Ey8!3{c?dzFoImuHY0~Is1 z)L(pajtUd@cM}hwc^o>wVD{r}*F{50T33~B@y)|_2Rh>6ttCfnu4uSE>ZBquX#Yu6 z%`j4EJLD!wM0h8Q@_TAwifRRvkn=5CboBl36~dG9If&c2s0#1I6~K2_#v95SxO>?y zy;i09D8{}QTJpRQdpD<`%0SsD7z!Vcf2L88^_QKWi|mg_Ev4olgu<>5Xy^p$*@!q>hXSvcF#|HjZ*0?S0MmAFnT= zKZz6g0JtI1RW>wGTuc1iBM-ocKKsl}+O0>$oiHHa_WG2!I11rK?=Pm+De{f}N&SGU z_p^_^(1BGl`o1>Zj$Lgg&9q`_kH_?gXl<^x8^yW=4&I+Nb?o;VY@FK4k&7AJS<)y8 zGamOl)Mb|hqY`Rzsh7d1dkD|pjKWIa<&8+-fV--i;*|hD7?J(UEN(MFtD{iN!$NIu z)&4-Gh@|G*)yZZR?B%w3XY;YKqX$i%QFm<5^ zrL}amHD7?%WFe^)xMDlYaKT4bOxTtj(e@1O{XFUb)+ZXaCYiX&hy%AxdvgSM=8Sq< z)`h*ZzwTbRYc{*pW4PCoTX(6sjSyr5h0o$+IdpR2Q|V<%WAE6Cz-de@_jy*mW-2x; zdgaL(IZ&X1fzg9X9jYy636qn4FX1&1CrIWN4Y{bYTtC{MsqZ@pX@U0>rk9=~j8@KT z^gR&y&T_(m42ZXI?1?6bF2*-8E95MY9-PjB4grMPQd6m)jd8m=UavuYI=~nup?S=j zc4Sv;1PbsO<$kEACO7vaY00=J4G0_j$+_OkPU- zJB_=82<5gP?_T4G)?c=lPP#JR1gqWHMM_i4*@n+^if-eu1$}oV#i`f|_s4$N%L+R@ z2X`%ve1_bkS z2DOVV(zdOWF;fM8sdAm+j4Ss~BB~cOP{1tisqpf?`4}o-Qm1*Xpi+F#CwJJ-_SJ<~ zmDE%p@HC%YrSmY#^Y_^hGf-<3eG!NE3o@oUo4TyVSd$P?NhLUX0HZ6L%rOjI5nx`sv7V@k4WuYmt3xB11_`MZ=a6FpojKyHm48^gXQ zyl=?xve1Yat+KGI@u4wWCKv);!#Qtsz*jyavLK=n&GY>V$Q%~D#JuVl;JM3pcvMwJ zLA-;;U;buYO+eI^tvOTedC$0Jt)dVL=C8FC#=mRS<@2gBu*hdD6HBFn8bnbpxfj|3 z%c7LCJi%*tRGVxDdaaGRXgtEp{Z)GIf!gU!0b5tZHcO|4zCj|hy{d+FnJJXJZR?+; zA^da=2qCmI7Z)!2D-mIp9lkm-x}!h0RnRwz@^vlN(SEquI8xDA!~jR={=qKahbT_x zc}^x|T5_Km`l)F-!kSvHY|CG1E|OdM#oT4;Xr1VZ3uEm&i`iI3vy=CYKg5q_X0q|Qk=9uB$to6*x0wWW(@EQs>{?VKpPxXW0Zcj|bxH7|RiGSub zZdx!VtGJa?K@)2J9e^ivh5V=S8Ta>+-A?vZMaZ5dw147BIfNW8_&})Br%ANs;#{

a}5kZ(?mzczaT@DwZE_jFy= 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 ( <> <DxcWizard defaultCurrentStep={2} steps={stepWithLabelDescription} /> </ExampleContainer> + <ExampleContainer> + <Title title="Vertical" theme="light" level={4} /> + <DxcContainer height="500px"> + <DxcWizard steps={stepsDifferentLabelLengths} mode="vertical" /> + </DxcContainer> + </ExampleContainer> <ExampleContainer> <Title title="With long description in horizontal" theme="light" level={4} /> <DxcWizard steps={stepWithLongDescription} /> @@ -181,7 +203,7 @@ const Wizard = () => ( <Title title="With Material Symbols" theme="light" level={4} /> <DxcWizard steps={stepMaterialSymbols} /> </ExampleContainer> - <Title title="Margins horizontal" theme="light" level={2} /> + <Title title="Margins" theme="light" level={2} /> <ExampleContainer> <Title title="Xxsmall margin" theme="light" level={4} /> <DxcWizard margin="xxsmall" steps={stepWithLabel} /> @@ -213,24 +235,8 @@ const Wizard = () => ( </> ); -const WizardSelected = () => ( - <ExampleContainer> - <Title title="Clicked step" theme="light" level={4} /> - <DxcWizard steps={stepWithLabel} mode="vertical" /> - </ExampleContainer> -); - type Story = StoryObj<typeof DxcWizard>; export const Chromatic: Story = { render: Wizard, }; - -export const WizardStepActived: Story = { - render: WizardSelected, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const option = canvas.getByText("Third step"); - await userEvent.click(option); - }, -}; diff --git a/packages/lib/src/wizard/Wizard.tsx b/packages/lib/src/wizard/Wizard.tsx index 34b244848f..17f05fab6a 100644 --- a/packages/lib/src/wizard/Wizard.tsx +++ b/packages/lib/src/wizard/Wizard.tsx @@ -6,10 +6,11 @@ import DxcIcon from "../icon/Icon"; import WizardPropsType, { StepProps } from "./types"; import DxcFlex from "../flex/Flex"; import icons from "./Icons"; +import { DxcInset } from ".."; const Wizard = styled.div<{ - mode: WizardPropsType["mode"]; margin: WizardPropsType["margin"]; + mode: WizardPropsType["mode"]; }>` display: flex; flex-direction: ${({ mode }) => (mode === "vertical" ? "column" : "row")}; @@ -24,13 +25,12 @@ const Wizard = styled.div<{ `; const StepContainer = styled.div<{ - mode: WizardPropsType["mode"]; lastStep: boolean; + mode: WizardPropsType["mode"]; }>` flex-grow: ${({ lastStep }) => (lastStep ? "0" : "1")}; display: grid; ${({ mode }) => (mode === "horizontal" ? "grid-template-columns: auto 1fr;" : "grid-template-rows: auto 1fr;")} - place-items: center; `; const IconContainer = styled.div<{ @@ -85,11 +85,12 @@ const Step = styled.button<{ background-color: transparent; border: none; border-radius: var(--border-radius-s); - padding: var(--spacing-padding-none); margin: ${({ mode }) => mode === "horizontal" ? "var(--spacing-padding-none) var(--spacing-padding-l)" : "var(--spacing-padding-l) var(--spacing-padding-none)"}; + padding: var(--spacing-padding-none); + width: fit-content; cursor: pointer; &[aria-current="step"] { @@ -153,6 +154,12 @@ const ValidityIconContainer = styled.div<{ disabled?: boolean; valid: boolean }> } `; +const DividerContainer = styled.div<{ mode: WizardPropsType["mode"] }>` + display: grid; + place-items: center; + ${({ mode }) => mode === "vertical" && "width: 32px"}; +`; + export default function DxcWizard({ currentStep, defaultCurrentStep = 0, @@ -212,7 +219,11 @@ export default function DxcWizard({ </DxcFlex> )} </Step> - {i !== steps.length - 1 && <DxcDivider color="darkGrey" orientation={mode} />} + {i !== steps.length - 1 && ( + <DividerContainer mode={mode}> + <DxcDivider color="darkGrey" orientation={mode} /> + </DividerContainer> + )} </StepContainer> ))} </Wizard> From 0eb397884135679381f5a5c90e2e64ac025816a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Fri, 21 Mar 2025 13:52:36 +0100 Subject: [PATCH 4/4] Wizard changes based on feedback --- .../wizard/overview/WizardOverviewPage.tsx | 19 +++++++++---------- packages/lib/src/wizard/Wizard.tsx | 5 ++--- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx b/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx index 53dcb10517..1e7fc62694 100644 --- a/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx +++ b/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx @@ -59,8 +59,8 @@ const sections = [ title: "Key interactions and features", content: ( <DxcParagraph> - To better understand the wizard component, and its possible use cases when working with a form, it's important - to review its key characteristics and interactions. + To better understand the wizard component and its possible use cases when working with a form, it's important to + review its key characteristics and interactions. </DxcParagraph> ), subSections: [ @@ -121,8 +121,7 @@ const sections = [ title: "Variants", content: ( <DxcParagraph> - The wizard component has two variants depending on its orientation: <strong>horizontal</strong> and{" "} - <strong>vertical</strong>. + The wizard component has two variants depending on its orientation: horizontal and vertical. </DxcParagraph> ), subSections: [ @@ -131,9 +130,9 @@ const sections = [ content: ( <> <DxcParagraph> - The horizontal variant of the wizard is suitable for workflows where space is available horizontally, - making it ideal for tasks like multi-step forms and progress tracking. For example, setting up a user - account with several steps. + The <strong>horizontal variant</strong> of the wizard is suitable for workflows where space is available + horizontally, making it ideal for tasks like multi-step forms and progress tracking. For example, setting + up a user account with several steps. </DxcParagraph> <Example example={horizontal} /> </> @@ -144,9 +143,9 @@ const sections = [ content: ( <> <DxcParagraph> - The vertical variant works well when horizontal space is limited, often used in scenarios like long forms - or detailed steps in a process. An example could be an onboarding process with in-depth configuration - options. + The <strong>vertical variant</strong> works well when horizontal space is limited, often used in scenarios + like long forms or detailed steps in a process. An example could be an onboarding process with in-depth + configuration options. </DxcParagraph> <Example example={vertical} /> </> diff --git a/packages/lib/src/wizard/Wizard.tsx b/packages/lib/src/wizard/Wizard.tsx index 17f05fab6a..b31e5b1971 100644 --- a/packages/lib/src/wizard/Wizard.tsx +++ b/packages/lib/src/wizard/Wizard.tsx @@ -6,7 +6,6 @@ import DxcIcon from "../icon/Icon"; import WizardPropsType, { StepProps } from "./types"; import DxcFlex from "../flex/Flex"; import icons from "./Icons"; -import { DxcInset } from ".."; const Wizard = styled.div<{ margin: WizardPropsType["margin"]; @@ -16,7 +15,7 @@ const Wizard = styled.div<{ flex-direction: ${({ mode }) => (mode === "vertical" ? "column" : "row")}; justify-content: center; ${({ mode }) => mode === "vertical" && "height: 100%; width: fit-content;"}; - margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "0px")}; + margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "")}; margin-top: ${({ margin }) => (margin && typeof margin === "object" && margin.top ? spaces[margin.top] : "")}; margin-right: ${({ margin }) => (margin && typeof margin === "object" && margin.right ? spaces[margin.right] : "")}; margin-bottom: ${({ margin }) => @@ -43,7 +42,7 @@ const IconContainer = styled.div<{ place-items: center; border-radius: 50%; border: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); - height: 32px; + height: var(--height-m); width: 32px; font-size: var(--height-xxs); svg {