@transferwise/components 43.11.20 → 43.11.22

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={media:e,title:f,content:g,complex:h,disabled:c,showMediaAtAllSizes:j,showMediaCircle:k,className:classNames("tw-action-option",i)};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},l),{},{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 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;

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

@@ -1 +1 @@
-import{action}from"@storybook/addon-actions";import{text,boolean}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";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"};var Template=function(){var a=text("title","Action option"),b=text("content","Normally, the button and icon are vertically centered."),c=text("action","Action"),d=boolean("disabled",!1),e=boolean("showMediaAtAllSizes",!1),f=boolean("showMediaCircle",!1);return/*#__PURE__*/_jsx(ActionOption,{action:c,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:a,content:b,complex:!1,disabled:d,showMediaAtAllSizes:e,showMediaCircle:f,onClick:action("Button Clicked")})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};
+import{action}from"@storybook/addon-actions";import{text,boolean}from"@storybook/addon-knobs";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"};var Template=function(){var a=text("title","Action option"),b=text("content","Normally, the button and icon are vertically centered."),c=text("action","Action"),d=boolean("disabled",!1),e=boolean("showMediaAtAllSizes",!1),f=boolean("showMediaCircle",!1),g=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(ActionOption,{action:c,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:a,content:b,complex:!1,disabled:d,showMediaAtAllSizes:e,showMediaCircle:f,isContainerAligned:g,onClick:action("Button Clicked")})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__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/no-polyfill/checkboxOption/CheckboxOption.spec.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}/* eslint-disable jest/expect-expect */import"@testing-library/jest-dom";import{render,fireEvent,screen}from"../test-utils";import CheckboxOption from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Checkbox option",function(){var a={id:"id",name:"name",title:"Title",onChange:jest.fn(),"aria-label":"test-label"};describe("by default",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByRole("checkbox");it("is not checked",function(){expect(b).not.toBeChecked()}),it("is not disabled",function(){expect(b).toBeEnabled()})}),it("has `aria-label` attr",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByLabelText("test-label");expect(b).toBeInTheDocument()}),it("is checked when checked prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0}))),expect(screen.getByRole("checkbox")).toBeChecked()}),it("is disabled when disabled prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0}))),expect(screen.getByRole("checkbox")).toBeDisabled()}),describe("onChange",function(){it("is called with new checked value when the option is clicked",function(){var b=jest.fn(),c=render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{onChange:b}))),d=c.rerender,e=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!0),d(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0,onChange:b}))),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!1)}),it("is not called if the option is disabled",function(){var b=jest.fn();render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0,onChange:b})));var c=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(c),expect(b).not.toHaveBeenCalled()})})});
+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}/* eslint-disable jest/expect-expect */import"@testing-library/jest-dom";import{render,fireEvent,screen}from"../test-utils";import CheckboxOption from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Checkbox option",function(){var a={id:"id",name:"name",title:"Title",onChange:jest.fn(),"aria-label":"test-label"};describe("by default",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByRole("checkbox");it("is not checked",function(){expect(b).not.toBeChecked()}),it("is not disabled",function(){expect(b).toBeEnabled()})}),it("has `aria-label` attr",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByLabelText("test-label");expect(b).toBeInTheDocument()}),it("is checked when checked prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0}))),expect(screen.getByRole("checkbox")).toBeChecked()}),it("is disabled when disabled prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0}))),expect(screen.getByRole("checkbox")).toBeDisabled()}),describe("onChange",function(){it("is called with new checked value when the option is clicked",function(){var b=jest.fn(),c=render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{onChange:b}))),d=c.rerender,e=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!0),d(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0,onChange:b}))),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!1)}),it("is not called if the option is disabled",function(){var b=jest.fn();render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0,onChange:b})));var c=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(c),expect(b).not.toHaveBeenCalled()})}),it("renders aligned with container content",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{isContainerAligned:!0}))),expect(document.querySelector(".np-option__container-aligned")).toBeInTheDocument()})});

package/build/es/no-polyfill/checkboxOption/CheckboxOption.story.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean,text}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import CheckboxOption from"./CheckboxOption";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:CheckboxOption,title:"Option/CheckboxOption"};var Template=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("content","Normally, the button and icon are vertically centered."),f=text("title","Checkbox option"),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1);return/*#__PURE__*/_jsx(CheckboxOption,{id:"checkbox-option",name:"checkbox-option",checked:c,disabled:g,title:f,content:e,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaAtAllSizes:h,onChange:function onChange(a){return d(a)}})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{action}from"@storybook/addon-actions";import{boolean,text}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{Nudge}from"..";import CheckboxOption from"./CheckboxOption";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:CheckboxOption,title:"Option/CheckboxOption"};var Template=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("content","Normally, the button and icon are vertically centered."),f=text("title","Checkbox option"),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1),i=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(CheckboxOption,{id:"checkbox-option",name:"checkbox-option",checked:c,disabled:g,title:f,content:e,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaAtAllSizes:h,isContainerAligned:i,onChange:function onChange(a){return d(a)}})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__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/no-polyfill/common/Option/Option.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["media","title","content","as","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle"];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{forwardRef}from"react";import Body from"../../body";import{Typography}from"../propsValues/typography";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=/*#__PURE__*/forwardRef(function(a,b){var c,d=a.media,e=void 0===d?"":d,f=a.title,g=a.content,h=a.as,i=a.button,j=a.decision,k=a.disabled,l=void 0!==k&&k,m=a.complex,n=a.inverseMediaCircle,o=a.className,p=a.showMediaAtAllSizes,q=a.showMediaCircle,r=_objectWithoutProperties(a,_excluded),s=null!==(c=h)&&void 0!==c?c:"label";return/*#__PURE__*/_jsx(s,_objectSpread(_objectSpread({},r),{},{ref:b,className:classNames("np-option",o,{"decision-complex":m,decision:!(void 0!==j)||j,disabled:l,"np-option__sm-media":p}),disabled:l&&"button"===s,children:/*#__PURE__*/_jsxs("div",{className:"media",children:[e&&/*#__PURE__*/_jsx("div",{className:"media-left",children:!(void 0!==q)||q?/*#__PURE__*/_jsx("div",{className:classNames("circle circle-sm text-primary",{"circle-inverse":!(void 0!==n)||n}),children:e}):/*#__PURE__*/_jsx("div",{className:"np-option__no-media-circle",children:e})}),/*#__PURE__*/_jsxs("div",{className:"media-body",children:[/*#__PURE__*/_jsx(Body,{as:"span",type:Typography.BODY_LARGE_BOLD,className:"text-primary np-option__title d-block",children:f}),g&&/*#__PURE__*/_jsx(Body,{className:"d-block np-option__body",children:g})]}),/*#__PURE__*/_jsx("div",{className:"media-right",children:i})]})}))});export default Option;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["media","title","content","as","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned"];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{forwardRef}from"react";import Body from"../../body";import{Typography}from"../propsValues/typography";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=/*#__PURE__*/forwardRef(function(a,b){var c,d=a.media,e=void 0===d?"":d,f=a.title,g=a.content,h=a.as,i=a.button,j=a.decision,k=a.disabled,l=void 0!==k&&k,m=a.complex,n=a.inverseMediaCircle,o=a.className,p=a.showMediaAtAllSizes,q=a.showMediaCircle,r=a.isContainerAligned,s=_objectWithoutProperties(a,_excluded),t=null!==(c=h)&&void 0!==c?c:"label";return/*#__PURE__*/_jsx(t,_objectSpread(_objectSpread({},s),{},{ref:b,className:classNames("np-option",o,{"decision-complex":m,decision:!(void 0!==j)||j,disabled:l,"np-option__sm-media":p,"np-option__container-aligned":void 0!==r&&r}),disabled:l&&"button"===t,children:/*#__PURE__*/_jsxs("div",{className:"media",children:[e&&/*#__PURE__*/_jsx("div",{className:"media-left",children:!(void 0!==q)||q?/*#__PURE__*/_jsx("div",{className:classNames("circle circle-sm text-primary",{"circle-inverse":!(void 0!==n)||n}),children:e}):/*#__PURE__*/_jsx("div",{className:"np-option__no-media-circle",children:e})}),/*#__PURE__*/_jsxs("div",{className:"media-body",children:[/*#__PURE__*/_jsx(Body,{as:"span",type:Typography.BODY_LARGE_BOLD,className:"text-primary np-option__title d-block",children:f}),g&&/*#__PURE__*/_jsx(Body,{className:"d-block np-option__body",children:g})]}),/*#__PURE__*/_jsx("div",{className:"media-right",children:i})]})}))});export default Option;

