@citygross/components 0.16.27 → 0.17.0

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextTypes } from '@citygross/typography';
+export declare type TAvailabilityLabelProps = {
+    label: string;
+    textSize?: TextTypes.TextSize;
+};
+export declare const AvailabilityLabel: React.FunctionComponent<TAvailabilityLabelProps>;

package/build/@types/components/AvailabilityLabel/AvailabilityLabel.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Root: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Dot: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TextTypes } from '@citygross/typography';
 export declare type TItem = {
     amount?: number;
     image?: string;
@@ -8,6 +9,10 @@ export declare type TItem = {
     };
     secondaryDescription?: React.ReactNode;
     subtitle?: string;
+    status?: {
+        label: string;
+        textSize?: TextTypes.TextSize;
+    };
 };
 export declare enum EListItemAlignment {
     CENTER = "center",

package/build/@types/index.d.ts

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

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

@@ -9,6 +9,7 @@ require('@citygross/design-tokens');
 require('@citygross/icons');
 require('../Accordion/Accordion.styles.js');
 require('../AlertBox/AlertBox.js');
+require('../AvailabilityLabel/AvailabilityLabel.styles.js');
 require('../BackButton/BackButton.styles.js');
 require('../BackgroundImage/BackgroundImage.styles.js');
 require('../Badge/Badge.styles.js');

package/build/cjs/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/cjs/components/src/components/AvailabilityLabel/AvailabilityLabel.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var typography = require('@citygross/typography');
+var AvailabilityLabel_styles = require('./AvailabilityLabel.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var AvailabilityLabel = function (_a) {
+    var label = _a.label, _b = _a.textSize, textSize = _b === void 0 ? typography.TextTypes.TextSize.EXTRASMALL : _b;
+    return (React__default["default"].createElement(AvailabilityLabel_styles.Root, null,
+        React__default["default"].createElement(AvailabilityLabel_styles.Dot, null),
+        React__default["default"].createElement(typography.BodyText, { size: textSize }, label)));
+};
+
+exports.AvailabilityLabel = AvailabilityLabel;
+//# sourceMappingURL=AvailabilityLabel.js.map

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

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

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var Root = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__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__default["default"].span(templateObject_2 || (templateObject_2 = _tslib.__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;
+
+exports.Dot = Dot;
+exports.Root = Root;
+//# sourceMappingURL=AvailabilityLabel.styles.js.map

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

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

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

@@ -7,6 +7,7 @@ var Skeleton = require('react-loading-skeleton');
 var Fieldset = require('../Fieldset/Fieldset.js');
 var Checkbox = require('../FormElements/Checkbox/Checkbox.js');
 var PriceStripe = require('../PriceStripe/PriceStripe.js');
+var AvailabilityLabel = require('../AvailabilityLabel/AvailabilityLabel.js');
 var ProductHeader = require('../ProductHeader/ProductHeader.js');
 var ListItem_styles = require('./ListItem.styles.js');
 var PriceTag_types = require('../PriceTag/PriceTag.types.js');
@@ -22,7 +23,8 @@ exports.EListItemAlignment = void 0;
     EListItemAlignment["TOP"] = "flex-start";
 })(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, 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 ? exports.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__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 },
@@ -43,6 +45,7 @@ var ListItem = function (_a) {
                     checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(Skeleton__default["default"], { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React__default["default"].createElement(React.Fragment, null,
                     showPriceStripe && (React__default["default"].createElement(PriceStripe.PriceStripe, { size: PriceTag_types.EPriceSize.SMALL, variant: PriceTag_types.EPriceVariant.PRIO })),
                     React__default["default"].createElement(ProductHeader.ProductHeader, { location: ProductHeader.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__default["default"].createElement(AvailabilityLabel.AvailabilityLabel, { label: item.status.label, textSize: item.status.textSize })),
                     checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(Fieldset.Fieldset, null,
                         checkboxLegendLabel && (React__default["default"].createElement(ListItem_styles.VisuallyHiddenLegend, null, checkboxLegendLabel)),
                         React__default["default"].createElement(ListItem_styles.CheckboxContainer, null, checkboxes.map(function (checkbox, index) {

package/build/cjs/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/cjs/components/src/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var AddressBlock = require('./components/AddressBlock/AddressBlock.js');
 var Accordion = require('./components/Accordion/Accordion.js');
 var AlertBox = require('./components/AlertBox/AlertBox.js');
+var AvailabilityLabel = require('./components/AvailabilityLabel/AvailabilityLabel.js');
 var BackButton = require('./components/BackButton/BackButton.js');
 var BackgroundImage = require('./components/BackgroundImage/BackgroundImage.js');
 var Badge = require('./components/Badge/Badge.js');
@@ -115,6 +116,7 @@ Object.defineProperty(exports, 'EAlertBoxVariant', {
 	enumerable: true,
 	get: function () { return AlertBox.EAlertBoxVariant; }
 });
+exports.AvailabilityLabel = AvailabilityLabel.AvailabilityLabel;
 exports.BackButton = BackButton.BackButton;
 exports.BackgroundImage = BackgroundImage.BackgroundImage;
 exports.Badge = Badge.Badge;

package/build/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.16.27",
+  "version": "0.17.0",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "7819741544630c9734f1400533b9c2b58a89f274"
+  "gitHead": "b5b914cabeadacbc80b22e4a49250e918ccb2a73"
 }