@transferwise/components 45.10.1 → 45.11.0

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

@@ -0,0 +1,20 @@
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import classNames from"classnames";import React,{useState,useEffect,useMemo}from"react";import PromoCardContext from"./PromoCardContext";import{jsx as _jsx}from"react/jsx-runtime";/**
+ * PromoCardGroup component.
+ *
+ * A PromoCardGroup is a container for PromoCard components that allows the user to select one or more
+ * cards from a group. It can be used to display a set of related options, and can be customized with
+ * various props to suit different use cases.
+ *
+ * @param {ReactNode} children - The PromoCard components to display inside the group.
+ * @param {string} className - Optional class name(s) to add to the group container.
+ * @param {string} defaultChecked - The default value for the group.
+ * @param {string} id - Optional ID to add to the group container.
+ * @param {boolean} isDisabled=false - Whether the group is disabled or not.
+ * @param {string} label - Optional label to display above the group.
+ * @param {Function} onChange - Optional function to call when the group value changes.
+ * @param {string} testId - Optional ID to add to the group container for testing purposes.
+ * @returns {JSX.Element} - The PromoCardGroup component.
+ */var PromoCardGroup=function(a){var b=a.children,c=a.className,d=a.defaultChecked,e=void 0===d?"":d,f=a.id,g=a.isDisabled,h=void 0!==g&&g,i=a.onChange,j=void 0===i?function(){}:i,k=a.testId,l=useState(e),m=_slicedToArray(l,2),n=m[0],o=m[1],p=useState(null),q=_slicedToArray(p,2),r=q[0],s=q[1],t=useMemo(function(){return{state:n,isDisabled:h,onChange:function handleOnChange(a){o(a),j(a)}}},[n,h,j]),u=classNames(_defineProperty({"np-CardGroup":!0,"is-disabled":h},"".concat(c||""),c));return useEffect(function(){var a,c;o(e);// Collect an array of types from the children PromoCard components
+var d=null!==(a=null===(c=React.Children.map(b,function(a){return/*#__PURE__*/React.isValidElement(a)&&a.props.type?a.props.type:null}))||void 0===c?void 0:c.filter(function(a){return null!==a&&void 0!==a}))&&void 0!==a?a:[],f=d.every(function(a){return a===d[0]});// Check if all types are the same
+s(f&&"radio"===d[0]?"radiogroup":null)},[e,b]),/*#__PURE__*/_jsx(PromoCardContext.Provider,{value:t,children:/*#__PURE__*/_jsx("div",_objectSpread(_objectSpread({},{className:u,id:f,"data-testid":k,role:r// Add the role attribute here
+}),{},{children:b}))})};export default/*#__PURE__*/React.memo(PromoCardGroup);

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),{},{defaultChecked:"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 DefaultChecked={args:{children:/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(PromoCards,{})}),defaultChecked:"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";