From dd7cdcba6c46fe250442b69f843f48e924d96260 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 10 Apr 2024 16:05:42 +0200 Subject: [PATCH 01/51] progress bar first commit --- @navikt/core/css/config/_mappings.js | 1 + @navikt/core/css/index.css | 1 + @navikt/core/css/progress-bar.css | 65 +++++++++++ @navikt/core/react/package.json | 10 ++ @navikt/core/react/src/index.ts | 1 + .../src/progress-bar/ProgressBar.stories.tsx | 107 ++++++++++++++++++ .../react/src/progress-bar/ProgressBar.tsx | 100 ++++++++++++++++ @navikt/core/react/src/progress-bar/index.ts | 2 + .../pages/eksempler/progress-bar/demo.tsx | 24 ++++ .../progress-bar/indeterminate-state.tsx | 24 ++++ yarn.lock | 34 +++--- 11 files changed, 352 insertions(+), 17 deletions(-) create mode 100644 @navikt/core/css/progress-bar.css create mode 100644 @navikt/core/react/src/progress-bar/ProgressBar.stories.tsx create mode 100644 @navikt/core/react/src/progress-bar/ProgressBar.tsx create mode 100644 @navikt/core/react/src/progress-bar/index.ts create mode 100644 aksel.nav.no/website/pages/eksempler/progress-bar/demo.tsx create mode 100644 aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx diff --git a/@navikt/core/css/config/_mappings.js b/@navikt/core/css/config/_mappings.js index 23059b1b79..280710d1e2 100644 --- a/@navikt/core/css/config/_mappings.js +++ b/@navikt/core/css/config/_mappings.js @@ -164,6 +164,7 @@ const StyleMappings = { }, { component: "Panel", main: "panel.css" }, { component: "Popover", main: "popover.css" }, + { component: "ProgressBar", main: "progress-bar.css" }, { component: "Provider", main: "" }, { component: "Radio", main: formCss, dependencies: [typoCss] }, { component: "RadioGroup", main: formCss, dependencies: [typoCss] }, diff --git a/@navikt/core/css/index.css b/@navikt/core/css/index.css index d6c1ca2de5..85d483404d 100644 --- a/@navikt/core/css/index.css +++ b/@navikt/core/css/index.css @@ -26,6 +26,7 @@ @import "panel.css"; @import "link-panel.css"; @import "read-more.css"; +@import "progress-bar.css"; @import "skeleton.css"; @import "stepper.css"; @import "table.css"; diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css new file mode 100644 index 0000000000..8c3915ef5a --- /dev/null +++ b/@navikt/core/css/progress-bar.css @@ -0,0 +1,65 @@ +.navds-progress-bar { + position: relative; + background: var(--a-surface-alt-3-subtle, #cce2f0); + width: 500px; + border-radius: 9999px; + overflow: hidden; +} + +.navds-progress-bar--small { + height: 12px; +} + +.navds-progress-bar--medium { + height: 16px; +} + +.navds-progress-bar--large { + height: 24px; +} + +.navds-progress-bar__progress { + content: ""; + transform-origin: left; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 100%; + background: var(--a-surface-alt-3, #005b82); + border-radius: inherit; +} + +.navds-progress-bar--indeterminate { + animation: navds-progress-bar-indeterminate 1.5s infinite linear; +} + +/* navds-progress-bar-indeterminate wave animation */ +@keyframes navds-progress-bar-indeterminate { + 0% { + left: -35%; + right: 100%; + } + + 60% { + left: 100%; + right: -90%; + } + + 100% { + left: 100%; + right: -90%; + } +} + +/* @keyframes navds-progress-bar-indeterminate { + 0% { + left: -100%; + width: 100%; + } + + 100% { + left: 100%; + width: 100%; + } +} */ diff --git a/@navikt/core/react/package.json b/@navikt/core/react/package.json index 26c7a011ff..12668eb4e7 100644 --- a/@navikt/core/react/package.json +++ b/@navikt/core/react/package.json @@ -309,6 +309,16 @@ "default": "./cjs/popover/index.js" } }, + "./ProgressBar": { + "import": { + "types": "./esm/progress-bar/index.d.ts", + "default": "./esm/progress-bar/index.js" + }, + "require": { + "types": "./cjs/progress-bar/index.d.ts", + "default": "./cjs/progress-bar/index.js" + } + }, "./Provider": { "import": { "types": "./esm/provider/index.d.ts", diff --git a/@navikt/core/react/src/index.ts b/@navikt/core/react/src/index.ts index 19f651588f..4b21433c33 100644 --- a/@navikt/core/react/src/index.ts +++ b/@navikt/core/react/src/index.ts @@ -59,6 +59,7 @@ export { Modal, type ModalProps } from "./modal"; export { Pagination, type PaginationProps } from "./pagination"; export { Popover, type PopoverProps } from "./popover"; export { Portal, type PortalProps } from "./portal"; +export { ProgressBar, type ProgressBarProps } from "./progress-bar"; export { Provider, type ProviderProps } from "./provider"; export { ReadMore, type ReadMoreProps } from "./read-more"; export { Skeleton, type SkeletonProps } from "./skeleton"; diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx new file mode 100644 index 0000000000..03a1192b5b --- /dev/null +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -0,0 +1,107 @@ +import { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { ProgressBar } from "."; +import { VStack } from "../layout/stack"; + +export default { + title: "ds-react/ProgressBar", + component: ProgressBar, + parameters: { + chromatic: { disable: true }, + }, +} satisfies Meta; + +type Story = StoryObj; + +export const Default: Story = { + render: () => { + return ( +
+

Loading

+ +
+ ); + }, + args: { + size: "medium", + value: 66, + }, + argTypes: { + size: { + options: ["large", "medium", "small"], + control: { type: "radio" }, + }, + }, +}; + +export const Small: Story = { + render: () => { + return ( +
+

Fremdrift i søknaden

+ +
+ ); + }, + args: { + ...Default.args, + size: "small", + value: 90, + }, +}; + +export const IndeterminateState: Story = { + render: () => { + return ( +
+

Indeterminate progress bar

+ +
+ ); + }, + args: { + ...Default.args, + size: "medium", + duration: 1, + value: 7, + valueMax: 10, + }, +}; + +export const Chromatic: Story = { + render: () => { + return ( + +
+

Default

+ {/* @ts-expect-error Args are partial, leading to required prop mismatch */} + +
+
+

Small

+ {/* @ts-expect-error Args are partial, leading to required prop mismatch */} + +
+
+

Indeterminate State Animation

+ {/* @ts-expect-error Args are partial, leading to required prop mismatch */} + +
+ + ); + }, + parameters: { + chromatic: { disable: false }, + }, +}; diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx new file mode 100644 index 0000000000..e9eaaf9fda --- /dev/null +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -0,0 +1,100 @@ +import cl from "clsx"; +import React, { HTMLAttributes, forwardRef, useMemo } from "react"; + +export interface ProgressBarProps extends HTMLAttributes { + /** + * Changes height of progressbar. + * @default "medium" + */ + size?: "large" | "medium" | "small"; + /** + * Value of progressbar. + */ + value: number; + /** + * Minimum progress. + * @default 0 + */ + valueMin?: number; + /** + * Maximum progress. + * @default 100 + */ + valueMax?: number; + /** + * Used to approximate a task duration in seconds. ProgressBar shows an indeterminate animation after duration is done. + */ + duration?: number; + /** + * Used to give the progressbar a label. + */ + labelId: string; +} + +/** + * ProgressBar + * TODO: DOCUMENTATION + * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar) + * @see 🏷️ {@link ProgressBarProps} + * + * @example + * // For innlasting av innhold + * + * + * @example + * // Som fremgangsindikator på søknader og lignende + * + */ +export const ProgressBar = forwardRef( + ({ size = "medium", value, valueMin = 0, valueMax = 100, ...props }, ref) => { + const clampedValue = useMemo( + () => Math.min(Math.max(value, valueMin), valueMax), + [value, valueMin, valueMax], + ); + + const [isIndeterminate, setIsIndeterminate] = React.useState(false); + + React.useEffect(() => { + let timer: NodeJS.Timeout; + console.log("duration", props.duration); + if (props.duration) + timer = setTimeout(() => { + console.log("duration done"); + setIsIndeterminate(true); + }, props.duration * 1000); + + return () => { + if (timer) { + clearTimeout(timer); + } + }; + }, [props.duration]); + + return ( +
+
+
+ ); + }, +); + +export default ProgressBar; diff --git a/@navikt/core/react/src/progress-bar/index.ts b/@navikt/core/react/src/progress-bar/index.ts new file mode 100644 index 0000000000..fdce5ecc1b --- /dev/null +++ b/@navikt/core/react/src/progress-bar/index.ts @@ -0,0 +1,2 @@ +"use client"; +export { default as ProgressBar, type ProgressBarProps } from "./ProgressBar"; diff --git a/aksel.nav.no/website/pages/eksempler/progress-bar/demo.tsx b/aksel.nav.no/website/pages/eksempler/progress-bar/demo.tsx new file mode 100644 index 0000000000..6287318d05 --- /dev/null +++ b/aksel.nav.no/website/pages/eksempler/progress-bar/demo.tsx @@ -0,0 +1,24 @@ +import { ProgressBar } from "@navikt/ds-react"; +import { withDsExample } from "@/web/examples/withDsExample"; + +const Example = () => { + return ( +
+ + + +
+ ); +}; + +// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE +export default withDsExample(Example); + +/* Storybook story */ +export const Demo = { + render: Example, +}; + +export const args = { + index: 0, +}; diff --git a/aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx b/aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx new file mode 100644 index 0000000000..e8d6fa1fe0 --- /dev/null +++ b/aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx @@ -0,0 +1,24 @@ +import { BodyShort, ProgressBar } from "@navikt/ds-react"; +import { withDsExample } from "@/web/examples/withDsExample"; + +const Example = () => { + return ( +
+ Indeterminate + +
+ ); +}; + +// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE +export default withDsExample(Example); + +/* Storybook story */ +export const Demo = { + render: Example, +}; + +export const args = { + desc: "'duration' brukes for å anslå lastetiden. Etter dette viser progress bar en indeterminate state-animasjon.", + index: 1, +}; diff --git a/yarn.lock b/yarn.lock index 1ac30cdd03..e2b14dcb9d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3360,7 +3360,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@^6.4.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@^6.4.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons": version: 0.0.0-use.local resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons" dependencies: @@ -3388,8 +3388,8 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint" dependencies: - "@navikt/ds-css": ^6.4.0 - "@navikt/ds-tokens": ^6.4.0 + "@navikt/ds-css": ^6.4.1 + "@navikt/ds-tokens": ^6.4.1 concurrently: 7.2.1 postcss-selector-parser: ^6.0.13 postcss-value-parser: ^4.2.0 @@ -3404,7 +3404,7 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel@workspace:@navikt/aksel" dependencies: - "@navikt/ds-css": 6.4.0 + "@navikt/ds-css": 6.4.1 axios: 1.6.0 chalk: 4.1.0 clipboardy: ^2.3.0 @@ -3425,11 +3425,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@*, @navikt/ds-css@6.4.0, @navikt/ds-css@^6.4.0, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@*, @navikt/ds-css@6.4.1, @navikt/ds-css@^6.4.1, @navikt/ds-css@workspace:@navikt/core/css": version: 0.0.0-use.local resolution: "@navikt/ds-css@workspace:@navikt/core/css" dependencies: - "@navikt/ds-tokens": ^6.4.0 + "@navikt/ds-tokens": ^6.4.1 cssnano: 6.0.0 fast-glob: 3.2.11 lodash: 4.17.21 @@ -3442,13 +3442,13 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@*, @navikt/ds-react@^6.4.0, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@*, @navikt/ds-react@^6.4.1, @navikt/ds-react@workspace:@navikt/core/react": version: 0.0.0-use.local resolution: "@navikt/ds-react@workspace:@navikt/core/react" dependencies: "@floating-ui/react": 0.25.4 - "@navikt/aksel-icons": ^6.4.0 - "@navikt/ds-tokens": ^6.4.0 + "@navikt/aksel-icons": ^6.4.1 + "@navikt/ds-tokens": ^6.4.1 "@radix-ui/react-tabs": 1.0.0 "@radix-ui/react-toggle-group": 1.0.0 "@testing-library/dom": 8.13.0 @@ -3480,11 +3480,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@^6.4.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@^6.4.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": version: 0.0.0-use.local resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind" dependencies: - "@navikt/ds-tokens": ^6.4.0 + "@navikt/ds-tokens": ^6.4.1 color: 4.2.3 lodash: ^4.17.21 tailwindcss: ^3.3.3 @@ -3494,7 +3494,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@^6.4.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@^6.4.1, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: @@ -8177,11 +8177,11 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/aksel-icons": ^6.4.0 - "@navikt/ds-css": ^6.4.0 - "@navikt/ds-react": ^6.4.0 - "@navikt/ds-tailwind": ^6.4.0 - "@navikt/ds-tokens": ^6.4.0 + "@navikt/aksel-icons": ^6.4.1 + "@navikt/ds-css": ^6.4.1 + "@navikt/ds-react": ^6.4.1 + "@navikt/ds-tailwind": ^6.4.1 + "@navikt/ds-tokens": ^6.4.1 languageName: unknown linkType: soft From 6e8aaf50069b679db77864461cba3880b89f6261 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Thu, 11 Apr 2024 11:08:58 +0200 Subject: [PATCH 02/51] add min-width to bar --- @navikt/core/css/progress-bar.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 8c3915ef5a..f50fd86126 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -1,21 +1,24 @@ .navds-progress-bar { position: relative; background: var(--a-surface-alt-3-subtle, #cce2f0); - width: 500px; + width: 100%; border-radius: 9999px; overflow: hidden; } .navds-progress-bar--small { height: 12px; + min-width: 12px; } .navds-progress-bar--medium { height: 16px; + min-width: 16px; } .navds-progress-bar--large { height: 24px; + min-width: 24px; } .navds-progress-bar__progress { From 99f31331015e7cfd78e1f3af0fee63cfc5a6336b Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 12 Apr 2024 09:08:09 +0200 Subject: [PATCH 03/51] add prelimenary - hopefully not permament, really basic - animation for indeterminate state --- @navikt/core/css/progress-bar.css | 28 ++++++++++++------- .../src/progress-bar/ProgressBar.stories.tsx | 2 +- .../react/src/progress-bar/ProgressBar.tsx | 5 ++-- 3 files changed, 22 insertions(+), 13 deletions(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index f50fd86126..aa43d85c79 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -22,7 +22,6 @@ } .navds-progress-bar__progress { - content: ""; transform-origin: left; position: absolute; top: 0; @@ -33,25 +32,34 @@ border-radius: inherit; } -.navds-progress-bar--indeterminate { - animation: navds-progress-bar-indeterminate 1.5s infinite linear; +.navds-progress-bar__progress--indeterminate { + /* animation-timing-function: cubic-bezier(0.4, 0.1, 0.5, 0.9); */ + animation-timing-function: linear; + animation-duration: 1.8s; + animation-name: navds-progress-bar-indeterminate; + animation-iteration-count: infinite; } /* navds-progress-bar-indeterminate wave animation */ @keyframes navds-progress-bar-indeterminate { 0% { - left: -35%; - right: 100%; + transform: translateX(-100%); } - 60% { - left: 100%; - right: -90%; + 25% { + transform: translateX(-45%); + } + + 50% { + transform: translateX(0%); + } + + 75% { + transform: translateX(45%); } 100% { - left: 100%; - right: -90%; + transform: translateX(100%); } } diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index 03a1192b5b..6f60659265 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -64,7 +64,7 @@ export const IndeterminateState: Story = {
diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index e9eaaf9fda..9d26b0a949 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -76,7 +76,6 @@ export const ProgressBar = forwardRef( className={cl( "navds-progress-bar", `navds-progress-bar--${size}`, - { "navds-progress-bar--indeterminate": isIndeterminate }, props.className, )} aria-valuemin={valueMin} @@ -87,7 +86,9 @@ export const ProgressBar = forwardRef( aria-labelledby={props.labelId ?? undefined} >
Date: Fri, 12 Apr 2024 10:55:19 +0200 Subject: [PATCH 04/51] yarn lock --- yarn.lock | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/yarn.lock b/yarn.lock index 07eb3a5681..1680c8e21f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4323,7 +4323,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@^6.4.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@^6.5.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": version: 0.0.0-use.local resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons" dependencies: @@ -4351,8 +4351,8 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint" dependencies: - "@navikt/ds-css": ^6.4.1 - "@navikt/ds-tokens": ^6.4.1 + "@navikt/ds-css": ^6.5.0 + "@navikt/ds-tokens": ^6.5.0 concurrently: 7.2.1 postcss-selector-parser: ^6.0.13 postcss-value-parser: ^4.2.0 @@ -4367,7 +4367,7 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel@workspace:@navikt/aksel" dependencies: - "@navikt/ds-css": 6.4.1 + "@navikt/ds-css": 6.5.0 axios: 1.6.0 chalk: 4.1.0 clipboardy: ^2.3.0 @@ -4388,11 +4388,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@*, @navikt/ds-css@6.4.1, @navikt/ds-css@^6.4.1, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@*, @navikt/ds-css@6.5.0, @navikt/ds-css@^6.5.0, @navikt/ds-css@workspace:@navikt/core/css": version: 0.0.0-use.local resolution: "@navikt/ds-css@workspace:@navikt/core/css" dependencies: - "@navikt/ds-tokens": ^6.4.1 + "@navikt/ds-tokens": ^6.5.0 cssnano: 6.0.0 fast-glob: 3.2.11 lodash: 4.17.21 @@ -4405,13 +4405,13 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@*, @navikt/ds-react@^6.4.1, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@*, @navikt/ds-react@^6.5.0, @navikt/ds-react@workspace:@navikt/core/react": version: 0.0.0-use.local resolution: "@navikt/ds-react@workspace:@navikt/core/react" dependencies: "@floating-ui/react": 0.25.4 - "@navikt/aksel-icons": ^6.4.1 - "@navikt/ds-tokens": ^6.4.1 + "@navikt/aksel-icons": ^6.5.0 + "@navikt/ds-tokens": ^6.5.0 "@testing-library/dom": 8.13.0 "@testing-library/jest-dom": ^5.16.0 "@testing-library/react": ^13.3.0 @@ -4441,11 +4441,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@^6.4.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@^6.5.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": version: 0.0.0-use.local resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind" dependencies: - "@navikt/ds-tokens": ^6.4.1 + "@navikt/ds-tokens": ^6.5.0 color: 4.2.3 lodash: ^4.17.21 tailwindcss: ^3.3.3 @@ -4455,7 +4455,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@^6.4.1, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@^6.5.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: @@ -8992,11 +8992,11 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/aksel-icons": ^6.4.1 - "@navikt/ds-css": ^6.4.1 - "@navikt/ds-react": ^6.4.1 - "@navikt/ds-tailwind": ^6.4.1 - "@navikt/ds-tokens": ^6.4.1 + "@navikt/aksel-icons": ^6.5.0 + "@navikt/ds-css": ^6.5.0 + "@navikt/ds-react": ^6.5.0 + "@navikt/ds-tailwind": ^6.5.0 + "@navikt/ds-tokens": ^6.5.0 languageName: unknown linkType: soft From 01b50bd8dbf1897a9a531ed9a2a86113e657fa2e Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 12 Apr 2024 10:56:06 +0200 Subject: [PATCH 05/51] add progress transition for smoothness --- @navikt/core/css/progress-bar.css | 1 + 1 file changed, 1 insertion(+) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index aa43d85c79..ee35e0aa32 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -30,6 +30,7 @@ width: 100%; background: var(--a-surface-alt-3, #005b82); border-radius: inherit; + transition: transform 100ms ease-in-out; } .navds-progress-bar__progress--indeterminate { From 406977b5fb8a7d58d6f5b75b68683b1dabddc62f Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 12 Apr 2024 10:56:26 +0200 Subject: [PATCH 06/51] Add overcomplicated loading simulator --- .../src/progress-bar/ProgressBar.stories.tsx | 32 +++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index 6f60659265..05a9558fe2 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -15,10 +15,38 @@ type Story = StoryObj; export const Default: Story = { render: () => { + const [value, setValue] = React.useState(0); + React.useEffect(() => { + const withRandomIntervals = (callback: () => void) => { + const interval = Math.random() * 800 + 100; // Random time between 0.1-0.8 seconds + return setTimeout(() => { + callback(); + withRandomIntervals(callback); // Recursively call setRandomInterval + }, interval); + }; + + const intervalId = withRandomIntervals(() => { + setValue( + (oldValue) => + oldValue >= 100 ? 100 : oldValue + Math.random() * 35 + 5, // Increase value 5-40 of 100 + ); + }); + + const timeoutId = setTimeout( + () => clearInterval(intervalId), + Math.random() * 4000 + 1000, // Random time between 1-5 seconds + ); + + return () => { + clearInterval(intervalId); + clearTimeout(timeoutId); + }; + }, []); + return ( -
+

Loading

- +
); }, From 4d240b8941cc82e975e3a851f1ccf71a1234609d Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 12 Apr 2024 11:45:46 +0200 Subject: [PATCH 07/51] remove demo --- .../pages/eksempler/progress-bar/demo.tsx | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/aksel.nav.no/website/pages/eksempler/progress-bar/demo.tsx b/aksel.nav.no/website/pages/eksempler/progress-bar/demo.tsx index 6287318d05..fc93ff1ed2 100644 --- a/aksel.nav.no/website/pages/eksempler/progress-bar/demo.tsx +++ b/aksel.nav.no/website/pages/eksempler/progress-bar/demo.tsx @@ -1,24 +1,24 @@ -import { ProgressBar } from "@navikt/ds-react"; -import { withDsExample } from "@/web/examples/withDsExample"; +// import { ProgressBar } from "@navikt/ds-react"; +// import { withDsExample } from "@/web/examples/withDsExample"; -const Example = () => { - return ( -
- - - -
- ); -}; +// const Example = () => { +// return ( +//
+// +// +// +//
+// ); +// }; -// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example); +// // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE +// export default withDsExample(Example); -/* Storybook story */ -export const Demo = { - render: Example, -}; +// /* Storybook story */ +// export const Demo = { +// render: Example, +// }; -export const args = { - index: 0, -}; +// export const args = { +// index: 0, +// }; From abc66d5f1e163efa5145181cf4b45943b6d9e296 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 12 Apr 2024 12:34:03 +0200 Subject: [PATCH 08/51] Refactor ProgressBar component to support different sizes and aria-label attributes --- .../src/progress-bar/ProgressBar.stories.tsx | 36 +++++++++++---- .../react/src/progress-bar/ProgressBar.tsx | 46 +++++++++++++++---- 2 files changed, 64 insertions(+), 18 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index 05a9558fe2..5605c23e7d 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -46,7 +46,12 @@ export const Default: Story = { return (

