@transferwise/components 0.0.0-experimental-e4bc95f → 0.0.0-experimental-cc13b4c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/es/no-polyfill/accordion/Accordion.story.js +1 -0
- package/build/es/no-polyfill/actionButton/ActionButton.story.js +1 -1
- package/build/es/no-polyfill/avatar/Avatar.story.js +1 -1
- package/build/es/no-polyfill/button/Button.story.js +1 -0
- package/build/es/no-polyfill/checkbox/Checkbox.story.js +1 -0
- package/build/es/no-polyfill/common/DOMOperations/DOMOperations.js +6 -6
- package/build/es/no-polyfill/common/DOMOperations/index.js +1 -1
- package/build/es/no-polyfill/common/bottomSheet/BottomSheet.story.js +2 -0
- package/build/es/no-polyfill/common/index.js +1 -1
- package/build/es/no-polyfill/dateInput/DateInput.story.js +1 -0
- package/build/es/no-polyfill/dimmer/Dimmer.js +2 -2
- package/build/es/no-polyfill/info/Info.story.js +1 -0
- package/build/es/no-polyfill/modal/Modal.story.js +2 -1
- package/build/es/no-polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
- package/build/es/no-polyfill/phoneNumberInput/utils/excludeCountries/excludeCountries.js +8 -0
- package/build/es/no-polyfill/phoneNumberInput/utils/excludeCountries/index.js +1 -0
- package/build/es/no-polyfill/phoneNumberInput/utils/index.js +1 -1
- package/build/es/no-polyfill/tooltip/Tooltip.story.js +1 -1
- package/build/es/polyfill/accordion/Accordion.story.js +1 -0
- package/build/es/polyfill/actionButton/ActionButton.story.js +1 -1
- package/build/es/polyfill/avatar/Avatar.story.js +1 -1
- package/build/es/polyfill/button/Button.story.js +1 -0
- package/build/es/polyfill/checkbox/Checkbox.story.js +1 -0
- package/build/es/polyfill/common/DOMOperations/DOMOperations.js +6 -6
- package/build/es/polyfill/common/DOMOperations/index.js +1 -1
- package/build/es/polyfill/common/bottomSheet/BottomSheet.story.js +2 -0
- package/build/es/polyfill/common/index.js +1 -1
- package/build/es/polyfill/dateInput/DateInput.story.js +1 -0
- package/build/es/polyfill/dimmer/Dimmer.js +2 -2
- package/build/es/polyfill/info/Info.story.js +1 -0
- package/build/es/polyfill/modal/Modal.story.js +2 -1
- package/build/es/polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
- package/build/es/polyfill/phoneNumberInput/utils/excludeCountries/excludeCountries.js +8 -0
- package/build/es/polyfill/phoneNumberInput/utils/excludeCountries/index.js +1 -0
- package/build/es/polyfill/phoneNumberInput/utils/index.js +1 -1
- package/build/es/polyfill/tooltip/Tooltip.story.js +1 -1
- package/build/types/accordion/Accordion.story.d.ts +46 -0
- package/build/types/avatar/Avatar.story.d.ts +3 -1
- package/build/types/button/Button.story.d.ts +4586 -0
- package/build/types/checkbox/Checkbox.story.d.ts +54 -0
- package/build/types/common/DOMOperations/DOMOperations.d.ts +2 -2
- package/build/types/common/DOMOperations/index.d.ts +3 -3
- package/build/types/common/bottomSheet/BottomSheet.story.d.ts +29 -0
- package/build/types/common/index.d.ts +1 -1
- package/build/types/dateInput/DateInput.story.d.ts +71 -0
- package/build/types/info/Info.story.d.ts +39 -0
- package/build/types/modal/Modal.story.d.ts +20 -3
- package/build/types/phoneNumberInput/PhoneNumberInput.d.ts +4 -0
- package/build/types/phoneNumberInput/utils/excludeCountries/excludeCountries.d.ts +1 -0
- package/build/types/phoneNumberInput/utils/excludeCountries/index.d.ts +1 -0
- package/build/types/phoneNumberInput/utils/index.d.ts +1 -0
- package/build/types/test-utils/VariantDecorator.d.ts +18 -0
- package/build/types/test-utils/story-config.d.ts +18 -50
- package/build/types/tooltip/Tooltip.story.d.ts +17 -9
- package/build/umd/no-polyfill/main.js +1 -1
- package/build/umd/polyfill/main.js +1 -1
- package/package.json +2 -1
- package/build/types/test-utils/GlobalsDecorator.d.ts +0 -4
|
@@ -0,0 +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{FastFlag as FastFlagIcon}from"@transferwise/icons";import{Scroll,Size}from"../common";import Modal from"../modal";import{lorem10,lorem40,storyConfig}from"../test-utils";import Accordion from"./Accordion";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:Accordion,title:"Content/Accordion",args:{items:[{title:"Item 1",content:lorem10,id:"Item 1"},{title:"Item 2",content:lorem40,id:"Item 2"},{title:"Item 3",content:lorem10,id:"Item 3"},{title:"Item 4",content:lorem10,id:"Item 4",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})}]}};export var Basic={args:{indexOpen:0}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var Variants=storyConfig({args:{indexOpen:0}},{variants:["default","dark","rtl"]});export var Multiple={render:function render(a){var b=a.items;return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]]})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]],indexOpen:0})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:b}))]})}};export var InModal={parameters:{chromatic:{delay:1e3}},render:function render(a){var b=a.items;return/*#__PURE__*/_jsx(Modal,{body:/*#__PURE__*/_jsxs("div",{className:"p-a-1",children:[/*#__PURE__*/_jsx("h3",{className:"m-t-2 m-b-4 text-xs-center",children:"Large transfer tips"}),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]]})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]],indexOpen:0})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:b}))]}),scroll:Scroll.CONTENT,size:Size.LARGE,open:!0,footer:/*#__PURE__*/_jsx("div",{className:"p-a-3 text-xs-center",children:/*#__PURE__*/_jsx("a",{href:"/large-amounts",children:"Learn more"})}),onClose:function onClose(){}})}};export var InModalMobile=storyConfig(InModal,{variants:["mobile"]});
|
|
@@ -1 +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{Settings}from"@transferwise/icons";import ActionButton from"./ActionButton";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionButton,title:"Actions/ActionButton",tags:["autodocs"]};export var Basic={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(ActionButton,_objectSpread(_objectSpread({},a),{},{children:"Button label"}))})}};export var WithIcon={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsxs(ActionButton,_objectSpread(_objectSpread({},a),{},{children:[/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),"Button label"]}))})}};export var Disabled={render:WithIcon.render,args:{disabled:!0}};
|
|
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{Settings}from"@transferwise/icons";import{storyConfig}from"../test-utils/story-config";import ActionButton from"./ActionButton";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionButton,title:"Actions/ActionButton",tags:["autodocs"]};export var Basic={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(ActionButton,_objectSpread(_objectSpread({},a),{},{children:"Button label"}))})}};export var WithIcon={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsxs(ActionButton,_objectSpread(_objectSpread({},a),{},{children:[/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),"Button label"]}))})}};export var Disabled=storyConfig({render:WithIcon.render,args:{disabled:!0}},{variants:["default","dark","rtl","mobile"]});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
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*as wiseIcons from"@transferwise/icons";import{Size}from"../common";import{storyConfig}from"../test-utils";import Avatar,{AvatarType}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Avatar,title:"Content/Avatar",tags:["autodocs"]};export var Emoji={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:"\u2708\uFE0F"}))},args:{type:AvatarType.EMOJI,size:Size.MEDIUM}};export var Flag={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/flags/square/gbp.svg",alt:""})}))},args:{type:AvatarType.THUMBNAIL,size:Size.MEDIUM,outlined:!0}};export var Table=storyConfig({render:function render(){var a="https://wise.com/web-art/assets/flags/gbp.svg",b="#d6f5e3",c="\u2708\uFE0F",d="GN",e=wiseIcons.Check;return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsxs("table",{children:["Outlined",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})})]}),"Image URL",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})})]}),"Emoji",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,children:c})})]}),/*#__PURE__*/_jsx("div",{style:{paddingBottom:"20px"},children:/*#__PURE__*/_jsx("span",{style:{position:"absolute"},children:"Custom background and icon"})}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:16})})})]}),"Initials",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,children:d})})]}),"Branded",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,backgroundColorSeed:"1",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,backgroundColorSeed:"2",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,backgroundColorSeed:"3",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,backgroundColorSeed:"4",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,backgroundColorSeed:"5",children:d})})]})]})})}},{variants:["default","dark","rtl"]});
|
|
@@ -0,0 +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{userEvent,within}from"@storybook/testing-library";import{ControlType,Priority}from"../common";import{storyConfig}from"../test-utils";import Button from"./Button";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:Button,title:"Actions/Button",args:{children:"Button text"},argTypes:{as:{type:{name:"enum",value:["button","a"]}}},tags:["autodocs"]};export var Basic={};export var Focused=storyConfig({parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.click(c.getByRole("button"))}},{variants:["dark"]});export var Variants=storyConfig({args:{className:"m-r-2"},render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Accent"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,type:ControlType.ACCENT})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,type:ControlType.ACCENT})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.TERTIARY,type:ControlType.ACCENT}))]}),/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Positive"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,type:ControlType.POSITIVE})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,type:ControlType.POSITIVE}))]}),/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Negative"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,type:ControlType.NEGATIVE})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,type:ControlType.NEGATIVE}))]}),/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Disabled"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,disabled:!0})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,disabled:!0})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.TERTIARY,disabled:!0}))]})]})}},{variants:["default","dark","rtl"]});export var SocialMedia=storyConfig({render:function render(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("div",{className:"m-b-2",children:/*#__PURE__*/_jsx("button",{type:"button",className:"btn btn-google",children:"Login with Google"})}),/*#__PURE__*/_jsx("div",{className:"m-b-2",children:/*#__PURE__*/_jsx("button",{type:"button",className:"btn btn-facebook",children:"Login with Facebook"})})]})}},{variants:["default","dark","rtl"]});export var SocialMediaMobile=storyConfig(SocialMedia,{variants:["default","dark","rtl","mobile"]});
|
|
@@ -0,0 +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{lorem10,storyConfig}from"../test-utils";import Checkbox from"./Checkbox";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:Checkbox,title:"Forms/Checkbox",args:{label:"This is the label"},tags:["autodocs"]};export var Basic={};export var Multiple=storyConfig({render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Checkbox,_objectSpread({},a)),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{checked:!0})),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{label:lorem10})),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{label:lorem10,secondary:lorem10})),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{disabled:!0}))]})}},{variants:["default","dark","rtl"]});export var MultipleMobile=storyConfig(Multiple,{variants:["default","dark","rtl","mobile"]});
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Defined in `Dimmer.less`
|
|
3
|
-
*/var
|
|
4
|
-
* Apply {@link
|
|
3
|
+
*/var NO_SCROLL_BODY_CLASS="no-scroll";/**
|
|
4
|
+
* Apply {@link NO_SCROLL_BODY_CLASS} that disables scroll on page (e.g use in Dimmer to disable scroll behind the component)
|
|
5
5
|
*
|
|
6
|
-
* CSS class needs to be applied for `html` and
|
|
7
|
-
*/export var
|
|
8
|
-
* Clean up after {@link
|
|
9
|
-
*/export var
|
|
6
|
+
* For a proper disabling, the CSS class needs to be applied for `html` and `body` elements.
|
|
7
|
+
*/export var addNoScrollBodyClass=function(){document.documentElement.classList.add(NO_SCROLL_BODY_CLASS),document.body.classList.add(NO_SCROLL_BODY_CLASS)};/**
|
|
8
|
+
* Clean up after {@link addNoScrollBodyClass} function
|
|
9
|
+
*/export var removeNoScrollBodyClass=function(){document.documentElement.classList.remove(NO_SCROLL_BODY_CLASS),document.body.classList.remove(NO_SCROLL_BODY_CLASS)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{addNoScrollBodyClass,removeNoScrollBodyClass}from"./DOMOperations";export{addNoScrollBodyClass,removeNoScrollBodyClass};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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}from"@transferwise/icons";import{useState}from"react";import Body from"../../body/Body";import Button from"../../button";import NavigationOption from"../../navigationOption";import{lorem10,lorem500,storyConfig}from"../../test-utils";import Title from"../../title/Title";import{Typography}from"../propsValues/typography";import BottomSheet from"./BottomSheet";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:BottomSheet,title:"Dialogs/BottomSheet",args:{open:!0},render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
2
|
+
var b=useState(a.open),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsxs("div",{style:{height:"2000px"},children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return e(!0)},children:"Open BottomSheet"}),/*#__PURE__*/_jsx(BottomSheet,_objectSpread(_objectSpread({},a),{},{open:d,onClose:function onClose(){e(!1),action("BottomSheet closed")()}}))]})}};export var Basic={args:{children:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SECTION,children:"Money without borders"}),lorem10,/*#__PURE__*/_jsx("br",{}),/*#__PURE__*/_jsx("br",{}),/*#__PURE__*/_jsx(NavigationOption,{title:"Navigation option",content:"Button and icon are vertically centered.",media:/*#__PURE__*/_jsx(FastFlag,{size:24}),isContainerAligned:!0})]})},parameters:{chromatic:{delay:1e3}}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var WithOverflowContent={args:{children:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SECTION,children:"Money without borders"}),lorem10,/*#__PURE__*/_jsx(NavigationOption,{title:"Navigation option",content:"Button and icon are vertically centered.",media:/*#__PURE__*/_jsx(FastFlag,{size:24})}),/*#__PURE__*/_jsx(NavigationOption,{title:"Navigation option",content:"Button and icon are vertically centered.",media:/*#__PURE__*/_jsx(FastFlag,{size:24}),isContainerAligned:!0}),lorem500,/*#__PURE__*/_jsx(Body,{type:Typography.BODY_DEFAULT_BOLD,children:lorem10})]})},parameters:{chromatic:{delay:1e3}}};export var WithOverflowContentMobile=storyConfig(WithOverflowContent,{variants:["mobile"]});export var WithOverflowContentDark=storyConfig(WithOverflowContent,{variants:["dark"]});export var WithOverflowContentDarkMobile=storyConfig(WithOverflowContent,{variants:["dark","mobile"]});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{default as HistoryNavigator}from"./historyNavigator";export*from"./domHelpers";export{
|
|
1
|
+
export{default as HistoryNavigator}from"./historyNavigator";export*from"./domHelpers";export{addNoScrollBodyClass,removeNoScrollBodyClass}from"./DOMOperations";export*from"./theme";export*from"./direction";// Props
|
|
2
2
|
export*from"./propsValues/control";export{Breakpoint}from"./propsValues/breakpoint";export*from"./propsValues/size";export*from"./propsValues/typography";export*from"./propsValues/width";export{Type}from"./propsValues/type";export{DateMode}from"./propsValues/dateMode";export{MonthFormat}from"./propsValues/monthFormat";export*from"./propsValues/position";export{Layout}from"./propsValues/layouts";export{Status}from"./propsValues/status";export{Sentiment}from"./propsValues/sentiment";export{ProfileType}from"./propsValues/profileType";export{Variant}from"./propsValues/variant";export*from"./propsValues/scroll";export{MarkdownNodeType}from"./propsValues/markdownNodeType";export{FileType}from"./fileType";export{Key}from"./key";export*from"./locale";export*from"./commonProps";
|
|
@@ -0,0 +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{DateInput,InlineAlert}from"..";import{lorem10,storyConfig}from"../test-utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:DateInput,title:"Forms/DateInput",args:{dayLabel:"Day input",monthLabel:"Month select",yearLabel:"Year input",selectProps:{buttonProps:{"aria-label":"Select month"},dropdownProps:{"aria-label":"Month options"}}},tags:["autodocs"]};export var Basic={};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var InputError=_objectSpread(_objectSpread({},Basic),{},{render:function render(a){return/*#__PURE__*/_jsxs("div",{className:"form-group has-error",children:[/*#__PURE__*/_jsx(DateInput,_objectSpread({},a)),/*#__PURE__*/_jsx(InlineAlert,{type:"error",children:lorem10})]})}});export var InputErrorMobile=storyConfig(InputError,{variants:["mobile"]});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{ThemeProvider,useTheme}from"@wise/components-theming";import classNames from"classnames";import{useCallback,useEffect,useRef,useState}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{ThemeProvider,useTheme}from"@wise/components-theming";import classNames from"classnames";import{useCallback,useEffect,useRef,useState}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{addNoScrollBodyClass,removeNoScrollBodyClass}from"../common";import{isIosDevice}from"../common/deviceDetection";import FocusBoundary from"../common/focusBoundary";import withNextPortal from"../withNextPortal/withNextPortal";import DimmerManager from"./dimmerManager";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export var EXIT_ANIMATION=350;var dimmerManager=new DimmerManager;export var handleTouchMove=function(a){var b=a.target.classList.contains("dimmer");// disable scroll on iOS devices for Dimmer area
|
|
2
2
|
// this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908
|
|
3
3
|
// note: scrolling still works for children(s) as expected
|
|
4
4
|
isIosDevice()&&b&&(a.stopPropagation(),a.preventDefault())};var Dimmer=function(a){var b=a.children,c=a.className,d=a.disableClickToClose,e=a.contentPosition,f=a.fadeContentOnEnter,g=void 0!==f&&f,h=a.fadeContentOnExit,i=a.open,j=void 0!==i&&i,k=a.scrollable,l=a.transparent,m=void 0!==l&&l,n=a.onClose,o=useState(!1),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useRef(null),t=function(a){a.target===s.current&&(null===n||void 0===n?void 0:n(a))},u=useCallback(function(a){"Escape"!==a.key||(a.stopPropagation(),n&&s.current&&dimmerManager.isTop(s.current)&&n(a))},[n]);return useEffect(function(){var a=s.current;return j&&(document.addEventListener("keydown",u),null===a||void 0===a?void 0:a.addEventListener("touchmove",handleTouchMove,{passive:!0})),function(){document.removeEventListener("keydown",u),null===a||void 0===a?void 0:a.removeEventListener("touchmove",handleTouchMove)}},[u,j]),/*#__PURE__*/_jsx(DimmerWrapper,{open:j,hasNotExited:q,children:/*#__PURE__*/_jsx(CSSTransition,{nodeRef:s,in:j,appear:!0// Wait for animation to finish before unmount.
|
|
5
|
-
,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":g}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":g}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==h&&h})},unmountOnExit:!0,onEnter:function onEnter(){r(!0),s.current&&dimmerManager.add(s.current)},onExited:function onExited(){r(!1),s.current&&dimmerManager.remove(s.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!m,children:/*#__PURE__*/_jsx(FocusBoundary,{children:/*#__PURE__*/_jsx("div",{ref:s,className:classNames("dimmer",{"dimmer--scrollable":void 0!==k&&k,"dimmer--transparent":m},c),role:"presentation",onClick:function handleClick(a){void 0!==d&&d||!n||t(a)},children:/*#__PURE__*/_jsx("div",{className:classNames("dimmer-content-positioner",null!=e&&["d-flex justify-content-center",{"align-items-start":"top"===e,"align-items-center":"center"===e,"align-items-end":"bottom"===e}]),children:b})})})})})})},DimmerWrapper=function(a){var b=a.open,c=a.hasNotExited,d=a.children,e=useTheme(),f=e.screenMode,g=e.theme;return b||c?/*#__PURE__*/_jsx(ThemeProvider,{theme:g,screenMode:f,isNotRootProvider:!0,children:d}):/*#__PURE__*/_jsx(_Fragment,{children:d})};export var DimmerContentWrapper=function(a){var b=a.children,c=a.scrollBody;return useEffect(function(){return c&&
|
|
5
|
+
,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":g}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":g}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==h&&h})},unmountOnExit:!0,onEnter:function onEnter(){r(!0),s.current&&dimmerManager.add(s.current)},onExited:function onExited(){r(!1),s.current&&dimmerManager.remove(s.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!m,children:/*#__PURE__*/_jsx(FocusBoundary,{children:/*#__PURE__*/_jsx("div",{ref:s,className:classNames("dimmer",{"dimmer--scrollable":void 0!==k&&k,"dimmer--transparent":m},c),role:"presentation",onClick:function handleClick(a){void 0!==d&&d||!n||t(a)},children:/*#__PURE__*/_jsx("div",{className:classNames("dimmer-content-positioner",null!=e&&["d-flex justify-content-center",{"align-items-start":"top"===e,"align-items-center":"center"===e,"align-items-end":"bottom"===e}]),children:b})})})})})})},DimmerWrapper=function(a){var b=a.open,c=a.hasNotExited,d=a.children,e=useTheme(),f=e.screenMode,g=e.theme;return b||c?/*#__PURE__*/_jsx(ThemeProvider,{theme:g,screenMode:f,isNotRootProvider:!0,children:d}):/*#__PURE__*/_jsx(_Fragment,{children:d})};export var DimmerContentWrapper=function(a){var b=a.children,c=a.scrollBody;return useEffect(function(){return c&&addNoScrollBodyClass(),function(){c&&removeNoScrollBodyClass()}},[c]),b};// Export without the Portal for tests only
|
|
6
6
|
export{Dimmer};export default withNextPortal(Dimmer);
|
|
@@ -0,0 +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{userEvent,within}from"@storybook/testing-library";import{lorem10,storyConfig}from"../test-utils";import Info,{InfoPresentation}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Info,title:"Dialogs/Info",args:{"aria-label":"Click here for more details",title:"Fast transfer hint",content:lorem10},render:function render(a){return/*#__PURE__*/_jsxs("p",{children:[/*#__PURE__*/_jsx("span",{children:"Fast transfer"})," ",/*#__PURE__*/_jsx(Info,_objectSpread({},a))]})}};export var Basic=storyConfig({},{variants:["default","dark","rtl"]});export var OpenedPopover={parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.click(c.getByRole("button"))}};export var OpenedPopoverMobile=storyConfig(OpenedPopover,{variants:["mobile"]});export var OpenedModal=_objectSpread(_objectSpread({},OpenedPopover),{},{args:{presentation:InfoPresentation.MODAL}});export var OpenedModalMobile=storyConfig(OpenedModal,{variants:["mobile"]});
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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{
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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{useState}from"react";import{Button,Modal}from"..";import{Scroll}from"../common";import{lorem10,lorem1000,storyConfig}from"../test-utils";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:Modal,title:"Dialogs/Modal",args:{size:"md",position:"center",open:!0},parameters:{chromatic:{delay:2e3}}};export var Basic={args:{title:"Title",body:lorem10,scroll:Scroll.VIEWPORT,footer:/*#__PURE__*/_jsx(Button,{block:!0,children:"Action"})},render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
2
|
+
var b=useState(a.open),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return e(!0)},children:"Open Modal"}),/*#__PURE__*/_jsx(Modal,_objectSpread(_objectSpread({},a),{},{open:d,onClose:function onClose(){e(!1),action("Modal closed")()}}))]})}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var ContentScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.CONTENT}};export var ContentScrollMobile=storyConfig(ContentScroll,{variants:["mobile"]});export var ViewportScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.VIEWPORT}};export var ViewportScrollMobile=storyConfig(ViewportScroll,{variants:["mobile"]});export var WithoutTitle={args:{body:lorem1000,scroll:Scroll.CONTENT}};export var WithoutTitleMobile=storyConfig(WithoutTitle,{variants:["mobile"]});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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{isArray}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useState,useEffect}from"react";import{useIntl}from"react-intl";import{Size}from"../common";import Select from"../select";import countries from"./data/countries";import{explodeNumberModel,filterOptionsForQuery,isValidPhoneNumber,cleanNumber,setDefaultPrefix,isStringNumeric,sortArrayByProperty,groupCountriesByPrefix}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ALLOWED_PHONE_CHARS=/^$|^[\d-\s]+$/,PhoneNumberInput=function(a){var b=a.id,c=a.onChange,d=a.searchPlaceholder,e=a.disabled,f=a.required,g=a.size,h=a.placeholder,i=a.onFocus,j=a.onBlur,k=a.countryCode,l=a.selectProps,m=useIntl(),n
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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{isArray}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useState,useEffect}from"react";import{useIntl}from"react-intl";import{Size}from"../common";import Select from"../select";import countries from"./data/countries";import{explodeNumberModel,filterOptionsForQuery,isValidPhoneNumber,cleanNumber,setDefaultPrefix,isStringNumeric,sortArrayByProperty,groupCountriesByPrefix,excludeCountries}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ALLOWED_PHONE_CHARS=/^$|^[\d-\s]+$/,PhoneNumberInput=function(a){var b=a.id,c=a.onChange,d=a.searchPlaceholder,e=a.disabled,f=a.required,g=a.size,h=a.placeholder,i=a.onFocus,j=a.onBlur,k=a.countryCode,l=a.selectProps,m=a.disabledCountries,n=useIntl(),o=n.locale,p=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(o,k),suffix:""}}()),q=_slicedToArray(p,2),r=q[0],s=q[1],t=useState(null),u=_slicedToArray(t,2),v=u[0],w=u[1],x=useState(""),y=_slicedToArray(x,2),z=y[0],A=y[1],B=excludeCountries(countries,m),C=groupCountriesByPrefix(sortArrayByProperty(B,"iso3")),D=groupCountriesByPrefix(sortArrayByProperty(B,"phone")),E=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(z)?D:C,z);return a.map(function(a){var b=a.phone,c=a.iso3,d=a.iso2,e="";return c?e=isArray(c)?c.join(", "):c:d&&(e=isArray(d)?d.join(", "):d),{value:b,label:b,note:e}})}();return useEffect(function(){if(null===v)return w(r);var a=r.prefix+r.suffix,b=v.prefix+v.suffix;if(a!==b){var d=isValidPhoneNumber(a)?cleanNumber(a):null;c(d),w(r)}},[c,v,r]),/*#__PURE__*/_jsxs("div",{className:"tw-telephone",children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,_objectSpread({id:b?"".concat(b,"-select"):void 0,options:E,selected:{value:r.prefix,label:r.prefix},placeholder:"Select an option...",searchPlaceholder:d,dropdownWidth:Size.SMALL,searchValue:z,required:f,disabled:e,size:g,onChange:function onPrefixChange(a){var b=a.value;A(""),s({prefix:b,suffix:r.suffix})},onSearchChange:function onSearchChange(a){return A(a)}},l))}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(g),children:/*#__PURE__*/_jsx("input",{id:b,name:"phoneNumber",inputMode:"numeric",value:r.suffix,className:"form-control",disabled:e,required:f,placeholder:h,onChange:function onSuffixChange(a){var b=a.target.value,c=void 0===b?"":b;ALLOWED_PHONE_CHARS.test(c)&&s({prefix:r.prefix,suffix:c})},onPaste:function onPaste(a){if(a.nativeEvent.clipboardData){var b=(a.nativeEvent.clipboardData.getData("text/plain")||"").replace(/(\s|-)+/g,""),c=explodeNumberModel(b),d=c.prefix,e=c.suffix,f=E.find(function(a){var b=a.value;return b===d});f&&ALLOWED_PHONE_CHARS.test(e)&&s({prefix:d,suffix:e})}},onFocus:i,onBlur:j})})})]})};PhoneNumberInput.propTypes={id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,initialValue:PropTypes.string,onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,countryCode:PropTypes.string,searchPlaceholder:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),placeholder:PropTypes.string,selectProps:PropTypes.object,/** List of iso3 codes of countries to remove from the list */disabledCountries:PropTypes.arrayOf(PropTypes.string)},PhoneNumberInput.defaultProps={id:null,required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:"",selectProps:{},disabledCountries:[]};export default PhoneNumberInput;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
// Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
|
|
2
|
+
var filterCountriesByIso3=function(a,b){var c=new Set(b);return a.filter(function(a){return!c.has(a.iso3)})};/**
|
|
3
|
+
* Removes the countries sepecified in the second param
|
|
4
|
+
*
|
|
5
|
+
* @param {Array} countries: list of country metadata objects
|
|
6
|
+
* @param {Array} disabledCountries: list of iso3 country codes to remove from the list
|
|
7
|
+
* @returns
|
|
8
|
+
*/export var excludeCountries=function(a,b){return 0<b.length?filterCountriesByIso3(a,b):a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{excludeCountries}from"./excludeCountries";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{setDefaultPrefix}from"./setDefaultPrefix";export{isValidPhoneNumber}from"./isValidPhoneNumber";export{explodeNumberModel}from"./explodeNumberModel";export{longestMatchingPrefix}from"./longestMatchingPrefix";export{findCountryByPrefix}from"./findCountryByPrefix";export{findCountryByCode}from"./findCountryByCode";export{filterOptionsForQuery}from"./filterOptionsForQuery";export{isOptionAndFitsQuery}from"./isOptionAndFitsQuery";export{cleanNumber}from"./cleanNumber";export{isStringNumeric}from"./isStringNumeric";export{sortArrayByProperty}from"./sortArrayByProperty";export{groupCountriesByPrefix}from"./groupCountriesByPrefix";
|
|
1
|
+
export{setDefaultPrefix}from"./setDefaultPrefix";export{isValidPhoneNumber}from"./isValidPhoneNumber";export{explodeNumberModel}from"./explodeNumberModel";export{longestMatchingPrefix}from"./longestMatchingPrefix";export{findCountryByPrefix}from"./findCountryByPrefix";export{findCountryByCode}from"./findCountryByCode";export{filterOptionsForQuery}from"./filterOptionsForQuery";export{isOptionAndFitsQuery}from"./isOptionAndFitsQuery";export{cleanNumber}from"./cleanNumber";export{isStringNumeric}from"./isStringNumeric";export{sortArrayByProperty}from"./sortArrayByProperty";export{groupCountriesByPrefix}from"./groupCountriesByPrefix";export{excludeCountries}from"./excludeCountries";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
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{userEvent,within}from"@storybook/testing-library";import Button from"../button";import{storyConfig}from"../test-utils";import Tooltip from"./Tooltip";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Tooltip,title:"Dialogs/Tooltip",args:{label:"This is the content",position:"bottom"},render:function render(a){return/*#__PURE__*/_jsx("div",{className:"text-xs-center",style:{flexBasis:"150px"},children:/*#__PURE__*/_jsx(Tooltip,_objectSpread(_objectSpread({},a),{},{children:/*#__PURE__*/_jsx(Button,{children:"Hover me"})}))})},tags:["autodocs"]};export var Basic={};export var OpenedTooltip={parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.hover(c.getByRole("button"))}};export var OpenedTooltipDark=storyConfig(OpenedTooltip,{variants:["dark"]});
|
|
@@ -0,0 +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{FastFlag as FastFlagIcon}from"@transferwise/icons";import{Scroll,Size}from"../common";import Modal from"../modal";import{lorem10,lorem40,storyConfig}from"../test-utils";import Accordion from"./Accordion";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:Accordion,title:"Content/Accordion",args:{items:[{title:"Item 1",content:lorem10,id:"Item 1"},{title:"Item 2",content:lorem40,id:"Item 2"},{title:"Item 3",content:lorem10,id:"Item 3"},{title:"Item 4",content:lorem10,id:"Item 4",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})}]}};export var Basic={args:{indexOpen:0}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var Variants=storyConfig({args:{indexOpen:0}},{variants:["default","dark","rtl"]});export var Multiple={render:function render(a){var b=a.items;return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]]})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]],indexOpen:0})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:b}))]})}};export var InModal={parameters:{chromatic:{delay:1e3}},render:function render(a){var b=a.items;return/*#__PURE__*/_jsx(Modal,{body:/*#__PURE__*/_jsxs("div",{className:"p-a-1",children:[/*#__PURE__*/_jsx("h3",{className:"m-t-2 m-b-4 text-xs-center",children:"Large transfer tips"}),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]]})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]],indexOpen:0})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:b}))]}),scroll:Scroll.CONTENT,size:Size.LARGE,open:!0,footer:/*#__PURE__*/_jsx("div",{className:"p-a-3 text-xs-center",children:/*#__PURE__*/_jsx("a",{href:"/large-amounts",children:"Learn more"})}),onClose:function onClose(){}})}};export var InModalMobile=storyConfig(InModal,{variants:["mobile"]});
|
|
@@ -1 +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{Settings}from"@transferwise/icons";import ActionButton from"./ActionButton";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionButton,title:"Actions/ActionButton",tags:["autodocs"]};export var Basic={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(ActionButton,_objectSpread(_objectSpread({},a),{},{children:"Button label"}))})}};export var WithIcon={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsxs(ActionButton,_objectSpread(_objectSpread({},a),{},{children:[/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),"Button label"]}))})}};export var Disabled={render:WithIcon.render,args:{disabled:!0}};
|
|
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{Settings}from"@transferwise/icons";import{storyConfig}from"../test-utils/story-config";import ActionButton from"./ActionButton";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionButton,title:"Actions/ActionButton",tags:["autodocs"]};export var Basic={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(ActionButton,_objectSpread(_objectSpread({},a),{},{children:"Button label"}))})}};export var WithIcon={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsxs(ActionButton,_objectSpread(_objectSpread({},a),{},{children:[/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),"Button label"]}))})}};export var Disabled=storyConfig({render:WithIcon.render,args:{disabled:!0}},{variants:["default","dark","rtl","mobile"]});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
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*as wiseIcons from"@transferwise/icons";import{Size}from"../common";import{storyConfig}from"../test-utils";import Avatar,{AvatarType}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Avatar,title:"Content/Avatar",tags:["autodocs"]};export var Emoji={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:"\u2708\uFE0F"}))},args:{type:AvatarType.EMOJI,size:Size.MEDIUM}};export var Flag={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/flags/square/gbp.svg",alt:""})}))},args:{type:AvatarType.THUMBNAIL,size:Size.MEDIUM,outlined:!0}};export var Table=storyConfig({render:function render(){var a="https://wise.com/web-art/assets/flags/gbp.svg",b="#d6f5e3",c="\u2708\uFE0F",d="GN",e=wiseIcons.Check;return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsxs("table",{children:["Outlined",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})})]}),"Image URL",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})})]}),"Emoji",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,children:c})})]}),/*#__PURE__*/_jsx("div",{style:{paddingBottom:"20px"},children:/*#__PURE__*/_jsx("span",{style:{position:"absolute"},children:"Custom background and icon"})}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:16})})})]}),"Initials",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,children:d})})]}),"Branded",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,backgroundColorSeed:"1",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,backgroundColorSeed:"2",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,backgroundColorSeed:"3",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,backgroundColorSeed:"4",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,backgroundColorSeed:"5",children:d})})]})]})})}},{variants:["default","dark","rtl"]});
|
|
@@ -0,0 +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{userEvent,within}from"@storybook/testing-library";import{ControlType,Priority}from"../common";import{storyConfig}from"../test-utils";import Button from"./Button";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:Button,title:"Actions/Button",args:{children:"Button text"},argTypes:{as:{type:{name:"enum",value:["button","a"]}}},tags:["autodocs"]};export var Basic={};export var Focused=storyConfig({parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.click(c.getByRole("button"))}},{variants:["dark"]});export var Variants=storyConfig({args:{className:"m-r-2"},render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Accent"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,type:ControlType.ACCENT})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,type:ControlType.ACCENT})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.TERTIARY,type:ControlType.ACCENT}))]}),/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Positive"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,type:ControlType.POSITIVE})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,type:ControlType.POSITIVE}))]}),/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Negative"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,type:ControlType.NEGATIVE})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,type:ControlType.NEGATIVE}))]}),/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Disabled"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,disabled:!0})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,disabled:!0})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.TERTIARY,disabled:!0}))]})]})}},{variants:["default","dark","rtl"]});export var SocialMedia=storyConfig({render:function render(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("div",{className:"m-b-2",children:/*#__PURE__*/_jsx("button",{type:"button",className:"btn btn-google",children:"Login with Google"})}),/*#__PURE__*/_jsx("div",{className:"m-b-2",children:/*#__PURE__*/_jsx("button",{type:"button",className:"btn btn-facebook",children:"Login with Facebook"})})]})}},{variants:["default","dark","rtl"]});export var SocialMediaMobile=storyConfig(SocialMedia,{variants:["default","dark","rtl","mobile"]});
|
|
@@ -0,0 +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{lorem10,storyConfig}from"../test-utils";import Checkbox from"./Checkbox";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:Checkbox,title:"Forms/Checkbox",args:{label:"This is the label"},tags:["autodocs"]};export var Basic={};export var Multiple=storyConfig({render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Checkbox,_objectSpread({},a)),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{checked:!0})),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{label:lorem10})),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{label:lorem10,secondary:lorem10})),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{disabled:!0}))]})}},{variants:["default","dark","rtl"]});export var MultipleMobile=storyConfig(Multiple,{variants:["default","dark","rtl","mobile"]});
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Defined in `Dimmer.less`
|
|
3
|
-
*/var
|
|
4
|
-
* Apply {@link
|
|
3
|
+
*/var NO_SCROLL_BODY_CLASS="no-scroll";/**
|
|
4
|
+
* Apply {@link NO_SCROLL_BODY_CLASS} that disables scroll on page (e.g use in Dimmer to disable scroll behind the component)
|
|
5
5
|
*
|
|
6
|
-
* CSS class needs to be applied for `html` and
|
|
7
|
-
*/export var
|
|
8
|
-
* Clean up after {@link
|
|
9
|
-
*/export var
|
|
6
|
+
* For a proper disabling, the CSS class needs to be applied for `html` and `body` elements.
|
|
7
|
+
*/export var addNoScrollBodyClass=function(){document.documentElement.classList.add(NO_SCROLL_BODY_CLASS),document.body.classList.add(NO_SCROLL_BODY_CLASS)};/**
|
|
8
|
+
* Clean up after {@link addNoScrollBodyClass} function
|
|
9
|
+
*/export var removeNoScrollBodyClass=function(){document.documentElement.classList.remove(NO_SCROLL_BODY_CLASS),document.body.classList.remove(NO_SCROLL_BODY_CLASS)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{addNoScrollBodyClass,removeNoScrollBodyClass}from"./DOMOperations";export{addNoScrollBodyClass,removeNoScrollBodyClass};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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}from"@transferwise/icons";import{useState}from"react";import Body from"../../body/Body";import Button from"../../button";import NavigationOption from"../../navigationOption";import{lorem10,lorem500,storyConfig}from"../../test-utils";import Title from"../../title/Title";import{Typography}from"../propsValues/typography";import BottomSheet from"./BottomSheet";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:BottomSheet,title:"Dialogs/BottomSheet",args:{open:!0},render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
2
|
+
var b=useState(a.open),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsxs("div",{style:{height:"2000px"},children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return e(!0)},children:"Open BottomSheet"}),/*#__PURE__*/_jsx(BottomSheet,_objectSpread(_objectSpread({},a),{},{open:d,onClose:function onClose(){e(!1),action("BottomSheet closed")()}}))]})}};export var Basic={args:{children:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SECTION,children:"Money without borders"}),lorem10,/*#__PURE__*/_jsx("br",{}),/*#__PURE__*/_jsx("br",{}),/*#__PURE__*/_jsx(NavigationOption,{title:"Navigation option",content:"Button and icon are vertically centered.",media:/*#__PURE__*/_jsx(FastFlag,{size:24}),isContainerAligned:!0})]})},parameters:{chromatic:{delay:1e3}}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var WithOverflowContent={args:{children:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SECTION,children:"Money without borders"}),lorem10,/*#__PURE__*/_jsx(NavigationOption,{title:"Navigation option",content:"Button and icon are vertically centered.",media:/*#__PURE__*/_jsx(FastFlag,{size:24})}),/*#__PURE__*/_jsx(NavigationOption,{title:"Navigation option",content:"Button and icon are vertically centered.",media:/*#__PURE__*/_jsx(FastFlag,{size:24}),isContainerAligned:!0}),lorem500,/*#__PURE__*/_jsx(Body,{type:Typography.BODY_DEFAULT_BOLD,children:lorem10})]})},parameters:{chromatic:{delay:1e3}}};export var WithOverflowContentMobile=storyConfig(WithOverflowContent,{variants:["mobile"]});export var WithOverflowContentDark=storyConfig(WithOverflowContent,{variants:["dark"]});export var WithOverflowContentDarkMobile=storyConfig(WithOverflowContent,{variants:["dark","mobile"]});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{default as HistoryNavigator}from"./historyNavigator";export*from"./domHelpers";export{
|
|
1
|
+
export{default as HistoryNavigator}from"./historyNavigator";export*from"./domHelpers";export{addNoScrollBodyClass,removeNoScrollBodyClass}from"./DOMOperations";export*from"./theme";export*from"./direction";// Props
|
|
2
2
|
export*from"./propsValues/control";export{Breakpoint}from"./propsValues/breakpoint";export*from"./propsValues/size";export*from"./propsValues/typography";export*from"./propsValues/width";export{Type}from"./propsValues/type";export{DateMode}from"./propsValues/dateMode";export{MonthFormat}from"./propsValues/monthFormat";export*from"./propsValues/position";export{Layout}from"./propsValues/layouts";export{Status}from"./propsValues/status";export{Sentiment}from"./propsValues/sentiment";export{ProfileType}from"./propsValues/profileType";export{Variant}from"./propsValues/variant";export*from"./propsValues/scroll";export{MarkdownNodeType}from"./propsValues/markdownNodeType";export{FileType}from"./fileType";export{Key}from"./key";export*from"./locale";export*from"./commonProps";
|
|
@@ -0,0 +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{DateInput,InlineAlert}from"..";import{lorem10,storyConfig}from"../test-utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:DateInput,title:"Forms/DateInput",args:{dayLabel:"Day input",monthLabel:"Month select",yearLabel:"Year input",selectProps:{buttonProps:{"aria-label":"Select month"},dropdownProps:{"aria-label":"Month options"}}},tags:["autodocs"]};export var Basic={};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var InputError=_objectSpread(_objectSpread({},Basic),{},{render:function render(a){return/*#__PURE__*/_jsxs("div",{className:"form-group has-error",children:[/*#__PURE__*/_jsx(DateInput,_objectSpread({},a)),/*#__PURE__*/_jsx(InlineAlert,{type:"error",children:lorem10})]})}});export var InputErrorMobile=storyConfig(InputError,{variants:["mobile"]});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{ThemeProvider,useTheme}from"@wise/components-theming";import classNames from"classnames";import{useCallback,useEffect,useRef,useState}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{ThemeProvider,useTheme}from"@wise/components-theming";import classNames from"classnames";import{useCallback,useEffect,useRef,useState}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{addNoScrollBodyClass,removeNoScrollBodyClass}from"../common";import{isIosDevice}from"../common/deviceDetection";import FocusBoundary from"../common/focusBoundary";import withNextPortal from"../withNextPortal/withNextPortal";import DimmerManager from"./dimmerManager";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export var EXIT_ANIMATION=350;var dimmerManager=new DimmerManager;export var handleTouchMove=function(a){var b=a.target.classList.contains("dimmer");// disable scroll on iOS devices for Dimmer area
|
|
2
2
|
// this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908
|
|
3
3
|
// note: scrolling still works for children(s) as expected
|
|
4
4
|
isIosDevice()&&b&&(a.stopPropagation(),a.preventDefault())};var Dimmer=function(a){var b=a.children,c=a.className,d=a.disableClickToClose,e=a.contentPosition,f=a.fadeContentOnEnter,g=void 0!==f&&f,h=a.fadeContentOnExit,i=a.open,j=void 0!==i&&i,k=a.scrollable,l=a.transparent,m=void 0!==l&&l,n=a.onClose,o=useState(!1),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useRef(null),t=function(a){a.target===s.current&&(null===n||void 0===n?void 0:n(a))},u=useCallback(function(a){"Escape"!==a.key||(a.stopPropagation(),n&&s.current&&dimmerManager.isTop(s.current)&&n(a))},[n]);return useEffect(function(){var a=s.current;return j&&(document.addEventListener("keydown",u),null===a||void 0===a?void 0:a.addEventListener("touchmove",handleTouchMove,{passive:!0})),function(){document.removeEventListener("keydown",u),null===a||void 0===a?void 0:a.removeEventListener("touchmove",handleTouchMove)}},[u,j]),/*#__PURE__*/_jsx(DimmerWrapper,{open:j,hasNotExited:q,children:/*#__PURE__*/_jsx(CSSTransition,{nodeRef:s,in:j,appear:!0// Wait for animation to finish before unmount.
|
|
5
|
-
,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":g}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":g}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==h&&h})},unmountOnExit:!0,onEnter:function onEnter(){r(!0),s.current&&dimmerManager.add(s.current)},onExited:function onExited(){r(!1),s.current&&dimmerManager.remove(s.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!m,children:/*#__PURE__*/_jsx(FocusBoundary,{children:/*#__PURE__*/_jsx("div",{ref:s,className:classNames("dimmer",{"dimmer--scrollable":void 0!==k&&k,"dimmer--transparent":m},c),role:"presentation",onClick:function handleClick(a){void 0!==d&&d||!n||t(a)},children:/*#__PURE__*/_jsx("div",{className:classNames("dimmer-content-positioner",null!=e&&["d-flex justify-content-center",{"align-items-start":"top"===e,"align-items-center":"center"===e,"align-items-end":"bottom"===e}]),children:b})})})})})})},DimmerWrapper=function(a){var b=a.open,c=a.hasNotExited,d=a.children,e=useTheme(),f=e.screenMode,g=e.theme;return b||c?/*#__PURE__*/_jsx(ThemeProvider,{theme:g,screenMode:f,isNotRootProvider:!0,children:d}):/*#__PURE__*/_jsx(_Fragment,{children:d})};export var DimmerContentWrapper=function(a){var b=a.children,c=a.scrollBody;return useEffect(function(){return c&&
|
|
5
|
+
,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:{enter:classNames({"dimmer--enter-fade":g}),enterDone:classNames("dimmer--enter-done",{"dimmer--enter-fade":g}),exit:classNames("dimmer--exit",{"dimmer--exit-fade":void 0!==h&&h})},unmountOnExit:!0,onEnter:function onEnter(){r(!0),s.current&&dimmerManager.add(s.current)},onExited:function onExited(){r(!1),s.current&&dimmerManager.remove(s.current)},children:/*#__PURE__*/_jsx(DimmerContentWrapper,{scrollBody:!m,children:/*#__PURE__*/_jsx(FocusBoundary,{children:/*#__PURE__*/_jsx("div",{ref:s,className:classNames("dimmer",{"dimmer--scrollable":void 0!==k&&k,"dimmer--transparent":m},c),role:"presentation",onClick:function handleClick(a){void 0!==d&&d||!n||t(a)},children:/*#__PURE__*/_jsx("div",{className:classNames("dimmer-content-positioner",null!=e&&["d-flex justify-content-center",{"align-items-start":"top"===e,"align-items-center":"center"===e,"align-items-end":"bottom"===e}]),children:b})})})})})})},DimmerWrapper=function(a){var b=a.open,c=a.hasNotExited,d=a.children,e=useTheme(),f=e.screenMode,g=e.theme;return b||c?/*#__PURE__*/_jsx(ThemeProvider,{theme:g,screenMode:f,isNotRootProvider:!0,children:d}):/*#__PURE__*/_jsx(_Fragment,{children:d})};export var DimmerContentWrapper=function(a){var b=a.children,c=a.scrollBody;return useEffect(function(){return c&&addNoScrollBodyClass(),function(){c&&removeNoScrollBodyClass()}},[c]),b};// Export without the Portal for tests only
|
|
6
6
|
export{Dimmer};export default withNextPortal(Dimmer);
|
|
@@ -0,0 +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{userEvent,within}from"@storybook/testing-library";import{lorem10,storyConfig}from"../test-utils";import Info,{InfoPresentation}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Info,title:"Dialogs/Info",args:{"aria-label":"Click here for more details",title:"Fast transfer hint",content:lorem10},render:function render(a){return/*#__PURE__*/_jsxs("p",{children:[/*#__PURE__*/_jsx("span",{children:"Fast transfer"})," ",/*#__PURE__*/_jsx(Info,_objectSpread({},a))]})}};export var Basic=storyConfig({},{variants:["default","dark","rtl"]});export var OpenedPopover={parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.click(c.getByRole("button"))}};export var OpenedPopoverMobile=storyConfig(OpenedPopover,{variants:["mobile"]});export var OpenedModal=_objectSpread(_objectSpread({},OpenedPopover),{},{args:{presentation:InfoPresentation.MODAL}});export var OpenedModalMobile=storyConfig(OpenedModal,{variants:["mobile"]});
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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{
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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{useState}from"react";import{Button,Modal}from"..";import{Scroll}from"../common";import{lorem10,lorem1000,storyConfig}from"../test-utils";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:Modal,title:"Dialogs/Modal",args:{size:"md",position:"center",open:!0},parameters:{chromatic:{delay:2e3}}};export var Basic={args:{title:"Title",body:lorem10,scroll:Scroll.VIEWPORT,footer:/*#__PURE__*/_jsx(Button,{block:!0,children:"Action"})},render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
2
|
+
var b=useState(a.open),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return e(!0)},children:"Open Modal"}),/*#__PURE__*/_jsx(Modal,_objectSpread(_objectSpread({},a),{},{open:d,onClose:function onClose(){e(!1),action("Modal closed")()}}))]})}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var ContentScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.CONTENT}};export var ContentScrollMobile=storyConfig(ContentScroll,{variants:["mobile"]});export var ViewportScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.VIEWPORT}};export var ViewportScrollMobile=storyConfig(ViewportScroll,{variants:["mobile"]});export var WithoutTitle={args:{body:lorem1000,scroll:Scroll.CONTENT}};export var WithoutTitleMobile=storyConfig(WithoutTitle,{variants:["mobile"]});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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.map.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.replace.js";import"core-js/modules/es.array.find.js";import"core-js/modules/es.object.to-string.js";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.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";import{isArray}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useState,useEffect}from"react";import{useIntl}from"react-intl";import{Size}from"../common";import Select from"../select";import countries from"./data/countries";import{explodeNumberModel,filterOptionsForQuery,isValidPhoneNumber,cleanNumber,setDefaultPrefix,isStringNumeric,sortArrayByProperty,groupCountriesByPrefix}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ALLOWED_PHONE_CHARS=/^$|^[\d-\s]+$/,PhoneNumberInput=function(a){var b=a.id,c=a.onChange,d=a.searchPlaceholder,e=a.disabled,f=a.required,g=a.size,h=a.placeholder,i=a.onFocus,j=a.onBlur,k=a.countryCode,l=a.selectProps,m=useIntl(),n
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";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.map.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.regexp.exec.js";import"core-js/modules/es.string.replace.js";import"core-js/modules/es.array.find.js";import"core-js/modules/es.object.to-string.js";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.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";import{isArray}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useState,useEffect}from"react";import{useIntl}from"react-intl";import{Size}from"../common";import Select from"../select";import countries from"./data/countries";import{explodeNumberModel,filterOptionsForQuery,isValidPhoneNumber,cleanNumber,setDefaultPrefix,isStringNumeric,sortArrayByProperty,groupCountriesByPrefix,excludeCountries}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ALLOWED_PHONE_CHARS=/^$|^[\d-\s]+$/,PhoneNumberInput=function(a){var b=a.id,c=a.onChange,d=a.searchPlaceholder,e=a.disabled,f=a.required,g=a.size,h=a.placeholder,i=a.onFocus,j=a.onBlur,k=a.countryCode,l=a.selectProps,m=a.disabledCountries,n=useIntl(),o=n.locale,p=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(o,k),suffix:""}}()),q=_slicedToArray(p,2),r=q[0],s=q[1],t=useState(null),u=_slicedToArray(t,2),v=u[0],w=u[1],x=useState(""),y=_slicedToArray(x,2),z=y[0],A=y[1],B=excludeCountries(countries,m),C=groupCountriesByPrefix(sortArrayByProperty(B,"iso3")),D=groupCountriesByPrefix(sortArrayByProperty(B,"phone")),E=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(z)?D:C,z);return a.map(function(a){var b=a.phone,c=a.iso3,d=a.iso2,e="";return c?e=isArray(c)?c.join(", "):c:d&&(e=isArray(d)?d.join(", "):d),{value:b,label:b,note:e}})}();return useEffect(function(){if(null===v)return w(r);var a=r.prefix+r.suffix,b=v.prefix+v.suffix;if(a!==b){var d=isValidPhoneNumber(a)?cleanNumber(a):null;c(d),w(r)}},[c,v,r]),/*#__PURE__*/_jsxs("div",{className:"tw-telephone",children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,_objectSpread({id:b?"".concat(b,"-select"):void 0,options:E,selected:{value:r.prefix,label:r.prefix},placeholder:"Select an option...",searchPlaceholder:d,dropdownWidth:Size.SMALL,searchValue:z,required:f,disabled:e,size:g,onChange:function onPrefixChange(a){var b=a.value;A(""),s({prefix:b,suffix:r.suffix})},onSearchChange:function onSearchChange(a){return A(a)}},l))}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(g),children:/*#__PURE__*/_jsx("input",{id:b,name:"phoneNumber",inputMode:"numeric",value:r.suffix,className:"form-control",disabled:e,required:f,placeholder:h,onChange:function onSuffixChange(a){var b=a.target.value,c=void 0===b?"":b;ALLOWED_PHONE_CHARS.test(c)&&s({prefix:r.prefix,suffix:c})},onPaste:function onPaste(a){if(a.nativeEvent.clipboardData){var b=(a.nativeEvent.clipboardData.getData("text/plain")||"").replace(/(\s|-)+/g,""),c=explodeNumberModel(b),d=c.prefix,e=c.suffix,f=E.find(function(a){var b=a.value;return b===d});f&&ALLOWED_PHONE_CHARS.test(e)&&s({prefix:d,suffix:e})}},onFocus:i,onBlur:j})})})]})};PhoneNumberInput.propTypes={id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,initialValue:PropTypes.string,onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,countryCode:PropTypes.string,searchPlaceholder:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),placeholder:PropTypes.string,selectProps:PropTypes.object,/** List of iso3 codes of countries to remove from the list */disabledCountries:PropTypes.arrayOf(PropTypes.string)},PhoneNumberInput.defaultProps={id:null,required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:"",selectProps:{},disabledCountries:[]};export default PhoneNumberInput;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import"core-js/modules/es.array.iterator.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.set.js";import"core-js/modules/es.string.iterator.js";import"core-js/modules/web.dom-collections.iterator.js";import"core-js/modules/es.array.filter.js";// Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
|
|
2
|
+
var filterCountriesByIso3=function(a,b){var c=new Set(b);return a.filter(function(a){return!c.has(a.iso3)})};/**
|
|
3
|
+
* Removes the countries sepecified in the second param
|
|
4
|
+
*
|
|
5
|
+
* @param {Array} countries: list of country metadata objects
|
|
6
|
+
* @param {Array} disabledCountries: list of iso3 country codes to remove from the list
|
|
7
|
+
* @returns
|
|
8
|
+
*/export var excludeCountries=function(a,b){return 0<b.length?filterCountriesByIso3(a,b):a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{excludeCountries}from"./excludeCountries";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{setDefaultPrefix}from"./setDefaultPrefix";export{isValidPhoneNumber}from"./isValidPhoneNumber";export{explodeNumberModel}from"./explodeNumberModel";export{longestMatchingPrefix}from"./longestMatchingPrefix";export{findCountryByPrefix}from"./findCountryByPrefix";export{findCountryByCode}from"./findCountryByCode";export{filterOptionsForQuery}from"./filterOptionsForQuery";export{isOptionAndFitsQuery}from"./isOptionAndFitsQuery";export{cleanNumber}from"./cleanNumber";export{isStringNumeric}from"./isStringNumeric";export{sortArrayByProperty}from"./sortArrayByProperty";export{groupCountriesByPrefix}from"./groupCountriesByPrefix";
|
|
1
|
+
export{setDefaultPrefix}from"./setDefaultPrefix";export{isValidPhoneNumber}from"./isValidPhoneNumber";export{explodeNumberModel}from"./explodeNumberModel";export{longestMatchingPrefix}from"./longestMatchingPrefix";export{findCountryByPrefix}from"./findCountryByPrefix";export{findCountryByCode}from"./findCountryByCode";export{filterOptionsForQuery}from"./filterOptionsForQuery";export{isOptionAndFitsQuery}from"./isOptionAndFitsQuery";export{cleanNumber}from"./cleanNumber";export{isStringNumeric}from"./isStringNumeric";export{sortArrayByProperty}from"./sortArrayByProperty";export{groupCountriesByPrefix}from"./groupCountriesByPrefix";export{excludeCountries}from"./excludeCountries";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
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{userEvent,within}from"@storybook/testing-library";import Button from"../button";import{storyConfig}from"../test-utils";import Tooltip from"./Tooltip";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Tooltip,title:"Dialogs/Tooltip",args:{label:"This is the content",position:"bottom"},render:function render(a){return/*#__PURE__*/_jsx("div",{className:"text-xs-center",style:{flexBasis:"150px"},children:/*#__PURE__*/_jsx(Tooltip,_objectSpread(_objectSpread({},a),{},{children:/*#__PURE__*/_jsx(Button,{children:"Hover me"})}))})},tags:["autodocs"]};export var Basic={};export var OpenedTooltip={parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.hover(c.getByRole("button"))}};export var OpenedTooltipDark=storyConfig(OpenedTooltip,{variants:["dark"]});
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { StoryObj } from '@storybook/react';
|
|
3
|
+
import Accordion from './Accordion';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
component: {
|
|
6
|
+
({ items, onClick, indexOpen, theme }: {
|
|
7
|
+
items: any;
|
|
8
|
+
onClick: any;
|
|
9
|
+
indexOpen: any;
|
|
10
|
+
theme: any;
|
|
11
|
+
}): any;
|
|
12
|
+
propTypes: {
|
|
13
|
+
indexOpen: any;
|
|
14
|
+
items: any;
|
|
15
|
+
onClick: any;
|
|
16
|
+
theme: any;
|
|
17
|
+
};
|
|
18
|
+
defaultProps: {
|
|
19
|
+
indexOpen: number;
|
|
20
|
+
onClick: null;
|
|
21
|
+
theme: import("../common").Theme;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
title: string;
|
|
25
|
+
args: {
|
|
26
|
+
items: ({
|
|
27
|
+
title: string;
|
|
28
|
+
content: string;
|
|
29
|
+
id: string;
|
|
30
|
+
icon?: undefined;
|
|
31
|
+
} | {
|
|
32
|
+
title: string;
|
|
33
|
+
content: string;
|
|
34
|
+
id: string;
|
|
35
|
+
icon: JSX.Element;
|
|
36
|
+
})[];
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
export default _default;
|
|
40
|
+
type Story = StoryObj<typeof Accordion>;
|
|
41
|
+
export declare const Basic: Story;
|
|
42
|
+
export declare const BasicMobile: Story;
|
|
43
|
+
export declare const Variants: Story;
|
|
44
|
+
export declare const Multiple: Story;
|
|
45
|
+
export declare const InModal: Story;
|
|
46
|
+
export declare const InModalMobile: Story;
|