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

package/src/components/PieChart/PieChart.spec.tsx

@@ -1,97 +1,97 @@
-import { css } from '@emotion/react';
-import { MainColors } from '@ssa-ui-kit/core';
-import { within } from '@testing-library/dom';
-import { PieChart, PieChartLegend } from './index';
-import { accountData } from './stories/fixtures';
-
-const colorNames = ['blueLight', 'turquoise'] as unknown as Array<
-  keyof MainColors
->;
-
-const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
-
-jest.mock('@nivo/pie', () => ({
-  PieCustomLayerProps: {},
-  ResponsivePie: ResponsivePieMock,
-}));
-
-describe('PieChart', () => {
-  it('Renders', () => {
-    const { getByTestId, getByRole } = render(
-      <PieChart data={accountData} title={<h1>4578.89</h1>} />,
-    );
-
-    getByTestId('responsive-pie');
-    getByRole('heading', { name: '4578.89' });
-  });
-
-  it('Renders with a Legend', () => {
-    const { getByTestId, getByRole } = render(
-      <PieChart data={accountData} title={<h1>4578.89</h1>}>
-        <PieChartLegend data={accountData} colors={colorNames} />
-      </PieChart>,
-    );
-
-    getByTestId('responsive-pie');
-    getByRole('heading', { name: '4578.89' });
-
-    for (const { label, value } of accountData) {
-      getByRole('heading', { name: label });
-      getByRole('heading', { name: String(value) });
-    }
-  });
-
-  describe('PieChartLegend', () => {
-    it('Renders with customized values and labels', () => {
-      const { getByRole } = render(
-        <PieChart data={accountData} title={<h1>4578.89</h1>}>
-          <PieChartLegend
-            data={accountData}
-            colors={colorNames}
-            renderValue={({ value }) => `1-${value}`}
-            renderLabel={({ label }) => `1-${label}`}
-          />
-        </PieChart>,
-      );
-
-      for (const { label, value } of accountData) {
-        getByRole('heading', { name: `1-${label}` });
-        getByRole('heading', { name: `1-${value}` });
-      }
-    });
-
-    it('Renders with custom styles', () => {
-      const { getAllByRole } = render(
-        <PieChart data={accountData} title={<h1>4578.89</h1>}>
-          <PieChartLegend
-            data={accountData}
-            colors={colorNames}
-            markerStyles={css`
-              background-color: indigo;
-              border-radius: 0;
-            `}
-            labelListStyles={css`
-              background-color: forestgreen;
-            `}
-            valueListStyles={css`
-              background-color: aqua;
-            `}
-          />
-        </PieChart>,
-      );
-
-      const [labelListEl, valueListEl] = getAllByRole('list');
-      expect(labelListEl).toHaveStyle(`background-color: forestgreen`);
-      expect(valueListEl).toHaveStyle(`background-color: aqua `);
-
-      const listItemEls = within(labelListEl).getAllByRole('listitem');
-
-      for (const el of listItemEls) {
-        expect(el.firstChild).toHaveStyle(`
-          background-color: indigo;
-          border-radius: 0;
-        `);
-      }
-    });
-  });
-});
+import { css } from '@emotion/react';
+import { MainColors } from '@ssa-ui-kit/core';
+import { within } from '@testing-library/dom';
+import { PieChart, PieChartLegend } from './index';
+import { accountData } from './stories/fixtures';
+
+const colorNames = ['blueLight', 'turquoise'] as unknown as Array<
+  keyof MainColors
+>;
+
+const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
+
+jest.mock('@nivo/pie', () => ({
+  PieCustomLayerProps: {},
+  ResponsivePie: ResponsivePieMock,
+}));
+
+describe('PieChart', () => {
+  it('Renders', () => {
+    const { getByTestId, getByRole } = render(
+      <PieChart data={accountData} title={<h1>4578.89</h1>} />,
+    );
+
+    getByTestId('responsive-pie');
+    getByRole('heading', { name: '4578.89' });
+  });
+
+  it('Renders with a Legend', () => {
+    const { getByTestId, getByRole } = render(
+      <PieChart data={accountData} title={<h1>4578.89</h1>}>
+        <PieChartLegend data={accountData} colors={colorNames} />
+      </PieChart>,
+    );
+
+    getByTestId('responsive-pie');
+    getByRole('heading', { name: '4578.89' });
+
+    for (const { label, value } of accountData) {
+      getByRole('heading', { name: label });
+      getByRole('heading', { name: String(value) });
+    }
+  });
+
+  describe('PieChartLegend', () => {
+    it('Renders with customized values and labels', () => {
+      const { getByRole } = render(
+        <PieChart data={accountData} title={<h1>4578.89</h1>}>
+          <PieChartLegend
+            data={accountData}
+            colors={colorNames}
+            renderValue={({ value }) => `1-${value}`}
+            renderLabel={({ label }) => `1-${label}`}
+          />
+        </PieChart>,
+      );
+
+      for (const { label, value } of accountData) {
+        getByRole('heading', { name: `1-${label}` });
+        getByRole('heading', { name: `1-${value}` });
+      }
+    });
+
+    it('Renders with custom styles', () => {
+      const { getAllByRole } = render(
+        <PieChart data={accountData} title={<h1>4578.89</h1>}>
+          <PieChartLegend
+            data={accountData}
+            colors={colorNames}
+            markerStyles={css`
+              background-color: indigo;
+              border-radius: 0;
+            `}
+            labelListStyles={css`
+              background-color: forestgreen;
+            `}
+            valueListStyles={css`
+              background-color: aqua;
+            `}
+          />
+        </PieChart>,
+      );
+
+      const [labelListEl, valueListEl] = getAllByRole('list');
+      expect(labelListEl).toHaveStyle(`background-color: forestgreen`);
+      expect(valueListEl).toHaveStyle(`background-color: aqua `);
+
+      const listItemEls = within(labelListEl).getAllByRole('listitem');
+
+      for (const el of listItemEls) {
+        expect(el.firstChild).toHaveStyle(`
+          background-color: indigo;
+          border-radius: 0;
+        `);
+      }
+    });
+  });
+});

