@transferwise/components 0.0.0-experimental-2524bc4 → 0.0.0-experimental-0ee6ecc

package/build/button/legacyUtils/legacyUtils.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"legacyUtils.mjs","sources":["../../../src/button/legacyUtils/legacyUtils.ts"],"sourcesContent":["import { ControlType, Priority, Size, Type } from '../../common';\nimport { logActionRequired, logActionRequiredIf } from '../../utilities';\n\nconst deprecatedTypeMap: Record<Type, ControlType> = {\n  [Type.PRIMARY]: ControlType.ACCENT,\n  [Type.SECONDARY]: ControlType.ACCENT,\n  [Type.LINK]: ControlType.ACCENT,\n  [Type.PAY]: ControlType.POSITIVE,\n  [Type.DANGER]: ControlType.NEGATIVE,\n};\n\ntype OldTypeKeys = Type.DANGER | Type.LINK | Type.SECONDARY;\nconst oldTypePriorityMap: Record<OldTypeKeys, Priority> = {\n  [Type.DANGER]: Priority.SECONDARY,\n  [Type.LINK]: Priority.TERTIARY,\n  [Type.SECONDARY]: Priority.SECONDARY,\n};\n\nconst deprecatedTypeMapMessage = {\n  [Type.DANGER]: 'Type.NEGATIVE',\n  [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',\n  [Type.PAY]: 'ControlType.POSITIVE',\n  [Type.PRIMARY]: 'ControlType.ACCENT',\n  [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY',\n};\n\nconst deprecatedTypes = Object.keys(deprecatedTypeMap);\n\ntype EstablishNewTypeType = (\n  originalType: Type | (string & Record<never, never>) | null,\n) => `${ControlType}` | string | null;\n\nexport const establishNewType: EstablishNewTypeType = (originalType) =>\n  originalType && originalType in deprecatedTypeMap\n    ? deprecatedTypeMap[originalType as Type]\n    : originalType;\n\ntype EstablishNewPriorityType = (\n  originalPriority?: Priority | (string & Record<never, never>) | null,\n  originalType?: OldTypeKeys | (string & Record<never, never>) | null,\n) => `${ControlType}` | string | null | undefined;\n\nexport const establishNewPriority: EstablishNewPriorityType = (originalPriority, originalType) => {\n  const type = originalType ? establishNewType(originalType) : '';\n\n  // The old SECONDARY and LINK types now map to priorities. If they're still using one of\n  // these old types, ignore whatever priority they've passed and use this instead.\n  if (originalType && originalType in oldTypePriorityMap) {\n    return oldTypePriorityMap[originalType as OldTypeKeys];\n  }\n  // Only ControlType.ACCENT supports tertiary styles\n  if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {\n    return Priority.SECONDARY;\n  }\n  return originalPriority;\n};\n\ntype DeprecatedTypeMapMessageType = keyof typeof deprecatedTypeMapMessage;\ntype LogDeprecationNoticesType = (params: {\n  size?: `${Size}`;\n  type?: DeprecatedTypeMapMessageType | (string & Record<never, never>) | null;\n}) => void;\nexport const logDeprecationNotices: LogDeprecationNoticesType = ({ size, type }) => {\n  logActionRequiredIf(\n    'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',\n    size === Size.EXTRA_SMALL,\n  );\n\n  if (type && deprecatedTypes.includes(type) && type in deprecatedTypeMapMessage) {\n    logActionRequired(\n      `Button has deprecated the ${type} value for the \\`type\\` prop. Please update to ${deprecatedTypeMapMessage[type as DeprecatedTypeMapMessageType]}.`,\n    );\n  }\n};\n"],"names":["deprecatedTypeMap","Type","PRIMARY","ControlType","ACCENT","SECONDARY","LINK","PAY","POSITIVE","DANGER","NEGATIVE","oldTypePriorityMap","Priority","TERTIARY","deprecatedTypeMapMessage","deprecatedTypes","Object","keys","establishNewType","originalType","establishNewPriority","originalPriority","type","logDeprecationNotices","size","logActionRequiredIf","Size","EXTRA_SMALL","includes","logActionRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAMA,iBAAiB,GAA8B;AACnD,EAAA,CAACC,IAAI,CAACC,OAAO,GAAGC,WAAW,CAACC,MAAM;AAClC,EAAA,CAACH,IAAI,CAACI,SAAS,GAAGF,WAAW,CAACC,MAAM;AACpC,EAAA,CAACH,IAAI,CAACK,IAAI,GAAGH,WAAW,CAACC,MAAM;AAC/B,EAAA,CAACH,IAAI,CAACM,GAAG,GAAGJ,WAAW,CAACK,QAAQ;AAChC,EAAA,CAACP,IAAI,CAACQ,MAAM,GAAGN,WAAW,CAACO,QAAAA;CAC5B,CAAA;AAGD,MAAMC,kBAAkB,GAAkC;AACxD,EAAA,CAACV,IAAI,CAACQ,MAAM,GAAGG,QAAQ,CAACP,SAAS;AACjC,EAAA,CAACJ,IAAI,CAACK,IAAI,GAAGM,QAAQ,CAACC,QAAQ;AAC9B,EAAA,CAACZ,IAAI,CAACI,SAAS,GAAGO,QAAQ,CAACP,SAAAA;CAC5B,CAAA;AAED,MAAMS,wBAAwB,GAAG;AAC/B,EAAA,CAACb,IAAI,CAACQ,MAAM,GAAG,eAAe;AAC9B,EAAA,CAACR,IAAI,CAACK,IAAI,GAAG,oDAAoD;AACjE,EAAA,CAACL,IAAI,CAACM,GAAG,GAAG,sBAAsB;AAClC,EAAA,CAACN,IAAI,CAACC,OAAO,GAAG,oBAAoB;EACpC,CAACD,IAAI,CAACI,SAAS,GAAG,qDAAA;CACnB,CAAA;AAED,MAAMU,eAAe,GAAGC,MAAM,CAACC,IAAI,CAACjB,iBAAiB,CAAC,CAAA;MAMzCkB,gBAAgB,GAA0BC,YAAY,IACjEA,YAAY,IAAIA,YAAY,IAAInB,iBAAiB,GAC7CA,iBAAiB,CAACmB,YAAoB,CAAC,GACvCA,aAAY;MAOLC,oBAAoB,GAA6BA,CAACC,gBAAgB,EAAEF,YAAY,KAAI;EAC/F,MAAMG,IAAI,GAAGH,YAAY,GAAGD,gBAAgB,CAACC,YAAY,CAAC,GAAG,EAAE,CAAA;AAE/D;AACA;AACA,EAAA,IAAIA,YAAY,IAAIA,YAAY,IAAIR,kBAAkB,EAAE;IACtD,OAAOA,kBAAkB,CAACQ,YAA2B,CAAC,CAAA;AACxD,GAAA;AACA;EACA,IAAIE,gBAAgB,KAAKT,QAAQ,CAACC,QAAQ,IAAIS,IAAI,KAAKnB,WAAW,CAACC,MAAM,EAAE;IACzE,OAAOQ,QAAQ,CAACP,SAAS,CAAA;AAC3B,GAAA;AACA,EAAA,OAAOgB,gBAAgB,CAAA;AACzB,EAAC;AAOM,MAAME,qBAAqB,GAA8BA,CAAC;EAAEC,IAAI;AAAEF,EAAAA,IAAAA;AAAM,CAAA,KAAI;EACjFG,mBAAmB,CACjB,wGAAwG,EACxGD,IAAI,KAAKE,IAAI,CAACC,WAAW,CAC1B,CAAA;AAED,EAAA,IAAIL,IAAI,IAAIP,eAAe,CAACa,QAAQ,CAACN,IAAI,CAAC,IAAIA,IAAI,IAAIR,wBAAwB,EAAE;IAC9Ee,iBAAiB,CACf,6BAA6BP,IAAI,CAAA,+CAAA,EAAkDR,wBAAwB,CAACQ,IAAoC,CAAC,CAAA,CAAA,CAAG,CACrJ,CAAA;AACH,GAAA;AACF;;;;"}

