@citygross/components 0.16.10 → 0.16.12

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

@@ -43,11 +43,11 @@ import '../Flex/Flex.styles.js';
 import '../Form/Form.styles.js';
 import '../FormControl/FormControl.js';
 import '../FormElements/FormElement.types.js';
-import '../ScreenReader/ScreenReader.styles.js';
 import '../FormElements/FormElement.styles.js';
 import '../FormElements/Checkbox/Checkbox.styles.js';
 import '../FormElements/Input/Input.js';
 import '../FormElements/InputOld/InputOld.styles.js';
+import '../ScreenReader/ScreenReader.styles.js';
 import '../FormElements/Radio/Radio.styles.js';
 import '../FormElements/Select/Select.styles.js';
 import '../FormElements/Switch/Switch.styles.js';

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

@@ -1,18 +1,18 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { BodyText, TextTypes } from '@citygross/typography';
-import { moment, useWindowSize, capitalizeFirstLetter, formatLeadingZero } from '@citygross/utils';
+import { getDateInfo, useWindowSize, capitalizeFirstLetter, formatLeadingZero } from '@citygross/utils';
 import { DeliverySlotItemContainer, DeliverySlotContainer, DeliverySlotHeaderText, DeliverySlotBody } from './DeliverySlotItem.styles.js';
 
 function DeliverySlotItem(_a) {
     var date = _a.date, selected = _a.selected, children = _a.children, onSelect = _a.onSelect, icon = _a.icon;
-    var momentDate = moment(date);
+    var dateInfo = getDateInfo(date);
     var width = useWindowSize().width;
-    var _b = useState(momentDate.format('dddd').toLocaleLowerCase()), weekDay = _b[0], setWeekDay = _b[1];
-    var dayNumber = momentDate.format('D');
-    var month = momentDate.format('MMMM').toLocaleLowerCase();
+    var _b = useState(dateInfo.day.name.toLocaleLowerCase()), weekDay = _b[0], setWeekDay = _b[1];
+    var dayNumber = dateInfo.day.number;
+    var month = dateInfo.month.name.toLocaleLowerCase();
     useEffect(function () {
-        setWeekDay(momentDate.format('dddd').toLocaleLowerCase());
-    }, [width]);
+        setWeekDay(dateInfo.day.name.toLocaleLowerCase());
+    }, [dateInfo.day.name, width]);
     var slotRef = useRef(null);
     return (React.createElement(DeliverySlotItemContainer, { onClick: onSelect, onKeyDown: function (event) {
             if (event.key === 'Enter') {

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

@@ -1,17 +1,16 @@
 import React from 'react';
 import { H3, BodyText } from '@citygross/typography';
-import { moment } from '@citygross/utils';
+import { formatDateToLocale } from '@citygross/utils';
 import { DeliveryTimeBlock as DeliveryTimeBlock$1, DeliverOption } from './DeliveryTimeBlock.styles.js';
 
 function DeliveryTimeBlock(_a) {
-    var _b, _c;
-    var deliveryDate = _a.deliveryDate, deliveryFromTime = _a.deliveryFromTime, deliveryToTime = _a.deliveryToTime, icon = _a.icon, _d = _a.localTimeVar, localTimeVar = _d === void 0 ? 'kl' : _d, deliverOption = _a.deliverOption, children = _a.children;
+    var deliveryDate = _a.deliveryDate, deliveryFromTime = _a.deliveryFromTime, deliveryToTime = _a.deliveryToTime, icon = _a.icon, _b = _a.localTimeVar, localTimeVar = _b === void 0 ? 'kl' : _b, deliverOption = _a.deliverOption, children = _a.children;
     return (React.createElement(DeliveryTimeBlock$1, null,
         React.createElement(DeliverOption, null,
             icon && icon,
             deliverOption && React.createElement(H3, null, deliverOption)),
-        React.createElement(BodyText, null, (_c = (_b = moment(deliveryDate)) === null || _b === void 0 ? void 0 : _b.format('dddd D MMMM')) === null || _c === void 0 ? void 0 :
-            _c.toLocaleLowerCase(),
+        React.createElement(BodyText, null,
+            formatDateToLocale(deliveryDate, false, true),
             ' ',
             deliveryFromTime && deliveryToTime && (React.createElement("span", { style: { whiteSpace: 'nowrap' } }, "".concat(localTimeVar, " ").concat(deliveryFromTime, " - ").concat(deliveryToTime)))),
         children));

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

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

package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js

@@ -3,19 +3,18 @@ import React from 'react';
 import { Icons } from '@citygross/icons';
 import { BodyText } from '@citygross/typography';
 import { getColorAttributes } from '../../../helpers/form-element.js';
-import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
-import { OptionInputWrapper, HiddenInput } from '../FormElement.styles.js';
-import { CheckboxContainer, IconContainer } from './Checkbox.styles.js';
+import { OptionInputWrapper } from '../FormElement.styles.js';
+import { CheckboxInput, CheckboxContainer, IconContainer } from './Checkbox.styles.js';
 
 var Checkbox = function (_a) {
     var alignItems = _a.alignItems, checked = _a.checked, disabled = _a.disabled, hideLabel = _a.hideLabel, label = _a.label, props = __rest(_a, ["alignItems", "checked", "disabled", "hideLabel", "label"]);
     var _b = getColorAttributes(checked, disabled), iconColor = _b.iconColor, labelColor = _b.labelColor, attributes = __rest(_b, ["iconColor", "labelColor"]);
     return (React.createElement(OptionInputWrapper, { alignItems: alignItems, as: "label", disabled: disabled },
-        React.createElement(HiddenInput, __assign({ checked: checked, disabled: disabled, type: "checkbox" }, props)),
-        React.createElement(CheckboxContainer, { attributes: attributes, alignItems: alignItems },
+        React.createElement(CheckboxInput, __assign({ "aria-label": label, checked: checked, disabled: disabled, type: "checkbox" }, props)),
+        React.createElement(CheckboxContainer, { "aria-hidden": "true", attributes: attributes, alignItems: alignItems },
             React.createElement(IconContainer, null,
-                React.createElement(Icons.CheckMark, { color: iconColor, "aria-hidden": "true" }))),
-        hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(BodyText, { color: labelColor }, label))));
+                React.createElement(Icons.CheckMark, { color: iconColor }))),
+        !hideLabel && (React.createElement(BodyText, { "aria-hidden": "true", color: labelColor }, label))));
 };
 
 export { Checkbox };

package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js.map

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

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

@@ -30,7 +30,8 @@ var CheckboxContainer = styled.div(templateObject_2 || (templateObject_2 = __mak
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    --checkbox-hover-bg: ", ";\n\n    ", ":hover & {\n      background: var(--checkbox-hover-bg);\n    }\n  "], ["\n    --checkbox-hover-bg: ", ";\n\n    ", ":hover & {\n      background: var(--checkbox-hover-bg);\n    }\n  "])), (_b = attributes.hoverBackgroundColor) !== null && _b !== void 0 ? _b : attributes.backgroundColor, OptionInputWrapper);
 });
 var IconContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+var CheckboxInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: inherit;\n"], ["\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: inherit;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
-export { CheckboxContainer, IconContainer };
+export { CheckboxContainer, CheckboxInput, IconContainer };
 //# sourceMappingURL=Checkbox.styles.js.map

package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map

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