npm - @transferwise/components - Versions diffs - 46.64.0 → 46.65.0 - Mend

@transferwise/components 46.64.0 → 46.65.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/build/common/bottomSheet/BottomSheet.js +8 -2
package/build/common/bottomSheet/BottomSheet.js.map +1 -1
package/build/common/bottomSheet/BottomSheet.mjs +8 -2
package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
package/build/drawer/Drawer.js +5 -3
package/build/drawer/Drawer.js.map +1 -1
package/build/drawer/Drawer.mjs +5 -3
package/build/drawer/Drawer.mjs.map +1 -1
package/build/flowNavigation/FlowNavigation.js +1 -1
package/build/flowNavigation/FlowNavigation.js.map +1 -1
package/build/flowNavigation/FlowNavigation.mjs +1 -1
package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
package/build/flowNavigation/animatedLabel/AnimatedLabel.js +89 -15
package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map +1 -1
package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs +90 -16
package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs.map +1 -1
package/build/main.css +10 -1
package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +10 -1
package/build/styles/main.css +10 -1
package/build/switch/Switch.js +3 -27
package/build/switch/Switch.js.map +1 -1
package/build/switch/Switch.mjs +3 -27
package/build/switch/Switch.mjs.map +1 -1
package/build/types/common/bottomSheet/BottomSheet.d.ts +3 -3
package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
package/build/types/drawer/Drawer.d.ts +4 -3
package/build/types/drawer/Drawer.d.ts.map +1 -1
package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts +3 -3
package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts.map +1 -1
package/build/types/switch/Switch.d.ts.map +1 -1
package/package.json +3 -3
package/src/common/bottomSheet/BottomSheet.tsx +13 -4
package/src/drawer/Drawer.tsx +7 -5
package/src/flowNavigation/FlowNavigation.story.js +69 -17
package/src/flowNavigation/FlowNavigation.tsx +1 -5
package/src/flowNavigation/animatedLabel/AnimatedLabel.css +10 -1
package/src/flowNavigation/animatedLabel/AnimatedLabel.less +10 -1
package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js +64 -27
package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx +102 -20
package/src/main.css +10 -1
package/src/switch/Switch.story.tsx +4 -7
package/src/switch/Switch.tsx +1 -24
package/src/switch/__snapshots__/Switch.spec.tsx.snap +2 -44
package/src/flowNavigation/animatedLabel/__snapshots__/AnimatedLabel.spec.js.snap +0 -25

package/src/flowNavigation/FlowNavigation.story.js CHANGED Viewed

@@ -6,11 +6,14 @@ import Avatar, { AvatarType } from '../avatar';
 import AvatarWrapper from '../avatarWrapper';
 import Body from '../body';
 import Button from '../button';
-import { ProfileType, Size } from '../common';
+import { ProfileType, Size, Typography } from '../common';
 import Logo from '../logo';
 import OverlayHeader from '../overlayHeader';
 import FlowNavigation from './FlowNavigation';