package/build/es/no-polyfill/radioOption/RadioOption.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 PropTypes from"prop-types";import Option from"../common/Option";import RadioButton from"../common/RadioButton";import{jsx as _jsx}from"react/jsx-runtime";var RadioOption=function(a){var b=a["aria-label"],c=a.media,d=a.title,e=a.content,f=a.id,g=a.name,h=a.checked,i=a.onChange,j=a.complex,k=a.disabled,l=a.value,m=a.showMediaCircle,n=a.showMediaAtAllSizes;return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},{"aria-label":b,media:c,title:d,content:e,name:g,complex:j,disabled:k,showMediaCircle:m,showMediaAtAllSizes:n}),{},{button:/*#__PURE__*/_jsx(RadioButton,{id:f,name:g,checked:h,disabled:k,value:l,onChange:i})}))};RadioOption.propTypes={"aria-label":PropTypes.string,media:PropTypes.node,id:PropTypes.string.isRequired,name:PropTypes.string.isRequired,title:PropTypes.node.isRequired,content:PropTypes.node,checked:PropTypes.bool,onChange:PropTypes.func.isRequired,complex:PropTypes.bool,disabled:PropTypes.bool,value:PropTypes.string,showMediaCircle:PropTypes.bool,showMediaAtAllSizes:PropTypes.bool},RadioOption.defaultProps={"aria-label":void 0,media:null,content:null,checked:!1,complex:!1,disabled:!1,showMediaCircle:!0,showMediaAtAllSizes:!1,value:""};export default RadioOption;
+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 PropTypes from"prop-types";import Option from"../common/Option";import RadioButton from"../common/RadioButton";import{jsx as _jsx}from"react/jsx-runtime";var RadioOption=function(a){var b=a["aria-label"],c=a.media,d=a.title,e=a.content,f=a.id,g=a.name,h=a.checked,i=a.onChange,j=a.complex,k=a.disabled,l=a.value,m=a.showMediaCircle,n=a.showMediaAtAllSizes,o=a.isContainerAligned;return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},{"aria-label":b,media:c,title:d,content:e,name:g,complex:j,disabled:k,showMediaCircle:m,showMediaAtAllSizes:n,isContainerAligned:o}),{},{button:/*#__PURE__*/_jsx(RadioButton,{id:f,name:g,checked:h,disabled:k,value:l,onChange:i})}))};RadioOption.propTypes={"aria-label":PropTypes.string,media:PropTypes.node,id:PropTypes.string.isRequired,name:PropTypes.string.isRequired,title:PropTypes.node.isRequired,content:PropTypes.node,checked:PropTypes.bool,onChange:PropTypes.func.isRequired,complex:PropTypes.bool,disabled:PropTypes.bool,value:PropTypes.string,showMediaCircle:PropTypes.bool,showMediaAtAllSizes:PropTypes.bool,isContainerAligned:PropTypes.bool},RadioOption.defaultProps={"aria-label":void 0,media:null,content:null,checked:!1,complex:!1,disabled:!1,showMediaCircle:!0,showMediaAtAllSizes:!1,isContainerAligned:!1,value:""};export default RadioOption;

