diff --git a/apps/website/pages/components/progress-bar/code.tsx b/apps/website/pages/components/progress-bar/code.tsx new file mode 100644 index 0000000000..875b2559de --- /dev/null +++ b/apps/website/pages/components/progress-bar/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import ProgressBarPageLayout from "screens/components/progress-bar/ProgressBarPageLayout"; +import ProgressBarCodePage from "screens/components/progress-bar/code/ProgressBarCodePage"; + +const Code = () => ( + <> + + Progress bar code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/progress-bar/index.tsx b/apps/website/pages/components/progress-bar/index.tsx index 600ea58ee7..a6bcc21207 100644 --- a/apps/website/pages/components/progress-bar/index.tsx +++ b/apps/website/pages/components/progress-bar/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; -import ProgressBarCodePage from "screens/components/progress-bar/code/ProgressBarCodePage"; +import ProgressBarOverviewPage from "screens/components/progress-bar/overview/ProgressBarOverviewPage"; import ProgressBarPageLayout from "screens/components/progress-bar/ProgressBarPageLayout"; -const Index = () => { - return ( - <> - - Progress Bar — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Progress bar — 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/progress-bar/specifications.tsx b/apps/website/pages/components/progress-bar/specifications.tsx deleted file mode 100644 index a2710b01b9..0000000000 --- a/apps/website/pages/components/progress-bar/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import ProgressBarSpecsPage from "screens/components/progress-bar/specs/ProgressBarSpecsPage"; -import ProgressBarPageLayout from "screens/components/progress-bar/ProgressBarPageLayout"; - -const Specifications = () => { - return ( - <> - - Progress Bar Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/progress-bar/usage.tsx b/apps/website/pages/components/progress-bar/usage.tsx deleted file mode 100644 index 4b7598d75f..0000000000 --- a/apps/website/pages/components/progress-bar/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import ProgressBarPageLayout from "screens/components/progress-bar/ProgressBarPageLayout"; -import ProgressBarUsagePage from "screens/components/progress-bar/usage/ProgressBarUsagePage"; - -const Usage = () => { - return ( - <> - - Progress Bar Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx b/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx index 231fd62ee8..82aacea0db 100644 --- a/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx +++ b/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx @@ -6,27 +6,17 @@ import { ReactNode } from "react"; const ProgressBarPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/progress-bar" }, - { label: "Usage", path: "/components/progress-bar/usage" }, - { - label: "Specifications", - path: "/components/progress-bar/specifications", - }, + { label: "Overview", path: "/components/progress-bar" }, + { label: "Code", path: "/components/progress-bar/code" }, ]; return ( - - - Progress indicators offer visibility of system status to the user, giving feedback to indicate that the - application is taking some time to processing data. The main aim of these components is to reduce the - user's uncertainty about offering something to look at while the user is waiting for the end. A progress - bar should be used in any scenario that will take more than 1 second in performing the action, for anything - that takes less than that time, it will be distracting for the user. - - + + A progress bar visually indicates the completion status of a task or process. + {children} diff --git a/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx b/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx index 52c1910f63..a674f70551 100644 --- a/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx +++ b/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx @@ -23,12 +23,17 @@ const sections = [ - label + ariaLabel string - Text to be placed above the progress bar. - - + + Specifies a string to be used as the name for the progress bar element when no label is + provided. + + + 'Progress bar' + helperText @@ -39,57 +44,54 @@ const sections = [ - - overlay - - boolean - - If true, the progress bar will be displayed as a modal. + label - false + string + Text to be placed above the progress bar. + - - value + margin - number + 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin - The value of the progress indicator. If it's received the component is determinate otherwise is - indeterminate. + 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. - - showValue + overlay boolean - If true, the determined value is displayed above the progress bar. + If true, the progress bar will be displayed as a modal. false - margin + showValue - 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin + boolean + If true, the determined value is displayed above the progress bar. - 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. + false - - - ariaLabel + value - string + number - Specifies a string to be used as the name for the progress bar element when no label is - provided. + The value of the progress indicator. If it's received the component is determinate otherwise is + indeterminate. - 'Progress bar' + - @@ -110,15 +112,13 @@ const sections = [ }, ]; -const ProgressBarCodePage = () => { - return ( - - - - - - - ); -}; +const ProgressBarCodePage = () => ( + + + + + + +); export default ProgressBarCodePage; diff --git a/apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx b/apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx new file mode 100644 index 0000000000..b5943e7f9a --- /dev/null +++ b/apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx @@ -0,0 +1,146 @@ +import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import DocFooter from "@/common/DocFooter"; +import Image from "@/common/Image"; +import Example from "@/common/example/Example"; +import default_overlay from "./images/default_overlay.png"; +import anatomy from "./images/progress_bar_anatomy.png"; +import determinate_undeterminate from "./examples/determinate_undeterminate"; + +const sections = [ + { + title: "Introduction", + content: ( + + Progress bars are used to show the progression of a task over time. They provide users with immediate visual + feedback about the current state of an operation, such as loading content, uploading a file, or completing a + form. + + ), + }, + { + title: "Anatomy", + content: ( + <> + Progress bar's anatomy + + + Label (Optional): text element that describes the purpose or context of the + progress bar (e.g., "Uploading file…"). + + + Helper text (Optional): provides additional information or clarification related + to the progress, such as status messages or expected duration. + + + Progress track line: the filled portion of the bar showing completed progress. + + + Progress total line: the background bar representing the total task to be completed. + + + Progress indicator (Optional): highlights the current progress value within the + bar. + + + + ), + }, + { + title: "Variants", + content: ( + <> + Progress bars come in different styles based on task nature and UI context. + + ), + subSections: [ + { + title: "Default or overlay", + content: ( + <> + + + Default: displays the progress bar inline, directly within the page or component + layout. This is the most commonly used style, suitable for non-blocking tasks that allow the user to + continue interacting with the UI. + + + Overlay: displays the progress with a background overlay, temporarily blocking + interaction with the UI. It's used for tasks that require user attention or when interaction must be + paused until the task is complete. + + + Default mode and overlay mode example + + ), + }, + { + title: "Determinate or indeterminate", + content: ( + <> + + + Determinate: are used when the system can calculate the percentage of work completed. + + + Indeterminate: are used when the duration of the task is unknown or unpredictable. + + + + + ), + }, + ], + }, + { + title: "Best practices", + content: ( + <> + + + Provide clear feedback: always display a progress bar when the task takes longer than a few + seconds. This reassures users that the system is processing and gives them a sense of control. If possible, + include a label or percentage to indicate how much of the task is completed. + + + Avoid overuse: don't show a progress bar for tasks shorter than 1 second — use a spinner or + no feedback instead. Don't use a progress bar just for decoration; it should always reflect a real process. + + + Provide contextual information: whenever possible, provide additional information like + "Starting," "Halfway," or "Almost Done" to help users gauge the task status. If applicable, show what the + task involves, especially when the user is waiting for something critical (e.g., "Updating to the latest + version..."). + + + Use the right variant: use determinate when the completion percentage is known (e.g., file + uploads, task completion). Use indeterminate when the system can’t predict the time or progress (e.g., + loading content, waiting for server responses). + + + Avoid blocking the UI: when progress is happening in the background, place the progress bar + in a non-intrusive area, like near the top of the page or inside a specific section. Use overlay variant + only when necessary, as it blocks user interaction. Make sure to include a clear indication of what the user + is waiting for and an estimated time if possible. + + + Combine with other feedback: pair with success, warning, or info toasts or alerts when + appropriate to give users closure after completion. + + + + ), + }, +]; + +const ProgressBarOverviewPage = () => ( + + + + + + +); + +export default ProgressBarOverviewPage; diff --git a/apps/website/screens/components/progress-bar/usage/examples/determinate_undeterminate.ts b/apps/website/screens/components/progress-bar/overview/examples/determinate_undeterminate.ts similarity index 100% rename from apps/website/screens/components/progress-bar/usage/examples/determinate_undeterminate.ts rename to apps/website/screens/components/progress-bar/overview/examples/determinate_undeterminate.ts diff --git a/apps/website/screens/components/progress-bar/overview/images/default_overlay.png b/apps/website/screens/components/progress-bar/overview/images/default_overlay.png new file mode 100644 index 0000000000..e15db544ad Binary files /dev/null and b/apps/website/screens/components/progress-bar/overview/images/default_overlay.png differ diff --git a/apps/website/screens/components/progress-bar/overview/images/progress_bar_anatomy.png b/apps/website/screens/components/progress-bar/overview/images/progress_bar_anatomy.png new file mode 100644 index 0000000000..f4cf39ca28 Binary files /dev/null and b/apps/website/screens/components/progress-bar/overview/images/progress_bar_anatomy.png differ diff --git a/apps/website/screens/components/progress-bar/specs/ProgressBarSpecsPage.tsx b/apps/website/screens/components/progress-bar/specs/ProgressBarSpecsPage.tsx deleted file mode 100644 index 0bc16ce496..0000000000 --- a/apps/website/screens/components/progress-bar/specs/ProgressBarSpecsPage.tsx +++ /dev/null @@ -1,436 +0,0 @@ -import { DxcTable, DxcBulletedList, DxcParagraph, DxcFlex } 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 specsImage from "./images/progress_specs.png"; -import anatomyImage from "./images/progress_anatomy.png"; - -const sections = [ - { - title: "Specifications", - content: ( -
- Progress bar design specifications -
- ), - }, - - { - title: "Anatomy", - content: ( - <> - Progress bar anatomy - - - Label (Optional) - - Progress track line - - Helper text (Optional) - - Progress total line - - Progress indicator (Optional){" "} - - - - ), - }, - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - - - - Component token - Element - Core token - Value - - - - - - trackLineColor - - Track line - - color-purple-700 - - #5f249f - - - - totalLineColor - - Total line - - color-grey-200 - - #e6e6e6 - - - - labelFontColor - - Label - - color-black - - #000000 - - - - labelFontColor - - Label - - color-black - - #000000 - - - - indicatorFontColor - - Indicator - - color-black - - #000000 - - - - helperFontColor - - Helper text - - color-black - - #000000 - - - - overlayColor - - Overlay - - color-grey-800-a - - #000000b3 - - - - overlayFontColor - - Overlay font color - - color-white - - #ffffff - - - - ), - }, - { - title: "Size", - content: ( - - - - Property - Element - Core token - Value - - - - - - height - - Track line - - - 8px - - - - height - - Total line - - - 8px - - - - max-width - - Overlay - - - 100vw - - - - max-height - - Overlay - - - 100vh - - - - ), - }, - { - title: "Internal spacing", - content: ( - - - - Property - Element - Core token - Value - - - - - - margin-bottom - - Label - - - 8px - - - - margin-top - - Helper text - - - 8px - - - - ), - }, - { - title: "Margin", - content: ( - <> - - - - Margin - Value - - - - - - xxsmall - - 6px - - - - xsmall - - 16px - - - - small - - 24px - - - - medium - - 36px - - - - large - - 48px - - - - xlarge - - 64px - - - - xxlarge - - 100px - - - - - And also apply different values to each side of the component: - top, bottom, left, right. - - - ), - }, - { - title: "Typography", - content: ( - - - - Property - Element - Core token - Value - - - - - - font-size - - Label - - font-scale-01 - - 12px - - - - font-weight - - Label - - font-regular - - 400 - - - - text-transform - - Label - - font-transform-uppercase - - uppercase - - - - font-size - - Indicator - - font-scale-02 - - 14px - - - - font-weight - - Indicator - - font-bold - - 600 - - - - font-size - - Helper text - - font-scale-01 - - 12px - - - - font-weight - - Helper text - - font-regular - - 400 - - - - ), - }, - { - title: "Border", - content: ( - - - - Property - Element - Core token - Value - - - - - - border-width - - Track line - - border-width-0 - - 0rem / 0px - - - - border-style - - Track line - - border-style-none - - none - - - - border-radius - - Track line - - border-radius-full - - 9999px - - - - ), - }, - ], - }, -]; - -const ProgressBarSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default ProgressBarSpecsPage; diff --git a/apps/website/screens/components/progress-bar/specs/images/progress_anatomy.png b/apps/website/screens/components/progress-bar/specs/images/progress_anatomy.png deleted file mode 100644 index 090493057d..0000000000 Binary files a/apps/website/screens/components/progress-bar/specs/images/progress_anatomy.png and /dev/null differ diff --git a/apps/website/screens/components/progress-bar/specs/images/progress_specs.png b/apps/website/screens/components/progress-bar/specs/images/progress_specs.png deleted file mode 100644 index d87d412bd4..0000000000 Binary files a/apps/website/screens/components/progress-bar/specs/images/progress_specs.png and /dev/null differ diff --git a/apps/website/screens/components/progress-bar/usage/ProgressBarUsagePage.tsx b/apps/website/screens/components/progress-bar/usage/ProgressBarUsagePage.tsx deleted file mode 100644 index 05fb4cf7d3..0000000000 --- a/apps/website/screens/components/progress-bar/usage/ProgressBarUsagePage.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import DocFooter from "@/common/DocFooter"; -import Figure from "@/common/Figure"; -import Image from "@/common/Image"; -import Example from "@/common/example/Example"; -import determinate_indeterminate from "./examples/determinate_undeterminate"; -import variants from "./images/progress_variants.png"; - -const sections = [ - { - title: "Usage", - subSections: [ - { - title: "Do's", - content: ( - - - Use a progress bar when it needs to give feedback in a long-running process with continuous values. - - - Add additional information to clarify the user about the action it is waiting ("Sending - documents..."). - - - Use the determinate type whenever possible, the user can have an estimation on how long it is going take. - - - ), - }, - { - title: "Don'ts", - content: ( - - - For an unknown amount of time/progress, consider using a loading spinner instead. - - - Do not use this type of component in actions that will take less than 1 minute of processing. - - - ), - }, - ], - }, - { - title: "Variants", - content: ( - <> - - The component progress-bar has two variants: default and overlay. - -
- Progress bar variants -
- - ), - }, - { - title: "Determinate or indeterminate", - content: ( - <> - - - - Determinate indicators display how long a process will take. They should be used in longer processes. - - - - Indeterminate indicators express an unspecified amount of wait time. They should be used when: - - - The processing time is unknown. - - The wait time is expected to be short enough that it's not necessary to display. - - - - - - ), - }, -]; - -const ProgressBarUsagePage = () => { - return ( - - - - - - - ); -}; - -export default ProgressBarUsagePage; diff --git a/apps/website/screens/components/progress-bar/usage/images/progress_variants.png b/apps/website/screens/components/progress-bar/usage/images/progress_variants.png deleted file mode 100644 index 3d60e7328f..0000000000 Binary files a/apps/website/screens/components/progress-bar/usage/images/progress_variants.png and /dev/null differ diff --git a/packages/lib/src/progress-bar/ProgressBar.stories.tsx b/packages/lib/src/progress-bar/ProgressBar.stories.tsx index 60e9f7feec..bf87f7dc02 100644 --- a/packages/lib/src/progress-bar/ProgressBar.stories.tsx +++ b/packages/lib/src/progress-bar/ProgressBar.stories.tsx @@ -1,7 +1,6 @@ import { Meta, StoryObj } from "@storybook/react"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; import Title from "../../.storybook/components/Title"; -import { HalstackProvider } from "../HalstackContext"; import DxcProgressBar from "./ProgressBar"; export default { @@ -9,16 +8,6 @@ export default { component: DxcProgressBar, } as Meta; -const opinionatedTheme = { - progressBar: { - accentColor: "#5f249f", - baseColor: "#e6e6e6", - fontColor: "#000000", - overlayColor: "#000000b3", - overlayFontColor: "#ffffff", - }, -}; - const ProgressBar = () => ( <> @@ -62,19 +51,6 @@ const ProgressBar = () => ( <DxcProgressBar label="Margin xxlarge" margin="xxlarge" value={50} showValue /> </ExampleContainer> - <Title title="Opinionated theme" theme="light" level={2} /> - <ExampleContainer> - <Title title="Label and helper text" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcProgressBar label="Loading..." helperText="Helper text" value={24} showValue /> - </HalstackProvider> - </ExampleContainer> - <ExampleContainer> - <Title title="Without default value" theme="light" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcProgressBar label="Loading..." helperText="Helper text" showValue /> - </HalstackProvider> - </ExampleContainer> </> ); @@ -85,15 +61,6 @@ const ProgressBarWithOverlay = () => ( </ExampleContainer> ); -const ProgressBarWithOverlayOpinionated = () => ( - <ExampleContainer> - <Title title="Overlay" theme="dark" level={4} /> - <HalstackProvider theme={opinionatedTheme}> - <DxcProgressBar label="Overlay" helperText="Helper text" overlay showValue value={50} /> - </HalstackProvider> - </ExampleContainer> -); - type Story = StoryObj<typeof DxcProgressBar>; export const Chromatic: Story = { @@ -103,7 +70,3 @@ export const Chromatic: Story = { export const ProgressBarOverlay: Story = { render: ProgressBarWithOverlay, }; - -export const ProgressBarOverlayOpinionated: Story = { - render: ProgressBarWithOverlayOpinionated, -}; diff --git a/packages/lib/src/progress-bar/ProgressBar.tsx b/packages/lib/src/progress-bar/ProgressBar.tsx index c6124c7e90..d8c99b8809 100644 --- a/packages/lib/src/progress-bar/ProgressBar.tsx +++ b/packages/lib/src/progress-bar/ProgressBar.tsx @@ -1,32 +1,35 @@ -import { useContext, useEffect, useId, useState } from "react"; -import styled, { ThemeProvider } from "styled-components"; +import { useEffect, useId, useState } from "react"; +import styled from "styled-components"; import { spaces } from "../common/variables"; -import HalstackContext from "../HalstackContext"; import ProgressBarPropsType from "./types"; import DxcFlex from "../flex/Flex"; +import { auxTextStyles, labelTextStyles, textColorStyles } from "./utils"; -const Overlay = styled.div<{ +const ProgressBarContainer = styled.div<{ overlay: ProgressBarPropsType["overlay"]; }>` - ${({ overlay, theme }) => - overlay - ? `background-color: ${theme.overlayColor}; - width: 100%; - justify-content: center; - height: 100vh; - align-items: center; - max-width: 100%; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 1300;` - : `background-color: transparent;`} display: flex; flex-wrap: wrap; min-width: 100px; width: 100%; + ${({ overlay }) => + overlay && + ` + position: fixed; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + z-index: 1300; + `} +`; + +const Overlay = styled.div` + background-color: var(--color-bg-alpha-medium); + height: 100%; + inset: 0; + position: fixed; `; const MainContainer = styled.div<{ @@ -45,19 +48,15 @@ const MainContainer = styled.div<{ props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""}; display: flex; flex-direction: column; - gap: 0.5rem; z-index: ${(props) => (props.overlay ? "100" : "0")}; + gap: var(--spacing-gap-s); `; const ProgressBarLabel = styled.div<{ overlay: ProgressBarPropsType["overlay"]; }>` - font-family: ${(props) => props.theme.labelFontFamily}; - font-style: ${(props) => props.theme.labelFontStyle}; - font-size: ${(props) => props.theme.labelFontSize}; - font-weight: ${(props) => props.theme.labelFontWeight}; - text-transform: ${(props) => props.theme.labelFontTextTransform}; - color: ${(props) => (props.overlay ? props.theme.overlayFontColor : props.theme.labelFontColor)}; + ${labelTextStyles}; + ${(props) => textColorStyles(props.overlay)}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -67,35 +66,29 @@ const ProgressBarLabel = styled.div<{ const ProgressBarProgress = styled.div<{ overlay: ProgressBarPropsType["overlay"]; }>` + ${auxTextStyles}; + ${(props) => textColorStyles(props.overlay)}; flex-shrink: 0; - color: ${(props) => (props.overlay ? props.theme.overlayFontColor : props.theme.valueFontColor)}; - font-family: ${(props) => props.theme.valueFontFamily}; - font-style: ${(props) => props.theme.valueFontStyle}; - font-size: ${(props) => props.theme.valueFontSize}; - font-weight: ${(props) => props.theme.valueFontWeight}; - text-transform: ${(props) => props.theme.valueFontTextTransform}; `; const HelperText = styled.span<{ overlay: ProgressBarPropsType["overlay"] }>` - color: ${(props) => (props.overlay ? props.theme.overlayFontColor : props.theme.helperTextFontColor)}; - font-family: ${(props) => props.theme.helperTextFontFamily}; - font-size: ${(props) => props.theme.helperTextFontSize}; - font-style: ${(props) => props.theme.helperTextFontStyle}; - font-weight: ${(props) => props.theme.helperTextFontWeight}; - line-height: 1.5em; + ${(props) => textColorStyles(props.overlay)}; + ${auxTextStyles}; `; const LinearProgress = styled.div<{ helperText: ProgressBarPropsType["helperText"]; + overlay: ProgressBarPropsType["overlay"]; }>` position: relative; - border-radius: ${(props) => props.theme.borderRadius}; - height: ${(props) => props.theme.thickness}; - background-color: ${(props) => props.theme.totalLineColor}; + border-radius: var(--border-radius-m); + height: 8px; + background-color: ${(props) => (props.overlay ? "var(--color-bg-neutral-lighter)" : "var(--color-bg-neutral-light)")}; overflow: hidden; `; const LinearProgressBar = styled.span<{ + overlay: ProgressBarPropsType["overlay"]; variant: "determinate" | "indeterminate"; value: ProgressBarPropsType["value"]; }>` @@ -107,7 +100,7 @@ const LinearProgressBar = styled.span<{ transform: ${(props) => `translateX(-${props.variant === "determinate" ? 100 - (props.value ?? 0) : 0}%)`}; transition: ${(props) => (props.variant === "determinate" ? "transform .4s linear" : "transform 0.2s linear")}; transform-origin: left; - background-color: ${(props) => props.theme.trackLineColor}; + background-color: ${(props) => (props.overlay ? "var(--color-fg-primary-medium)" : "var(--color-fg-primary-strong)")}; ${(props) => props.variant === "indeterminate" ? "animation: keyframes-indeterminate-first 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;" @@ -153,7 +146,6 @@ const DxcProgressBar = ({ margin, ariaLabel = "Progress bar", }: ProgressBarPropsType): JSX.Element => { - const colorsTheme = useContext(HalstackContext); const labelId = `label-${useId()}`; const [innerValue, setInnerValue] = useState<number | undefined>(); @@ -162,34 +154,38 @@ const DxcProgressBar = ({ }, [value]); return ( - <ThemeProvider theme={colorsTheme.progressBar}> - <Overlay overlay={overlay}> - <MainContainer overlay={overlay} margin={margin}> - <DxcFlex justifyContent="space-between" gap="0.5rem"> - {label && ( - <ProgressBarLabel id={labelId} overlay={overlay}> - {label} - </ProgressBarLabel> - )} - {innerValue != null && showValue && ( - <ProgressBarProgress overlay={overlay}>{innerValue} %</ProgressBarProgress> - )} - </DxcFlex> - <LinearProgress - role="progressbar" - helperText={helperText} - aria-label={label ? undefined : ariaLabel} - aria-labelledby={label ? labelId : undefined} - aria-valuenow={innerValue} - aria-valuemin={0} - aria-valuemax={100} - > - <LinearProgressBar variant={innerValue == null ? "indeterminate" : "determinate"} value={innerValue} /> - </LinearProgress> - {helperText && <HelperText overlay={overlay}>{helperText}</HelperText>} - </MainContainer> - </Overlay> - </ThemeProvider> + <ProgressBarContainer overlay={overlay}> + {overlay && <Overlay />} + <MainContainer overlay={overlay} margin={margin}> + <DxcFlex justifyContent="space-between"> + {label && ( + <ProgressBarLabel id={labelId} overlay={overlay}> + {label} + </ProgressBarLabel> + )} + {innerValue != null && showValue && ( + <ProgressBarProgress overlay={overlay}>{innerValue} %</ProgressBarProgress> + )} + </DxcFlex> + <LinearProgress + aria-label={label ? undefined : ariaLabel} + aria-labelledby={label ? labelId : undefined} + aria-valuenow={innerValue} + aria-valuemin={0} + aria-valuemax={100} + helperText={helperText} + role="progressbar" + overlay={overlay} + > + <LinearProgressBar + overlay={overlay} + variant={innerValue == null ? "indeterminate" : "determinate"} + value={innerValue} + /> + </LinearProgress> + {helperText && <HelperText overlay={overlay}>{helperText}</HelperText>} + </MainContainer> + </ProgressBarContainer> ); }; diff --git a/packages/lib/src/progress-bar/utils.ts b/packages/lib/src/progress-bar/utils.ts new file mode 100644 index 0000000000..e9401dcac1 --- /dev/null +++ b/packages/lib/src/progress-bar/utils.ts @@ -0,0 +1,17 @@ +import { css } from "styled-components"; + +export const textColorStyles = (overlay = false) => css` + color: ${overlay ? "var(--color-fg-neutral-bright)" : "var(--color-fg-neutral-dark)"}; +`; + +export const labelTextStyles = css` + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-semibold); +`; + +export const auxTextStyles = css` + font-family: var(--typography-font-family); + font-size: var(--typography-helper-text-s); + font-weight: var(--typography-helper-text-regular); +`;