@zohodesk/components 1.2.63 → 1.3.0

package/README.md

@@ -32,6 +32,14 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.64
+
+- **AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar** - searchFields prop supported
+-  **AdvancedMultiSelect, MultiSelectWithAvatar** - secondaryField prop supported
+- **ListContainer** - align prop supported
+- **ListItemWithAvatar** - secondaryValue, lhsAlignContent prop supported
+- **ListItemWithCheckBox, ListItemWithIcon, ListItemWithRadio** - secondaryValue, lhsAlignContent, lhsJustifyContent prop supported
+
 # 1.2.63
 
 - **AdvancedGroupMultiSelect, AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar, GroupSelect, Select, SelectWithAvatar** - `allowValueFallback` prop supported.

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -165,6 +165,7 @@
 	
 	/* listitem */
 	--zdt_listitem_default_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_listitem_secondaryfield_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_listitem_default_border: var(--dot_mirror);
 	--zdt_listitem_default_bg: var(--dot_mirror);
 	--zdt_listitem_default_tickicon: var(--zdt_cta_primary_text);

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -165,6 +165,7 @@
 	
 	/* listitem */
 	--zdt_listitem_default_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_listitem_secondaryfield_text: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_listitem_default_border: var(--dot_mirror);
 	--zdt_listitem_default_bg: var(--dot_mirror);
 	--zdt_listitem_default_tickicon: var(--zdt_cta_primary_text);

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -165,6 +165,7 @@
 	
 	/* listitem */
 	--zdt_listitem_default_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_listitem_secondaryfield_text: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_listitem_default_border: var(--dot_mirror);
 	--zdt_listitem_default_bg: var(--dot_mirror);
 	--zdt_listitem_default_tickicon: var(--zdt_cta_primary_text);

package/es/ListItem/ListContainer.js