package/build/es/no-polyfill/switchOption/SwitchOption.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 Option from"../common/Option";import Switch from"../switch";import{jsx as _jsx}from"react/jsx-runtime";var stopPropagation=function(a){a&&(a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation())},SwitchOption=function(a){var b=a.checked,c=a.complex,d=a.content,e=a.disabled,f=a.id,g=a.media,h=a.onChange,i=a.title,j=a.showMediaCircle,k=a.showMediaAtAllSizes,l=a["aria-label"],m=function(a){stopPropagation(a);e||h(!b)};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},{media:g,title:i,content:d,complex:c,disabled:e,showMediaCircle:j,showMediaAtAllSizes:k}),{},{button:/*#__PURE__*/_jsx(Switch,{id:f,checked:b,disabled:e,"aria-label":l,onClick:m}),onClick:m}))};export default SwitchOption;
+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 Option from"../common/Option";import Switch from"../switch";import{jsx as _jsx}from"react/jsx-runtime";var stopPropagation=function(a){a&&(a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation())},SwitchOption=function(a){var b=a.checked,c=a.complex,d=a.content,e=a.disabled,f=a.id,g=a.media,h=a.onChange,i=a.title,j=a.showMediaCircle,k=a.showMediaAtAllSizes,l=a.isContainerAligned,m=a["aria-label"],n=function(a){stopPropagation(a);e||h(!b)};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},{media:g,title:i,content:d,complex:c,disabled:e,showMediaCircle:j,showMediaAtAllSizes:k,isContainerAligned:l}),{},{button:/*#__PURE__*/_jsx(Switch,{id:f,checked:b,disabled:e,"aria-label":m,onClick:n}),onClick:n}))};export default SwitchOption;

