@ssa-ui-kit/core 0.0.21-alpha → 0.0.22-alpha

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,45 +1,45 @@
-import React, { useEffect, useState } from 'react';
-import Button from '@components/Button';
-import Typography from '@components/Typography';
-import { ButtonGroupProps, ButtonGroupItem } from './types';
-import { ButtonItem } from './styles';
-
-export const ButtonGroup = ({
-  items,
-  buttonStyles,
-  selectedItem,
-  externalState = selectedItem || items[0],
-  onClick,
-}: ButtonGroupProps) => {
-  const [activeBtn, setActiveBtn] = useState(selectedItem || items[0]);
-  const handleClick = (item: ButtonGroupItem) => () => {
-    setActiveBtn(item);
-    onClick(item);
-  };
-
-  useEffect(() => {
-    setActiveBtn(externalState);
-  }, [externalState]);
-
-  return (
-    <React.Fragment>
-      {items.map((item) => {
-        const isActive = activeBtn.id === item.id && !item.isDisabled;
-        return (
-          <Button
-            key={item.id}
-            aria-pressed={isActive}
-            variant="secondary"
-            size="small"
-            isDisabled={item.isDisabled}
-            aria-disabled={item.isDisabled}
-            onClick={handleClick(item)}
-            css={[ButtonItem, buttonStyles]}
-            className={isActive ? 'active' : ''}>
-            <Typography variant="body1">{item.text}</Typography>
-          </Button>
-        );
-      })}
-    </React.Fragment>
-  );
-};
+import React, { useEffect, useState } from 'react';
+import Button from '@components/Button';
+import Typography from '@components/Typography';
+import { ButtonGroupProps, ButtonGroupItem } from './types';
+import { ButtonItem } from './styles';
+
+export const ButtonGroup = ({
+  items,
+  buttonStyles,
+  selectedItem,
+  externalState = selectedItem || items[0],
+  onClick,
+}: ButtonGroupProps) => {
+  const [activeBtn, setActiveBtn] = useState(selectedItem || items[0]);
+  const handleClick = (item: ButtonGroupItem) => () => {
+    setActiveBtn(item);
+    onClick(item);
+  };
+
+  useEffect(() => {
+    setActiveBtn(externalState);
+  }, [externalState]);
+
+  return (
+    <React.Fragment>
+      {items.map((item) => {
+        const isActive = activeBtn.id === item.id && !item.isDisabled;
+        return (
+          <Button
+            key={item.id}
+            aria-pressed={isActive}
+            variant="secondary"
+            size="small"
+            isDisabled={item.isDisabled}
+            aria-disabled={item.isDisabled}
+            onClick={handleClick(item)}
+            css={[ButtonItem, buttonStyles]}
+            className={isActive ? 'active' : ''}>
+            <Typography variant="body1">{item.text}</Typography>
+          </Button>
+        );
+      })}
+    </React.Fragment>
+  );
+};

package/src/components/ButtonGroup/helpers.ts

@@ -1,7 +1,7 @@
-import { ButtonGroupItem } from './types';
-
-export const items: Array<ButtonGroupItem> = [
-  { id: 1, text: 'All (10)', isDisabled: false },
-  { id: 2, text: 'Running (117)', isDisabled: false },
-  { id: 3, text: 'Stopped (2)', isDisabled: false },
-];
+import { ButtonGroupItem } from './types';
+
+export const items: Array<ButtonGroupItem> = [
+  { id: 1, text: 'All (10)', isDisabled: false },
+  { id: 2, text: 'Running (117)', isDisabled: false },
+  { id: 3, text: 'Stopped (2)', isDisabled: false },
+];

package/src/components/ButtonGroup/index.ts

@@ -1,2 +1,2 @@
-export { ButtonGroup } from './ButtonGroup';
-export * from './types';
+export { ButtonGroup } from './ButtonGroup';
+export * from './types';

package/src/components/ButtonGroup/stories/ExternalState.tsx