@@ -31,7 +31,8 @@ const ListContainer = props => {
     onClick,
     onMouseEnter,
     onMouseOver,
-    eleRef
+    eleRef,
+    align
   } = props;
   const responsiveFunc = useCallback(_ref => {
     let {
@@ -77,7 +78,7 @@ const ListContainer = props => {
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,
-    align: "vertical",
+    align: align,
     alignBox: "row",
     className: `${style.list} ${style[size]} ${mobileToTab && isTouchDevice ? style.responsiveHeight : ''} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
     dataId: dataId,

package/es/ListItem/ListItem.module.css

@@ -1,5 +1,6 @@
 .varClass {
   /* listitem default variables */
+  --listitem_font_size: var(--zd_font_size13);
   --listitem_text_color: var(--zdt_listitem_default_text);
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
@@ -24,7 +25,7 @@
   position: relative;
   list-style: none;
   color: var(--listitem_text_color);
-  font-size: var(--zd_font_size13) ;
+  font-size: var(--listitem_font_size);
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;
@@ -57,7 +58,7 @@
   --listitem_min_height: var(--zd_size35);
 }
 .large {
-  --listitem_height: var(--zd_size48);
+  --listitem_min_height: var(--zd_size48);
 }
 [dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
@@ -72,9 +73,8 @@
 .value, .multiLineValue {
   line-height: 1.5385;
 }
-.multiLineValue{
-  word-break: break-word;
-  composes: clamp from '../common/common.module.css'
+.multiLineValue,.multiLine{
+ composes: lineClamp from '../common/common.module.css';
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -94,6 +94,42 @@
   margin: var(--listitem_avatar_margin);
 }
 
+.lhsJustifyContent_start,
+.lhsJustifyContent_center,
+.lhsJustifyContent_end {
+  composes: dflex alignVertical from '../common/common.module.css';
+}
+.lhsJustifyContent_start {
+  composes: justifyFstart from '../common/common.module.css';
+}
+.lhsJustifyContent_center {
+  composes: alignHorizontal from '../common/common.module.css';
+}
+.lhsJustifyContent_end {
+  composes: justifyFend from '../common/common.module.css';
+}
+
+.lhsBox {
+  composes: dflex from '../common/common.module.css';
+  align-self: stretch;
+}
+.lhsBox_small,
+.lhsBox_medium,
+.lhsBox_large{
+  composes: varClass;
+  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
+  height: 100% ;
+  composes: dflex alignVertical from '../common/common.module.css';
+}
+.lhsBox_small {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size7)); /* 7px = listitem min-height - (top + bottom padding) - doubleLine content height */
+}
+.lhsBox_medium {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
+}
+.lhsBox_large {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
+}
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
@@ -155,12 +191,22 @@
 .activedark {
   --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
 }
+.secondaryField{
+  color:var(--zdt_listitem_secondaryfield_text);
+  font-size: var(--zd_font_size12) ;
+  line-height: 1.25;
+}
 
 .tickIcon,
 .defaultTick,
 .darkTick {
   position: absolute;
   color: var(--listitem_tickicon_color);
+  top:50% ;
+}
+
+.tickIcon, .defaultTick, .darkTick {
+  transform: translateY(-50%);
 }
 
 [dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
@@ -199,7 +245,7 @@
 }
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
-  font-size: var(--zd_font_size15) ;
+  --listitem_font_size: var(--zd_font_size15);
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }

package/es/ListItem/ListItemWithAvatar.js

@@ -1,6 +1,6 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box } from "../Layout";
+import { Box, Container } from "../Layout";
 import ListContainer from "./ListContainer";
 import { ListItemWithAvatarDefaultProps } from "./props/defaultProps";
 import { ListItemWithAvatar_Props } from "./props/propTypes";
@@ -74,7 +74,9 @@ export default class ListItemWithAvatar extends React.PureComponent {
       a11y,
       customClass,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      secondaryValue,
+      lhsAlignContent
     } = this.props;
     let {
       ListItemProps = {},
@@ -118,7 +120,10 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customProps: ListItemProps,
       ...ContainerProps
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-      className: style.leftAvatar
+      className: `${style.leftAvatar} ${lhsAlignContent !== 'center' ? `${style.lhsBox}` : ''}`
+    }, /*#__PURE__*/React.createElement(Box, {
+      align: lhsAlignContent,
+      className: style[`lhsBox_${size}`]
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -141,12 +146,18 @@ export default class ListItemWithAvatar extends React.PureComponent {
       palette: isDarkPalette ? 'info' : avatarPalette,
       customClass: customAvatar,
       ...AvatarProps
-    })) : null, value ? /*#__PURE__*/React.createElement(Box, {
+    }))) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : ''}`
+    }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItemWithCheckBox.js

@@ -3,7 +3,7 @@ import ListContainer from "./ListContainer";
 import { ListItemWithCheckBoxDefaultProps } from "./props/defaultProps";
 import { ListItemWithCheckBox_Props } from "./props/propTypes";
 import CheckBox from "../CheckBox/CheckBox";
-import { Box } from "../Layout";
+import { Box, Container } from "../Layout";
 import style from "./ListItem.module.css";
 export default class ListItemWithCheckBox extends React.Component {
   constructor(props) {
@@ -59,7 +59,10 @@ export default class ListItemWithCheckBox extends React.Component {
       a11y,
       customClass,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      secondaryValue,
+      lhsAlignContent,
+      lhsJustifyContent
     } = this.props;
     const listA11y = {
       role: 'option',
@@ -93,8 +96,11 @@ export default class ListItemWithCheckBox extends React.Component {
       customProps: ListItemProps,
       ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: style.iconBox,
+      className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId ? dataId : value}_checkBox`
+    }, /*#__PURE__*/React.createElement(Box, {
+      align: lhsAlignContent,
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,
       a11y: {
@@ -104,12 +110,18 @@ export default class ListItemWithCheckBox extends React.Component {
         customCheckBox: customCheckBox,
         customLabel: customLabel
       }
-    })), /*#__PURE__*/React.createElement(Box, {
+    }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value));
+    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : ''}`
+    }, secondaryValue) : null)));
   }
 
 }

package/es/ListItem/ListItemWithIcon.js

@@ -1,6 +1,6 @@
 /**** Libraries ****/
 import React from 'react';
-import { Box } from "../Layout";
+import { Box, Container } from "../Layout";
 import { Icon } from '@zohodesk/icons';
 import ListContainer from "./ListContainer";
 import { ListItemWithIconDefaultProps } from "./props/defaultProps";
@@ -70,7 +70,10 @@ export default class ListItemWithIcon extends React.Component {
       a11y,
       customClass,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      secondaryValue,
+      lhsAlignContent,
+      lhsJustifyContent
     } = this.props;
     let {
       ListItemProps = {},
@@ -110,21 +113,31 @@ export default class ListItemWithIcon extends React.Component {
       ...ContainerProps
     }, iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
-      className: style.iconBox,
+      align: lhsAlignContent,
+      className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
+    }, /*#__PURE__*/React.createElement(Box, {
+      align: lhsAlignContent,
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
     }, /*#__PURE__*/React.createElement(Icon, {
       iconClass: iconClass,
       name: iconName,
       size: iconSize
-    })), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
+    }))), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
       className: iconClass
