@ssa-ui-kit/widgets 0.0.13-alpha → 0.0.15-alpha

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%;
+`;

package/src/components/Bmi/BmiLabels.tsx

@@ -1,33 +1,33 @@
-import { css } from '@emotion/react';
-
-import { BmiLabel } from './BmiLabel';
-
-export const BmiLabels = () => (
-  <div
-    css={css`
-      position: relative;
-      margin-top: 5px;
-    `}>
-    <BmiLabel
-      variant={'subtitle'}
-      css={css`
-        left: 20%;
-      `}>
-      18.5
-    </BmiLabel>
-    <BmiLabel
-      variant={'subtitle'}
-      css={css`
-        left: 60%;
-      `}>
-      25
-    </BmiLabel>
-    <BmiLabel
-      variant={'subtitle'}
-      css={css`
-        left: 80%;
-      `}>
-      30
-    </BmiLabel>
-  </div>
-);
+import { css } from '@emotion/react';
+
+import { BmiLabel } from './BmiLabel';
+
+export const BmiLabels = () => (
+  <div
+    css={css`
+      position: relative;
+      margin-top: 5px;
+    `}>
+    <BmiLabel
+      variant={'subtitle'}
+      css={css`
+        left: 20%;
+      `}>
+      18.5
+    </BmiLabel>
+    <BmiLabel
+      variant={'subtitle'}
+      css={css`
+        left: 60%;
+      `}>
+      25
+    </BmiLabel>
+    <BmiLabel
+      variant={'subtitle'}
+      css={css`
+        left: 80%;
+      `}>
+      30
+    </BmiLabel>
+  </div>
+);

package/src/components/Bmi/BmiPointer.tsx

@@ -1,15 +1,15 @@
-import styled from '@emotion/styled';
-
-export const BmiPointer = styled.div<{ percentage: number }>`
-  position: absolute;
-
-  left: ${({ percentage }) => percentage}%;
-  top: 0;
-
-  width: 14px;
-  height: 14px;
-
-  background: #2b2d31;
-  box-shadow: -4px 4px 10px rgba(42, 48, 57, 0.2);
-  border-radius: 19px;
-`;
+import styled from '@emotion/styled';
+
+export const BmiPointer = styled.div<{ percentage: number }>`
+  position: absolute;
+
+  left: ${({ percentage }) => percentage}%;
+  top: 0;
+
+  width: 14px;
+  height: 14px;
+
+  background: #2b2d31;
+  box-shadow: -4px 4px 10px rgba(42, 48, 57, 0.2);
+  border-radius: 19px;
+`;

package/src/components/Bmi/index.tsx

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

package/src/components/Bmi/styles.ts

@@ -1,18 +1,18 @@
-import { css, Theme } from '@emotion/react';
-
-export const TitleWrapper = (theme: Theme) => css`
-  display: flex;
-
-  h6 {
-    line-height: 1.625rem;
-    margin-left: 10px;
-
-    color: ${theme.colors.greyDarker60};
-  }
-`;
-
-export const ContentWrapper = css`
-  position: relative;
-  width: 100%;
-  padding-top: 20px;
-`;
+import { css, Theme } from '@emotion/react';
+
+export const TitleWrapper = (theme: Theme) => css`
+  display: flex;
+
+  h6 {
+    line-height: 1.625rem;
+    margin-left: 10px;
+
+    color: ${theme.colors.greyDarker60};
+  }
+`;
+
+export const ContentWrapper = css`
+  position: relative;
+  width: 100%;
+  padding-top: 20px;
+`;

package/src/components/Bmi/types.ts

@@ -1,4 +1,4 @@
-export interface BmiProps {
-  height?: number;
-  weight?: number;
-}
+export interface BmiProps {
+  height?: number;
+  weight?: number;
+}