@drivy/cobalt 2.10.0 → 2.11.0
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.
|
@@ -38,7 +38,7 @@ const Button = forwardRef((props, ref) => {
|
|
|
38
38
|
});
|
|
39
39
|
const content = (React.createElement(React.Fragment, null,
|
|
40
40
|
icon,
|
|
41
|
-
children
|
|
41
|
+
children,
|
|
42
42
|
text && children ? React.createElement(ChevronRightIcon, null) : null));
|
|
43
43
|
if (isLinkProps(restProps)) {
|
|
44
44
|
return (React.createElement(ButtonLinkBase, { ...restProps, className: computedClassName, ref: ref }, content));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n ButtonComponentProps,\n ButtonLinkComponentProps,\n ButtonProps,\n isLinkProps,\n} from \"./type\"\nimport { ButtonLinkBase, ButtonBase } from \"./ButtonComponent\"\nimport { ChevronRightIcon } from \"../../Icon\"\n\nconst getComputedClassName = ({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n isIconOnly,\n fullWidth,\n selected,\n}: {\n className?: ButtonProps[\"className\"]\n variant?: ButtonProps[\"variant\"]\n size?: ButtonProps[\"size\"]\n destructive?: ButtonProps[\"destructive\"]\n primary?: ButtonProps[\"primary\"]\n text?: ButtonProps[\"text\"]\n isIconOnly?: boolean\n fullWidth?: ButtonProps[\"fullWidth\"]\n selected?: ButtonProps[\"selected\"]\n}) => {\n return cx(className, \"cobalt-button\", {\n \"cobalt-button--primary\": primary,\n \"cobalt-button--destructive\": destructive,\n \"cobalt-button--text\": text,\n \"cobalt-button--icon-only\": isIconOnly,\n \"cobalt-button--small\": size === \"small\",\n \"cobalt-button--large\": size === \"large\",\n \"cobalt-button--warning\": variant === \"warning\",\n \"cobalt-button--secondary\": variant === \"secondary\",\n \"cobalt-button--tertiary\": variant === \"tertiary\",\n \"cobalt-button--business\": variant === \"business\",\n \"cobalt-button--success\": variant === \"success\",\n \"cobalt-button--neutral\": variant === \"neutral\",\n \"cobalt-button--selected\": selected,\n \"c-w-full\": fullWidth,\n })\n}\n\ninterface ButtonOverloads {\n (\n props: Exclude<ButtonProps, ButtonComponentProps> &\n React.RefAttributes<HTMLAnchorElement>\n ): React.ReactElement\n (\n props: Exclude<ButtonProps, ButtonLinkComponentProps> &\n React.RefAttributes<HTMLButtonElement>\n ): React.ReactElement\n displayName?: string\n}\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n (props, ref) => {\n const {\n children,\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n icon,\n fullWidth,\n selected,\n ...restProps\n } = props\n\n const computedClassName = getComputedClassName({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n fullWidth,\n selected,\n isIconOnly: !!icon && !children,\n })\n\n const content = (\n <>\n {icon}\n {children
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n ButtonComponentProps,\n ButtonLinkComponentProps,\n ButtonProps,\n isLinkProps,\n} from \"./type\"\nimport { ButtonLinkBase, ButtonBase } from \"./ButtonComponent\"\nimport { ChevronRightIcon } from \"../../Icon\"\n\nconst getComputedClassName = ({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n isIconOnly,\n fullWidth,\n selected,\n}: {\n className?: ButtonProps[\"className\"]\n variant?: ButtonProps[\"variant\"]\n size?: ButtonProps[\"size\"]\n destructive?: ButtonProps[\"destructive\"]\n primary?: ButtonProps[\"primary\"]\n text?: ButtonProps[\"text\"]\n isIconOnly?: boolean\n fullWidth?: ButtonProps[\"fullWidth\"]\n selected?: ButtonProps[\"selected\"]\n}) => {\n return cx(className, \"cobalt-button\", {\n \"cobalt-button--primary\": primary,\n \"cobalt-button--destructive\": destructive,\n \"cobalt-button--text\": text,\n \"cobalt-button--icon-only\": isIconOnly,\n \"cobalt-button--small\": size === \"small\",\n \"cobalt-button--large\": size === \"large\",\n \"cobalt-button--warning\": variant === \"warning\",\n \"cobalt-button--secondary\": variant === \"secondary\",\n \"cobalt-button--tertiary\": variant === \"tertiary\",\n \"cobalt-button--business\": variant === \"business\",\n \"cobalt-button--success\": variant === \"success\",\n \"cobalt-button--neutral\": variant === \"neutral\",\n \"cobalt-button--selected\": selected,\n \"c-w-full\": fullWidth,\n })\n}\n\ninterface ButtonOverloads {\n (\n props: Exclude<ButtonProps, ButtonComponentProps> &\n React.RefAttributes<HTMLAnchorElement>\n ): React.ReactElement\n (\n props: Exclude<ButtonProps, ButtonLinkComponentProps> &\n React.RefAttributes<HTMLButtonElement>\n ): React.ReactElement\n displayName?: string\n}\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n (props, ref) => {\n const {\n children,\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n icon,\n fullWidth,\n selected,\n ...restProps\n } = props\n\n const computedClassName = getComputedClassName({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n fullWidth,\n selected,\n isIconOnly: !!icon && !children,\n })\n\n const content = (\n <>\n {icon}\n {children}\n {text && children ? <ChevronRightIcon /> : null}\n </>\n )\n\n if (isLinkProps(restProps)) {\n return (\n <ButtonLinkBase\n {...(restProps as ButtonLinkComponentProps)}\n className={computedClassName}\n ref={ref as React.ForwardedRef<HTMLAnchorElement>}\n >\n {content}\n </ButtonLinkBase>\n )\n }\n\n return (\n <ButtonBase\n {...(restProps as ButtonComponentProps)}\n className={computedClassName}\n ref={ref as React.ForwardedRef<HTMLButtonElement>}\n >\n {content}\n </ButtonBase>\n )\n }\n) as ButtonOverloads\n\nButton.displayName = \"Button\"\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAS,EACT,QAAQ,GAWT,KAAI;AACH,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;AACpC,QAAA,wBAAwB,EAAE,OAAO;AACjC,QAAA,4BAA4B,EAAE,WAAW;AACzC,QAAA,qBAAqB,EAAE,IAAI;AAC3B,QAAA,0BAA0B,EAAE,UAAU;QACtC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,0BAA0B,EAAE,OAAO,KAAK,WAAW;QACnD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,wBAAwB,EAAE,OAAO,KAAK,SAAS;AAC/C,QAAA,yBAAyB,EAAE,QAAQ;AACnC,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAcK,MAAA,MAAM,GAAG,UAAU,CACvB,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;QAC7C,SAAS;QACT,OAAO;QACP,IAAI;QACJ,WAAW;QACX,OAAO;QACP,IAAI;QACJ,SAAS;QACT,QAAQ;AACR,QAAA,UAAU,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ;AAChC,KAAA,CAAC,CAAA;IAEF,MAAM,OAAO,IACX,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,IAAI;QACJ,QAAQ;AACR,QAAA,IAAI,IAAI,QAAQ,GAAG,KAAC,CAAA,aAAA,CAAA,gBAAgB,EAAG,IAAA,CAAA,GAAG,IAAI,CAC9C,CACJ,CAAA;AAED,IAAA,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;AAC1B,QAAA,QACE,KAAC,CAAA,aAAA,CAAA,cAAc,EACR,EAAA,GAAA,SAAsC,EAC3C,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACO,EAClB;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,EACJ,EAAA,GAAA,SAAkC,EACvC,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACG,EACd;AACH,CAAC,EACiB;AAEpB,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@drivy/cobalt",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.11.0",
|
|
4
4
|
"description": "Opinionated design system for Drivy's projects.",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"types": "types/src/index.d.ts",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@getaround-eu/prettier-config": "1.2.1",
|
|
43
43
|
"@getaround-eu/stylelint-config": "3.0.1",
|
|
44
44
|
"@getaround-eu/ts-config": "2.2.1",
|
|
45
|
-
"@rollup/plugin-commonjs": "28.0.
|
|
45
|
+
"@rollup/plugin-commonjs": "28.0.9",
|
|
46
46
|
"@rollup/plugin-json": "6.1.0",
|
|
47
47
|
"@rushstack/eslint-patch": "1.12.0",
|
|
48
48
|
"@storybook/addon-essentials": "7.6.21",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@types/react": "18.3.24",
|
|
63
63
|
"@types/react-dom": "18.3.7",
|
|
64
64
|
"autoprefixer": "10.4.23",
|
|
65
|
-
"core-js": "3.
|
|
65
|
+
"core-js": "3.48.0",
|
|
66
66
|
"css-loader": "7.1.2",
|
|
67
67
|
"eslint": "8.57.1",
|
|
68
68
|
"eslint-plugin-storybook": "^0.12.0",
|
|
@@ -30,126 +30,164 @@
|
|
|
30
30
|
flex-shrink: 0;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
min-height: 48px;
|
|
36
|
-
min-width: 48px;
|
|
33
|
+
&[href][aria-disabled="true"] {
|
|
34
|
+
pointer-events: none;
|
|
37
35
|
}
|
|
38
36
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
font-size: 14px;
|
|
37
|
+
&[disabled]:not([aria-busy="true"]),
|
|
38
|
+
&[href][aria-disabled="true"]:not([aria-busy="true"]) {
|
|
39
|
+
@apply c-state-none c-text-onSurfaceDisabled c-drop-shadow-none hover:c-no-underline;
|
|
40
|
+
opacity: 1;
|
|
41
|
+
cursor: not-allowed;
|
|
45
42
|
|
|
46
|
-
.cobalt-
|
|
47
|
-
|
|
48
|
-
height: 20px;
|
|
43
|
+
&:not(.cobalt-button--text) {
|
|
44
|
+
@apply c-bg-disabled c-border-transparent;
|
|
49
45
|
}
|
|
46
|
+
}
|
|
50
47
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
&[aria-busy="true"]:not(.cobalt-button--text) {
|
|
49
|
+
@apply c-state-none c-drop-shadow-none hover:c-no-underline;
|
|
50
|
+
--c-state-interactive-color: var(--c-press);
|
|
54
51
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
&:focus,
|
|
53
|
+
&:hover,
|
|
54
|
+
&:active {
|
|
55
|
+
--c-state-interactive-color: var(--c-press);
|
|
58
56
|
|
|
59
|
-
|
|
60
|
-
@apply c-bg-secondary c-border-secondary c-text-onSecondary;
|
|
57
|
+
transform: scale(1);
|
|
61
58
|
}
|
|
59
|
+
}
|
|
62
60
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
.cobalt-button__loading-icon {
|
|
62
|
+
@apply c-text-onSurface;
|
|
63
|
+
position: absolute;
|
|
66
64
|
|
|
67
|
-
|
|
68
|
-
@apply c-bg-success c-border-success c-text-onSuccess;
|
|
69
|
-
}
|
|
65
|
+
display: none;
|
|
70
66
|
|
|
71
|
-
|
|
72
|
-
@apply c-bg-neutral c-border-neutral c-text-onNeutral;
|
|
73
|
-
}
|
|
67
|
+
margin: auto;
|
|
74
68
|
}
|
|
75
69
|
|
|
76
|
-
|
|
77
|
-
|
|
70
|
+
&[aria-busy="true"] {
|
|
71
|
+
color: transparent !important;
|
|
78
72
|
|
|
79
|
-
|
|
80
|
-
@apply c-bg-error c-border-error c-text-onError;
|
|
81
|
-
}
|
|
73
|
+
cursor: progress;
|
|
82
74
|
}
|
|
83
75
|
|
|
84
|
-
|
|
85
|
-
|
|
76
|
+
&[aria-busy="true"] > .cobalt-button__loading-icon {
|
|
77
|
+
display: inline-block;
|
|
86
78
|
}
|
|
79
|
+
}
|
|
87
80
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
81
|
+
.cobalt-button--large {
|
|
82
|
+
@apply c-px-md;
|
|
83
|
+
min-height: 48px;
|
|
84
|
+
min-width: 48px;
|
|
85
|
+
}
|
|
91
86
|
|
|
92
|
-
|
|
87
|
+
.cobalt-button--small {
|
|
88
|
+
@apply c-px-[12px] hover:c-drop-shadow-md;
|
|
89
|
+
min-width: 32px;
|
|
90
|
+
min-height: 32px;
|
|
93
91
|
|
|
94
|
-
|
|
95
|
-
|
|
92
|
+
font-size: 14px;
|
|
93
|
+
|
|
94
|
+
.cobalt-Icon {
|
|
95
|
+
width: 20px;
|
|
96
|
+
height: 20px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&.cobalt-button--warning {
|
|
100
|
+
@apply c-bg-warning c-border-warning c-text-onWarning;
|
|
101
|
+
|
|
102
|
+
.cobalt-button__loading-icon {
|
|
103
|
+
@apply c-text-onWarning;
|
|
96
104
|
}
|
|
105
|
+
}
|
|
97
106
|
|
|
98
|
-
|
|
99
|
-
|
|
107
|
+
&.cobalt-button--tertiary {
|
|
108
|
+
@apply c-bg-tertiary c-border-tertiary c-text-onTertiary;
|
|
109
|
+
|
|
110
|
+
.cobalt-button__loading-icon {
|
|
111
|
+
@apply c-text-onTertiary;
|
|
100
112
|
}
|
|
101
113
|
}
|
|
102
114
|
|
|
103
|
-
&.cobalt-button--
|
|
104
|
-
@apply c-text-
|
|
115
|
+
&.cobalt-button--secondary {
|
|
116
|
+
@apply c-bg-secondary c-border-secondary c-text-onSecondary;
|
|
117
|
+
|
|
118
|
+
.cobalt-button__loading-icon {
|
|
119
|
+
@apply c-text-onSecondary;
|
|
120
|
+
}
|
|
105
121
|
}
|
|
106
122
|
|
|
107
|
-
&.cobalt-button--
|
|
108
|
-
@apply c-bg-
|
|
123
|
+
&.cobalt-button--business {
|
|
124
|
+
@apply c-bg-businessContainer c-border-businessContainer c-text-onBusinessContainer;
|
|
125
|
+
|
|
126
|
+
.cobalt-button__loading-icon {
|
|
127
|
+
@apply c-text-onBusinessContainer;
|
|
128
|
+
}
|
|
109
129
|
}
|
|
110
130
|
|
|
111
|
-
|
|
112
|
-
|
|
131
|
+
&.cobalt-button--success {
|
|
132
|
+
@apply c-bg-success c-border-success c-text-onSuccess;
|
|
133
|
+
|
|
134
|
+
.cobalt-button__loading-icon {
|
|
135
|
+
@apply c-text-onSuccess;
|
|
136
|
+
}
|
|
113
137
|
}
|
|
114
138
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
@apply c-state-none c-text-onSurfaceDisabled c-drop-shadow-none hover:c-no-underline;
|
|
118
|
-
opacity: 1;
|
|
119
|
-
cursor: not-allowed;
|
|
139
|
+
&.cobalt-button--neutral {
|
|
140
|
+
@apply c-bg-neutral c-border-neutral c-text-onNeutral;
|
|
120
141
|
|
|
121
|
-
|
|
122
|
-
@apply c-
|
|
142
|
+
.cobalt-button__loading-icon {
|
|
143
|
+
@apply c-text-onNeutral;
|
|
123
144
|
}
|
|
124
145
|
}
|
|
146
|
+
}
|
|
125
147
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
--c-state-interactive-color: var(--c-press);
|
|
129
|
-
cursor: not-allowed;
|
|
148
|
+
.cobalt-button--primary {
|
|
149
|
+
@apply c-bg-primary c-border-primary c-text-onPrimary;
|
|
130
150
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
--c-state-interactive-color: var(--c-press);
|
|
151
|
+
.cobalt-button__loading-icon {
|
|
152
|
+
@apply c-text-onPrimary;
|
|
153
|
+
}
|
|
135
154
|
|
|
136
|
-
|
|
155
|
+
&.cobalt-button--destructive {
|
|
156
|
+
@apply c-bg-error c-border-error c-text-onError;
|
|
157
|
+
|
|
158
|
+
.cobalt-button__loading-icon {
|
|
159
|
+
@apply c-text-onError;
|
|
137
160
|
}
|
|
138
161
|
}
|
|
162
|
+
}
|
|
139
163
|
|
|
140
|
-
|
|
141
|
-
|
|
164
|
+
.cobalt-button--text {
|
|
165
|
+
@apply c-state-none c-transform-none hover:c-underline c-px-none c-bg-transparent c-border-transparent c-text-current c-gap-none;
|
|
166
|
+
transition: text-underline-offset 0.25s ease;
|
|
142
167
|
|
|
143
|
-
|
|
168
|
+
text-underline-offset: 2px;
|
|
144
169
|
|
|
145
|
-
|
|
170
|
+
&:active {
|
|
171
|
+
text-underline-offset: 1px;
|
|
146
172
|
}
|
|
147
173
|
|
|
148
|
-
|
|
149
|
-
|
|
174
|
+
&:not(.cobalt-button--icon-only) {
|
|
175
|
+
@apply c-drop-shadow-none;
|
|
150
176
|
}
|
|
151
177
|
|
|
152
|
-
|
|
153
|
-
|
|
178
|
+
&.cobalt-button--icon-only:not([aria-busy="true"]):not([disabled]) {
|
|
179
|
+
@apply c-state-interactive;
|
|
154
180
|
}
|
|
155
181
|
}
|
|
182
|
+
|
|
183
|
+
.cobalt-button--icon-only {
|
|
184
|
+
@apply c-p-none c-rounded-full;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.cobalt-button--destructive {
|
|
188
|
+
@apply c-text-error;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.cobalt-button--selected {
|
|
192
|
+
@apply c-bg-primaryContainer c-text-onPrimaryContainer c-border-onPrimaryContainer;
|
|
193
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/
|
|
1
|
+
{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}
|