package/src/components/PieChart/PieChart.stories.tsx

@@ -1,129 +1,129 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { css, useTheme } from '@emotion/react';
-import { MainColors, Typography } from '@ssa-ui-kit/core';
-
-import { PieChart, PieChartLegend, pieChartPalettes } from './index';
-import { fitnessData, accountData } from './stories/fixtures';
-
-export default {
-  title: 'Widgets/PieChart',
-  component: PieChart,
-} as Meta<typeof PieChart>;
-
-export const FitnessExample: StoryObj<typeof PieChart> = () => {
-  const theme = useTheme();
-  const colorNames = ['blueLight', 'turquoise'] as unknown as Array<
-    keyof MainColors
-  >;
-  const pieChartColors = [
-    theme.colors.blueLighter,
-    theme.colors.turquoise,
-  ] as unknown as string[];
-
-  return (
-    <div style={{ width: '400px' }}>
-      <PieChart
-        data={fitnessData}
-        colors={pieChartColors}
-        animate={false}
-        title={
-          <Typography
-            variant="body2"
-            weight="regular"
-            color={theme.colors.greyDarker60}
-            css={css`
-              font-size: 16px;
-              line-height: 16px;
-              margin-top: -5px;
-            `}>
-            Total
-            <Typography
-              variant="body2"
-              weight="bold"
-              color={theme.colors.greyDarker}
-              css={css`
-                font-size: 27.65px;
-                line-height: 35px;
-              `}>
-              143
-              <Typography
-                variant="body2"
-                weight="regular"
-                as="span"
-                color={theme.colors.greyDarker60}
-                css={css`
-                  font-size: 16px;
-                  font-weight: 600;
-                  margin-left: 3px;
-                `}>
-                hrs
-              </Typography>
-            </Typography>
-          </Typography>
-        }>
-        <PieChartLegend data={fitnessData} colors={colorNames} />
-      </PieChart>
-    </div>
-  );
-};
-FitnessExample.args = {};
-
-export const AccountExample: StoryObj<typeof PieChart> = () => {
-  const theme = useTheme();
-  const { legendColorNames, pieChartColors } =
-    pieChartPalettes.getBalancePalette(theme);
-
-  return (
-    <div style={{ width: '400px' }}>
-      <PieChart
-        data={accountData}
-        colors={pieChartColors}
-        animate={false}
-        title={
-          <Typography
-            variant="body2"
-            weight="bold"
-            color={theme.colors.greyDarker}
-            css={css`
-              font-size: 20px;
-              line-height: 25px;
-            `}>
-            147358 &nbsp;
-            <Typography
-              variant="body2"
-              weight="regular"
-              as="span"
-              color={theme.colors.greyDarker80}
-              css={css`
-                font-size: 14px;
-              `}>
-              USD
-            </Typography>
-          </Typography>
-        }>
-        <PieChartLegend
-          data={accountData}
-          colors={legendColorNames}
-          renderValue={({ value, label }) =>
-            label === 'Other' ? value + ' USD' : value + ' ' + label
-          }
-          markerStyles={css`
-            width: 10px;
-            height: 10px;
-          `}
-          labelListStyles={css`
-            h6 {
-              font-weight: 700;
-            }
-          `}
-          valueListStyles={css`
-            h6 {
-              color: ${theme.colors.greyDarker80};
-            }
-          `}
-        />
-      </PieChart>
-    </div>
-  );
-};
-AccountExample.args = {};
+import type { Meta, StoryObj } from '@storybook/react';
+import { css, useTheme } from '@emotion/react';
+import { MainColors, Typography } from '@ssa-ui-kit/core';
+
+import { PieChart, PieChartLegend, pieChartPalettes } from './index';
+import { fitnessData, accountData } from './stories/fixtures';
+
+export default {
+  title: 'Widgets/PieChart',
+  component: PieChart,
+} as Meta<typeof PieChart>;
+
+export const FitnessExample: StoryObj<typeof PieChart> = () => {
+  const theme = useTheme();
+  const colorNames = ['blueLight', 'turquoise'] as unknown as Array<
+    keyof MainColors
+  >;
+  const pieChartColors = [
+    theme.colors.blueLighter,
+    theme.colors.turquoise,
+  ] as unknown as string[];
+
+  return (
+    <div style={{ width: '400px' }}>
+      <PieChart
+        data={fitnessData}
+        colors={pieChartColors}
+        animate={false}
+        title={
+          <Typography
+            variant="body2"
+            weight="regular"
+            color={theme.colors.greyDarker60}
+            css={css`
+              font-size: 16px;
+              line-height: 16px;
+              margin-top: -5px;
+            `}>
+            Total
+            <Typography
+              variant="body2"
+              weight="bold"
+              color={theme.colors.greyDarker}
+              css={css`
+                font-size: 27.65px;
+                line-height: 35px;
+              `}>
+              143
+              <Typography
+                variant="body2"
+                weight="regular"
+                as="span"
+                color={theme.colors.greyDarker60}
+                css={css`
+                  font-size: 16px;
+                  font-weight: 600;
+                  margin-left: 3px;
+                `}>
+                hrs
+              </Typography>
+            </Typography>
+          </Typography>
+        }>
+        <PieChartLegend data={fitnessData} colors={colorNames} />
+      </PieChart>
+    </div>
+  );
+};
+FitnessExample.args = {};
+
+export const AccountExample: StoryObj<typeof PieChart> = () => {
+  const theme = useTheme();
+  const { legendColorNames, pieChartColors } =
+    pieChartPalettes.getBalancePalette(theme);
+
+  return (
+    <div style={{ width: '400px' }}>
+      <PieChart
+        data={accountData}
+        colors={pieChartColors}
+        animate={false}
+        title={
+          <Typography
+            variant="body2"
+            weight="bold"
+            color={theme.colors.greyDarker}
+            css={css`
+              font-size: 20px;
+              line-height: 25px;
+            `}>
+            147358 &nbsp;
+            <Typography
+              variant="body2"
+              weight="regular"
+              as="span"
+              color={theme.colors.greyDarker80}
+              css={css`
+                font-size: 14px;
+              `}>
+              USD
+            </Typography>
+          </Typography>
+        }>
+        <PieChartLegend
+          data={accountData}
+          colors={legendColorNames}
+          renderValue={({ value, label }) =>
+            label === 'Other' ? value + ' USD' : value + ' ' + label
+          }
+          markerStyles={css`
+            width: 10px;
+            height: 10px;
+          `}
+          labelListStyles={css`
+            h6 {
+              font-weight: 700;
+            }
+          `}
+          valueListStyles={css`
+            h6 {
+              color: ${theme.colors.greyDarker80};
+            }
+          `}
+        />
+      </PieChart>
+    </div>
+  );
+};
+AccountExample.args = {};

