@knapsack/sandbox-components 4.71.9--canary.5152.bf0cf9b.0 → 4.71.9--canary.5152.a80e0c8.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +22 -0
- package/dist/css/ks-sandbox-styles.css +51 -4
- package/dist/react/button.d.ts +1 -0
- package/dist/react/button.d.ts.map +1 -1
- package/dist/react/button.js +2 -1
- package/dist/react/button.js.map +1 -1
- package/package.json +7 -7
- package/src/css/button.css +28 -2
- package/src/react/button.tsx +3 -0
package/CHANGELOG.md
CHANGED
@@ -1,3 +1,25 @@
|
|
1
|
+
# v4.71.8 (Fri Nov 15 2024)
|
2
|
+
|
3
|
+
#### 🐛 Bug Fix
|
4
|
+
|
5
|
+
- Add button modes for sales demos [#5173](https://github.com/knapsack-labs/app-monorepo/pull/5173) ([@brittanysmart](https://github.com/brittanysmart))
|
6
|
+
- Merge branch 'latest' into feature/KSP-5764-add-button-modes ([@brittanysmart](https://github.com/brittanysmart))
|
7
|
+
- Merge branch 'latest' into GormanDesign-patch-2 ([@GormanDesign](https://github.com/GormanDesign))
|
8
|
+
- feat: add status button variations for sales demos ([@brittanysmart](https://github.com/brittanysmart))
|
9
|
+
|
10
|
+
#### 🏠 Internal
|
11
|
+
|
12
|
+
- update gsk-digital-channels sso page content [#5178](https://github.com/knapsack-labs/app-monorepo/pull/5178) ([@GormanDesign](https://github.com/GormanDesign))
|
13
|
+
- fix figma tiles show processing message indefinitely [#5179](https://github.com/knapsack-labs/app-monorepo/pull/5179) ([@mabry1985](https://github.com/mabry1985))
|
14
|
+
|
15
|
+
#### Authors: 3
|
16
|
+
|
17
|
+
- Brittany Smart ([@brittanysmart](https://github.com/brittanysmart))
|
18
|
+
- Josh Mabry ([@mabry1985](https://github.com/mabry1985))
|
19
|
+
- Matt Gorman ([@GormanDesign](https://github.com/GormanDesign))
|
20
|
+
|
21
|
+
---
|
22
|
+
|
1
23
|
# v4.71.6 (Thu Nov 14 2024)
|
2
24
|
|
3
25
|
#### 🐛 Bug Fix
|
@@ -99,6 +99,9 @@
|
|
99
99
|
--collections-theme-text-subtle-basis-dark: #bec3d3;
|
100
100
|
--collections-theme-text-subtle-basis-light: #6e7a82;
|
101
101
|
--color-black: var(--color-neutral-800);
|
102
|
+
--color-error: #ff5c46;
|
103
|
+
--color-success: #6bc313;
|
104
|
+
--color-warning: #fab120;
|
102
105
|
--color-white: #ffffff;
|
103
106
|
--color-neutral-100: #fafafb;
|
104
107
|
--color-neutral-200: #f6f6f7;
|
@@ -1238,8 +1241,7 @@ body {
|
|
1238
1241
|
.button {
|
1239
1242
|
border-radius: 4px;
|
1240
1243
|
border-radius: var(--radius-small);
|
1241
|
-
border: 1px solid
|
1242
|
-
border: 1px solid var(--brand-color);
|
1244
|
+
border: 1px solid;
|
1243
1245
|
font-family: Inter;
|
1244
1246
|
font-family: var(--brand-font-family);
|
1245
1247
|
font-weight: 600;
|
@@ -1283,19 +1285,64 @@ body {
|
|
1283
1285
|
}
|
1284
1286
|
|
1285
1287
|
.button--type-outlined {
|
1286
|
-
background-color:
|
1287
|
-
background-color: var(--color-white);
|
1288
|
+
background-color: transparent;
|
1288
1289
|
color: #7a34ed;
|
1289
1290
|
color: var(--brand-color);
|
1291
|
+
border-color: #7a34ed;
|
1292
|
+
border-color: var(--brand-color);
|
1290
1293
|
}
|
1291
1294
|
|
1295
|
+
.button--type-outlined.button--mode-success {
|
1296
|
+
color: #6bc313;
|
1297
|
+
color: var(--color-success);
|
1298
|
+
border-color: #6bc313;
|
1299
|
+
border-color: var(--color-success);
|
1300
|
+
}
|
1301
|
+
|
1302
|
+
.button--type-outlined.button--mode-error {
|
1303
|
+
color: #ff5c46;
|
1304
|
+
color: var(--color-error);
|
1305
|
+
border-color: #ff5c46;
|
1306
|
+
border-color: var(--color-error);
|
1307
|
+
}
|
1308
|
+
|
1309
|
+
.button--type-outlined.button--mode-warning {
|
1310
|
+
color: #fab120;
|
1311
|
+
color: var(--color-warning);
|
1312
|
+
border-color: #fab120;
|
1313
|
+
border-color: var(--color-warning);
|
1314
|
+
}
|
1315
|
+
|
1292
1316
|
.button--type-filled {
|
1293
1317
|
background-color: #7a34ed;
|
1294
1318
|
background-color: var(--brand-color);
|
1295
1319
|
color: #ffffff;
|
1296
1320
|
color: var(--color-white);
|
1321
|
+
border-color: #7a34ed;
|
1322
|
+
border-color: var(--brand-color);
|
1297
1323
|
}
|
1298
1324
|
|
1325
|
+
.button--type-filled.button--mode-success {
|
1326
|
+
background-color: #6bc313;
|
1327
|
+
background-color: var(--color-success);
|
1328
|
+
border-color: #6bc313;
|
1329
|
+
border-color: var(--color-success);
|
1330
|
+
}
|
1331
|
+
|
1332
|
+
.button--type-filled.button--mode-error {
|
1333
|
+
background-color: #ff5c46;
|
1334
|
+
background-color: var(--color-error);
|
1335
|
+
border-color: #ff5c46;
|
1336
|
+
border-color: var(--color-error);
|
1337
|
+
}
|
1338
|
+
|
1339
|
+
.button--type-filled.button--mode-warning {
|
1340
|
+
background-color: #fab120;
|
1341
|
+
background-color: var(--color-warning);
|
1342
|
+
border-color: #fab120;
|
1343
|
+
border-color: var(--color-warning);
|
1344
|
+
}
|
1345
|
+
|
1299
1346
|
.card {
|
1300
1347
|
border: solid 1px var(--color-border);
|
1301
1348
|
border-radius: 8px;
|
package/dist/react/button.d.ts
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/react/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/react/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACnD,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmBxC,CAAC"}
|
package/dist/react/button.js
CHANGED
@@ -1,8 +1,9 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
2
|
import { clsx } from 'clsx';
|
3
|
-
export const Button = ({ type = 'filled', size = 'medium', label = 'Button', }) => {
|
3
|
+
export const Button = ({ mode = 'default', type = 'filled', size = 'medium', label = 'Button', }) => {
|
4
4
|
return (_jsx("button", { type: "button", className: clsx({
|
5
5
|
button: true,
|
6
|
+
[`button--mode-${mode}`]: true,
|
6
7
|
[`button--size-${size}`]: true,
|
7
8
|
[`button--type-${type}`]: true,
|
8
9
|
}), children: label }));
|
package/dist/react/button.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/react/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/react/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAU5B,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,QAAQ,GACjB,EAAE,EAAE;IACH,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC;YACd,MAAM,EAAE,IAAI;YACZ,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,IAAI;YAC9B,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,IAAI;YAC9B,CAAC,gBAAgB,IAAI,EAAE,CAAC,EAAE,IAAI;SAC/B,CAAC,YAED,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@knapsack/sandbox-components",
|
3
3
|
"description": "",
|
4
|
-
"version": "4.71.9--canary.5152.
|
4
|
+
"version": "4.71.9--canary.5152.a80e0c8.0",
|
5
5
|
"type": "module",
|
6
6
|
"exports": {
|
7
7
|
"./css": "./dist/css/ks-sandbox-styles.css",
|
@@ -44,11 +44,11 @@
|
|
44
44
|
"vue": "^3.5.12"
|
45
45
|
},
|
46
46
|
"devDependencies": {
|
47
|
-
"@knapsack/eslint-config-starter": "4.71.9--canary.5152.
|
48
|
-
"@knapsack/postcss-config-starter": "4.71.9--canary.5152.
|
49
|
-
"@knapsack/prettier-config": "4.71.9--canary.5152.
|
50
|
-
"@knapsack/sandbox-tokens": "4.71.9--canary.5152.
|
51
|
-
"@knapsack/typescript-config-starter": "4.71.9--canary.5152.
|
47
|
+
"@knapsack/eslint-config-starter": "4.71.9--canary.5152.a80e0c8.0",
|
48
|
+
"@knapsack/postcss-config-starter": "4.71.9--canary.5152.a80e0c8.0",
|
49
|
+
"@knapsack/prettier-config": "4.71.9--canary.5152.a80e0c8.0",
|
50
|
+
"@knapsack/sandbox-tokens": "4.71.9--canary.5152.a80e0c8.0",
|
51
|
+
"@knapsack/typescript-config-starter": "4.71.9--canary.5152.a80e0c8.0",
|
52
52
|
"@types/node": "^20.17.6",
|
53
53
|
"@types/react": "^18.3.12",
|
54
54
|
"esbuild": "^0.24.0",
|
@@ -68,5 +68,5 @@
|
|
68
68
|
"directory": "apps/ui/libs/sandbox-components",
|
69
69
|
"type": "git"
|
70
70
|
},
|
71
|
-
"gitHead": "
|
71
|
+
"gitHead": "a80e0c8dcfa75221842b21ef1683c98340f55e77"
|
72
72
|
}
|
package/src/css/button.css
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
.button {
|
2
2
|
border-radius: var(--radius-small);
|
3
|
-
border: 1px solid
|
3
|
+
border: 1px solid;
|
4
4
|
font-family: var(--brand-font-family);
|
5
5
|
font-weight: 600;
|
6
6
|
transition: all 0.3s ease;
|
@@ -23,12 +23,38 @@
|
|
23
23
|
}
|
24
24
|
&--type {
|
25
25
|
&-outlined {
|
26
|
-
background-color:
|
26
|
+
background-color: transparent;
|
27
27
|
color: var(--brand-color);
|
28
|
+
border-color: var(--brand-color);
|
29
|
+
&.button--mode-success {
|
30
|
+
color: var(--color-success);
|
31
|
+
border-color: var(--color-success);
|
32
|
+
}
|
33
|
+
&.button--mode-error {
|
34
|
+
color: var(--color-error);
|
35
|
+
border-color: var(--color-error);
|
36
|
+
}
|
37
|
+
&.button--mode-warning {
|
38
|
+
color: var(--color-warning);
|
39
|
+
border-color: var(--color-warning);
|
40
|
+
}
|
28
41
|
}
|
29
42
|
&-filled {
|
30
43
|
background-color: var(--brand-color);
|
31
44
|
color: var(--color-white);
|
45
|
+
border-color: var(--brand-color);
|
46
|
+
&.button--mode-success {
|
47
|
+
background-color: var(--color-success);
|
48
|
+
border-color: var(--color-success);
|
49
|
+
}
|
50
|
+
&.button--mode-error {
|
51
|
+
background-color: var(--color-error);
|
52
|
+
border-color: var(--color-error);
|
53
|
+
}
|
54
|
+
&.button--mode-warning {
|
55
|
+
background-color: var(--color-warning);
|
56
|
+
border-color: var(--color-warning);
|
57
|
+
}
|
32
58
|
}
|
33
59
|
}
|
34
60
|
}
|
package/src/react/button.tsx
CHANGED
@@ -2,12 +2,14 @@ import { clsx } from 'clsx';
|
|
2
2
|
import React from 'react';
|
3
3
|
|
4
4
|
interface ButtonProps {
|
5
|
+
mode?: 'default' | 'success' | 'error' | 'warning';
|
5
6
|
type?: 'filled' | 'outlined';
|
6
7
|
size?: 'small' | 'medium' | 'large';
|
7
8
|
label: string;
|
8
9
|
}
|
9
10
|
|
10
11
|
export const Button: React.FC<ButtonProps> = ({
|
12
|
+
mode = 'default',
|
11
13
|
type = 'filled',
|
12
14
|
size = 'medium',
|
13
15
|
label = 'Button',
|
@@ -17,6 +19,7 @@ export const Button: React.FC<ButtonProps> = ({
|
|
17
19
|
type="button"
|
18
20
|
className={clsx({
|
19
21
|
button: true,
|
22
|
+
[`button--mode-${mode}`]: true,
|
20
23
|
[`button--size-${size}`]: true,
|
21
24
|
[`button--type-${type}`]: true,
|
22
25
|
})}
|