@citygross/components 0.14.1 → 0.14.3

package/build/@types/components/RadioListItem/RadioListItem.d.ts

@@ -12,5 +12,6 @@ export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
     wrapMobile?: boolean;
     children?: JSX.Element;
     additionalInfo?: JSX.Element;
+    ariaLabel?: string;
 };
-export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children }: TRadioListItemProps): JSX.Element;
+export declare function RadioListItem({ onClick, selected, flexGrow, isDisabled, transparent, noPadding, label, value, wrapMobile, additionalInfo, children, ariaLabel }: TRadioListItemProps): JSX.Element;

package/build/cjs/components/src/components/CartSummary/CartSummary.js

@@ -56,7 +56,7 @@ function CartSummary(_a) {
     var summaryText = summaryParts.length > 0
         ? "".concat(summaryParts.join(', '), ". ").concat(totalLabel, " ").concat(utils.formatPrice(cartSummary.totalAmount))
         : "".concat(totalLabel, " ").concat(utils.formatPrice(cartSummary.totalAmount));
-    var fullSummary = cartSummary.totalDiscount > 0
+    cartSummary.totalDiscount > 0
         ? "".concat(summaryText, ". ").concat(saveLabel, " ").concat(utils.formatPrice(cartSummary.totalDiscount))
         : summaryText;
     var ChargeLine = function (_a) {
@@ -81,7 +81,7 @@ function CartSummary(_a) {
                 charge.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark, "aria-label": "Original price ".concat(utils.formatPrice(charge.cancelledAmount)) }, utils.formatPrice(charge.cancelledAmount))),
                 React__default["default"].createElement(typography.BodyText, { "aria-label": "".concat(chargeName, " ").concat(utils.formatPrice(charge.amount)) }, utils.formatPrice(charge.amount)))));
     };