package/build/es/no-polyfill/switchOption/SwitchOption.story.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{text,boolean}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import SwitchOption from"./SwitchOption";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:SwitchOption,title:"Option/SwitchOption"};var Template=function(){var a=useState(!1),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("title","Switch option"),f=text("content","Normally, the button and icon are vertically centered."),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1);return/*#__PURE__*/_jsx(SwitchOption,{media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:e,content:f,id:"id",checked:c,complex:!1,disabled:g,showMediaAtAllSizes:h,"aria-label":e,onChange:d})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{action}from"@storybook/addon-actions";import{text,boolean}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{Nudge}from"..";import SwitchOption from"./SwitchOption";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:SwitchOption,title:"Option/SwitchOption"};var Template=function(){var a=useState(!1),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("title","Switch option"),f=text("content","Normally, the button and icon are vertically centered."),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1),i=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(SwitchOption,{media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:e,content:f,id:"id",checked:c,complex:!1,disabled:g,showMediaAtAllSizes:h,isContainerAligned:i,"aria-label":e,onChange:d})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__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={media:e,title:f,content:g,complex:h,disabled:c,showMediaAtAllSizes:j,showMediaCircle:k,className:classNames("tw-action-option",i)};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},l),{},{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 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;

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

@@ -1 +1 @@
-import{action}from"@storybook/addon-actions";import{text,boolean}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";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"};var Template=function(){var a=text("title","Action option"),b=text("content","Normally, the button and icon are vertically centered."),c=text("action","Action"),d=boolean("disabled",!1),e=boolean("showMediaAtAllSizes",!1),f=boolean("showMediaCircle",!1);return/*#__PURE__*/_jsx(ActionOption,{action:c,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:a,content:b,complex:!1,disabled:d,showMediaAtAllSizes:e,showMediaCircle:f,onClick:action("Button Clicked")})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};
+import{action}from"@storybook/addon-actions";import{text,boolean}from"@storybook/addon-knobs";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"};var Template=function(){var a=text("title","Action option"),b=text("content","Normally, the button and icon are vertically centered."),c=text("action","Action"),d=boolean("disabled",!1),e=boolean("showMediaAtAllSizes",!1),f=boolean("showMediaCircle",!1),g=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(ActionOption,{action:c,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:a,content:b,complex:!1,disabled:d,showMediaAtAllSizes:e,showMediaCircle:f,isContainerAligned:g,onClick:action("Button Clicked")})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__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/checkboxOption/CheckboxOption.spec.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}/* eslint-disable jest/expect-expect */import"@testing-library/jest-dom";import{render,fireEvent,screen}from"../test-utils";import CheckboxOption from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Checkbox option",function(){var a={id:"id",name:"name",title:"Title",onChange:jest.fn(),"aria-label":"test-label"};describe("by default",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByRole("checkbox");it("is not checked",function(){expect(b).not.toBeChecked()}),it("is not disabled",function(){expect(b).toBeEnabled()})}),it("has `aria-label` attr",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByLabelText("test-label");expect(b).toBeInTheDocument()}),it("is checked when checked prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0}))),expect(screen.getByRole("checkbox")).toBeChecked()}),it("is disabled when disabled prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0}))),expect(screen.getByRole("checkbox")).toBeDisabled()}),describe("onChange",function(){it("is called with new checked value when the option is clicked",function(){var b=jest.fn(),c=render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{onChange:b}))),d=c.rerender,e=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!0),d(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0,onChange:b}))),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!1)}),it("is not called if the option is disabled",function(){var b=jest.fn();render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0,onChange:b})));var c=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(c),expect(b).not.toHaveBeenCalled()})})});
+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}/* eslint-disable jest/expect-expect */import"@testing-library/jest-dom";import{render,fireEvent,screen}from"../test-utils";import CheckboxOption from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Checkbox option",function(){var a={id:"id",name:"name",title:"Title",onChange:jest.fn(),"aria-label":"test-label"};describe("by default",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByRole("checkbox");it("is not checked",function(){expect(b).not.toBeChecked()}),it("is not disabled",function(){expect(b).toBeEnabled()})}),it("has `aria-label` attr",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread({},a)));var b=screen.getByLabelText("test-label");expect(b).toBeInTheDocument()}),it("is checked when checked prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0}))),expect(screen.getByRole("checkbox")).toBeChecked()}),it("is disabled when disabled prop is true",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0}))),expect(screen.getByRole("checkbox")).toBeDisabled()}),describe("onChange",function(){it("is called with new checked value when the option is clicked",function(){var b=jest.fn(),c=render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{onChange:b}))),d=c.rerender,e=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!0),d(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{checked:!0,onChange:b}))),fireEvent.click(e),expect(b).toHaveBeenCalledWith(!1)}),it("is not called if the option is disabled",function(){var b=jest.fn();render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{disabled:!0,onChange:b})));var c=screen.getByLabelText("test-label");expect(b).not.toHaveBeenCalled(),fireEvent.click(c),expect(b).not.toHaveBeenCalled()})}),it("renders aligned with container content",function(){render(/*#__PURE__*/_jsx(CheckboxOption,_objectSpread(_objectSpread({},a),{},{isContainerAligned:!0}))),expect(document.querySelector(".np-option__container-aligned")).toBeInTheDocument()})});

