@ssa-ui-kit/core 0.0.10-alpha → 0.0.11-alpha

package/src/components/Progress/Progress.spec.tsx

@@ -1,85 +1,85 @@
-import { screen, within } from '../../../customTest';
-
-import theme from '@themes/main';
-
-import ProgressBar from '@components/ProgressBar';
-import ProgressVertical from '@components/ProgressVertical';
-import ProgressLegend from '@components/ProgressLegend';
-import ProgressLegendItem from '@components/ProgressLegendItem';
-
-import Progress from './index';
-
-describe('Progress', () => {
-  it('Render Progress horizontal', () => {
-    render(
-      <Progress>
-        <ProgressBar percentage={50} color={'green'} />
-      </Progress>,
-    );
-
-    const progressBar = screen.getByRole('progressbar');
-
-    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.green}`);
-    expect(progressBar).toHaveStyle('width: 50%');
-  });
-
-  it('Render Progress with legend in the correct order', async () => {
-    render(
-      <Progress>
-        <ProgressLegend>
-          <ProgressLegendItem position="start" percentage={0}>
-            0%
-          </ProgressLegendItem>
-          <ProgressLegendItem position="current" percentage={45}>
-            45%
-          </ProgressLegendItem>
-          <ProgressLegendItem position="end" percentage={100}>
-            100%
-          </ProgressLegendItem>
-        </ProgressLegend>
-        <ProgressBar percentage={50} color={'green'} />
-      </Progress>,
-    );
-
-    const progressBar = screen.getByRole('progressbar');
-    const [item1, item2, item3] = await screen.queryAllByText(/%/i);
-
-    await within(item1).findByText(/0%/i);
-    await within(item2).findByText(/45%/i);
-    await within(item3).findByText(/100%/i);
-
-    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.green}`);
-    expect(progressBar).toHaveStyle('width: 50%');
-  });
-
-  it('Render ProgressBar with different color', () => {
-    render(
-      <Progress>
-        <ProgressBar percentage={50} color={'blue'} />
-      </Progress>,
-    );
-
-    const progressBar = screen.getByRole('progressbar');
-
-    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.blue}`);
-    expect(progressBar).toHaveStyle('width: 50%');
-  });
-
-  it('Render ProgressVertical with legend', async () => {
-    render(
-      <ProgressVertical>
-        <ProgressBar percentage={50} color={'green'} />
-        <ProgressLegend>
-          <ProgressLegendItem percentage={60}>60%</ProgressLegendItem>
-        </ProgressLegend>
-      </ProgressVertical>,
-    );
-
-    const progressBar = screen.getByRole('progressbar');
-
-    await screen.findByText(/60%/i);
-
-    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.green}`);
-    expect(progressBar).toHaveStyle('height: 50%');
-  });
-});
+import { screen, within } from '../../../customTest';
+
+import theme from '@themes/main';
+
+import ProgressBar from '@components/ProgressBar';
+import ProgressVertical from '@components/ProgressVertical';
+import ProgressLegend from '@components/ProgressLegend';
+import ProgressLegendItem from '@components/ProgressLegendItem';
+
+import Progress from './index';
+
+describe('Progress', () => {
+  it('Render Progress horizontal', () => {
+    render(
+      <Progress>
+        <ProgressBar percentage={50} color={'green'} />
+      </Progress>,
+    );
+
+    const progressBar = screen.getByRole('progressbar');
+
+    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.green}`);
+    expect(progressBar).toHaveStyle('width: 50%');
+  });
+
+  it('Render Progress with legend in the correct order', async () => {
+    render(
+      <Progress>
+        <ProgressLegend>
+          <ProgressLegendItem position="start" percentage={0}>
+            0%
+          </ProgressLegendItem>
+          <ProgressLegendItem position="current" percentage={45}>
+            45%
+          </ProgressLegendItem>
+          <ProgressLegendItem position="end" percentage={100}>
+            100%
+          </ProgressLegendItem>
+        </ProgressLegend>
+        <ProgressBar percentage={50} color={'green'} />
+      </Progress>,
+    );
+
+    const progressBar = screen.getByRole('progressbar');
+    const [item1, item2, item3] = await screen.queryAllByText(/%/i);
+
+    await within(item1).findByText(/0%/i);
+    await within(item2).findByText(/45%/i);
+    await within(item3).findByText(/100%/i);
+
+    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.green}`);
+    expect(progressBar).toHaveStyle('width: 50%');
+  });
+
+  it('Render ProgressBar with different color', () => {
+    render(
+      <Progress>
+        <ProgressBar percentage={50} color={'blue'} />
+      </Progress>,
+    );
+
+    const progressBar = screen.getByRole('progressbar');
+
+    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.blue}`);
+    expect(progressBar).toHaveStyle('width: 50%');
+  });
+
+  it('Render ProgressVertical with legend', async () => {
+    render(
+      <ProgressVertical>
+        <ProgressBar percentage={50} color={'green'} />
+        <ProgressLegend>
+          <ProgressLegendItem percentage={60}>60%</ProgressLegendItem>
+        </ProgressLegend>
+      </ProgressVertical>,
+    );
+
+    const progressBar = screen.getByRole('progressbar');
+
+    await screen.findByText(/60%/i);
+
+    expect(progressBar).toHaveStyle(`background-color: ${theme.colors.green}`);
+    expect(progressBar).toHaveStyle('height: 50%');
+  });
+});

package/src/components/Progress/Progress.stories.tsx

@@ -1,234 +1,234 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import ProgressBar from '@components/ProgressBar';
-import ProgressVertical from '@components/ProgressVertical';
-import ProgressLegendItem from '@components/ProgressLegendItem';
-import ProgressLegend from '@components/ProgressLegend';
-
-import Progress from './index';
-
-type Args = Parameters<typeof ProgressBar>[0];
-
-export default {
-  title: 'Components/Progress',
-  component: Progress,
-  argTypes: {
-    color: {
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-      options: [
-        'pink',
-        'yellow',
-        'green',
-        'turquoise',
-        'purple',
-        'blueLight',
-        'blue',
-      ],
-      control: {
-        type: 'select',
-      },
-    },
-  },
-} as Meta<typeof Progress>;
-
-export const Vertical: StoryObj = (args: Args) => {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        height: 200,
-        width: '100%',
-      }}>
-      <div
-        style={{
-          height: 200,
-          paddingInline: 20,
-        }}>
-        <ProgressVertical>
-          <ProgressBar percentage={args.percentage} color={args.color} />
-          <ProgressLegend>
-            <ProgressLegendItem position="end" percentage={100}>
-              3000
-            </ProgressLegendItem>
-            <ProgressLegendItem position="current" percentage={args.percentage}>
-              1500
-            </ProgressLegendItem>
-            <ProgressLegendItem position="start" percentage={0}>
-              0
-            </ProgressLegendItem>
-          </ProgressLegend>
-        </ProgressVertical>
-      </div>
-
-      <div
-        style={{
-          height: 200,
-          paddingInline: 20,
-        }}>
-        <ProgressVertical>
-          <ProgressLegend>
-            <ProgressLegendItem position="end" percentage={100}>
-              <span
-                style={{
-                  textAlign: 'right',
-                  display: 'block',
-                  paddingRight: 6,
-                }}>
-                100%
-              </span>
-            </ProgressLegendItem>
-            <ProgressLegendItem position="current" percentage={30}>
-              <span
-                style={{
-                  textAlign: 'right',
-                  display: 'block',
-                  paddingRight: 6,
-                }}>
-                30%
-              </span>
-            </ProgressLegendItem>
-            <ProgressLegendItem position="start" percentage={0}>
-              <span
-                style={{
-                  textAlign: 'right',
-                  display: 'block',
-                  paddingRight: 6,
-                }}>
-                0%
-              </span>
-            </ProgressLegendItem>
-          </ProgressLegend>
-          <ProgressBar percentage={30} color={args.color} />
-        </ProgressVertical>
-      </div>
-
-      <div
-        style={{
-          height: 200,
-          paddingInline: 20,
-        }}>
-        <ProgressVertical>
-          <ProgressLegend>
-            <ProgressLegendItem position="current" percentage={30}>
-              <span
-                style={{
-                  textAlign: 'right',
-                  display: 'block',
-                  paddingRight: 6,
-                }}>
-                30%
-              </span>
-            </ProgressLegendItem>
-          </ProgressLegend>
-          <ProgressBar percentage={30} color={args.color} />
-        </ProgressVertical>
-      </div>
-
-      <div
-        style={{
-          height: 200,
-          paddingInline: 20,
-        }}>
-        <ProgressVertical>
-          <ProgressBar percentage={30} color={args.color} />
-          <ProgressLegend>
-            <ProgressLegendItem position="current" percentage={30}>
-              <span
-                style={{
-                  textAlign: 'right',
-                  display: 'block',
-                  paddingRight: 6,
-                }}>
-                30%
-              </span>
-            </ProgressLegendItem>
-          </ProgressLegend>
-        </ProgressVertical>
-      </div>
-
-      <div
-        style={{
-          height: 200,
-          paddingInline: 20,
-        }}>
-        <ProgressVertical>
-          <ProgressBar percentage={30} color={args.color} />
-        </ProgressVertical>
-      </div>
-    </div>
-  );
-};
-Vertical.args = {
-  percentage: 30,
-  color: 'blue',
-};
-
-export const Horizontal: StoryObj = (args: Args) => {
-  return (
-    <div>
-      <div
-        style={{
-          paddingBlock: 20,
-        }}>
-        <Progress>
-          <ProgressLegend>
-            <ProgressLegendItem percentage={80}> 80% </ProgressLegendItem>
-          </ProgressLegend>
-          <ProgressBar percentage={args.percentage} color={args.color} />
-        </Progress>
-      </div>
-
-      <div
-        style={{
-          paddingBlock: 20,
-        }}>
-        <Progress>
-          <ProgressBar percentage={60} color={args.color} />
-          <ProgressLegend>
-            <ProgressLegendItem percentage={60}> 60% </ProgressLegendItem>
-          </ProgressLegend>
-        </Progress>
-      </div>
-
-      <div
-        style={{
-          paddingBlock: 20,
-        }}>
-        <Progress>
-          <ProgressBar percentage={args.percentage} color={args.color} />
-        </Progress>
-      </div>
-
-      <div
-        style={{
-          paddingBlock: 20,
-        }}>
-        <Progress>
-          <ProgressBar percentage={45} color={args.color} />
-          <ProgressLegend>
-            <ProgressLegendItem position="start" percentage={0}>
-              {' '}
-              0%{' '}
-            </ProgressLegendItem>
-            <ProgressLegendItem position="current" percentage={45}>
-              {' '}
-              45%{' '}
-            </ProgressLegendItem>
-            <ProgressLegendItem position="end" percentage={100}>
-              {' '}
-              100%{' '}
-            </ProgressLegendItem>
-          </ProgressLegend>
-        </Progress>
-      </div>
-    </div>
-  );
-};
-Horizontal.args = {
-  percentage: 80,
-  color: 'blue',
-};
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ProgressBar from '@components/ProgressBar';
+import ProgressVertical from '@components/ProgressVertical';
+import ProgressLegendItem from '@components/ProgressLegendItem';
+import ProgressLegend from '@components/ProgressLegend';
+
+import Progress from './index';
+
+type Args = Parameters<typeof ProgressBar>[0];
+
+export default {
+  title: 'Components/Progress',
+  component: Progress,
+  argTypes: {
+    color: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: [
+        'pink',
+        'yellow',
+        'green',
+        'turquoise',
+        'purple',
+        'blueLight',
+        'blue',
+      ],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+} as Meta<typeof Progress>;
+
+export const Vertical: StoryObj = (args: Args) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: 200,
+        width: '100%',
+      }}>
+      <div
+        style={{
+          height: 200,
+          paddingInline: 20,
+        }}>
+        <ProgressVertical>
+          <ProgressBar percentage={args.percentage} color={args.color} />
+          <ProgressLegend>
+            <ProgressLegendItem position="end" percentage={100}>
+              3000
+            </ProgressLegendItem>
+            <ProgressLegendItem position="current" percentage={args.percentage}>
+              1500
+            </ProgressLegendItem>
+            <ProgressLegendItem position="start" percentage={0}>
+              0
+            </ProgressLegendItem>
+          </ProgressLegend>
+        </ProgressVertical>
+      </div>
+
+      <div
+        style={{
+          height: 200,
+          paddingInline: 20,
+        }}>
+        <ProgressVertical>
+          <ProgressLegend>
+            <ProgressLegendItem position="end" percentage={100}>
+              <span
+                style={{
+                  textAlign: 'right',
+                  display: 'block',
+                  paddingRight: 6,
+                }}>
+                100%
+              </span>
+            </ProgressLegendItem>
+            <ProgressLegendItem position="current" percentage={30}>
+              <span
+                style={{
+                  textAlign: 'right',
+                  display: 'block',
+                  paddingRight: 6,
+                }}>
+                30%
+              </span>
+            </ProgressLegendItem>
+            <ProgressLegendItem position="start" percentage={0}>
+              <span
+                style={{
+                  textAlign: 'right',
+                  display: 'block',
+                  paddingRight: 6,
+                }}>
+                0%
+              </span>
+            </ProgressLegendItem>
+          </ProgressLegend>
+          <ProgressBar percentage={30} color={args.color} />
+        </ProgressVertical>
+      </div>
+
+      <div
+        style={{
+          height: 200,
+          paddingInline: 20,
+        }}>
+        <ProgressVertical>
+          <ProgressLegend>
+            <ProgressLegendItem position="current" percentage={30}>
+              <span
+                style={{
+                  textAlign: 'right',
+                  display: 'block',
+                  paddingRight: 6,
+                }}>
+                30%
+              </span>
+            </ProgressLegendItem>
+          </ProgressLegend>
+          <ProgressBar percentage={30} color={args.color} />
+        </ProgressVertical>
+      </div>
+
+      <div
+        style={{
+          height: 200,
+          paddingInline: 20,
+        }}>
+        <ProgressVertical>
+          <ProgressBar percentage={30} color={args.color} />
+          <ProgressLegend>
+            <ProgressLegendItem position="current" percentage={30}>
+              <span
+                style={{
+                  textAlign: 'right',
+                  display: 'block',
+                  paddingRight: 6,
+                }}>
+                30%
+              </span>
+            </ProgressLegendItem>
+          </ProgressLegend>
+        </ProgressVertical>
+      </div>
+
+      <div
+        style={{
+          height: 200,
+          paddingInline: 20,
+        }}>
+        <ProgressVertical>
+          <ProgressBar percentage={30} color={args.color} />
+        </ProgressVertical>
+      </div>
+    </div>
+  );
+};
+Vertical.args = {
+  percentage: 30,
+  color: 'blue',
+};
+
+export const Horizontal: StoryObj = (args: Args) => {
+  return (
+    <div>
+      <div
+        style={{
+          paddingBlock: 20,
+        }}>
+        <Progress>
+          <ProgressLegend>
+            <ProgressLegendItem percentage={80}> 80% </ProgressLegendItem>
+          </ProgressLegend>
+          <ProgressBar percentage={args.percentage} color={args.color} />
+        </Progress>
+      </div>
+
+      <div
+        style={{
+          paddingBlock: 20,
+        }}>
+        <Progress>
+          <ProgressBar percentage={60} color={args.color} />
+          <ProgressLegend>
+            <ProgressLegendItem percentage={60}> 60% </ProgressLegendItem>
+          </ProgressLegend>
+        </Progress>
+      </div>
+
+      <div
+        style={{
+          paddingBlock: 20,
+        }}>
+        <Progress>
+          <ProgressBar percentage={args.percentage} color={args.color} />
+        </Progress>
+      </div>
+
+      <div
+        style={{
+          paddingBlock: 20,
+        }}>
+        <Progress>
+          <ProgressBar percentage={45} color={args.color} />
+          <ProgressLegend>
+            <ProgressLegendItem position="start" percentage={0}>
+              {' '}
+              0%{' '}
+            </ProgressLegendItem>
+            <ProgressLegendItem position="current" percentage={45}>
+              {' '}
+              45%{' '}
+            </ProgressLegendItem>
+            <ProgressLegendItem position="end" percentage={100}>
+              {' '}
+              100%{' '}
+            </ProgressLegendItem>
+          </ProgressLegend>
+        </Progress>
+      </div>
+    </div>
+  );
+};
+Horizontal.args = {
+  percentage: 80,
+  color: 'blue',
+};

package/src/components/Progress/Progress.tsx

@@ -1,7 +1,7 @@
-import { ProgressProps } from './types';
-
-const Progress = ({ children }: ProgressProps) => {
-  return <div>{children}</div>;
-};
-
-export default Progress;
+import { ProgressProps } from './types';
+
+const Progress = ({ children }: ProgressProps) => {
+  return <div>{children}</div>;
+};
+
+export default Progress;

package/src/components/Progress/index.ts

@@ -1 +1 @@
-export { default } from './Progress';
+export { default } from './Progress';

package/src/components/Progress/types.ts

@@ -1,5 +1,5 @@
-export interface ProgressProps {
-  children:
-    | React.ReactElement<React.PropsWithChildren<{ vertical?: boolean }>>
-    | React.ReactElement<React.PropsWithChildren<{ vertical?: boolean }>>[];
-}
+export interface ProgressProps {
+  children:
+    | React.ReactElement<React.PropsWithChildren<{ vertical?: boolean }>>
+    | React.ReactElement<React.PropsWithChildren<{ vertical?: boolean }>>[];
+}