@ssa-ui-kit/core 0.0.17-alpha → 0.0.18-alpha

package/src/components/StepLabel/StepLabel.tsx

@@ -1,65 +1,65 @@
-import React from 'react';
-
-import Icon from '@components/Icon';
-import { useStepperContext } from '@components/Stepper';
-import { useStepContext } from '@components/Step';
-
-import {
-  label,
-  labelIcon,
-  labelIconVertical,
-  labelText,
-  labelTitle,
-} from './styles';
-import { useTheme } from '@emotion/react';
-
-const StepLabel = ({
-  children,
-  StepIcon,
-}: {
-  children?: React.ReactNode;
-  StepIcon?: React.FC<{ index: number; completed: boolean; active: boolean }>;
-}) => {
-  const theme = useTheme();
-  const { orientation, color } = useStepperContext();
-  const { index, active, completed } = useStepContext();
-
-  const styleIcon = orientation === 'vertical' ? labelIconVertical : labelIcon;
-
-  return (
-    <div
-      role="listitem"
-      css={label}
-      style={{
-        flexDirection: orientation === 'vertical' ? 'row' : 'column',
-      }}>
-      <div css={styleIcon}>
-        {/* If user set a custom icon, overwrite default */}
-        {StepIcon ? (
-          <StepIcon index={index} completed={completed} active={completed} />
-        ) : completed ? (
-          <Icon name="check" size={16} color={color} />
-        ) : (
-          <div
-            css={labelTitle(
-              active || completed
-                ? color
-                : (theme.colors.greyLighter as string),
-            )}>
-            <span
-              style={{
-                color:
-                  active || completed ? theme.colors.white : theme.colors.grey,
-              }}>
-              {index + 1}
-            </span>
-          </div>
-        )}
-      </div>
-
-      <div css={labelText}>{children}</div>
-    </div>
-  );
-};
-
-export default StepLabel;
+import React from 'react';
+
+import Icon from '@components/Icon';
+import { useStepperContext } from '@components/Stepper';
+import { useStepContext } from '@components/Step';
+
+import {
+  label,
+  labelIcon,
+  labelIconVertical,
+  labelText,
+  labelTitle,
+} from './styles';
+import { useTheme } from '@emotion/react';
+
+const StepLabel = ({
+  children,
+  StepIcon,
+}: {
+  children?: React.ReactNode;
+  StepIcon?: React.FC<{ index: number; completed: boolean; active: boolean }>;
+}) => {
+  const theme = useTheme();
+  const { orientation, color } = useStepperContext();
+  const { index, active, completed } = useStepContext();
+
+  const styleIcon = orientation === 'vertical' ? labelIconVertical : labelIcon;
+
+  return (
+    <div
+      role="listitem"
+      css={label}
+      style={{
+        flexDirection: orientation === 'vertical' ? 'row' : 'column',
+      }}>
+      <div css={styleIcon}>
+        {/* If user set a custom icon, overwrite default */}
+        {StepIcon ? (
+          <StepIcon index={index} completed={completed} active={completed} />
+        ) : completed ? (
+          <Icon name="check" size={16} color={color} />
+        ) : (
+          <div
+            css={labelTitle(
+              active || completed
+                ? color
+                : (theme.colors.greyLighter as string),
+            )}>
+            <span
+              style={{
+                color:
+                  active || completed ? theme.colors.white : theme.colors.grey,
+              }}>
+              {index + 1}
+            </span>
+          </div>
+        )}
+      </div>
+
+      <div css={labelText}>{children}</div>
+    </div>
+  );
+};
+
+export default StepLabel;

package/src/components/StepLabel/index.ts

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

package/src/components/StepLabel/styles.ts

