@dev-crew-berlin/enter-js-utils 0.98.11 → 0.98.12
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.
- package/dist/ui/companion-info.d.ts +3 -0
- package/dist/ui/companion-info.js +24 -8
- package/dist/ui/companion-info.stories.js +11 -0
- package/dist/ui/form-elements/input.d.ts +1 -1
- package/dist/ui/form-elements/select.d.ts +1 -1
- package/dist/ui/form-elements/select.js +4 -4
- package/dist/ui/tag.js +3 -3
- package/package.json +1 -1
|
@@ -3,13 +3,29 @@ import React from 'react';
|
|
|
3
3
|
import 'styled-jsx';
|
|
4
4
|
import { colors, fonts } from '../lib/theme';
|
|
5
5
|
export const CompanionInfo = props => {
|
|
6
|
-
if (
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
if (props.companionStatus.isCompanion) {
|
|
7
|
+
return /*#__PURE__*/React.createElement("p", {
|
|
8
|
+
className: _JSXStyle.dynamic([["747595454", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companion-info'
|
|
9
|
+
}, "companion of", ' ', /*#__PURE__*/React.createElement("span", {
|
|
10
|
+
className: _JSXStyle.dynamic([["747595454", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companion-name'
|
|
11
|
+
}, props.companionStatus.mainGuestName), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
12
|
+
id: "747595454",
|
|
13
|
+
dynamic: [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]
|
|
14
|
+
}, `.companion-info.__jsx-style-dynamic-selector{margin:-0.5em 0 0.4em;color:${colors.enterMediumGrey};font-family:${fonts.primary};}.companion-name.__jsx-style-dynamic-selector{color:${colors.enterDarkGrey};}`));
|
|
15
|
+
}
|
|
16
|
+
const companionNames = Object.values(props.companionStatus.companionNames ?? {});
|
|
17
|
+
if (companionNames.length === 0) return null;
|
|
18
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
19
|
+
className: _JSXStyle.dynamic([["2921445348", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companions-info'
|
|
20
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
21
|
+
className: _JSXStyle.dynamic([["2921445348", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companions-label'
|
|
22
|
+
}, "companions:"), /*#__PURE__*/React.createElement("div", {
|
|
23
|
+
className: _JSXStyle.dynamic([["2921445348", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companions-list'
|
|
24
|
+
}, companionNames.map((name, index) => /*#__PURE__*/React.createElement("span", {
|
|
25
|
+
key: index,
|
|
26
|
+
className: _JSXStyle.dynamic([["2921445348", [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]]]) + " " + 'companion-name'
|
|
27
|
+
}, name))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
28
|
+
id: "2921445348",
|
|
13
29
|
dynamic: [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]
|
|
14
|
-
}, `.
|
|
30
|
+
}, `.companions-info.__jsx-style-dynamic-selector{display:grid;grid-template-columns:auto 1fr;-webkit-column-gap:0.6rem;column-gap:0.6rem;margin:-0.5em 0 0.4em;color:${colors.enterMediumGrey};font-family:${fonts.primary};}.companions-label.__jsx-style-dynamic-selector{white-space:nowrap;}.companions-list.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.companions-list.__jsx-style-dynamic-selector .companion-name.__jsx-style-dynamic-selector{display:block;width:-webkit-max-content;width:-moz-max-content;width:max-content;color:${colors.enterDarkGrey};}`));
|
|
15
31
|
};
|
|
@@ -19,4 +19,15 @@ export const NotACompanion = {
|
|
|
19
19
|
isCompanion: false
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
|
+
};
|
|
23
|
+
export const WithCompanions = {
|
|
24
|
+
args: {
|
|
25
|
+
companionStatus: {
|
|
26
|
+
isCompanion: false,
|
|
27
|
+
companionNames: {
|
|
28
|
+
'companion-1': 'Erika Musterfrau',
|
|
29
|
+
'companion-2': 'John Doe'
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
22
33
|
};
|
|
@@ -24,14 +24,14 @@ export function Select({
|
|
|
24
24
|
id: id,
|
|
25
25
|
value: value,
|
|
26
26
|
onChange: e => onChange(e.target.value),
|
|
27
|
-
className: _JSXStyle.dynamic([["
|
|
27
|
+
className: _JSXStyle.dynamic([["3612400046", [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "")
|
|
28
28
|
}), options.map(option => /*#__PURE__*/React.createElement("option", {
|
|
29
29
|
key: option,
|
|
30
30
|
value: option,
|
|
31
31
|
disabled: optionDisabled(option),
|
|
32
|
-
className: _JSXStyle.dynamic([["
|
|
32
|
+
className: _JSXStyle.dynamic([["3612400046", [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]]])
|
|
33
33
|
}, optionFormat(option)))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
34
|
-
id: "
|
|
34
|
+
id: "3612400046",
|
|
35
35
|
dynamic: [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]
|
|
36
|
-
}, `select.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:0.95rem;display:block;width:100%;padding:0.55rem 2.25rem 0.55rem 0.875rem;color:${colors.enterDarkGrey};background-color:#ffffff;border:1px solid #e5e7eb;border-radius:
|
|
36
|
+
}, `select.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:0.95rem;display:block;width:100%;padding:0.55rem 2.25rem 0.55rem 0.875rem;color:${colors.enterDarkGrey};background-color:#ffffff;border:1px solid #e5e7eb;border-radius:999px;outline:none;box-shadow:0 1px 2px rgba(16,24,40,0.05);-webkit-transition:border-color 120ms ease,box-shadow 120ms ease, background-color 120ms ease;transition:border-color 120ms ease,box-shadow 120ms ease, background-color 120ms ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url('${chevronSVGImageURL}');background-repeat:no-repeat;background-position:right 0.75rem center;background-size:12px;margin-bottom:1rem;}select.__jsx-style-dynamic-selector:hover{border-color:#d1d5db;}select.__jsx-style-dynamic-selector:focus{border-color:#9ca3af;box-shadow:0 0 0 2px rgba(229,231,235,0.9);}select.__jsx-style-dynamic-selector:disabled{color:#9ca3af;background-color:#f9fafb;cursor:not-allowed;}option.__jsx-style-dynamic-selector:disabled{color:#9ca3af;}`));
|
|
37
37
|
}
|
package/dist/ui/tag.js
CHANGED
|
@@ -14,9 +14,9 @@ function getContrastYIQ(hexcolor) {
|
|
|
14
14
|
export const Tag = props => {
|
|
15
15
|
const textColor = getContrastYIQ(props.color ?? '#ffffff');
|
|
16
16
|
return /*#__PURE__*/React.createElement("div", {
|
|
17
|
-
className: _JSXStyle.dynamic([["
|
|
17
|
+
className: _JSXStyle.dynamic([["2236124549", [fonts.primary, props.big ? '14px' : '0.8em', textColor === 'black' ? colors.enterDarkGrey : 'white', props.color ? props.color : 'transparent', colors.enterGrey, props.big ? '7px 10px 5px 0' : '0 0 0.5em 0.5em']]]) + " " + 'tag'
|
|
18
18
|
}, props.children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
19
|
-
id: "
|
|
19
|
+
id: "2236124549",
|
|
20
20
|
dynamic: [fonts.primary, props.big ? '14px' : '0.8em', textColor === 'black' ? colors.enterDarkGrey : 'white', props.color ? props.color : 'transparent', colors.enterGrey, props.big ? '7px 10px 5px 0' : '0 0 0.5em 0.5em']
|
|
21
|
-
}, `.tag.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:${props.big ? '14px' : '0.8em'};color:${textColor === 'black' ? colors.enterDarkGrey : 'white'};text-transform:uppercase;display:inline-block;background-color:${props.color ? props.color : 'transparent'};border-radius:2px;border:1px solid ${colors.enterGrey};padding:2px 8px;margin:${props.big ? '7px 10px 5px 0' : '0 0 0.5em 0.5em'};word-wrap:anywhere;}`));
|
|
21
|
+
}, `.tag.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:${props.big ? '14px' : '0.8em'};color:${textColor === 'black' ? colors.enterDarkGrey : 'white'};text-transform:uppercase;display:inline-block;background-color:${props.color ? props.color : 'transparent'};border-radius:2px;border:1px solid ${colors.enterGrey};padding:2px 8px;margin:${props.big ? '7px 10px 5px 0' : '0 0 0.5em 0.5em'};word-wrap:anywhere;border-radius:8px;}`));
|
|
22
22
|
};
|