+import { lorem10 } from '../test-utils';
+import Display from '../display';
+import Sticky from '../sticky';
 export default {
   component: FlowNavigation,
@@ -51,26 +54,12 @@ export const Variants = () => {
         steps={[
           {
             label: 'Amount',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>100 GBP</strong>
-                </div>
-                0.2351 ETH
-              </>
-            ),
+            hoverLabel: <strong>100 GBP</strong>,
             onClick: () => setActiveStep(0),
           },
           {
             label: 'You',
-            hoverLabel: (
-              <>
-                <div>
-                  <strong>Elena Durante</strong>
-                </div>
-                elenadurante@test.com
-              </>
-            ),
+            hoverLabel: <>Elena Durante - elenadurante@test.com</>,
             onClick: () => setActiveStep(1),
           },
           { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(2) },
@@ -201,6 +190,69 @@ export const Variants = () => {
   ) : null;
 };
+export const SendFlow = () => {
+  const [activeStep, setActiveStep] = useState(2);
+  const steps = [
+    {
+      label: 'Recipient',
+      onClick: handleStepClick(0),
+    },
+    {
+      label: 'Amount',
+      hoverLabel: (
+        <>
+          You send 100 GBP <br />
+          You get 99.39 GBP{' '}
+        </>
+      ),
+      ...(activeStep > 1 && { onClick: handleStepClick(1) }),
+    },
+    {
+      label: 'Review',
+      ...(activeStep > 2 && { onClick: handleStepClick(2) }),
+    },
+    {
+      label: 'Pay',
+      ...(activeStep > 3 && { onClick: handleStepClick(3) }),
+    },
+  ];
+  function handleStepClick(step) {
+    return () => {
+      setActiveStep(step);
+    };
+  }
+  return (
+    <>
+      <FlowNavigation
+        avatar={
+          <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
+            <ProfileIcon />
+          </Avatar>
+        }
+        logo={<Logo />}
+        activeStep={activeStep}
+        steps={steps}
+        onClose={() => alert('close & move away')}
+        onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+      />
+      <Body className="m-a-3">
+        <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
+        <br />
+        {lorem10}
+      </Body>
+      <Sticky>
+        <div className="d-flex justify-content-center align-items-center p-a-3">
+          <Button disabled={activeStep === 3} block onClick={() => setActiveStep(activeStep + 1)}>
+            Continue
+          </Button>
+        </div>
+      </Sticky>
+    </>
+  );
+};
 export const WithOverlayHeaderComparison = () => {
   const [activeStep, setActiveStep] = useState(4);
   const [closed, setClosed] = useState(false);

package/src/flowNavigation/FlowNavigation.tsx CHANGED Viewed

@@ -71,11 +71,7 @@ const FlowNavigation = ({
               <div className="np-flow-header__left">{logo}</div>
             )}
             {!screenSm && !done && (
-              <AnimatedLabel
-                className="m-x-1"
-                labels={steps.map((step) => step.label)}
-                activeLabel={activeStep}
-              />
+              <AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
             )}
           </>
         }

package/src/flowNavigation/animatedLabel/AnimatedLabel.css CHANGED Viewed

@@ -11,7 +11,7 @@
   transform: translateX(-8px);
   transition: all 0.3s ease-in;
 }
-.np-animated-label--in {
+.np-animated-label--active {
   height: auto;
   opacity: 1;
   position: relative;
@@ -19,3 +19,12 @@
   transform: translateX(0);
   transition: all 0.3s ease-in 0.3s;
 }
+.np-animated-label-option {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-animated-label-option:not(.disabled):hover,
+.np-animated-label-option:not(.disabled):focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}

package/src/flowNavigation/animatedLabel/AnimatedLabel.less CHANGED Viewed

@@ -1,4 +1,5 @@
 @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
+@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 @transition-timing-function: ease-in-out;
 @transition-duration: 0.3s;
@@ -20,7 +21,7 @@
     transition: all @transition-duration ease-in;
   }
-  &--in {
+  &--active {
     height: auto;
     opacity: 1;
     position: relative;
@@ -28,4 +29,12 @@
     transform: translateX(0);
     transition: all @transition-duration ease-in @transition-duration;
   }
+  &-option {
+    border-radius: var(--radius-small);
+    &:not(.disabled):hover,
+    &:not(.disabled):focus-visible {
+      .ring();
+    }
+  }
 }

package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js CHANGED Viewed

@@ -1,53 +1,90 @@
-import { render, screen } from '../../test-utils';
+import { render, screen, mockMatchMedia, userEvent, waitFor } from '../../test-utils';
 import AnimatedLabel from '.';
+mockMatchMedia();
 const props = {
   activeLabel: 0,
-  labels: ['label1', 'label2', 'label3'],
+  steps: [{ label: 'label1' }, { label: 'label2' }, { label: 'label3' }],
 };
 jest.useFakeTimers();
 describe('AnimatedLabel', () => {
-  it('renders all labels', () => {
-    const { container } = render(<AnimatedLabel {...props} />);
-    expect(container).toMatchSnapshot();
-  });
   it('renders only one label with class in', () => {
     const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
-  });
-  it('renders only one label with class out', () => {
-    const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(container.querySelectorAll('.np-animated-label--in')).toHaveLength(1);
+    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
+    expect(container.querySelectorAll('.np-animated-label--active')).toHaveLength(1);
   });
   it('when activeLabel increase it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
     rerender(<AnimatedLabel {...props} activeLabel={1} />);
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
   });
   it('when activeLabel decrease it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} activeLabel={1} />);
-    expect(screen.getByText(props.labels[0])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
     rerender(<AnimatedLabel {...props} activeLabel={0} />);
-    expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[1])).not.toHaveClass('np-animated-label--in');
-    expect(screen.getByText(props.labels[2])).not.toHaveClass('np-animated-label--in');
+    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
+  });
+  it('shows all steps in menu when click on the label', async () => {
+    render(<AnimatedLabel {...props} activeLabel={1} />);
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    userEvent.click(screen.getByRole('button', { name: /label2/i }));
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    expect(screen.getAllByRole('menuitem')).toHaveLength(props.steps.length);
+  });
+  it('switches label when click on one of steps as menu itme', async () => {
+    const handleClick = jest.fn();
+    const handleStepClick = (stepNumber) => {
+      return () => handleClick(stepNumber);
+    };
+    render(
+      <AnimatedLabel
+        {...{
+          activeLabel: 1,
+          steps: [
+            { label: 'label1', onClick: handleStepClick(0) },
+            { label: 'label2', onClick: handleStepClick(1) },
+            { label: 'label3', onClick: handleStepClick(2) },
+          ],
+        }}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /label2/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /label1/i })).not.toBeInTheDocument();
+    userEvent.click(screen.getByRole('button', { name: /label2/i }));
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByRole('menuitem', { name: /label1/i }));
+    await waitFor(() => {
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    });
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(handleClick).toHaveBeenCalledWith(0);
   });
 });