package/build/es/polyfill/checkboxOption/CheckboxOption.story.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean,text}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import CheckboxOption from"./CheckboxOption";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:CheckboxOption,title:"Option/CheckboxOption"};var Template=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("content","Normally, the button and icon are vertically centered."),f=text("title","Checkbox option"),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1);return/*#__PURE__*/_jsx(CheckboxOption,{id:"checkbox-option",name:"checkbox-option",checked:c,disabled:g,title:f,content:e,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaAtAllSizes:h,onChange:function onChange(a){return d(a)}})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{action}from"@storybook/addon-actions";import{boolean,text}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{Nudge}from"..";import CheckboxOption from"./CheckboxOption";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:CheckboxOption,title:"Option/CheckboxOption"};var Template=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("content","Normally, the button and icon are vertically centered."),f=text("title","Checkbox option"),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1),i=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(CheckboxOption,{id:"checkbox-option",name:"checkbox-option",checked:c,disabled:g,title:f,content:e,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaAtAllSizes:h,isContainerAligned:i,onChange:function onChange(a){return d(a)}})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__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/common/Option/Option.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["media","title","content","as","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle"];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 classNames from"classnames";import{forwardRef}from"react";import Body from"../../body";import{Typography}from"../propsValues/typography";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=/*#__PURE__*/forwardRef(function(a,b){var c,d=a.media,e=void 0===d?"":d,f=a.title,g=a.content,h=a.as,i=a.button,j=a.decision,k=a.disabled,l=void 0!==k&&k,m=a.complex,n=a.inverseMediaCircle,o=a.className,p=a.showMediaAtAllSizes,q=a.showMediaCircle,r=_objectWithoutProperties(a,_excluded),s=null!==(c=h)&&void 0!==c?c:"label";return/*#__PURE__*/_jsx(s,_objectSpread(_objectSpread({},r),{},{ref:b,className:classNames("np-option",o,{"decision-complex":m,decision:!(void 0!==j)||j,disabled:l,"np-option__sm-media":p}),disabled:l&&"button"===s,children:/*#__PURE__*/_jsxs("div",{className:"media",children:[e&&/*#__PURE__*/_jsx("div",{className:"media-left",children:!(void 0!==q)||q?/*#__PURE__*/_jsx("div",{className:classNames("circle circle-sm text-primary",{"circle-inverse":!(void 0!==n)||n}),children:e}):/*#__PURE__*/_jsx("div",{className:"np-option__no-media-circle",children:e})}),/*#__PURE__*/_jsxs("div",{className:"media-body",children:[/*#__PURE__*/_jsx(Body,{as:"span",type:Typography.BODY_LARGE_BOLD,className:"text-primary np-option__title d-block",children:f}),g&&/*#__PURE__*/_jsx(Body,{className:"d-block np-option__body",children:g})]}),/*#__PURE__*/_jsx("div",{className:"media-right",children:i})]})}))});export default Option;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["media","title","content","as","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned"];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 classNames from"classnames";import{forwardRef}from"react";import Body from"../../body";import{Typography}from"../propsValues/typography";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Option=/*#__PURE__*/forwardRef(function(a,b){var c,d=a.media,e=void 0===d?"":d,f=a.title,g=a.content,h=a.as,i=a.button,j=a.decision,k=a.disabled,l=void 0!==k&&k,m=a.complex,n=a.inverseMediaCircle,o=a.className,p=a.showMediaAtAllSizes,q=a.showMediaCircle,r=a.isContainerAligned,s=_objectWithoutProperties(a,_excluded),t=null!==(c=h)&&void 0!==c?c:"label";return/*#__PURE__*/_jsx(t,_objectSpread(_objectSpread({},s),{},{ref:b,className:classNames("np-option",o,{"decision-complex":m,decision:!(void 0!==j)||j,disabled:l,"np-option__sm-media":p,"np-option__container-aligned":void 0!==r&&r}),disabled:l&&"button"===t,children:/*#__PURE__*/_jsxs("div",{className:"media",children:[e&&/*#__PURE__*/_jsx("div",{className:"media-left",children:!(void 0!==q)||q?/*#__PURE__*/_jsx("div",{className:classNames("circle circle-sm text-primary",{"circle-inverse":!(void 0!==n)||n}),children:e}):/*#__PURE__*/_jsx("div",{className:"np-option__no-media-circle",children:e})}),/*#__PURE__*/_jsxs("div",{className:"media-body",children:[/*#__PURE__*/_jsx(Body,{as:"span",type:Typography.BODY_LARGE_BOLD,className:"text-primary np-option__title d-block",children:f}),g&&/*#__PURE__*/_jsx(Body,{className:"d-block np-option__body",children:g})]}),/*#__PURE__*/_jsx("div",{className:"media-right",children:i})]})}))});export default Option;

