@transferwise/components 0.0.0-experimental-2f2efd6 → 0.0.0-experimental-7b35524
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useState}from"react";import PromoCard,{Variant}from"./PromoCard";import{jsx as _jsx}from"react/jsx-runtime";export default{component:PromoCard,title:"Layouts/PromoCard"};export var Default=function(){var a=useState(0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=/*#__PURE__*/_jsx(PromoCard,{id:"1",title:"
|
|
2
|
-
new URL("https://wise.com/web-art/assets/illustrations/digital-card-2-medium@1x.webp"),animateHover:!0,disabled:!0,onClick:function onClick(){d(1===c?0:1)}}),f=/*#__PURE__*/_jsx(PromoCard,{id:"2",title:"
|
|
3
|
-
,imageSource:new URL("https://wise.com/web-art/assets/illustrations/bell-medium@1x.webp"),animateHover:!0,onClick:function onClick(){d(2===c?0:2)}}),g=/*#__PURE__*/_jsx(PromoCard,{id:"3",title:"
|
|
4
|
-
,imageSource:new URL("https://wise.com/web-art/assets/illustrations/globe-medium@1x.webp"),animateHover:!0,onClick:function onClick(){console.log("navigate to url")},onClose:function onClose(){console.log("close")}});return/*#__PURE__*/_jsx("div",{style:{display:"flex",justifyContent:"stretch",gap:"var(--size-24)",maxWidth:"1400px"},children:[e,f,g]})};
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{useState}from"react";import PromoCard,{Variant}from"./PromoCard";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:PromoCard,title:"Layouts/PromoCard"};export var Default=function(){var a=useState(0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=/*#__PURE__*/_jsx(PromoCard,{id:"1",title:"disabled promo card",selected:1===c,variant:Variant.LINK,description:"I don't do anything at all",imageSource:// eslint-disable-next-line compat/compat
|
|
2
|
+
new URL("https://wise.com/web-art/assets/illustrations/digital-card-2-medium@1x.webp"),animateHover:!0,disabled:!0,onClick:function onClick(){d(1===c?0:1)}}),f=/*#__PURE__*/_jsx(PromoCard,{id:"2",title:"Select promo card",selected:2===c,variant:Variant.SELECT,description:"Click me and see what happens",keyFeature:"7 GBP"// eslint-disable-next-line compat/compat
|
|
3
|
+
,imageSource:new URL("https://wise.com/web-art/assets/illustrations/bell-medium@1x.webp"),animateHover:!0,onClick:function onClick(){d(2===c?0:2)}}),g=/*#__PURE__*/_jsx(PromoCard,{id:"3",title:"Link promo card",selected:3===c,variant:Variant.LINK,description:"When you click me the screen changes because we navigate somewhere else and then i'm not here anymore and this is a long strin of text",keyFeature:"7 GBP"// eslint-disable-next-line compat/compat
|
|
4
|
+
,imageSource:new URL("https://wise.com/web-art/assets/illustrations/globe-medium@1x.webp"),animateHover:!0,onClick:function onClick(){console.log("navigate to url")},onClose:function onClose(){console.log("close")}});return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("div",{style:{display:"flex",justifyContent:"stretch",gap:"var(--size-24)",maxWidth:"1400px"},children:[e,f,g]}),/*#__PURE__*/_jsxs("div",{style:{paddingTop:"50px"},children:[/*#__PURE__*/_jsx("p",{children:"There are two types of PromoCards: Link and Select."}),/*#__PURE__*/_jsx("p",{children:"The common props between them are:"}),/*#__PURE__*/_jsx("ul",{children:"Id"}),/*#__PURE__*/_jsx("ul",{children:"Title"}),/*#__PURE__*/_jsx("ul",{children:"Description"}),/*#__PURE__*/_jsx("ul",{children:"Image Source - is of type URL"}),/*#__PURE__*/_jsx("ul",{children:"Animate Hover - controls if the image zooms in when you hover over it, try it out above"}),/*#__PURE__*/_jsx("ul",{children:"Key Feature - it's that grey box in the bottom right"}),/*#__PURE__*/_jsx("ul",{children:"Disabled - disables the card"}),/*#__PURE__*/_jsx("ul",{children:"On Click - what happens when you click the card"}),/*#__PURE__*/_jsx("ul",{children:"Class Name - apply classes to the PromoCard"}),/*#__PURE__*/_jsx("p",{children:"Select is the second card above"}),/*#__PURE__*/_jsx("p",{children:"When you click a select card it enters the selected state"}),/*#__PURE__*/_jsx("p",{children:"Before you click there is a hover shadow and maybe a zoom animation"}),/*#__PURE__*/_jsx("p",{children:"After it is selected those are gone"}),/*#__PURE__*/_jsx("p",{children:"And you get a nice border and a checkmark in the top right corner"}),/*#__PURE__*/_jsx("p",{children:"The Select specific prop is:"}),/*#__PURE__*/_jsx("ul",{children:"Selected - controls if the card is selected"}),/*#__PURE__*/_jsx("p",{children:"Link PromoCard navigates somewhere when clicked"}),/*#__PURE__*/_jsx("p",{children:"It has a green arrow in the bottom right to indicate that"}),/*#__PURE__*/_jsx("p",{children:"It also has a close button in the top right corner if onClose is passed in"}),/*#__PURE__*/_jsx("p",{children:"The Link specific prop is:"}),/*#__PURE__*/_jsx("ul",{children:"On Close - what happens when you click the close button"})]})]})};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.iterator.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.string.iterator.js";import"core-js/modules/web.dom-collections.iterator.js";import"core-js/modules/web.url.js";import"core-js/modules/web.url-search-params.js";import{useState}from"react";import PromoCard,{Variant}from"./PromoCard";import{jsx as _jsx}from"react/jsx-runtime";export default{component:PromoCard,title:"Layouts/PromoCard"};export var Default=function(){var a=useState(0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=/*#__PURE__*/_jsx(PromoCard,{id:"1",title:"
|
|
2
|
-
new URL("https://wise.com/web-art/assets/illustrations/digital-card-2-medium@1x.webp"),animateHover:!0,disabled:!0,onClick:function onClick(){d(1===c?0:1)}}),f=/*#__PURE__*/_jsx(PromoCard,{id:"2",title:"
|
|
3
|
-
,imageSource:new URL("https://wise.com/web-art/assets/illustrations/bell-medium@1x.webp"),animateHover:!0,onClick:function onClick(){d(2===c?0:2)}}),g=/*#__PURE__*/_jsx(PromoCard,{id:"3",title:"
|
|
4
|
-
,imageSource:new URL("https://wise.com/web-art/assets/illustrations/globe-medium@1x.webp"),animateHover:!0,onClick:function onClick(){console.log("navigate to url")},onClose:function onClose(){console.log("close")}});return/*#__PURE__*/_jsx("div",{style:{display:"flex",justifyContent:"stretch",gap:"var(--size-24)",maxWidth:"1400px"},children:[e,f,g]})};
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.array.iterator.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.string.iterator.js";import"core-js/modules/web.dom-collections.iterator.js";import"core-js/modules/web.url.js";import"core-js/modules/web.url-search-params.js";import{useState}from"react";import PromoCard,{Variant}from"./PromoCard";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:PromoCard,title:"Layouts/PromoCard"};export var Default=function(){var a=useState(0),b=_slicedToArray(a,2),c=b[0],d=b[1],e=/*#__PURE__*/_jsx(PromoCard,{id:"1",title:"disabled promo card",selected:1===c,variant:Variant.LINK,description:"I don't do anything at all",imageSource:// eslint-disable-next-line compat/compat
|
|
2
|
+
new URL("https://wise.com/web-art/assets/illustrations/digital-card-2-medium@1x.webp"),animateHover:!0,disabled:!0,onClick:function onClick(){d(1===c?0:1)}}),f=/*#__PURE__*/_jsx(PromoCard,{id:"2",title:"Select promo card",selected:2===c,variant:Variant.SELECT,description:"Click me and see what happens",keyFeature:"7 GBP"// eslint-disable-next-line compat/compat
|
|
3
|
+
,imageSource:new URL("https://wise.com/web-art/assets/illustrations/bell-medium@1x.webp"),animateHover:!0,onClick:function onClick(){d(2===c?0:2)}}),g=/*#__PURE__*/_jsx(PromoCard,{id:"3",title:"Link promo card",selected:3===c,variant:Variant.LINK,description:"When you click me the screen changes because we navigate somewhere else and then i'm not here anymore and this is a long strin of text",keyFeature:"7 GBP"// eslint-disable-next-line compat/compat
|
|
4
|
+
,imageSource:new URL("https://wise.com/web-art/assets/illustrations/globe-medium@1x.webp"),animateHover:!0,onClick:function onClick(){console.log("navigate to url")},onClose:function onClose(){console.log("close")}});return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("div",{style:{display:"flex",justifyContent:"stretch",gap:"var(--size-24)",maxWidth:"1400px"},children:[e,f,g]}),/*#__PURE__*/_jsxs("div",{style:{paddingTop:"50px"},children:[/*#__PURE__*/_jsx("p",{children:"There are two types of PromoCards: Link and Select."}),/*#__PURE__*/_jsx("p",{children:"The common props between them are:"}),/*#__PURE__*/_jsx("ul",{children:"Id"}),/*#__PURE__*/_jsx("ul",{children:"Title"}),/*#__PURE__*/_jsx("ul",{children:"Description"}),/*#__PURE__*/_jsx("ul",{children:"Image Source - is of type URL"}),/*#__PURE__*/_jsx("ul",{children:"Animate Hover - controls if the image zooms in when you hover over it, try it out above"}),/*#__PURE__*/_jsx("ul",{children:"Key Feature - it's that grey box in the bottom right"}),/*#__PURE__*/_jsx("ul",{children:"Disabled - disables the card"}),/*#__PURE__*/_jsx("ul",{children:"On Click - what happens when you click the card"}),/*#__PURE__*/_jsx("ul",{children:"Class Name - apply classes to the PromoCard"}),/*#__PURE__*/_jsx("p",{children:"Select is the second card above"}),/*#__PURE__*/_jsx("p",{children:"When you click a select card it enters the selected state"}),/*#__PURE__*/_jsx("p",{children:"Before you click there is a hover shadow and maybe a zoom animation"}),/*#__PURE__*/_jsx("p",{children:"After it is selected those are gone"}),/*#__PURE__*/_jsx("p",{children:"And you get a nice border and a checkmark in the top right corner"}),/*#__PURE__*/_jsx("p",{children:"The Select specific prop is:"}),/*#__PURE__*/_jsx("ul",{children:"Selected - controls if the card is selected"}),/*#__PURE__*/_jsx("p",{children:"Link PromoCard navigates somewhere when clicked"}),/*#__PURE__*/_jsx("p",{children:"It has a green arrow in the bottom right to indicate that"}),/*#__PURE__*/_jsx("p",{children:"It also has a close button in the top right corner if onClose is passed in"}),/*#__PURE__*/_jsx("p",{children:"The Link specific prop is:"}),/*#__PURE__*/_jsx("ul",{children:"On Close - what happens when you click the close button"})]})]})};
|
package/package.json
CHANGED