@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 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 #7a34ed;
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: #ffffff;
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;
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  interface ButtonProps {
3
+ mode?: 'default' | 'success' | 'error' | 'warning';
3
4
  type?: 'filled' | 'outlined';
4
5
  size?: 'small' | 'medium' | 'large';
5
6
  label: string;
@@ -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,CAiBxC,CAAC"}
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"}
@@ -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 }));
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/react/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAS5B,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,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;SAC/B,CAAC,YAED,KAAK,GACC,CACV,CAAC;AACJ,CAAC,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.bf0cf9b.0",
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.bf0cf9b.0",
48
- "@knapsack/postcss-config-starter": "4.71.9--canary.5152.bf0cf9b.0",
49
- "@knapsack/prettier-config": "4.71.9--canary.5152.bf0cf9b.0",
50
- "@knapsack/sandbox-tokens": "4.71.9--canary.5152.bf0cf9b.0",
51
- "@knapsack/typescript-config-starter": "4.71.9--canary.5152.bf0cf9b.0",
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": "bf0cf9b0161f311ed2695b1dc1ddcff8211782c0"
71
+ "gitHead": "a80e0c8dcfa75221842b21ef1683c98340f55e77"
72
72
  }
@@ -1,6 +1,6 @@
1
1
  .button {
2
2
  border-radius: var(--radius-small);
3
- border: 1px solid var(--brand-color);
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: var(--color-white);
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
  }
@@ -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
  })}