@transferwise/components 45.0.1 → 45.1.1
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/LICENSE.md +4 -4
- package/README.md +3 -0
- package/build/es/no-polyfill/actionButton/ActionButton.story.js +1 -1
- package/build/es/no-polyfill/actionOption/ActionOption.story.js +1 -1
- package/build/es/no-polyfill/alert/Alert.story.js +1 -0
- package/build/es/no-polyfill/avatar/Avatar.story.js +1 -0
- package/build/es/no-polyfill/avatarWrapper/AvatarWrapper.js +1 -2
- package/build/es/no-polyfill/avatarWrapper/AvatarWrapper.story.js +1 -0
- package/build/es/no-polyfill/button/Button.js +1 -1
- package/build/es/no-polyfill/checkboxButton/CheckboxButton.story.js +1 -1
- package/build/es/no-polyfill/checkboxOption/CheckboxOption.story.js +1 -1
- package/build/es/no-polyfill/chevron/Chevron.story.js +1 -0
- package/build/es/no-polyfill/chips/Chips.story.js +1 -1
- package/build/es/no-polyfill/common/bottomSheet/BottomSheet.js +1 -21
- package/build/es/no-polyfill/common/hooks/useHasIntersected/useHasIntersected.js +1 -2
- package/build/es/no-polyfill/common/requirements.js +1 -19
- package/build/es/no-polyfill/dateInput/DateInput.js +3 -9
- package/build/es/no-polyfill/dimmer/Dimmer.story.js +2 -1
- package/build/es/no-polyfill/index.js +1 -1
- package/build/es/no-polyfill/inputs/Input.js +1 -0
- package/build/es/no-polyfill/inputs/TextArea.js +1 -0
- package/build/es/no-polyfill/inputs/_common.js +2 -0
- package/build/es/no-polyfill/loader/Loader.story.js +1 -0
- package/build/es/no-polyfill/logo/Logo.story.js +1 -0
- package/build/es/no-polyfill/modal/Modal.js +1 -2
- package/build/es/no-polyfill/money/Money.story.js +1 -0
- package/build/es/no-polyfill/moneyInput/MoneyInput.js +1 -1
- package/build/es/no-polyfill/moneyInput/MoneyInput.story.js +1 -0
- package/build/es/no-polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
- package/build/es/no-polyfill/progress/Progress.story.js +1 -0
- package/build/es/no-polyfill/provider/Provider.spec.js +1 -2
- package/build/es/no-polyfill/provider/Provider.story.js +1 -1
- package/build/es/no-polyfill/select/searchBox/SearchBox.js +1 -1
- package/build/es/no-polyfill/slidingPanel/SlidingPanel.js +1 -1
- package/build/es/no-polyfill/statusIcon/StatusIcon.story.js +1 -0
- package/build/es/no-polyfill/tabs/Tabs.js +1 -6
- package/build/es/no-polyfill/typeahead/typeaheadInput/TypeaheadInput.js +1 -1
- package/build/es/no-polyfill/uploadInput/UploadInput.story.js +1 -1
- package/build/es/no-polyfill/utils.js +0 -0
- package/build/es/no-polyfill/withDisplayFormat/WithDisplayFormat.js +1 -2
- package/build/es/polyfill/actionButton/ActionButton.story.js +1 -1
- package/build/es/polyfill/actionOption/ActionOption.story.js +1 -1
- package/build/es/polyfill/alert/Alert.story.js +1 -0
- package/build/es/polyfill/avatar/Avatar.story.js +1 -0
- package/build/es/polyfill/avatarWrapper/AvatarWrapper.js +1 -2
- package/build/es/polyfill/avatarWrapper/AvatarWrapper.story.js +1 -0
- package/build/es/polyfill/button/Button.js +1 -1
- package/build/es/polyfill/checkboxButton/CheckboxButton.story.js +1 -1
- package/build/es/polyfill/checkboxOption/CheckboxOption.story.js +1 -1
- package/build/es/polyfill/chevron/Chevron.story.js +1 -0
- package/build/es/polyfill/chips/Chips.story.js +1 -1
- package/build/es/polyfill/common/bottomSheet/BottomSheet.js +1 -21
- package/build/es/polyfill/common/hooks/useHasIntersected/useHasIntersected.js +1 -2
- package/build/es/polyfill/common/requirements.js +1 -19
- package/build/es/polyfill/dateInput/DateInput.js +3 -9
- package/build/es/polyfill/dimmer/Dimmer.story.js +2 -1
- package/build/es/polyfill/index.js +1 -1
- package/build/es/polyfill/inputs/Input.js +1 -0
- package/build/es/polyfill/inputs/TextArea.js +1 -0
- package/build/es/polyfill/inputs/_common.js +2 -0
- package/build/es/polyfill/loader/Loader.story.js +1 -0
- package/build/es/polyfill/logo/Logo.story.js +1 -0
- package/build/es/polyfill/modal/Modal.js +1 -2
- package/build/es/polyfill/money/Money.story.js +1 -0
- package/build/es/polyfill/moneyInput/MoneyInput.js +1 -1
- package/build/es/polyfill/moneyInput/MoneyInput.story.js +1 -0
- package/build/es/polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
- package/build/es/polyfill/progress/Progress.story.js +1 -0
- package/build/es/polyfill/provider/Provider.spec.js +1 -2
- package/build/es/polyfill/provider/Provider.story.js +1 -1
- package/build/es/polyfill/select/searchBox/SearchBox.js +1 -1
- package/build/es/polyfill/slidingPanel/SlidingPanel.js +1 -1
- package/build/es/polyfill/statusIcon/StatusIcon.story.js +1 -0
- package/build/es/polyfill/tabs/Tabs.js +1 -6
- package/build/es/polyfill/typeahead/typeaheadInput/TypeaheadInput.js +1 -1
- package/build/es/polyfill/uploadInput/UploadInput.story.js +1 -1
- package/build/es/polyfill/utils.js +0 -0
- package/build/es/polyfill/withDisplayFormat/WithDisplayFormat.js +1 -2
- package/build/main.css +1 -1
- package/build/styles/inputs/Input.css +1 -0
- package/build/styles/inputs/TextArea.css +1 -0
- package/build/styles/main.css +1 -1
- package/build/types/accordion/AccordionItem/AccordionItem.d.ts +8 -9
- package/build/types/actionButton/ActionButton.story.d.ts +13 -5
- package/build/types/actionOption/ActionOption.story.d.ts +28 -15
- package/build/types/alert/Alert.story.d.ts +56 -0
- package/build/types/alert/inlineMarkdown/InlineMarkdown.d.ts +2 -3
- package/build/types/alert/withArrow/withArrow.d.ts +1 -2
- package/build/types/avatar/Avatar.story.d.ts +42 -0
- package/build/types/avatarWrapper/AvatarWrapper.story.d.ts +59 -0
- package/build/types/checkboxButton/CheckboxButton.story.d.ts +4 -2
- package/build/types/checkboxOption/CheckboxOption.story.d.ts +4 -5
- package/build/types/chevron/Chevron.story.d.ts +44 -0
- package/build/types/chips/Chips.story.d.ts +9 -14
- package/build/types/common/RadioButton/RadioButton.d.ts +7 -8
- package/build/types/dateLookup/dateHeader/DateHeader.d.ts +4 -5
- package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts +8 -9
- package/build/types/dateLookup/monthCalendar/table/MonthCalendarTable.d.ts +6 -7
- package/build/types/dateLookup/tableLink/TableLink.d.ts +8 -9
- package/build/types/dateLookup/yearCalendar/YearCalendar.d.ts +7 -8
- package/build/types/dateLookup/yearCalendar/table/YearCalendarTable.d.ts +6 -7
- package/build/types/dimmer/Dimmer.story.d.ts +9 -1
- package/build/types/dynamicFieldDefinitionList/FormattedValue/FormattedValue.d.ts +2 -16
- package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts +3 -4
- package/build/types/flowNavigation/backButton/BackButton.d.ts +3 -4
- package/build/types/index.d.ts +4 -0
- package/build/types/inputs/Input.d.ts +13 -0
- package/build/types/inputs/TextArea.d.ts +10 -0
- package/build/types/inputs/_common.d.ts +5 -0
- package/build/types/loader/Loader.story.d.ts +28 -0
- package/build/types/logo/Logo.story.d.ts +32 -0
- package/build/types/modal/Modal.story.d.ts +3 -2
- package/build/types/money/Money.story.d.ts +19 -0
- package/build/types/moneyInput/MoneyInput.story.d.ts +35 -0
- package/build/types/progress/Progress.story.d.ts +17 -0
- package/build/types/progressBar/ProgressBar.story.d.ts +6 -1
- package/build/types/provider/Provider.story.d.ts +6 -7
- package/build/types/select/searchBox/SearchBox.d.ts +1 -1
- package/build/types/statusIcon/StatusIcon.story.d.ts +15 -0
- package/build/types/tabs/TabList.d.ts +1 -2
- package/build/types/tabs/TabPanel.d.ts +4 -7
- package/build/types/test-utils/GlobalsDecorator.d.ts +4 -5
- package/build/types/test-utils/index.d.ts +1 -1
- package/build/types/tile/Tile.d.ts +9 -10
- package/build/types/tooltip/Tooltip.story.d.ts +2 -1
- package/build/types/typeahead/typeaheadInput/TypeaheadInput.d.ts +15 -16
- package/build/types/typeahead/typeaheadOption/TypeaheadOption.d.ts +4 -9
- package/build/types/upload/steps/completeStep/completeStep.d.ts +9 -10
- package/build/types/upload/steps/mediaUploadStep/mediaUploadStep.d.ts +8 -9
- package/build/types/upload/steps/processingStep/processingStep.d.ts +8 -9
- package/build/types/upload/steps/uploadImageStep/uploadImageStep.d.ts +8 -9
- package/build/types/uploadInput/UploadInput.story.d.ts +20 -37
- package/build/types/utils.d.ts +1 -0
- package/build/types/withDisplayFormat/WithDisplayFormat.d.ts +18 -19
- package/build/umd/no-polyfill/main.js +1 -1
- package/build/umd/polyfill/main.js +1 -1
- package/package.json +65 -33
- package/upgrades/2021-04-v35-36-typescript-support.js +1 -0
package/LICENSE.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
Copyright 2019 Wise Ltd.
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
4
|
you may not use this file except in compliance with the License.
|
|
5
5
|
You may obtain a copy of the License at
|
|
6
|
-
|
|
6
|
+
|
|
7
7
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
-
|
|
8
|
+
|
|
9
9
|
Unless required by applicable law or agreed to in writing, software
|
|
10
10
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
11
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
12
|
See the License for the specific language governing permissions and
|
|
13
|
-
limitations under the License.
|
|
13
|
+
limitations under the License.
|
package/README.md
CHANGED
|
@@ -13,6 +13,9 @@ Neptune Components are published to npm as [@transferwise/components](https://ww
|
|
|
13
13
|
Install `@transferwise/components` and its peer dependencies. **Note:** currency-flags is only required if you're using the [Money Input](https://transferwise.github.io/neptune-web/components/MoneyInput) or if you're using flags on the [Select](https://transferwise.github.io/neptune-web/components/Select).
|
|
14
14
|
|
|
15
15
|
```
|
|
16
|
+
# pnpm
|
|
17
|
+
pnpm install @transferwise/components react react-dom prop-types currency-flags
|
|
18
|
+
|
|
16
19
|
# yarn
|
|
17
20
|
yarn add @transferwise/components react react-dom prop-types currency-flags
|
|
18
21
|
|
|
@@ -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{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 +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{action}from"@storybook/addon-actions";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{Nudge}from"..";import ActionOption from"./ActionOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionOption,title:"Option/ActionOption",args:{title:"Action option",content:"Normally, the button and icon are vertically centered.",action:"Action",media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaCircle:!1},tags:["autodocs"]};export var Basic={render:function render(a){return/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a))}};export var WithContainerContent={render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(ActionOption,_objectSpread({},a)),/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})]})}};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/* eslint-disable no-alert */import{Sentiment}from"../common";import Alert from"./Alert";import{AlertArrowPosition}from"./withArrow";export default{component:Alert,title:"Feedback/Alert",args:{type:Sentiment.POSITIVE,message:"Payments sent to your bank details **today** might not arrive in time for the holidays."},argTypes:{arrow:{name:"arrow (deprecated)",type:{name:"enum",value:Object.keys(AlertArrowPosition)}},type:{type:{name:"enum",value:[Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]}}},tags:["autodocs"]};export var Basic={args:{onDismiss:void 0}};export var WithAction={args:{action:{href:"/",text:"Read more"}}};export var WithArrow={args:{arrow:AlertArrowPosition.TOP_LEFT}};
|
|
@@ -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{Size,Theme}from"../common";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,theme:Theme.LIGHT}};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={render:function render(a){var b=a.theme,c="https://wise.com/public-resources/assets/flags/square/gbp.svg";return/*#__PURE__*/_jsx("div",{style:{padding:"50px",backgroundColor:b===Theme.DARK?"#37517e":"white"},children:/*#__PURE__*/_jsxs("table",{style:{background:"transparent"},children:[/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:44,height:44},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:36,height:36},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:26,height:26},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:16,height:16},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:44,height:44},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:36,height:36},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:26,height:26},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:16,height:16},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})})]})]})})}};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["url","altText","statusIcon","children"];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{Person as ProfileIcon,Briefcase as BriefcaseIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{useState,useEffect}from"react";import Avatar,{AvatarType}from"../avatar";import Badge from"../badge";import{ProfileType,Size,Sentiment}from"../common";import StatusIcon from"../statusIcon/StatusIcon";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var OptionalBadge=function(a){var b=a.url,c=a.altText,d=a.statusIcon,e=a.children,f=_objectWithoutProperties(a,_excluded);return b?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx("img",{src:b,alt:c})},f),{},{children:e})):d?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx(StatusIcon,{sentiment:d,size:Size.SMALL})},f),{},{children:e})):e};OptionalBadge.propTypes={url:PropTypes.string,altText:PropTypes.string,statusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),children:PropTypes.node.isRequired},OptionalBadge.defaultProps={url:void 0,altText:void 0,statusIcon:void 0};var AvatarWrapper=function(a){var b=a.url,c=a.profileType,d=a.badgeUrl,e=a.badgeAltText,f=a.badgeStatusIcon,g=a.name,h=a.avatarProps,i=a.badgeProps,j=useState(!1),k=_slicedToArray(j,2),l=k[0],m=k[1],n=c===ProfileType.BUSINESS
|
|
2
|
-
useEffect(function(){return m(!1)},[b]);return/*#__PURE__*/_jsx(OptionalBadge,_objectSpread(_objectSpread({url:d,altText:e,statusIcon:f},i),{},{children:/*#__PURE__*/_jsx(Avatar,_objectSpread({size:Size.MEDIUM},function getAvatarProps(){return b&&!l?_objectSpread({type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:b,alt:"avatar",onError:function onError(){return m(!0)}})},h):c?_objectSpread({type:AvatarType.ICON,children:n?/*#__PURE__*/_jsx(BriefcaseIcon,{size:"24"}):/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h):g?_objectSpread({type:AvatarType.INITIALS,children:/*#__PURE__*/_jsx(_Fragment,{children:getInitials(g)})},h):_objectSpread({type:AvatarType.ICON,children:/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h)}()))}))};function getInitials(a){var b=a.split(" ").map(function(a){return a[0]}).join("").toUpperCase();return 1===b.length?b[0]:b[0]+b.slice(-1)}AvatarWrapper.defaultProps={url:void 0,profileType:void 0,badgeUrl:void 0,badgeAltText:void 0,badgeStatusIcon:void 0,name:void 0,avatarProps:{},badgeProps:{}},AvatarWrapper.propTypes={url:PropTypes.string,profileType:PropTypes.oneOf([ProfileType.PERSONAL,ProfileType.BUSINESS]),badgeUrl:PropTypes.string,badgeAltText:PropTypes.string,badgeStatusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),name:PropTypes.string,avatarProps:PropTypes.shape({}),badgeProps:PropTypes.shape({})};export default AvatarWrapper;
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["url","altText","statusIcon","children"];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{Person as ProfileIcon,Briefcase as BriefcaseIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{useState,useEffect}from"react";import Avatar,{AvatarType}from"../avatar";import Badge from"../badge";import{ProfileType,Size,Sentiment}from"../common";import StatusIcon from"../statusIcon/StatusIcon";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var OptionalBadge=function(a){var b=a.url,c=a.altText,d=a.statusIcon,e=a.children,f=_objectWithoutProperties(a,_excluded);return b?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx("img",{src:b,alt:c})},f),{},{children:e})):d?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx(StatusIcon,{sentiment:d,size:Size.SMALL})},f),{},{children:e})):e};OptionalBadge.propTypes={url:PropTypes.string,altText:PropTypes.string,statusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),children:PropTypes.node.isRequired},OptionalBadge.defaultProps={url:void 0,altText:void 0,statusIcon:void 0};var AvatarWrapper=function(a){var b=a.url,c=a.profileType,d=a.badgeUrl,e=a.badgeAltText,f=a.badgeStatusIcon,g=a.name,h=a.avatarProps,i=a.badgeProps,j=useState(!1),k=_slicedToArray(j,2),l=k[0],m=k[1],n=c===ProfileType.BUSINESS;useEffect(function(){return m(!1)},[b]);return/*#__PURE__*/_jsx(OptionalBadge,_objectSpread(_objectSpread({url:d,altText:e,statusIcon:f},i),{},{children:/*#__PURE__*/_jsx(Avatar,_objectSpread({size:Size.MEDIUM},function getAvatarProps(){return b&&!l?_objectSpread({type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:b,alt:"avatar",onError:function onError(){return m(!0)}})},h):c?_objectSpread({type:AvatarType.ICON,children:n?/*#__PURE__*/_jsx(BriefcaseIcon,{size:"24"}):/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h):g?_objectSpread({type:AvatarType.INITIALS,children:/*#__PURE__*/_jsx(_Fragment,{children:getInitials(g)})},h):_objectSpread({type:AvatarType.ICON,children:/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h)}()))}))};function getInitials(a){var b=a.split(" ").map(function(a){return a[0]}).join("").toUpperCase();return 1===b.length?b[0]:b[0]+b.slice(-1)}AvatarWrapper.defaultProps={url:void 0,profileType:void 0,badgeUrl:void 0,badgeAltText:void 0,badgeStatusIcon:void 0,name:void 0,avatarProps:{},badgeProps:{}},AvatarWrapper.propTypes={url:PropTypes.string,profileType:PropTypes.oneOf([ProfileType.PERSONAL,ProfileType.BUSINESS]),badgeUrl:PropTypes.string,badgeAltText:PropTypes.string,badgeStatusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),name:PropTypes.string,avatarProps:PropTypes.shape({}),badgeProps:PropTypes.shape({})};export default AvatarWrapper;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{ProfileType,Sentiment}from"../common";import AvatarWrapper from"./AvatarWrapper";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:AvatarWrapper,title:"Content/AvatarWrapper",argTypes:{profileType:{type:{name:"enum",value:Object.keys(ProfileType)}},badgeStatusIcon:{type:{name:"enum",value:[Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]}}},tags:["autodocs"]};export var WithBadgeUrl={args:{badgeUrl:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",avatarProps:{outlined:!0}}};export var WithBadgeStatus={args:{profileType:ProfileType.BUSINESS,badgeStatusIcon:Sentiment.PENDING,avatarProps:{outlined:!1}}};export var All={args:{avatarProps:{outlined:!0}},render:function render(a){var b=a.avatarProps;return/*#__PURE__*/_jsxs("div",{style:{maxWidth:"300px",display:"flex",justifyContent:"space-between"},children:[/*#__PURE__*/_jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx("b",{children:"No Badges"})})," ","Personal",/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(AvatarWrapper,{profileType:ProfileType.PERSONAL,avatarProps:b})}),"Business",/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(AvatarWrapper,{profileType:ProfileType.BUSINESS,avatarProps:b})}),"Avatar",/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(AvatarWrapper,{url:"https://wise.com/public-resources/assets/flags/square/gbp.svg",profileType:ProfileType.BUSINESS,avatarProps:b})}),"Initials",/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(AvatarWrapper,{name:"A A",avatarProps:b})}),"Default",/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(AvatarWrapper,{avatarProps:b})})]}),/*#__PURE__*/_jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx("b",{children:"Badges"})}),"Personal",/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(AvatarWrapper,{badgeUrl:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",badgeAltText:"wise fast flag badge",profileType:ProfileType.PERSONAL,avatarProps:b})}),"Business",/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(AvatarWrapper,{badgeStatusIcon:Sentiment.POSITIVE,profileType:ProfileType.BUSINESS,avatarProps:b})}),"Avatar",/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(AvatarWrapper,{badgeStatusIcon:Sentiment.NEGATIVE,url:"https://wise.com/public-resources/assets/flags/square/gbp.svg",profileType:ProfileType.BUSINESS,avatarProps:b})}),"Initials",/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(AvatarWrapper,{badgeStatusIcon:Sentiment.NEUTRAL,name:"A A",avatarProps:b})}),"Default",/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(AvatarWrapper,{badgeStatusIcon:Sentiment.PENDING,avatarProps:b})})]})]})}};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["as","block","children","className","disabled","loading","priority","size","type"],_excluded2=["htmlType"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import{forwardRef}from"react";import{Size,ControlType,Priority}from"../common";import{typeClassMap,priorityClassMap}from"./classMap";import{establishNewPriority,establishNewType,logDeprecationNotices}from"./legacyUtils";/** @deprecated */
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["as","block","children","className","disabled","loading","priority","size","type"],_excluded2=["htmlType"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import{forwardRef}from"react";import{Size,ControlType,Priority}from"../common";import{typeClassMap,priorityClassMap}from"./classMap";import{establishNewPriority,establishNewType,logDeprecationNotices}from"./legacyUtils";/** @deprecated */import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Button=/*#__PURE__*/forwardRef(function(a,b){var c,d=a.as,e=a.block,f=void 0!==e&&e,g=a.children,h=a.className,i=a.disabled,j=a.loading,k=void 0!==j&&j,l=a.priority,m=void 0===l?Priority.PRIMARY:l,n=a.size,o=void 0===n?Size.MEDIUM:n,p=a.type,q=void 0===p?ControlType.ACCENT:p,r=_objectWithoutProperties(a,_excluded);logDeprecationNotices({size:o,type:q});// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
2
2
|
var s,t=establishNewType(q),u=establishNewPriority(m,q),v=classNames("btn btn-".concat(o),"np-btn np-btn-".concat(o),{"btn-loading":k,"btn-block np-btn-block":f},{disabled:i||k},// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
3
3
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
4
4
|
typeClassMap[t],// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean}from"@storybook/addon-knobs";import{useState}from"react";import CheckboxButton from"./CheckboxButton";import{jsx as _jsx}from"react/jsx-runtime";
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{boolean}from"@storybook/addon-knobs";import{useState}from"react";import CheckboxButton from"./CheckboxButton";import{jsx as _jsx}from"react/jsx-runtime";var meta={component:CheckboxButton,title:"Actions/CheckboxButton",tags:["autodocs"]};export default meta;var onBlur=function(){return console.log("blur")},onClick=function(){return console.log("click")},onFocus=function(){return console.log("focus")};export var Basic=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=boolean("disabled",!1);return/*#__PURE__*/_jsx(CheckboxButton,{"aria-label":"Toggle email updates",checked:c,disabled:e,onBlur:onBlur,onClick:onClick,onFocus:onFocus,onChange:function onChange(){return d(!c)}})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{action}from"@storybook/addon-actions";import{boolean,text}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{Nudge}from"..";import CheckboxOption from"./CheckboxOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{action}from"@storybook/addon-actions";import{boolean,text}from"@storybook/addon-knobs";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{Nudge}from"..";import CheckboxOption from"./CheckboxOption";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var meta={component:CheckboxOption,title:"Option/CheckboxOption",tags:["autodocs"]};export default meta;var Template=function(){var a=useState(!0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=text("content","Normally, the button and icon are vertically centered."),f=text("title","Checkbox option"),g=boolean("disabled",!1),h=boolean("showMediaAtAllSizes",!1),i=boolean("isContainerAligned",!1);return/*#__PURE__*/_jsx(CheckboxOption,{id:"checkbox-option",name:"checkbox-option",checked:c,disabled:g,title:f,content:e,media:/*#__PURE__*/_jsx(FastFlagIcon,{}),showMediaAtAllSizes:h,isContainerAligned:i,onChange:function onChange(a){return d(a)}})};export var Basic=function(){return/*#__PURE__*/_jsx(Template,{})};export var Multiple=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{})]})};export var WithContainerContent=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("h2",{className:"m-b-2",children:"Choose how to pay"}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx(Template,{}),/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(Nudge,{className:"m-t-2",mediaName:"globe",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})})]})};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Chevron from"./Chevron";export default{component:Chevron,title:"Other/Chevron",argTypes:{orientation:{type:{name:"enum",value:["top","bottom","left","right"]}},size:{type:{name:"enum",value:["xs","sm","md"]}}},tags:["autodocs"]};export var Basic={args:{orientation:"top",size:"md"}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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{useState}from"react";import Chips from"./Chips";import{jsx as _jsx}from"react/jsx-runtime";
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";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{useState}from"react";import Chips from"./Chips";import{jsx as _jsx}from"react/jsx-runtime";var meta={title:"Actions/Chips",component:Chips,tags:["autodocs"]};export default meta;var FilterTemplate=function(a){var b=useState(a.selected?a.selected:[]),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsx(Chips,_objectSpread(_objectSpread({},a),{},{selected:d,multiple:!0,onChange:function onChange(a){var b=a.selectedValue,c=a.isEnabled;if(c)e([].concat(_toConsumableArray(d),[b]));else{var f=d.filter(function(a){return b!==a});e(f)}}}))},ChoiceTemplate=function(a){var b=useState(a.selected),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsx(Chips,_objectSpread(_objectSpread({},a),{},{selected:d,onChange:function onChange(a){var b=a.selectedValue;return e(b)}}))};export var FilterChips=FilterTemplate.bind({});FilterChips.args={chips:[{value:"accounting",label:"Accounting"},{value:"payroll",label:"Payroll"},{value:"reporting",label:"Reporting"},{value:"payments",label:"Payments"}]};export var PreSelectedFilterChips=FilterTemplate.bind({});PreSelectedFilterChips.args={chips:[{value:"accounting",label:"Accounting"},{value:"payroll",label:"Payroll"},{value:"reporting",label:"Reporting"},{value:"payments",label:"Payments"}],selected:["accounting","payments"]};export var ChoiceChips=ChoiceTemplate.bind({});ChoiceChips.args={chips:[{value:1,label:"100 GBP"},{value:2,label:"200 GBP"},{value:3,label:"300 GBP"},{value:4,label:"400 GBP+"}],selected:3};
|
|
@@ -7,24 +7,4 @@ cancelAnimationFrame(n.current),m(!1),o.current>MOVE_OFFSET_THRESHOLD&&e()?c(a):
|
|
|
7
7
|
*/function f(a){return a-p.current}/**
|
|
8
8
|
* Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component
|
|
9
9
|
* and ensures space for safe zone (32px) at the top.
|
|
10
|
-
*/var g=useRef(null),h=useRef(null),i=useRef(null),j=useState(!1),k=_slicedToArray(j,2),l=k[0],m=k[1],n=useRef(0),o=useRef(0),p=useRef(0)
|
|
11
|
-
* Used to track `requestAnimationFrame` requests
|
|
12
|
-
*
|
|
13
|
-
* @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value
|
|
14
|
-
*/ /**
|
|
15
|
-
* Difference between initial coordinate ({@link initialYCoordinate})
|
|
16
|
-
* and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events
|
|
17
|
-
*
|
|
18
|
-
* @see {@link calculateOffsetAfterMove}
|
|
19
|
-
*/ // apply shadow to the bottom of top-bar when scroll over content
|
|
20
|
-
useConditionalListener({attachListener:a.open&&!isServerSide(),callback:function callback(){if(null!==h.current){var a=h.current.classList;e()?a.remove("np-bottom-sheet--top-bar--shadow"):a.add("np-bottom-sheet--top-bar--shadow")}},eventType:"scroll",parent:isServerSide()?void 0:document});var q=function(a){return function(b){p.current=(a?b.touches[0]:b).clientY,m(!0)}},r=function(a){return function(c){if(l){var d=a?c.touches[0]:c,h=d.clientY,i=f(h);// check whether move is to the bottom only and content scroll position is at the top
|
|
21
|
-
i>INITIAL_Y_POSITION&&e()&&(o.current=i,n.current=requestAnimationFrame(function(){n.current!==void 0&&null!==g.current&&b(i)}))}}};return/*#__PURE__*/_jsx(Dimmer,{open:a.open,fadeContentOnEnter:!0,fadeContentOnExit:!0,onClose:c,children:/*#__PURE__*/_jsxs(SlidingPanel,{ref:g,open:a.open,position:Position.BOTTOM,className:classNames("np-bottom-sheet",a.className),role:"dialog",onTouchStart:q(!0),onTouchMove:r(!0),onTouchEnd:d,onMouseDown:q(!1),onMouseMove:r(!1),onMouseUp:d,children:[/*#__PURE__*/_jsxs("div",{ref:h,className:"np-bottom-sheet--top-bar",children:[/*#__PURE__*/_jsx("div",{className:"np-bottom-sheet--handler"}),/*#__PURE__*/_jsx(CloseButton,{size:"sm",className:"sr-only np-bottom-sheet--close-btn",onClick:c})]}),/*#__PURE__*/_jsx("div",{ref:i,style:function(){var a=isServerSide()?0:window.innerHeight,b="".concat(100*(.01*a),"px");/**
|
|
22
|
-
* Calculate _real_ height of the screen (taking into account parts of browser interface).
|
|
23
|
-
*
|
|
24
|
-
* See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.
|
|
25
|
-
*/return{maxHeight:"calc(".concat(b," - ").concat("64px"," - ").concat("32px",")")}}(),className:"np-bottom-sheet--content",children:a.children})]})})};/**
|
|
26
|
-
* Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/
|
|
27
|
-
*
|
|
28
|
-
* Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
|
|
29
|
-
*
|
|
30
|
-
*/export default BottomSheet;
|
|
10
|
+
*/var g=useRef(null),h=useRef(null),i=useRef(null),j=useState(!1),k=_slicedToArray(j,2),l=k[0],m=k[1],n=useRef(0),o=useRef(0),p=useRef(0);useConditionalListener({attachListener:a.open&&!isServerSide(),callback:function callback(){if(null!==h.current){var a=h.current.classList;e()?a.remove("np-bottom-sheet--top-bar--shadow"):a.add("np-bottom-sheet--top-bar--shadow")}},eventType:"scroll",parent:isServerSide()?void 0:document});var q=function(a){return function(b){p.current=(a?b.touches[0]:b).clientY,m(!0)}},r=function(a){return function(c){if(l){var d=a?c.touches[0]:c,h=d.clientY,i=f(h);i>INITIAL_Y_POSITION&&e()&&(o.current=i,n.current=requestAnimationFrame(function(){n.current!==void 0&&null!==g.current&&b(i)}))}}};return/*#__PURE__*/_jsx(Dimmer,{open:a.open,fadeContentOnEnter:!0,fadeContentOnExit:!0,onClose:c,children:/*#__PURE__*/_jsxs(SlidingPanel,{ref:g,open:a.open,position:Position.BOTTOM,className:classNames("np-bottom-sheet",a.className),role:"dialog",onTouchStart:q(!0),onTouchMove:r(!0),onTouchEnd:d,onMouseDown:q(!1),onMouseMove:r(!1),onMouseUp:d,children:[/*#__PURE__*/_jsxs("div",{ref:h,className:"np-bottom-sheet--top-bar",children:[/*#__PURE__*/_jsx("div",{className:"np-bottom-sheet--handler"}),/*#__PURE__*/_jsx(CloseButton,{size:"sm",className:"sr-only np-bottom-sheet--close-btn",onClick:c})]}),/*#__PURE__*/_jsx("div",{ref:i,style:function(){var a=isServerSide()?0:window.innerHeight,b="".concat(100*(.01*a),"px");return{maxHeight:"calc(".concat(b," - ").concat("64px"," - ").concat("32px",")")}}(),className:"np-bottom-sheet--content",children:a.children})]})})};export default BottomSheet;
|
|
@@ -8,5 +8,4 @@ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useEffec
|
|
|
8
8
|
* @param {strimng} [loading = 'eager'] - string that contains the type of loading.
|
|
9
9
|
* @param elRef.loading
|
|
10
10
|
* @usage `const [hasIntersected] = useHasIntersected({imageRef,loading});`
|
|
11
|
-
*/export var useHasIntersected=function(a){var b=a.elRef,c=a.loading,d=useState(!1),e=_slicedToArray(d,2),f=e[0],g=e[1],h=(b||{}).current,i=function(){return b&&h},j=function(a,b){a.forEach(function(a){a.isIntersecting&&(g(!0),b.unobserve(h))})};return useEffect(function(){var a,b=!1
|
|
12
|
-
return"undefined"!=typeof window&&window.IntersectionObserver&&i()?!b&&(a=new IntersectionObserver(j,ObserverParams),a.observe(h)):g(!0),function(){b=!0,a&&a.unobserve(h)}},[b]),"eager"===c?[!1]:[f]};
|
|
11
|
+
*/export var useHasIntersected=function(a){var b=a.elRef,c=a.loading,d=useState(!1),e=_slicedToArray(d,2),f=e[0],g=e[1],h=(b||{}).current,i=function(){return b&&h},j=function(a,b){a.forEach(function(a){a.isIntersecting&&(g(!0),b.unobserve(h))})};return useEffect(function(){var a,b=!1;return"undefined"!=typeof window&&window.IntersectionObserver&&i()?!b&&(a=new IntersectionObserver(j,ObserverParams),a.observe(h)):g(!0),function(){b=!0,a&&a.unobserve(h)}},[b]),"eager"===c?[!1]:[f]};
|
|
@@ -1,21 +1,3 @@
|
|
|
1
1
|
/* eslint-disable no-unused-vars */ /* eslint-disable no-param-reassign */var prepRequirements=function(a){if(!a||0===a.length)return[];var b=copyOf(a);return b.forEach(function(a){a.prepared||(prepLegacyAlternatives(a),a.properties=prepFields(a.properties||a.fields),a.type&&"object"!==a.type&&!a.types&&(a.properties.type={type:"string",enum:[a.type],required:!0,hidden:!0},a.type="object"),a.prepared=!0)}),b},prepFields=function(a,b,c){if(!a)return{};var d=copyOf(a);return d=flattenFieldsWithGroups(d),d=transformFieldArrayToMap(d),d=transformNestedKeysToNestedSpecs(d),Object.keys(d).forEach(function(a){d[a]=prepField(d[a],b,c)}),d},prepField=function(a,b,c){var d=copyOf(a);return prepLegacyProps(d),prepType(d),prepPattern(d),prepValidationMessages(d,c),d},flattenFieldsWithGroups=function(a){if(Array.isArray(a)){var b=[];return a.forEach(function(a){a.fields?b=b.concat(flattenFieldWithGroup(a,a.fields)):a.group?b=b.concat(flattenFieldWithGroup(a,a.group)):b.push(a)}),b}return a},flattenFieldWithGroup=function(a,b){return a.name&&0<b.length&&!b[0].name&&(b[0].name=a.name),a.width&&0<b.length&&!b[0].width&&(b[0].width=a.width),a.tooltip&&0<b.length&&!b[0].help&&(b[0].help={message:a.tooltip}),a.info&&0<b.length&&!b[0].help&&(b[0].help={message:a.info}),2===b.length&&b.forEach(function(a){a.width="md"}),3===b.length&&(b[0].width="md",b[1].width="md"),b},transformFieldArrayToMap=function(a){if(Array.isArray(a)){var b={};return a.forEach(function(a){var c=a.key||a.name;delete a.key,b[c]=copyOf(a)}),b}return a},transformNestedKeysToNestedSpecs=function(a){if(Array.isArray(a))throw new TypeError("Expecting a map of fields, not an array");var b={};return Object.keys(a).forEach(function(c){if(0<c.indexOf(".")){// If the key contains a period we need to nest the fields in another object
|
|
2
2
|
var d=c.split("."),e=d[0];b[e]||(b[e]={type:"object",properties:{}}),b[e].properties[d[1]]=a[c]}else b[c]=a[c]}),b},prepType=function(a){var b=a.type&&a.type.toLowerCase&&a.type.toLowerCase();switch(b){case"text":a.type="string";break;case"date":a.type="string",a.format="date";break;case"password":a.type="string",a.control="password";break;case"checkbox":a.type="boolean";break;case"select":a.control||(a.control="select"),delete a.type;break;case"radio":a.control="radio",delete a.type;break;case"upload":a.type="string",a.format="base64url";break;case"tel":a.type="string",a.format="phone";break;case"textarea":a.type="string",a.control="textarea";break;default:}a.control||"object"===a.type||(a.control=getControlType(a))},prepLegacyAlternatives=function(a){!a.title&&a.label&&(a.title=a.label),a.title||(a.title=getNameFromType(a.type)),!a.type&&a.name&&(a.type=a.name),!a.description&&a.tooltip&&(a.description=a.tooltip),a.fieldGroups&&!a.fields&&(a.fields=flattenFieldsWithGroups(a.fieldGroups),delete a.fieldGroups)},prepLegacyProps=function(a){a.name&&!a.title&&(a.title=a.name,delete a.name),a.validationRegexp&&(a.pattern=a.validationRegexp,delete a.validationRegexp),a.min&&(a.minimum=a.min,delete a.min),a.max&&(a.maximum=a.max,delete a.max),a.example&&!a.placeholder&&(a.placeholder=a.example,delete a.example),a.tooltip&&!a.help&&(a.help={message:a.tooltip},delete a.tooltip),a.valuesAllowed&&!a.values&&(a.values=a.valuesAllowed,delete a.valuesAllowed),a.values&&a.values.map&&(a.values=prepLegacyValues(a.values)),a.value&&!a.default&&(a.default=a.value,delete a.value),a.values&&a.values&&0<a.values.length&&a.values[0]&&!a.values[0].value&&a.values[0].label&&!a.placeholder&&(a.placeholder=a.values[0].label,a.values=a.values.slice(1))},prepLegacyValues=function(a){return a.map(prepLegacyValue)},prepLegacyValue=function(a){return!a.label&&a.title&&(a.label=a.title,delete a.title),!a.label&&a.name&&(a.label=a.name,delete a.name),!a.value&&a.code&&(a.value=a.code,delete a.code),!a.value&&a.key&&(a.value=a.key,delete a.key),a},prepPattern=function(a){if(a.pattern)try{new RegExp(a.pattern)}catch(b){console.warn("API regexp is invalid"),delete a.pattern}else delete a.pattern},prepValidationMessages=function(a,b){return a.validationMessages=a.validationMessages?a.validationMessages:b,a.validationMessages?void(a.validationMessages.minimum&&(a.validationMessages.min=a.validationMessages.minimum,delete a.validationMessages.minimum),a.validationMessages.maximum&&(a.validationMessages.max=a.validationMessages.maximum,delete a.validationMessages.maximum)):void delete a.validationMessages},getControlType=function(a){if(a.control)return a.control.toLowerCase();if(a.hidden)return"hidden";if(a.values&&0<a.values.length)return getSelectionType(a);switch(a.type){case"string":return getControlForStringFormat(a.format);case"number":case"integer":return"number";case"boolean":return"checkbox";default:return"text";}},getControlForStringFormat=function(a){return"date"===a?"date":"base64url"===a?"file":"password"===a?"password":"uri"===a?"text":"email"===a?"text":"phone"===a?"tel":"text"},getSelectionType=function(a){return a.control?a.control:"select"===a.type?"select":"radio"===a.type?"radio":a.values?3<a.values.length?"select":"radio":"select"},copyOf=function(a){return JSON.parse(JSON.stringify(a))},getNameFromType=function(a){if(a&&0<a.length){var b=a.toLowerCase().split("_").join(" ");// String.replace method only replaces first instance
|
|
3
|
-
return b.charAt(0).toUpperCase()+b.slice(1)}return""}
|
|
4
|
-
* In an older format we had an extra fieldGroup level, here we flatten that out
|
|
5
|
-
* So the inner arrays of fields within the different field groups are flattened
|
|
6
|
-
* to a single array, which is returned.
|
|
7
|
-
*
|
|
8
|
-
* @param fields
|
|
9
|
-
*/ /*
|
|
10
|
-
* Some older requirements return an array of fields, where it should be a map
|
|
11
|
-
* from the property name to the spec. This converts arrays to maps.
|
|
12
|
-
*/ /*
|
|
13
|
-
* Some older format return keys like 'address.city', expecting the value of
|
|
14
|
-
* city to be nested inside an address object. This function creates a spec of
|
|
15
|
-
* type 'object', and nests such fields inside of it. When we render we pass
|
|
16
|
-
* this object spec to a nested fieldset.
|
|
17
|
-
*/ /**
|
|
18
|
-
* Some older requirments formats do not include a label for alternatives
|
|
19
|
-
*
|
|
20
|
-
* @param tabType
|
|
21
|
-
*/export{prepFields,getControlType};
|
|
3
|
+
return b.charAt(0).toUpperCase()+b.slice(1)}return""};export{prepFields,getControlType};
|
|
@@ -1,10 +1,4 @@
|
|
|
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 classNames from"classnames";import PropTypes from"prop-types";import{useState}from"react";import{useIntl}from"react-intl";import{Size,DateMode,MonthFormat}from"../common";import{getMonthNames,isDateValid,isMonthAndYearFormat}from"../common/dateUtils";import
|
|
2
|
-
var d=V(z,D,b),e=d.checkedDay;z&&e!==z&&A(e),I(c),Q(e,D,c)}else I(c),Q(z,D,null)},U=function(a){a!==L&&(M(a),m(N(a)||null))},V=function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null,b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0,c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null,d=a,e=new Date(c||2e3,b+1,0).getDate();return a||(d=null),(a&&0>a||"00"===a)&&(d=1),(a&&b||31<a)&&(d=a>e?e:a),{checkedDay:d,checkedMonth:b,checkedYear:c}},W=l===DateMode.MONTH_YEAR,X=classNames({"col-sm-8":W,"col-sm-5":!W}),Y=MonthBeforeDay.has(t);return/*#__PURE__*/_jsx("div",{className:"tw-date",id:q,onFocus:function onFocus(a){return shouldPropagateOnFocus(a)?n&&n():a.stopPropagation()},onBlur:function onBlur(a){return shouldPropagateOnBlur(a)?o&&o():a.stopPropagation()},children:/*#__PURE__*/_jsxs("div",{className:"row",children:[Y&&/*#__PURE__*/_jsx("div",{className:X,children:O()}),!W&&/*#__PURE__*/_jsx("div",{className:"col-sm-3",children:/*#__PURE__*/_jsxs("label",{children:[/*#__PURE__*/_jsx("span",{className:"sr-only",children:h}),/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(f),children:/*#__PURE__*/_jsx(
|
|
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 classNames from"classnames";import PropTypes from"prop-types";import{useState}from"react";import{useIntl}from"react-intl";import{Select,Input}from"..";import{Size,DateMode,MonthFormat}from"../common";import{getMonthNames,isDateValid,isMonthAndYearFormat}from"../common/dateUtils";import messages from"./DateInput.messages";import{explodeDate,convertToLocalMidnight}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var MonthBeforeDay=new Set(["en-US","ja-JP"]),INITIAL_DEFAULT_STATE={year:null,month:null,day:null},DateInput=function(a){var b,c,d,e=a.disabled,f=a.size,g=a.value,h=a.dayLabel,i=a.monthLabel,j=a.yearLabel,k=a.monthFormat,l=a.mode,m=a.onChange,n=a.onFocus,o=a.onBlur,p=a.placeholders,q=a.id,r=a.selectProps,s=useIntl(),t=s.locale,u=s.formatMessage,v=function(){return g&&isDateValid(g)?"string"==typeof g?convertToLocalMidnight(g):g:null},w=function(a){var b=INITIAL_DEFAULT_STATE;if(g&&isDateValid(g)){var c=v();b=explodeDate(c),isMonthAndYearFormat(g)&&(b.day=null)}return b[a]},x=useState(function(){return w("day")}),y=_slicedToArray(x,2),z=y[0],A=y[1],B=useState(function(){return w("month")}),C=_slicedToArray(B,2),D=C[0],E=C[1],F=useState(function(){return w("year")}),G=_slicedToArray(F,2),H=G[0],I=G[1],J=useState(v),K=_slicedToArray(J,2),L=K[0],M=K[1];h=h||u(messages.dayLabel),i=i||u(messages.monthLabel),j=j||u(messages.yearLabel),p={day:(null===(b=p)||void 0===b?void 0:b.day)||"DD",month:(null===(c=p)||void 0===c?void 0:c.month)||u(messages.monthLabel),year:(null===(d=p)||void 0===d?void 0:d.year)||"YYYY"};var N=function(a){if(!isDateValid(a))return"";switch(l){case DateMode.MONTH_YEAR:return[a.getFullYear(),"0".concat(a.getMonth()+1).slice(-2)].join("-");case DateMode.DAY_MONTH_YEAR:default:return[a.getFullYear(),"0".concat(a.getMonth()+1).slice(-2),"0".concat(a.getDate()).slice(-2)].join("-");}},O=function(){var a=getMonthNames(t,k);return/*#__PURE__*/_jsxs("label",{children:[/*#__PURE__*/_jsx("span",{className:"sr-only",children:i}),/*#__PURE__*/_jsx(Select,_objectSpread({id:q?"".concat(q,"-select"):void 0,name:"month",disabled:e,placeholder:p.month,options:P(),size:f,selected:null===D?null:{value:D,label:a[D]},onChange:function(a){return S(a)}},r))]})},P=function(){var a=[],b=getMonthNames(t,k);return b.forEach(function(b,c){a.push({value:c,label:b})}),a},Q=function(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:z,b=1<arguments.length&&arguments[1]!==void 0?arguments[1]:D,c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:H,d=null!=a&&null!=b&&null!=c?new Date(c,b,a):null,e=isDateValid(d)?d:null;e||U(INITIAL_DEFAULT_STATE),l===DateMode.MONTH_YEAR?0<=b&&c&&(b!==D||c!==H)&&U(e):a&&0<=b&&c&&(a!==z||b!==D||c!==H)&&U(e)},R=function(a){var b=V(a.target.value,D,H),c=b.checkedDay;A(c),Q(c,D,H)},S=function(a){if(!a)return E(null),void Q(z,null,H);var b=a?a.value:0,c=V(z,b,H),d=c.checkedDay;E(b),z&&d!==z&&A(d),Q(d,b,H)},T=function(a){var b=a.target.value,c=4<b.length?b.slice(0,4):b;if(4===c.toString().length){// Correct day based on year and month.
|
|
2
|
+
var d=V(z,D,b),e=d.checkedDay;z&&e!==z&&A(e),I(c),Q(e,D,c)}else I(c),Q(z,D,null)},U=function(a){a!==L&&(M(a),m(N(a)||null))},V=function(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:null,b=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0,c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null,d=a,e=new Date(c||2e3,b+1,0).getDate();return a||(d=null),(a&&0>a||"00"===a)&&(d=1),(a&&b||31<a)&&(d=a>e?e:a),{checkedDay:d,checkedMonth:b,checkedYear:c}},W=l===DateMode.MONTH_YEAR,X=classNames({"col-sm-8":W,"col-sm-5":!W}),Y=MonthBeforeDay.has(t);return/*#__PURE__*/_jsx("div",{className:"tw-date",id:q,onFocus:function onFocus(a){return shouldPropagateOnFocus(a)?n&&n():a.stopPropagation()},onBlur:function onBlur(a){return shouldPropagateOnBlur(a)?o&&o():a.stopPropagation()},children:/*#__PURE__*/_jsxs("div",{className:"row",children:[Y&&/*#__PURE__*/_jsx("div",{className:X,children:O()}),!W&&/*#__PURE__*/_jsx("div",{className:"col-sm-3",children:/*#__PURE__*/_jsxs("label",{children:[/*#__PURE__*/_jsx("span",{className:"sr-only",children:h}),/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(f),children:/*#__PURE__*/_jsx(Input,{type:"number",name:"day",value:z||"",placeholder:p.day,disabled:e,onChange:function(a){return R(a)}})})]})}),!Y&&/*#__PURE__*/_jsx("div",{className:X,children:O()}),/*#__PURE__*/_jsx("div",{className:"col-sm-4",children:/*#__PURE__*/_jsxs("label",{children:[/*#__PURE__*/_jsx("span",{className:"sr-only",children:j}),/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(f),children:/*#__PURE__*/_jsx(Input,{type:"number",name:"year",placeholder:p.year,value:H||"",disabled:e,onChange:function(a){return T(a)}})})]})})]})})};// Should only propagate if the relatedTarget is not part of this DateInput component.
|
|
3
3
|
function shouldPropagateOnFocus(a){var b=a.target,c=a.relatedTarget,d=b.closest(".tw-date"),e=c&&c.closest(".tw-date");return d!==e}// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.
|
|
4
|
-
function shouldPropagateOnBlur(a){var b=a.target,c=a.relatedTarget,d=b.closest(".tw-date"),e=c||(document.activeElement===b?null:document.activeElement),f=e&&e.closest(".tw-date")
|
|
5
|
-
// (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)
|
|
6
|
-
// "IE11 sets document.activeElement to the next focused element before the blur event is called."
|
|
7
|
-
// (https://stackoverflow.com/a/49325196/986241)
|
|
8
|
-
// Therefore if the relatedTarget is null, we try the document.activeElement,
|
|
9
|
-
// which may contain the HTML element that is gaining focus
|
|
10
|
-
return d!==f}DateInput.propTypes={disabled:PropTypes.bool,size:PropTypes.oneOf(["sm","md","lg"]),value:PropTypes.oneOfType([PropTypes.string,PropTypes.instanceOf(Date)]),onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,dayLabel:PropTypes.string,monthLabel:PropTypes.string,yearLabel:PropTypes.string,monthFormat:PropTypes.oneOf(["long","short"]),mode:PropTypes.oneOf(["day-month-year","month-year"]),placeholders:PropTypes.shape({day:PropTypes.node,month:PropTypes.node,year:PropTypes.node}),id:PropTypes.string,selectProps:PropTypes.object},DateInput.defaultProps={disabled:!1,size:Size.MEDIUM,value:null,onFocus:null,onBlur:null,monthFormat:MonthFormat.LONG,mode:DateMode.DAY_MONTH_YEAR,id:"",selectProps:{}};export default DateInput;
|
|
4
|
+
function shouldPropagateOnBlur(a){var b=a.target,c=a.relatedTarget,d=b.closest(".tw-date"),e=c||(document.activeElement===b?null:document.activeElement),f=e&&e.closest(".tw-date");return d!==f}DateInput.propTypes={disabled:PropTypes.bool,size:PropTypes.oneOf(["sm","md","lg"]),value:PropTypes.oneOfType([PropTypes.string,PropTypes.instanceOf(Date)]),onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,dayLabel:PropTypes.string,monthLabel:PropTypes.string,yearLabel:PropTypes.string,monthFormat:PropTypes.oneOf(["long","short"]),mode:PropTypes.oneOf(["day-month-year","month-year"]),placeholders:PropTypes.shape({day:PropTypes.node,month:PropTypes.node,year:PropTypes.node}),id:PropTypes.string,selectProps:PropTypes.object},DateInput.defaultProps={disabled:!1,size:Size.MEDIUM,value:null,onFocus:null,onBlur:null,monthFormat:MonthFormat.LONG,mode:DateMode.DAY_MONTH_YEAR,id:"",selectProps:{}};export default DateInput;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
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,Dimmer}from"..";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:Dimmer,title:"Layouts/Dimmer",args:{fadeContentOnEnter:!1,fadeContentOnExit:!1,disableClickToClose:!1}};export var Basic={render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
2
|
+
var b=useState(!1),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return e(function(a){return!a})},children:"Toggle dimmer"}),/*#__PURE__*/_jsx(Dimmer,_objectSpread(_objectSpread({},a),{},{open:d,onClose:function onClose(a){e(!1),action("closed")(a)}}))]})}};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Types
|
|
3
3
|
*/ /**
|
|
4
4
|
* Components
|
|
5
|
-
*/export{default as Title}from"./title";export{default as Body}from"./body";export{default as Accordion}from"./accordion";export{default as ActionButton}from"./actionButton";export{default as ActionOption}from"./actionOption";export{default as Alert}from"./alert";export{default as Avatar}from"./avatar";export{default as AvatarWrapper}from"./avatarWrapper";export{default as Badge}from"./badge";export{default as BottomSheet}from"./common/bottomSheet";export{default as Button}from"./button";export{default as Card}from"./card";export{default as Checkbox}from"./checkbox";export{default as CheckboxButton}from"./checkboxButton";export{default as CheckboxOption}from"./checkboxOption";export{default as Chevron}from"./chevron";export{default as Chips,Chip}from"./chips";export{default as CircularButton}from"./circularButton";export{default as DateInput}from"./dateInput";export{default as DateLookup}from"./dateLookup";export{default as Decision}from"./decision";export{default as DefinitionList}from"./definitionList";export{default as Dimmer}from"./dimmer";export{default as Display}from"./display";export{default as Drawer}from"./drawer";export{default as DropFade}from"./dropFade";export{default as DynamicFieldDefinitionList}from"./dynamicFieldDefinitionList";export{default as Emphasis}from"./emphasis";export{default as FlowNavigation}from"./flowNavigation";export{default as Header}from"./header";export{default as Image}from"./image";export{default as Info}from"./info";export{default as InlineAlert}from"./inlineAlert";export{default as InputWithDisplayFormat}from"./inputWithDisplayFormat";export{default as InstructionsList}from"./instructionsList";export{default as Link}from"./link";export{default as Loader}from"./loader";export{default as Logo}from"./logo";export{default as Markdown}from"./markdown";export{default as Modal}from"./modal";export{default as Money}from"./money";export{default as MoneyInput}from"./moneyInput";export{default as NavigationOption}from"./navigationOption";export{default as NavigationOptionsList}from"./navigationOptionsList";export{default as Nudge}from"./nudge";export{default as Option}from"./common/Option";export{default as OverlayHeader}from"./overlayHeader";export{default as PhoneNumberInput}from"./phoneNumberInput";export{default as Popover}from"./popover";export{default as ProcessIndicator}from"./processIndicator";export{default as ProgressBar}from"./progressBar";export{default as Progress}from"./progress";export{default as Provider,DirectionProvider,LanguageProvider}from"./provider";export{default as Radio}from"./radio";export{default as RadioGroup}from"./radioGroup";export{default as RadioOption}from"./radioOption";export{default as Section}from"./section";export{default as Select}from"./select";export{default as SlidingPanel}from"./slidingPanel";export{default as SnackbarPortal}from"./snackbar/Snackbar";export{default as SnackbarProvider}from"./snackbar/SnackbarProvider";export{default as StatusIcon}from"./statusIcon/StatusIcon";export{default as Stepper}from"./stepper";export{default as Sticky}from"./sticky";export{default as Summary}from"./summary";export{default as Switch}from"./switch";export{default as SwitchOption}from"./switchOption";export{default as Tabs}from"./tabs";export{default as TextareaWithDisplayFormat}from"./textareaWithDisplayFormat";export{default as Tooltip}from"./tooltip";export{default as Typeahead}from"./typeahead";export{default as Upload}from"./upload";export{default as UploadInput}from"./uploadInput";export{SnackbarConsumer,SnackbarContext}from"./snackbar/SnackbarContext";export{default as CriticalCommsBanner}from"./criticalBanner";/**
|
|
5
|
+
*/export{default as Title}from"./title";export{default as Body}from"./body";export{default as Accordion}from"./accordion";export{default as ActionButton}from"./actionButton";export{default as ActionOption}from"./actionOption";export{default as Alert}from"./alert";export{default as Avatar}from"./avatar";export{default as AvatarWrapper}from"./avatarWrapper";export{default as Badge}from"./badge";export{default as BottomSheet}from"./common/bottomSheet";export{default as Button}from"./button";export{default as Card}from"./card";export{default as Checkbox}from"./checkbox";export{default as CheckboxButton}from"./checkboxButton";export{default as CheckboxOption}from"./checkboxOption";export{default as Chevron}from"./chevron";export{default as Chips,Chip}from"./chips";export{default as CircularButton}from"./circularButton";export{default as DateInput}from"./dateInput";export{default as DateLookup}from"./dateLookup";export{default as Decision}from"./decision";export{default as DefinitionList}from"./definitionList";export{default as Dimmer}from"./dimmer";export{default as Display}from"./display";export{default as Drawer}from"./drawer";export{default as DropFade}from"./dropFade";export{default as DynamicFieldDefinitionList}from"./dynamicFieldDefinitionList";export{default as Emphasis}from"./emphasis";export{default as FlowNavigation}from"./flowNavigation";export{default as Header}from"./header";export{default as Image}from"./image";export{default as Info}from"./info";export{default as InlineAlert}from"./inlineAlert";export{Input}from"./inputs/Input";export{TextArea}from"./inputs/TextArea";export{default as InputWithDisplayFormat}from"./inputWithDisplayFormat";export{default as InstructionsList}from"./instructionsList";export{default as Link}from"./link";export{default as Loader}from"./loader";export{default as Logo}from"./logo";export{default as Markdown}from"./markdown";export{default as Modal}from"./modal";export{default as Money}from"./money";export{default as MoneyInput}from"./moneyInput";export{default as NavigationOption}from"./navigationOption";export{default as NavigationOptionsList}from"./navigationOptionsList";export{default as Nudge}from"./nudge";export{default as Option}from"./common/Option";export{default as OverlayHeader}from"./overlayHeader";export{default as PhoneNumberInput}from"./phoneNumberInput";export{default as Popover}from"./popover";export{default as ProcessIndicator}from"./processIndicator";export{default as ProgressBar}from"./progressBar";export{default as Progress}from"./progress";export{default as Provider,DirectionProvider,LanguageProvider}from"./provider";export{default as Radio}from"./radio";export{default as RadioGroup}from"./radioGroup";export{default as RadioOption}from"./radioOption";export{default as Section}from"./section";export{default as Select}from"./select";export{default as SlidingPanel}from"./slidingPanel";export{default as SnackbarPortal}from"./snackbar/Snackbar";export{default as SnackbarProvider}from"./snackbar/SnackbarProvider";export{default as StatusIcon}from"./statusIcon/StatusIcon";export{default as Stepper}from"./stepper";export{default as Sticky}from"./sticky";export{default as Summary}from"./summary";export{default as Switch}from"./switch";export{default as SwitchOption}from"./switchOption";export{default as Tabs}from"./tabs";export{default as TextareaWithDisplayFormat}from"./textareaWithDisplayFormat";export{default as Tooltip}from"./tooltip";export{default as Typeahead}from"./typeahead";export{default as Upload}from"./upload";export{default as UploadInput}from"./uploadInput";export{SnackbarConsumer,SnackbarContext}from"./snackbar/SnackbarContext";export{default as CriticalCommsBanner}from"./criticalBanner";/**
|
|
6
6
|
* Hooks
|
|
7
7
|
*/export{default as useSnackbar}from"./snackbar/useSnackbar";export{useDirection,useLayout}from"./common/hooks";/**
|
|
8
8
|
* Enums
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","className"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import{forwardRef}from"react";import{formControlClassNameBase}from"./_common";import{jsx as _jsx}from"react/jsx-runtime";export var Input=/*#__PURE__*/forwardRef(function(a,b){var c=a.size,d=void 0===c?"auto":c,e=a.className,f=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsx("input",_objectSpread({ref:b,className:classNames(e,formControlClassNameBase({size:d}))},f))});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import{forwardRef}from"react";import{formControlClassNameBase}from"./_common";import{jsx as _jsx}from"react/jsx-runtime";export var TextArea=/*#__PURE__*/forwardRef(function(a,b){var c=a.className,d=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsx("textarea",_objectSpread({ref:b,className:classNames(c,formControlClassNameBase(),"np-text-area")},d))});
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import classNames from"classnames";export function formControlClassNameBase(){var a=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},b=a.size,c=void 0===b?"auto":b;return classNames("form-control",// TODO: Deprecate
|
|
2
|
+
"np-form-control",{"np-form-control--size-auto np-text-body-large":"auto"===c,"np-form-control--size-sm np-text-body-default":"sm"===c,"np-form-control--size-md np-text-body-large":"md"===c,"np-form-control--size-lg np-text-title-subsection":"lg"===c},"np-form-control--shape-rectangle")}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Loader from"./Loader";export default{component:Loader,title:"Loading/Loader",args:{size:"md"},argTypes:{size:{type:{name:"enum",value:["sm","md"]}}},tags:["autodocs"]};export var Basic={};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Logo,{LogoType}from".";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Logo,title:"Content/Logo",render:function render(a){var b=a.type,c=a.inverse;return/*#__PURE__*/_jsx("div",{className:"".concat(c?"bg--dark":""," p-a-3"),children:/*#__PURE__*/_jsx(Logo,{type:b,inverse:c})})},tags:["autodocs"]};export var Basic={args:{type:LogoType.WISE,inverse:!1}};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","body","footer","onClose","className","open","size","scroll","position"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import{useRef}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{Size,Position,Scroll,Typography}from"../common";import{CloseButton}from"../common/closeButton";import{useLayout}from"../common/hooks";import Dimmer from"../dimmer";import Drawer from"../drawer";import Title from"../title/Title";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var TRANSITION_DURATION_IN_MILLISECONDS=150,Modal=function(a){var b=a.title,c=void 0===b?null:b,d=a.body,e=a.footer,f=void 0===e?null:e,g=a.onClose,h=a.className,i=a.open,j=a.size,k=void 0===j?Size.MEDIUM:j,l=a.scroll,m=void 0===l?Scroll.VIEWPORT:l,n=a.position,o=void 0===n?Position.CENTER:n,p=_objectWithoutProperties(a,_excluded),q=function(a){return null===h||void 0===h?void 0:h.split(" ").includes(a)},r=useLayout(),s=r.isMobile,t=q("compact"),u=q("no-divider"),v=useRef(null)
|
|
2
|
-
return s?/*#__PURE__*/_jsx(Drawer,{open:i,headerTitle:c,footerContent:f,position:Position.BOTTOM,onClose:g,children:d}):/*#__PURE__*/_jsx(Dimmer,{open:i,scrollable:m===Scroll.VIEWPORT,contentPosition:o,onClose:g,children:/*#__PURE__*/_jsx(CSSTransition,{nodeRef:v,appear:!0,in:i,classNames:{enterDone:"in"},timeout:TRANSITION_DURATION_IN_MILLISECONDS,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread({ref:v,className:classNames("tw-modal","d-flex","fade","outline-none",m===Scroll.CONTENT&&"tw-modal--scrollable",h)},p),{},{children:/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-dialog","d-flex",_defineProperty({},"tw-modal-".concat(k),k)),"aria-modal":!0,role:"dialog",children:/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-content","d-flex","flex-column","justify-content-between",{"tw-modal-compact":t,"tw-modal-no-title":!c}),children:[/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-header","d-flex","align-items-center","justify-content-between","flex-wrap",{"modal--withoutborder":!c||u}),children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"tw-modal-title",children:c}),/*#__PURE__*/_jsx(CloseButton,{onClick:g})]}),/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-body",{"tw-modal-body--scrollable":m===Scroll.CONTENT}),children:d}),f&&/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-footer","d-flex","align-items-center","flex-wrap",{"modal--withoutborder":u}),children:f})]})})}))})})};export default Modal;
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","body","footer","onClose","className","open","size","scroll","position"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import{useRef}from"react";import CSSTransition from"react-transition-group/CSSTransition";import{Size,Position,Scroll,Typography}from"../common";import{CloseButton}from"../common/closeButton";import{useLayout}from"../common/hooks";import Dimmer from"../dimmer";import Drawer from"../drawer";import Title from"../title/Title";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var TRANSITION_DURATION_IN_MILLISECONDS=150,Modal=function(a){var b=a.title,c=void 0===b?null:b,d=a.body,e=a.footer,f=void 0===e?null:e,g=a.onClose,h=a.className,i=a.open,j=a.size,k=void 0===j?Size.MEDIUM:j,l=a.scroll,m=void 0===l?Scroll.VIEWPORT:l,n=a.position,o=void 0===n?Position.CENTER:n,p=_objectWithoutProperties(a,_excluded),q=function(a){return null===h||void 0===h?void 0:h.split(" ").includes(a)},r=useLayout(),s=r.isMobile,t=q("compact"),u=q("no-divider"),v=useRef(null);return s?/*#__PURE__*/_jsx(Drawer,{open:i,headerTitle:c,footerContent:f,position:Position.BOTTOM,onClose:g,children:d}):/*#__PURE__*/_jsx(Dimmer,{open:i,scrollable:m===Scroll.VIEWPORT,contentPosition:o,onClose:g,children:/*#__PURE__*/_jsx(CSSTransition,{nodeRef:v,appear:!0,in:i,classNames:{enterDone:"in"},timeout:TRANSITION_DURATION_IN_MILLISECONDS,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread({ref:v,className:classNames("tw-modal","d-flex","fade","outline-none",m===Scroll.CONTENT&&"tw-modal--scrollable",h)},p),{},{children:/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-dialog","d-flex",_defineProperty({},"tw-modal-".concat(k),k)),"aria-modal":!0,role:"dialog",children:/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-content","d-flex","flex-column","justify-content-between",{"tw-modal-compact":t,"tw-modal-no-title":!c}),children:[/*#__PURE__*/_jsxs("div",{className:classNames("tw-modal-header","d-flex","align-items-center","justify-content-between","flex-wrap",{"modal--withoutborder":!c||u}),children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_BODY,className:"tw-modal-title",children:c}),/*#__PURE__*/_jsx(CloseButton,{onClick:g})]}),/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-body",{"tw-modal-body--scrollable":m===Scroll.CONTENT}),children:d}),f&&/*#__PURE__*/_jsx("div",{className:classNames("tw-modal-footer","d-flex","align-items-center","flex-wrap",{"modal--withoutborder":u}),children:f})]})})}))})})};export default Modal;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Money from"./Money";export default{component:Money,title:"Typography/Money"};export var Basic={args:{amount:1234.5678,currency:"GBP"}};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";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}function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{isEmpty,isNumber,isNull}from"@transferwise/neptune-validation";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Typography}from"../common";import{Key as keyValues}from"../common/key";import keyCodes from"../common/keyCodes";import{Size}from"../common/propsValues/size";import Select from"../select";import Title from"../title";import messages from"./MoneyInput.messages";import{formatAmount,parseAmount}from"./currencyFormatting";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Currency=PropTypes.shape({header:PropTypes.string,value:PropTypes.string,label:PropTypes.string,currency:PropTypes.string,note:PropTypes.string,searchable:PropTypes.string}),CUSTOM_ACTION="CUSTOM_ACTION",isNumberOrNull=function(a){return isNumber(a)||isNull(a)},formatAmountIfSet=function(a,b,c,d){return d?a||"":"number"==typeof a?formatAmount(a,b,c):""},parseNumber=function(a,b,c,d){return d?d&&a.length>d?0:+a:parseAmount(a,b,c)},inputKeyCodeAllowlist=new Set([keyCodes.BACKSPACE,keyCodes.DELETE,keyCodes.COMMA,keyCodes.PERIOD,keyCodes.DOWN,keyCodes.UP,keyCodes.LEFT,keyCodes.RIGHT,keyCodes.ENTER,keyCodes.ESCAPE,keyCodes.TAB]),inputKeyAllowlist=new Set([keyValues.PERIOD,keyValues.COMMA]),MoneyInput=/*#__PURE__*/function(a){function b(a){var d;_classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"isInputAllowedForKeyEvent",function(a){var b=a.keyCode,c=a.metaKey,d=a.key,e=a.ctrlKey,f=isNumber(parseInt(d,10));return f||c||e||inputKeyCodeAllowlist.has(b)||inputKeyAllowlist.has(d)}),_defineProperty(_assertThisInitialized(d),"handleKeyDown",function(a){d.isInputAllowedForKeyEvent(a)||a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handlePaste",function(a){var b=(a.clipboardData||window.clipboardData).getData("text"),c=d.state.locale,e=isEmpty(b)?null:parseNumber(b,d.props.selectedCurrency.currency,c,d.props.maxLengthOverride);isNumberOrNull(e)&&(d.setState({formattedAmount:formatAmountIfSet(e,d.props.selectedCurrency.currency,c,d.props.maxLengthOverride)}),d.props.onAmountChange(e)),a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"onAmountChange",function(a){var b=a.target.value;d.setState({formattedAmount:b});var c=isEmpty(b)?null:parseNumber(b,d.props.selectedCurrency.currency,d.state.locale,d.props.maxLengthOverride);isNumberOrNull(c)&&d.props.onAmountChange(c)}),_defineProperty(_assertThisInitialized(d),"onAmountBlur",function(){d.amountFocused=!1,d.setAmount()}),_defineProperty(_assertThisInitialized(d),"onAmountFocus",function(){d.amountFocused=!0}),_defineProperty(_assertThisInitialized(d),"handleSelectChange",function(a){d.handleSearchChange(""),d.props.onCustomAction&&a.value===CUSTOM_ACTION?d.props.onCustomAction():d.props.onCurrencyChange(a)}),_defineProperty(_assertThisInitialized(d),"handleSearchChange",function(a){d.setState({searchQuery:a}),d.props.onSearchChange&&d.props.onSearchChange({searchQuery:a,filteredOptions:filterOptionsForQuery(d.props.currencies,a)})}),_defineProperty(_assertThisInitialized(d),"style",function(a){return d.props.classNames[a]||a});var e=d.props.intl.locale;return d.formatMessage=d.props.intl.formatMessage,d.state={searchQuery:"",formattedAmount:formatAmountIfSet(a.amount,a.selectedCurrency.currency,e,a.maxLengthOverride),locale:e},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(a){var b;if(this.setState({locale:null===a||void 0===a||null===(b=a.intl)||void 0===b?void 0:b.locale}),!this.amountFocused){var c;this.setState({formattedAmount:formatAmountIfSet(a.amount,a.selectedCurrency.currency,null===a||void 0===a||null===(c=a.intl)||void 0===c?void 0:c.locale,a.maxLengthOverride)})}}},{key:"getSelectOptions",value:function getSelectOptions(){var a=_toConsumableArray(filterOptionsForQuery(this.props.currencies,this.state.searchQuery));return this.props.onCustomAction&&a.push({value:CUSTOM_ACTION,label:this.props.customActionLabel}),a}},{key:"setAmount",value:function setAmount(){var a=this;this.setState(function(b){var c=parseNumber(b.formattedAmount,a.props.selectedCurrency.currency,b.locale,a.props.maxLengthOverride);return isNumberOrNull(c)?{formattedAmount:formatAmountIfSet(c,a.props.selectedCurrency.currency,b.locale,a.props.maxLengthOverride)}:{formattedAmount:b.formattedAmount}})}},{key:"render",value:function render(){var a=this.props,b=a.selectedCurrency,c=a.onCurrencyChange,d=a.size,e=a.addon,f=a.id,g=a.selectProps,h=a.maxLengthOverride,i=this.getSelectOptions(),j=!this.state.searchQuery&&(1===i.length&&i[0].currency===b.currency||!c),k=!this.props.onAmountChange;return/*#__PURE__*/_jsxs("div",{className:classNames(this.style("tw-money-input"),this.style("input-group"),this.style("input-group-".concat(d))),children:[/*#__PURE__*/_jsx(
|
|
1
|
+
import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _assertThisInitialized from"@babel/runtime/helpers/assertThisInitialized";import _inherits from"@babel/runtime/helpers/inherits";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";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}function _createSuper(a){var b=_isNativeReflectConstruct();return function(){var c,d=_getPrototypeOf(a);if(b){var e=_getPrototypeOf(this).constructor;c=Reflect.construct(d,arguments,e)}else c=d.apply(this,arguments);return _possibleConstructorReturn(this,c)}}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(a){return!1}}import{isEmpty,isNumber,isNull}from"@transferwise/neptune-validation";import classNames from"classnames";import PropTypes from"prop-types";import{Component}from"react";import{injectIntl}from"react-intl";import{Typography}from"../common";import{Key as keyValues}from"../common/key";import keyCodes from"../common/keyCodes";import{Size}from"../common/propsValues/size";import{Input}from"../inputs/Input";import Select from"../select";import Title from"../title";import messages from"./MoneyInput.messages";import{formatAmount,parseAmount}from"./currencyFormatting";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var Currency=PropTypes.shape({header:PropTypes.string,value:PropTypes.string,label:PropTypes.string,currency:PropTypes.string,note:PropTypes.string,searchable:PropTypes.string}),CUSTOM_ACTION="CUSTOM_ACTION",isNumberOrNull=function(a){return isNumber(a)||isNull(a)},formatAmountIfSet=function(a,b,c,d){return d?a||"":"number"==typeof a?formatAmount(a,b,c):""},parseNumber=function(a,b,c,d){return d?d&&a.length>d?0:+a:parseAmount(a,b,c)},inputKeyCodeAllowlist=new Set([keyCodes.BACKSPACE,keyCodes.DELETE,keyCodes.COMMA,keyCodes.PERIOD,keyCodes.DOWN,keyCodes.UP,keyCodes.LEFT,keyCodes.RIGHT,keyCodes.ENTER,keyCodes.ESCAPE,keyCodes.TAB]),inputKeyAllowlist=new Set([keyValues.PERIOD,keyValues.COMMA]),MoneyInput=/*#__PURE__*/function(a){function b(a){var d;_classCallCheck(this,b),d=c.call(this,a),_defineProperty(_assertThisInitialized(d),"isInputAllowedForKeyEvent",function(a){var b=a.keyCode,c=a.metaKey,d=a.key,e=a.ctrlKey,f=isNumber(parseInt(d,10));return f||c||e||inputKeyCodeAllowlist.has(b)||inputKeyAllowlist.has(d)}),_defineProperty(_assertThisInitialized(d),"handleKeyDown",function(a){d.isInputAllowedForKeyEvent(a)||a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"handlePaste",function(a){var b=(a.clipboardData||window.clipboardData).getData("text"),c=d.state.locale,e=isEmpty(b)?null:parseNumber(b,d.props.selectedCurrency.currency,c,d.props.maxLengthOverride);isNumberOrNull(e)&&(d.setState({formattedAmount:formatAmountIfSet(e,d.props.selectedCurrency.currency,c,d.props.maxLengthOverride)}),d.props.onAmountChange(e)),a.preventDefault()}),_defineProperty(_assertThisInitialized(d),"onAmountChange",function(a){var b=a.target.value;d.setState({formattedAmount:b});var c=isEmpty(b)?null:parseNumber(b,d.props.selectedCurrency.currency,d.state.locale,d.props.maxLengthOverride);isNumberOrNull(c)&&d.props.onAmountChange(c)}),_defineProperty(_assertThisInitialized(d),"onAmountBlur",function(){d.amountFocused=!1,d.setAmount()}),_defineProperty(_assertThisInitialized(d),"onAmountFocus",function(){d.amountFocused=!0}),_defineProperty(_assertThisInitialized(d),"handleSelectChange",function(a){d.handleSearchChange(""),d.props.onCustomAction&&a.value===CUSTOM_ACTION?d.props.onCustomAction():d.props.onCurrencyChange(a)}),_defineProperty(_assertThisInitialized(d),"handleSearchChange",function(a){d.setState({searchQuery:a}),d.props.onSearchChange&&d.props.onSearchChange({searchQuery:a,filteredOptions:filterOptionsForQuery(d.props.currencies,a)})}),_defineProperty(_assertThisInitialized(d),"style",function(a){return d.props.classNames[a]||a});var e=d.props.intl.locale;return d.formatMessage=d.props.intl.formatMessage,d.state={searchQuery:"",formattedAmount:formatAmountIfSet(a.amount,a.selectedCurrency.currency,e,a.maxLengthOverride),locale:e},d}_inherits(b,a);var c=_createSuper(b);return _createClass(b,[{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(a){var b;if(this.setState({locale:null===a||void 0===a||null===(b=a.intl)||void 0===b?void 0:b.locale}),!this.amountFocused){var c;this.setState({formattedAmount:formatAmountIfSet(a.amount,a.selectedCurrency.currency,null===a||void 0===a||null===(c=a.intl)||void 0===c?void 0:c.locale,a.maxLengthOverride)})}}},{key:"getSelectOptions",value:function getSelectOptions(){var a=_toConsumableArray(filterOptionsForQuery(this.props.currencies,this.state.searchQuery));return this.props.onCustomAction&&a.push({value:CUSTOM_ACTION,label:this.props.customActionLabel}),a}},{key:"setAmount",value:function setAmount(){var a=this;this.setState(function(b){var c=parseNumber(b.formattedAmount,a.props.selectedCurrency.currency,b.locale,a.props.maxLengthOverride);return isNumberOrNull(c)?{formattedAmount:formatAmountIfSet(c,a.props.selectedCurrency.currency,b.locale,a.props.maxLengthOverride)}:{formattedAmount:b.formattedAmount}})}},{key:"render",value:function render(){var a=this.props,b=a.selectedCurrency,c=a.onCurrencyChange,d=a.size,e=a.addon,f=a.id,g=a.selectProps,h=a.maxLengthOverride,i=this.getSelectOptions(),j=!this.state.searchQuery&&(1===i.length&&i[0].currency===b.currency||!c),k=!this.props.onAmountChange;return/*#__PURE__*/_jsxs("div",{className:classNames(this.style("tw-money-input"),this.style("input-group"),this.style("input-group-".concat(d))),children:[/*#__PURE__*/_jsx(Input,{id:f,value:this.state.formattedAmount,inputMode:"decimal",disabled:k,maxLength:h,placeholder:formatAmountIfSet(this.props.placeholder,this.props.selectedCurrency.currency,this.state.locale,this.props.maxLengthOverride),autoComplete:"off",onKeyDown:this.handleKeyDown,onChange:this.onAmountChange,onFocus:this.onAmountFocus,onBlur:this.onAmountBlur,onPaste:this.handlePaste}),e&&/*#__PURE__*/_jsx("span",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),k?this.style("disabled"):""),children:e}),j?/*#__PURE__*/_jsxs("div",{className:classNames(this.style("input-group-addon"),this.style("input-".concat(d)),this.style("tw-money-input__fixed-currency"),k?this.style("disabled"):""),children:[("lg"===d||"md"===d)&&/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("i",{className:classNames(this.style("tw-money-input__keyline"))}),/*#__PURE__*/_jsx("i",{className:classNames(this.style("currency-flag"),this.style("currency-flag-".concat(b.currency.toLowerCase())),this.style("m-r-2"))})]}),/*#__PURE__*/_jsx(Title,{as:"span",type:Typography.TITLE_SUBSECTION,className:"lg"===d?this.style("m-r-1"):"",children:b.currency.toUpperCase()})]}):/*#__PURE__*/_jsx("div",{className:classNames(this.style("input-group-btn"),this.style("amount-currency-select-btn")),children:/*#__PURE__*/_jsx(Select,_objectSpread({id:f?"".concat(f,"-select"):void 0,classNames:this.props.classNames,options:i,selected:_objectSpread(_objectSpread({},b),{},{label:/*#__PURE__*/_jsx(Title,{as:"span",type:Typography.TITLE_SUBSECTION,className:"tw-money-input__text",children:b.label}),note:null}),placeholder:this.formatMessage(messages.selectPlaceholder),searchPlaceholder:this.props.searchPlaceholder,searchValue:this.state.searchQuery,size:d,required:!0,dropdownWidth:Size.LARGE,inverse:!0,onChange:this.handleSelectChange,onSearchChange:this.handleSearchChange},g))})]})}}]),b}(Component);function filterOptionsForQuery(a,b){if(!b)return a;var c=removeDuplicateValueOptions(a).filter(function(a){return isCurrencyOptionAndFitsQuery(a,b)});return sortOptionsLabelsToFirst(c,b)}function removeDuplicateValueOptions(a){var b=[],c=[];return a.forEach(function(a){a.value&&!c.includes(a.value)&&(b.push(a),c.push(a.value))}),b}function isCurrencyOptionAndFitsQuery(a,b){return!!a.value&&(contains(a.label,b)||contains(a.searchable,b)||contains(a.note,b))}function contains(a,b){return a&&a.toLowerCase().includes(b.toLowerCase())}function sortOptionsLabelsToFirst(a,b){return a.sort(function(a,c){var d=contains(a.label,b),e=contains(c.label,b);return d&&e?0:d?-1:e?1:0})}MoneyInput.propTypes={id:PropTypes.string,currencies:PropTypes.arrayOf(Currency).isRequired,selectedCurrency:Currency.isRequired,onCurrencyChange:PropTypes.func,placeholder:PropTypes.number,amount:PropTypes.number,size:PropTypes.oneOf(["sm","md","lg"]),onAmountChange:PropTypes.func,addon:PropTypes.node,searchPlaceholder:PropTypes.string,/**
|
|
2
2
|
* Allows the consumer to react to searching, while the search itself is handled internally. Called with `{ searchQuery: string, filteredOptions: Currency[] }`
|
|
3
3
|
*/onSearchChange:PropTypes.func,customActionLabel:PropTypes.node,onCustomAction:PropTypes.func,classNames:PropTypes.objectOf(PropTypes.string),selectProps:PropTypes.object,maxLengthOverride:PropTypes.number},MoneyInput.defaultProps={id:null,size:Size.LARGE,addon:null,searchPlaceholder:"",onSearchChange:void 0,onCurrencyChange:null,placeholder:null,amount:null,onAmountChange:null,customActionLabel:"",onCustomAction:null,classNames:{},selectProps:{},maxLengthOverride:null};// this export is necessary for react-to-typescript-definitions
|
|
4
4
|
// to be able to properly generate TS types, this is due to us wrapping this component in `injectIntl` before exporting
|
|
@@ -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{within,userEvent}from"@storybook/testing-library";import MoneyInput from".";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:MoneyInput,title:"Forms/MoneyInput",render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("label",{htmlFor:a.id,children:"Editable money input label"}),/*#__PURE__*/_jsx(MoneyInput,_objectSpread({},a))]})},args:{id:"money-input",amount:1e3,selectProps:{buttonProps:{"aria-label":"Select currency"},dropdownProps:{"aria-label":"Currency options"}}},tags:["autodocs"]};var exampleCurrency={eur:{value:"EUR",label:"EUR",note:"Euro",currency:"eur",searchable:"Spain, Germany, France, Austria"},gbp:{value:"GBP",label:"GBP",note:"British pound",currency:"gbp",searchable:"England, Scotland, Wales"}};export var SingleCurrency={args:{currencies:[],selectedCurrency:exampleCurrency.eur,onCurrencyChange:null}};export var MultipleCurrencies={args:{currencies:[{header:"Popular currencies"},exampleCurrency.eur,exampleCurrency.gbp],selectedCurrency:exampleCurrency.eur}};export var OpenedInput=_objectSpread(_objectSpread({},MultipleCurrencies),{},{play:function play(a){var b=a.canvasElement,c=within(b);userEvent.click(c.getByRole("combobox"))}});export var SmallInput={render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("label",{htmlFor:a.id,children:"Money inputs"}),/*#__PURE__*/_jsx(MoneyInput,_objectSpread(_objectSpread({},a),SingleCurrency.args)),/*#__PURE__*/_jsx("br",{}),/*#__PURE__*/_jsx(MoneyInput,_objectSpread(_objectSpread({},a),MultipleCurrencies.args)),/*#__PURE__*/_jsx("hr",{}),/*#__PURE__*/_jsxs("div",{className:"has-error",children:[/*#__PURE__*/_jsx("label",{htmlFor:a.id,children:"Error states"}),/*#__PURE__*/_jsx(MoneyInput,_objectSpread(_objectSpread({},a),SingleCurrency.args)),/*#__PURE__*/_jsx("br",{}),/*#__PURE__*/_jsx(MoneyInput,_objectSpread(_objectSpread({},a),MultipleCurrencies.args))]})]})},args:{size:"sm"}};export var MediumInput={render:SmallInput.render,args:{size:"md"}};export var LargeInput={render:SmallInput.render,args:{size:"lg"}};
|
|
@@ -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=m.locale,o=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(n,k),suffix:""}}()),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useState(null),t=_slicedToArray(s,2),u=t[0],v=t[1],w=useState(""),x=_slicedToArray(w,2),y=x[0],z=x[1],A=groupCountriesByPrefix(sortArrayByProperty(countries,"iso3")),B=groupCountriesByPrefix(sortArrayByProperty(countries,"phone")),C=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(y)?B:A,y);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===u)return v(q);var a=q.prefix+q.suffix,b=u.prefix+u.suffix;if(a!==b){var d=isValidPhoneNumber(a)?cleanNumber(a):null;c(d),v(q)}},[c,u,q]),/*#__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:C,selected:{value:q.prefix,label:q.prefix},placeholder:"Select an option...",searchPlaceholder:d,dropdownWidth:Size.SMALL,searchValue:y,required:f,disabled:e,size:g,onChange:function onPrefixChange(a){var b=a.value;z(""),r({prefix:b,suffix:q.suffix})},onSearchChange:function onSearchChange(a){return z(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:q.suffix,
|
|
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=m.locale,o=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(n,k),suffix:""}}()),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useState(null),t=_slicedToArray(s,2),u=t[0],v=t[1],w=useState(""),x=_slicedToArray(w,2),y=x[0],z=x[1],A=groupCountriesByPrefix(sortArrayByProperty(countries,"iso3")),B=groupCountriesByPrefix(sortArrayByProperty(countries,"phone")),C=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(y)?B:A,y);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===u)return v(q);var a=q.prefix+q.suffix,b=u.prefix+u.suffix;if(a!==b){var d=isValidPhoneNumber(a)?cleanNumber(a):null;c(d),v(q)}},[c,u,q]),/*#__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:C,selected:{value:q.prefix,label:q.prefix},placeholder:"Select an option...",searchPlaceholder:d,dropdownWidth:Size.SMALL,searchValue:y,required:f,disabled:e,size:g,onChange:function onPrefixChange(a){var b=a.value;z(""),r({prefix:b,suffix:q.suffix})},onSearchChange:function onSearchChange(a){return z(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:q.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)&&r({prefix:q.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=C.find(function(a){var b=a.value;return b===d});f&&ALLOWED_PHONE_CHARS.test(e)&&r({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},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:{}};export default PhoneNumberInput;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Progress from"./Progress";export default{component:Progress,title:"Other/Progress"};export var Basic={args:{progress:{value:50,max:100}}};
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";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 _regeneratorRuntime from"@babel/runtime/regenerator";import{render,waitFor,screen}from"@testing-library/react";import{FormattedMessage,useIntl}from"react-intl";import closeButtonMessages from"../common/closeButton/CloseButton.messages";import Provider from".";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";describe("Provider",function(){beforeAll(function(){jest.spyOn(console,"error").mockImplementation(function(){return jest.fn()}),jest.spyOn(console,"error").mockImplementation(function(){return jest.fn()}),jest.spyOn(console,"warn").mockImplementation(function(){return jest.fn()})}),afterAll(function(){jest.restoreAllMocks()}),it("does not add any elements in the DOM",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){var b,c,d,e;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return b="en",a.next=3,import("../i18n/".concat(b,".json"));case 3:c=a.sent,d=render(/*#__PURE__*/_jsx(Provider,{i18n:{locale:b,messages:c}})),e=d.container,expect(e).toBeEmptyDOMElement();case 6:case"end":return a.stop();}},a)}))),it.each([["zh-HK","zh-HK"],["ru","ru"],["en-GB","en-GB"],["en-US","en-US"],["en_US","en-US"],["en_GB","en-GB"],["ja","ja"],["ja-JP","ja-JP"],["","en-GB"],[" ","en-GB"],[null,"en-GB"],[void 0,"en-GB"]])("check locale value \"%s\"",function(a,b){var c=render(/*#__PURE__*/
|
|
2
|
-
_jsx(Provider,{i18n:{locale:a,messages:{}},children:/*#__PURE__*/_jsx(function TestComponent(){var a=useIntl();return/*#__PURE__*/_jsxs(_Fragment,{children:["locale: ",a.locale]})},{})})),d=c.container;expect(d).toHaveTextContent("locale: ".concat(b))}),it.each([["ru","\u0417\u0430\u043A\u0440\u044B\u0442\u044C"],["en","Close"]])("switching locale (%s)",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(a,b){var d;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return expect(document.body).toBeEmptyDOMElement(),c.next=3,import("../i18n/".concat(a,".json"));case 3:return d=c.sent,render(/*#__PURE__*/_jsx(Provider,{i18n:{locale:a,messages:d},children:/*#__PURE__*/_jsx(FormattedMessage,_objectSpread({},closeButtonMessages.ariaLabel))})),c.next=7,waitFor(function(){expect(screen.getByText(b)).toBeInTheDocument()});case 7:case"end":return c.stop();}},c)}));return function(){return a.apply(this,arguments)}}()),it("does not override passed in messages if parsing locale fails",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){var b,c,d,e;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return expect(document.body).toBeEmptyDOMElement(),b="some.message.that.was.passed.in",c="Boop",d="en-GB",e=_defineProperty({},b,c),Object.defineProperty(Intl,"Locale",{value:void 0}),render(/*#__PURE__*/_jsxs(Provider,{i18n:{locale:d,messages:e},children:[/*#__PURE__*/_jsx("span",{children:/*#__PURE__*/_jsx(FormattedMessage,{id:b})}),/*#__PURE__*/_jsx("span",{children:/*#__PURE__*/_jsx(FormattedMessage,_objectSpread({},closeButtonMessages.ariaLabel))})]})),a.t0=expect,a.next=10,screen.findByText(c);case 10:a.t1=a.sent,(0,a.t0)(a.t1).toBeInTheDocument(),expect(screen.getByText("Close")).toBeInTheDocument();case 13:case"end":return a.stop();}},a)})))});
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";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 _regeneratorRuntime from"@babel/runtime/regenerator";import{render,waitFor,screen}from"@testing-library/react";import{FormattedMessage,useIntl}from"react-intl";import closeButtonMessages from"../common/closeButton/CloseButton.messages";import Provider from".";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";describe("Provider",function(){beforeAll(function(){jest.spyOn(console,"error").mockImplementation(function(){return jest.fn()}),jest.spyOn(console,"error").mockImplementation(function(){return jest.fn()}),jest.spyOn(console,"warn").mockImplementation(function(){return jest.fn()})}),afterAll(function(){jest.restoreAllMocks()}),it("does not add any elements in the DOM",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){var b,c,d,e;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return b="en",a.next=3,import("../i18n/".concat(b,".json"));case 3:c=a.sent,d=render(/*#__PURE__*/_jsx(Provider,{i18n:{locale:b,messages:c}})),e=d.container,expect(e).toBeEmptyDOMElement();case 6:case"end":return a.stop();}},a)}))),it.each([["zh-HK","zh-HK"],["ru","ru"],["en-GB","en-GB"],["en-US","en-US"],["en_US","en-US"],["en_GB","en-GB"],["ja","ja"],["ja-JP","ja-JP"],["","en-GB"],[" ","en-GB"],[null,"en-GB"],[void 0,"en-GB"]])("check locale value \"%s\"",function(a,b){var c=render(/*#__PURE__*/_jsx(Provider,{i18n:{locale:a,messages:{}},children:/*#__PURE__*/_jsx(function TestComponent(){var a=useIntl();return/*#__PURE__*/_jsxs(_Fragment,{children:["locale: ",a.locale]})},{})})),d=c.container;expect(d).toHaveTextContent("locale: ".concat(b))}),it.each([["ru","\u0417\u0430\u043A\u0440\u044B\u0442\u044C"],["en","Close"]])("switching locale (%s)",/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function c(a,b){var d;return _regeneratorRuntime.wrap(function(c){for(;;)switch(c.prev=c.next){case 0:return expect(document.body).toBeEmptyDOMElement(),c.next=3,import("../i18n/".concat(a,".json"));case 3:return d=c.sent,render(/*#__PURE__*/_jsx(Provider,{i18n:{locale:a,messages:d},children:/*#__PURE__*/_jsx(FormattedMessage,_objectSpread({},closeButtonMessages.ariaLabel))})),c.next=7,waitFor(function(){expect(screen.getByText(b)).toBeInTheDocument()});case 7:case"end":return c.stop();}},c)}));return function(){return a.apply(this,arguments)}}()),it("does not override passed in messages if parsing locale fails",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){var b,c,d,e;return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return expect(document.body).toBeEmptyDOMElement(),b="some.message.that.was.passed.in",c="Boop",d="en-GB",e=_defineProperty({},b,c),Object.defineProperty(Intl,"Locale",{value:void 0}),render(/*#__PURE__*/_jsxs(Provider,{i18n:{locale:d,messages:e},children:[/*#__PURE__*/_jsx("span",{children:/*#__PURE__*/_jsx(FormattedMessage,{id:b})}),/*#__PURE__*/_jsx("span",{children:/*#__PURE__*/_jsx(FormattedMessage,_objectSpread({},closeButtonMessages.ariaLabel))})]})),a.t0=expect,a.next=10,screen.findByText(c);case 10:a.t1=a.sent,(0,a.t0)(a.t1).toBeInTheDocument(),expect(screen.getByText("Close")).toBeInTheDocument();case 13:case"end":return a.stop();}},a)})))});
|
|
@@ -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{FormattedMessage}from"react-intl";import{Provider
|
|
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{FormattedMessage}from"react-intl";import{Provider}from"..";import closeButtonMessages from"../common/closeButton/CloseButton.messages";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:Provider,title:"Other/Provider"};export var Basic={render:function render(){return/*#__PURE__*/_jsxs(_Fragment,{children:["Translated message: ",/*#__PURE__*/_jsx(FormattedMessage,_objectSpread({},closeButtonMessages.ariaLabel))]})}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Search as SearchIcon}from"@transferwise/icons";import classnames from"classnames";import{forwardRef}from"react";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var SearchBox=/*#__PURE__*/forwardRef(function(a,b){var c=a.id,d=a.classNames,e=void 0===d?{}:d,f=a.focusedOptionId,g=a.onChange,h=a.onClick,i=a.placeholder,j=void 0===i?void 0:i,k=a.value,l=void 0===k?"":k,m=function(a){return e[a]||a};return/*#__PURE__*/_jsx("li",{className:m("border-bottom"),children:/*#__PURE__*/_jsx("a",{className:"".concat(m("np-select-filter-link")," ").concat(m("p-a-0")),children:/*#__PURE__*/_jsxs("div",{className:m("input-group"),children:[/*#__PURE__*/_jsx("span",{className:classnames("input-group-addon","input-group-addon--search"),children:/*#__PURE__*/_jsx(SearchIcon,{className:classnames(m("tw-icon"),m("tw-icon-search")),size:24})}),/*#__PURE__*/_jsx(
|
|
1
|
+
import{Search as SearchIcon}from"@transferwise/icons";import classnames from"classnames";import{forwardRef}from"react";import{Input}from"../../inputs/Input";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var SearchBox=/*#__PURE__*/forwardRef(function(a,b){var c=a.id,d=a.classNames,e=void 0===d?{}:d,f=a.focusedOptionId,g=a.onChange,h=a.onClick,i=a.placeholder,j=void 0===i?void 0:i,k=a.value,l=void 0===k?"":k,m=function(a){return e[a]||a};return/*#__PURE__*/_jsx("li",{className:m("border-bottom"),children:/*#__PURE__*/_jsx("a",{className:"".concat(m("np-select-filter-link")," ").concat(m("p-a-0")),children:/*#__PURE__*/_jsxs("div",{className:m("input-group"),children:[/*#__PURE__*/_jsx("span",{className:classnames("input-group-addon","input-group-addon--search"),children:/*#__PURE__*/_jsx(SearchIcon,{className:classnames(m("tw-icon"),m("tw-icon-search")),size:24})}),/*#__PURE__*/_jsx(Input,{ref:b,id:c,className:classnames(m("np-select-filter")),placeholder:j,value:l,spellCheck:"false","aria-activedescendant":f,onChange:g,onClick:h})]})})})});export default SearchBox;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","className","open","position","showSlidingPanelBorder","slidingPanelPositionFixed"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef,useRef}from"react";import mergeRefs from"react-merge-refs";import CSSTransition from"react-transition-group/CSSTransition";import{jsx as _jsx}from"react/jsx-runtime";export var EXIT_ANIMATION=350;var SlidingPanel=/*#__PURE__*/forwardRef(function(a,b){var c=a.children,d=a.className,e=a.open,f=a.position,g=a.showSlidingPanelBorder,h=a.slidingPanelPositionFixed,i=_objectWithoutProperties(a,_excluded),j=useRef(null)
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["children","className","open","position","showSlidingPanelBorder","slidingPanelPositionFixed"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef,useRef}from"react";import mergeRefs from"react-merge-refs";import CSSTransition from"react-transition-group/CSSTransition";import{jsx as _jsx}from"react/jsx-runtime";export var EXIT_ANIMATION=350;var SlidingPanel=/*#__PURE__*/forwardRef(function(a,b){var c=a.children,d=a.className,e=a.open,f=a.position,g=a.showSlidingPanelBorder,h=a.slidingPanelPositionFixed,i=_objectWithoutProperties(a,_excluded),j=useRef(null);return/*#__PURE__*/_jsx(CSSTransition,_objectSpread(_objectSpread({},i),{},{nodeRef:j,in:e// Wait for animation to finish before unmount.
|
|
2
2
|
,timeout:{enter:0,exit:EXIT_ANIMATION},classNames:classNames("sliding-panel--open-".concat(f),g&&"sliding-panel--border-".concat(f),{"sliding-panel--fixed":h},"sliding-panel"),appear:!0,unmountOnExit:!0,children:/*#__PURE__*/_jsx("div",{ref:mergeRefs([b,j]),className:classNames("sliding-panel","sliding-panel--open-".concat(f),d),children:c})}))});SlidingPanel.propTypes={children:PropTypes.node,className:PropTypes.string,open:PropTypes.bool,position:PropTypes.oneOf(["top","bottom","left","right"]),showSlidingPanelBorder:PropTypes.bool,slidingPanelPositionFixed:PropTypes.bool},SlidingPanel.defaultProps={children:null,className:void 0,open:!1,position:"left",showSlidingPanelBorder:!1,slidingPanelPositionFixed:!1};export default SlidingPanel;
|
|
@@ -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{Size,Sentiment}from"../common";import StatusIcon from"./StatusIcon";import{jsx as _jsx}from"react/jsx-runtime";export default{component:StatusIcon,title:"Other/StatusIcon"};export var Basic={render:function render(a){return/*#__PURE__*/_jsx("span",{style:{display:"flex"},children:/*#__PURE__*/_jsx(StatusIcon,_objectSpread({},a))})}};export var Variants={render:function render(){return/*#__PURE__*/_jsx("span",{style:{display:"flex",justifyContent:"space-between",maxWidth:"400px"},children:[Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING].map(function(a){return/*#__PURE__*/_jsx("span",{style:{display:"flex",justifyContent:"space-between",flexDirection:"column",minHeight:"150px",alignItems:"center"},children:[Size.SMALL,Size.MEDIUM,Size.LARGE].map(function(b){return/*#__PURE__*/_jsx(StatusIcon,{size:b,sentiment:a},b)})},a)})})}};
|