package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx CHANGED Viewed

@@ -1,32 +1,114 @@
 import { clsx } from 'clsx';
-import React from 'react';
+import { useId, useState } from 'react';
-import Body from '../../body';
-import { Typography } from '../../common';
+import type { Step } from '../../stepper/Stepper';
+import BottomSheet from '../../common/bottomSheet';
+import Option from '../../common/Option';
+import { Check, ChevronDown } from '@transferwise/icons';
+import { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';
+import { List } from '../../listItem';
 export interface AnimatedLabelProps {
   activeLabel: number;
   className?: string;
-  labels: readonly React.ReactNode[];
+  steps: readonly Step[];
 }
-const AnimatedLabel = ({ activeLabel, className, labels }: AnimatedLabelProps) => {
+const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {
+  const labelId = useId();
+  const [showSteps, setShowSteps] = useState(false);
+  function handleStepAction(onClick: Step['onClick']) {
+    return () => {
+      setShowSteps(false);
+      onClick?.();
+    };
+  }
   return (
-    <Body type={Typography.BODY_LARGE_BOLD} className={clsx('np-animated-label', className)}>
-      {labels.map((label, index) => {
-        const nextLabel = index - 1;
-        return (
-          <div
-            key={nextLabel}
-            className={clsx('text-xs-center', {
-              'np-animated-label--in text-ellipsis': index === activeLabel,
-            })}
-          >
-            {label}
-          </div>
-        );
-      })}
-    </Body>
+    <OverlayIdProvider open={showSteps}>
+      <OverlayIdContext.Consumer>
+        {(overlayId) => {
+          return (
+            <>
+              <button
+                type="button"
+                id={labelId}
+                aria-haspopup="menu"
+                aria-controls={overlayId}
+                aria-expanded={showSteps}
+                className={clsx(
+                  'np-animated-label',
+                  'btn-unstyled',
+                  'np-text-body-large-bold',
+                  className,
+                )}
+                onClick={() => setShowSteps(true)}
+              >
+                {steps.map(({ label }, index) => {
+                  const isCurrentStep = activeLabel === index;
+                  const previousIndex = index - 1;
+                  return (
+                    <div
+                      key={previousIndex}
+                      aria-hidden={!isCurrentStep}
+                      className={clsx('text-xs-center', 'd-inline-flex', {
+                        'np-animated-label--active text-ellipsis': isCurrentStep,
+                      })}
+                    >
+                      {label} <ChevronDown className="m-l-1" size={24} />
+                    </div>
+                  );
+                })}
+              </button>
+              <BottomSheet
+                role="menu"
+                aria-labelledby={labelId}
+                open={showSteps}
+                onClose={() => setShowSteps(false)}
+              >
+                <List className="m-b-0 p-a-1">
+                  {steps.map((step, index) => {
+                    const isCurrentStep = activeLabel === index;
+                    const isDisabled = activeLabel < index;
+                    const itemId = `step-${index}`;
+                    return (
+                      <Option
+                        key={itemId}
+                        id={itemId}
+                        as="li"
+                        role="menuitem"
+                        decision={false}
+                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {
+                          clickable: !isDisabled,
+                        })}
+                        title={step.label}
+                        content={step.hoverLabel}
+                        button={isCurrentStep ? <Check size={24} /> : null}
+                        aria-current={isCurrentStep ? 'step' : false}
+                        aria-disabled={isDisabled}
+                        disabled={isDisabled}
+                        isContainerAligned
+                        {...(!isDisabled && {
+                          tabIndex: 0,
+                          onClick: handleStepAction(step.onClick),
+                          onKeyDown: (event) => {
+                            event.preventDefault();
+                            if (event.code === 'Enter' || event.code === 'Space') {
+                              handleStepAction(step.onClick)();
+                            }
+                          },
+                        })}
+                      />
+                    );
+                  })}
+                </List>
+              </BottomSheet>
+            </>
+          );
+        }}
+      </OverlayIdContext.Consumer>
+    </OverlayIdProvider>
   );
 };