@@ -1,60 +1,60 @@
-import { useState } from 'react';
-import { ButtonGroup } from '../ButtonGroup';
-import { items } from '../helpers';
-import { ButtonGroupItem } from '../types';
-
-export const ExternalStateStory = () => {
-  const [externalState, setExternalState] = useState<ButtonGroupItem>();
-  const handleExternalClick = () => {
-    setExternalState(items[2]);
-  };
-  const handleClick = (item: ButtonGroupItem) => () => {
-    setExternalState(item);
-  };
-  return (
-    <div
-      css={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: 250,
-        gap: 10,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <div
-        css={{
-          width: 250,
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 5,
-        }}>
-        <ButtonGroup
-          items={items}
-          onClick={(item) => handleClick(item)()}
-          externalState={externalState}
-        />
-      </div>
-      <button
-        type="button"
-        onClick={handleExternalClick}
-        css={{
-          border: 'none',
-          background: '#eef1f7',
-          padding: 8,
-          cursor: 'pointer',
-          '&:hover': {
-            background: '#fff',
-          },
-          '&:focus': {
-            background: 'rgb(222, 225, 236)',
-          },
-          '&:active': {
-            background: 'rgb(210, 212, 219)',
-          },
-        }}>
-        Choose &quot;Stopped&quot; tab
-      </button>
-    </div>
-  );
-};
+import { useState } from 'react';
+import { ButtonGroup } from '../ButtonGroup';
+import { items } from '../helpers';
+import { ButtonGroupItem } from '../types';
+
+export const ExternalStateStory = () => {
+  const [externalState, setExternalState] = useState<ButtonGroupItem>();
+  const handleExternalClick = () => {
+    setExternalState(items[2]);
+  };
+  const handleClick = (item: ButtonGroupItem) => () => {
+    setExternalState(item);
+  };
+  return (
+    <div
+      css={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: 250,
+        gap: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <div
+        css={{
+          width: 250,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 5,
+        }}>
+        <ButtonGroup
+          items={items}
+          onClick={(item) => handleClick(item)()}
+          externalState={externalState}
+        />
+      </div>
+      <button
+        type="button"
+        onClick={handleExternalClick}
+        css={{
+          border: 'none',
+          background: '#eef1f7',
+          padding: 8,
+          cursor: 'pointer',
+          '&:hover': {
+            background: '#fff',
+          },
+          '&:focus': {
+            background: 'rgb(222, 225, 236)',
+          },
+          '&:active': {
+            background: 'rgb(210, 212, 219)',
+          },
+        }}>
+        Choose &quot;Stopped&quot; tab
+      </button>
+    </div>
+  );
+};

package/src/components/ButtonGroup/styles.ts

@@ -1,53 +1,53 @@
-import { Theme, css } from '@emotion/react';
-
-export const ButtonItem = (theme: Theme) => css`
-  justify-content: center;
-  min-width: 40px;
-  height: auto;
-  padding: 8px;
-  text-align: center;
-  letter-spacing: 0em;
-  border-radius: 0;
-  box-shadow: none;
-  user-select: none;
-
-  &:hover,
-  &:focus,
-  &:active {
-    box-shadow: none;
-  }
-
-  &:first-of-type {
-    border-radius: 6px 0 0 6px;
-  }
-
-  &:last-child {
-    border-radius: 0 6px 6px 0;
-  }
-
-  &:not(:last-child) {
-    margin-right: 1px;
-  }
-
-  &.active {
-    background: ${theme.colors.greyFocused};
-  }
-
-  &:disabled {
-    background: ${theme.colors.grey};
-
-    p {
-      color: ${theme.colors.grey40};
-    }
-  }
-
-  ${theme.mediaQueries.md} {
-    min-width: 65px;
-    padding: 12px;
-
-    p {
-      font-size: 13.3px;
-      line-height: 15px;
-    }
-  }
-`;
+import { Theme, css } from '@emotion/react';
+
+export const ButtonItem = (theme: Theme) => css`
+  justify-content: center;
+  min-width: 40px;
+  height: auto;
+  padding: 8px;
+  text-align: center;
+  letter-spacing: 0em;
+  border-radius: 0;
+  box-shadow: none;
+  user-select: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+
+  &:first-of-type {
+    border-radius: 6px 0 0 6px;
+  }
+
+  &:last-child {
+    border-radius: 0 6px 6px 0;
+  }
+
+  &:not(:last-child) {
+    margin-right: 1px;
+  }
+
+  &.active {
+    background: ${theme.colors.greyFocused};
+  }
+
+  &:disabled {
+    background: ${theme.colors.grey};
+
+    p {
+      color: ${theme.colors.grey40};
+    }
+  }
+
+  ${theme.mediaQueries.md} {
+    min-width: 65px;
+    padding: 12px;
+
+    p {
+      font-size: 13.3px;
+      line-height: 15px;
+    }
+  }
+`;

package/src/components/ButtonGroup/types.ts

@@ -1,15 +1,15 @@
-import { SerializedStyles } from '@emotion/react';
-
-export type ButtonGroupItem = {
-  id: string | number;
-  text: string;
-  isDisabled?: boolean;
-};
-
-export interface ButtonGroupProps {
-  items: Array<ButtonGroupItem>;
-  selectedItem?: ButtonGroupItem;
-  externalState?: ButtonGroupItem;
-  onClick: (item: ButtonGroupItem) => void;
-  buttonStyles?: SerializedStyles;
-}
+import { SerializedStyles } from '@emotion/react';
+
+export type ButtonGroupItem = {
+  id: string | number;
+  text: string;
+  isDisabled?: boolean;
+};
+
+export interface ButtonGroupProps {
+  items: Array<ButtonGroupItem>;
+  selectedItem?: ButtonGroupItem;
+  externalState?: ButtonGroupItem;
+  onClick: (item: ButtonGroupItem) => void;
+  buttonStyles?: SerializedStyles;
+}

package/src/components/Card/Card.spec.tsx

@@ -1,94 +1,94 @@
-import { userEvent } from '@storybook/testing-library';
-import { screen } from '../../../customTest';
-
-import Icon from '@components/Icon';
-import CardContent from '@components/CardContent';
-import CardHeader from '@components/CardHeader';
-
-import Card from './index';
-
-describe('Card', () => {
-  it('Render Card', () => {
-    render(
-      <div>
-        <Card>
-          <CardHeader>
-            <h2>Card</h2>
-          </CardHeader>
-          <CardContent>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
-              eleifend, dui in commodo porttitor, neque metus lobortis sem, at
-              suscipit arcu ligula non enim.
-            </p>
-          </CardContent>
-        </Card>
-      </div>,
-    );
-
-    const cardHeader = screen.getByText(/card/i).closest('div');
-
-    expect(cardHeader).toHaveStyle('background: inherit');
-  });
-
-  it('Render Card with icon header', async () => {
-    render(
-      <div>
-        <Card>
-          <CardHeader icon={<Icon name="calendar" size={57} />}>
-            <h2>Card</h2>
-          </CardHeader>
-          <CardContent>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
-              eleifend, dui in commodo porttitor, neque metus lobortis sem, at
-              suscipit arcu ligula non enim.
-            </p>
-          </CardContent>
-        </Card>
-      </div>,
-    );
-
-    const icon = await screen.findByTitle(/calendar/i);
-
-    expect(icon).toBeInTheDocument();
-  });
-
-  it('Render Card with transparent header', () => {
-    render(
-      <div>
-        <CardHeader transparent>
-          <h2>Card</h2>
-        </CardHeader>
-        <Card>
-          <CardContent>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
-              eleifend, dui in commodo porttitor, neque metus lobortis sem, at
-              suscipit arcu ligula non enim.
-            </p>
-          </CardContent>
-        </Card>
-      </div>,
-    );
-
-    const cardHeader = screen.getByText(/card/i).closest('div');
-
-    expect(cardHeader).toHaveStyle('background: transparent');
-  });
-
-  it('Handles click on a Card', async () => {
-    const onClick = jest.fn();
-    render(
-      <Card onClick={onClick}>
-        <CardHeader>Header</CardHeader>
-        <CardContent>Content</CardContent>
-      </Card>,
-    );
-
-    const cardBtnEl = screen.getByRole('button', { name: 'Header Content' });
-    await userEvent.click(cardBtnEl);
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-});
+import { userEvent } from '@storybook/testing-library';
+import { screen } from '../../../customTest';
+
+import Icon from '@components/Icon';
+import CardContent from '@components/CardContent';
+import CardHeader from '@components/CardHeader';
+
+import Card from './index';
+
+describe('Card', () => {
+  it('Render Card', () => {
+    render(
+      <div>
+        <Card>
+          <CardHeader>
+            <h2>Card</h2>
+          </CardHeader>
+          <CardContent>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+              eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+              suscipit arcu ligula non enim.
+            </p>
+          </CardContent>
+        </Card>
+      </div>,
+    );
+
+    const cardHeader = screen.getByText(/card/i).closest('div');
+
+    expect(cardHeader).toHaveStyle('background: inherit');
+  });
+
+  it('Render Card with icon header', async () => {
+    render(
+      <div>
+        <Card>
+          <CardHeader icon={<Icon name="calendar" size={57} />}>
+            <h2>Card</h2>
+          </CardHeader>
+          <CardContent>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+              eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+              suscipit arcu ligula non enim.
+            </p>
+          </CardContent>
+        </Card>
+      </div>,
+    );
+
+    const icon = await screen.findByTitle(/calendar/i);
+
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Render Card with transparent header', () => {
+    render(
+      <div>
+        <CardHeader transparent>
+          <h2>Card</h2>
+        </CardHeader>
+        <Card>
+          <CardContent>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+              eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+              suscipit arcu ligula non enim.
+            </p>
+          </CardContent>
+        </Card>
+      </div>,
+    );
+
+    const cardHeader = screen.getByText(/card/i).closest('div');
+
+    expect(cardHeader).toHaveStyle('background: transparent');
+  });
+
+  it('Handles click on a Card', async () => {
+    const onClick = jest.fn();
+    render(
+      <Card onClick={onClick}>
+        <CardHeader>Header</CardHeader>
+        <CardContent>Content</CardContent>
+      </Card>,
+    );
+
+    const cardBtnEl = screen.getByRole('button', { name: 'Header Content' });
+    await userEvent.click(cardBtnEl);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});