@dev-crew-berlin/enter-js-utils 0.95.2 → 0.96.1
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/button.js +3 -3
- package/dist/ui/checkin-progress-bar.js +36 -19
- package/dist/ui/form-elements/input.js +4 -4
- package/dist/ui/form-elements/search-input.js +7 -7
- package/dist/ui/form-elements/segmented-control.js +7 -7
- package/dist/ui/form-elements/select.js +6 -6
- package/dist/ui/guest-card.js +13 -13
- package/package.json +1 -1
package/dist/ui/button.js
CHANGED
|
@@ -11,13 +11,13 @@ export const Button = ({
|
|
|
11
11
|
...props
|
|
12
12
|
}) => {
|
|
13
13
|
return /*#__PURE__*/React.createElement("button", _extends({}, props, {
|
|
14
|
-
className: _JSXStyle.dynamic([["
|
|
14
|
+
className: _JSXStyle.dynamic([["1300251439", [fonts.secondary, colors.enterBackground, colors.enterDarkGrey, colors.enterGrey, colors.enterError, colors.enterGrey, colors.enterError, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterGreen]]]) + " " + (classNames({
|
|
15
15
|
[appearance]: true,
|
|
16
16
|
'full-width': fullWidth,
|
|
17
17
|
borderless
|
|
18
18
|
}) || "")
|
|
19
19
|
}), props.children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
20
|
-
id: "
|
|
20
|
+
id: "1300251439",
|
|
21
21
|
dynamic: [fonts.secondary, colors.enterBackground, colors.enterDarkGrey, colors.enterGrey, colors.enterError, colors.enterGrey, colors.enterError, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterGreen]
|
|
22
|
-
}, `button.__jsx-style-dynamic-selector{font-family:${fonts.secondary};margin:1em 0 0.8em;padding:0.8em 1.5em;min-width:150px;font-size:1em;font-weight:500;white-space:nowrap;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;-webkit-letter-spacing:0.06em;-moz-letter-spacing:0.06em;-ms-letter-spacing:0.06em;letter-spacing:0.06em;line-height:1;cursor:pointer;border-radius:
|
|
22
|
+
}, `button.__jsx-style-dynamic-selector{font-family:${fonts.secondary};margin:1em 0 0.8em;padding:0.8em 1.5em;min-width:150px;font-size:1em;font-weight:500;white-space:nowrap;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;-webkit-letter-spacing:0.06em;-moz-letter-spacing:0.06em;-ms-letter-spacing:0.06em;letter-spacing:0.06em;line-height:1;cursor:pointer;border-radius:10px;background-color:${colors.enterBackground};color:${colors.enterDarkGrey};border:1px solid ${colors.enterGrey};}button.__jsx-style-dynamic-selector:disabled{opacity:0.5;cursor:not-allowed;}button.borderless.__jsx-style-dynamic-selector{background-color:transparent;border:0;box-shadow:none;margin:0.2em 0;}.full-width.__jsx-style-dynamic-selector{display:block;width:100%;}.danger.__jsx-style-dynamic-selector{color:${colors.enterError};border:1px solid ${colors.enterGrey};}.danger.borderless.__jsx-style-dynamic-selector{color:${colors.enterError};}.primary.__jsx-style-dynamic-selector{background-color:${colors.enterDarkGrey};color:white;border:1px solid ${colors.enterDarkGrey};}.primary.borderless.__jsx-style-dynamic-selector{color:${colors.enterDarkGrey};font-weight:bold;}.green.__jsx-style-dynamic-selector{background-color:${colors.enterGreen};color:white;border:1px solid ${colors.enterGreen};}.green.borderless.__jsx-style-dynamic-selector{color:${colors.enterGreen};}`));
|
|
23
23
|
};
|
|
@@ -1,27 +1,44 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
export const CheckinProgressBar =
|
|
5
|
-
|
|
3
|
+
import { fonts } from '../lib/theme';
|
|
4
|
+
export const CheckinProgressBar = ({
|
|
5
|
+
checkinCount,
|
|
6
|
+
rsvp,
|
|
7
|
+
children
|
|
8
|
+
}) => {
|
|
9
|
+
const safeRsvp = Math.max(rsvp, 0);
|
|
10
|
+
const safeCheckins = Math.max(checkinCount, 0);
|
|
11
|
+
const progress = safeRsvp > 0 ? Math.min(safeCheckins / safeRsvp, 1) : 1;
|
|
12
|
+
const remaining = Math.max(safeRsvp - safeCheckins, 0);
|
|
6
13
|
return /*#__PURE__*/React.createElement("div", {
|
|
7
|
-
className: _JSXStyle.dynamic([["
|
|
14
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'checkin-progress-bar'
|
|
8
15
|
}, /*#__PURE__*/React.createElement("div", {
|
|
9
16
|
style: {
|
|
10
|
-
width: `${
|
|
17
|
+
width: `${progress * 100}%`
|
|
11
18
|
},
|
|
12
|
-
className: _JSXStyle.dynamic([["
|
|
19
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'progress'
|
|
13
20
|
}), /*#__PURE__*/React.createElement("div", {
|
|
14
|
-
className: _JSXStyle.dynamic([["
|
|
15
|
-
},
|
|
16
|
-
className: _JSXStyle.dynamic([["
|
|
17
|
-
},
|
|
18
|
-
className: _JSXStyle.dynamic([["
|
|
19
|
-
},
|
|
20
|
-
className: _JSXStyle.dynamic([["
|
|
21
|
-
},
|
|
22
|
-
className: _JSXStyle.dynamic([["
|
|
23
|
-
},
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
21
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'metric left'
|
|
22
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
23
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'value'
|
|
24
|
+
}, safeCheckins), /*#__PURE__*/React.createElement("div", {
|
|
25
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'label'
|
|
26
|
+
}, "Processed")), /*#__PURE__*/React.createElement("div", {
|
|
27
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'center'
|
|
28
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
29
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'center-main'
|
|
30
|
+
}, children), /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'center-sub'
|
|
32
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
33
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'total'
|
|
34
|
+
}, safeRsvp), " Total")), /*#__PURE__*/React.createElement("div", {
|
|
35
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'metric right'
|
|
36
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'value'
|
|
38
|
+
}, remaining), /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'label'
|
|
40
|
+
}, "Remaining")), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
41
|
+
id: "269769892",
|
|
42
|
+
dynamic: [fonts.primary, fonts.secondary, fonts.secondary]
|
|
43
|
+
}, `.checkin-progress-bar.__jsx-style-dynamic-selector{position:relative;padding:0.85rem 1rem;border-radius:1rem;overflow:hidden;display:grid;grid-template-columns:1fr auto 1fr;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#493f48;color:#ffffff;font-family:${fonts.primary};box-shadow:0 6px 18px rgba(0,0,0,0.2);}.progress.__jsx-style-dynamic-selector{position:absolute;inset:0 auto 0 0;height:100%;background-color:#89b859;z-index:0;}.metric.__jsx-style-dynamic-selector,.center.__jsx-style-dynamic-selector{position:relative;z-index:1;}.metric.__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;gap:0.2rem;}.value.__jsx-style-dynamic-selector{font-size:1.15rem;font-weight:800;line-height:1;}.label.__jsx-style-dynamic-selector{font-family:${fonts.secondary};font-size:0.65rem;-webkit-letter-spacing:0.06em;-moz-letter-spacing:0.06em;-ms-letter-spacing:0.06em;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;opacity:0.85;}.left.__jsx-style-dynamic-selector{text-align:left;}.right.__jsx-style-dynamic-selector{text-align:right;}.center.__jsx-style-dynamic-selector{text-align:center;padding:0 0.5rem;min-width:0;}.center-main.__jsx-style-dynamic-selector{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.center-sub.__jsx-style-dynamic-selector{margin-top:0.2rem;font-family:${fonts.secondary};font-size:0.65rem;-webkit-letter-spacing:0.06em;-moz-letter-spacing:0.06em;-ms-letter-spacing:0.06em;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;opacity:0.85;}.center-sub.__jsx-style-dynamic-selector .total.__jsx-style-dynamic-selector{font-weight:800;opacity:1;}`));
|
|
27
44
|
};
|
|
@@ -13,9 +13,9 @@ export const Input = ({
|
|
|
13
13
|
htmlFor: id
|
|
14
14
|
}, label), /*#__PURE__*/React.createElement("input", _extends({}, props, {
|
|
15
15
|
id: id,
|
|
16
|
-
className: _JSXStyle.dynamic([["
|
|
16
|
+
className: _JSXStyle.dynamic([["2200566855", [fonts.primary, colors.enterDarkGrey, colors.enterDarkGrey]]]) + " " + (props && props.className != null && props.className || "")
|
|
17
17
|
})), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
18
|
-
id: "
|
|
19
|
-
dynamic: [fonts.primary, colors.enterDarkGrey, colors.
|
|
20
|
-
}, `input.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:
|
|
18
|
+
id: "2200566855",
|
|
19
|
+
dynamic: [fonts.primary, colors.enterDarkGrey, colors.enterDarkGrey]
|
|
20
|
+
}, `input.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:0.95rem;width:100%;padding:0.6rem 0.9rem;margin-bottom:0.9rem;background-color:#f9fafb;color:${colors.enterDarkGrey};border:1px solid #d1d5db;border-radius:999px;outline:none;box-sizing:border-box;-webkit-transition:background-color 0.15s ease,border-color 0.15s ease, box-shadow 0.15s ease;transition:background-color 0.15s ease,border-color 0.15s ease, box-shadow 0.15s ease;}input.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:#9ca3af;}input.__jsx-style-dynamic-selector::-moz-placeholder{color:#9ca3af;}input.__jsx-style-dynamic-selector:-ms-input-placeholder{color:#9ca3af;}input.__jsx-style-dynamic-selector::placeholder{color:#9ca3af;}input.__jsx-style-dynamic-selector:hover{background-color:#ffffff;border-color:#cbd5e1;}input.__jsx-style-dynamic-selector:focus{background-color:#ffffff;border-color:${colors.enterDarkGrey};box-shadow:0 0 0 2px rgba(17,24,39,0.12);}`));
|
|
21
21
|
};
|
|
@@ -5,23 +5,23 @@ import { colors, fonts } from '../../lib/theme';
|
|
|
5
5
|
import { SearchIcon } from '../icons/search-icon';
|
|
6
6
|
export const SearchInput = ({
|
|
7
7
|
textColor = colors.enterDarkGrey,
|
|
8
|
-
borderColor =
|
|
8
|
+
borderColor = '#e5e7eb',
|
|
9
9
|
placeholder = 'Search',
|
|
10
10
|
...props
|
|
11
11
|
}) => {
|
|
12
12
|
const id = useId();
|
|
13
13
|
return /*#__PURE__*/React.createElement("div", {
|
|
14
|
-
className: _JSXStyle.dynamic([["
|
|
14
|
+
className: _JSXStyle.dynamic([["2389809060", [fonts.primary, textColor]]]) + " " + 'search-input'
|
|
15
15
|
}, /*#__PURE__*/React.createElement("div", {
|
|
16
|
-
className: _JSXStyle.dynamic([["
|
|
16
|
+
className: _JSXStyle.dynamic([["2389809060", [fonts.primary, textColor]]]) + " " + 'icon'
|
|
17
17
|
}, /*#__PURE__*/React.createElement(SearchIcon, {
|
|
18
18
|
color: textColor
|
|
19
19
|
})), /*#__PURE__*/React.createElement("input", _extends({}, props, {
|
|
20
20
|
placeholder: placeholder,
|
|
21
21
|
id: id,
|
|
22
|
-
className: _JSXStyle.dynamic([["
|
|
22
|
+
className: _JSXStyle.dynamic([["2389809060", [fonts.primary, textColor]]]) + " " + (props && props.className != null && props.className || "")
|
|
23
23
|
})), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
24
|
-
id: "
|
|
25
|
-
dynamic: [fonts.primary, textColor
|
|
26
|
-
}, `.search-input.__jsx-style-dynamic-selector{
|
|
24
|
+
id: "2389809060",
|
|
25
|
+
dynamic: [fonts.primary, textColor]
|
|
26
|
+
}, `.search-input.__jsx-style-dynamic-selector{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;margin-bottom:1rem;}.icon.__jsx-style-dynamic-selector{position:absolute;left:0.75rem;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:16px;height:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;opacity:0.8;}input.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:0.95rem;width:100%;padding:0.55rem 0.875rem 0.55rem 2.25rem;color:${textColor};background-color:#ffffff;border:1px solid #d1d5db;border-radius:0.75rem;outline:none;box-shadow:0 1px 2px rgba(16,24,40,0.05);}input.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:rgba(107,114,128,0.8);}input.__jsx-style-dynamic-selector::-moz-placeholder{color:rgba(107,114,128,0.8);}input.__jsx-style-dynamic-selector:-ms-input-placeholder{color:rgba(107,114,128,0.8);}input.__jsx-style-dynamic-selector::placeholder{color:rgba(107,114,128,0.8);}input.__jsx-style-dynamic-selector:hover{border-color:#d1d5db;}input.__jsx-style-dynamic-selector:focus{border-color:#9ca3af;box-shadow:0 0 0 2px rgba(229,231,235,0.9);}`));
|
|
27
27
|
};
|
|
@@ -4,10 +4,10 @@ import { colors, fonts } from '../../lib/theme';
|
|
|
4
4
|
export const SegmentedControl = props => {
|
|
5
5
|
const name = props.segments.join('');
|
|
6
6
|
return /*#__PURE__*/React.createElement("div", {
|
|
7
|
-
className: _JSXStyle.dynamic([["
|
|
7
|
+
className: _JSXStyle.dynamic([["382506645", [fonts.secondary, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey]]]) + " " + 'segmented-controll'
|
|
8
8
|
}, props.segments.map((segment, index) => /*#__PURE__*/React.createElement("div", {
|
|
9
9
|
key: segment,
|
|
10
|
-
className: _JSXStyle.dynamic([["
|
|
10
|
+
className: _JSXStyle.dynamic([["382506645", [fonts.secondary, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey]]]) + " " + 'segment'
|
|
11
11
|
}, /*#__PURE__*/React.createElement("input", {
|
|
12
12
|
type: "radio",
|
|
13
13
|
id: segment,
|
|
@@ -15,15 +15,15 @@ export const SegmentedControl = props => {
|
|
|
15
15
|
checked: segment === props.activeSegment,
|
|
16
16
|
onChange: () => props.onChange(segment),
|
|
17
17
|
onFocus: props.onFocus,
|
|
18
|
-
className: _JSXStyle.dynamic([["
|
|
18
|
+
className: _JSXStyle.dynamic([["382506645", [fonts.secondary, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey]]])
|
|
19
19
|
}), /*#__PURE__*/React.createElement("label", {
|
|
20
20
|
htmlFor: segment,
|
|
21
21
|
style: props.colors && {
|
|
22
22
|
backgroundColor: props.colors[index] && segment === props.activeSegment ? props.colors[index] : undefined
|
|
23
23
|
},
|
|
24
|
-
className: _JSXStyle.dynamic([["
|
|
24
|
+
className: _JSXStyle.dynamic([["382506645", [fonts.secondary, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey]]])
|
|
25
25
|
}, segment))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
26
|
-
id: "
|
|
27
|
-
dynamic: [fonts.secondary, colors.
|
|
28
|
-
}, `.segmented-controll.__jsx-style-dynamic-selector{display
|
|
26
|
+
id: "382506645",
|
|
27
|
+
dynamic: [fonts.secondary, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey]
|
|
28
|
+
}, `.segmented-controll.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;border-radius:999px;background-color:#f3f4f6;border:1px solid #d1d5db;box-shadow:0 1px 2px rgba(16,24,40,0.06);overflow:hidden;}.segment.__jsx-style-dynamic-selector{position:relative;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;}label.__jsx-style-dynamic-selector{font-family:${fonts.secondary};font-weight:600;font-size:0.84rem;-webkit-letter-spacing:0.03em;-moz-letter-spacing:0.03em;-ms-letter-spacing:0.03em;letter-spacing:0.03em;padding:0.62rem 0.85rem;text-align:center;background-color:#f9fafb;color:${colors.enterDarkGrey};box-sizing:border-box;display:block;width:100%;height:100%;border-radius:0;cursor:pointer;-webkit-transition:background-color 0.15s ease,color 0.15s ease, box-shadow 0.15s ease,-webkit-transform 0.1s ease;-webkit-transition:background-color 0.15s ease,color 0.15s ease, box-shadow 0.15s ease,transform 0.1s ease;transition:background-color 0.15s ease,color 0.15s ease, box-shadow 0.15s ease,transform 0.1s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.segment.__jsx-style-dynamic-selector:not(:last-child) label.__jsx-style-dynamic-selector{border-right:1px solid rgba(209,213,219,0.9);}label.__jsx-style-dynamic-selector:hover{background-color:#eef2f7;color:${colors.enterDarkGrey};}input.__jsx-style-dynamic-selector:checked+label.__jsx-style-dynamic-selector{background-color:${colors.enterDarkGrey};color:white;box-shadow:0 2px 6px rgba(15,23,42,0.22);}input.__jsx-style-dynamic-selector:checked+label.__jsx-style-dynamic-selector:hover{background-color:${colors.enterDarkGrey};}input.__jsx-style-dynamic-selector{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;left:0;top:0;margin:0;width:100%;height:100%;background-color:transparent;pointer-events:none;}`));
|
|
29
29
|
};
|
|
@@ -16,7 +16,7 @@ export function Select({
|
|
|
16
16
|
} = props;
|
|
17
17
|
const _id = useId();
|
|
18
18
|
const id = props.id ?? _id;
|
|
19
|
-
const uriEncodedChevronSVG = encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'
|
|
19
|
+
const uriEncodedChevronSVG = encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'><polygon fill='${colors.enterBackground}' points='0,0 100,0 50,50'/></svg>`);
|
|
20
20
|
const chevronSVGImageURL = `data:image/svg+xml,${uriEncodedChevronSVG}`;
|
|
21
21
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
|
|
22
22
|
htmlFor: id
|
|
@@ -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([["4146534212", [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([["4146534212", [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]]])
|
|
33
33
|
}, optionFormat(option)))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
34
|
-
id: "
|
|
35
|
-
dynamic: [fonts.primary, colors.enterDarkGrey,
|
|
36
|
-
}, `select.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:
|
|
34
|
+
id: "4146534212",
|
|
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:0.75rem;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/guest-card.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import 'styled-jsx';
|
|
4
|
-
import {
|
|
4
|
+
import { fonts } from '../lib/theme';
|
|
5
5
|
import { classNames as cx } from '../lib/class-names';
|
|
6
6
|
import { CheckinCountIndicator } from './checkin-count-indicator';
|
|
7
7
|
import { CompanionInfo } from './companion-info';
|
|
@@ -15,12 +15,12 @@ export const GuestCard = props => {
|
|
|
15
15
|
props.onClick(props.attendee.id);
|
|
16
16
|
} : undefined;
|
|
17
17
|
return /*#__PURE__*/React.createElement("div", {
|
|
18
|
-
className: _JSXStyle.dynamic([["
|
|
18
|
+
className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + (cx({
|
|
19
19
|
'guest-card-wrapper': true,
|
|
20
20
|
plain: props.plain
|
|
21
21
|
}) || "")
|
|
22
22
|
}, /*#__PURE__*/React.createElement("div", {
|
|
23
|
-
className: _JSXStyle.dynamic([["
|
|
23
|
+
className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'tag-color-list'
|
|
24
24
|
}, tags.map(tag => [tag, getTagColor(tag)]).filter(([, tagColor]) => tagColor).map(([tag, tagColor]) => /*#__PURE__*/React.createElement("div", {
|
|
25
25
|
key: tag,
|
|
26
26
|
title: tag,
|
|
@@ -28,14 +28,14 @@ export const GuestCard = props => {
|
|
|
28
28
|
backgroundColor: tagColor,
|
|
29
29
|
height: '100%'
|
|
30
30
|
},
|
|
31
|
-
className: _JSXStyle.dynamic([["
|
|
31
|
+
className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'tag-color'
|
|
32
32
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
33
33
|
onClick: onClick,
|
|
34
|
-
className: _JSXStyle.dynamic([["
|
|
34
|
+
className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'guest-card'
|
|
35
35
|
}, /*#__PURE__*/React.createElement("div", {
|
|
36
|
-
className: _JSXStyle.dynamic([["
|
|
36
|
+
className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'main'
|
|
37
37
|
}, /*#__PURE__*/React.createElement("h2", {
|
|
38
|
-
className: _JSXStyle.dynamic([["
|
|
38
|
+
className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'name'
|
|
39
39
|
}, props.formatName(props.attendee)), /*#__PURE__*/React.createElement(CompanionInfo, {
|
|
40
40
|
companionStatus: props.attendee.companions
|
|
41
41
|
}), /*#__PURE__*/React.createElement(CheckinCountIndicator, {
|
|
@@ -43,14 +43,14 @@ export const GuestCard = props => {
|
|
|
43
43
|
response: props.attendee.getResponse(props.branchName, props.counterName),
|
|
44
44
|
rsvpCount: props.attendee.getRsvpCount(props.branchName, props.counterName)
|
|
45
45
|
})), /*#__PURE__*/React.createElement("div", {
|
|
46
|
-
className: _JSXStyle.dynamic([["
|
|
46
|
+
className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'tag-list'
|
|
47
47
|
}, tags.map(tag => /*#__PURE__*/React.createElement(Tag, {
|
|
48
48
|
key: tag,
|
|
49
49
|
color: getTagColor(tag)
|
|
50
50
|
}, tag)), props.infoText && /*#__PURE__*/React.createElement("div", {
|
|
51
|
-
className: _JSXStyle.dynamic([["
|
|
52
|
-
},
|
|
53
|
-
id: "
|
|
54
|
-
dynamic: [
|
|
55
|
-
}, `.guest-card-wrapper.__jsx-style-dynamic-selector{
|
|
51
|
+
className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'info'
|
|
52
|
+
}, props.infoText))), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
53
|
+
id: "3131953377",
|
|
54
|
+
dynamic: [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']
|
|
55
|
+
}, `.guest-card-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:${fonts.primary};margin:${props.dense ? '0.45rem 0' : '0.85rem 0'};border-radius:1.1rem;background-color:#ffffff;border:1px solid #e5e7eb;box-shadow:0 1px 2px rgba(16,24,40,0.08), 0 6px 14px rgba(16,24,40,0.08);-webkit-transition:box-shadow 0.18s ease,-webkit-transform 0.18s ease;-webkit-transition:box-shadow 0.18s ease,transform 0.18s ease;transition:box-shadow 0.18s ease,transform 0.18s ease;cursor:${onClick ? 'pointer' : 'default'};background-clip:padding-box;}.guest-card-wrapper.__jsx-style-dynamic-selector:hover{box-shadow:0 2px 4px rgba(16,24,40,0.1), 0 12px 26px rgba(16,24,40,0.14);-webkit-transform:translateY(-1px);-ms-transform:translateY(-1px);transform:translateY(-1px);}.guest-card-wrapper.__jsx-style-dynamic-selector:active{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);box-shadow:0 1px 2px rgba(16,24,40,0.08), 0 8px 18px rgba(16,24,40,0.12);}.guest-card-wrapper.plain.__jsx-style-dynamic-selector{border:none;box-shadow:none;background-color:transparent;-webkit-transform:none;-ms-transform:none;transform:none;}.tag-color-list.__jsx-style-dynamic-selector{width:6px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:0 0 6px;-ms-flex:0 0 6px;flex:0 0 6px;}.tag-color.__jsx-style-dynamic-selector:first-child{border-top-left-radius:1.1rem;}.tag-color.__jsx-style-dynamic-selector:last-child{border-bottom-left-radius:1.1rem;}.guest-card.__jsx-style-dynamic-selector{position:relative;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;padding:1.15rem 1.15rem 1.05rem 1.3rem;}.main.__jsx-style-dynamic-selector{min-width:0;max-width:62%;}.name.__jsx-style-dynamic-selector{font-size:1.05rem;font-weight:650;color:#111827;margin:0 0 0.5rem 0;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.tag-list.__jsx-style-dynamic-selector{max-width:38%;text-align:right;font-size:0.9rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:0.3rem 0.4rem;margin-left:0.9rem;}.info.__jsx-style-dynamic-selector{display:block;width:100%;text-align:right;margin-top:0.45rem;color:#6b7280;font-size:0.82rem;}`));
|
|
56
56
|
};
|