@citygross/components 0.8.136 → 0.8.138

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 (14) hide show
  1. package/build/@types/components/FormElements/Input/Input.d.ts +5 -2
  2. package/build/@types/components/FormElements/Input/Input.styles.d.ts +1 -0
  3. package/build/@types/components/FormElements/Select/Select.d.ts +1 -0
  4. package/build/cjs/components/src/components/FormElements/Input/Input.js +9 -4
  5. package/build/cjs/components/src/components/FormElements/Input/Input.js.map +1 -1
  6. package/build/cjs/components/src/components/FormElements/Input/Input.styles.js +8 -2
  7. package/build/cjs/components/src/components/FormElements/Input/Input.styles.js.map +1 -1
  8. package/build/cjs/components/src/components/FormElements/Select/Select.js +2 -2
  9. package/build/es/components/src/components/FormElements/Input/Input.js +10 -5
  10. package/build/es/components/src/components/FormElements/Input/Input.js.map +1 -1
  11. package/build/es/components/src/components/FormElements/Input/Input.styles.js +8 -3
  12. package/build/es/components/src/components/FormElements/Input/Input.styles.js.map +1 -1
  13. package/build/es/components/src/components/FormElements/Select/Select.js +2 -2
  14. package/package.json +2 -2
package/build/@types/components/FormElements/Input/Input.d.ts CHANGED
@@ -1,4 +1,7 @@
1
1
  import React from 'react';
2
2
  import { TFormElement } from '../FormElement.types';
3
- export declare type TInput = TFormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
4
- export declare const Input: ({ error, errorLabel, label, size, ...props }: TInput) => JSX.Element;
3
+ export declare type TInput = {
4
+ label: string;
5
+ unit?: string;
6
+ } & TFormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
7
+ export declare const Input: ({ error, errorLabel, label, size, unit, ...props }: TInput) => JSX.Element;
package/build/@types/components/FormElements/Input/Input.styles.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export declare const InputContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
1
2
  export declare const InputElement: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
2
3
  sizeAttributes: Omit<import("../FormElement.types").TFormElementSizeAttributes, "iconSize">;
3
4
  } & Pick<import("../FormElement.types").TFormElement, "error">, never>;
package/build/@types/components/FormElements/Select/Select.d.ts CHANGED
@@ -3,5 +3,6 @@ import { TFormElement } from '../FormElement.types';
3
3
  export declare type TSelect = {
4
4
  children?: React.ReactNode;
5
5
  isOpen?: boolean;
6
+ label: string;
6
7
  } & TFormElement & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>;
7
8
  export declare const Select: ({ children, error, errorLabel, isOpen, label, size, ...props }: TSelect) => JSX.Element;
package/build/cjs/components/src/components/FormElements/Input/Input.js CHANGED
@@ -8,21 +8,26 @@ var formElement = require('../../../helpers/form-element.js');
8
8
  var FormElement_styles = require('../FormElement.styles.js');
9
9
  var Input_styles = require('./Input.styles.js');
10
10
  var FormElement_types = require('../FormElement.types.js');
11
+ var typography = require('@citygross/typography');
12
+ var designTokens = require('@citygross/design-tokens');
11
13
 
12
14
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
15
 
14
16
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
17
 
16
18
  var Input = function (_a) {
17
- var error = _a.error, errorLabel = _a.errorLabel, label = _a.label, _b = _a.size, size = _b === void 0 ? FormElement_types.EFormElementSize.large : _b, props = _tslib.__rest(_a, ["error", "errorLabel", "label", "size"]);
19
+ var _b;
20
+ var error = _a.error, errorLabel = _a.errorLabel, label = _a.label, _c = _a.size, size = _c === void 0 ? FormElement_types.EFormElementSize.large : _c, unit = _a.unit, props = _tslib.__rest(_a, ["error", "errorLabel", "label", "size", "unit"]);
18
21
  var id = props.id, required = props.required;
19
22
  var sizeAttributes = formElement.getSizeAttributes(size);
20
23
  var errorId = "".concat(id, "-error");
21
24
  return (React__default["default"].createElement(FormElement_styles.Wrapper, null,
22
- label && (React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id },
25
+ React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id },
23
26
  label,
24
- required ? ' *' : '')),
25
- React__default["default"].createElement(Input_styles.InputElement, _tslib.__assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, sizeAttributes: sizeAttributes }, props)),
27
+ required ? ' *' : ''),
28
+ React__default["default"].createElement(Input_styles.InputContainer, null,
29
+ React__default["default"].createElement(Input_styles.InputElement, _tslib.__assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, sizeAttributes: sizeAttributes }, props)),
30
+ unit && React__default["default"].createElement(typography.BodyText, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
26
31
  error && errorLabel && (React__default["default"].createElement(FormElement_styles.ErrorLabel, { id: errorId }, errorLabel))));
27
32
  };
28
33
 
package/build/cjs/components/src/components/FormElements/Input/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/FormElements/Input/Input.styles.js CHANGED
@@ -10,8 +10,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
 
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
- var InputElement = styled__default["default"].input(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), FormElement_styles.sharedFormElementStyles);
14
- var templateObject_1;
13
+ var InputContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (_a) {
14
+ var _b;
15
+ var theme = _a.theme;
16
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
17
+ });
18
+ var InputElement = styled__default["default"].input(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), FormElement_styles.sharedFormElementStyles);
19
+ var templateObject_1, templateObject_2;
15
20
 
21
+ exports.InputContainer = InputContainer;
16
22
  exports.InputElement = InputElement;