-    return (React__default["default"].createElement(CartSummary_styles.CartSummaryContainer, { role: "region", tabIndex: 0, "aria-label": cartSummary.title ? "".concat(cartSummary.title, ". ").concat(fullSummary) : "Cart Summary. ".concat(fullSummary) },
+    return (React__default["default"].createElement(CartSummary_styles.CartSummaryContainer, { role: "region" },
         React__default["default"].createElement(CartSummary_styles.CartPaymentContainer, null,
             cartSummary.title && (React__default["default"].createElement(CartSummary_styles.CartSummaryTitle, null,
                 React__default["default"].createElement(typography.H3, null, cartSummary.title),

package/build/cjs/components/src/components/FormElements/FormElement.styles.js

@@ -82,7 +82,7 @@ var ErrorLabel = styled__default["default"].label(templateObject_4 || (templateO
     var theme = _a.theme;
     return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s2;
 });
-var OptionInputWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"], ["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"])), function (_a) {
+var OptionInputWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"], ["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'not-allowed' : 'pointer');
 }, function (_a) {

package/build/cjs/components/src/components/ListItem/ListItem.js

@@ -22,7 +22,7 @@ exports.EListItemAlignment = void 0;
 })(exports.EListItemAlignment || (exports.EListItemAlignment = {}));
 var ListItem = function (_a) {
     var _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
-    return (React__default["default"].createElement(ListItem_styles.ListItemContainer, { tabIndex: 0, "aria-label": (item === null || item === void 0 ? void 0 : item.name) ? "Product ".concat(item.name) : undefined },
+    return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
         React__default["default"].createElement(ListItem_styles.ListLeft, { alignment: alignment },
             React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
                 React__default["default"].createElement(ListItem_styles.ListImage, { autoHeight: imageAutoHeight, src: item === null || item === void 0 ? void 0 : item.image, alt: item === null || item === void 0 ? void 0 : item.name, isSmall: isSmall, onError: function (e) {

package/build/cjs/components/src/components/RadioListItem/RadioListItem.js

@@ -10,9 +10,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function RadioListItem(_a) {
-    var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
-    return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: 0, role: 'checkbox', transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
-            if (event.key === 'Enter' && !isDisabled) {
+    var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, ariaLabel = _a.ariaLabel;
+    return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
+            if ((event.key === 'Enter' || event.key === ' ') && !isDisabled) {
+                event.preventDefault();
                 onClick(value);
             }
         } },

package/build/cjs/components/src/components/RadioListItem/RadioListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  border: 1px solid\n    ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n  &:hover {\n    ", ";\n  }\n  &:active {\n    ", ";\n  }\n"], ["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  border: 1px solid\n    ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n  &:hover {\n    ", ";\n  }\n  &:active {\n    ", ";\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2); }, function (props) { return (props.isDisabled ? 'cursor' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) {
+var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  width: 100%;\n  background: ", ";\n  border: 1px solid\n    ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n  &:hover {\n    ", ";\n  }\n  &:active {\n    ", ";\n  }\n"], ["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  width: 100%;\n  background: ", ";\n  border: 1px solid\n    ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n  &:hover {\n    ", ";\n  }\n  &:active {\n    ", ";\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2); }, function (props) { return (props.isDisabled ? 'cursor' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) {
     var _a, _b, _c, _d;
     return props.isDisabled
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest

package/build/es/components/src/components/CartSummary/CartSummary.js

@@ -48,7 +48,7 @@ function CartSummary(_a) {
     var summaryText = summaryParts.length > 0
         ? "".concat(summaryParts.join(', '), ". ").concat(totalLabel, " ").concat(formatPrice(cartSummary.totalAmount))
         : "".concat(totalLabel, " ").concat(formatPrice(cartSummary.totalAmount));
-    var fullSummary = cartSummary.totalDiscount > 0
+    cartSummary.totalDiscount > 0
         ? "".concat(summaryText, ". ").concat(saveLabel, " ").concat(formatPrice(cartSummary.totalDiscount))
         : summaryText;
     var ChargeLine = function (_a) {
@@ -73,7 +73,7 @@ function CartSummary(_a) {
                 charge.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_c = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _c === void 0 ? void 0 : _c.dark, "aria-label": "Original price ".concat(formatPrice(charge.cancelledAmount)) }, formatPrice(charge.cancelledAmount))),
                 React.createElement(BodyText, { "aria-label": "".concat(chargeName, " ").concat(formatPrice(charge.amount)) }, formatPrice(charge.amount)))));
     };
-    return (React.createElement(CartSummaryContainer, { role: "region", tabIndex: 0, "aria-label": cartSummary.title ? "".concat(cartSummary.title, ". ").concat(fullSummary) : "Cart Summary. ".concat(fullSummary) },
+    return (React.createElement(CartSummaryContainer, { role: "region" },
         React.createElement(CartPaymentContainer, null,
             cartSummary.title && (React.createElement(CartSummaryTitle, null,
                 React.createElement(H3, null, cartSummary.title),

package/build/es/components/src/components/FormElements/FormElement.styles.js

@@ -74,7 +74,7 @@ var ErrorLabel = styled.label(templateObject_4 || (templateObject_4 = __makeTemp
     var theme = _a.theme;
     return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s2;
 });
-var OptionInputWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"], ["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"])), function (_a) {
+var OptionInputWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"], ["\n  cursor: ", ";\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  padding: ", "px;\n  position: relative;\n\n  &:has(input:focus-visible) {\n    border-radius: ", "px;\n    box-shadow: ", ";\n  }\n\n  > p {\n    line-height: 1;\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'not-allowed' : 'pointer');
 }, function (_a) {

package/build/es/components/src/components/ListItem/ListItem.js

@@ -13,7 +13,7 @@ var EListItemAlignment;
 })(EListItemAlignment || (EListItemAlignment = {}));
 var ListItem = function (_a) {
     var _b = _a.alignment, alignment = _b === void 0 ? EListItemAlignment.CENTER : _b, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
-    return (React.createElement(ListItemContainer, { tabIndex: 0, "aria-label": (item === null || item === void 0 ? void 0 : item.name) ? "Product ".concat(item.name) : undefined },
+    return (React.createElement(ListItemContainer, null,
         React.createElement(ListLeft, { alignment: alignment },
             React.createElement(ListImageContainer, { isSmall: isSmall },
                 React.createElement(ListImage, { autoHeight: imageAutoHeight, src: item === null || item === void 0 ? void 0 : item.image, alt: item === null || item === void 0 ? void 0 : item.name, isSmall: isSmall, onError: function (e) {

package/build/es/components/src/components/RadioListItem/RadioListItem.js

@@ -2,9 +2,10 @@ import React from 'react';
 import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, LabelContentWrapper, StyledH3, RadioRightWrapper } from './RadioListItem.styles.js';
 
 function RadioListItem(_a) {
-    var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
-    return (React.createElement(BaseRadioListItemContainer, { tabIndex: 0, role: 'checkbox', transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
-            if (event.key === 'Enter' && !isDisabled) {
+    var onClick = _a.onClick, selected = _a.selected, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children, ariaLabel = _a.ariaLabel;
+    return (React.createElement(BaseRadioListItemContainer, { tabIndex: isDisabled ? -1 : 0, role: "radio", "aria-checked": selected, "aria-disabled": isDisabled, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-live": "polite", transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); }, onKeyDown: function (event) {
+            if ((event.key === 'Enter' || event.key === ' ') && !isDisabled) {
+                event.preventDefault();
                 onClick(value);
             }
         } },

package/build/es/components/src/components/RadioListItem/RadioListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RadioListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js

@@ -2,7 +2,7 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import { H3, BodyText } from '@citygross/typography';
 import styled from 'styled-components';
 
-var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  border: 1px solid\n    ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n  &:hover {\n    ", ";\n  }\n  &:active {\n    ", ";\n  }\n"], ["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  border: 1px solid\n    ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n  &:hover {\n    ", ";\n  }\n  &:active {\n    ", ";\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2); }, function (props) { return (props.isDisabled ? 'cursor' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) {
+var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  width: 100%;\n  background: ", ";\n  border: 1px solid\n    ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n  &:hover {\n    ", ";\n  }\n  &:active {\n    ", ";\n  }\n"], ["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  width: 100%;\n  background: ", ";\n  border: 1px solid\n    ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n  &:hover {\n    ", ";\n  }\n  &:active {\n    ", ";\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2); }, function (props) { return (props.isDisabled ? 'cursor' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) {
     var _a, _b, _c, _d;
     return props.isDisabled
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.14.1",
+  "version": "0.14.3",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -75,5 +75,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "9cd386e7e3379dd334507dc20128b9aa39c6ad0e"
+  "gitHead": "287719ceadb682952742e10dc6a70be2acb046ed"
 }