-    }) : null, value && /*#__PURE__*/React.createElement(Box, {
+    }) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       className: needMultiLineText ? style.multiLineValue : style.value,
       "data-title": isDisabled ? null : title,
       dataId: `${dataIdString}_Text`
-    }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
+    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : ''}`
+    }, secondaryValue) : null)), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
       dataId: `${dataIdString}_tickIcon`,

package/es/ListItem/ListItemWithRadio.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Radio from "../Radio/Radio";
-import { Box } from "../Layout";
+import { Box, Container } from "../Layout";
 import ListContainer from "./ListContainer";
 import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
 import { ListItemWithRadio_Props } from "./props/propTypes";
@@ -60,7 +60,10 @@ export default class ListItemWithRadio extends React.Component {
       a11y,
       customClass,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      secondaryValue,
+      lhsAlignContent,
+      lhsJustifyContent
     } = this.props;
     let {
       ListItemProps = {},
@@ -94,8 +97,12 @@ export default class ListItemWithRadio extends React.Component {
       customProps: ListItemProps,
       ...ContainerProps
     }, /*#__PURE__*/React.createElement(Box, {
-      className: style.iconBox,
+      align: lhsAlignContent,
+      className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId}_radio`
+    }, /*#__PURE__*/React.createElement(Box, {
+      align: lhsAlignContent,
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,
       id: id,
@@ -106,12 +113,18 @@ export default class ListItemWithRadio extends React.Component {
         customRadio: customRadio,
         customRadioWrap: customRadioWrap
       }
-    })), /*#__PURE__*/React.createElement(Box, {
+    }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
-      shrink: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column"
+    }, value ? /*#__PURE__*/React.createElement(Box, {
       "data-title": disableTitle ? null : title,
       className: needMultiLineText ? style.multiLineValue : style.value
-    }, value));
+    }, value) : null, secondaryValue ? /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : secondaryValue,
+      className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : ''}`
+    }, secondaryValue) : null)));
   }
 
 }

package/es/ListItem/__tests__/ListContainer.spec.js

@@ -8,4 +8,12 @@ describe('ListContainer', () => {
     } = render( /*#__PURE__*/React.createElement(ListContainer, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListContainer with Align Base Line', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListContainer, {
+      align: 'baseline'
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/ListItem/__tests__/ListItemWithAvatar.spec.js

@@ -8,4 +8,39 @@ describe('ListItemWithAvatar', () => {
     } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithAvatar with secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      secondaryValue: "secondaryValue"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with secondaryValue text and LHS align start', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with secondaryValue  text and LHS align center', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithAvatar with secondaryValue  text and LHS align end', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js

@@ -8,4 +8,39 @@ describe('ListItemWithCheckBox', () => {
     } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithCheckBox with secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      secondaryValue: "secondaryValue"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with secondaryValue text and LHS align start', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with secondaryValue  text and LHS align center', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithCheckBox with secondaryValue  text and LHS align end', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithCheckBox, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/ListItem/__tests__/ListItemWithIcon.spec.js

@@ -8,4 +8,39 @@ describe('ListItemWithIcon', () => {
     } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithIcon with secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      secondaryValue: "secondaryValue"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with secondaryValue text and LHS align start', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with secondaryValue  text and LHS align center', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithIcon with secondaryValue  text and LHS align end', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/ListItem/__tests__/ListItemWithRadio.spec.js

@@ -8,4 +8,39 @@ describe('ListItemWithRadio', () => {
     } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('ListItemWithRadio with secondaryValue', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      secondaryValue: "secondaryValue"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with secondaryValue text and LHS align start', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "start"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with secondaryValue  text and LHS align center', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "center"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('ListItemWithRadio with secondaryValue  text and LHS align end', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(ListItemWithRadio, {
+      secondaryValue: "secondaryValue",
+      lhsAlignContent: "end"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap

@@ -1,5 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ListContainer ListContainer with Align Base Line 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir baseline"
+    data-a11y-inset-focus="true"
+    data-id="containerComponent"
+    data-selector-id="listContainer"
+    data-test-id="containerComponent"
+    tabindex="0"
+  />
+</DocumentFragment>
+`;
+
 exports[`ListContainer rendering the defult props 1`] = `
 <DocumentFragment>
   <li