@ssa-ui-kit/widgets 0.0.18-alpha → 0.0.20-alpha

package/src/components/AddNewAccountCard/AddNewAccountCard.stories.tsx

@@ -1,48 +1,48 @@
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { Meta, StoryObj } from '@storybook/react';
-import { AddNewAccountCard } from './AddNewAccountCard';
-import { Icon, mainTheme } from '@ssa-ui-kit/core';
-
-export default {
-  title: 'Widgets/AddNewAccountCard',
-  component: AddNewAccountCard,
-} as Meta<typeof AddNewAccountCard>;
-
-export const Default: StoryObj<typeof AddNewAccountCard> = () => {
-  return (
-    <div css={{ width: '100%', maxWidth: '500px' }}>
-      <AddNewAccountCard onClick={() => alert('Clicked!')}>
-        <Icon name="plus" size={12} color={mainTheme.colors.blueRoyal} />
-        Add new account
-      </AddNewAccountCard>
-    </div>
-  );
-};
-
-Default.args = {};
-
-export const WithLink: StoryObj<typeof AddNewAccountCard> = () => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route
-          path="/*"
-          element={
-            <div css={{ width: '100%', maxWidth: '500px' }}>
-              <AddNewAccountCard link="/link">
-                <Icon
-                  name="plus"
-                  size={12}
-                  color={mainTheme.colors.blueRoyal}
-                />
-                Add new account
-              </AddNewAccountCard>
-            </div>
-          }
-        />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-WithLink.args = {};
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import { AddNewAccountCard } from './AddNewAccountCard';
+import { Icon, mainTheme } from '@ssa-ui-kit/core';
+
+export default {
+  title: 'Widgets/AddNewAccountCard',
+  component: AddNewAccountCard,
+} as Meta<typeof AddNewAccountCard>;
+
+export const Default: StoryObj<typeof AddNewAccountCard> = () => {
+  return (
+    <div css={{ width: '100%', maxWidth: '500px' }}>
+      <AddNewAccountCard onClick={() => alert('Clicked!')}>
+        <Icon name="plus" size={12} color={mainTheme.colors.blueRoyal} />
+        Add new account
+      </AddNewAccountCard>
+    </div>
+  );
+};
+
+Default.args = {};
+
+export const WithLink: StoryObj<typeof AddNewAccountCard> = () => {
+  return (
+    <MemoryRouter>
+      <Routes>
+        <Route
+          path="/*"
+          element={
+            <div css={{ width: '100%', maxWidth: '500px' }}>
+              <AddNewAccountCard link="/link">
+                <Icon
+                  name="plus"
+                  size={12}
+                  color={mainTheme.colors.blueRoyal}
+                />
+                Add new account
+              </AddNewAccountCard>
+            </div>
+          }
+        />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+WithLink.args = {};

package/src/components/AddNewAccountCard/AddNewAccountCard.tsx

@@ -1,22 +1,22 @@
-import { Link } from 'react-router-dom';
-import { Card } from '@ssa-ui-kit/core';
-import { AddNewAccountCardProps } from './types';
-import { AccountCard } from './styles';
-
-export const AddNewAccountCard = ({
-  children,
-  link,
-  onClick,
-}: AddNewAccountCardProps) => {
-  return link ? (
-    <Link css={{ textDecoration: 'none' }} to={link} onClick={onClick}>
-      <Card css={AccountCard} noShadow>
-        {children}
-      </Card>
-    </Link>
-  ) : (
-    <Card css={AccountCard} noShadow onClick={onClick}>
-      {children}
-    </Card>
-  );
-};
+import { Link } from 'react-router-dom';
+import { Card } from '@ssa-ui-kit/core';
+import { AddNewAccountCardProps } from './types';
+import { AccountCard } from './styles';
+
+export const AddNewAccountCard = ({
+  children,
+  link,
+  onClick,
+}: AddNewAccountCardProps) => {
+  return link ? (
+    <Link css={{ textDecoration: 'none' }} to={link} onClick={onClick}>
+      <Card css={AccountCard} noShadow>
+        {children}
+      </Card>
+    </Link>
+  ) : (
+    <Card css={AccountCard} noShadow onClick={onClick}>
+      {children}
+    </Card>
+  );
+};

package/src/components/AddNewAccountCard/index.ts

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

package/src/components/AddNewAccountCard/styles.ts

@@ -1,29 +1,29 @@
-import { Theme, css } from '@emotion/react';
-
-export const AccountCard = (theme: Theme) => css`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 21px 10px;
-  color: ${theme.colors.blueRoyal};
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 18px;
-  letter-spacing: 0;
-  border-radius: 20px;
-  padding: 21px 0;
-  background: ${theme.colors.greyLighter};
-  border: 1px solid ${theme.colors.white};
-  box-shadow: 0px 10px 40px 0px ${theme.colors.greyShadow};
-  transition: 0.3s;
-  cursor: pointer;
-
-  &:hover {
-    border: 1px solid ${theme.colors.white};
-    background: ${theme.colors.greyLighter};
-    box-shadow: 5px 5px 20px 0px ${theme.colors.black25};
-  }
-`;
+import { Theme, css } from '@emotion/react';
+
+export const AccountCard = (theme: Theme) => css`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 21px 10px;
+  color: ${theme.colors.blueRoyal};
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: 0;
+  border-radius: 20px;
+  padding: 21px 0;
+  background: ${theme.colors.greyLighter};
+  border: 1px solid ${theme.colors.white};
+  box-shadow: 0px 10px 40px 0px ${theme.colors.greyShadow};
+  transition: 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid ${theme.colors.white};
+    background: ${theme.colors.greyLighter};
+    box-shadow: 5px 5px 20px 0px ${theme.colors.black25};
+  }
+`;

package/src/components/AddNewAccountCard/types.ts

@@ -1,7 +1,7 @@
-import { To } from 'react-router-dom';
-
-export interface AddNewAccountCardProps {
-  children: React.ReactNode;
-  link?: To;
-  onClick?: () => void;
-}
+import { To } from 'react-router-dom';
+
+export interface AddNewAccountCardProps {
+  children: React.ReactNode;
+  link?: To;
+  onClick?: () => void;
+}

package/src/components/Bmi/Bmi.spec.tsx

@@ -1,68 +1,68 @@
-import { screen } from '../../../customTest';
-import Bmi from './index';
-
-describe('BMI', () => {
-  it('Render BMI with default values', () => {
-    render(<Bmi />);
-
-    const calculation = screen.queryByRole('heading', { name: /21.6/i });
-    const info = screen.queryByRole('heading', { name: /you're healthy/i });
-    const pointer = screen.queryByTestId('bmi-pointer');
-
-    expect(calculation).toBeInTheDocument();
-    expect(info).toBeInTheDocument();
-    expect(pointer).toHaveStyle('left: 40%;');
-  });
-
-  it('BMI status healthy', () => {
-    render(<Bmi height={180} weight={66} />);
-
-    const calculation = screen.queryByRole('heading', { name: /20.4/i });
-    const info = screen.queryByRole('heading', { name: /you're healthy/i });
-    const pointer = screen.queryByTestId('bmi-pointer');
-
-    expect(calculation).toBeInTheDocument();
-    expect(info).toBeInTheDocument();
-    expect(pointer).toHaveStyle('left: 40%;');
-  });
-
-  it('BMI status under weight', () => {
-    render(<Bmi height={175} weight={46} />);
-
-    const calculation = screen.queryByRole('heading', { name: /18.5/ });
-    const info = screen.queryByRole('heading', {
-      name: /you're under weight/i,
-    });
-    const pointer = screen.queryByTestId('bmi-pointer');
-
-    expect(calculation).toBeInTheDocument();
-    expect(info).toBeInTheDocument();
-    expect(pointer).toHaveStyle('left: 10%;');
-  });
-
-  it('BMI status overweight', () => {
-    render(<Bmi height={175} weight={86} />);
-
-    const calculation = screen.queryByRole('heading', { name: /28.1/i });
-    const info = screen.queryByRole('heading', {
-      name: /you're overweight/i,
-    });
-    const pointer = screen.queryByTestId('bmi-pointer');
-
-    expect(calculation).toBeInTheDocument();
-    expect(info).toBeInTheDocument();
-    expect(pointer).toHaveStyle('left: 70%;');
-  });
-
-  it('BMI status obese', () => {
-    render(<Bmi height={175} weight={106} />);
-
-    const calculation = screen.queryByRole('heading', { name: /34.6/i });
-    const info = screen.queryByRole('heading', { name: /you're obese/i });
-    const pointer = screen.queryByTestId('bmi-pointer');
-
-    expect(calculation).toBeInTheDocument();
-    expect(info).toBeInTheDocument();
-    expect(pointer).toHaveStyle('left: 90%;');
-  });
-});
+import { screen } from '../../../customTest';
+import Bmi from './index';
+
+describe('BMI', () => {
+  it('Render BMI with default values', () => {
+    render(<Bmi />);
+
+    const calculation = screen.queryByRole('heading', { name: /21.6/i });
+    const info = screen.queryByRole('heading', { name: /you're healthy/i });
+    const pointer = screen.queryByTestId('bmi-pointer');
+
+    expect(calculation).toBeInTheDocument();
+    expect(info).toBeInTheDocument();
+    expect(pointer).toHaveStyle('left: 40%;');
+  });
+
+  it('BMI status healthy', () => {
+    render(<Bmi height={180} weight={66} />);
+
+    const calculation = screen.queryByRole('heading', { name: /20.4/i });
+    const info = screen.queryByRole('heading', { name: /you're healthy/i });
+    const pointer = screen.queryByTestId('bmi-pointer');
+
+    expect(calculation).toBeInTheDocument();
+    expect(info).toBeInTheDocument();
+    expect(pointer).toHaveStyle('left: 40%;');
+  });
+
+  it('BMI status under weight', () => {
+    render(<Bmi height={175} weight={46} />);
+
+    const calculation = screen.queryByRole('heading', { name: /18.5/ });
+    const info = screen.queryByRole('heading', {
+      name: /you're under weight/i,
+    });
+    const pointer = screen.queryByTestId('bmi-pointer');
+
+    expect(calculation).toBeInTheDocument();
+    expect(info).toBeInTheDocument();
+    expect(pointer).toHaveStyle('left: 10%;');
+  });
+
+  it('BMI status overweight', () => {
+    render(<Bmi height={175} weight={86} />);
+
+    const calculation = screen.queryByRole('heading', { name: /28.1/i });
+    const info = screen.queryByRole('heading', {
+      name: /you're overweight/i,
+    });
+    const pointer = screen.queryByTestId('bmi-pointer');
+
+    expect(calculation).toBeInTheDocument();
+    expect(info).toBeInTheDocument();
+    expect(pointer).toHaveStyle('left: 70%;');
+  });
+
+  it('BMI status obese', () => {
+    render(<Bmi height={175} weight={106} />);
+
+    const calculation = screen.queryByRole('heading', { name: /34.6/i });
+    const info = screen.queryByRole('heading', { name: /you're obese/i });
+    const pointer = screen.queryByTestId('bmi-pointer');
+
+    expect(calculation).toBeInTheDocument();
+    expect(info).toBeInTheDocument();
+    expect(pointer).toHaveStyle('left: 90%;');
+  });
+});

package/src/components/Bmi/Bmi.stories.tsx

@@ -1,10 +1,10 @@
-import type { Meta } from '@storybook/react';
-
-import Bmi from './index';
-
-export default {
-  title: 'Widgets/BMI',
-  component: Bmi,
-} as Meta<typeof Bmi>;
-
-export const Default = {};
+import type { Meta } from '@storybook/react';
+
+import Bmi from './index';
+
+export default {
+  title: 'Widgets/BMI',
+  component: Bmi,
+} as Meta<typeof Bmi>;
+
+export const Default = {};

package/src/components/Bmi/Bmi.tsx

@@ -1,96 +1,96 @@
-import { Fragment, useEffect, useState } from 'react';
-import { css } from '@emotion/react';
-
-import { Card, CardContent, CardHeader, Typography } from '@ssa-ui-kit/core';
-
-import { BmiHeatbar } from './BmiHeatbar';
-import { BmiPointer } from './BmiPointer';
-import { BmiInfo } from './BmiInfo';
-import { BmiLabels } from './BmiLabels';
-
-import { ContentWrapper, TitleWrapper } from './styles';
-import { BmiProps } from './types';
-
-/**
- *
- * UI Component that calculates the Body Mass Index of the user
- */
-export const Bmi = ({ height = 175, weight = 66 }: BmiProps) => {
-  const [info, setInfo] = useState('');
-  const [pointer, setPointer] = useState(0);
-
-  const bmi = Number(((weight / (height * height)) * 10000).toFixed(1));
-
-  const setInfos = {
-    underWeight: () => {
-      setInfo('Under Weight');
-      setPointer(10);
-    },
-    healthy: () => {
-      setInfo('Healthy');
-      setPointer(40);
-    },
-    overweight: () => {
-      setInfo('Overweight');
-      setPointer(70);
-    },
-    obese: () => {
-      setInfo('Obese');
-      setPointer(90);
-    },
-  };
-
-  useEffect(() => {
-    if (bmi < 18.5) {
-      setInfos.underWeight();
-    } else if (bmi > 18.5 && bmi <= 24.9) {
-      setInfos.healthy();
-    } else if (bmi > 24.9 && bmi < 30) {
-      setInfos.overweight();
-    } else {
-      setInfos.obese();
-    }
-  }, [bmi]);
-
-  return (
-    <Fragment>
-      <CardHeader transparent>
-        <div css={TitleWrapper}>
-          <Typography variant="h5" weight="bold">
-            BMI{' '}
-          </Typography>
-          <Typography variant="h6">Body Mass Index</Typography>
-        </div>
-      </CardHeader>
-
-      <Card
-        css={css`
-          box-shadow: 0 10px 40px rgba(29, 22, 23, 0.07);
-          border-radius: 16px;
-          padding-bottom: 40px;
-        `}>
-        <CardHeader>
-          <Typography variant="h2" weight="medium">
-            {bmi}
-          </Typography>
-          <BmiInfo>
-            <Typography variant="subtitle" weight="lighter">
-              You&apos;re {info}
-            </Typography>
-          </BmiInfo>
-        </CardHeader>
-
-        <CardContent
-          css={css`
-            width: 100%;
-          `}>
-          <div css={ContentWrapper}>
-            <BmiPointer data-testid="bmi-pointer" percentage={pointer} />
-            <BmiHeatbar />
-            <BmiLabels />
-          </div>
-        </CardContent>
-      </Card>
-    </Fragment>
-  );
-};
+import { Fragment, useEffect, useState } from 'react';
+import { css } from '@emotion/react';
+
+import { Card, CardContent, CardHeader, Typography } from '@ssa-ui-kit/core';
+
+import { BmiHeatbar } from './BmiHeatbar';
+import { BmiPointer } from './BmiPointer';
+import { BmiInfo } from './BmiInfo';
+import { BmiLabels } from './BmiLabels';
+
+import { ContentWrapper, TitleWrapper } from './styles';
+import { BmiProps } from './types';
+
+/**
+ *
+ * UI Component that calculates the Body Mass Index of the user
+ */
+export const Bmi = ({ height = 175, weight = 66 }: BmiProps) => {
+  const [info, setInfo] = useState('');
+  const [pointer, setPointer] = useState(0);
+
+  const bmi = Number(((weight / (height * height)) * 10000).toFixed(1));
+
+  const setInfos = {
+    underWeight: () => {
+      setInfo('Under Weight');
+      setPointer(10);
+    },
+    healthy: () => {
+      setInfo('Healthy');
+      setPointer(40);
+    },
+    overweight: () => {
+      setInfo('Overweight');
+      setPointer(70);
+    },
+    obese: () => {
+      setInfo('Obese');
+      setPointer(90);
+    },
+  };
+
+  useEffect(() => {
+    if (bmi < 18.5) {
+      setInfos.underWeight();
+    } else if (bmi > 18.5 && bmi <= 24.9) {
+      setInfos.healthy();
+    } else if (bmi > 24.9 && bmi < 30) {
+      setInfos.overweight();
+    } else {
+      setInfos.obese();
+    }
+  }, [bmi]);
+
+  return (
+    <Fragment>
+      <CardHeader transparent>
+        <div css={TitleWrapper}>
+          <Typography variant="h5" weight="bold">
+            BMI{' '}
+          </Typography>
+          <Typography variant="h6">Body Mass Index</Typography>
+        </div>
+      </CardHeader>
+
+      <Card
+        css={css`
+          box-shadow: 0 10px 40px rgba(29, 22, 23, 0.07);
+          border-radius: 16px;
+          padding-bottom: 40px;
+        `}>
+        <CardHeader>
+          <Typography variant="h2" weight="medium">
+            {bmi}
+          </Typography>
+          <BmiInfo>
+            <Typography variant="subtitle" weight="lighter">
+              You&apos;re {info}
+            </Typography>
+          </BmiInfo>
+        </CardHeader>
+
+        <CardContent
+          css={css`
+            width: 100%;
+          `}>
+          <div css={ContentWrapper}>
+            <BmiPointer data-testid="bmi-pointer" percentage={pointer} />
+            <BmiHeatbar />
+            <BmiLabels />
+          </div>
+        </CardContent>
+      </Card>
+    </Fragment>
+  );
+};

package/src/components/Bmi/BmiHeatbar.tsx

@@ -1,18 +1,18 @@
-import styled from '@emotion/styled';
-
-export const BmiHeatbar = styled.div`
-  width: 100%;
-  height: 14px;
-
-  background: linear-gradient(
-    90deg,
-    #8b60f4 0%,
-    #658fdf 16.67%,
-    #69cdd0 35.42%,
-    #88e4c3 51.04%,
-    #edba5d 68.23%,
-    #ed8f66 84.38%,
-    #f28689 100%
-  );
-  border-radius: 21px;
-`;
+import styled from '@emotion/styled';
+
+export const BmiHeatbar = styled.div`
+  width: 100%;
+  height: 14px;
+
+  background: linear-gradient(
+    90deg,
+    #8b60f4 0%,
+    #658fdf 16.67%,
+    #69cdd0 35.42%,
+    #88e4c3 51.04%,
+    #edba5d 68.23%,
+    #ed8f66 84.38%,
+    #f28689 100%
+  );
+  border-radius: 21px;
+`;

package/src/components/Bmi/BmiInfo.tsx

@@ -1,11 +1,11 @@
-import styled from '@emotion/styled';
-
-export const BmiInfo = styled.div`
-  display: flex;
-
-  padding: 8px 16px;
-  background: ${({ theme }) => theme.colors.greyLighter};
-  border-radius: 12px;
-
-  align-items: center;
-`;
+import styled from '@emotion/styled';
+
+export const BmiInfo = styled.div`
+  display: flex;
+
+  padding: 8px 16px;
+  background: ${({ theme }) => theme.colors.greyLighter};
+  border-radius: 12px;
+
+  align-items: center;
+`;

package/src/components/Bmi/BmiLabel.tsx

@@ -1,9 +1,9 @@
-import styled from '@emotion/styled';
-
-import { Typography } from '@ssa-ui-kit/core';
-
-export const BmiLabel = styled(Typography)`
-  position: absolute;
-
-  left: 65%;
-`;
+import styled from '@emotion/styled';
+
+import { Typography } from '@ssa-ui-kit/core';
+
+export const BmiLabel = styled(Typography)`
+  position: absolute;
+
+  left: 65%;
+`;