@@ -1,38 +1,38 @@
-import { css } from '@emotion/react';
-
-export const label = css`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-`;
-export const labelIcon = css`
-  display: flex;
-  height: 22px;
-
-  align-items: center;
-`;
-export const labelIconVertical = css`
-  display: flex;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-
-  width: 24px;
-  height: 24px;
-
-  margin-right: 5px;
-`;
-export const labelText = css`
-  text-align: center;
-`;
-export const labelTitle = (color: string) => css`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 24px;
-  height: 24px;
-
-  border-radius: 50%;
-  background-color: ${color};
-`;
+import { css } from '@emotion/react';
+
+export const label = css`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`;
+export const labelIcon = css`
+  display: flex;
+  height: 22px;
+
+  align-items: center;
+`;
+export const labelIconVertical = css`
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+
+  width: 24px;
+  height: 24px;
+
+  margin-right: 5px;
+`;
+export const labelText = css`
+  text-align: center;
+`;
+export const labelTitle = (color: string) => css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 24px;
+  height: 24px;
+
+  border-radius: 50%;
+  background-color: ${color};
+`;

package/src/components/Stepper/Stepper.context.ts

@@ -1,16 +1,16 @@
-import * as React from 'react';
-
-import { StepperContextType } from './types';
-
-const StepperContext = React.createContext<StepperContextType>({
-  activeStep: 0,
-  orientation: 'horizontal',
-  color: 'grey',
-  inverted: false,
-});
-
-export function useStepperContext(): StepperContextType {
-  return React.useContext(StepperContext);
-}
-
-export default StepperContext;
+import * as React from 'react';
+
+import { StepperContextType } from './types';
+
+const StepperContext = React.createContext<StepperContextType>({
+  activeStep: 0,
+  orientation: 'horizontal',
+  color: 'grey',
+  inverted: false,
+});
+
+export function useStepperContext(): StepperContextType {
+  return React.useContext(StepperContext);
+}
+
+export default StepperContext;

package/src/components/Stepper/Stepper.spec.tsx

@@ -1,128 +1,128 @@
-import { Matcher, screen, waitFor, within } from '@testing-library/dom';
-
-import Stepper from './index';
-import Step from '@components/Step';
-import StepLabel from '@components/StepLabel';
-
-const getCheckIcon = async (query: Matcher) => {
-  const item = await screen.findByText(query);
-  const icon = item.parentNode as HTMLElement;
-
-  const checkIcon = await within(icon).queryByTitle(/check/i);
-
-  return checkIcon;
-};
-
-describe('Stepper', () => {
-  it('Default stepper with 1 item check', async () => {
-    const steps = ['itemA', 'itemB'];
-
-    render(
-      <Stepper activeStep={1}>
-        {steps.map((step, index) => {
-          return (
-            <Step key={index}>
-              <StepLabel>{step}</StepLabel>
-            </Step>
-          );
-        })}
-      </Stepper>,
-    );
-
-    await waitFor(async () => {
-      const stepper = await screen.findByTestId('stepper');
-
-      expect(stepper).toHaveStyle('flex-direction: row');
-
-      await screen.findByText(/itemA/i);
-      await screen.findByText(/itemB/i);
-
-      const itemA = await screen.findByText(/itemA/i);
-      const iconA = itemA.parentNode as HTMLElement;
-
-      await within(iconA).findByTitle(/check/i);
-
-      const itemB = await screen.findByText(/itemB/i);
-      const iconB = itemB.parentNode as HTMLElement;
-
-      const checkIconB = await within(iconB).queryByTitle(/check/i);
-
-      expect(checkIconB).not.toBeInTheDocument();
-    });
-  });
-
-  it('Default stepper with no item check', async () => {
-    const steps = ['itemA', 'itemB'];
-
-    render(
-      <Stepper activeStep={0}>
-        {steps.map((step, index) => {
-          return (
-            <Step key={index}>
-              <StepLabel>{step}</StepLabel>
-            </Step>
-          );
-        })}
-      </Stepper>,
-    );
-
-    const checkIconA = await getCheckIcon(/itemA/i);
-
-    expect(checkIconA).not.toBeInTheDocument();
-
-    const checkIconB = await getCheckIcon(/itemB/i);
-
-    expect(checkIconB).not.toBeInTheDocument();
-  });
-
-  it('Vertical stepper with 2 item check', async () => {
-    const steps = ['itemA', 'itemB'];
-
-    render(
-      <Stepper activeStep={1} orientation="vertical">
-        {steps.map((step, index) => {
-          return (
-            <Step key={index}>
-              <StepLabel>{step}</StepLabel>
-            </Step>
-          );
-        })}
-      </Stepper>,
-    );
-
-    await waitFor(async () => {
-      const stepper = await screen.findByTestId('stepper');
-
-      expect(stepper).toHaveStyle('flex-direction: column');
-
-      await screen.findByText(/itemA/i);
-      await screen.findByText(/itemB/i);
-
-      await getCheckIcon(/itemA/i);
-      await getCheckIcon(/itemB/i);
-    });
-  });
-
-  it('Stepper with inverted items', async () => {
-    const steps = ['itemA', 'itemB'];
-
-    render(
-      <Stepper activeStep={1} inverted>
-        {steps.map((step, index) => {
-          return (
-            <Step key={index}>
-              <StepLabel>{step}</StepLabel>
-            </Step>
-          );
-        })}
-      </Stepper>,
-    );
-
-    await waitFor(async () => {
-      const [topItem, bottomItem] = await screen.queryAllByText(/item/i);
-
-      expect(topItem).toHaveTextContent(/itemB/i);
-      expect(bottomItem).toHaveTextContent(/itemA/i);
-    });
-  });
-});
+import { Matcher, screen, waitFor, within } from '@testing-library/dom';
+
+import Stepper from './index';
+import Step from '@components/Step';
+import StepLabel from '@components/StepLabel';
+
+const getCheckIcon = async (query: Matcher) => {
+  const item = await screen.findByText(query);
+  const icon = item.parentNode as HTMLElement;
+
+  const checkIcon = await within(icon).queryByTitle(/check/i);
+
+  return checkIcon;
+};
+
+describe('Stepper', () => {
+  it('Default stepper with 1 item check', async () => {
+    const steps = ['itemA', 'itemB'];
+
+    render(
+      <Stepper activeStep={1}>
+        {steps.map((step, index) => {
+          return (
+            <Step key={index}>
+              <StepLabel>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>,
+    );
+
+    await waitFor(async () => {
+      const stepper = await screen.findByTestId('stepper');
+
+      expect(stepper).toHaveStyle('flex-direction: row');
+
+      await screen.findByText(/itemA/i);
+      await screen.findByText(/itemB/i);
+
+      const itemA = await screen.findByText(/itemA/i);
+      const iconA = itemA.parentNode as HTMLElement;
+
+      await within(iconA).findByTitle(/check/i);
+
+      const itemB = await screen.findByText(/itemB/i);
+      const iconB = itemB.parentNode as HTMLElement;
+
+      const checkIconB = await within(iconB).queryByTitle(/check/i);
+
+      expect(checkIconB).not.toBeInTheDocument();
+    });
+  });
+
+  it('Default stepper with no item check', async () => {
+    const steps = ['itemA', 'itemB'];
+
+    render(
+      <Stepper activeStep={0}>
+        {steps.map((step, index) => {
+          return (
+            <Step key={index}>
+              <StepLabel>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>,
+    );
+
+    const checkIconA = await getCheckIcon(/itemA/i);
+
+    expect(checkIconA).not.toBeInTheDocument();
+
+    const checkIconB = await getCheckIcon(/itemB/i);
+
+    expect(checkIconB).not.toBeInTheDocument();
+  });
+
+  it('Vertical stepper with 2 item check', async () => {
+    const steps = ['itemA', 'itemB'];
+
+    render(
+      <Stepper activeStep={1} orientation="vertical">
+        {steps.map((step, index) => {
+          return (
+            <Step key={index}>
+              <StepLabel>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>,
+    );
+
+    await waitFor(async () => {
+      const stepper = await screen.findByTestId('stepper');
+
+      expect(stepper).toHaveStyle('flex-direction: column');
+
+      await screen.findByText(/itemA/i);
+      await screen.findByText(/itemB/i);
+
+      await getCheckIcon(/itemA/i);
+      await getCheckIcon(/itemB/i);
+    });
+  });
+
+  it('Stepper with inverted items', async () => {
+    const steps = ['itemA', 'itemB'];
+
+    render(
+      <Stepper activeStep={1} inverted>
+        {steps.map((step, index) => {
+          return (
+            <Step key={index}>
+              <StepLabel>{step}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>,
+    );
+
+    await waitFor(async () => {
+      const [topItem, bottomItem] = await screen.queryAllByText(/item/i);
+
+      expect(topItem).toHaveTextContent(/itemB/i);
+      expect(bottomItem).toHaveTextContent(/itemA/i);
+    });
+  });
+});