@citygross/components 0.16.4 → 0.16.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/build/@types/components/FormElements/Checkbox/Checkbox.styles.d.ts +2 -1
  2. package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js +1 -1
  3. package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js +5 -1
  4. package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map +1 -1
  5. package/build/cjs/components/src/components/ListItem/ListItem.js +1 -28
  6. package/build/cjs/components/src/components/ListItem/ListItem.js.map +1 -1
  7. package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js +1 -1
  8. package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js +5 -1
  9. package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map +1 -1
  10. package/build/es/components/src/components/ListItem/ListItem.js +1 -28
  11. package/build/es/components/src/components/ListItem/ListItem.js.map +1 -1
  12. package/package.json +2 -2
package/build/@types/components/FormElements/Checkbox/Checkbox.styles.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { TCheckbox } from './Checkbox';
1
2
  import type { TOptionInputContainer } from '../FormElement.types';
2
- export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TOptionInputContainer, never>;
3
+ export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TOptionInputContainer & Pick<TCheckbox, "alignItems">, never>;
3
4
  export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.js CHANGED
@@ -20,7 +20,7 @@ var Checkbox = function (_a) {
20
20
  var _b = formElement.getColorAttributes(checked, disabled), iconColor = _b.iconColor, labelColor = _b.labelColor, attributes = _tslib.__rest(_b, ["iconColor", "labelColor"]);
21
21
  return (React__default["default"].createElement(FormElement_styles.OptionInputWrapper, { alignItems: alignItems, as: "label", disabled: disabled },
22
22
  React__default["default"].createElement(FormElement_styles.HiddenInput, _tslib.__assign({ checked: checked, disabled: disabled, type: "checkbox" }, props)),
23
- React__default["default"].createElement(Checkbox_styles.CheckboxContainer, { attributes: attributes },
23
+ React__default["default"].createElement(Checkbox_styles.CheckboxContainer, { attributes: attributes, alignItems: alignItems },
24
24
  React__default["default"].createElement(Checkbox_styles.IconContainer, null,
25
25
  React__default["default"].createElement(icons.Icons.CheckMark, { color: iconColor, "aria-hidden": "true" }))),
26
26
  hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(typography.BodyText, { color: labelColor }, label))));
package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js CHANGED
@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
 
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
- var CheckboxContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"], ["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"])), function (_a) {
13
+ var CheckboxContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n margin-top: ", ";\n\n ", "\n"], ["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n margin-top: ", ";\n\n ", "\n"])), function (_a) {
14
14
  var attributes = _a.attributes;
15
15
  return attributes.backgroundColor;
16
16
  }, function (_a) {
@@ -28,6 +28,10 @@ var CheckboxContainer = styled__default["default"].div(templateObject_2 || (temp
28
28
  var _b;
29
29
  var theme = _a.theme;
30
30
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm1;
31
+ }, function (_a) {
32
+ var _b;
33
+ var theme = _a.theme, alignItems = _a.alignItems;
34
+ return alignItems === 'flex-start' ? "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs, "px") : 0;
31
35
  }, function (_a) {
32
36
  var _b;
33
37
  var attributes = _a.attributes;
package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/ListItem/ListItem.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var Skeleton = require('react-loading-skeleton');
7
- var utils = require('@citygross/utils');
8
7
  var Fieldset = require('../Fieldset/Fieldset.js');
9
8
  var Checkbox = require('../FormElements/Checkbox/Checkbox.js');
10
9
  var PriceStripe = require('../PriceStripe/PriceStripe.js');
@@ -22,31 +21,8 @@ exports.EListItemAlignment = void 0;
22
21
  EListItemAlignment["CENTER"] = "center";
23
22
  EListItemAlignment["TOP"] = "flex-start";
24
23
  })(exports.EListItemAlignment || (exports.EListItemAlignment = {}));
25
- function getQuantityValue(quantity) {
26
- if (quantity === undefined)
27
- return 1;
28
- return typeof quantity === 'object' &&
29
- quantity !== null &&
30
- 'value' in quantity
31
- ? quantity.value
32
- : Number(quantity);
33
- }
34
- function buildCheckboxContext(item) {
35
- var parts = [item === null || item === void 0 ? void 0 : item.name, item === null || item === void 0 ? void 0 : item.subtitle].filter(Boolean);
36
- if (parts.length === 0)
37
- return '';
38
- var productPart = "i varan ".concat(parts.join(', '));
39
- var amount = item === null || item === void 0 ? void 0 : item.amount;
40
- var pricePart = amount !== undefined ? " till ".concat(utils.formatPrice(amount)) : '';
41
- var quantity = getQuantityValue(item === null || item === void 0 ? void 0 : item.quantity);
42
- var quantityPart = quantity === 1 ? ', en styck' : ", ".concat(quantity, " styck");
43
- return "".concat(productPart).concat(pricePart).concat(quantityPart);
44
- }
45
24
  var ListItem = function (_a) {
46
25
  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;
47
- var checkboxContext = checkboxes && checkboxes.length > 0 && ((item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.subtitle))
48
- ? buildCheckboxContext(item)
49
- : '';
50
26
  return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
51
27
  React__default["default"].createElement(ListItem_styles.ListLeft, { alignment: alignment },
52
28
  React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
@@ -70,10 +46,7 @@ var ListItem = function (_a) {
70
46
  checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(Fieldset.Fieldset, null,
71
47
  checkboxLegendLabel && (React__default["default"].createElement(ListItem_styles.VisuallyHiddenLegend, null, checkboxLegendLabel)),
72
48
  React__default["default"].createElement(ListItem_styles.CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
73
- var ariaLabel = checkboxContext
74
- ? "".concat(checkbox.label, ". ").concat(checkboxContext)
75
- : checkbox.label;
76
- return (React__default["default"].createElement(Checkbox.Checkbox, { key: index, checked: checkbox.checked, disabled: checkbox.disabled, label: checkbox.label, name: checkbox.name, "aria-label": ariaLabel, onChange: function (e) {
49
+ return (React__default["default"].createElement(Checkbox.Checkbox, { key: index, checked: checkbox.checked, disabled: checkbox.disabled, label: checkbox.label, name: checkbox.name, onChange: function (e) {
77
50
  if (checkbox.onChange) {
78
51
  checkbox.onChange(e.target.checked);
79
52
  }
package/build/cjs/components/src/components/ListItem/ListItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/FormElements/Checkbox/Checkbox.js CHANGED
@@ -12,7 +12,7 @@ var Checkbox = function (_a) {
12
12
  var _b = getColorAttributes(checked, disabled), iconColor = _b.iconColor, labelColor = _b.labelColor, attributes = __rest(_b, ["iconColor", "labelColor"]);
13
13
  return (React.createElement(OptionInputWrapper, { alignItems: alignItems, as: "label", disabled: disabled },
14
14
  React.createElement(HiddenInput, __assign({ checked: checked, disabled: disabled, type: "checkbox" }, props)),
15
- React.createElement(CheckboxContainer, { attributes: attributes },
15
+ React.createElement(CheckboxContainer, { attributes: attributes, alignItems: alignItems },
16
16
  React.createElement(IconContainer, null,
17
17
  React.createElement(Icons.CheckMark, { color: iconColor, "aria-hidden": "true" }))),
18
18
  hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(BodyText, { color: labelColor }, label))));
package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js CHANGED
@@ -2,7 +2,7 @@ import { __makeTemplateObject } from '../../../../../_virtual/_tslib.js';
2
2
  import styled, { css } from 'styled-components';
3
3
  import { OptionInputWrapper } from '../FormElement.styles.js';
4
4
 
5
- var CheckboxContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"], ["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"])), function (_a) {
5
+ var CheckboxContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n margin-top: ", ";\n\n ", "\n"], ["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n margin-top: ", ";\n\n ", "\n"])), function (_a) {
6
6
  var attributes = _a.attributes;
7
7
  return attributes.backgroundColor;
8
8
  }, function (_a) {
@@ -20,6 +20,10 @@ var CheckboxContainer = styled.div(templateObject_2 || (templateObject_2 = __mak
20
20
  var _b;
21
21
  var theme = _a.theme;
22
22
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm1;
23
+ }, function (_a) {
24
+ var _b;
25
+ var theme = _a.theme, alignItems = _a.alignItems;
26
+ return alignItems === 'flex-start' ? "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs, "px") : 0;
23
27
  }, function (_a) {
24
28
  var _b;
25
29
  var attributes = _a.attributes;
package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/ListItem/ListItem.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { Fragment } from 'react';
2
2
  import Skeleton from 'react-loading-skeleton';
3
- import { formatPrice } from '@citygross/utils';
4
3
  import { Fieldset } from '../Fieldset/Fieldset.js';
5
4
  import { Checkbox } from '../FormElements/Checkbox/Checkbox.js';
6
5
  import { PriceStripe } from '../PriceStripe/PriceStripe.js';
@@ -13,31 +12,8 @@ var EListItemAlignment;
13
12
  EListItemAlignment["CENTER"] = "center";
14
13
  EListItemAlignment["TOP"] = "flex-start";
15
14
  })(EListItemAlignment || (EListItemAlignment = {}));
16
- function getQuantityValue(quantity) {
17
- if (quantity === undefined)
18
- return 1;
19
- return typeof quantity === 'object' &&
20
- quantity !== null &&
21
- 'value' in quantity
22
- ? quantity.value
23
- : Number(quantity);
24
- }
25
- function buildCheckboxContext(item) {
26
- var parts = [item === null || item === void 0 ? void 0 : item.name, item === null || item === void 0 ? void 0 : item.subtitle].filter(Boolean);
27
- if (parts.length === 0)
28
- return '';
29
- var productPart = "i varan ".concat(parts.join(', '));
30
- var amount = item === null || item === void 0 ? void 0 : item.amount;
31
- var pricePart = amount !== undefined ? " till ".concat(formatPrice(amount)) : '';
32
- var quantity = getQuantityValue(item === null || item === void 0 ? void 0 : item.quantity);
33
- var quantityPart = quantity === 1 ? ', en styck' : ", ".concat(quantity, " styck");
34
- return "".concat(productPart).concat(pricePart).concat(quantityPart);
35
- }
36
15
  var ListItem = function (_a) {
37
16
  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;
38
- var checkboxContext = checkboxes && checkboxes.length > 0 && ((item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.subtitle))
39
- ? buildCheckboxContext(item)
40
- : '';
41
17
  return (React.createElement(ListItemContainer, null,
42
18
  React.createElement(ListLeft, { alignment: alignment },
43
19
  React.createElement(ListImageContainer, { isSmall: isSmall },
@@ -61,10 +37,7 @@ var ListItem = function (_a) {
61
37
  checkboxes && checkboxes.length > 0 && (React.createElement(Fieldset, null,
62
38
  checkboxLegendLabel && (React.createElement(VisuallyHiddenLegend, null, checkboxLegendLabel)),
63
39
  React.createElement(CheckboxContainer, null, checkboxes.map(function (checkbox, index) {
64
- var ariaLabel = checkboxContext
65
- ? "".concat(checkbox.label, ". ").concat(checkboxContext)
66
- : checkbox.label;
67
- return (React.createElement(Checkbox, { key: index, checked: checkbox.checked, disabled: checkbox.disabled, label: checkbox.label, name: checkbox.name, "aria-label": ariaLabel, onChange: function (e) {
40
+ return (React.createElement(Checkbox, { key: index, checked: checkbox.checked, disabled: checkbox.disabled, label: checkbox.label, name: checkbox.name, onChange: function (e) {
68
41
  if (checkbox.onChange) {
69
42
  checkbox.onChange(e.target.checked);
70
43
  }
package/build/es/components/src/components/ListItem/ListItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ListItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.16.4",
3
+ "version": "0.16.5",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -75,5 +75,5 @@
75
75
  "react-slick": "^0.30.1",
76
76
  "slick-carousel": "^1.8.1"
77
77
  },
78
- "gitHead": "3fa2d3e0f7e56056c83334b697b287c1829ea0ad"
78
+ "gitHead": "9fedcf82999263bfd1b59ef7ee08a0b011260efb"
79
79
  }