@knapsack/sandbox-components 4.72.0--canary.4920.be98a9b.0 → 4.72.0--canary.5313.51b7b5f.0

package/CHANGELOG.md

@@ -1,3 +1,160 @@
+# v4.71.16 (Thu Dec 05 2024)
+
+#### 🐛 Bug Fix
+
+- refactor React Renderer to use `tsc` for build [#5224](https://github.com/knapsack-labs/app-monorepo/pull/5224) ([@EvanLovely](https://github.com/EvanLovely) [@mabry1985](https://github.com/mabry1985))
+
+#### Authors: 2
+
+- Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
+- Josh Mabry ([@mabry1985](https://github.com/mabry1985))
+
+---
+
+# v4.71.14 (Wed Dec 04 2024)
+
+#### 🐛 Bug Fix
+
+- fix sandbox header width [#5243](https://github.com/knapsack-labs/app-monorepo/pull/5243) ([@GormanDesign](https://github.com/GormanDesign))
+- fix sandbox header width ([@GormanDesign](https://github.com/GormanDesign))
+
+#### Authors: 1
+
+- Matt Gorman ([@GormanDesign](https://github.com/GormanDesign))
+
+---
+
+# v4.71.13 (Wed Dec 04 2024)
+
+#### 🐛 Bug Fix
+
+- Merge branch 'feature/ksp-5777-gsk-sso-issues' into feature/sso-config-via-db ([@EvanLovely](https://github.com/EvanLovely))
+- Merge branch 'latest' into feature/ksp-5777-gsk-sso-issues ([@illepic](https://github.com/illepic))
+- Bump version to: v4.71.12 \[skip ci\] ([@KnapsackBot](https://github.com/KnapsackBot))
+- Update CHANGELOG.md \[skip ci\] ([@KnapsackBot](https://github.com/KnapsackBot))
+- Bump version to: v4.71.11 \[skip ci\] ([@KnapsackBot](https://github.com/KnapsackBot))
+
+#### 🏠 Internal
+
+- refactor Cypress user login [#5225](https://github.com/knapsack-labs/app-monorepo/pull/5225) ([@EvanLovely](https://github.com/EvanLovely))
+- Update Node.js to v20.18.1 [#5197](https://github.com/knapsack-labs/app-monorepo/pull/5197) ([@renovate[bot]](https://github.com/renovate[bot]))
+- adds evt handlers for design src logs [#5194](https://github.com/knapsack-labs/app-monorepo/pull/5194) ([@mabry1985](https://github.com/mabry1985))
+- setup login w popup [#5209](https://github.com/knapsack-labs/app-monorepo/pull/5209) ([@GormanDesign](https://github.com/GormanDesign) [@mabry1985](https://github.com/mabry1985) [@EvanLovely](https://github.com/EvanLovely) [@KnapsackBot](https://github.com/KnapsackBot) [@illepic](https://github.com/illepic))
+- migrate to new Figma oAuth endpoints and configuration [#5206](https://github.com/knapsack-labs/app-monorepo/pull/5206) ([@mabry1985](https://github.com/mabry1985))
+
+#### Authors: 6
+
+- [@renovate[bot]](https://github.com/renovate[bot])
+- Christopher Bloom ([@illepic](https://github.com/illepic))
+- Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
+- Josh Mabry ([@mabry1985](https://github.com/mabry1985))
+- KnapsackBot ([@KnapsackBot](https://github.com/KnapsackBot))
+- Matt Gorman ([@GormanDesign](https://github.com/GormanDesign))
+
+---
+
+# v4.71.12 (Thu Nov 21 2024)
+
+#### 🐛 Bug Fix
+
+- Fix component alignment in pattern stage and embeds [#5138](https://github.com/knapsack-labs/app-monorepo/pull/5138) ([@GormanDesign](https://github.com/GormanDesign))
+- Merge branch 'latest' into feature/ksp-5732-fix-component-alignment-in-pattern-stage-and-embeds ([@GormanDesign](https://github.com/GormanDesign))
+
+#### Authors: 1
+
+- Matt Gorman ([@GormanDesign](https://github.com/GormanDesign))
+
+---
+
+# v4.71.10 (Thu Nov 21 2024)
+
+#### 🐛 Bug Fix
+
+- fix prop reordering doesnt stick [#5196](https://github.com/knapsack-labs/app-monorepo/pull/5196) ([@mabry1985](https://github.com/mabry1985))
+
+#### Authors: 1
+
+- Josh Mabry ([@mabry1985](https://github.com/mabry1985))
+
+---
+
+# v4.71.8 (Fri Nov 15 2024)
+
+#### 🐛 Bug Fix
+
+- Add button modes for sales demos [#5173](https://github.com/knapsack-labs/app-monorepo/pull/5173) ([@brittanysmart](https://github.com/brittanysmart))
+- Merge branch 'latest' into feature/KSP-5764-add-button-modes ([@brittanysmart](https://github.com/brittanysmart))
+- Merge branch 'latest' into GormanDesign-patch-2 ([@GormanDesign](https://github.com/GormanDesign))
+- feat: add status button variations for sales demos ([@brittanysmart](https://github.com/brittanysmart))
+
+#### 🏠 Internal
+
+- update gsk-digital-channels sso page content [#5178](https://github.com/knapsack-labs/app-monorepo/pull/5178) ([@GormanDesign](https://github.com/GormanDesign))
+- fix figma tiles show processing message indefinitely [#5179](https://github.com/knapsack-labs/app-monorepo/pull/5179) ([@mabry1985](https://github.com/mabry1985))
+
+#### Authors: 3
+
+- Brittany Smart ([@brittanysmart](https://github.com/brittanysmart))
+- Josh Mabry ([@mabry1985](https://github.com/mabry1985))
+- Matt Gorman ([@GormanDesign](https://github.com/GormanDesign))
+
+---
+
+# v4.71.6 (Thu Nov 14 2024)
+
+#### 🐛 Bug Fix
+
+- Merge branch 'latest' into feature/ksp-5437-update-auth0-node-sdk ([@freneticpixel](https://github.com/freneticpixel))
+- Merge branch 'latest' into feature/ksp-5710-collections-block-filters ([@GormanDesign](https://github.com/GormanDesign))
+- Merge remote-tracking branch 'origin/latest' into feature/ksp-5437-update-auth0-node-sdk ([@freneticpixel](https://github.com/freneticpixel))
+
+#### 🏠 Internal
+
+- Update dependency @types/node to ^20.17.6 [#5127](https://github.com/knapsack-labs/app-monorepo/pull/5127) ([@renovate[bot]](https://github.com/renovate[bot]))
+
+#### Authors: 3
+
+- [@renovate[bot]](https://github.com/renovate[bot])
+- Jim Frenette ([@freneticpixel](https://github.com/freneticpixel))
+- Matt Gorman ([@GormanDesign](https://github.com/GormanDesign))
+
+---
+
+# v4.71.5 (Tue Nov 05 2024)
+
+#### 🐛 Bug Fix
+
+- Merge branch 'latest' into feature/ksp-5668-handle-figma-blocks-when-updating-design-source-file ([@GormanDesign](https://github.com/GormanDesign))
+
+#### 🏠 Internal
+
+- Update dependency @types/node to ^20.17.5 [#5086](https://github.com/knapsack-labs/app-monorepo/pull/5086) ([@renovate[bot]](https://github.com/renovate[bot]))
+- Update react monorepo [#5072](https://github.com/knapsack-labs/app-monorepo/pull/5072) ([@renovate[bot]](https://github.com/renovate[bot]))
+- Update dependency @react-aria/visually-hidden to ^3.8.17 [#5078](https://github.com/knapsack-labs/app-monorepo/pull/5078) ([@renovate[bot]](https://github.com/renovate[bot]))
+- Update dependency @types/node to ^20.17.4 [#5080](https://github.com/knapsack-labs/app-monorepo/pull/5080) ([@renovate[bot]](https://github.com/renovate[bot]))
+- Update vue monorepo to ^3.5.12 [#5050](https://github.com/knapsack-labs/app-monorepo/pull/5050) ([@renovate[bot]](https://github.com/renovate[bot]))
+- Update dependency @types/node to ^20.17.3 [#5046](https://github.com/knapsack-labs/app-monorepo/pull/5046) ([@renovate[bot]](https://github.com/renovate[bot]))
+
+#### Authors: 2
+
+- [@renovate[bot]](https://github.com/renovate[bot])
+- Matt Gorman ([@GormanDesign](https://github.com/GormanDesign))
+
+---
+
+# v4.71.4 (Tue Oct 29 2024)
+
+#### 🏠 Internal
+
+- Update dependency tailwindcss to ^3.4.14 [#5039](https://github.com/knapsack-labs/app-monorepo/pull/5039) ([@renovate[bot]](https://github.com/renovate[bot]))
+- Update dependency @types/node to ^20.17.2 [#5020](https://github.com/knapsack-labs/app-monorepo/pull/5020) ([@renovate[bot]](https://github.com/renovate[bot]))
+
+#### Authors: 1
+
+- [@renovate[bot]](https://github.com/renovate[bot])
+
+---
+
 # v4.71.1 (Wed Oct 23 2024)
 
 #### 🐛 Bug Fix

package/dist/css/ks-sandbox-styles.css

@@ -99,6 +99,9 @@
   --collections-theme-text-subtle-basis-dark: #bec3d3;
   --collections-theme-text-subtle-basis-light: #6e7a82;
   --color-black: var(--color-neutral-800);
+  --color-error: #ff5c46;
+  --color-success: #6bc313;
+  --color-warning: #fab120;
   --color-white: #ffffff;
   --color-neutral-100: #fafafb;
   --color-neutral-200: #f6f6f7;
@@ -1238,8 +1241,7 @@ body {
 .button {
   border-radius: 4px;
   border-radius: var(--radius-small);
-  border: 1px solid #7a34ed;
-  border: 1px solid var(--brand-color);
+  border: 1px solid;
   font-family: Inter;
   font-family: var(--brand-font-family);
   font-weight: 600;
@@ -1283,19 +1285,64 @@ body {
     }
 
 .button--type-outlined {
-      background-color: #ffffff;
-      background-color: var(--color-white);
+      background-color: transparent;
       color: #7a34ed;
       color: var(--brand-color);
+      border-color: #7a34ed;
+      border-color: var(--brand-color);
     }
 
+.button--type-outlined.button--mode-success {
+        color: #6bc313;
+        color: var(--color-success);
+        border-color: #6bc313;
+        border-color: var(--color-success);
+      }
+
+.button--type-outlined.button--mode-error {
+        color: #ff5c46;
+        color: var(--color-error);
+        border-color: #ff5c46;
+        border-color: var(--color-error);
+      }
+
+.button--type-outlined.button--mode-warning {
+        color: #fab120;
+        color: var(--color-warning);
+        border-color: #fab120;
+        border-color: var(--color-warning);
+      }
+
 .button--type-filled {
       background-color: #7a34ed;
       background-color: var(--brand-color);
       color: #ffffff;
       color: var(--color-white);
+      border-color: #7a34ed;
+      border-color: var(--brand-color);
     }
 
+.button--type-filled.button--mode-success {
+        background-color: #6bc313;
+        background-color: var(--color-success);
+        border-color: #6bc313;
+        border-color: var(--color-success);
+      }
+
+.button--type-filled.button--mode-error {
+        background-color: #ff5c46;
+        background-color: var(--color-error);
+        border-color: #ff5c46;
+        border-color: var(--color-error);
+      }
+
+.button--type-filled.button--mode-warning {
+        background-color: #fab120;
+        background-color: var(--color-warning);
+        border-color: #fab120;
+        border-color: var(--color-warning);
+      }
+
 .card {
   border: solid 1px var(--color-border);
   border-radius: 8px;
@@ -1416,7 +1463,7 @@ body {
   background-color: var(--brand-color);
   padding: 8px 16px;
   padding: var(--spacing-small) var(--spacing-large);
-  width: 100%;
+  width: 100vw;
   position: relative;
   height: 60px;
   z-index: 10;

package/dist/react/button.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface ButtonProps {
+    mode?: 'default' | 'success' | 'error' | 'warning';
     type?: 'filled' | 'outlined';
     size?: 'small' | 'medium' | 'large';
     label: string;

package/dist/react/button.d.ts.map

@@ -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"}
+{"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

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
-export const Button = ({ type = 'filled', size = 'medium', label = 'Button', }) => {
+export const Button = ({ mode = 'default', type = 'filled', size = 'medium', label = 'Button', }) => {
     return (_jsx("button", { type: "button", className: clsx({
             button: true,
+            [`button--mode-${mode}`]: true,
             [`button--size-${size}`]: true,
             [`button--type-${type}`]: true,
         }), children: label }));

package/dist/react/button.js.map

@@ -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"}
+{"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

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/sandbox-components",
   "description": "",
-  "version": "4.72.0--canary.4920.be98a9b.0",
+  "version": "4.72.0--canary.5313.51b7b5f.0",
   "type": "module",
   "exports": {
     "./css": "./dist/css/ks-sandbox-styles.css",
@@ -41,16 +41,16 @@
     "clsx": "^2.1.1",
     "lit": "^2.8.0",
     "react": "^18.3.1",
-    "vue": "^3.5.11"
+    "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@knapsack/eslint-config-starter": "4.72.0--canary.4920.be98a9b.0",
-    "@knapsack/postcss-config-starter": "4.72.0--canary.4920.be98a9b.0",
-    "@knapsack/prettier-config": "4.72.0--canary.4920.be98a9b.0",
-    "@knapsack/sandbox-tokens": "4.72.0--canary.4920.be98a9b.0",
-    "@knapsack/typescript-config-starter": "4.72.0--canary.4920.be98a9b.0",
-    "@types/node": "^20.17.2",
-    "@types/react": "^18.3.11",
+    "@knapsack/eslint-config-starter": "4.72.0--canary.5313.51b7b5f.0",
+    "@knapsack/postcss-config-starter": "4.72.0--canary.5313.51b7b5f.0",
+    "@knapsack/prettier-config": "4.72.0--canary.5313.51b7b5f.0",
+    "@knapsack/sandbox-tokens": "4.72.0--canary.5313.51b7b5f.0",
+    "@knapsack/typescript-config-starter": "4.72.0--canary.5313.51b7b5f.0",
+    "@types/node": "^20.17.8",
+    "@types/react": "^18.3.12",
     "esbuild": "^0.24.0",
     "eslint": "^8.57.0",
     "npm-run-all2": "^5.0.2",
@@ -68,5 +68,5 @@
     "directory": "apps/ui/libs/sandbox-components",
     "type": "git"
   },
-  "gitHead": "be98a9b39ed70c97fd88e8359e5420250a582b6f"
+  "gitHead": "51b7b5f2b8e4a42f078030647178769053559d32"
 }

package/src/css/button.css

@@ -1,6 +1,6 @@
 .button {
   border-radius: var(--radius-small);
-  border: 1px solid var(--brand-color);
+  border: 1px solid;
   font-family: var(--brand-font-family);
   font-weight: 600;
   transition: all 0.3s ease;
@@ -23,12 +23,38 @@
   }
   &--type {
     &-outlined {
-      background-color: var(--color-white);
+      background-color: transparent;
       color: var(--brand-color);
+      border-color: var(--brand-color);
+      &.button--mode-success {
+        color: var(--color-success);
+        border-color: var(--color-success);
+      }
+      &.button--mode-error {
+        color: var(--color-error);
+        border-color: var(--color-error);
+      }
+      &.button--mode-warning {
+        color: var(--color-warning);
+        border-color: var(--color-warning);
+      }
     }
     &-filled {
       background-color: var(--brand-color);
       color: var(--color-white);
+      border-color: var(--brand-color);
+      &.button--mode-success {
+        background-color: var(--color-success);
+        border-color: var(--color-success);
+      }
+      &.button--mode-error {
+        background-color: var(--color-error);
+        border-color: var(--color-error);
+      }
+      &.button--mode-warning {
+        background-color: var(--color-warning);
+        border-color: var(--color-warning);
+      }
     }
   }
 }

package/src/css/header.css

@@ -1,7 +1,7 @@
 .header {
   background-color: var(--brand-color);
   padding: var(--spacing-small) var(--spacing-large);
-  width: 100%;
+  width: 100vw;
   position: relative;
   height: 60px;
   z-index: 10;

package/src/react/button.tsx

@@ -2,12 +2,14 @@ import { clsx } from 'clsx';
 import React from 'react';
 
 interface ButtonProps {
+  mode?: 'default' | 'success' | 'error' | 'warning';
   type?: 'filled' | 'outlined';
   size?: 'small' | 'medium' | 'large';
   label: string;
 }
 
 export const Button: React.FC<ButtonProps> = ({
+  mode = 'default',
   type = 'filled',
   size = 'medium',
   label = 'Button',
@@ -17,6 +19,7 @@ export const Button: React.FC<ButtonProps> = ({
       type="button"
       className={clsx({
         button: true,
+        [`button--mode-${mode}`]: true,
         [`button--size-${size}`]: true,
         [`button--type-${type}`]: true,
       })}