17
23
  //# sourceMappingURL=Input.styles.js.map
package/build/cjs/components/src/components/FormElements/Input/Input.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/FormElements/Select/Select.js CHANGED
@@ -20,9 +20,9 @@ var Select = function (_a) {
20
20
  var _c = formElement.getSizeAttributes(size), iconSize = _c.iconSize, restSizeAttributes = _tslib.__rest(_c, ["iconSize"]);
21
21
  var errorId = "".concat(id, "-error");
22
22
  return (React__default["default"].createElement(FormElement_styles.Wrapper, null,
23
- label && (React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id },
23
+ React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id },
24
24
  label,
25
- required ? ' *' : '')),
25
+ required ? ' *' : ''),
26
26
  React__default["default"].createElement(Select_styles.SelectContainer, null,
27
27
  React__default["default"].createElement(Select_styles.SelectElement, _tslib.__assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, sizeAttributes: restSizeAttributes }, props), children),
28
28
  React__default["default"].createElement(Select_styles.SelectIcon, null, isOpen ? (React__default["default"].createElement(icons.Icons.ChevronUp, { height: iconSize, width: iconSize })) : (React__default["default"].createElement(icons.Icons.ChevronDown, { height: iconSize, width: iconSize })))),
package/build/es/components/src/components/FormElements/Input/Input.js CHANGED
@@ -2,19 +2,24 @@ import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
2
2
  import React from 'react';
3
3
  import { getSizeAttributes } from '../../../helpers/form-element.js';
4
4
  import { Wrapper, Label, ErrorLabel } from '../FormElement.styles.js';
5
- import { InputElement } from './Input.styles.js';
5
+ import { InputContainer, InputElement } from './Input.styles.js';
6
6
  import { EFormElementSize } from '../FormElement.types.js';
7
+ import { BodyText } from '@citygross/typography';
8
+ import { theme } from '@citygross/design-tokens';
7
9
 
8
10
  var Input = function (_a) {
9
- var error = _a.error, errorLabel = _a.errorLabel, label = _a.label, _b = _a.size, size = _b === void 0 ? EFormElementSize.large : _b, props = __rest(_a, ["error", "errorLabel", "label", "size"]);
11
+ var _b;
12
+ var error = _a.error, errorLabel = _a.errorLabel, label = _a.label, _c = _a.size, size = _c === void 0 ? EFormElementSize.large : _c, unit = _a.unit, props = __rest(_a, ["error", "errorLabel", "label", "size", "unit"]);
10
13
  var id = props.id, required = props.required;
11
14
  var sizeAttributes = getSizeAttributes(size);
12
15
  var errorId = "".concat(id, "-error");
13
16
  return (React.createElement(Wrapper, null,
14
- label && (React.createElement(Label, { htmlFor: id },
17
+ React.createElement(Label, { htmlFor: id },
15
18
  label,
16
- required ? ' *' : '')),
17
- React.createElement(InputElement, __assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, sizeAttributes: sizeAttributes }, props)),
19
+ required ? ' *' : ''),
20
+ React.createElement(InputContainer, null,
21
+ React.createElement(InputElement, __assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, sizeAttributes: sizeAttributes }, props)),
22
+ unit && React.createElement(BodyText, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
18
23
  error && errorLabel && (React.createElement(ErrorLabel, { id: errorId }, errorLabel))));
19
24
  };
20
25
 
package/build/es/components/src/components/FormElements/Input/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/FormElements/Input/Input.styles.js CHANGED
@@ -2,8 +2,13 @@ import { __makeTemplateObject } from '../../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
  import { sharedFormElementStyles } from '../FormElement.styles.js';
4
4
 
5
- var InputElement = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), sharedFormElementStyles);
6
- var templateObject_1;
5
+ var InputContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (_a) {
6
+ var _b;
7
+ var theme = _a.theme;
8
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
9
+ });
10
+ var InputElement = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), sharedFormElementStyles);
11
+ var templateObject_1, templateObject_2;
7
12
 
8
- export { InputElement };
13
+ export { InputContainer, InputElement };
9
14
  //# sourceMappingURL=Input.styles.js.map
package/build/es/components/src/components/FormElements/Input/Input.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
package/build/es/components/src/components/FormElements/Select/Select.js CHANGED
@@ -12,9 +12,9 @@ var Select = function (_a) {
12
12
  var _c = getSizeAttributes(size), iconSize = _c.iconSize, restSizeAttributes = __rest(_c, ["iconSize"]);
13
13
  var errorId = "".concat(id, "-error");
14
14
  return (React.createElement(Wrapper, null,
15
- label && (React.createElement(Label, { htmlFor: id },
15
+ React.createElement(Label, { htmlFor: id },
16
16
  label,
17
- required ? ' *' : '')),
17
+ required ? ' *' : ''),
18
18
  React.createElement(SelectContainer, null,
19
19
  React.createElement(SelectElement, __assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, sizeAttributes: restSizeAttributes }, props), children),
20
20
  React.createElement(SelectIcon, null, isOpen ? (React.createElement(Icons.ChevronUp, { height: iconSize, width: iconSize })) : (React.createElement(Icons.ChevronDown, { height: iconSize, width: iconSize })))),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.8.136",
3
+ "version": "0.8.138",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
76
76
  "react-slick": "^0.30.1",
77
77
  "slick-carousel": "^1.8.1"
78
78
  },
79
- "gitHead": "07063acf5237db61898917c45d4b61f35917ab9d"
79
+ "gitHead": "abdfdbd61beb6dc3133e9cc155955dd2ac8322c3"
80
80
  }