@citygross/components 0.16.27 → 0.17.1

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

@@ -5,6 +5,7 @@ import '@citygross/design-tokens';
 import '@citygross/icons';
 import '../Accordion/Accordion.styles.js';
 import '../AlertBox/AlertBox.js';
+import '../AvailabilityLabel/AvailabilityLabel.styles.js';
 import '../BackButton/BackButton.styles.js';
 import '../BackgroundImage/BackgroundImage.styles.js';
 import '../Badge/Badge.styles.js';

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

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TextTypes, BodyText } from '@citygross/typography';
+import { Root, Dot } from './AvailabilityLabel.styles.js';
+
+var AvailabilityLabel = function (_a) {
+    var label = _a.label, _b = _a.textSize, textSize = _b === void 0 ? TextTypes.TextSize.EXTRASMALL : _b;
+    return (React.createElement(Root, null,
+        React.createElement(Dot, null),
+        React.createElement(BodyText, { size: textSize }, label)));
+};
+
+export { AvailabilityLabel };
+//# sourceMappingURL=AvailabilityLabel.js.map

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

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

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

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  margin-top: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var Dot = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: ", ";\n"], ["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs1; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs1; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellow; });
+var templateObject_1, templateObject_2;
+
+export { Dot, Root };
+//# sourceMappingURL=AvailabilityLabel.styles.js.map

package/build/es/components/src/components/AvailabilityLabel/AvailabilityLabel.styles.js.map

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

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

@@ -3,6 +3,7 @@ import Skeleton from 'react-loading-skeleton';
 import { Fieldset } from '../Fieldset/Fieldset.js';
 import { Checkbox } from '../FormElements/Checkbox/Checkbox.js';
 import { PriceStripe } from '../PriceStripe/PriceStripe.js';
+import { AvailabilityLabel } from '../AvailabilityLabel/AvailabilityLabel.js';
 import { ProductHeader, EProductHeader } from '../ProductHeader/ProductHeader.js';
 import { ListItemContainer, ListLeft, ListImageContainer, ListImage, ItemInformationContainer, VisuallyHiddenLegend, CheckboxContainer, ListRight } from './ListItem.styles.js';
 import { EPriceSize, EPriceVariant } from '../PriceTag/PriceTag.types.js';
@@ -13,7 +14,8 @@ var EListItemAlignment;
     EListItemAlignment["TOP"] = "flex-start";
 })(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, checkboxLegendLabel = _a.checkboxLegendLabel, 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;
+    var _b;
+    var _c = _a.alignment, alignment = _c === void 0 ? EListItemAlignment.CENTER : _c, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, checkboxLegendLabel = _a.checkboxLegendLabel, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.showPriceStripe, showPriceStripe = _e === void 0 ? false : _e, smallSkeleton = _a.smallSkeleton;
     return (React.createElement(ListItemContainer, null,
         React.createElement(ListLeft, { alignment: alignment },
             React.createElement(ListImageContainer, { isSmall: isSmall },
@@ -34,6 +36,7 @@ var ListItem = function (_a) {
                     checkboxes && checkboxes.length > 0 && (React.createElement(Skeleton, { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React.createElement(Fragment, null,
                     showPriceStripe && (React.createElement(PriceStripe, { size: EPriceSize.SMALL, variant: EPriceVariant.PRIO })),
                     React.createElement(ProductHeader, { location: EProductHeader.LIST_ITEM, subtitle: item === null || item === void 0 ? void 0 : item.subtitle, title: item === null || item === void 0 ? void 0 : item.name }),
+                    ((_b = item === null || item === void 0 ? void 0 : item.status) === null || _b === void 0 ? void 0 : _b.label) && (React.createElement(AvailabilityLabel, { label: item.status.label, textSize: item.status.textSize })),
                     checkboxes && checkboxes.length > 0 && (React.createElement(Fieldset, null,
                         checkboxLegendLabel && (React.createElement(VisuallyHiddenLegend, null, checkboxLegendLabel)),
                         React.createElement(CheckboxContainer, null, checkboxes.map(function (checkbox, index) {

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

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

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

@@ -1,6 +1,7 @@
 export { AddressBlock } from './components/AddressBlock/AddressBlock.js';
 export { Accordion } from './components/Accordion/Accordion.js';
 export { AlertBox, EAlertBoxVariant } from './components/AlertBox/AlertBox.js';
+export { AvailabilityLabel } from './components/AvailabilityLabel/AvailabilityLabel.js';
 export { BackButton } from './components/BackButton/BackButton.js';
 export { BackgroundImage } from './components/BackgroundImage/BackgroundImage.js';
 export { Badge } from './components/Badge/Badge.js';

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

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