@transferwise/components 0.0.0-experimental-ed6f15f → 0.0.0-experimental-22a796c

package/build/styles/promoCard/Slate.css

@@ -0,0 +1 @@
+.wds-slate{align-items:stretch;background-color:#86a7bd1a;background-color:var(--color-background-neutral);border-radius:32px;border-radius:var(--size-32);cursor:pointer;display:flex;flex:1;flex-direction:column;gap:16px;gap:var(--size-16);justify-content:space-between;overflow:hidden;padding:24px;padding:var(--size-24);position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.wds-slate:hover.wds-slate:not(.disabled,:disabled,.selected){box-shadow:0 20px 40px 0 #0000001a;box-shadow:0 20px 40px 0 var(--color-border-neutral);transition:.2s}.wds-slate:hover.wds-slate:not(.disabled,:disabled,.selected) .animate-hover{transform:scale(1.1);transition:all 1s ease-in-out}.wds-slate:active.wds-slate:not(.disabled,:disabled,.closeClicked){background-color:var(--color-background-neutral-active);scale:95%;transition:.3s}.wds-slate:focus-visible,.wds-slate:focus-within{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.wds-slate.selected.wds-slate:not(.disabled,:disabled){outline-offset:6px}.wds-slate.selected.wds-slate:not(.disabled,:disabled),.wds-slate.selected.wds-slate:not(.disabled,:disabled):hover{box-shadow:0 0 0 4px var(--color-interactive-primary);box-shadow:0 0 0 var(--size-4) var(--color-interactive-primary)}.wds-slate.selected.wds-slate:not(.disabled,:disabled):hover{transition:.2s}.wds-slate .close-button,.wds-slate .selected-check{margin:16px;margin:var(--size-16);position:absolute;right:0;top:0}.wds-slate .close-button{background-color:#86a7bd1a;background-color:var(--color-background-neutral);pointer-events:none}.wds-slate .selected-check{background-color:var(--color-interactive-primary);color:var(--color-bright-green)}.np-theme-personal--dark .wds-slate .selected-check{color:var(--color-forest-green)}.wds-slate .title{padding-right:32px;padding-right:var(--size-32)}.wds-slate img{margin-left:-24px;margin-left:calc(var(--size-24)*-1);min-width:calc(100% + 48px);min-width:calc(100% + var(--size-48))}.wds-slate .slate-footer{bottom:0;display:flex;flex-direction:row-reverse;position:absolute;right:0}.wds-slate .slate-link{background-color:#00a2dd;background-color:var(--color-interactive-accent);color:var(--color-forest-green);display:flex;height:56px;height:var(--size-56);margin:12px 12px 12px -6px;width:56px;width:var(--size-56)}.wds-slate .slate-link:hover{background-color:#008fc9;background-color:var(--color-interactive-accent-hover)}.wds-slate .key-feature{align-items:center;align-self:stretch;background:#dbe0d8;border-radius:99px;color:#37517e;color:var(--color-content-primary);display:flex;gap:12px;gap:var(--size-12);height:56px;height:var(--size-56);justify-content:center;margin:12px 12px 12px 0;margin:var(--size-12) var(--size-12) var(--size-12) 0;padding:8px 16px;padding:var(--size-8) var(--size-16)}.np-theme-personal--dark .wds-slate .key-feature{background:#555456}@media (prefers-reduced-motion:reduce){.wds-slate:hover.wds-slate:not(.disabled,:disabled) img.animateHover{transform:scale(1);transition:none}.wds-slate:active.wds-slate:not(.disabled,:disabled){background-color:var(--color-background-neutral-active);scale:100%;transition:0}}

package/build/types/index.d.ts

@@ -63,6 +63,7 @@ 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 PromoCard } from './promoCard';
 export { default as Provider, DirectionProvider, LanguageProvider } from './provider';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radioGroup';

package/build/types/promoCard/PromoCard.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+export declare enum Variant {
+    SELECT = "select",
+    LINK = "link"
+}
+type Props = {
+    id?: string;
+    variant?: Variant.SELECT | Variant.LINK;
+    title: string;
+    description: string;
+    imageSource?: URL;
+    keyFeature?: string;
+    className?: string;
+    selected?: boolean;
+    onClick?: () => void;
+    onClose?: () => void;
+    animateHover?: boolean;
+    disabled?: boolean;
+};
+declare const PromoCard: ({ id, variant, title, description, imageSource, keyFeature, className, selected, onClick, onClose, animateHover, disabled, }: Props) => ReactElement;
+export default PromoCard;

package/build/types/promoCard/PromoCard.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/types/promoCard/PromoCard.story.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { Variant } from './PromoCard';
+declare const _default: {
+    component: ({ id, variant, title, description, imageSource, keyFeature, className, selected, onClick, onClose, animateHover, disabled, }: {
+        id?: string | undefined;
+        variant?: Variant | undefined;
+        title: string;
+        description: string;
+        imageSource?: URL | undefined;
+        keyFeature?: string | undefined;
+        className?: string | undefined;
+        selected?: boolean | undefined;
+        onClick?: (() => void) | undefined;
+        onClose?: (() => void) | undefined;
+        animateHover?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/build/types/promoCard/Slate.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement, ReactNode } from 'react';
+type Props = {
+    id: string;
+    className?: string;
+    children: ReactNode;
+};
+declare const Slate: ({ id, className, children }: Props) => ReactElement;
+export default Slate;

package/build/types/promoCard/index.d.ts

@@ -0,0 +1 @@
+export { default } from './PromoCard';