@transferwise/components 0.0.0-experimental-82f2da8 → 0.0.0-experimental-2671b89

package/build/es/polyfill/promoCard/PromoCardGroup.spec.js

@@ -0,0 +1,5 @@
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{render,screen}from"@testing-library/react";import PromoCard from"./PromoCard";import PromoCardGroup from"./PromoCardGroup";import{jsx as _jsx}from"react/jsx-runtime";describe("PromoCardGroup",function(){var a,b={title:"Test Card",description:"Test Description",imageSource:"https://via.placeholder.com/150",type:"radio"},c={testId:"test-promo-card-group",children:[/*#__PURE__*/_jsx(PromoCard,_objectSpread(_objectSpread({},b),{},{testId:"test-1",value:"radio-1",id:"radio-1"}),"radio-1"),/*#__PURE__*/_jsx(PromoCard,_objectSpread(_objectSpread({},b),{},{testId:"test-2",value:"radio-2",id:"radio-2"}),"radio-2")]};beforeEach(function(){var b=render(/*#__PURE__*/_jsx(PromoCardGroup,_objectSpread({},c))),d=b.rerender;a=function(a){d(/*#__PURE__*/_jsx(PromoCardGroup,_objectSpread(_objectSpread({},c),a)))}}),it("matches snapshot",function(){var a=render(/*#__PURE__*/_jsx(PromoCardGroup,_objectSpread({},c))),b=a.container;expect(b.firstChild).toMatchSnapshot()}),it("renders",function(){var d=_objectSpread(_objectSpread({},c),{},{children:[/*#__PURE__*/_jsx(PromoCard,_objectSpread(_objectSpread({},b),{},{type:"checkbox",testId:"test-3",value:"radio-3"}),"radio-3"),/*#__PURE__*/_jsx(PromoCard,_objectSpread(_objectSpread({},b),{},{type:"checkbox",testId:"test-4",value:"radio-4"}),"radio-4")]});// Change children
+expect(screen.getByTestId("test-promo-card-group")).toBeInTheDocument(),expect(screen.getByTestId("test-promo-card-group")).toHaveClass("np-CardGroup"),expect(screen.getByRole("radiogroup")).toBeInTheDocument(),a(d),expect(screen.getByTestId("test-4")).toBeInTheDocument()}),it("sets the `defaultValue` for the group",function(){var b=_objectSpread(_objectSpread({},c),{},{defaultValue:"radio-1"});// Change children
+expect(screen.getByTestId("test-1")).not.toHaveClass("is-checked"),a(b),expect(screen.getByTestId("test-1")).toHaveClass("is-checked")}),it("not to render as a `radiogroup` if we have a mix of PromoCard types",function(){var d=_objectSpread(_objectSpread({},c),{},{children:[/*#__PURE__*/_jsx(PromoCard,_objectSpread(_objectSpread({},b),{},{type:"checkbox",testId:"test-3",value:"radio-3"}),"radio-3"),/*#__PURE__*/_jsx(PromoCard,_objectSpread(_objectSpread({},b),{},{type:"checkbox",testId:"test-4 ",value:"radio-4"}),"radio-4")]});// Change children
+expect(screen.getByRole("radiogroup")).toBeInTheDocument(),a(d),expect(screen.queryByRole("radiogroup")).not.toBeInTheDocument(),expect(screen.getByTestId("test-4")).toBeInTheDocument()}),it("applies `is-disabled` class to all children when isDisabled is true",function(){var b=_objectSpread(_objectSpread({},c),{},{isDisabled:!0});// Change children
+expect(screen.getByTestId("test-1")).not.toHaveClass("is-disabled"),expect(screen.getByTestId("test-2")).not.toHaveClass("is-disabled"),a(b),expect(screen.getByTestId("test-1")).toHaveClass("is-disabled"),expect(screen.getByTestId("test-2")).toHaveClass("is-disabled")})});

package/build/es/polyfill/promoCard/PromoCardGroup.story.js

@@ -0,0 +1 @@
+import PromoCard from"./PromoCard";import PromoCardGroup from"./PromoCardGroup";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 PromoCards=function(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(PromoCard,{title:"Digital",description:"A card that lives online and works anywhere. Easy, secure, and always on hand.",type:"radio",value:"digital",id:"digital",imageAlt:"",indicatorLabel:"Free",imageSource:"https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"}),/*#__PURE__*/_jsx(PromoCard,{title:"Standard",description:"Spend and withdraw money around the world. In your wallet and on your side.",type:"radio",value:"standard",id:"standard",imageAlt:"",indicatorLabel:"7 GBP",imageSource:"https://wise.com/web-art/assets/illustrations/personal-card-medium@2x.webp"}),/*#__PURE__*/_jsx(PromoCard,{title:"Eco",description:"A debit card made to biodegrade \u2014 no toxic gases, no toxic fees.",type:"radio",value:"eco",id:"eco",imageAlt:"",indicatorLabel:"9 GBP",imageSource:"https://wise.com/web-art/assets/illustrations/eco-card-medium@2x.webp"})]})},meta={component:PromoCardGroup,title:"Layouts/PromoCardGroup",tags:["autodocs"]};export default meta;export var Default={args:{children:/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(PromoCards,{})})}};export var DefaultValue={args:{children:/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(PromoCards,{})}),defaultValue:"standard"}};export var Disabled={args:{children:/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(PromoCards,{})}),isDisabled:!0}};

package/build/es/polyfill/promoCard/PromoCardIndicator.js

@@ -0,0 +1,16 @@
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","children","label","icon","testid"];import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{ArrowRight,Check,Download}from"@transferwise/icons";import classNames from"classnames";import Body from"../body";import{Typography}from"../common";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";/**
+ * PromoCardIndicator component.
+ *
+ * A PromoCardIndicator is a small component that can be used to display
+ * additional information or actions related to a PromoCard. It can be
+ * customized with various props to suit different use cases.
+ *
+ * @param {string} className - Optional class name(s) to add to the indicator container.
+ * @param {string} label - Optional label to display next to the indicator.
+ * @param {string} icon - Optional icon to display in the indicator.
+ * @param {string} testid - Optional ID to add to the indicator container for testing purposes.
+ * @param {ReactNode} children - Optional children to display inside the indicator.
+ * @returns {JSX.Element} - The PromoCardIndicator component.
+ * @example
+ * <PromoCardIndicator label="Download" icon="download" />
+ */var PromoCardIndicator=function(a){var b=a.className,c=a.children,d=a.label,e=a.icon,f=a.testid,g=_objectWithoutProperties(a,_excluded),h=e&&{check:Check,arrow:ArrowRight,download:Download}[e];return/*#__PURE__*/_jsxs("div",_objectSpread(_objectSpread({className:classNames("np-Card-indicator",b),"data-testid":f},g),{},{children:[d&&/*#__PURE__*/_jsx(Body,{as:"span",type:Typography.BODY_LARGE_BOLD,className:"np-Card-indicatorText",children:d}),h&&/*#__PURE__*/_jsx("span",{className:"np-Card-indicatorIcon",children:/*#__PURE__*/_jsx(h,{size:24,"aria-hidden":"true"})}),c]}))};export default PromoCardIndicator;

package/build/es/polyfill/promoCard/index.js

@@ -0,0 +1 @@
+export{default}from"./PromoCard";export{default as PromoCardGroup}from"./PromoCardGroup";