Skip to content

Commit

Permalink
fix: console.warn, colors, label required
Browse files Browse the repository at this point in the history
  • Loading branch information
@savutsang
savutsang committed Feb 16, 2024
1 parent 47289ca commit 7a42ab9
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 59 deletions.
21 changes: 11 additions & 10 deletions packages/react/src/components/progress-tracker/progress-tracker.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,8 @@ function generateSteps(count: number): ProgressTrackerStep[] {
}

describe('Progress Component', () => {
it('should render all steps', () => {
const steps = generateSteps(3);

const wrapper = mountWithTheme(<ProgressTracker steps={steps} value={1} />);
const allSteps = wrapper.find('li[data-testid^="progress-tracker-step-"]');
expect(allSteps.length).toBe(3);
beforeEach(() => {
jest.spyOn(console, 'warn').mockImplementation(() => { });
});

it('should render all steps labels', () => {
Expand Down Expand Up @@ -71,18 +67,23 @@ describe('Progress Component', () => {
});

describe('Snapshots', () => {
it('with labels', () => {
it('linear', () => {
const steps = generateSteps(3);

const wrapper = renderWithProviders(<ProgressTracker steps={steps} value={2} />);

expect(wrapper).toMatchSnapshot();
});

it('without labels', () => {
const steps: ProgressTrackerStep[] = [{}, {}, {}];
it('non linear', () => {
const steps: ProgressTrackerStep[] = [
{ label: 'Step 1', completion: 'completed' },
{ label: 'Step 2', completion: 'uncompleted' },
{ label: 'Step 3' },
{ label: 'Step 4' },
];

const wrapper = renderWithProviders(<ProgressTracker steps={steps} value={2} />);
const wrapper = renderWithProviders(<ProgressTracker steps={steps} value={3} />);

expect(wrapper).toMatchSnapshot();
});
Expand Down
105 changes: 82 additions & 23 deletions packages/react/src/components/progress-tracker/progress-tracker.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Progress Component Snapshots with labels 1`] = `
exports[`Progress Component Snapshots linear 1`] = `
.c6 {
border: 0;
-webkit-clip: rect(0,0,0,0);
Expand Down Expand Up @@ -109,22 +109,22 @@ exports[`Progress Component Snapshots with labels 1`] = `
}
.c3::before {
background-color: #004E78;
border-color: #004E78;
background-color: #006296;
border-color: #006296;
color: #FFFFFF;
font-weight: var(--font-bold);
font-weight: var(--font-semi-bold);
}
.c3::after {
background-color: #004E78;
background-color: #006296;
}
.c3 .c4 {
color: #006296;
}
.c7::before {
border-color: #004E78;
border-color: #006296;
border-width: 0.25rem;
color: #003A5A;
font-weight: var(--font-bold);
Expand All @@ -134,7 +134,7 @@ exports[`Progress Component Snapshots with labels 1`] = `
}
.c7::after {
background-color: #004E78;
background-color: #006296;
}
.c7 .c4 {
Expand Down Expand Up @@ -206,8 +206,8 @@ exports[`Progress Component Snapshots with labels 1`] = `
</section>
`;

exports[`Progress Component Snapshots without labels 1`] = `
.c4 {
exports[`Progress Component Snapshots non linear 1`] = `
.c6 {
border: 0;
-webkit-clip: rect(0,0,0,0);
clip: rect(0,0,0,0);
Expand Down Expand Up @@ -239,6 +239,17 @@ exports[`Progress Component Snapshots without labels 1`] = `
padding: 0;
}
.c5 {
font-size: 0.875rem;
font-weight: var(--font-normal);
-webkit-letter-spacing: 0.0125rem;
-moz-letter-spacing: 0.0125rem;
-ms-letter-spacing: 0.0125rem;
letter-spacing: 0.0125rem;
line-height: 1.25rem;
margin-top: var(--spacing-half);
}
.c2 {
-webkit-align-items: center;
-webkit-box-align: center;
Expand Down Expand Up @@ -304,18 +315,22 @@ exports[`Progress Component Snapshots without labels 1`] = `
}
.c3::before {
background-color: #004E78;
border-color: #004E78;
background-color: #006296;
border-color: #006296;
color: #FFFFFF;
font-weight: var(--font-bold);
font-weight: var(--font-semi-bold);
}
.c3::after {
background-color: #004E78;
background-color: #006296;
}
.c3 .c4 {
color: #006296;
}
.c5::before {
border-color: #004E78;
.c7::before {
border-color: #006296;
border-width: 0.25rem;
color: #003A5A;
font-weight: var(--font-bold);
Expand All @@ -324,15 +339,24 @@ exports[`Progress Component Snapshots without labels 1`] = `
width: var(--size-2x);
}
.c5::after {
background-color: #004E78;
.c7::after {
background-color: #006296;
}
.c6::before {
.c7 .c4 {
color: #003A5A;
font-weight: var(--font-bold);
}
.c8::before {
border-color: #B7BBC2;
color: #1B1C1E;
}
.c8 .c4 {
color: #60666E;
}
<section
class="c0"
>
Expand All @@ -345,22 +369,57 @@ exports[`Progress Component Snapshots without labels 1`] = `
data-testid="progress-tracker-step-completed"
>
<span
class="c4"
class="c4 c5"
data-testid="progress-tracker-label"
>
Step 1
</span>
<span
class="c6"
>
completed
</span>
</li>
<li
class="c2 c3"
data-testid="progress-tracker-step-completed"
>
<span
class="c4 c5"
data-testid="progress-tracker-label"
>
Step 2
</span>
<span
class="c6"
>
completed
</span>
</li>
<li
aria-current="step"
class="c2 c5"
class="c2 c7"
data-testid="progress-tracker-step-current"
/>
>
<span
class="c4 c5"
data-testid="progress-tracker-label"
>
Step 3
</span>
</li>
<li
class="c2 c6"
class="c2 c8"
data-testid="progress-tracker-step-uncompleted"
>
<span
class="c4"
class="c4 c5"
data-testid="progress-tracker-label"
>
Step 4
</span>
<span
class="c6"
>
not completed
</span>
Expand Down
22 changes: 13 additions & 9 deletions packages/react/src/components/progress-tracker/progress-tracker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,14 +83,14 @@ const StyledStep = styled.li<{ $linear: boolean }>`

const CompletedStep = styled(StyledStep)`
&::before {
background-color: ${({ theme }) => theme.main['primary-3']};
border-color: ${({ theme }) => theme.main['primary-3']};
background-color: ${({ theme }) => theme.main['primary-1.1']};
border-color: ${({ theme }) => theme.main['primary-1.1']};
color: ${({ theme }) => theme.greys.white};
font-weight: var(--font-bold);
font-weight: var(--font-semi-bold);
}
&::after {
background-color: ${({ $linear, theme }) => $linear && theme.main['primary-3']};
background-color: ${({ $linear, theme }) => $linear && theme.main['primary-1.1']};
}
${Label} {
Expand All @@ -100,7 +100,7 @@ const CompletedStep = styled(StyledStep)`

const CurrentStep = styled(StyledStep)`
&::before {
border-color: ${({ theme }) => theme.main['primary-3']};
border-color: ${({ theme }) => theme.main['primary-1.1']};
border-width: 0.25rem;
color: ${({ theme }) => theme.main['primary-1.3']};
font-weight: var(--font-bold);
Expand All @@ -110,7 +110,7 @@ const CurrentStep = styled(StyledStep)`
}
&::after {
background-color: ${({ $linear, theme }) => $linear && theme.main['primary-3']};
background-color: ${({ $linear, theme }) => $linear && theme.main['primary-1.1']};
}
${Label} {
Expand Down Expand Up @@ -140,8 +140,8 @@ const UncompletedIcon = styled(Icon)`

export interface ProgressTrackerStep {
href?: string;
label?: string;
completion?: 'uncompleted' | 'completed';
label: string;
completion?: 'completed' | 'uncompleted';
onClick?: (stepNumber: number) => void;
}

Expand Down Expand Up @@ -186,7 +186,7 @@ const Step: VoidFunctionComponent<StepProps> = ({

const content = (
<>
{showUncompletedIcon && <UncompletedIcon name='alertCircle' size='16' />}
{showUncompletedIcon && <UncompletedIcon name='alertCircle' size='16' aria-hidden="true" />}
{step.label && <Label data-testid="progress-tracker-label">{step.label}</Label>}
{screenReaderText && <ScreenReaderOnlyText label={screenReaderText} />}
</>
Expand Down Expand Up @@ -228,6 +228,10 @@ export const ProgressTracker: VoidFunctionComponent<ProgressTrackerProps> = ({
const clampValue = clamp(value, 1, max);
const hasAnyLink = steps.some((step) => step.href || step.onClick);

if (!ariaLabel) {
console.warn('ariaLabel is required for Accessibility');
}

return (
<Container className={className} aria-label={ariaLabel} as={hasAnyLink ? 'nav' : undefined}>
<Steps data-testid="progress-tracker">
Expand Down
26 changes: 9 additions & 17 deletions packages/storybook/stories/progress-tracker.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,6 @@ export default {

};

function createEmptySteps(count: number): ProgressTrackerStep[] {
const steps: ProgressTrackerStep[] = [];
for (let i = 1; i <= count; i++) {
steps.push({});
}
return steps;
}

function createSteps(count: number): ProgressTrackerStep[] {
const steps: ProgressTrackerStep[] = [];
for (let i = 1; i <= count; i++) {
Expand All @@ -27,14 +19,14 @@ function createSteps(count: number): ProgressTrackerStep[] {
}

export const Normal: Story = () => (
<ProgressTracker steps={createEmptySteps(3)} value={2} />
<ProgressTracker steps={createSteps(3)} value={2} ariaLabel='Storybook progress' />
);

export const Steps: Story = () => (
<>
<ProgressTracker steps={createEmptySteps(3)} value={1} />
<ProgressTracker steps={createEmptySteps(3)} value={2} />
<ProgressTracker steps={createEmptySteps(3)} value={3} />
<ProgressTracker steps={createSteps(3)} value={1} ariaLabel='Storybook progress' />
<ProgressTracker steps={createSteps(3)} value={2} ariaLabel='Storybook progress' />
<ProgressTracker steps={createSteps(3)} value={3} ariaLabel='Storybook progress' />
</>
);

Expand All @@ -44,9 +36,9 @@ export const WithLabels: Story = () => (

export const AriaLabel: Story = () => (
<ProgressTracker
steps={createEmptySteps(3)}
steps={createSteps(3)}
value={2}
ariaLabel="Create account steps"
ariaLabel='Storybook progress'
/>
);

Expand All @@ -58,7 +50,7 @@ export const OnclickEvent: Story = () => {
{ label: 'Step 2', onClick: (stepNumber) => setCurrentStep(stepNumber) },
{ label: 'Step 3', onClick: (stepNumber) => setCurrentStep(stepNumber) },
];
return <ProgressTracker steps={steps} value={currentStep} />;
return <ProgressTracker steps={steps} value={currentStep} ariaLabel='Storybook progress' />;
};

export const HrefLinks: Story = () => {
Expand All @@ -67,7 +59,7 @@ export const HrefLinks: Story = () => {
{ label: 'Step 2', href: 'https://equisoft.com' },
{ label: 'Step 3', href: 'https://equisoft.com' },
];
return <ProgressTracker steps={steps} value={2} />;
return <ProgressTracker steps={steps} value={2} ariaLabel='Storybook progress' />;
};

export const NonLinear: Story = () => {
Expand All @@ -79,5 +71,5 @@ export const NonLinear: Story = () => {
{ label: 'Step 3', onClick: (stepNumber) => setCurrentStep(stepNumber) },
{ label: 'Step 4', onClick: (stepNumber) => setCurrentStep(stepNumber) },
];
return <ProgressTracker linear={false} steps={steps} value={currentStep} />;
return <ProgressTracker linear={false} steps={steps} value={currentStep} ariaLabel='Storybook progress' />;
};

0 comments on commit 7a42ab9

Please sign in to comment.