@pushwoosh/dumb-components 1.1.15 → 1.1.17

package/EmailTemplatePreview/helpers.js

@@ -1,12 +1,12 @@
 export function replaceLocalization(str, values) {
-  const re = /{{([0-9A-Za-z_ \-.[\]]+)\|(text|html|color)\|([^}]*)?}}/g;
+  const re = /{{([^|{}]+)\|(text|html|color)\|([^}]*)?}}/g;
   return str.replace(re, (_, key, _type, defaultValue) => {
     return (key in values ? values[key] : defaultValue) || '';
   });
 }
 export function replacePlaceholders(str, values) {
   const allAvailableModifiers = ['CapitalizeFirst', 'CapitalizeAllFirst', 'UPPERCASE', 'lowercase', 'regular', 'cent', 'dollar', 'comma', 'euro', 'jpy', 'lira', 'M-d-y', 'm-d-y', 'M d y', 'M d Y', 'l', 'M d', 'H:i', 'm-d-y H:i'];
-  const re = new RegExp(`{([0-9A-Za-z_ \\-]{1,64})\\|(${allAvailableModifiers.join('|')})(?:\\|([^}]*))?}`, 'g');
+  const re = new RegExp(`{([^|{}]{1,64})\\|(${allAvailableModifiers.join('|')})(?:\\|([^}]*))?}`, 'g');
   return str.replace(re, (_, key, _modifier, defaultValue) => {
     return (key in values ? values[key] : defaultValue) || '';
   });

package/Radio/Radio.js

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
-import { NativeLabel, NativeRadio } from './styles';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { HelpRoundIcon } from '@pushwoosh/kit-icons';
+import { InputContainer, NativeLabel, NativeRadio } from './styles';
+import { Tooltip } from '../Tooltip';
 let counter = 0;
 export function Radio(props) {
   const {
@@ -11,6 +14,7 @@ export function Radio(props) {
     type = 'normal',
     isChecked,
     isDisabled,
+    tooltip,
     size = 'regular',
     onChange,
     onBlur
@@ -22,10 +26,14 @@ export function Radio(props) {
     const newCounter = counter++;
     return `radio-id-${newCounter}`;
   });
-  return React.createElement(NativeLabel, {
+  const radioMarkup = React.createElement(NativeLabel, {
     htmlFor: localId,
     "$color": isDisabled ? Color.LOCKED : Color.MAIN,
     "$size": size
+  }, React.createElement(InputContainer, {
+    "$size": size,
+    "$alignItems": "center",
+    "$justifyContent": "center"
   }, React.createElement(NativeRadio, {
     type: "radio",
     id: localId,
@@ -37,5 +45,20 @@ export function Radio(props) {
     "$type": type,
     onChange: event => onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.value),
     onBlur: onBlur
-  }), label && React.createElement("span", null, label));
+  })), label && React.createElement("span", null, label));
+  if (tooltip) {
+    return React.createElement(Horizontal, {
+      "$gap": 4,
+      "$alignItems": "start"
+    }, radioMarkup, React.createElement(Tooltip, {
+      content: tooltip
+    }, React.createElement(Horizontal, {
+      "$padding": size === 'compact' ? 0 : '4px 0'
+    }, React.createElement(HelpRoundIcon, {
+      size: "small",
+      view: "lined",
+      color: Color.PHANTOM
+    }))));
+  }
+  return radioMarkup;
 }

package/Radio/styles.d.ts

@@ -1,4 +1,62 @@
 import type { RadioSize, RadioType } from './types';
+export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $size: RadioSize;
+}, "$gridAutoFlow">;
 export declare const NativeRadio: import("styled-components").StyledComponent<"input", any, {
     $size: RadioSize;
     $type: RadioType;

package/Radio/styles.js

@@ -1,36 +1,47 @@
 import { rgba } from 'polished';
 import styled from 'styled-components';
 import { Color, FontSize, LineHeight } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
 import { ColorByType } from './mappers';
-export const NativeRadio = styled.input.withConfig({
-  displayName: "NativeRadio",
+export const InputContainer = styled(Horizontal).withConfig({
+  displayName: "InputContainer",
   componentId: "sc-34lgtl-0"
-})(["appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:", ";height:", ";border:", ";border-radius:50%;background-color:", ";transition:border 0.1s,background-color 0.1s;cursor:pointer;&:focus{outline:none;}&[type=radio]:checked:disabled{cursor:not-allowed;background-color:", ";border:", ";}&[type=radio]:not(:checked):disabled{cursor:not-allowed;border-color:", ";background-color:", ";}&[type=radio]:checked{border:", ";background-color:", ";}&[type=radio]:not(:checked):not(:disabled):hover::before{background:", ";content:\"\";position:absolute;top:", ";left:", ";width:", ";height:", ";border-radius:50%;transition:background 0.2s;}"], ({
+})(["width:", ";height:", ";"], ({
   $size
 }) => $size === 'compact' ? '16px' : '24px', ({
   $size
-}) => $size === 'compact' ? '16px' : '24px', ({
+}) => $size === 'compact' ? '16px' : '24px');
+export const NativeRadio = styled.input.withConfig({
+  displayName: "NativeRadio",
+  componentId: "sc-34lgtl-1"
+})(["appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:", ";height:", ";padding:", ";border:", ";border-radius:50%;background-color:", ";transition:border 0.1s,background-color 0.1s;cursor:pointer;&:focus{outline:none;}&[type=radio]:checked:disabled{cursor:not-allowed;background-color:", ";border:", ";}&[type=radio]:not(:checked):disabled{cursor:not-allowed;border-color:", ";background-color:", ";}&[type=radio]:checked{border:", ";background-color:", ";}&[type=radio]:not(:checked):not(:disabled):hover::before{background:", ";content:\"\";position:absolute;top:", ";left:", ";width:", ";height:", ";border-radius:50%;transition:background 0.2s;}"], ({
+  $size
+}) => $size === 'compact' ? '14px' : '20px', ({
+  $size
+}) => $size === 'compact' ? '14px' : '20px', ({
+  $size
+}) => $size === 'compact' ? '1px' : '2px', ({
   $type
 }) => `2px solid ${ColorByType[$type].notChecked}`, Color.CLEAR, Color.FORM, ({
   $size
-}) => `${$size === 'compact' ? '4px' : '7px'} solid ${Color.LOCKED}`, Color.LOCKED, Color.FORM, ({
+}) => `${$size === 'compact' ? '4px' : '6px'} solid ${Color.LOCKED}`, Color.LOCKED, Color.FORM, ({
   $size,
   $type
-}) => `${$size === 'compact' ? '4px' : '7px'} solid ${ColorByType[$type].checked}`, Color.CLEAR, ({
+}) => `${$size === 'compact' ? '4px' : '6px'} solid ${ColorByType[$type].checked}`, Color.CLEAR, ({
   $type
 }) => rgba(ColorByType[$type].notChecked, 0.3), ({
   $size
-}) => $size === 'compact' ? '3px' : '5px', ({
+}) => $size === 'compact' ? '3px' : '4px', ({
   $size
-}) => $size === 'compact' ? '3px' : '5px', ({
+}) => $size === 'compact' ? '3px' : '4px', ({
   $size
-}) => $size === 'compact' ? '6px' : '10px', ({
+}) => $size === 'compact' ? '4px' : '8px', ({
   $size
-}) => $size === 'compact' ? '6px' : '10px');
+}) => $size === 'compact' ? '4px' : '8px');
 export const NativeLabel = styled.label.withConfig({
   displayName: "NativeLabel",
-  componentId: "sc-34lgtl-1"
-})(["display:inline-flex;align-items:center;font-size:", ";line-height:", ";span{max-width:", ";white-space:normal;overflow-wrap:break-word;}user-select:none;", " &:has(input:disabled){cursor:not-allowed;}&:has(input:not(:disabled)){cursor:pointer;}& > ", "{&:not(:last-child){margin-right:", ";}}"], ({
+  componentId: "sc-34lgtl-2"
+})(["display:inline-flex;align-items:start;font-size:", ";line-height:", ";span{max-width:", ";white-space:normal;overflow-wrap:break-word;}user-select:none;", " &:has(input:disabled){cursor:not-allowed;}&:has(input:not(:disabled)){cursor:pointer;}& > ", "{&:not(:last-child){margin-right:", ";}}& > span{padding:", ";}"], ({
   $size
 }) => $size === 'compact' ? FontSize.SMALL : FontSize.REGULAR, ({
   $size
@@ -38,6 +49,8 @@ export const NativeLabel = styled.label.withConfig({
   $size
 }) => $size === 'compact' ? '600px' : '800px', ({
   $color
-}) => `color: ${$color};`, NativeRadio, ({
+}) => `color: ${$color};`, InputContainer, ({
+  $size
+}) => $size === 'compact' ? '6px' : '8px', ({
   $size
-}) => $size === 'compact' ? '6px' : '8px');
+}) => $size === 'compact' ? '0px' : '2px 0');

package/Radio/types.d.ts

@@ -9,6 +9,7 @@ export type RadioProps = {
     isChecked?: boolean;
     isDisabled?: boolean;
     size?: RadioSize;
+    tooltip?: string;
     onChange?: (checked: string | number) => void;
     onBlur?: () => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",