Skip to content

Commit

Permalink
feat: new Spinner
Browse files Browse the repository at this point in the history
  • Loading branch information
@hextion
hextion committed Aug 14, 2024
1 parent 617c29c commit f0cdaa0
Show file tree
Hide file tree
Showing 22 changed files with 428 additions and 158 deletions.
20 changes: 20 additions & 0 deletions .changeset/stale-tables-hammer.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
'@alfalab/core-components-spinner': minor
'@alfalab/core-components-action-button': patch
'@alfalab/core-components-button': patch
'@alfalab/core-components-confirmation': patch
'@alfalab/core-components-custom-button': patch
'@alfalab/core-components-file-upload-item': patch
---

Обновленный вид спиннера.

Добавлены следующие пропс для тонкой настройки внешнего вида:
* `spinnerSize`
* `lineWidth`
* `padding`
* `color`

Следующие пропс помечены как `deprecated` и не рекомендуются к использованию в новом коде:
* `size`
* `colors`
4 changes: 2 additions & 2 deletions ...n-button/src/__image_snapshots__/action-button-disabled-loading-sprite-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 12 additions & 8 deletions packages/button/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,7 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
style="height: 24px; width: 24px;"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -325,7 +326,8 @@ Object {
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
Expand All @@ -340,7 +342,6 @@ Object {
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand All @@ -355,6 +356,7 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
style="height: 24px; width: 24px;"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -368,7 +370,8 @@ Object {
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
Expand All @@ -383,7 +386,6 @@ Object {
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand Down Expand Up @@ -455,6 +457,7 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
style="height: 24px; width: 24px;"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -468,7 +471,8 @@ Object {
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
Expand All @@ -483,7 +487,6 @@ Object {
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand All @@ -498,6 +501,7 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
style="height: 24px; width: 24px;"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -511,7 +515,8 @@ Object {
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
Expand All @@ -526,7 +531,6 @@ Object {
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand Down
10 changes: 6 additions & 4 deletions packages/confirmation/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_CHECKING st
>
<svg
class="spinner component size-24 visible"
style="height: 24px; width: 24px;"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -155,7 +156,8 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_CHECKING st
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
Expand All @@ -170,7 +172,6 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_CHECKING st
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand Down Expand Up @@ -341,6 +342,7 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_SENDING sta
>
<svg
class="spinner component size-24 visible"
style="height: 24px; width: 24px;"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -354,7 +356,8 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_SENDING sta
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
Expand All @@ -369,7 +372,6 @@ exports[`Confirmation Snapshot tests should match snapshot with CODE_SENDING sta
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand Down
10 changes: 6 additions & 4 deletions packages/custom-button/src/__snapshots__/Component.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,7 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
style="height: 24px; width: 24px;"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -318,7 +319,8 @@ Object {
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
Expand All @@ -333,7 +335,6 @@ Object {
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand All @@ -349,6 +350,7 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
style="height: 24px; width: 24px;"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -362,7 +364,8 @@ Object {
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
Expand All @@ -377,7 +380,6 @@ Object {
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand Down
4 changes: 2 additions & 2 deletions ...atus-success-name-0-upload-date-0-size-0-show-delete-0-upload-status-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...atus-success-name-0-upload-date-0-size-0-show-delete-0-upload-status-2-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...le-upload-item-name-with-statuses-name-0-upload-status-2-show-delete-0-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...le-upload-item-name-with-statuses-name-0-upload-status-3-show-delete-0-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 37 additions & 2 deletions packages/spinner/src/Component.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import React from 'react';
import { render } from '@testing-library/react';
import { devWarning } from '@alfalab/core-components-shared';

import { Spinner } from './index';

jest.mock('@alfalab/hooks', () => ({ useId: () => 1 }));

jest.mock('@alfalab/core-components-shared', () => {
const original = jest.requireActual('@alfalab/core-components-shared');
return Object.assign({ __esModule: true }, original, { devWarning: jest.fn() });
});

const testId = 'spinner';

describe('Snapshots tests', () => {
Expand Down Expand Up @@ -42,16 +48,45 @@ describe('Render tests', () => {
expect(getByTestId(testId)).toHaveClass('visible');
});

it('should set `size` class', () => {
it('DEPRECATED: should set `size` class', () => {
const size = 24;
const { container } = render(<Spinner visible={true} size={size} />);

expect(container.firstElementChild).toHaveClass(`size-${size}`);
});

it('should use default `size`', () => {
it('DEPRECATED: should use default `size`', () => {
const { container } = render(<Spinner visible={true} />);

expect(container.firstElementChild).toHaveClass('size-24');
});
});

describe('Spinner new props', () => {
it('DEPRECATED: should warn', () => {
render(<Spinner visible={true} />);
expect(devWarning).toHaveBeenCalledWith(
expect.stringMatching('Spinner uses some deprecated props'),
);
});
it('should support `spinnerSize`, `lineWidth`, `padding`', () => {
const { container } = render(
<Spinner visible spinnerSize={40} lineWidth={2} padding={4} />,
);
expect(container).toMatchSnapshot();
});
it('should set correct size', () => {
const { container } = render(
<Spinner visible spinnerSize={40} lineWidth={2} padding={4} />,
);
expect(container.firstElementChild).toHaveStyle({ height: '48px', width: '48px' });
});
it('should support `color`', () => {
const color = '#EC2D20';
const { container } = render(
<Spinner visible spinnerSize={48} lineWidth={6} padding={2} color={color} />,
);
expect(container).toMatchSnapshot();
expect(container.firstElementChild).toHaveStyle({ color });
});
});
Loading

0 comments on commit f0cdaa0

Please sign in to comment.