package/build/es/polyfill/radioOption/RadioOption.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.function.name.js";import PropTypes from"prop-types";import Option from"../common/Option";import RadioButton from"../common/RadioButton";import{jsx as _jsx}from"react/jsx-runtime";var RadioOption=function(a){var b=a["aria-label"],c=a.media,d=a.title,e=a.content,f=a.id,g=a.name,h=a.checked,i=a.onChange,j=a.complex,k=a.disabled,l=a.value,m=a.showMediaCircle,n=a.showMediaAtAllSizes;return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},{"aria-label":b,media:c,title:d,content:e,name:g,complex:j,disabled:k,showMediaCircle:m,showMediaAtAllSizes:n}),{},{button:/*#__PURE__*/_jsx(RadioButton,{id:f,name:g,checked:h,disabled:k,value:l,onChange:i})}))};RadioOption.propTypes={"aria-label":PropTypes.string,media:PropTypes.node,id:PropTypes.string.isRequired,name:PropTypes.string.isRequired,title:PropTypes.node.isRequired,content:PropTypes.node,checked:PropTypes.bool,onChange:PropTypes.func.isRequired,complex:PropTypes.bool,disabled:PropTypes.bool,value:PropTypes.string,showMediaCircle:PropTypes.bool,showMediaAtAllSizes:PropTypes.bool},RadioOption.defaultProps={"aria-label":void 0,media:null,content:null,checked:!1,complex:!1,disabled:!1,showMediaCircle:!0,showMediaAtAllSizes:!1,value:""};export default RadioOption;
+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.function.name.js";import PropTypes from"prop-types";import Option from"../common/Option";import RadioButton from"../common/RadioButton";import{jsx as _jsx}from"react/jsx-runtime";var RadioOption=function(a){var b=a["aria-label"],c=a.media,d=a.title,e=a.content,f=a.id,g=a.name,h=a.checked,i=a.onChange,j=a.complex,k=a.disabled,l=a.value,m=a.showMediaCircle,n=a.showMediaAtAllSizes,o=a.isContainerAligned;return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},{"aria-label":b,media:c,title:d,content:e,name:g,complex:j,disabled:k,showMediaCircle:m,showMediaAtAllSizes:n,isContainerAligned:o}),{},{button:/*#__PURE__*/_jsx(RadioButton,{id:f,name:g,checked:h,disabled:k,value:l,onChange:i})}))};RadioOption.propTypes={"aria-label":PropTypes.string,media:PropTypes.node,id:PropTypes.string.isRequired,name:PropTypes.string.isRequired,title:PropTypes.node.isRequired,content:PropTypes.node,checked:PropTypes.bool,onChange:PropTypes.func.isRequired,complex:PropTypes.bool,disabled:PropTypes.bool,value:PropTypes.string,showMediaCircle:PropTypes.bool,showMediaAtAllSizes:PropTypes.bool,isContainerAligned:PropTypes.bool},RadioOption.defaultProps={"aria-label":void 0,media:null,content:null,checked:!1,complex:!1,disabled:!1,showMediaCircle:!0,showMediaAtAllSizes:!1,isContainerAligned:!1,value:""};export default RadioOption;