package/src/main.css CHANGED Viewed

@@ -2098,7 +2098,7 @@ button.np-option {
   transform: translateX(-8px);
   transition: all 0.15s ease-in;
 }
-.np-animated-label--in {
+.np-animated-label--active {
   height: auto;
   opacity: 1;
   position: relative;
@@ -2106,6 +2106,15 @@ button.np-option {
   transform: translateX(0);
   transition: all 0.15s ease-in 0.15s;
 }
+.np-animated-label-option {
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+}
+.np-animated-label-option:not(.disabled):hover,
+.np-animated-label-option:not(.disabled):focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .np-back-button {
   color: #00a2dd;
   color: var(--color-interactive-accent);

package/src/switch/Switch.story.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ export default {
 export const Basic = () => {
   const [checked1, setCheck1] = useState(false);
-  const [checked2, setCheck2] = useState(false);
+  const [checked2, setCheck2] = useState(true);
   return (
     <div className="d-flex flex-column">
@@ -22,11 +22,10 @@ export const Basic = () => {
           onClick={() => setCheck1(!checked1)}
         />
       </Field>
       <Switch
-        checked={checked2}
-        className="a-class-name m-t-4"
         aria-label="I'm a switch without label"
+        checked={checked2}
+        className="a-class-name"
         onClick={() => setCheck2(!checked2)}
       />
     </div>
@@ -43,17 +42,15 @@ export const Disabled = () => {
           checked={checked}
           disabled
           className="a-class-name"
-          aria-labelledby="labelID"
           id="switchId"
           onClick={() => setCheck(!checked)}
         />
       </Field>
       <Switch
+        aria-label="I'm a switch without label"
         checked={!checked}
         disabled
         className="a-class-name"
-        aria-labelledby="labelID"
         id="switchId1"
         onClick={() => setCheck(!checked)}
       />

package/src/switch/Switch.tsx CHANGED Viewed

@@ -1,5 +1,3 @@
-import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import type { KeyboardEventHandler, MouseEvent } from 'react';
@@ -26,7 +24,6 @@ export type SwitchProps = CommonProps & {
 const Switch = (props: SwitchProps) => {
   const inputAttributes = useInputAttributes({ nonLabelable: true });
-  const { isModern } = useTheme();
   const {
     checked,
     className,
@@ -44,25 +41,6 @@ const Switch = (props: SwitchProps) => {
     }
   };
-  const returnIcon = () => {
-    if (isModern) {
-      return <span className="np-switch--thumb" />;
-    }
-    if (checked) {
-      return (
-        <span className="np-switch--thumb">
-          <CheckCircleFill size={24} />
-        </span>
-      );
-    }
-    return (
-      <span className="np-switch--thumb">
-        <CrossCircleFill size={24} />
-      </span>
-    );
-  };
   const ariaLabelledby =
     (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
@@ -70,7 +48,6 @@ const Switch = (props: SwitchProps) => {
     <span
       className={clsx(
         'np-switch',
         {
           'np-switch--unchecked': !checked,
           'np-switch--checked': checked,
@@ -89,7 +66,7 @@ const Switch = (props: SwitchProps) => {
       onClick={!disabled ? onClick : undefined}
       onKeyDown={!disabled ? handleKeyDown : undefined}
     >
-      {returnIcon()}
+      <span className="np-switch--thumb" />
       <input type="checkbox" checked={checked} readOnly />
     </span>
   );

package/src/switch/__snapshots__/Switch.spec.tsx.snap CHANGED Viewed

@@ -12,28 +12,7 @@ exports[`Switch renders component when checked 1`] = `
   >
     <span
       class="np-switch--thumb"
-    >
-      <span
-        aria-hidden="true"
-        class="tw-icon tw-icon-check-circle-fill "
-        data-testid="check-circle-fill-icon"
-        role="presentation"
-      >
-        <svg
-          fill="currentColor"
-          focusable="false"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M12 22.286c5.68 0 10.286-4.605 10.286-10.286C22.286 6.32 17.68 1.714 12 1.714 6.32 1.714 1.714 6.32 1.714 12c0 5.68 4.605 10.286 10.286 10.286Zm-1.32-5.397 7.712-7.711-1.212-1.213-7.109 7.109-3.465-3.466-1.212 1.212 4.068 4.069a.861.861 0 0 0 1.219 0Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </span>
+    />
     <input
       checked=""
       readonly=""
@@ -55,28 +34,7 @@ exports[`Switch renders component when unchecked 1`] = `
   >
     <span
       class="np-switch--thumb"
-    >
-      <span
-        aria-hidden="true"
-        class="tw-icon tw-icon-cross-circle-fill "
-        data-testid="cross-circle-fill-icon"
-        role="presentation"
-      >
-        <svg
-          fill="currentColor"
-          focusable="false"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M1.714 12C1.714 6.344 6.343 1.716 12 1.716S22.286 6.343 22.286 12c0 5.657-4.629 10.285-10.286 10.285S1.714 17.658 1.714 12.001ZM12 10.8l4.243-4.244 1.2 1.2L13.2 12l4.243 4.243-1.2 1.2L12 13.2l-4.243 4.243-1.2-1.2L10.8 12 6.557 7.756l1.2-1.2L12 10.8Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </span>
-    </span>
+    />
     <input
       readonly=""
       type="checkbox"

package/src/flowNavigation/animatedLabel/__snapshots__/AnimatedLabel.spec.js.snap DELETED Viewed

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`AnimatedLabel renders all labels 1`] = `
-<div>
-  <div
-    class="np-text-body-large-bold np-animated-label"
-  >
-    <div
-      class="text-xs-center np-animated-label--in text-ellipsis"
-    >
-      label1
-    </div>
-    <div
-      class="text-xs-center"
-    >
-      label2
-    </div>
-    <div
-      class="text-xs-center"
-    >
-      label3
-    </div>
-  </div>
-</div>
-`;