@transferwise/components 0.0.0-experimental-46166ff → 0.0.0-experimental-34deb6d

package/src/flowProgress/FlowProgress.css

@@ -1,185 +0,0 @@
-.wds-flow-progress {
-  position: relative;
-  height: 8px;
-  height: var(--size-8);
-  width: 100%;
-  border-radius: 4px;
-  border-radius: var(--size-4);
-  overflow: hidden;
-  --start: 0%;
-  --end: 0%;
-}
-.wds-flow-progress .track {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-  border-radius: var(--size-4);
-}
-.wds-flow-progress .bar {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: 4px;
-  border-radius: var(--size-4);
-  clip-path: inset(0 calc(100% - var(--end)) 0 var(--start));
-}
-.wds-flow-progress .tapestry {
-  border-radius: 4px;
-  border-radius: var(--size-4);
-  height: 100%;
-  background-repeat: no-repeat;
-  background-size: 100%;
-}
-.wds-flow-progress.light .track {
-  background-color: #E9ECEF;
-}
-.wds-flow-progress.light .tapestry {
-  background-image: url(https://wise.com/public-resources/assets/editorial/section-tapestries/tapestry_05.jpg);
-}
-.wds-flow-progress.dark .track {
-  background-color: #343A40;
-}
-.wds-flow-progress.dark .tapestry {
-  background-image: url(https://wise.com/public-resources/assets/editorial/section-tapestries/tapestry_08.jpg);
-}
-.wds-flow-progress.determinate .bar {
-  animation: determinateAnim 700ms cubic-bezier(0.47, 0, 0.67, 1) forwards;
-}
-.wds-flow-progress.indeterminate .bar {
-  animation: indeterminateAnim 1000ms linear infinite;
-}
-.wds-flow-progress.indeterminate .tapestry.moving {
-  animation: tapestryMove 1500ms linear infinite;
-}
-.wds-flow-progress.scale-in {
-  transform: scaleY(0);
-  animation: scaleIn 330ms cubic-bezier(0.33, 0, 0.23, 1.53) forwards;
-}
-.wds-flow-progress.exiting {
-  animation: exitCollapse 320ms cubic-bezier(0.96, 0, 0.67, 1) forwards;
-}
-@keyframes determinateAnim {
-  0% {
-    --end: 0%;
-  }
-  100% {
-    --end: 100%;
-  }
-}
-@keyframes indeterminateAnim {
-  0% {
-    --start: 0%;
-    --end: 0%;
-  }
-  5% {
-    --start: 0.11%;
-    --end: 1.01%;
-  }
-  10% {
-    --start: 0.47%;
-    --end: 2.55%;
-  }
-  15% {
-    --start: 1.11%;
-    --end: 4.72%;
-  }
-  20% {
-    --start: 2.05%;
-    --end: 7.65%;
-  }
-  25% {
-    --start: 3.35%;
-    --end: 11.53%;
-  }
-  30% {
-    --start: 5.06%;
-    --end: 16.61%;
-  }
-  35% {
-    --start: 7.25%;
-    --end: 23.25%;
-  }
-  40% {
-    --start: 10%;
-    --end: 31.97%;
-  }
-  45% {
-    --start: 13.44%;
-    --end: 43.48%;
-  }
-  50% {
-    --start: 17.72%;
-    --end: 58.19%;
-  }
-  55% {
-    --start: 23.08%;
-    --end: 74.39%;
-  }
-  60% {
-    --start: 29.82%;
-    --end: 87.45%;
-  }
-  65% {
-    --start: 38.39%;
-    --end: 95.26%;
-  }
-  70% {
-    --start: 49.38%;
-    --end: 98.98%;
-  }
-  75% {
-    --start: 63.03%;
-    --end: 100%;
-  }
-  80% {
-    --start: 77.61%;
-    --end: 100%;
-  }
-  85% {
-    --start: 89.1%;
-    --end: 100%;
-  }
-  90% {
-    --start: 95.9%;
-    --end: 100%;
-  }
-  95% {
-    --start: 99.12%;
-    --end: 100%;
-  }
-  100% {
-    --start: 100%;
-    --end: 100%;
-  }
-}
-@keyframes tapestryMove {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-50%);
-  }
-}
-@keyframes scaleIn {
-  0% {
-    transform: scaleY(0);
-  }
-  100% {
-    transform: scaleY(1);
-  }
-}
-@keyframes exitCollapse {
-  0% {
-    height: 8px;
-    height: var(--size-8);
-  }
-  100% {
-    height: 0;
-  }
-}