Loading

- +
); }, @@ -62,25 +67,35 @@ export const Default: Story = { }, }; -export const Small: Story = { +export const Sizes: Story = { render: () => { return (
-

Fremdrift i søknaden

+

Fremdrift i søknaden

+

Fremdrift i søknaden

+ +

Fremdrift i søknaden

+
); }, args: { ...Default.args, - size: "small", - value: 90, }, }; @@ -90,10 +105,11 @@ export const IndeterminateState: Story = {

Indeterminate progress bar

); @@ -117,9 +133,9 @@ export const Chromatic: Story = {
-

Small

+

Sizes

{/* @ts-expect-error Args are partial, leading to required prop mismatch */} - +

Indeterminate State Animation

diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 9d26b0a949..9747e3fd7d 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -1,7 +1,7 @@ import cl from "clsx"; import React, { HTMLAttributes, forwardRef, useMemo } from "react"; -export interface ProgressBarProps extends HTMLAttributes { +interface ProgressBarPropsBase extends HTMLAttributes { /** * Changes height of progressbar. * @default "medium" @@ -18,19 +18,37 @@ export interface ProgressBarProps extends HTMLAttributes { valueMin?: number; /** * Maximum progress. - * @default 100 */ - valueMax?: number; + valueMax: number; /** - * Used to approximate a task duration in seconds. ProgressBar shows an indeterminate animation after duration is done. + * Used to approximate a task duration in seconds. + * ProgressBar shows an indeterminate animation after duration is done. */ duration?: number; /** - * Used to give the progressbar a label. + * String ID of the element that labels the progress-bar. + * Not needed if `aria-label` is used. */ - labelId: string; + "aria-labelledby"?: string; + /** + * String value that labels the progress-bar. + * Not needed if `aria-labelledby` is used. + */ + "aria-label"?: string; } +export type ProgressBarProps = ProgressBarPropsBase & + ( + | { + "aria-labelledby": string; + "aria-label"?: never; + } + | { + "aria-label": string; + "aria-labelledby"?: never; + } + ); + /** * ProgressBar * TODO: DOCUMENTATION @@ -46,7 +64,18 @@ export interface ProgressBarProps extends HTMLAttributes { * */ export const ProgressBar = forwardRef( - ({ size = "medium", value, valueMin = 0, valueMax = 100, ...props }, ref) => { + ( + { + size = "medium", + value, + valueMin = 0, + valueMax, + "aria-labelledby": ariaLabelledBy, + "aria-label": ariaLabel, + ...props + }, + ref, + ) => { const clampedValue = useMemo( () => Math.min(Math.max(value, valueMin), valueMax), [value, valueMin, valueMax], @@ -83,7 +112,8 @@ export const ProgressBar = forwardRef( aria-valuenow={clampedValue} aria-valuetext={`${clampedValue} av ${valueMax}`} // TODO: needed when we have aria-labelledby? role="progressbar" - aria-labelledby={props.labelId ?? undefined} + aria-labelledby={ariaLabelledBy} + aria-label={ariaLabel} >
Date: Fri, 12 Apr 2024 12:35:42 +0200 Subject: [PATCH 09/51] Update @navikt/core/css/progress-bar.css --- @navikt/core/css/progress-bar.css | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index ee35e0aa32..eea2b7058b 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -64,14 +64,3 @@ } } -/* @keyframes navds-progress-bar-indeterminate { - 0% { - left: -100%; - width: 100%; - } - - 100% { - left: 100%; - width: 100%; - } -} */ From 0885033c6e67e6ca5af506013719c53abf9a0782 Mon Sep 17 00:00:00 2001 From: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> Date: Fri, 12 Apr 2024 12:35:49 +0200 Subject: [PATCH 10/51] Update @navikt/core/css/progress-bar.css --- @navikt/core/css/progress-bar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index eea2b7058b..ebb6412cf4 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -28,7 +28,7 @@ left: 0; bottom: 0; width: 100%; - background: var(--a-surface-alt-3, #005b82); + background: var(--a-surface-alt-3); border-radius: inherit; transition: transform 100ms ease-in-out; } From 37df3e1036e80bc07dbcc76477fd419f0aa1192f Mon Sep 17 00:00:00 2001 From: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> Date: Fri, 12 Apr 2024 12:35:54 +0200 Subject: [PATCH 11/51] Update @navikt/core/css/progress-bar.css --- @navikt/core/css/progress-bar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index ebb6412cf4..5aef6068f9 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -1,6 +1,6 @@ .navds-progress-bar { position: relative; - background: var(--a-surface-alt-3-subtle, #cce2f0); + background: var(--a-surface-alt-3-subtle); width: 100%; border-radius: 9999px; overflow: hidden; From 0e7870ed00ed1412411c5aa463293a0ba19b7e23 Mon Sep 17 00:00:00 2001 From: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> Date: Fri, 12 Apr 2024 12:43:23 +0200 Subject: [PATCH 12/51] Update @navikt/core/css/progress-bar.css --- @navikt/core/css/progress-bar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 5aef6068f9..865bc74741 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -2,7 +2,7 @@ position: relative; background: var(--a-surface-alt-3-subtle); width: 100%; - border-radius: 9999px; + border-radius: var(--a-border-radius-full); overflow: hidden; } From 49a0415735d655966fead7603cc8dd941438a61e Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 12 Apr 2024 12:45:06 +0200 Subject: [PATCH 13/51] gac "new animation indeterminate state" --- @navikt/core/css/progress-bar.css | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 865bc74741..1baab61d2e 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -34,33 +34,25 @@ } .navds-progress-bar__progress--indeterminate { - /* animation-timing-function: cubic-bezier(0.4, 0.1, 0.5, 0.9); */ - animation-timing-function: linear; - animation-duration: 1.8s; + animation-timing-function: ease; + animation-duration: 2.5s; animation-name: navds-progress-bar-indeterminate; animation-iteration-count: infinite; + width: 50%; } /* navds-progress-bar-indeterminate wave animation */ @keyframes navds-progress-bar-indeterminate { 0% { - transform: translateX(-100%); - } - - 25% { - transform: translateX(-45%); + transform: translateX(-84%); } 50% { - transform: translateX(0%); - } - - 75% { - transform: translateX(45%); + transform: translateX(184%); + animation-direction: reverse; } 100% { - transform: translateX(100%); + transform: translateX(-84%); } } - From bc1983ab07bfd1ffb88bd0e26039220d94a84b5f Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 12 Apr 2024 14:01:41 +0200 Subject: [PATCH 14/51] remove style when indeterminate --- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 9747e3fd7d..cf82618f84 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -120,7 +120,9 @@ export const ProgressBar = forwardRef( "navds-progress-bar__progress--indeterminate": isIndeterminate, })} style={{ - transform: `translateX(-${100 - (clampedValue / valueMax) * 100}%)`, + transform: !isIndeterminate + ? `translateX(-${100 - (clampedValue / valueMax) * 100}%)` + : undefined, }} />
From 506eabbfda7fb0eae6f04253ddd854fa1d34d65c Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 12 Apr 2024 15:26:33 +0200 Subject: [PATCH 15/51] changed how animation works, can go back if it doesnt pan out --- @navikt/core/css/progress-bar.css | 31 +++++++++++++------ .../src/progress-bar/ProgressBar.stories.tsx | 4 +-- .../react/src/progress-bar/ProgressBar.tsx | 10 ++++-- 3 files changed, 31 insertions(+), 14 deletions(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 1baab61d2e..605bdb1103 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -30,29 +30,42 @@ width: 100%; background: var(--a-surface-alt-3); border-radius: inherit; - transition: transform 100ms ease-in-out; + transition: transform 0.15s ease; } .navds-progress-bar__progress--indeterminate { - animation-timing-function: ease; - animation-duration: 2.5s; - animation-name: navds-progress-bar-indeterminate; - animation-iteration-count: infinite; - width: 50%; + animation-timing-function: ease, ease; + animation-duration: 1000ms, 2500ms; + animation-name: navds-progress-bar-width, navds-progress-bar-indeterminate; + animation-fill-mode: forwards, both; + animation-iteration-count: 1, infinite; +} + +/* navds-progress-bar-width animation */ +@keyframes navds-progress-bar-width { + 0% { + width: 100%; + transform: inherit; + } + + 100% { + width: 50%; + transform: translateX(0%); + } } /* navds-progress-bar-indeterminate wave animation */ @keyframes navds-progress-bar-indeterminate { 0% { - transform: translateX(-84%); + left: -50%; } 50% { - transform: translateX(184%); animation-direction: reverse; + left: 100%; } 100% { - transform: translateX(-84%); + left: -50%; } } diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index 5605c23e7d..8ad1fbebb9 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -106,9 +106,9 @@ export const IndeterminateState: Story = {

Indeterminate progress bar

diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index cf82618f84..1066cbcf1b 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -116,12 +116,16 @@ export const ProgressBar = forwardRef( aria-label={ariaLabel} >
From 2ff614c2ac275e5b310b56d373e8051c15b2627c Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Mon, 15 Apr 2024 15:46:22 +0200 Subject: [PATCH 16/51] Refactor progress bar animation and indeterminate state --- @navikt/core/css/progress-bar.css | 32 +++++------ .../src/progress-bar/ProgressBar.stories.tsx | 54 ++++++++++++------- .../react/src/progress-bar/ProgressBar.tsx | 15 ++---- 3 files changed, 52 insertions(+), 49 deletions(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 605bdb1103..93e2794a64 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -30,42 +30,36 @@ width: 100%; background: var(--a-surface-alt-3); border-radius: inherit; - transition: transform 0.15s ease; + transition: transform 0.2s ease; } .navds-progress-bar__progress--indeterminate { - animation-timing-function: ease, ease; - animation-duration: 1000ms, 2500ms; - animation-name: navds-progress-bar-width, navds-progress-bar-indeterminate; - animation-fill-mode: forwards, both; - animation-iteration-count: 1, infinite; -} - -/* navds-progress-bar-width animation */ -@keyframes navds-progress-bar-width { - 0% { - width: 100%; - transform: inherit; - } - - 100% { - width: 50%; - transform: translateX(0%); - } + transition: transform 1000ms ease; + animation-timing-function: ease-in-out; + animation-duration: 2500ms; + animation-name: navds-progress-bar-indeterminate; + animation-fill-mode: none; + animation-iteration-count: infinite; } /* navds-progress-bar-indeterminate wave animation */ @keyframes navds-progress-bar-indeterminate { 0% { left: -50%; + width: 50%; + transform: translateX(0%); } 50% { animation-direction: reverse; left: 100%; + transform: translateX(0%); + width: 50%; } 100% { left: -50%; + transform: translateX(0%); + width: 50%; } } diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index 8ad1fbebb9..a9ebdd0ef0 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -45,13 +45,20 @@ export const Default: Story = { return (
-

Loading

- + {value < 100 ? ( + <> +

Loading

+ + + ) : ( +

Success screen successfully loaded 🎉

+ )}
); }, @@ -71,20 +78,20 @@ export const Sizes: Story = { render: () => { return (
-

Fremdrift i søknaden

+

Fremdrift i søknaden (small)

-

Fremdrift i søknaden

+

Fremdrift i søknaden (medium)

-

Fremdrift i søknaden

+

Fremdrift i søknaden (large)

{ + const values = [0, 25, 50, 75, 100]; return ( -
-

Indeterminate progress bar

- -
+ <> + {values.map((value) => ( +
+

+ Indeterminate progress bar at {value}% +

+ +
+ ))} + ); }, args: { diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 1066cbcf1b..e87723171e 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -85,10 +85,8 @@ export const ProgressBar = forwardRef( React.useEffect(() => { let timer: NodeJS.Timeout; - console.log("duration", props.duration); if (props.duration) timer = setTimeout(() => { - console.log("duration done"); setIsIndeterminate(true); }, props.duration * 1000); @@ -116,17 +114,14 @@ export const ProgressBar = forwardRef( aria-label={ariaLabel} >
From 0c700725e91fceca3c9575dcacee3abafca538e5 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 17 Apr 2024 09:15:43 +0200 Subject: [PATCH 17/51] added valueMin to stories --- @navikt/core/react/src/progress-bar/ProgressBar.stories.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index a9ebdd0ef0..3fa454c7ed 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -83,12 +83,14 @@ export const Sizes: Story = { size="small" value={7} valueMax={12} + valueMin={1} aria-labelledby="progress-bar-label-small" />

Fremdrift i søknaden (medium)

Fremdrift i søknaden (large)

@@ -96,6 +98,7 @@ export const Sizes: Story = { size="large" value={7} valueMax={12} + valueMin={1} aria-labelledby="progress-bar-label-large" />
From 34a65eb44cdfb751bf6d530001988377e4000b02 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 17 Apr 2024 09:34:09 +0200 Subject: [PATCH 18/51] make indeterminate state more accessible --- .../react/src/progress-bar/ProgressBar.stories.tsx | 10 +++++++--- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 9 +++++++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index 3fa454c7ed..4ca454aaea 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -78,7 +78,9 @@ export const Sizes: Story = { render: () => { return (
-

Fremdrift i søknaden (small)

+

+ Fremdrift i søknaden (liten versjon) +

-

Fremdrift i søknaden (medium)

+

+ Fremdrift i søknaden (medium versjon) +

-

Fremdrift i søknaden (large)

+

Fremdrift i søknaden (stor versjon)

( )} aria-valuemin={valueMin} aria-valuemax={valueMax} - aria-valuenow={clampedValue} - aria-valuetext={`${clampedValue} av ${valueMax}`} // TODO: needed when we have aria-labelledby? + aria-valuenow={isIndeterminate ? undefined : clampedValue} + aria-valuetext={ + isIndeterminate + ? "Laster, vennligst vent" + : `${clampedValue} av ${valueMax}` + } // TODO: needed when we have aria-labelledby & valuenow? + aria-busy={isIndeterminate} role="progressbar" aria-labelledby={ariaLabelledBy} aria-label={ariaLabel} From e5e44d3ca0a1dc1b1cfbc214f416f0a0bc22b590 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 17 Apr 2024 10:26:56 +0200 Subject: [PATCH 19/51] made default example slower - easier for SR to follow --- .../react/src/progress-bar/ProgressBar.stories.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index 4ca454aaea..ead4a964c3 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -18,28 +18,22 @@ export const Default: Story = { const [value, setValue] = React.useState(0); React.useEffect(() => { const withRandomIntervals = (callback: () => void) => { - const interval = Math.random() * 800 + 100; // Random time between 0.1-0.8 seconds + const interval = Math.random() * 4000 + 500; // Random interval between 0.1-0.8 seconds return setTimeout(() => { callback(); - withRandomIntervals(callback); // Recursively call setRandomInterval + withRandomIntervals(callback); }, interval); }; const intervalId = withRandomIntervals(() => { setValue( (oldValue) => - oldValue >= 100 ? 100 : oldValue + Math.random() * 35 + 5, // Increase value 5-40 of 100 + oldValue >= 100 ? 100 : oldValue + Math.random() * 25 + 5, // Increase value 5-30 of 100 ); }); - const timeoutId = setTimeout( - () => clearInterval(intervalId), - Math.random() * 4000 + 1000, // Random time between 1-5 seconds - ); - return () => { clearInterval(intervalId); - clearTimeout(timeoutId); }; }, []); @@ -52,7 +46,6 @@ export const Default: Story = { valueMax={100} size="medium" value={value} - duration={10} aria-labelledby="progress-bar-label" /> From ce647e2d603805493721985f1e96e312ff4cd6c7 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 17 Apr 2024 10:35:06 +0200 Subject: [PATCH 20/51] made example easier to udnerstand --- .../core/react/src/progress-bar/ProgressBar.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index ead4a964c3..a3840146a9 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -41,7 +41,7 @@ export const Default: Story = {
{value < 100 ? ( <> -

Loading

+

Laster

{ - const values = [0, 25, 50, 75, 100]; + const values = [25]; return ( <> {values.map((value) => (

- Indeterminate progress bar at {value}% + Ubestemt fremdrift etter 5 sekunder

Date: Wed, 17 Apr 2024 11:55:40 +0200 Subject: [PATCH 21/51] new aria value text, remove aria busy --- @navikt/core/react/src/progress-bar/ProgressBar.stories.tsx | 4 +--- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 3 +-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index a3840146a9..5677bf8d3b 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -113,9 +113,7 @@ export const IndeterminateState: Story = { <> {values.map((value) => (
-

- Ubestemt fremdrift etter 5 sekunder -

+

Nå laster det

( aria-valuenow={isIndeterminate ? undefined : clampedValue} aria-valuetext={ isIndeterminate - ? "Laster, vennligst vent" + ? "Ubestemt fremdrift" : `${clampedValue} av ${valueMax}` } // TODO: needed when we have aria-labelledby & valuenow? - aria-busy={isIndeterminate} role="progressbar" aria-labelledby={ariaLabelledBy} aria-label={ariaLabel} From 3b67a4e02379c050426e00fd08e385f4cf3bb07b Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 17 Apr 2024 12:58:04 +0200 Subject: [PATCH 22/51] comment out example for playwright --- .../progress-bar/indeterminate-state.tsx | 47 +++++++++++-------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx b/aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx index e8d6fa1fe0..41fd0338f9 100644 --- a/aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx +++ b/aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx @@ -1,24 +1,31 @@ -import { BodyShort, ProgressBar } from "@navikt/ds-react"; -import { withDsExample } from "@/web/examples/withDsExample"; +// import { BodyShort, ProgressBar } from "@navikt/ds-react"; +// import { withDsExample } from "@/web/examples/withDsExample"; -const Example = () => { - return ( -
- Indeterminate - -
- ); -}; +// const Example = () => { +// const labelId = "indeterminate"; +// return ( +//
+// Indeterminate +// +//
+// ); +// }; -// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -export default withDsExample(Example); +// // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE +// export default withDsExample(Example); -/* Storybook story */ -export const Demo = { - render: Example, -}; +// /* Storybook story */ +// export const Demo = { +// render: Example, +// }; -export const args = { - desc: "'duration' brukes for å anslå lastetiden. Etter dette viser progress bar en indeterminate state-animasjon.", - index: 1, -}; +// export const args = { +// desc: "'duration' brukes for å anslå lastetiden. Etter dette viser progress bar en indeterminate state-animasjon.", +// index: 1, +// }; From fb3e39fe45dda5dc50a87eada9f0477201585a47 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 17 Apr 2024 13:12:40 +0200 Subject: [PATCH 23/51] remove examples for playwright --- @navikt/core/css/progress-bar.css | 6 ++-- @navikt/core/css/tokens.json | 4 +++ .../src/progress-bar/ProgressBar.stories.tsx | 1 + .../pages/eksempler/progress-bar/demo.tsx | 24 -------------- .../progress-bar/indeterminate-state.tsx | 31 ------------------- 5 files changed, 9 insertions(+), 57 deletions(-) delete mode 100644 aksel.nav.no/website/pages/eksempler/progress-bar/demo.tsx delete mode 100644 aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 93e2794a64..7c0245c61c 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -1,6 +1,7 @@ .navds-progress-bar { - position: relative; + /* background: var(--ac-progress-bar-bg, var(--a-surface-alt-3-subtle)); */ background: var(--a-surface-alt-3-subtle); + position: relative; width: 100%; border-radius: var(--a-border-radius-full); overflow: hidden; @@ -22,13 +23,14 @@ } .navds-progress-bar__progress { + /* background: var(--ac-progress-bar-progress-bg, var(--a-surface-alt-3)); */ + background: var(--a-surface-alt-3); transform-origin: left; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; - background: var(--a-surface-alt-3); border-radius: inherit; transition: transform 0.2s ease; } diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index 440905c2ef..fe14ffa5d9 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -217,6 +217,10 @@ "--ac-popover-bg": "--a-surface-default", "--ac-popover-border": "--a-border-default" }, + "progress-bar": { + "--ac-progress-bar-bg": "--a-surface-alt-3-subtle", + "--ac-progress-bar-progress-bg": "--a-surface-alt-3" + }, "readmore": { "--ac-read-more-text": "--a-text-action", "--ac-read-more-hover-bg": "--a-surface-hover", diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index 5677bf8d3b..8ef15dcde8 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -44,6 +44,7 @@ export const Default: Story = {

Laster

{ -// return ( -//
-// -// -// -//
-// ); -// }; - -// // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -// export default withDsExample(Example); - -// /* Storybook story */ -// export const Demo = { -// render: Example, -// }; - -// export const args = { -// index: 0, -// }; diff --git a/aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx b/aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx deleted file mode 100644 index 41fd0338f9..0000000000 --- a/aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate-state.tsx +++ /dev/null @@ -1,31 +0,0 @@ -// import { BodyShort, ProgressBar } from "@navikt/ds-react"; -// import { withDsExample } from "@/web/examples/withDsExample"; - -// const Example = () => { -// const labelId = "indeterminate"; -// return ( -//
-// Indeterminate -// -//
-// ); -// }; - -// // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE -// export default withDsExample(Example); - -// /* Storybook story */ -// export const Demo = { -// render: Example, -// }; - -// export const args = { -// desc: "'duration' brukes for å anslå lastetiden. Etter dette viser progress bar en indeterminate state-animasjon.", -// index: 1, -// }; From 0204aea6c133b1e4ac814cc7cccd00b50519d612 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 17 Apr 2024 13:17:00 +0200 Subject: [PATCH 24/51] yarn changeset --- .changeset/fair-plums-join.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/fair-plums-join.md diff --git a/.changeset/fair-plums-join.md b/.changeset/fair-plums-join.md new file mode 100644 index 0000000000..3473eb8254 --- /dev/null +++ b/.changeset/fair-plums-join.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-react": minor +"@navikt/ds-css": minor +--- + +:sparkles: Ny komponent: ProgressBar From 83a97a8f4c2f1b37ce5f1beba01771212d75a2ee Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 17 Apr 2024 15:07:29 +0200 Subject: [PATCH 25/51] Change name of progress bar-bar to foreground & add tokens --- @navikt/core/css/progress-bar.css | 10 ++++------ @navikt/core/css/tokens.json | 2 +- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 4 ++-- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 7c0245c61c..353f7d420d 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -1,6 +1,5 @@ .navds-progress-bar { - /* background: var(--ac-progress-bar-bg, var(--a-surface-alt-3-subtle)); */ - background: var(--a-surface-alt-3-subtle); + background: var(--ac-progress-bar-bg, var(--a-surface-alt-3-subtle)); position: relative; width: 100%; border-radius: var(--a-border-radius-full); @@ -22,9 +21,8 @@ min-width: 24px; } -.navds-progress-bar__progress { - /* background: var(--ac-progress-bar-progress-bg, var(--a-surface-alt-3)); */ - background: var(--a-surface-alt-3); +.navds-progress-bar__foreground { + background: var(--ac-progress-bar-fg, var(--a-surface-alt-3)); transform-origin: left; position: absolute; top: 0; @@ -35,7 +33,7 @@ transition: transform 0.2s ease; } -.navds-progress-bar__progress--indeterminate { +.navds-progress-bar__foreground--indeterminate { transition: transform 1000ms ease; animation-timing-function: ease-in-out; animation-duration: 2500ms; diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index fe14ffa5d9..c8454db3ec 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -219,7 +219,7 @@ }, "progress-bar": { "--ac-progress-bar-bg": "--a-surface-alt-3-subtle", - "--ac-progress-bar-progress-bg": "--a-surface-alt-3" + "--ac-progress-bar-fg": "--a-surface-alt-3" }, "readmore": { "--ac-read-more-text": "--a-text-action", diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 20aa6413a0..47db708b1e 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -118,8 +118,8 @@ export const ProgressBar = forwardRef( aria-label={ariaLabel} >
Date: Wed, 17 Apr 2024 15:11:14 +0200 Subject: [PATCH 26/51] jsdoc from no to en --- .../react/src/progress-bar/ProgressBar.tsx | 22 ++++++------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 47db708b1e..57b58841fa 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -1,5 +1,5 @@ import cl from "clsx"; -import React, { HTMLAttributes, forwardRef, useMemo } from "react"; +import React, { HTMLAttributes, forwardRef } from "react"; interface ProgressBarPropsBase extends HTMLAttributes { /** @@ -51,16 +51,15 @@ export type ProgressBarProps = ProgressBarPropsBase & /** * ProgressBar - * TODO: DOCUMENTATION * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar) * @see 🏷️ {@link ProgressBarProps} * * @example - * // For innlasting av innhold + * // For loading content * * * @example - * // Som fremgangsindikator på søknader og lignende + * // As a progress indicator for applications and similar * */ export const ProgressBar = forwardRef( @@ -76,11 +75,6 @@ export const ProgressBar = forwardRef( }, ref, ) => { - const clampedValue = useMemo( - () => Math.min(Math.max(value, valueMin), valueMax), - [value, valueMin, valueMax], - ); - const [isIndeterminate, setIsIndeterminate] = React.useState(false); React.useEffect(() => { @@ -107,12 +101,10 @@ export const ProgressBar = forwardRef( )} aria-valuemin={valueMin} aria-valuemax={valueMax} - aria-valuenow={isIndeterminate ? undefined : clampedValue} + aria-valuenow={isIndeterminate ? undefined : value} aria-valuetext={ - isIndeterminate - ? "Ubestemt fremdrift" - : `${clampedValue} av ${valueMax}` - } // TODO: needed when we have aria-labelledby & valuenow? + isIndeterminate ? "Ubestemt fremdrift" : `${value} av ${valueMax}` + } role="progressbar" aria-labelledby={ariaLabelledBy} aria-label={ariaLabel} @@ -123,7 +115,7 @@ export const ProgressBar = forwardRef( })} style={{ transform: !isIndeterminate - ? `translateX(-${100 - (clampedValue / valueMax) * 100}%)` + ? `translateX(-${100 - (value / valueMax) * 100}%)` : `translateX(-100%)`, animationDelay: isIndeterminate ? `1s` : undefined, }} From 4873fe6b821067f205fb5c1445de7ee2e4728196 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 17 Apr 2024 15:35:20 +0200 Subject: [PATCH 27/51] round value to closes integer --- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 57b58841fa..195a3a7041 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -101,21 +101,28 @@ export const ProgressBar = forwardRef( )} aria-valuemin={valueMin} aria-valuemax={valueMax} - aria-valuenow={isIndeterminate ? undefined : value} + aria-valuenow={isIndeterminate ? undefined : Math.round(value)} aria-valuetext={ - isIndeterminate ? "Ubestemt fremdrift" : `${value} av ${valueMax}` + isIndeterminate + ? "Ubestemt fremdrift" + : `${Math.round(value)} av ${valueMax}` } role="progressbar" aria-labelledby={ariaLabelledBy} aria-label={ariaLabel} > +
+ {isIndeterminate + ? "Ubestemt fremdrift" + : `${Math.round(value)} av ${valueMax}`} +
Date: Wed, 17 Apr 2024 19:26:33 +0200 Subject: [PATCH 28/51] clean up a little --- @navikt/core/css/progress-bar.css | 1 + .../react/src/progress-bar/ProgressBar.tsx | 38 +++++++++---------- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 353f7d420d..c06bbe4f4a 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -40,6 +40,7 @@ animation-name: navds-progress-bar-indeterminate; animation-fill-mode: none; animation-iteration-count: infinite; + animation-delay: 1s; } /* navds-progress-bar-indeterminate wave animation */ diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 195a3a7041..cb8ae454f0 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -1,5 +1,5 @@ import cl from "clsx"; -import React, { HTMLAttributes, forwardRef } from "react"; +import React, { HTMLAttributes, forwardRef, useEffect, useState } from "react"; interface ProgressBarPropsBase extends HTMLAttributes { /** @@ -56,7 +56,7 @@ export type ProgressBarProps = ProgressBarPropsBase & * * @example * // For loading content - * + * * * @example * // As a progress indicator for applications and similar @@ -69,27 +69,29 @@ export const ProgressBar = forwardRef( value, valueMin = 0, valueMax, + duration, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, - ...props + className, + ...rest }, ref, ) => { - const [isIndeterminate, setIsIndeterminate] = React.useState(false); + const [isIndeterminate, setIsIndeterminate] = useState(false); - React.useEffect(() => { + const translate = 100 - (Math.round(value) / valueMax) * 100; + + useEffect(() => { let timer: NodeJS.Timeout; - if (props.duration) + if (duration) timer = setTimeout(() => { setIsIndeterminate(true); - }, props.duration * 1000); + }, duration * 1000); return () => { - if (timer) { - clearTimeout(timer); - } + if (timer) clearTimeout(timer); }; - }, [props.duration]); + }, [duration]); return (
( className={cl( "navds-progress-bar", `navds-progress-bar--${size}`, - props.className, + className, )} aria-valuemin={valueMin} aria-valuemax={valueMax} @@ -110,21 +112,19 @@ export const ProgressBar = forwardRef( role="progressbar" aria-labelledby={ariaLabelledBy} aria-label={ariaLabel} + {...rest} > -
- {isIndeterminate - ? "Ubestemt fremdrift" - : `${Math.round(value)} av ${valueMax}`} -
+ {/*
+ {isIndeterminate ? "Ubestemt fremdrift" : `${Math.round(value)} av ${valueMax}`} +
*/}
From 8bb70cf1319fd88d20150bf3e5d1c563d2098532 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 19 Apr 2024 12:09:32 +0200 Subject: [PATCH 29/51] change aria labels to work with most screen readers --- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index cb8ae454f0..62d094a5fc 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -101,12 +101,12 @@ export const ProgressBar = forwardRef( `navds-progress-bar--${size}`, className, )} - aria-valuemin={valueMin} - aria-valuemax={valueMax} - aria-valuenow={isIndeterminate ? undefined : Math.round(value)} + aria-valuemin={isIndeterminate ? 0 : valueMin} + aria-valuemax={isIndeterminate ? 0 : valueMax} + aria-valuenow={isIndeterminate ? 0 : Math.round(value)} aria-valuetext={ isIndeterminate - ? "Ubestemt fremdrift" + ? "Fremdrift kan ikke beregnes" : `${Math.round(value)} av ${valueMax}` } role="progressbar" @@ -114,9 +114,6 @@ export const ProgressBar = forwardRef( aria-label={ariaLabel} {...rest} > - {/*
- {isIndeterminate ? "Ubestemt fremdrift" : `${Math.round(value)} av ${valueMax}`} -
*/}
Date: Fri, 19 Apr 2024 12:13:03 +0200 Subject: [PATCH 30/51] omit role-tag --- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 62d094a5fc..c5c97e145e 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -1,7 +1,8 @@ import cl from "clsx"; import React, { HTMLAttributes, forwardRef, useEffect, useState } from "react"; -interface ProgressBarPropsBase extends HTMLAttributes { +interface ProgressBarPropsBase + extends Omit, "role"> { /** * Changes height of progressbar. * @default "medium" From c353a52360b1b9ea727d2a958c1415ae4ddec507 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 19 Apr 2024 12:17:34 +0200 Subject: [PATCH 31/51] remove width from progress-bar-class --- @navikt/core/css/progress-bar.css | 1 - 1 file changed, 1 deletion(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index c06bbe4f4a..f3eb4a9c34 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -1,7 +1,6 @@ .navds-progress-bar { background: var(--ac-progress-bar-bg, var(--a-surface-alt-3-subtle)); position: relative; - width: 100%; border-radius: var(--a-border-radius-full); overflow: hidden; } From 1a03d61a95069094f1dfbe4542fe2a1b74745310 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 19 Apr 2024 13:38:26 +0200 Subject: [PATCH 32/51] update storybook examples --- .../src/progress-bar/ProgressBar.stories.tsx | 194 ++++++++---------- 1 file changed, 88 insertions(+), 106 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index 8ef15dcde8..b8c1e8697c 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from "@storybook/react"; +import { Meta, StoryFn, StoryObj } from "@storybook/react"; import React from "react"; import { ProgressBar } from "."; import { VStack } from "../layout/stack"; @@ -13,103 +13,104 @@ export default { type Story = StoryObj; -export const Default: Story = { - render: () => { - const [value, setValue] = React.useState(0); - React.useEffect(() => { - const withRandomIntervals = (callback: () => void) => { - const interval = Math.random() * 4000 + 500; // Random interval between 0.1-0.8 seconds - return setTimeout(() => { - callback(); - withRandomIntervals(callback); - }, interval); - }; +export const Default: StoryFn = (args) => { + const [value, setValue] = React.useState(0); + React.useEffect(() => { + const withRandomIntervals = (callback: () => void) => { + const interval = Math.random() * 4000 + 500; // Random interval between 0.1-0.8 seconds + return setTimeout(() => { + callback(); + withRandomIntervals(callback); + }, interval); + }; - const intervalId = withRandomIntervals(() => { - setValue( - (oldValue) => - oldValue >= 100 ? 100 : oldValue + Math.random() * 25 + 5, // Increase value 5-30 of 100 - ); + const intervalId = withRandomIntervals(() => { + setValue((oldValue) => { + if (oldValue === 100) return 0; + const increment = Math.random() * 25 + 5; // Increase value 5-30 of 100 + return oldValue + increment > 100 ? 100 : oldValue + increment; }); + }); - return () => { - clearInterval(intervalId); - }; - }, []); + return () => { + clearInterval(intervalId); + }; + }, []); - return ( -
- {value < 100 ? ( - <> -

Laster

- - - ) : ( -

Success screen successfully loaded 🎉

- )} -
- ); - }, - args: { - size: "medium", - value: 66, + return ( +
+ {value < 100 ? ( + <> +

Laster

+ + + ) : ( +

Success screen successfully loaded 🎉

+ )} +
+ ); +}; +Default.args = { + size: "medium", + indeterminate: false, +}; +Default.argTypes = { + size: { + options: ["large", "medium", "small"], + control: { type: "radio" }, }, - argTypes: { - size: { - options: ["large", "medium", "small"], - control: { type: "radio" }, - }, + indeterminate: { + control: { type: "boolean" }, }, }; -export const Sizes: Story = { - render: () => { - return ( -
-

- Fremdrift i søknaden (liten versjon) -

- -

- Fremdrift i søknaden (medium versjon) -

- -

Fremdrift i søknaden (stor versjon)

- -
- ); - }, - args: { - ...Default.args, - }, +export const Sizes: StoryFn = (args) => { + return ( +
+

Fremdrift i søknaden (liten versjon)

+ +

+ Fremdrift i søknaden (medium versjon) +

+ +

Fremdrift i søknaden (stor versjon)

+ +
+ ); +}; + +Sizes.args = { + valueMin: 1, + valueMax: 12, }; export const IndeterminateState: Story = { render: () => { - const values = [25]; + const values = [0, 25, 50, 75, 100]; return ( <> {values.map((value) => ( @@ -127,13 +128,6 @@ export const IndeterminateState: Story = { ); }, - args: { - ...Default.args, - size: "medium", - duration: 1, - value: 7, - valueMax: 10, - }, }; export const Chromatic: Story = { @@ -141,19 +135,7 @@ export const Chromatic: Story = { return (
-

Default

- {/* @ts-expect-error Args are partial, leading to required prop mismatch */} - -
-
-

Sizes

- {/* @ts-expect-error Args are partial, leading to required prop mismatch */} - -
-
-

Indeterminate State Animation

- {/* @ts-expect-error Args are partial, leading to required prop mismatch */} - +
); From 42464593495c47bf92ae734a1c3460f47720e2db Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 19 Apr 2024 13:38:56 +0200 Subject: [PATCH 33/51] Fix progress bar indeterminate behavior and duration handling --- .../core/react/src/progress-bar/ProgressBar.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index c5c97e145e..461cdb6c56 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -79,19 +79,15 @@ export const ProgressBar = forwardRef( ref, ) => { const [isIndeterminate, setIsIndeterminate] = useState(false); - const translate = 100 - (Math.round(value) / valueMax) * 100; + // Sets progress bar to indeterminate after the specified duration useEffect(() => { let timer: NodeJS.Timeout; - if (duration) - timer = setTimeout(() => { - setIsIndeterminate(true); - }, duration * 1000); - - return () => { - if (timer) clearTimeout(timer); - }; + if (duration != null) + timer = setTimeout(() => setIsIndeterminate(true), duration * 1000); + else setIsIndeterminate(false); + return () => clearTimeout(timer); }, [duration]); return ( From a2d1be10e7f4dcdd97e9be5361d87b2b79152fc7 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Fri, 19 Apr 2024 14:08:38 +0200 Subject: [PATCH 34/51] testing with inset box shadow --- @navikt/core/css/progress-bar.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index f3eb4a9c34..7c9e9bafc3 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -3,6 +3,9 @@ position: relative; border-radius: var(--a-border-radius-full); overflow: hidden; + box-shadow: + inset 0 1px 3px 0 rgba(0 0 0 / 0.15), + inset 0 0 1px 0 rgba(0 0 0 / 0.2); } .navds-progress-bar--small { From 189941a65f07ca2f2f938b8cdb8cbe26dc81f62f Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Mon, 22 Apr 2024 09:14:05 +0200 Subject: [PATCH 35/51] change bg to surface neutral subtle --- @navikt/core/css/progress-bar.css | 2 +- @navikt/core/css/tokens.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 7c9e9bafc3..c2aa11bc82 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -1,5 +1,5 @@ .navds-progress-bar { - background: var(--ac-progress-bar-bg, var(--a-surface-alt-3-subtle)); + background: var(--ac-progress-bar-bg, var(--a-surface-neutral-subtle)); position: relative; border-radius: var(--a-border-radius-full); overflow: hidden; diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index c8454db3ec..8f8091d3af 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -218,7 +218,7 @@ "--ac-popover-border": "--a-border-default" }, "progress-bar": { - "--ac-progress-bar-bg": "--a-surface-alt-3-subtle", + "--ac-progress-bar-bg": "--a-surface-neutral-subtle", "--ac-progress-bar-fg": "--a-surface-alt-3" }, "readmore": { From 80bde975cd7682c27187a3d1734176d44325f78e Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Mon, 22 Apr 2024 09:35:45 +0200 Subject: [PATCH 36/51] Adjust JSDOC, round valueMin, valueMax --- .../react/src/progress-bar/ProgressBar.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 461cdb6c56..bf3350af12 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -4,12 +4,12 @@ import React, { HTMLAttributes, forwardRef, useEffect, useState } from "react"; interface ProgressBarPropsBase extends Omit, "role"> { /** - * Changes height of progressbar. + * Changes height. * @default "medium" */ size?: "large" | "medium" | "small"; /** - * Value of progressbar. + * Current progress. */ value: number; /** @@ -22,17 +22,17 @@ interface ProgressBarPropsBase */ valueMax: number; /** - * Used to approximate a task duration in seconds. - * ProgressBar shows an indeterminate animation after duration is done. + * Expected task duration in seconds. + * ProgressBar shows an indeterminate animation after duration has passed. */ duration?: number; /** - * String ID of the element that labels the progress-bar. + * String ID of the element that labels the progress bar. * Not needed if `aria-label` is used. */ "aria-labelledby"?: string; /** - * String value that labels the progress-bar. + * String value that labels the progress bar. * Not needed if `aria-labelledby` is used. */ "aria-label"?: string; @@ -52,6 +52,10 @@ export type ProgressBarProps = ProgressBarPropsBase & /** * ProgressBar + * - Shows the progress of a task or process. + * - Visualizes the progression of a task or process. + * - Visualizes how far along the user is in a process. + * * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar) * @see 🏷️ {@link ProgressBarProps} * @@ -98,13 +102,13 @@ export const ProgressBar = forwardRef( `navds-progress-bar--${size}`, className, )} - aria-valuemin={isIndeterminate ? 0 : valueMin} - aria-valuemax={isIndeterminate ? 0 : valueMax} + aria-valuemin={isIndeterminate ? 0 : Math.round(valueMin)} + aria-valuemax={isIndeterminate ? 0 : Math.round(valueMax)} aria-valuenow={isIndeterminate ? 0 : Math.round(value)} aria-valuetext={ isIndeterminate ? "Fremdrift kan ikke beregnes" - : `${Math.round(value)} av ${valueMax}` + : `${Math.round(value)} av ${Math.round(valueMax)}` } role="progressbar" aria-labelledby={ariaLabelledBy} From b76cfb7dc5ea557e0c799d72c27e30c0ff6ef420 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Mon, 22 Apr 2024 10:35:50 +0200 Subject: [PATCH 37/51] rm valuemin --- .../react/src/progress-bar/ProgressBar.stories.tsx | 5 ----- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 11 ++--------- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index b8c1e8697c..082adf2c25 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -44,7 +44,6 @@ export const Default: StoryFn = (args) => {

Laster

{ size="small" value={0} valueMax={args.valueMax} - valueMin={args.valueMin} aria-labelledby="progress-bar-label-small" />

@@ -88,7 +86,6 @@ export const Sizes: StoryFn = (args) => {

Fremdrift i søknaden (stor versjon)

@@ -96,7 +93,6 @@ export const Sizes: StoryFn = (args) => { size="large" value={12} valueMax={args.valueMax} - valueMin={args.valueMin} aria-labelledby="progress-bar-label-large" />
@@ -104,7 +100,6 @@ export const Sizes: StoryFn = (args) => { }; Sizes.args = { - valueMin: 1, valueMax: 12, }; diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index bf3350af12..1716800ab7 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -12,11 +12,6 @@ interface ProgressBarPropsBase * Current progress. */ value: number; - /** - * Minimum progress. - * @default 0 - */ - valueMin?: number; /** * Maximum progress. */ @@ -61,18 +56,17 @@ export type ProgressBarProps = ProgressBarPropsBase & * * @example * // For loading content - * + * * * @example * // As a progress indicator for applications and similar - * + * */ export const ProgressBar = forwardRef( ( { size = "medium", value, - valueMin = 0, valueMax, duration, "aria-labelledby": ariaLabelledBy, @@ -102,7 +96,6 @@ export const ProgressBar = forwardRef( `navds-progress-bar--${size}`, className, )} - aria-valuemin={isIndeterminate ? 0 : Math.round(valueMin)} aria-valuemax={isIndeterminate ? 0 : Math.round(valueMax)} aria-valuenow={isIndeterminate ? 0 : Math.round(value)} aria-valuetext={ From 08e4d5a1e54eb6dcaf3c415a06687a4b144044ac Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Mon, 22 Apr 2024 11:36:28 +0200 Subject: [PATCH 38/51] change indeterminate state logic --- @navikt/core/css/progress-bar.css | 41 +++++++++++++++---- .../src/progress-bar/ProgressBar.stories.tsx | 8 ++-- .../react/src/progress-bar/ProgressBar.tsx | 8 ++-- 3 files changed, 43 insertions(+), 14 deletions(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index c2aa11bc82..27a10b3fe2 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -24,6 +24,9 @@ } .navds-progress-bar__foreground { + --__ac-progress-bar-translate: initial; + + transform: translateX(var(--__ac-progress-bar-translate)); background: var(--ac-progress-bar-fg, var(--a-surface-alt-3)); transform-origin: left; position: absolute; @@ -36,13 +39,14 @@ } .navds-progress-bar__foreground--indeterminate { - transition: transform 1000ms ease; - animation-timing-function: ease-in-out; - animation-duration: 2500ms; - animation-name: navds-progress-bar-indeterminate; - animation-fill-mode: none; - animation-iteration-count: infinite; - animation-delay: 1s; + --__ac-progress-bar-duration: initial; + + animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate; + animation-timing-function: ease-in-out, ease-in-out; + animation-duration: var(--__ac-progress-bar-duration), 2500ms; + animation-fill-mode: forwards, none; + animation-iteration-count: 1, infinite; + animation-delay: 0s, calc(var(--__ac-progress-bar-duration) + 4s); } /* navds-progress-bar-indeterminate wave animation */ @@ -66,3 +70,26 @@ width: 50%; } } + +@keyframes navds-progress-bar-indeterminate-grow { + 0% { + transform: translateX(-100%); + } + + 20% { + transform: translateX(-80%); + } + + 30% { + transform: translateX(-40%); + } + + 40%, + 50% { + transform: translateX(-20%); + } + + 100% { + transform: translateX(-10%); + } +} diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index 082adf2c25..55cccf3b3c 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -108,12 +108,14 @@ export const IndeterminateState: Story = { const values = [0, 25, 50, 75, 100]; return ( <> - {values.map((value) => ( + {values.map((value, index) => (
-

Nå laster det

+

+ Nå laster det veldig veldig veldig +

( >
From 6cc0fc08c98a7e30ff181207471e670e47bfd304 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Tue, 23 Apr 2024 13:26:15 +0200 Subject: [PATCH 39/51] jsdoc tweaks, code cleaning --- .../core/react/src/progress-bar/ProgressBar.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 23310ceeeb..c16a009121 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -9,7 +9,7 @@ interface ProgressBarPropsBase */ size?: "large" | "medium" | "small"; /** - * Current progress. + * Current progress. When duration is set, value is ignored. */ value: number; /** @@ -18,7 +18,8 @@ interface ProgressBarPropsBase valueMax: number; /** * Expected task duration in seconds. - * ProgressBar shows an indeterminate animation after duration has passed. + * ProgressBar grows with a preset animation for {duration} seconds + * Afterwards, it shows an indeterminate animation. */ duration?: number; /** @@ -47,8 +48,6 @@ export type ProgressBarProps = ProgressBarPropsBase & /** * ProgressBar - * - Shows the progress of a task or process. - * - Visualizes the progression of a task or process. * - Visualizes how far along the user is in a process. * * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar) @@ -59,7 +58,7 @@ export type ProgressBarProps = ProgressBarPropsBase & * * * @example - * // As a progress indicator for applications and similar + * // As a step indicator for forms, questionnaires, etc. * */ export const ProgressBar = forwardRef( @@ -110,11 +109,12 @@ export const ProgressBar = forwardRef( >
From 0e93ba160ba625def68d8faec1fd7d73017996de Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Tue, 23 Apr 2024 13:40:50 +0200 Subject: [PATCH 40/51] added css for high contrast --- @navikt/core/css/progress-bar.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 27a10b3fe2..5be04c6d7f 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -93,3 +93,13 @@ transform: translateX(-10%); } } + +@media (forced-colors: active) { + .navds-progress-bar__foreground { + background: Highlight; + } + + .navds-progress-bar { + outline: 1px solid transparent; + } +} From 0717939690908d51cea87feaa3d560942eb2cb43 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Tue, 23 Apr 2024 13:50:12 +0200 Subject: [PATCH 41/51] excluded progress bar from reduced motion css --- @navikt/core/css/baseline/_utilities.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/css/baseline/_utilities.css b/@navikt/core/css/baseline/_utilities.css index ef7572848b..7d4700b7aa 100644 --- a/@navikt/core/css/baseline/_utilities.css +++ b/@navikt/core/css/baseline/_utilities.css @@ -1,6 +1,6 @@ /* https://web.dev/prefers-reduced-motion/ */ @media (prefers-reduced-motion: reduce) { - *:not(.navds-loader *):not(.navds-loader), + *:not(.navds-loader *):not(.navds-loader):not(.navds-progress-bar *):not(.navds-progress-bar), ::before, ::after { animation-delay: -1ms !important; From 91ee4d54432677305acfe0634a1ed08a73dfb48d Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 24 Apr 2024 11:30:00 +0200 Subject: [PATCH 42/51] added logic, jsdoc and storybook content for duration=0 --- @navikt/core/css/progress-bar.css | 3 ++- .../src/progress-bar/ProgressBar.stories.tsx | 18 ++++++++++++++---- .../react/src/progress-bar/ProgressBar.tsx | 9 ++++++--- 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 5be04c6d7f..8485f38c08 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -40,13 +40,14 @@ .navds-progress-bar__foreground--indeterminate { --__ac-progress-bar-duration: initial; + --__ac-progress-bar-delay: initial; animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate; animation-timing-function: ease-in-out, ease-in-out; animation-duration: var(--__ac-progress-bar-duration), 2500ms; animation-fill-mode: forwards, none; animation-iteration-count: 1, infinite; - animation-delay: 0s, calc(var(--__ac-progress-bar-duration) + 4s); + animation-delay: 0s, calc((var(--__ac-progress-bar-duration) + var(--__ac-progress-bar-delay))); } /* navds-progress-bar-indeterminate wave animation */ diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index 55cccf3b3c..cb0ed679b5 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -105,17 +105,27 @@ Sizes.args = { export const IndeterminateState: Story = { render: () => { - const values = [0, 25, 50, 75, 100]; + const values = [2, 5, 10, 20]; return ( <> - {values.map((value, index) => ( +

+ Duration prop satt til 0 sek +

+ + {values.map((value) => (

- Nå laster det veldig veldig veldig + duration-prop satt til {value} sek

( >
From bdb2667b1b47146e157d095e6afcbf9fe5a8749a Mon Sep 17 00:00:00 2001 From: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> Date: Wed, 24 Apr 2024 12:03:54 +0200 Subject: [PATCH 43/51] Update @navikt/core/react/src/progress-bar/ProgressBar.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index b848f0d273..bd7ac10cd1 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -18,7 +18,7 @@ interface ProgressBarPropsBase valueMax: number; /** * Expected task duration in seconds. - * ProgressBar grows with a preset animation for {duration} seconds + * ProgressBar grows with a preset animation for {duration} seconds. * After a 4 sec delay, it then shows an indeterminate animation. * A duration of 0 will show an indeterminate animation immediately. */ From f2e1b6e24aebe9b680187a91126f83e5c9082bff Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 24 Apr 2024 12:07:52 +0200 Subject: [PATCH 44/51] remove old code --- @navikt/core/react/src/progress-bar/ProgressBar.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx index cb0ed679b5..8508d6bf96 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx @@ -125,7 +125,7 @@ export const IndeterminateState: Story = {

Date: Wed, 24 Apr 2024 12:16:16 +0200 Subject: [PATCH 45/51] made value and valueMax optional since adding a duration invalidates them --- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index bd7ac10cd1..c3196775b7 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -11,11 +11,11 @@ interface ProgressBarPropsBase /** * Current progress. When duration is set, value is ignored. */ - value: number; + value?: number; /** * Maximum progress. */ - valueMax: number; + valueMax?: number; /** * Expected task duration in seconds. * ProgressBar grows with a preset animation for {duration} seconds. @@ -66,8 +66,8 @@ export const ProgressBar = forwardRef( ( { size = "medium", - value, - valueMax, + value = 0, + valueMax = 0, duration, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, From 9bf7c9ea445eb1d870388247995cafcb7c85c5ef Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 24 Apr 2024 12:44:28 +0200 Subject: [PATCH 46/51] Set default valueMax to 100 --- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index c3196775b7..faff94ff24 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -67,7 +67,7 @@ export const ProgressBar = forwardRef( { size = "medium", value = 0, - valueMax = 0, + valueMax = 100, duration, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, From 7da6e81f08a66f9bdc6c06a8dfcc047d5d5e526a Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 24 Apr 2024 12:46:03 +0200 Subject: [PATCH 47/51] Remove useEffect + timeout and update aria attributes --- .../react/src/progress-bar/ProgressBar.tsx | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index faff94ff24..b6954dec5c 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -1,5 +1,5 @@ import cl from "clsx"; -import React, { HTMLAttributes, forwardRef, useEffect, useState } from "react"; +import React, { HTMLAttributes, forwardRef } from "react"; interface ProgressBarPropsBase extends Omit, "role"> { @@ -76,18 +76,8 @@ export const ProgressBar = forwardRef( }, ref, ) => { - const [isIndeterminate, setIsIndeterminate] = useState(false); const translate = 100 - (Math.round(value) / valueMax) * 100; - // Sets progress bar to indeterminate after the specified duration - useEffect(() => { - let timer: NodeJS.Timeout; - if (duration != null) - timer = setTimeout(() => setIsIndeterminate(true), duration * 1000); - else setIsIndeterminate(false); - return () => clearTimeout(timer); - }, [duration]); - return (
( `navds-progress-bar--${size}`, className, )} - aria-valuemax={isIndeterminate ? 0 : Math.round(valueMax)} - aria-valuenow={isIndeterminate ? 0 : Math.round(value)} + aria-valuemax={duration ? 0 : Math.round(valueMax)} + aria-valuenow={duration ? 0 : Math.round(value)} aria-valuetext={ - isIndeterminate + duration ? "Fremdrift kan ikke beregnes" : `${Math.round(value)} av ${Math.round(valueMax)}` } From 692cc37f29f71c7bd5d3a97991ca1b4eb7e6a780 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 24 Apr 2024 12:50:12 +0200 Subject: [PATCH 48/51] jsdoc ValueMax default 100 --- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index b6954dec5c..673992d31e 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -14,6 +14,7 @@ interface ProgressBarPropsBase value?: number; /** * Maximum progress. + * @default 100 */ valueMax?: number; /** From 23c3510cb4c17d1a4752522983e37caf482d1fb8 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 24 Apr 2024 13:06:18 +0200 Subject: [PATCH 49/51] changed JSDOC to reflect api changes --- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index 673992d31e..bd793e37a8 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -56,8 +56,8 @@ export type ProgressBarProps = ProgressBarPropsBase & * @see 🏷️ {@link ProgressBarProps} * * @example - * // For loading content - * + * // For loading content with an approximate duration in sec. + * * * @example * // As a step indicator for forms, questionnaires, etc. From f8a851da2af38da3cc59f8e9cb360ec8e92fda7b Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 24 Apr 2024 13:07:12 +0200 Subject: [PATCH 50/51] made short description shorter --- @navikt/core/react/src/progress-bar/ProgressBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.tsx index bd793e37a8..9c52f81e07 100644 --- a/@navikt/core/react/src/progress-bar/ProgressBar.tsx +++ b/@navikt/core/react/src/progress-bar/ProgressBar.tsx @@ -50,7 +50,7 @@ export type ProgressBarProps = ProgressBarPropsBase & /** * ProgressBar - * - Visualizes how far along the user is in a process. + * A component for visualizing progression in a process. * * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar) * @see 🏷️ {@link ProgressBarProps} From 5d5409fcc5dddde4979cd3e157e0274c0f21e22f Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Wed, 24 Apr 2024 14:12:13 +0200 Subject: [PATCH 51/51] rm bg token --- @navikt/core/css/progress-bar.css | 2 +- @navikt/core/css/tokens.json | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/@navikt/core/css/progress-bar.css b/@navikt/core/css/progress-bar.css index 8485f38c08..7273235303 100644 --- a/@navikt/core/css/progress-bar.css +++ b/@navikt/core/css/progress-bar.css @@ -1,5 +1,5 @@ .navds-progress-bar { - background: var(--ac-progress-bar-bg, var(--a-surface-neutral-subtle)); + background: var(--a-surface-neutral-subtle); position: relative; border-radius: var(--a-border-radius-full); overflow: hidden; diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index 8f8091d3af..0cd778ce93 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -218,7 +218,6 @@ "--ac-popover-border": "--a-border-default" }, "progress-bar": { - "--ac-progress-bar-bg": "--a-surface-neutral-subtle", "--ac-progress-bar-fg": "--a-surface-alt-3" }, "readmore": {