@transferwise/components 0.0.0-experimental-3ee5bb4 → 0.0.0-experimental-d7c952a

package/build/es/no-polyfill/actionOption/ActionOption.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import ActionButton from"../actionButton";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var ActionOption=function(a){var b=a.action,c=a.disabled,d=a.onClick,e=a.media,f=a.title,g=a.content,h=a.complex,i=a.className,j=a.showMediaAtAllSizes,k=a.showMediaCircle,l=a.isContainerAligned,m={media:e,title:f,content:g,complex:h,disabled:c,showMediaAtAllSizes:j,showMediaCircle:k,className:classNames("tw-action-option",i),isContainerAligned:l};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},m),{},{button:/*#__PURE__*/_jsx(ActionButton,{disabled:c,"aria-label":function getAriaLabel(){var a=[];return"string"==typeof f&&a.push(f),"string"==typeof b&&a.push(b),a.join(", ")||void 0}(),onClick:d,children:b})}))};export default ActionOption;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import ActionButton from"../actionButton";import{Priority}from"../common";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var ActionOption=function(a){var b=a.action,c=a.priority,d=void 0===c?Priority.PRIMARY:c,e=a.disabled,f=a.onClick,g=a.media,h=a.title,i=a.content,j=a.complex,k=a.className,l=a.showMediaAtAllSizes,m=a.showMediaCircle,n=a.isContainerAligned,o={media:g,title:h,content:i,complex:j,disabled:e,showMediaAtAllSizes:l,showMediaCircle:m,className:classNames("tw-action-option",k),isContainerAligned:n};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},o),{},{button:/*#__PURE__*/_jsx(ActionButton,{priority:d,disabled:e,"aria-label":function getAriaLabel(){var a=[];return"string"==typeof h&&a.push(h),"string"==typeof b&&a.push(b),a.join(", ")||void 0}(),onClick:f,children:b})}))};export default ActionOption;

package/build/es/no-polyfill/actionOption/ActionOption.story.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{Nudge}from"..";import ActionOption from"./ActionOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionOption,title:"Option/ActionOption",args:{title:"Action option",content:"Normally, the button and icon are vertically centered.",action:"Action",media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaCircle:!1},tags:["autodocs"]};export var Basic={render:function render(a){return/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a))}};export var WithContainerContent={render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})]})}};
+import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{Nudge}from"..";import ActionOption from"./ActionOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionOption,title:"Option/ActionOption",args:{title:"Action option",content:"Normally, the button and icon are vertically centered.",action:"Action",media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaCircle:!1},tags:["autodocs"]};export var Basic={render:function render(a){return/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a))}};export var WithSecondarypriority={render:function render(a){return/*#__PURE__*/_jsx(ActionOption,_objectSpread({priority:"secondary"},a))}};export var WithContainerContent={render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})]})}};

package/build/es/polyfill/actionOption/ActionOption.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.join.js";import classNames from"classnames";import ActionButton from"../actionButton";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var ActionOption=function(a){var b=a.action,c=a.disabled,d=a.onClick,e=a.media,f=a.title,g=a.content,h=a.complex,i=a.className,j=a.showMediaAtAllSizes,k=a.showMediaCircle,l=a.isContainerAligned,m={media:e,title:f,content:g,complex:h,disabled:c,showMediaAtAllSizes:j,showMediaCircle:k,className:classNames("tw-action-option",i),isContainerAligned:l};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},m),{},{button:/*#__PURE__*/_jsx(ActionButton,{disabled:c,"aria-label":function getAriaLabel(){var a=[];return"string"==typeof f&&a.push(f),"string"==typeof b&&a.push(b),a.join(", ")||void 0}(),onClick:d,children:b})}))};export default ActionOption;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.join.js";import classNames from"classnames";import ActionButton from"../actionButton";import{Priority}from"../common";import Option from"../common/Option";import{jsx as _jsx}from"react/jsx-runtime";var ActionOption=function(a){var b=a.action,c=a.priority,d=void 0===c?Priority.PRIMARY:c,e=a.disabled,f=a.onClick,g=a.media,h=a.title,i=a.content,j=a.complex,k=a.className,l=a.showMediaAtAllSizes,m=a.showMediaCircle,n=a.isContainerAligned,o={media:g,title:h,content:i,complex:j,disabled:e,showMediaAtAllSizes:l,showMediaCircle:m,className:classNames("tw-action-option",k),isContainerAligned:n};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},o),{},{button:/*#__PURE__*/_jsx(ActionButton,{priority:d,disabled:e,"aria-label":function getAriaLabel(){var a=[];return"string"==typeof h&&a.push(h),"string"==typeof b&&a.push(b),a.join(", ")||void 0}(),onClick:f,children:b})}))};export default ActionOption;

package/build/es/polyfill/actionOption/ActionOption.story.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{Nudge}from"..";import ActionOption from"./ActionOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionOption,title:"Option/ActionOption",args:{title:"Action option",content:"Normally, the button and icon are vertically centered.",action:"Action",media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaCircle:!1},tags:["autodocs"]};export var Basic={render:function render(a){return/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a))}};export var WithContainerContent={render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})]})}};
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{Nudge}from"..";import ActionOption from"./ActionOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionOption,title:"Option/ActionOption",args:{title:"Action option",content:"Normally, the button and icon are vertically centered.",action:"Action",media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaCircle:!1},tags:["autodocs"]};export var Basic={render:function render(a){return/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a))}};export var WithSecondarypriority={render:function render(a){return/*#__PURE__*/_jsx(ActionOption,_objectSpread({priority:"secondary"},a))}};export var WithContainerContent={render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})]})}};

package/build/types/actionOption/ActionOption.d.ts

@@ -1,5 +1,5 @@
 import { ReactChild, ReactElement } from 'react';
-import { CommonProps } from '../common';
+import { CommonProps, PriorityPrimary, PrioritySecondary } from '../common';
 type Props = {
     complex?: boolean;
     content?: ReactChild;
@@ -9,8 +9,9 @@ type Props = {
     onClick: () => void;
     title: ReactChild;
     action: ReactChild;
+    priority?: PriorityPrimary | PrioritySecondary;
     showMediaCircle?: boolean;
     isContainerAligned?: boolean;
 } & CommonProps;
-declare const ActionOption: ({ action, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, }: Props) => ReactElement;
+declare const ActionOption: ({ action, priority, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, }: Props) => ReactElement;
 export default ActionOption;

package/build/types/actionOption/ActionOption.story.d.ts

@@ -2,7 +2,7 @@
 import { StoryObj } from '@storybook/react';
 import ActionOption from './ActionOption';
 declare const _default: {
-    component: ({ action, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, }: {
+    component: ({ action, priority, disabled, onClick, media, title, content, complex, className, showMediaAtAllSizes, showMediaCircle, isContainerAligned, }: {
         complex?: boolean | undefined;
         content?: import("react").ReactChild | undefined;
         disabled?: boolean | undefined;
@@ -11,6 +11,7 @@ declare const _default: {
         onClick: () => void;
         title: import("react").ReactChild;
         action: import("react").ReactChild;
+        priority?: "primary" | "secondary" | undefined;
         showMediaCircle?: boolean | undefined;
         isContainerAligned?: boolean | undefined;
     } & import("../common").CommonProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -27,4 +28,5 @@ declare const _default: {
 export default _default;
 type Story = StoryObj<typeof ActionOption>;
 export declare const Basic: Story;
+export declare const WithSecondarypriority: Story;
 export declare const WithContainerContent: Story;