package/build/es/polyfill/switchOption/SwitchOption.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 Option from"../common/Option";import Switch from"../switch";import{jsx as _jsx}from"react/jsx-runtime";var stopPropagation=function(a){a&&(a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation())},SwitchOption=function(a){var b=a.checked,c=a.complex,d=a.content,e=a.disabled,f=a.id,g=a.media,h=a.onChange,i=a.title,j=a.showMediaCircle,k=a.showMediaAtAllSizes,l=a["aria-label"],m=function(a){stopPropagation(a);e||h(!b)};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},{media:g,title:i,content:d,complex:c,disabled:e,showMediaCircle:j,showMediaAtAllSizes:k}),{},{button:/*#__PURE__*/_jsx(Switch,{id:f,checked:b,disabled:e,"aria-label":l,onClick:m}),onClick:m}))};export default SwitchOption;
+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 Option from"../common/Option";import Switch from"../switch";import{jsx as _jsx}from"react/jsx-runtime";var stopPropagation=function(a){a&&(a.stopPropagation(),a.preventDefault(),a.nativeEvent&&a.nativeEvent.stopImmediatePropagation&&a.nativeEvent.stopImmediatePropagation())},SwitchOption=function(a){var b=a.checked,c=a.complex,d=a.content,e=a.disabled,f=a.id,g=a.media,h=a.onChange,i=a.title,j=a.showMediaCircle,k=a.showMediaAtAllSizes,l=a.isContainerAligned,m=a["aria-label"],n=function(a){stopPropagation(a);e||h(!b)};return/*#__PURE__*/_jsx(Option,_objectSpread(_objectSpread({},{media:g,title:i,content:d,complex:c,disabled:e,showMediaCircle:j,showMediaAtAllSizes:k,isContainerAligned:l}),{},{button:/*#__PURE__*/_jsx(Switch,{id:f,checked:b,disabled:e,"aria-label":m,onClick:n}),onClick:n}))};export default SwitchOption;

package/build/es/polyfill/switchOption/SwitchOption.story.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{text,boolean}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import SwitchOption from"./SwitchOption";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:SwitchOption,title:"Option/SwitchOption"};var Template=function(){var a=useState(!1),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("title","Switch option"),f=text("content","Normally, the button and icon are vertically centered."),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1);return/*#__PURE__*/_jsx(SwitchOption,{media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:e,content:f,id:"id",checked:c,complex:!1,disabled:g,showMediaAtAllSizes:h,"aria-label":e,onChange:d})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{action}from"@storybook/addon-actions";import{text,boolean}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{Nudge}from"..";import SwitchOption from"./SwitchOption";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:SwitchOption,title:"Option/SwitchOption"};var Template=function(){var a=useState(!1),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("title","Switch option"),f=text("content","Normally, the button and icon are vertically centered."),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1),i=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(SwitchOption,{media:/*#__PURE__*/_jsx(FastFlagIcon,{}),title:e,content:f,id:"id",checked:c,complex:!1,disabled:g,showMediaAtAllSizes:h,isContainerAligned:i,"aria-label":e,onChange:d})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__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")})]})};