package/build/types/button/Button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAOnB,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC;IAC9F,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,IAAI,CAAC;IACzE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;CAC7D,CAAC;AAEF,KAAK,WAAW,GAAG,WAAW,GAC5B,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEJ,KAAK,WAAW,GAAG,WAAW,GAC5B,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,GAAG,CAAC;CACV,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,WAAW,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAExE,QAAA,MAAM,MAAM,uJAkGX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/button/classMap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"classMap.d.ts","sourceRoot":"","sources":["../../../src/button/classMap.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC"}

package/build/types/button/legacyUtils/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button/legacyUtils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC"}

package/build/types/button/legacyUtils/legacyUtils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"legacyUtils.d.ts","sourceRoot":"","sources":["../../../../src/button/legacyUtils/legacyUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAWjE,KAAK,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;AAO5D,QAAA,MAAM,wBAAwB;;;;;;CAM7B,CAAC;AAIF,KAAK,oBAAoB,GAAG,CAC1B,YAAY,EAAE,IAAI,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,KACxD,GAAG,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC;AAEtC,eAAO,MAAM,gBAAgB,EAAE,oBAGb,CAAC;AAEnB,KAAK,wBAAwB,GAAG,CAC9B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,EACpE,YAAY,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,KAChE,GAAG,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAElD,eAAO,MAAM,oBAAoB,EAAE,wBAalC,CAAC;AAEF,KAAK,4BAA4B,GAAG,MAAM,OAAO,wBAAwB,CAAC;AAC1E,KAAK,yBAAyB,GAAG,CAAC,MAAM,EAAE;IACxC,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE,4BAA4B,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;CAC9E,KAAK,IAAI,CAAC;AACX,eAAO,MAAM,qBAAqB,EAAE,yBAWnC,CAAC"}

