@citygross/components_v2 0.0.15 → 0.0.16
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/components/Button/Button.css.ts.vanilla.css +142 -0
- package/dist/components/Button/Button.css.vanilla.js +8 -0
- package/dist/components/Button/Button.js +57 -0
- package/dist/components/Header/Header.css.ts.vanilla.css +29 -0
- package/dist/components/Header/Header.css.vanilla.js +9 -0
- package/dist/components/Header/Header.d.ts +11 -0
- package/dist/components/Header/Header.js +44 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +3 -2
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
.Button_buttonBase__fe4m9p0 {
|
|
2
|
+
outline: none;
|
|
3
|
+
border: none;
|
|
4
|
+
}
|
|
5
|
+
.Button_buttonBase__fe4m9p0:disabled {
|
|
6
|
+
color: #FFFFFF;
|
|
7
|
+
background-color: #E8E8E8;
|
|
8
|
+
cursor: default;
|
|
9
|
+
}
|
|
10
|
+
.Button_buttonBase__fe4m9p0:focus-visible:not(:hover) {
|
|
11
|
+
outline: none;
|
|
12
|
+
box-shadow: 0 0 0 2px #fff,0 0 0 4px #000,0 0 0 6px #fff;
|
|
13
|
+
transition: all 0.1s ease-in-out;
|
|
14
|
+
}
|
|
15
|
+
.Button_buttonVariant_primary__fe4m9p1 {
|
|
16
|
+
background-color: #0069AE;
|
|
17
|
+
color: #FFFFFF;
|
|
18
|
+
}
|
|
19
|
+
.Button_buttonVariant_primary__fe4m9p1:hover:not(:disabled) {
|
|
20
|
+
background-color: #005C99;
|
|
21
|
+
}
|
|
22
|
+
.Button_buttonVariant_primary__fe4m9p1:active:not(:disabled) {
|
|
23
|
+
background-color: #004D80;
|
|
24
|
+
}
|
|
25
|
+
.Button_buttonVariant_secondary__fe4m9p2 {
|
|
26
|
+
background-color: #FFFFFF;
|
|
27
|
+
color: #333333;
|
|
28
|
+
border: 1px solid #B8B8B8;
|
|
29
|
+
}
|
|
30
|
+
.Button_buttonVariant_secondary__fe4m9p2:hover:not(:disabled) {
|
|
31
|
+
background-color: #F7F7F7;
|
|
32
|
+
}
|
|
33
|
+
.Button_buttonVariant_secondary__fe4m9p2:active:not(:disabled) {
|
|
34
|
+
background-color: #F1F1F1;
|
|
35
|
+
}
|
|
36
|
+
.Button_buttonVariant_secondary__fe4m9p2:disabled {
|
|
37
|
+
color: #B8B8B8;
|
|
38
|
+
}
|
|
39
|
+
.Button_buttonVariant_ghost__fe4m9p3 {
|
|
40
|
+
background-color: #FFFFFF;
|
|
41
|
+
color: #333333;
|
|
42
|
+
}
|
|
43
|
+
.Button_buttonVariant_ghost__fe4m9p3:hover:not(:disabled) {
|
|
44
|
+
background-color: #F7F7F7;
|
|
45
|
+
}
|
|
46
|
+
.Button_buttonVariant_ghost__fe4m9p3:active:not(:disabled) {
|
|
47
|
+
background-color: #F1F1F1;
|
|
48
|
+
}
|
|
49
|
+
.Button_buttonVariant_ghost__fe4m9p3:disabled {
|
|
50
|
+
color: #B8B8B8;
|
|
51
|
+
}
|
|
52
|
+
.Button_buttonVariant_tertiary__fe4m9p4 {
|
|
53
|
+
background-color: #FFE522;
|
|
54
|
+
color: #333333;
|
|
55
|
+
}
|
|
56
|
+
.Button_buttonVariant_tertiary__fe4m9p4:hover:not(:disabled) {
|
|
57
|
+
background-color: #F5D800;
|
|
58
|
+
}
|
|
59
|
+
.Button_buttonVariant_tertiary__fe4m9p4:active:not(:disabled) {
|
|
60
|
+
background-color: #DBC100;
|
|
61
|
+
}
|
|
62
|
+
.Button_buttonVariant_prio__fe4m9p5 {
|
|
63
|
+
background-color: #A71680;
|
|
64
|
+
color: #FFFFFF;
|
|
65
|
+
}
|
|
66
|
+
.Button_buttonVariant_prio__fe4m9p5:hover:not(:disabled) {
|
|
67
|
+
background-color: #90136F;
|
|
68
|
+
}
|
|
69
|
+
.Button_buttonVariant_prio__fe4m9p5:active:not(:disabled) {
|
|
70
|
+
background-color: #7A105E;
|
|
71
|
+
}
|
|
72
|
+
.Button_buttonFontSize_small__fe4m9p6 {
|
|
73
|
+
font-size: 13px;
|
|
74
|
+
}
|
|
75
|
+
.Button_buttonFontSize_default__fe4m9p7 {
|
|
76
|
+
font-size: 15px;
|
|
77
|
+
}
|
|
78
|
+
.Button_buttonPadding_small__fe4m9p8 {
|
|
79
|
+
padding: 6px 8px;
|
|
80
|
+
}
|
|
81
|
+
.Button_buttonPadding_medium__fe4m9p9 {
|
|
82
|
+
padding: 8px 12px;
|
|
83
|
+
}
|
|
84
|
+
.Button_buttonPadding_large__fe4m9pa {
|
|
85
|
+
padding: 12px 16px;
|
|
86
|
+
}
|
|
87
|
+
.Button_buttonPadding_icon__fe4m9pb {
|
|
88
|
+
height: 32px;
|
|
89
|
+
width: 32px;
|
|
90
|
+
display: grid;
|
|
91
|
+
place-content: center;
|
|
92
|
+
}
|
|
93
|
+
.Button_buttonShadow_none__fe4m9pc {
|
|
94
|
+
box-shadow: none;
|
|
95
|
+
}
|
|
96
|
+
.Button_buttonShadow_small__fe4m9pd {
|
|
97
|
+
box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15);
|
|
98
|
+
}
|
|
99
|
+
.Button_buttonShadow_default__fe4m9pe {
|
|
100
|
+
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.15);
|
|
101
|
+
}
|
|
102
|
+
.Button_buttonRadius_round__fe4m9pf {
|
|
103
|
+
border-radius: 100px;
|
|
104
|
+
box-shadow: none;
|
|
105
|
+
}
|
|
106
|
+
.Button_buttonRadius_default__fe4m9pg {
|
|
107
|
+
border-radius: 4px;
|
|
108
|
+
}
|
|
109
|
+
.Button_button__fe4m9ph {
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
position: relative;
|
|
112
|
+
}
|
|
113
|
+
.Button_button__fe4m9ph[data-loading="true"] {
|
|
114
|
+
background-color: #F7F7F7;
|
|
115
|
+
}
|
|
116
|
+
.Button_button_fullWidth_true__fe4m9pi {
|
|
117
|
+
width: 100%;
|
|
118
|
+
}
|
|
119
|
+
.Button_buttonContent__fe4m9px {
|
|
120
|
+
display: flex;
|
|
121
|
+
justify-content: center;
|
|
122
|
+
align-items: center;
|
|
123
|
+
gap: 8px;
|
|
124
|
+
flex-direction: row;
|
|
125
|
+
white-space: nowrap;
|
|
126
|
+
min-width: max-content;
|
|
127
|
+
}
|
|
128
|
+
.Button_buttonContent_flexReverse_true__fe4m9p10 {
|
|
129
|
+
flex-direction: row-reverse;
|
|
130
|
+
}
|
|
131
|
+
.Button_buttonContent_loading_true__fe4m9p11 {
|
|
132
|
+
opacity: 0;
|
|
133
|
+
}
|
|
134
|
+
.Button_buttonLoader__fe4m9p12 {
|
|
135
|
+
position: absolute;
|
|
136
|
+
top: 0;
|
|
137
|
+
left: 0;
|
|
138
|
+
right: 0;
|
|
139
|
+
bottom: 0;
|
|
140
|
+
display: grid;
|
|
141
|
+
place-content: center;
|
|
142
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import './Button.css.ts.vanilla.css';
|
|
2
|
+
import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
|
|
3
|
+
|
|
4
|
+
var button = createRuntimeFn({ defaultClassName: "Button_button__fe4m9ph Button_buttonBase__fe4m9p0", variantClassNames: { fullWidth: { true: "Button_button_fullWidth_true__fe4m9pi" }, buttonRadius: { round: "Button_buttonRadius_round__fe4m9pf", "default": "Button_buttonRadius_default__fe4m9pg" }, buttonShadow: { none: "Button_buttonShadow_none__fe4m9pc", small: "Button_buttonShadow_small__fe4m9pd", "default": "Button_buttonShadow_default__fe4m9pe" }, buttonVariant: { primary: "Button_buttonVariant_primary__fe4m9p1", secondary: "Button_buttonVariant_secondary__fe4m9p2", ghost: "Button_buttonVariant_ghost__fe4m9p3", tertiary: "Button_buttonVariant_tertiary__fe4m9p4", prio: "Button_buttonVariant_prio__fe4m9p5" }, buttonPadding: { small: "Button_buttonPadding_small__fe4m9p8", medium: "Button_buttonPadding_medium__fe4m9p9", large: "Button_buttonPadding_large__fe4m9pa", icon: "Button_buttonPadding_icon__fe4m9pb" } }, defaultVariants: { buttonPadding: "large", buttonRadius: "default", buttonShadow: "default", buttonVariant: "primary" }, compoundVariants: [] });
|
|
5
|
+
var buttonContent = createRuntimeFn({ defaultClassName: "Button_buttonContent__fe4m9px", variantClassNames: { buttonFontSize: { small: "Button_buttonFontSize_small__fe4m9p6", "default": "Button_buttonFontSize_default__fe4m9p7" }, flexReverse: { true: "Button_buttonContent_flexReverse_true__fe4m9p10" }, loading: { true: "Button_buttonContent_loading_true__fe4m9p11" } }, defaultVariants: { buttonFontSize: "default" }, compoundVariants: [] });
|
|
6
|
+
var buttonLoader = "Button_buttonLoader__fe4m9p12";
|
|
7
|
+
|
|
8
|
+
export { button, buttonContent, buttonLoader };
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { button, buttonContent, buttonLoader } from './Button.css.vanilla.js';
|
|
3
|
+
import { Spinner } from '../Spinner/Spinner.js';
|
|
4
|
+
|
|
5
|
+
const Button = ({
|
|
6
|
+
size,
|
|
7
|
+
variant,
|
|
8
|
+
icon,
|
|
9
|
+
flexReverse,
|
|
10
|
+
disabled,
|
|
11
|
+
onClick,
|
|
12
|
+
children,
|
|
13
|
+
loading,
|
|
14
|
+
fullWidth,
|
|
15
|
+
buttonRef,
|
|
16
|
+
round,
|
|
17
|
+
className
|
|
18
|
+
}) => {
|
|
19
|
+
return /* @__PURE__ */ React.createElement(
|
|
20
|
+
"button",
|
|
21
|
+
{
|
|
22
|
+
ref: buttonRef,
|
|
23
|
+
className: `${button({
|
|
24
|
+
buttonPadding: size,
|
|
25
|
+
buttonRadius: round ? "round" : "default",
|
|
26
|
+
buttonVariant: variant,
|
|
27
|
+
fullWidth,
|
|
28
|
+
buttonShadow: variant === "ghost" || variant === "secondary" ? "none" : size === "small" ? "small" : "default"
|
|
29
|
+
})} ${className}`,
|
|
30
|
+
disabled: disabled || loading,
|
|
31
|
+
onKeyDown: (event) => {
|
|
32
|
+
if (event.key === "Enter") {
|
|
33
|
+
onClick && onClick();
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
onClick: (e) => {
|
|
37
|
+
e.preventDefault();
|
|
38
|
+
onClick && onClick();
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
/* @__PURE__ */ React.createElement(
|
|
42
|
+
"div",
|
|
43
|
+
{
|
|
44
|
+
className: buttonContent({
|
|
45
|
+
buttonFontSize: size === "small" ? "small" : "default",
|
|
46
|
+
flexReverse,
|
|
47
|
+
loading
|
|
48
|
+
})
|
|
49
|
+
},
|
|
50
|
+
icon,
|
|
51
|
+
children
|
|
52
|
+
),
|
|
53
|
+
loading && /* @__PURE__ */ React.createElement("div", { className: buttonLoader }, /* @__PURE__ */ React.createElement(Spinner, { size: size === "small" ? "small" : "medium" }))
|
|
54
|
+
);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export { Button };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
.Header_wrapper__11gdejs0 {
|
|
2
|
+
position: relative;
|
|
3
|
+
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);
|
|
4
|
+
}
|
|
5
|
+
.Header_headerWrapper__11gdejs1 {
|
|
6
|
+
background-color: #FFFFFF;
|
|
7
|
+
margin: 0 auto;
|
|
8
|
+
max-width: 1232px;
|
|
9
|
+
padding: 12px;
|
|
10
|
+
}
|
|
11
|
+
.Header_headerContainer__11gdejs2 {
|
|
12
|
+
display: flex;
|
|
13
|
+
justify-content: space-between;
|
|
14
|
+
align-items: center;
|
|
15
|
+
}
|
|
16
|
+
.Header_menuIconContainer__11gdejs3 {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-self: center;
|
|
19
|
+
}
|
|
20
|
+
.Header_sideModalHeader__11gdejs4 {
|
|
21
|
+
display: flex;
|
|
22
|
+
justify-content: space-between;
|
|
23
|
+
padding: 12px;
|
|
24
|
+
}
|
|
25
|
+
@media screen and (min-width: 960px) {
|
|
26
|
+
.Header_headerWrapper__11gdejs1 {
|
|
27
|
+
padding: 20px 24px;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './Header.css.ts.vanilla.css';
|
|
2
|
+
|
|
3
|
+
var headerContainer = "Header_headerContainer__11gdejs2";
|
|
4
|
+
var headerWrapper = "Header_headerWrapper__11gdejs1";
|
|
5
|
+
var menuIconContainer = "Header_menuIconContainer__11gdejs3";
|
|
6
|
+
var sideModalHeader = "Header_sideModalHeader__11gdejs4";
|
|
7
|
+
var wrapper = "Header_wrapper__11gdejs0";
|
|
8
|
+
|
|
9
|
+
export { headerContainer, headerWrapper, menuIconContainer, sideModalHeader, wrapper };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
declare type THeader = {
|
|
4
|
+
btnLabel?: string;
|
|
5
|
+
btnOnClick?: () => void;
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
headerLink?: React.ReactNode;
|
|
8
|
+
};
|
|
9
|
+
declare const Header: ({ btnLabel, btnOnClick, children, headerLink }: THeader) => JSX.Element;
|
|
10
|
+
|
|
11
|
+
export { Header, THeader };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { Button } from '../Button/Button.js';
|
|
3
|
+
import { SideModal } from '@citygross/components';
|
|
4
|
+
import { Icons } from '@citygross/icons';
|
|
5
|
+
import { theme } from '@citygross/design-tokens';
|
|
6
|
+
import { wrapper, headerWrapper, headerContainer, menuIconContainer, sideModalHeader } from './Header.css.vanilla.js';
|
|
7
|
+
|
|
8
|
+
const Header = ({
|
|
9
|
+
btnLabel,
|
|
10
|
+
btnOnClick,
|
|
11
|
+
children,
|
|
12
|
+
headerLink
|
|
13
|
+
}) => {
|
|
14
|
+
const [showSideModal, setShowSideModal] = useState(false);
|
|
15
|
+
const isMobile = window.innerWidth < (theme.breakpoints?.lg ?? 960);
|
|
16
|
+
return /* @__PURE__ */ React.createElement("div", { className: wrapper }, headerLink && headerLink, /* @__PURE__ */ React.createElement("div", { className: headerWrapper }, /* @__PURE__ */ React.createElement("div", { className: headerContainer }, isMobile ? /* @__PURE__ */ React.createElement(Icons.LogoFlat, null) : /* @__PURE__ */ React.createElement(Icons.Logo, null), isMobile ? /* @__PURE__ */ React.createElement(
|
|
17
|
+
"div",
|
|
18
|
+
{
|
|
19
|
+
className: menuIconContainer,
|
|
20
|
+
onClick: () => setShowSideModal(true)
|
|
21
|
+
},
|
|
22
|
+
/* @__PURE__ */ React.createElement(Icons.Menu, null)
|
|
23
|
+
) : btnLabel && /* @__PURE__ */ React.createElement(Button, { onClick: btnOnClick, variant: "secondary" }, btnLabel))), showSideModal && /* @__PURE__ */ React.createElement(
|
|
24
|
+
SideModal,
|
|
25
|
+
{
|
|
26
|
+
isVisible: true,
|
|
27
|
+
onBackdropClick: () => setShowSideModal(false),
|
|
28
|
+
slideFrom: "right"
|
|
29
|
+
},
|
|
30
|
+
/* @__PURE__ */ React.createElement("div", { className: sideModalHeader }, /* @__PURE__ */ React.createElement(Icons.LogoFlat, null), /* @__PURE__ */ React.createElement(
|
|
31
|
+
Button,
|
|
32
|
+
{
|
|
33
|
+
icon: /* @__PURE__ */ React.createElement(Icons.Cross, { height: 16, width: 16 }),
|
|
34
|
+
onClick: () => setShowSideModal(false),
|
|
35
|
+
round: true,
|
|
36
|
+
variant: "secondary",
|
|
37
|
+
size: "small"
|
|
38
|
+
}
|
|
39
|
+
)),
|
|
40
|
+
children
|
|
41
|
+
));
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export { Header };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { Box, TBox } from './components/Box/Box.js';
|
|
2
2
|
export { AlertBox, TAlertBox } from './components/AlertBox/AlertBox.js';
|
|
3
|
+
export { Header, THeader } from './components/Header/Header.js';
|
|
3
4
|
export { CartItemSummary, TCartItemSummary, TSummaryItem } from './components/CartItemSummary/CartItemSummary.js';
|
|
4
5
|
export { Divider, TDivider } from './components/Divider/Divider.js';
|
|
5
6
|
export { Dot, TDot } from './components/Dot/Dot.js';
|
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { AlertBox } from './components/AlertBox/AlertBox.js';
|
|
|
3
3
|
import '@citygross/icons_v2';
|
|
4
4
|
import 'react';
|
|
5
5
|
import './components/BoxArrow/BoxArrow.css.vanilla.js';
|
|
6
|
+
export { Header } from './components/Header/Header.js';
|
|
6
7
|
export { CartItemSummary } from './components/CartItemSummary/CartItemSummary.js';
|
|
7
8
|
export { Divider } from './components/Divider/Divider.js';
|
|
8
9
|
export { Dot } from './components/Dot/Dot.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components_v2",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.16",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
"react-dom": "^17.0.1"
|
|
66
66
|
},
|
|
67
67
|
"dependencies": {
|
|
68
|
+
"@citygross/components": "^0.8.51",
|
|
68
69
|
"@citygross/design-tokens_v2": "^0.0.3",
|
|
69
70
|
"@citygross/icons": "^0.1.12",
|
|
70
71
|
"@citygross/react-use-bg-wizard": "^0.0.8",
|
|
@@ -79,5 +80,5 @@
|
|
|
79
80
|
"react-slick": "^0.30.1",
|
|
80
81
|
"slick-carousel": "^1.8.1"
|
|
81
82
|
},
|
|
82
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "4680516ff99a0ed654230c4986d5292f3627e099"
|
|
83
84
|
}
|