Skip to content

Commit 6eea265

Browse files
mmurawski-dnmmurawski-dn
authored
feat(design-system): rename to DsProgressArc [AR-26986] (#176)
1 parent abdebe5 commit 6eea265

18 files changed

Lines changed: 89 additions & 144 deletions

‎packages/design-system/src/components/ds-arc-progress/index.ts‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

packages/design-system/src/components/ds-arc-progress/ds-arc-progress.module.scss renamed to packages/design-system/src/components/ds-progress-arc/ds-progress-arc.module.scss

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@use '../../styles/typography';
2-
3-
$icon-custom-size: 44px;
1+
$icon-medium-size: 44px;
42
$transition-duration: 0.2s;
53

64
.root {
@@ -32,7 +30,7 @@ $transition-duration: 0.2s;
3230
stroke: var(--color-background-success-strong);
3331
}
3432

35-
.failed {
33+
.error {
3634
stroke: var(--color-background-danger-strong);
3735
}
3836

@@ -44,24 +42,16 @@ $transition-duration: 0.2s;
4442
color: var(--color-font-main);
4543
}
4644

47-
.valueMedium {
48-
@include typography.heading3;
49-
}
50-
51-
.valueSmall {
52-
@include typography.body-md-md;
53-
}
5445
.iconSuccess {
5546
color: var(--color-icon-success);
5647
}
5748

58-
.iconFailed {
49+
.iconError {
5950
color: var(--color-icon-danger);
6051
}
6152

62-
/* doubled selector to override DsIcon's .icon.medium compound specificity */
6353
.iconMediumSize.iconMediumSize {
64-
font-size: $icon-custom-size;
65-
width: $icon-custom-size;
66-
height: $icon-custom-size;
54+
font-size: $icon-medium-size;
55+
width: 1em;
56+
height: 1em;
6757
}

packages/design-system/src/components/ds-arc-progress/ds-arc-progress.stories.module.scss renamed to packages/design-system/src/components/ds-progress-arc/ds-progress-arc.stories.module.scss

File renamed without changes.

packages/design-system/src/components/ds-arc-progress/ds-arc-progress.stories.tsx renamed to packages/design-system/src/components/ds-progress-arc/ds-progress-arc.stories.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
22
import { expect, within } from 'storybook/test';
33

44
import { DsIcon } from '../ds-icon';
5-
import { DsArcProgress, arcProgressSizes, arcProgressVariants } from './index';
6-
import styles from './ds-arc-progress.stories.module.scss';
5+
import { DsProgressArc, progressArcSizes, progressArcVariants } from './index';
6+
import styles from './ds-progress-arc.stories.module.scss';
77

8-
const meta: Meta<typeof DsArcProgress> = {
9-
title: 'Design System/ArcProgress',
10-
component: DsArcProgress,
8+
const meta: Meta<typeof DsProgressArc> = {
9+
title: 'Design System/ProgressArc',
10+
component: DsProgressArc,
1111
parameters: {
1212
layout: 'centered',
1313
},
@@ -18,17 +18,17 @@ const meta: Meta<typeof DsArcProgress> = {
1818
},
1919
size: {
2020
control: { type: 'select' },
21-
options: arcProgressSizes,
21+
options: progressArcSizes,
2222
},
2323
variant: {
2424
control: { type: 'select' },
25-
options: arcProgressVariants,
25+
options: progressArcVariants,
2626
},
2727
},
2828
};
2929

3030
export default meta;
31-
type Story = StoryObj<typeof DsArcProgress>;
31+
type Story = StoryObj<typeof DsProgressArc>;
3232

3333
export const Default: Story = {
3434
args: {
@@ -50,29 +50,29 @@ export const AllVariants: Story = {
5050
render: () => (
5151
<div className={styles.grid}>
5252
<div className={styles.cell}>
53-
<DsArcProgress size="small" value={50} />
53+
<DsProgressArc size="small" value={50} />
5454
<span className={styles.label}>Small / Default</span>
5555
</div>
5656
<div className={styles.cell}>
57-
<DsArcProgress size="small" variant="success" />
57+
<DsProgressArc size="small" variant="success" />
5858
<span className={styles.label}>Small / Success</span>
5959
</div>
6060
<div className={styles.cell}>
61-
<DsArcProgress size="small" variant="failed" value={50} />
62-
<span className={styles.label}>Small / Failed</span>
61+
<DsProgressArc size="small" variant="error" value={50} />
62+
<span className={styles.label}>Small / Error</span>
6363
</div>
6464

6565
<div className={styles.cell}>
66-
<DsArcProgress size="medium" value={50} />
66+
<DsProgressArc size="medium" value={50} />
6767
<span className={styles.label}>Medium / Default</span>
6868
</div>
6969
<div className={styles.cell}>
70-
<DsArcProgress size="medium" variant="success" />
70+
<DsProgressArc size="medium" variant="success" />
7171
<span className={styles.label}>Medium / Success</span>
7272
</div>
7373
<div className={styles.cell}>
74-
<DsArcProgress size="medium" variant="failed" value={50} />
75-
<span className={styles.label}>Medium / Failed</span>
74+
<DsProgressArc size="medium" variant="error" value={50} />
75+
<span className={styles.label}>Medium / Error</span>
7676
</div>
7777
</div>
7878
),
@@ -88,11 +88,11 @@ export const Sizes: Story = {
8888
render: () => (
8989
<div className={styles.row}>
9090
<div className={styles.cell}>
91-
<DsArcProgress size="small" value={75} />
91+
<DsProgressArc size="small" value={75} />
9292
<span className={styles.label}>Small</span>
9393
</div>
9494
<div className={styles.cell}>
95-
<DsArcProgress size="medium" value={75} />
95+
<DsProgressArc size="medium" value={75} />
9696
<span className={styles.label}>Medium</span>
9797
</div>
9898
</div>
@@ -120,9 +120,9 @@ export const Success: Story = {
120120
},
121121
};
122122

123-
export const Failed: Story = {
123+
export const Error: Story = {
124124
args: {
125-
variant: 'failed',
125+
variant: 'error',
126126
value: 50,
127127
},
128128
play: async ({ canvasElement }) => {

packages/design-system/src/components/ds-arc-progress/ds-arc-progress.tsx renamed to packages/design-system/src/components/ds-progress-arc/ds-progress-arc.tsx

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1+
import type React from 'react';
12
import classNames from 'classnames';
23

34
import { DsIcon } from '../ds-icon';
4-
import styles from './ds-arc-progress.module.scss';
5-
import type { ArcProgressVariant, DsArcProgressProps } from './ds-arc-progress.types';
6-
import { getArcGeometry, getEffectiveValue, getProgressDasharray, getTrackDasharray } from './utils';
5+
import { DsTypography } from '../ds-typography';
6+
import styles from './ds-progress-arc.module.scss';
7+
import type { DsProgressArcProps, ProgressArcVariant } from './ds-progress-arc.types';
8+
import { clampValue, getArcGeometry, getProgressDasharray, getTrackDasharray } from './utils';
79

8-
const variantStyleMap: Record<ArcProgressVariant, string> = Object.freeze({
10+
const variantStyleMap: Record<ProgressArcVariant, string> = Object.freeze({
911
default: styles.default,
1012
success: styles.success,
11-
failed: styles.failed,
13+
error: styles.error,
1214
});
1315

14-
const DsArcProgress = ({
16+
const DsProgressArc = ({
1517
value = 0,
1618
size = 'medium',
1719
variant = 'default',
@@ -20,11 +22,11 @@ const DsArcProgress = ({
2022
style,
2123
ref,
2224
...props
23-
}: DsArcProgressProps) => {
25+
}: DsProgressArcProps) => {
2426
const { containerSize, strokeWidth, radius, circumference, arcLength, center, startRotation } =
2527
getArcGeometry(size);
2628

27-
const effectiveValue = getEffectiveValue(variant, value);
29+
const effectiveValue = variant === 'success' ? 100 : clampValue(value);
2830
const trackDasharray = getTrackDasharray(arcLength, circumference);
2931
const progressDasharray = getProgressDasharray(effectiveValue, arcLength, circumference);
3032

@@ -48,12 +50,14 @@ const DsArcProgress = ({
4850
return renderIcon('check', styles.iconSuccess);
4951
}
5052

51-
if (variant === 'failed') {
52-
return renderIcon('close', styles.iconFailed);
53+
if (variant === 'error') {
54+
return renderIcon('close', styles.iconError);
5355
}
5456

5557
return (
56-
<span className={size === 'medium' ? styles.valueMedium : styles.valueSmall}>{effectiveValue}%</span>
58+
<DsTypography variant={size === 'medium' ? 'heading3' : 'body-md-md'} asChild>
59+
<span>{effectiveValue}%</span>
60+
</DsTypography>
5761
);
5862
};
5963

@@ -62,7 +66,7 @@ const DsArcProgress = ({
6266
{...props}
6367
className={classNames(styles.root, className)}
6468
style={{ width: containerSize, height: containerSize, ...style }}
65-
ref={ref}
69+
ref={ref as React.Ref<HTMLDivElement>}
6670
role="progressbar"
6771
aria-valuenow={effectiveValue}
6872
aria-valuemin={0}
@@ -104,4 +108,4 @@ const DsArcProgress = ({
104108
);
105109
};
106110

107-
export default DsArcProgress;
111+
export default DsProgressArc;

packages/design-system/src/components/ds-arc-progress/ds-arc-progress.types.ts renamed to packages/design-system/src/components/ds-progress-arc/ds-progress-arc.types.ts

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
22

3-
export const arcProgressSizes = ['small', 'medium'] as const;
4-
export type ArcProgressSize = (typeof arcProgressSizes)[number];
3+
export const progressArcSizes = ['small', 'medium'] as const;
4+
export type ProgressArcSize = (typeof progressArcSizes)[number];
55

6-
export const arcProgressVariants = ['default', 'success', 'failed'] as const;
7-
export type ArcProgressVariant = (typeof arcProgressVariants)[number];
6+
export const progressArcVariants = ['default', 'success', 'error'] as const;
7+
export type ProgressArcVariant = (typeof progressArcVariants)[number];
88

9-
export interface DsArcProgressProps extends ComponentPropsWithoutRef<'div'> {
9+
export interface DsProgressArcProps extends ComponentPropsWithoutRef<'div'> {
1010
/**
1111
* Progress value between 0 and 100
1212
* @default 0
@@ -17,21 +17,18 @@ export interface DsArcProgressProps extends ComponentPropsWithoutRef<'div'> {
1717
* Size of the arc progress indicator
1818
* @default 'medium'
1919
*/
20-
size?: ArcProgressSize;
20+
size?: ProgressArcSize;
2121

2222
/**
2323
* Visual variant of the arc progress indicator
2424
* @default 'default'
2525
*/
26-
variant?: ArcProgressVariant;
26+
variant?: ProgressArcVariant;
2727

2828
/**
2929
* Custom content to display in the center of the arc, overriding the default text or icon
3030
*/
3131
children?: ReactNode;
3232

33-
/**
34-
* Ref to the root element
35-
*/
36-
ref?: Ref<HTMLDivElement>;
33+
ref?: Ref<HTMLElement>;
3734
}

‎packages/design-system/src/components/ds-progress-arc/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { default as DsProgressArc } from './ds-progress-arc';
2+
3+
export * from './ds-progress-arc.types';

packages/design-system/src/components/ds-arc-progress/utils.test.ts renamed to packages/design-system/src/components/ds-progress-arc/utils.test.ts

Lines changed: 2 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,7 @@
11
import { describe, expect, it } from 'vitest';
2-
import {
3-
ARC_RATIO,
4-
clampValue,
5-
getArcGeometry,
6-
getEffectiveValue,
7-
getProgressDasharray,
8-
getTrackDasharray,
9-
} from './utils';
10-
11-
describe('Arc Progress Utils', () => {
12-
describe('clampValue', () => {
13-
it('should return value within 0-100 unchanged', () => {
14-
expect(clampValue(50)).toBe(50);
15-
});
16-
17-
it('should clamp value below 0 to 0', () => {
18-
expect(clampValue(-10)).toBe(0);
19-
});
20-
21-
it('should clamp value above 100 to 100', () => {
22-
expect(clampValue(150)).toBe(100);
23-
});
24-
25-
it('should handle boundary values', () => {
26-
expect(clampValue(0)).toBe(0);
27-
expect(clampValue(100)).toBe(100);
28-
});
29-
});
30-
31-
describe('getEffectiveValue', () => {
32-
it('should return 100 for success variant regardless of value', () => {
33-
expect(getEffectiveValue('success', 0)).toBe(100);
34-
expect(getEffectiveValue('success', 50)).toBe(100);
35-
});
36-
37-
it('should return clamped value for default variant', () => {
38-
expect(getEffectiveValue('default', 50)).toBe(50);
39-
expect(getEffectiveValue('default', -10)).toBe(0);
40-
expect(getEffectiveValue('default', 200)).toBe(100);
41-
});
42-
43-
it('should return clamped value for failed variant', () => {
44-
expect(getEffectiveValue('failed', 75)).toBe(75);
45-
expect(getEffectiveValue('failed', -5)).toBe(0);
46-
});
47-
});
2+
import { ARC_RATIO, getArcGeometry, getProgressDasharray, getTrackDasharray } from './utils';
483

4+
describe('Progress Arc Utils', () => {
495
describe('getArcGeometry', () => {
506
it('should return correct geometry for small size', () => {
517
const geo = getArcGeometry('small');

packages/design-system/src/components/ds-arc-progress/utils.ts renamed to packages/design-system/src/components/ds-progress-arc/utils.ts

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
1-
import type { ArcProgressSize, ArcProgressVariant } from './ds-arc-progress.types';
1+
import type { ProgressArcSize } from './ds-progress-arc.types';
2+
3+
export { clampValue } from '../../utils/numbers';
24

35
const ARC_DEGREES = 270;
46
const FULL_CIRCLE = 360;
57
const START_ROTATION = 135;
68

79
export const ARC_RATIO = ARC_DEGREES / FULL_CIRCLE;
810

9-
const containerSizeMap: Record<ArcProgressSize, number> = {
11+
const containerSizeMap: Record<ProgressArcSize, number> = Object.freeze({
1012
small: 80,
1113
medium: 120,
12-
};
14+
});
1315

14-
const strokeWidthMap: Record<ArcProgressSize, number> = {
16+
const strokeWidthMap: Record<ProgressArcSize, number> = Object.freeze({
1517
small: 4,
1618
medium: 6,
17-
};
18-
19-
export const clampValue = (value: number): number => Math.min(100, Math.max(0, value));
20-
21-
export const getEffectiveValue = (variant: ArcProgressVariant, value: number): number =>
22-
variant === 'success' ? 100 : clampValue(value);
19+
});
2320

2421
export interface ArcGeometry {
2522
containerSize: number;
@@ -31,7 +28,7 @@ export interface ArcGeometry {
3128
startRotation: number;
3229
}
3330

34-
export const getArcGeometry = (size: ArcProgressSize): ArcGeometry => {
31+
export const getArcGeometry = (size: ProgressArcSize): ArcGeometry => {
3532
const containerSize = containerSizeMap[size];
3633
const strokeWidth = strokeWidthMap[size];
3734
const radius = (containerSize - strokeWidth) / 2;

‎packages/design-system/src/components/ds-progress-donut/ds-progress-donut.module.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ $transition-duration: 0.2s;
3838
stroke: var(--color-background-success-strong);
3939
}
4040

41-
.failed .range {
41+
.error .range {
4242
stroke: var(--color-background-danger-strong);
4343
}
4444

@@ -54,14 +54,14 @@ $transition-duration: 0.2s;
5454
color: var(--color-icon-success);
5555
}
5656

57-
.iconFailed {
57+
.iconError {
5858
color: var(--color-icon-danger);
5959
}
6060

61-
$icon-custom-size: 44px;
61+
$icon-medium-size: 44px;
6262

6363
.iconMediumSize.iconMediumSize {
64-
font-size: $icon-custom-size;
64+
font-size: $icon-medium-size;
6565
width: 1em;
6666
height: 1em;
6767
}

0 commit comments

Comments
 (0)