package/src/button/Button.story.tsx

@@ -1,163 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn } from '@storybook/test';
-
-import { ControlType, Priority } from '../common';
-import { storyConfig } from '../test-utils';
-
-import Button from './Button';
-
-export default {
-  component: Button,
-  title: 'Actions/Button',
-  args: {
-    children: 'Button text',
-    loading: false,
-    onClick: fn(),
-    onBlur: fn(),
-    onFocus: fn(),
-  },
-  argTypes: {
-    as: {
-      type: {
-        name: 'enum',
-        value: ['button', 'a'],
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Button>;
-
-type Story = StoryObj<typeof Button>;
-
-export const Basic: Story = {};
-
-export const Focused = storyConfig<Story>(
-  {
-    parameters: {
-      chromatic: {
-        delay: 1000,
-      },
-    },
-    play: async ({ canvasElement }) => {
-      const canvas = within(canvasElement);
-      await userEvent.click(canvas.getByRole('button'));
-    },
-  },
-  {
-    variants: ['dark'],
-  },
-);
-
-export const Variants = storyConfig<Story>(
-  {
-    render: (args) => {
-      return (
-        <>
-          <div className="m-b-2">
-            <div className="title-4 m-b-1">Accent</div>
-            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
-              <Button {...args} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
-              <Button {...args} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
-              <Button {...args} priority={Priority.TERTIARY} type={ControlType.ACCENT} />
-            </div>
-          </div>
-          <div className="m-b-2">
-            <div className="title-4 m-b-1">Positive</div>
-            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
-              <Button {...args} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
-              <Button {...args} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
-            </div>
-          </div>
-          <div className="m-b-2">
-            <div className="title-4 m-b-1">Negative</div>
-            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
-              <Button {...args} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
-              <Button {...args} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
-            </div>
-          </div>
-          <div className="m-b-2">
-            <div className="title-4 m-b-1">Disabled</div>
-            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
-              <Button {...args} priority={Priority.PRIMARY} disabled />
-              <Button {...args} priority={Priority.SECONDARY} disabled />
-              <Button {...args} priority={Priority.TERTIARY} disabled />
-            </div>
-          </div>
-        </>
-      );
-    },
-  },
-  { variants: ['default', 'dark', 'rtl'] },
-);
-
-/**
- * The purpose of the `loading` mode is to convey a message to the
- * user that some asynchronous process has been triggered, likely
- * in response to their previous action.
- *
- * Although it carries some similarities with the `disabled` mode
- * (users cannot activate a loading button), it's not hidden from
- * the keyboard and assistive tech users (users can focus on it,
- * and it's announced by screen readers), and is also much more
- * accessible to sighted users due to its default, high contrast.
- */
-export const Loading = storyConfig<Story>(
-  {
-    render: (args) => {
-      return (
-        <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
-          <Button {...args} loading priority={Priority.PRIMARY} />
-          <Button {...args} loading priority={Priority.SECONDARY} />
-          <Button {...args} loading priority={Priority.TERTIARY} />
-          <Button {...args} loading priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
-          <Button {...args} loading priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
-        </div>
-      );
-    },
-    args: {
-      loading: true,
-    },
-  },
-  { variants: ['default', 'dark', 'rtl'] },
-);
-
-export const SocialMedia = storyConfig<Story>(
-  {
-    render: () => {
-      return (
-        <>
-          <div className="m-b-2">
-            <button type="button" className="btn btn-google">
-              Login with Google
-            </button>
-          </div>
-          <div className="m-b-2">
-            <button type="button" className="btn btn-facebook">
-              Login with Facebook
-            </button>
-          </div>
-          <div className="m-b-2">
-            <button type="button" className="btn btn-lg btn-facebook">
-              Large Button
-            </button>
-          </div>
-          <div className="m-b-2">
-            <button type="button" className="btn btn-block btn-facebook">
-              Block Button
-            </button>
-          </div>
-          <div className="m-b-2">
-            <button type="button" className="btn btn-lg btn-block btn-facebook">
-              Large Block Button
-            </button>
-          </div>
-        </>
-      );
-    },
-  },
-  { variants: ['default', 'dark', 'rtl'] },
-);
-
-export const SocialMediaMobile = storyConfig<Story>(SocialMedia, {
-  variants: ['default', 'dark', 'rtl', 'mobile'],
-});