@zohodesk/components 1.5.2 → 1.5.4-temp-1

package/es/Radio/Radio.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Label from "../Label/Label";
+import Typography from "../Typography/Typography";
 import { Container, Box } from "../Layout";
 import CssProvider from "../Provider/CssProvider";
 import style from "./Radio.module.css";
@@ -51,12 +52,14 @@ export default class Radio extends React.Component {
       customProps,
       children,
       a11y,
+      secondaryText,
       renderRightPlaceholderNode
     } = this.props;
     let {
       customRadioWrap = '',
       customRadio = '',
-      customLabel = ''
+      customLabel = '',
+      customSecondaryText = ''
     } = customClass;
     let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
     let toolTip = disabled ? disabledTitle : title ? title : null;
@@ -72,7 +75,8 @@ export default class Radio extends React.Component {
     } = a11y;
     let {
       ContainerProps = {},
-      LabelProps = {}
+      LabelProps = {},
+      secondaryTextProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       dataId: value ? value.toLowerCase() : 'RadioComp',
@@ -94,7 +98,8 @@ export default class Radio extends React.Component {
       ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.radio} ${checked ? `${style[`rdBox${palette}`]}` : ''} 
-            ${!isEditable ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio} ${!isEditable ? `${style.disabled}` : ''}`
+            ${!isEditable ? '' : `${style[`hover${palette}`]}`} ${style[size]} ${isFilled ? style.filled : ''} ${style[`centerPath${palette}`]} ${customRadio} ${!isEditable ? `${style.disabled}` : ''} ${secondaryText ? style.withSecondaryText : ''}`,
+      align: secondaryText ? "start" : undefined
     }, /*#__PURE__*/React.createElement("input", {
       type: "hidden",
       id: id,
@@ -115,10 +120,10 @@ export default class Radio extends React.Component {
       cy: "20",
       r: "11.03",
       className: `${style.centerPath}`
-    }) : null))), text && /*#__PURE__*/React.createElement(Box, {
+    }) : null))), (text || secondaryText) && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      className: `${style.text} ${disabled ? `${style.disabled}` : ''}`
-    }, /*#__PURE__*/React.createElement(Label, {
+      className: style.labelContainer
+    }, text && /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: labelPalette,
       size: labelSize,
@@ -127,10 +132,16 @@ export default class Radio extends React.Component {
       dataId: `${text}_label`,
       variant: variant,
       title: toolTip ? toolTip : text,
-      customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} 
-              ${style[`${palette}Label`]} ${isEditable ? style.pointer : ''} ${isReadOnly ? style.readonly : ''}  ${customLabel}`,
+      customClass: `${checked && active ? `${style[`${palette}checkedActive`]}` : ''} ${disabled ? `${style.disabled}` : ''}
+                  ${style[`${palette}Label`]} ${isEditable ? style.pointer : ''} ${isReadOnly ? style.readonly : ''}  ${customLabel}`,
       ...LabelProps
-    })), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
+    }), secondaryText ? /*#__PURE__*/React.createElement(Typography, {
+      $ui_size: "12",
+      $ui_lineHeight: "1.2",
+      ...secondaryTextProps,
+      $i18n_dataTitle: toolTip ? null : secondaryText,
+      $ui_className: `${style.secondaryText} ${customSecondaryText}`
+    }, secondaryText) : null), children, renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
   }
 
 }

package/es/Radio/Radio.module.css

@@ -10,20 +10,25 @@
 }[dir=ltr] .varClass {
   --radio_label_margin: 0 0 0 var(--zd_size6);
 }[dir=rtl] .varClass {
-  --radio_label_margin: 0 var(--zd_size6) 0 0;
+  --radio_label_margin: 0 0 0 var(--zd_size6);
 }
+
 .container {
   composes: varClass;
 }
+
 .pointer {
   cursor: pointer;
 }
+
 .readonly, .disabled {
   cursor: default;
 }
+
 .disabled {
   opacity: 0.7
 }
+
 .radio {
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
@@ -32,10 +37,12 @@
   background: var(--radio_bg_color);
   border-radius: 50%;
 }
+
 .radio,
 .centerPath {
   fill: var(--radio_fill);
 }
+
 .filled {
   --radio_bg_color: var(--zdt_radio_default_bg);
 }
@@ -44,48 +51,66 @@
   --radio_width: var(--zd_size16);
   --radio_height: var(--zd_size16);
 }
+
 .small {
   --radio_width: var(--zd_size13);
   --radio_height: var(--zd_size13);
 }
+
+.medium.withSecondaryText {
+  margin-top: var(--zd_size1) ;
+}
+
+.small.withSecondaryText {
+  margin-top: var(--zd_size3) ;
+}
+
 .radioLabel {
   font-size: 0 ;
   display: block;
 }
+
 .rdBox {
   fill: none;
   stroke-width: var(--radio_stroke_width);
   stroke-linecap: round;
   stroke: inherit;
 }
+
 .centerPath {
   --radio_fill: inherit;
   stroke-width: var(--radio_inner_stroke_width);
   transform-origin: center;
 }
+
 [dir=ltr] .checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
+
 [dir=rtl] .checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
+
 .rdBoxprimary,
 .hoverEfffect:hover .hoverprimary
+
 /* .hoverEfffect:focus .hoverprimary  */
-{
+  {
   --radio_stroke_color: var(--zdt_radio_primary_stroke);
 }
 
 .rdBoxdanger,
 .hoverEfffect:hover .hoverdanger
+
 /* .hoverEfffect:focus .hoverdanger */
- {
+  {
   --radio_stroke_color: var(--zdt_radio_danger_stroke);
 }
 
 .centerPathprimary {
   --radio_fill: var(--zdt_radio_primary_fill);
 }
+
 .centerPathdanger {
   --radio_fill: var(--zdt_radio_danger_fill);
 }
@@ -102,14 +127,22 @@
   --label_text_color: var(--zdt_radio_label_danger_text);
 }
 
-.text {
+.secondaryText {
+  color: var(--zdt_radio_secondary_text);
+}
+
+.labelContainer {
+  composes: dflex flexcolumn from '../common/common.module.css';
+  gap: var(--zd_size4) ;
   margin: var(--radio_label_margin);
 }
+
 @keyframes circleAnimate {
   0% {
     transform: scale(0);
   }
+
   100% {
     transform: scale(1);
   }
-}
+}

package/es/Radio/__tests__/Radio.spec.js

@@ -235,4 +235,14 @@ describe('Radio', () => {
     })));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering secondaryText with checked state', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Radio, {
+      secondaryText: "Secondary text",
+      text: "Radio Text",
+      checked: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });