@citygross/components 0.8.150 → 0.8.151

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/Input/Input.d.ts +3 -3
  2. package/build/cjs/components/src/components/FormElements/FormElement.styles.js +2 -2
  3. package/build/cjs/components/src/components/FormElements/Input/Input.js +8 -13
  4. package/build/cjs/components/src/components/FormElements/Input/Input.js.map +1 -1
  5. package/build/cjs/components/src/components/FormElements/Select/Select.styles.js +5 -1
  6. package/build/cjs/components/src/components/FormElements/Select/Select.styles.js.map +1 -1
  7. package/build/es/components/src/components/FormElements/FormElement.styles.js +2 -2
  8. package/build/es/components/src/components/FormElements/Input/Input.js +8 -13
  9. package/build/es/components/src/components/FormElements/Input/Input.js.map +1 -1
  10. package/build/es/components/src/components/FormElements/Select/Select.styles.js +5 -1
  11. package/build/es/components/src/components/FormElements/Select/Select.styles.js.map +1 -1
  12. package/package.json +2 -2
package/build/@types/components/FormElements/Input/Input.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import React from 'react';
2
2
  import { TFormElement } from '../FormElement.types';
3
3
  export declare type TInput = {
4
- clearFunction?: () => void;
4
+ elementLeft?: React.ReactElement;
5
+ elementRight?: React.ReactElement;
5
6
  hideLabel?: boolean;
6
- icon?: React.ReactElement;
7
7
  label: string;
8
8
  paddingLeft?: number;
9
9
  unit?: string;
10
10
  } & TFormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
11
- export declare const Input: ({ clearFunction, hideLabel, icon, error, errorLabel, label, paddingLeft, size, unit, ...props }: TInput) => JSX.Element;
11
+ export declare const Input: ({ elementLeft, elementRight, hideLabel, error, errorLabel, label, paddingLeft, size, unit, ...props }: TInput) => JSX.Element;
package/build/cjs/components/src/components/FormElements/FormElement.styles.js CHANGED
@@ -31,7 +31,7 @@ var Label = styled__default["default"].label(templateObject_2 || (templateObject
31
31
  var theme = _a.theme;
32
32
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
33
33
  });
34
- var sharedFormElementStyles = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"], ["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"])), function (_a) {
34
+ var sharedFormElementStyles = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"], ["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"])), function (_a) {
35
35
  var _b, _c;
36
36
  var error = _a.error, theme = _a.theme;
37
37
  return error ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.placeholder;
@@ -67,7 +67,7 @@ var sharedFormElementStyles = styled.css(templateObject_3 || (templateObject_3 =
67
67
  }, function (_a) {
68
68
  var _b;
69
69
  var theme = _a.theme;
70
- return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
70
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
71
71
  }, function (_a) {
72
72
  var _b;
73
73
  var theme = _a.theme;
package/build/cjs/components/src/components/FormElements/Input/Input.js CHANGED
@@ -4,24 +4,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _tslib = require('../../../../../_virtual/_tslib.js');
6
6
  var React = require('react');
7
+ var designTokens = require('@citygross/design-tokens');
8
+ var typography = require('@citygross/typography');
7
9
  var formElement = require('../../../helpers/form-element.js');
10
+ var ScreenReader = require('../../ScreenReader/ScreenReader.js');
8
11
  var FormElement_styles = require('../FormElement.styles.js');
9
12
  var Input_styles = require('./Input.styles.js');
10
13
  var FormElement_types = require('../FormElement.types.js');
11
- var designTokens = require('@citygross/design-tokens');
12
- var icons = require('@citygross/icons');
13
- var typography = require('@citygross/typography');
14
- var CgButton = require('../../CgButton/CgButton.js');
15
- var ScreenReader = require('../../ScreenReader/ScreenReader.js');
16
- var CgButton_types = require('../../CgButton/CgButton.types.js');
17
14
 
18
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
16
 
20
17
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
18
 
22
19
  var Input = function (_a) {
23
- var _b, _c, _d;
24
- var clearFunction = _a.clearFunction, hideLabel = _a.hideLabel, icon = _a.icon, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _e = _a.size, size = _e === void 0 ? FormElement_types.EFormElementSize.large : _e, unit = _a.unit, props = _tslib.__rest(_a, ["clearFunction", "hideLabel", "icon", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
20
+ var _b;
21
+ var elementLeft = _a.elementLeft, elementRight = _a.elementRight, hideLabel = _a.hideLabel, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _c = _a.size, size = _c === void 0 ? FormElement_types.EFormElementSize.large : _c, unit = _a.unit, props = _tslib.__rest(_a, ["elementLeft", "elementRight", "hideLabel", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
25
22
  var id = props.id, required = props.required;
26
23
  var sizeAttributes = formElement.getSizeAttributes(size);
27
24
  var errorId = "".concat(id, "-error");
@@ -31,12 +28,10 @@ var Input = function (_a) {
31
28
  required ? ' *' : '')),
32
29
  React__default["default"].createElement(Input_styles.InputWrapper, null,
33
30
  React__default["default"].createElement(Input_styles.InputContainer, null,
34
- icon && (React__default["default"].createElement(Input_styles.AbsoluteContainer, null, icon)),
31
+ elementLeft && (React__default["default"].createElement(Input_styles.AbsoluteContainer, null, elementLeft)),
35
32
  React__default["default"].createElement(Input_styles.InputElement, _tslib.__assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, paddingLeft: paddingLeft, sizeAttributes: sizeAttributes }, props)),
36
- clearFunction && (React__default["default"].createElement(Input_styles.AbsoluteContainer, { right: true },
37
- React__default["default"].createElement(CgButton.CgButton, { circle: true, onClick: clearFunction, size: CgButton_types.EButtonSize.small, variant: CgButton_types.EButtonVariant.ghost },
38
- React__default["default"].createElement(icons.Icons.Cross, { height: (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm }))))),
39
- unit && React__default["default"].createElement(typography.BodyText, { color: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.darkest }, unit)),
33
+ elementRight && (React__default["default"].createElement(Input_styles.AbsoluteContainer, { right: true }, elementRight))),
34
+ unit && React__default["default"].createElement(typography.BodyText, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
40
35
  error && errorLabel && (React__default["default"].createElement(FormElement_styles.ErrorLabel, { id: errorId }, errorLabel))));
41
36
  };
42
37
 
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/Select/Select.styles.js CHANGED
@@ -11,7 +11,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
13
  var SelectContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
14
- var SelectElement = styled__default["default"].select(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), FormElement_styles.sharedFormElementStyles);
14
+ var SelectElement = styled__default["default"].select(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n ", "\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n ", "\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"])), FormElement_styles.sharedFormElementStyles, function (_a) {
15
+ var _b;
16
+ var theme = _a.theme;
17
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
18
+ });
15
19
  var SelectIcon = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n position: absolute;\n top: 50%;\n right: ", "px;\n transform: translateY(-50%);\n pointer-events: none;\n\n svg {\n display: block;\n }\n"], ["\n position: absolute;\n top: 50%;\n right: ", "px;\n transform: translateY(-50%);\n pointer-events: none;\n\n svg {\n display: block;\n }\n"])), function (_a) {
16
20
  var _b;
17
21
  var theme = _a.theme;
package/build/cjs/components/src/components/FormElements/Select/Select.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/FormElements/FormElement.styles.js CHANGED
@@ -23,7 +23,7 @@ var Label = styled.label(templateObject_2 || (templateObject_2 = __makeTemplateO
23
23
  var theme = _a.theme;
24
24
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
25
25
  });
26
- var sharedFormElementStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"], ["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"])), function (_a) {
26
+ var sharedFormElementStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"], ["\n appearance: none;\n border: 1px solid\n ", ";\n border-radius: ", "px;\n color: ", ";\n font-family: ", ";\n font-size: ", "px;\n height: ", "px;\n overflow: hidden;\n padding: 0 ", "px;\n text-overflow: ellipsis;\n width: 100%;\n\n &:not(:disabled):focus,\n &:not(:disabled):active {\n outline: 1px solid\n ", ";\n border: 1px solid\n ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n"])), function (_a) {
27
27
  var _b, _c;
28
28
  var error = _a.error, theme = _a.theme;
29
29
  return error ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.placeholder;
@@ -59,7 +59,7 @@ var sharedFormElementStyles = css(templateObject_3 || (templateObject_3 = __make
59
59
  }, function (_a) {
60
60
  var _b;
61
61
  var theme = _a.theme;
62
- return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
62
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
63
63
  }, function (_a) {
64
64
  var _b;
65
65
  var theme = _a.theme;
package/build/es/components/src/components/FormElements/Input/Input.js CHANGED
@@ -1,19 +1,16 @@
1
1
  import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
2
2
  import React from 'react';
3
+ import { theme } from '@citygross/design-tokens';
4
+ import { BodyText } from '@citygross/typography';
3
5
  import { getSizeAttributes } from '../../../helpers/form-element.js';
6
+ import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
4
7
  import { Wrapper, Label, ErrorLabel } from '../FormElement.styles.js';
5
8
  import { InputWrapper, InputContainer, AbsoluteContainer, InputElement } from './Input.styles.js';
6
9
  import { EFormElementSize } from '../FormElement.types.js';
7
- import { theme } from '@citygross/design-tokens';
8
- import { Icons } from '@citygross/icons';
9
- import { BodyText } from '@citygross/typography';
10
- import { CgButton } from '../../CgButton/CgButton.js';
11
- import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
12
- import { EButtonSize, EButtonVariant } from '../../CgButton/CgButton.types.js';
13
10
 
14
11
  var Input = function (_a) {
15
- var _b, _c, _d;
16
- var clearFunction = _a.clearFunction, hideLabel = _a.hideLabel, icon = _a.icon, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _e = _a.size, size = _e === void 0 ? EFormElementSize.large : _e, unit = _a.unit, props = __rest(_a, ["clearFunction", "hideLabel", "icon", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
12
+ var _b;
13
+ var elementLeft = _a.elementLeft, elementRight = _a.elementRight, hideLabel = _a.hideLabel, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _c = _a.size, size = _c === void 0 ? EFormElementSize.large : _c, unit = _a.unit, props = __rest(_a, ["elementLeft", "elementRight", "hideLabel", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
17
14
  var id = props.id, required = props.required;
18
15
  var sizeAttributes = getSizeAttributes(size);
19
16
  var errorId = "".concat(id, "-error");
@@ -23,12 +20,10 @@ var Input = function (_a) {
23
20
  required ? ' *' : '')),
24
21
  React.createElement(InputWrapper, null,
25
22
  React.createElement(InputContainer, null,
26
- icon && (React.createElement(AbsoluteContainer, null, icon)),
23
+ elementLeft && (React.createElement(AbsoluteContainer, null, elementLeft)),
27
24
  React.createElement(InputElement, __assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, paddingLeft: paddingLeft, sizeAttributes: sizeAttributes }, props)),
28
- clearFunction && (React.createElement(AbsoluteContainer, { right: true },
29
- React.createElement(CgButton, { circle: true, onClick: clearFunction, size: EButtonSize.small, variant: EButtonVariant.ghost },
30
- React.createElement(Icons.Cross, { height: (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm }))))),
31
- unit && React.createElement(BodyText, { color: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.darkest }, unit)),
25
+ elementRight && (React.createElement(AbsoluteContainer, { right: true }, elementRight))),
26
+ unit && React.createElement(BodyText, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
32
27
  error && errorLabel && (React.createElement(ErrorLabel, { id: errorId }, errorLabel))));
33
28
  };
34
29
 
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/Select/Select.styles.js CHANGED
@@ -3,7 +3,11 @@ import styled from 'styled-components';
3
3
  import { sharedFormElementStyles } from '../FormElement.styles.js';
4
4
 
5
5
  var SelectContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
6
- var SelectElement = styled.select(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), sharedFormElementStyles);
6
+ var SelectElement = styled.select(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n ", "\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"])), sharedFormElementStyles, function (_a) {
7
+ var _b;
8
+ var theme = _a.theme;
9
+ return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
10
+ });
7
11
  var SelectIcon = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n right: ", "px;\n transform: translateY(-50%);\n pointer-events: none;\n\n svg {\n display: block;\n }\n"], ["\n position: absolute;\n top: 50%;\n right: ", "px;\n transform: translateY(-50%);\n pointer-events: none;\n\n svg {\n display: block;\n }\n"])), function (_a) {
8
12
  var _b;
9
13
  var theme = _a.theme;
package/build/es/components/src/components/FormElements/Select/Select.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Select.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.8.150",
3
+ "version": "0.8.151",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
74
74
  "react-slick": "^0.30.1",
75
75
  "slick-carousel": "^1.8.1"
76
76
  },
77
- "gitHead": "4e7057064778890726168d955f7c62cd37c44bf7"
77
+ "gitHead": "bc7fd0c3968256a58419993dde7d4f6b412fd3f2"
78
78
  }