package/src/components/PieChart/PieChart.tsx

@@ -1,40 +1,40 @@
-import { ResponsivePie } from '@nivo/pie';
-import { PieChartProps } from './types';
-
-import { PieChartBase, PieChartTextBase } from './PieChartBases';
-
-export const PieChart = ({
-  data,
-  as,
-  className,
-  title,
-  children,
-  ...chartProps
-}: PieChartProps) => {
-  return (
-    <PieChartBase as={as} className={className}>
-      <div className="pie-chart-wrapper">
-        <ResponsivePie
-          data={data}
-          isInteractive={false}
-          innerRadius={0.8}
-          enableArcLinkLabels={false}
-          enableArcLabels={false}
-          padAngle={2}
-          cornerRadius={16}
-          activeOuterRadiusOffset={8}
-          colors={{ datum: 'data.color' }}
-          arcLinkLabelsSkipAngle={10}
-          arcLinkLabelsTextColor="#333333"
-          arcLinkLabelsThickness={2}
-          arcLinkLabelsColor={{ from: 'color' }}
-          arcLabelsSkipAngle={10}
-          layers={['arcs']}
-          {...chartProps}
-        />
-        {title && <PieChartTextBase>{title}</PieChartTextBase>}
-      </div>
-      {children}
-    </PieChartBase>
-  );
-};
+import { ResponsivePie } from '@nivo/pie';
+import { PieChartProps } from './types';
+
+import { PieChartBase, PieChartTextBase } from './PieChartBases';
+
+export const PieChart = ({
+  data,
+  as,
+  className,
+  title,
+  children,
+  ...chartProps
+}: PieChartProps) => {
+  return (
+    <PieChartBase as={as} className={className}>
+      <div className="pie-chart-wrapper">
+        <ResponsivePie
+          data={data}
+          isInteractive={false}
+          innerRadius={0.8}
+          enableArcLinkLabels={false}
+          enableArcLabels={false}
+          padAngle={2}
+          cornerRadius={16}
+          activeOuterRadiusOffset={8}
+          colors={{ datum: 'data.color' }}
+          arcLinkLabelsSkipAngle={10}
+          arcLinkLabelsTextColor="#333333"
+          arcLinkLabelsThickness={2}
+          arcLinkLabelsColor={{ from: 'color' }}
+          arcLabelsSkipAngle={10}
+          layers={['arcs']}
+          {...chartProps}
+        />
+        {title && <PieChartTextBase>{title}</PieChartTextBase>}
+      </div>
+      {children}
+    </PieChartBase>
+  );
+};

package/src/components/PieChart/PieChartBases.tsx

@@ -1,26 +1,26 @@
-import styled from '@emotion/styled';
-
-export const PieChartBase = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-
-  & > .pie-chart-wrapper {
-    position: relative;
-    width: 160px;
-    height: 160px;
-  }
-`;
-
-export const PieChartTextBase = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-`;
+import styled from '@emotion/styled';
+
+export const PieChartBase = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  & > .pie-chart-wrapper {
+    position: relative;
+    width: 160px;
+    height: 160px;
+  }
+`;
+
+export const PieChartTextBase = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+`;