package/src/flowProgress/FlowProgress.less

@@ -1,126 +0,0 @@
-.wds-flow-progress {
-  position: relative;
-  height: var(--size-8);
-  width: 100%;
-  border-radius: var(--size-4);
-  overflow: hidden;
-
-  .track {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--size-4);
-  }
-
-  .bar {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: var(--size-4);
-    clip-path: inset(0 calc(100% - var(--end)) 0 var(--start));
-  }
-
-    .tapestry {
-      border-radius: var(--size-4);
-      height: 100%;
-      background-repeat: no-repeat;
-      background-size: 100%;
-    }
-
-  &.light {
-    .track {
-      background-color: #E9ECEF;
-    }
-    .tapestry {
-        // TODO: source image from web-art
-        background-image: url(https://wise.com/public-resources/assets/editorial/section-tapestries/tapestry_05.jpg);
-    }
-  }
-
-  &.dark {
-    .track {
-      background-color: #343A40;
-    }
-    .tapestry {
-        // TODO: source image from web-art
-        background-image: url(https://wise.com/public-resources/assets/editorial/section-tapestries/tapestry_08.jpg);
-    }
-  }
-
-  --start: 0%;
-  --end: 0%;
-
-  &.determinate {
-    .bar {
-      animation: determinateAnim 700ms cubic-bezier(0.47, 0, 0.67, 1) forwards;
-    }
-  }
-
-  &.indeterminate {
-    .bar {
-      animation: indeterminateAnim 1000ms linear infinite; // Updated: Combined animation for start/end with pre-eased keyframes
-    }
-
-    .tapestry.moving {
-      animation: tapestryMove 1500ms linear infinite; // Kept: Moving tapestry underneath
-    }
-  }
-
-  &.scale-in {
-    transform: scaleY(0);
-    animation: scaleIn 330ms cubic-bezier(0.33, 0, 0.23, 1.53) forwards;
-  }
-
-  &.exiting {
-    animation: exitCollapse 320ms cubic-bezier(0.96, 0, 0.67, 1) forwards;
-  }
-}
-
-@keyframes determinateAnim {
-  0% { --end: 0%; }
-  100% { --end: 100%; }
-}
-
-@keyframes indeterminateAnim {
-  0% { --start: 0.00%; --end: 0.00%; }
-  5% { --start: 0.11%; --end: 1.01%; }
-  10% { --start: 0.47%; --end: 2.55%; }
-  15% { --start: 1.11%; --end: 4.72%; }
-  20% { --start: 2.05%; --end: 7.65%; }
-  25% { --start: 3.35%; --end: 11.53%; }
-  30% { --start: 5.06%; --end: 16.61%; }
-  35% { --start: 7.25%; --end: 23.25%; }
-  40% { --start: 10.00%; --end: 31.97%; }
-  45% { --start: 13.44%; --end: 43.48%; }
-  50% { --start: 17.72%; --end: 58.19%; }
-  55% { --start: 23.08%; --end: 74.39%; }
-  60% { --start: 29.82%; --end: 87.45%; }
-  65% { --start: 38.39%; --end: 95.26%; }
-  70% { --start: 49.38%; --end: 98.98%; }
-  75% { --start: 63.03%; --end: 100.00%; }
-  80% { --start: 77.61%; --end: 100.00%; }
-  85% { --start: 89.10%; --end: 100.00%; }
-  90% { --start: 95.90%; --end: 100.00%; }
-  95% { --start: 99.12%; --end: 100.00%; }
-  100% { --start: 100.00%; --end: 100.00%; }
-}
-
-@keyframes tapestryMove {
-  0% { transform: translateX(0); }
-  100% { transform: translateX(-50%); }
-}
-
-@keyframes scaleIn {
-  0% { transform: scaleY(0); }
-  100% { transform: scaleY(1); }
-}
-
-@keyframes exitCollapse {
-  0% { height: var(--size-8); }
-  100% { height: 0; }
-}

package/src/flowProgress/FlowProgress.story.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import FlowProgress, { FlowProgressProps } from './index';
-import { storyConfig } from '../test-utils';
-import Sticky from '../sticky';
-import Button from '../button';
-import Body from '../body';
-import IconButton from '../iconButton';
-import { Cross } from '@transferwise/icons';
-
-const meta: Meta<typeof FlowProgress> = {
-  title: 'FlowProgress',
-  component: FlowProgress,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof FlowProgress>;
-
-export const Determinate: Story = storyConfig(
-  {
-    args: {},
-    render: () => {
-      const [someStep, setSomeStep] = React.useState(1);
-      const nextStep = () => setSomeStep((prev) => prev + 1);
-      return (
-        <>
-          <FlowProgress key={someStep} type="determinate" />
-          <Sticky open position="bottom">
-            <Body className="p-a-1">
-              <Button v2 block onClick={nextStep}>
-                Next Step
-              </Button>
-            </Body>
-          </Sticky>
-        </>
-      );
-    },
-  },
-  {
-    variants: [
-      'default',
-      // 'dark'
-    ],
-  },
-);
-
-export const Indeterminate: Story = storyConfig(
-  {
-    args: {},
-    render: () => <>
-      <FlowProgress type="indeterminate" />
-      {/* IconButton here just for cute demo */}
-      <IconButton priority="tertiary"><Cross /></IconButton>
-    </>,
-  },
-  {
-    variants: [
-      'default',
-      // 'dark'
-    ],
-  },
-);
-
-export const IndeterminateToDeterminate: Story = storyConfig(
-  {
-    args: {},
-    render: () => {
-      const [progressType, setProgressType] = React.useState<FlowProgressProps['type']>('indeterminate');
-      setTimeout(() => setProgressType('determinate'), 3000);
-      return (
-        <Body>
-          <FlowProgress type={progressType} />
-          <IconButton priority="tertiary"><Cross /></IconButton>
-        </Body>
-      )
-    }
-  },
-  {
-    variants: [
-      'default',
-      // 'dark'
-    ],
-  },
-);

package/src/flowProgress/FlowProgress.tsx

@@ -1,62 +0,0 @@
-import { useTheme } from '@wise/components-theming';
-import { clsx } from 'clsx';
-import { useState, useEffect } from 'react';
-
-export type Props = {
-  /**
-   * Type of the progress bar
-   * 
-   * `'indeterminate'` - shows an ongoing activity without a specific completion time.
-   * 
-   * `'determinate'` - ...
-   * 
-   * @default 'indeterminate'
-   */
-  type?: 'indeterminate' | 'determinate';
-};
-
-function FlowProgress({ type = 'indeterminate' }: Props) {
-  const indeterminate = type === 'indeterminate';
-  const determinate = !indeterminate;
-  const { screenMode } = useTheme();
-  const [exiting, setExiting] = useState(false);
-  const [visible, setVisible] = useState(true);
-
-  useEffect(() => {
-    if (determinate) {
-      const timer = setTimeout(() => setExiting(true), 720);
-      return () => clearTimeout(timer);
-    }
-  }, [determinate]);
-
-  useEffect(() => {
-    if (exiting) {
-      const timer = setTimeout(() => setVisible(false), 300);
-      return () => clearTimeout(timer);
-    }
-  }, [exiting]);
-
-  if (!visible) return null;
-
-  return (
-    <div
-      className={clsx(
-        'wds-flow-progress',
-        screenMode,
-        indeterminate ? 'indeterminate scale-in' : 'determinate',
-        { exiting },
-        'm-y-1',
-      )}
-    >
-      <div className="track" />
-      <div className={`bar ${indeterminate ? 'indeterminate-bar' : ''}`}>
-        <div
-          className={`tapestry ${indeterminate ? 'moving' : ''}`}
-          style={indeterminate ? { width: '200%' } : { width: '100%' }}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default FlowProgress;

package/src/flowProgress/index.ts

@@ -1,2 +0,0 @@
-export { default } from './FlowProgress';
-export type { Props as FlowProgressProps } from './FlowProgress';