@transferwise/components 37.9.2-beta-2ffb6cde65.0 → 37.9.2
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/CHANGELOG.md +11 -0
- package/build/es/no-polyfill/accordion/AccordionItem/AccordionItem.js +1 -1
- package/build/es/no-polyfill/actionOption/ActionOption.story.js +1 -1
- package/build/es/no-polyfill/card/Card.js +2 -1
- package/build/es/no-polyfill/common/Option/Option.js +1 -1
- package/build/es/no-polyfill/common/Option/OptionDocumentation.js +1 -0
- package/build/es/no-polyfill/dateLookup/dayCalendar/DayCalendar.js +1 -1
- package/build/es/no-polyfill/dateLookup/header/Header.js +1 -0
- package/build/es/no-polyfill/dateLookup/header/index.js +1 -0
- package/build/es/no-polyfill/dateLookup/monthCalendar/MonthCalendar.js +1 -1
- package/build/es/no-polyfill/dateLookup/yearCalendar/YearCalendar.js +1 -1
- package/build/es/no-polyfill/dimmer/Dimmer.js +2 -2
- package/build/es/no-polyfill/flowNavigation/FlowNavigation.js +2 -2
- package/build/es/no-polyfill/header/Header.js +1 -5
- package/build/es/no-polyfill/index.js +1 -1
- package/build/es/no-polyfill/navigationOption/NavigationOption.js +1 -1
- package/build/es/no-polyfill/navigationOptionsList/NavigationOptionsList.js +1 -1
- package/build/es/no-polyfill/nudge/Nudge.js +1 -1
- package/build/es/no-polyfill/overlayHeader/OverlayHeader.js +1 -1
- package/build/es/no-polyfill/switchOption/SwitchOption.story.js +1 -1
- package/build/es/polyfill/accordion/AccordionItem/AccordionItem.js +1 -1
- package/build/es/polyfill/actionOption/ActionOption.story.js +1 -1
- package/build/es/polyfill/card/Card.js +2 -1
- package/build/es/polyfill/common/Option/Option.js +1 -1
- package/build/es/polyfill/common/Option/OptionDocumentation.js +1 -0
- package/build/es/polyfill/dateLookup/dayCalendar/DayCalendar.js +1 -1
- package/build/es/polyfill/dateLookup/header/Header.js +1 -0
- package/build/es/polyfill/dateLookup/header/index.js +1 -0
- package/build/es/polyfill/dateLookup/monthCalendar/MonthCalendar.js +1 -1
- package/build/es/polyfill/dateLookup/yearCalendar/YearCalendar.js +1 -1
- package/build/es/polyfill/dimmer/Dimmer.js +2 -2
- package/build/es/polyfill/flowNavigation/FlowNavigation.js +2 -2
- package/build/es/polyfill/header/Header.js +1 -5
- package/build/es/polyfill/index.js +1 -1
- package/build/es/polyfill/navigationOption/NavigationOption.js +1 -1
- package/build/es/polyfill/navigationOptionsList/NavigationOptionsList.js +1 -1
- package/build/es/polyfill/nudge/Nudge.js +1 -1
- package/build/es/polyfill/overlayHeader/OverlayHeader.js +1 -1
- package/build/es/polyfill/switchOption/SwitchOption.story.js +1 -1
- package/build/main.css +1 -1
- package/build/styles/accordion/Accordion.css +1 -1
- package/build/styles/card/Card.css +1 -1
- package/build/styles/common/Option/Option.css +1 -1
- package/build/styles/flowNavigation/FlowNavigation.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/navigationOption/NavigationOption.css +1 -1
- package/build/styles/navigationOptionsList/NavigationOptionsList.css +1 -1
- package/build/types/actionOption/ActionOption.story.d.ts +0 -1
- package/build/types/common/bottomSheet/BottomSheet.d.ts +1 -0
- package/build/types/common/commonProps.d.ts +0 -4
- package/build/types/dateLookup/{dateHeader/DateHeader.d.ts → header/Header.d.ts} +3 -3
- package/build/types/dateLookup/header/index.d.ts +1 -0
- package/build/types/header/Header.d.ts +1 -27
- package/build/types/header/index.d.ts +1 -1
- package/build/types/index.d.ts +45 -47
- package/build/types/switchOption/SwitchOption.story.d.ts +0 -1
- package/build/umd/no-polyfill/main.js +1 -1
- package/build/umd/polyfill/main.js +1 -1
- package/package.json +3 -3
- package/build/es/no-polyfill/common/flowHeader/FlowHeader.js +0 -1
- package/build/es/no-polyfill/common/flowHeader/index.js +0 -1
- package/build/es/no-polyfill/dateLookup/dateHeader/DateHeader.js +0 -1
- package/build/es/no-polyfill/dateLookup/dateHeader/index.js +0 -1
- package/build/es/no-polyfill/header/Header.spec.js +0 -1
- package/build/es/no-polyfill/header/Header.story.js +0 -1
- package/build/es/no-polyfill/section/Section.js +0 -5
- package/build/es/no-polyfill/section/Section.spec.js +0 -1
- package/build/es/no-polyfill/section/Section.story.js +0 -1
- package/build/es/no-polyfill/section/index.js +0 -1
- package/build/es/polyfill/common/flowHeader/FlowHeader.js +0 -1
- package/build/es/polyfill/common/flowHeader/index.js +0 -1
- package/build/es/polyfill/dateLookup/dateHeader/DateHeader.js +0 -1
- package/build/es/polyfill/dateLookup/dateHeader/index.js +0 -1
- package/build/es/polyfill/header/Header.spec.js +0 -1
- package/build/es/polyfill/header/Header.story.js +0 -1
- package/build/es/polyfill/section/Section.js +0 -5
- package/build/es/polyfill/section/Section.spec.js +0 -1
- package/build/es/polyfill/section/Section.story.js +0 -1
- package/build/es/polyfill/section/index.js +0 -1
- package/build/styles/header/Header.css +0 -1
- package/build/styles/section/Section.css +0 -1
- package/build/types/common/flowHeader/FlowHeader.d.ts +0 -2
- package/build/types/common/flowHeader/index.d.ts +0 -1
- package/build/types/dateLookup/dateHeader/index.d.ts +0 -1
- package/build/types/header/Header.spec.d.ts +0 -1
- package/build/types/header/Header.story.d.ts +0 -9
- package/build/types/section/Section.d.ts +0 -10
- package/build/types/section/Section.spec.d.ts +0 -1
- package/build/types/section/Section.story.d.ts +0 -14
- package/build/types/section/index.d.ts +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "37.9.2
|
|
3
|
+
"version": "37.9.2",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "./build/umd/polyfill/main.js",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"@rollup/plugin-node-resolve": "^7.1.3",
|
|
68
68
|
"@transferwise/icons": "^2.12.0",
|
|
69
69
|
"@transferwise/less-config": "^3.0.2",
|
|
70
|
-
"@transferwise/neptune-css": "^10.0.
|
|
70
|
+
"@transferwise/neptune-css": "^10.0.5",
|
|
71
71
|
"@transferwise/neptune-tokens": "^1.0.0",
|
|
72
72
|
"@transferwise/test-config": "^4.0.1",
|
|
73
73
|
"@types/jest": "^26.0.20",
|
|
@@ -122,5 +122,5 @@
|
|
|
122
122
|
"resolutions": {
|
|
123
123
|
"@storybook/**/kind-of": "^6.0.3"
|
|
124
124
|
},
|
|
125
|
-
"gitHead": "
|
|
125
|
+
"gitHead": "5814c02d242a187ff11040e9dfc77c47a445536b"
|
|
126
126
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef}from"react";import{Layout}from"../propsValues/layouts";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var FlowHeader=/*#__PURE__*/forwardRef(function(a,b){var c=a.bottomContent,d=a.className,e=a.layout,f=a.leftContent,g=a.rightContent,h=e===Layout.VERTICAL;return/*#__PURE__*/_jsxs("div",{ref:b,className:classNames("np-flow-header","d-flex","flex-wrap",d),children:[/*#__PURE__*/_jsx("div",{className:classNames("align-items-center","np-flow-header__left","d-flex",{"flex__item--8":h}),children:f}),/*#__PURE__*/_jsx("div",{className:classNames("align-items-center","d-flex","np-flow-header__right","justify-content-end",{"flex__item--4 ":h,"order-2":!h}),children:g}),/*#__PURE__*/_jsx("div",{className:classNames("align-items-center","d-flex","justify-content-center",{"flex__item--12":h,"order-1 flex-grow-1":!h}),children:c})]})});FlowHeader.defaultProps={bottomContent:void 0,className:void 0,layout:Layout.HORIZONTAL,leftContent:void 0,rightContent:void 0},FlowHeader.propTypes={bottomContent:PropTypes.node,className:PropTypes.string,layout:PropTypes.oneOf(["HORIZONTAL","VERTICAL"]),leftContent:PropTypes.node,rightContent:PropTypes.node};export default FlowHeader;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{default}from"./FlowHeader";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import PropTypes from"prop-types";import Chevron from"../../chevron";import{Position,Size}from"../../common";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var buttonClasses="btn-link p-a-0 text-no-decoration font-weight-bold",DateHeader=function(a){var b=a.label,c=a.onLabelClick,d=a.onPreviousClick,e=a.onNextClick;return/*#__PURE__*/_jsxs("div",{className:"text-xs-center p-t-1 p-b-2 clearfix",children:[/*#__PURE__*/_jsx("div",{className:"pull-xs-left",children:/*#__PURE__*/_jsx("button",{type:"button",className:buttonClasses,onClick:d,children:/*#__PURE__*/_jsx(Chevron,{orientation:Position.LEFT,size:Size.MEDIUM})})}),b&&/*#__PURE__*/_jsx("button",{type:"button",className:"tw-date-lookup-header-current ".concat(buttonClasses),onClick:c,children:b}),/*#__PURE__*/_jsx("div",{className:"pull-xs-right",children:/*#__PURE__*/_jsx("button",{type:"button",className:buttonClasses,onClick:e,children:/*#__PURE__*/_jsx(Chevron,{orientation:Position.RIGHT,size:Size.MEDIUM})})})]})};DateHeader.propTypes={label:PropTypes.string,onLabelClick:PropTypes.func,onPreviousClick:PropTypes.func.isRequired,onNextClick:PropTypes.func.isRequired},DateHeader.defaultProps={label:null,onLabelClick:function onLabelClick(){}};export default DateHeader;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{default}from"./DateHeader";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{render,screen,userEvent}from"../test-utils";import Header from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Header",function(){it("can set header title",function(){render(/*#__PURE__*/_jsx(Header,{title:"Header title"})),expect(screen.getByText("Header title")).toBeInTheDocument()}),it("can trigger header action",function(){var a=jest.fn();render(/*#__PURE__*/_jsx(Header,{title:"Header title",action:{text:"Click me!",onClick:a}})),userEvent.click(screen.getByRole("button",{name:"Click me!"})),expect(a).toHaveBeenCalledTimes(1)}),it("can set aria-label property for header action",function(){var a=jest.fn();render(/*#__PURE__*/_jsx(Header,{title:"Header title",action:{"aria-label":"Magic",text:"Click me!",onClick:a}})),userEvent.click(screen.getByRole("button",{name:"Magic"})),expect(a).toHaveBeenCalledTimes(1)}),it("renders header action as a link when href is provided",function(){render(/*#__PURE__*/_jsx(Header,{title:"Header title",action:{"aria-label":"Click me!",text:"I am a link",href:"https://wise.com"}}));var a=screen.getByRole("link",{name:"Click me!"});expect(a).toHaveAttribute("href","https://wise.com")}),it("can render header with specific heading tag",function(){render(/*#__PURE__*/_jsx(Header,{as:"h3",title:"Header title"})),expect(screen.getByRole("heading",{name:"Header title",level:3})).toBeInTheDocument()})});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import Header from"./Header";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Header,title:"Header"};export var Basic=function(){return/*#__PURE__*/_jsx(Header,{as:"h3",title:"Header title"})};export var WithAction=function(){return/*#__PURE__*/_jsx(Header,{title:"Header title",action:{"aria-label":"Magic",text:"Click me!",onClick:function onClick(){return alert("Action!")}}})};export var WithActionAsLink=function(){return/*#__PURE__*/_jsx(Header,{title:"Header title",action:{text:"This is a link",href:"https://wise.com",target:"_blank"}})};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import classNames from"classnames";import{jsx as _jsx}from"react/jsx-runtime";/**
|
|
2
|
-
*
|
|
3
|
-
* Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
|
|
4
|
-
*
|
|
5
|
-
*/var Section=function(a){var b=a.children,c=a.className;return/*#__PURE__*/_jsx("div",{className:classNames("np-section",c),children:b})};export default Section;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{render,screen}from"../test-utils";import Section from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Section",function(){it("can render children",function(){render(/*#__PURE__*/_jsx(Section,{children:"Children here"})),expect(screen.getByText("Children here")).toBeInTheDocument()})});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{NavigationOptionsList}from"..";import Accordion from"../accordion";import Card from"../card";import Header from"../header";import NavigationOption from"../navigationOption";import Section from"./Section";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:Section,title:"Section"};export var Basic=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Section,{children:"Section 1 content"}),/*#__PURE__*/_jsx(Section,{children:"Section 2 content"})]})};export var WithHeader=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 1 title"}),"Section 1 content"]}),/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 2 title"}),"Section 2 content"]})]})};export var withAccordion=function(){var a=[{id:"Item 1",title:"If you have a deadline, set up your transfer early",content:"Most large transfers take around 2\u20134 working days from start to finish. So set up your transfer early if you have a deadline coming up.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 2",title:"Have documents on hand to speed things up",content:"When you set up your transfer, we might ask for documents that show where your money comes from. Documents you might need (opens in a new tab)",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 3",title:"Lorem ipsum",content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque velit nec ex rutrum efficitur sit amet at enim. Nam a neque magna. Nullam est urna, dignissim nec erat id, euismod aliquet nulla.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})}];return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with accordion"}),/*#__PURE__*/_jsx(Accordion,{items:a,indexOpen:0})]})};export var WithCards=function(){var a=useState(!1),b=_slicedToArray(a,2),c=b[0],d=b[1],e=useState(!1),f=_slicedToArray(e,2),g=f[0],h=f[1];return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with cards"}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:c,onClick:function onClick(){return d(!c)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:g,onClick:function onClick(){return h(!g)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})})]})};export var WithNavigationOptions=function(){return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with options"}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 1",onClick:function onClick(){return alert("Option 1")}}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 2",onClick:function onClick(){return alert("Option 2")}})]})};export var WithNavigationOptionsList=function(){return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with options"}),/*#__PURE__*/_jsxs(NavigationOptionsList,{children:[/*#__PURE__*/_jsx(NavigationOption,{title:"Option 1",onClick:function onClick(){return alert("Option 1")}}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 2",onClick:function onClick(){return alert("Option 2")}})]})]})};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{default}from"./Section";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import classNames from"classnames";import PropTypes from"prop-types";import{forwardRef}from"react";import{Layout}from"../propsValues/layouts";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var FlowHeader=/*#__PURE__*/forwardRef(function(a,b){var c=a.bottomContent,d=a.className,e=a.layout,f=a.leftContent,g=a.rightContent,h=e===Layout.VERTICAL;return/*#__PURE__*/_jsxs("div",{ref:b,className:classNames("np-flow-header","d-flex","flex-wrap",d),children:[/*#__PURE__*/_jsx("div",{className:classNames("align-items-center","np-flow-header__left","d-flex",{"flex__item--8":h}),children:f}),/*#__PURE__*/_jsx("div",{className:classNames("align-items-center","d-flex","np-flow-header__right","justify-content-end",{"flex__item--4 ":h,"order-2":!h}),children:g}),/*#__PURE__*/_jsx("div",{className:classNames("align-items-center","d-flex","justify-content-center",{"flex__item--12":h,"order-1 flex-grow-1":!h}),children:c})]})});FlowHeader.defaultProps={bottomContent:void 0,className:void 0,layout:Layout.HORIZONTAL,leftContent:void 0,rightContent:void 0},FlowHeader.propTypes={bottomContent:PropTypes.node,className:PropTypes.string,layout:PropTypes.oneOf(["HORIZONTAL","VERTICAL"]),leftContent:PropTypes.node,rightContent:PropTypes.node};export default FlowHeader;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{default}from"./FlowHeader";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import PropTypes from"prop-types";import Chevron from"../../chevron";import{Position,Size}from"../../common";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var buttonClasses="btn-link p-a-0 text-no-decoration font-weight-bold",DateHeader=function(a){var b=a.label,c=a.onLabelClick,d=a.onPreviousClick,e=a.onNextClick;return/*#__PURE__*/_jsxs("div",{className:"text-xs-center p-t-1 p-b-2 clearfix",children:[/*#__PURE__*/_jsx("div",{className:"pull-xs-left",children:/*#__PURE__*/_jsx("button",{type:"button",className:buttonClasses,onClick:d,children:/*#__PURE__*/_jsx(Chevron,{orientation:Position.LEFT,size:Size.MEDIUM})})}),b&&/*#__PURE__*/_jsx("button",{type:"button",className:"tw-date-lookup-header-current ".concat(buttonClasses),onClick:c,children:b}),/*#__PURE__*/_jsx("div",{className:"pull-xs-right",children:/*#__PURE__*/_jsx("button",{type:"button",className:buttonClasses,onClick:e,children:/*#__PURE__*/_jsx(Chevron,{orientation:Position.RIGHT,size:Size.MEDIUM})})})]})};DateHeader.propTypes={label:PropTypes.string,onLabelClick:PropTypes.func,onPreviousClick:PropTypes.func.isRequired,onNextClick:PropTypes.func.isRequired},DateHeader.defaultProps={label:null,onLabelClick:function onLabelClick(){}};export default DateHeader;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{default}from"./DateHeader";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{render,screen,userEvent}from"../test-utils";import Header from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Header",function(){it("can set header title",function(){render(/*#__PURE__*/_jsx(Header,{title:"Header title"})),expect(screen.getByText("Header title")).toBeInTheDocument()}),it("can trigger header action",function(){var a=jest.fn();render(/*#__PURE__*/_jsx(Header,{title:"Header title",action:{text:"Click me!",onClick:a}})),userEvent.click(screen.getByRole("button",{name:"Click me!"})),expect(a).toHaveBeenCalledTimes(1)}),it("can set aria-label property for header action",function(){var a=jest.fn();render(/*#__PURE__*/_jsx(Header,{title:"Header title",action:{"aria-label":"Magic",text:"Click me!",onClick:a}})),userEvent.click(screen.getByRole("button",{name:"Magic"})),expect(a).toHaveBeenCalledTimes(1)}),it("renders header action as a link when href is provided",function(){render(/*#__PURE__*/_jsx(Header,{title:"Header title",action:{"aria-label":"Click me!",text:"I am a link",href:"https://wise.com"}}));var a=screen.getByRole("link",{name:"Click me!"});expect(a).toHaveAttribute("href","https://wise.com")}),it("can render header with specific heading tag",function(){render(/*#__PURE__*/_jsx(Header,{as:"h3",title:"Header title"})),expect(screen.getByRole("heading",{name:"Header title",level:3})).toBeInTheDocument()})});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import Header from"./Header";import{jsx as _jsx}from"react/jsx-runtime";export default{component:Header,title:"Header"};export var Basic=function(){return/*#__PURE__*/_jsx(Header,{as:"h3",title:"Header title"})};export var WithAction=function(){return/*#__PURE__*/_jsx(Header,{title:"Header title",action:{"aria-label":"Magic",text:"Click me!",onClick:function onClick(){return alert("Action!")}}})};export var WithActionAsLink=function(){return/*#__PURE__*/_jsx(Header,{title:"Header title",action:{text:"This is a link",href:"https://wise.com",target:"_blank"}})};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import classNames from"classnames";import{jsx as _jsx}from"react/jsx-runtime";/**
|
|
2
|
-
*
|
|
3
|
-
* Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
|
|
4
|
-
*
|
|
5
|
-
*/var Section=function(a){var b=a.children,c=a.className;return/*#__PURE__*/_jsx("div",{className:classNames("np-section",c),children:b})};export default Section;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{render,screen}from"../test-utils";import Section from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Section",function(){it("can render children",function(){render(/*#__PURE__*/_jsx(Section,{children:"Children here"})),expect(screen.getByText("Children here")).toBeInTheDocument()})});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{FastFlag as FastFlagIcon}from"@transferwise/icons";import{useState}from"react";import{NavigationOptionsList}from"..";import Accordion from"../accordion";import Card from"../card";import Header from"../header";import NavigationOption from"../navigationOption";import Section from"./Section";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:Section,title:"Section"};export var Basic=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Section,{children:"Section 1 content"}),/*#__PURE__*/_jsx(Section,{children:"Section 2 content"})]})};export var WithHeader=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 1 title"}),"Section 1 content"]}),/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section 2 title"}),"Section 2 content"]})]})};export var withAccordion=function(){var a=[{id:"Item 1",title:"If you have a deadline, set up your transfer early",content:"Most large transfers take around 2\u20134 working days from start to finish. So set up your transfer early if you have a deadline coming up.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 2",title:"Have documents on hand to speed things up",content:"When you set up your transfer, we might ask for documents that show where your money comes from. Documents you might need (opens in a new tab)",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})},{id:"Item 3",title:"Lorem ipsum",content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque velit nec ex rutrum efficitur sit amet at enim. Nam a neque magna. Nullam est urna, dignissim nec erat id, euismod aliquet nulla.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})}];return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with accordion"}),/*#__PURE__*/_jsx(Accordion,{items:a,indexOpen:0})]})};export var WithCards=function(){var a=useState(!1),b=_slicedToArray(a,2),c=b[0],d=b[1],e=useState(!1),f=_slicedToArray(e,2),g=f[0],h=f[1];return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with cards"}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:c,onClick:function onClick(){return d(!c)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})}),/*#__PURE__*/_jsx(Card,{title:"What's in the box?!",details:"Click me to reveal.",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24}),isExpanded:g,onClick:function onClick(){return h(!g)},children:/*#__PURE__*/_jsx("div",{children:"Hello there!"})})]})};export var WithNavigationOptions=function(){return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with options"}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 1",onClick:function onClick(){return alert("Option 1")}}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 2",onClick:function onClick(){return alert("Option 2")}})]})};export var WithNavigationOptionsList=function(){return/*#__PURE__*/_jsxs(Section,{children:[/*#__PURE__*/_jsx(Header,{title:"Section with options"}),/*#__PURE__*/_jsxs(NavigationOptionsList,{children:[/*#__PURE__*/_jsx(NavigationOption,{title:"Option 1",onClick:function onClick(){return alert("Option 1")}}),/*#__PURE__*/_jsx(NavigationOption,{title:"Option 2",onClick:function onClick(){return alert("Option 2")}})]})]})};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{default}from"./Section";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.np-header{display:flex;justify-content:space-between;align-items:center;max-width:100%;margin:0 16px;margin:0 var(--size-16,16px);padding:16px 0;padding:var(--size-16,16px) 0;border-bottom:1px solid #e2e6e8;border-bottom:1px solid var(--color-border-neutral,#e2e6e8)}.np-header__title{color:#5d7079;color:var(--color-text-secondary,#5d7079)}.np-header__action{min-height:0;padding:0}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.np-section{background-color:#fff;background-color:var(--color-background-screen,#fff);margin-top:32px;margin-top:var(--size-32,32px)}.np-section .np-accordion-item:last-child .np-accordion-item__content,.np-section .np-card:last-child .np-card__divider:not(.np-card__divider--expanded),.np-section .np-option:last-child .media{border:none}.np-section .np-accordion-item:not(:last-child) .media,.np-section .np-navigation-options-list__item:not(:last-child) .media{border-bottom:1px solid #e2e6e8;border-bottom:1px solid var(--color-border-neutral,#e2e6e8)}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./FlowHeader";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./DateHeader";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
declare const _default: {
|
|
3
|
-
component: ({ action, as: Element, title, className }: import("./Header").HeaderProps) => JSX.Element;
|
|
4
|
-
title: string;
|
|
5
|
-
};
|
|
6
|
-
export default _default;
|
|
7
|
-
export declare const Basic: () => JSX.Element;
|
|
8
|
-
export declare const WithAction: () => JSX.Element;
|
|
9
|
-
export declare const WithActionAsLink: () => JSX.Element;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { PropsWithChildren } from 'react';
|
|
2
|
-
import { CommonProps } from '../common';
|
|
3
|
-
declare type SectionProps = PropsWithChildren<CommonProps>;
|
|
4
|
-
/**
|
|
5
|
-
*
|
|
6
|
-
* Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
|
|
7
|
-
*
|
|
8
|
-
*/
|
|
9
|
-
declare const Section: ({ children, className }: SectionProps) => JSX.Element;
|
|
10
|
-
export default Section;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
declare const _default: {
|
|
3
|
-
component: ({ children, className }: import("../common").CommonProps & {
|
|
4
|
-
children?: import("react").ReactNode;
|
|
5
|
-
}) => JSX.Element;
|
|
6
|
-
title: string;
|
|
7
|
-
};
|
|
8
|
-
export default _default;
|
|
9
|
-
export declare const Basic: () => JSX.Element;
|
|
10
|
-
export declare const WithHeader: () => JSX.Element;
|
|
11
|
-
export declare const withAccordion: () => JSX.Element;
|
|
12
|
-
export declare const WithCards: () => JSX.Element;
|
|
13
|
-
export declare const WithNavigationOptions: () => JSX.Element;
|
|
14
|
-
export declare const WithNavigationOptionsList: () => JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './Section';
|