@knapsack/sandbox-components 4.71.8 → 4.71.9--canary.5152.fa9ef17.0

package/CHANGELOG.md

@@ -1,25 +1,3 @@
-# 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

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

@@ -99,9 +99,6 @@
   --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;
@@ -1241,7 +1238,8 @@ body {
 .button {
   border-radius: 4px;
   border-radius: var(--radius-small);
-  border: 1px solid;
+  border: 1px solid #7a34ed;
+  border: 1px solid var(--brand-color);
   font-family: Inter;
   font-family: var(--brand-font-family);
   font-weight: 600;
@@ -1285,64 +1283,19 @@ body {
     }
 
 .button--type-outlined {
-      background-color: transparent;
+      background-color: #ffffff;
+      background-color: var(--color-white);
       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;

package/dist/react/button.d.ts

@@ -1,6 +1,5 @@
 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,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"}
+{"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"}

package/dist/react/button.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { clsx } from 'clsx';
-export const Button = ({ mode = 'default', type = 'filled', size = 'medium', label = 'Button', }) => {
+export const Button = ({ 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;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"}
+{"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/sandbox-components",
   "description": "",
-  "version": "4.71.8",
+  "version": "4.71.9--canary.5152.fa9ef17.0",
   "type": "module",
   "exports": {
     "./css": "./dist/css/ks-sandbox-styles.css",
@@ -44,11 +44,11 @@
     "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@knapsack/eslint-config-starter": "4.71.8",
-    "@knapsack/postcss-config-starter": "4.71.8",
-    "@knapsack/prettier-config": "4.71.8",
-    "@knapsack/sandbox-tokens": "4.71.8",
-    "@knapsack/typescript-config-starter": "4.71.8",
+    "@knapsack/eslint-config-starter": "4.71.9--canary.5152.fa9ef17.0",
+    "@knapsack/postcss-config-starter": "4.71.9--canary.5152.fa9ef17.0",
+    "@knapsack/prettier-config": "4.71.9--canary.5152.fa9ef17.0",
+    "@knapsack/sandbox-tokens": "4.71.9--canary.5152.fa9ef17.0",
+    "@knapsack/typescript-config-starter": "4.71.9--canary.5152.fa9ef17.0",
     "@types/node": "^20.17.6",
     "@types/react": "^18.3.12",
     "esbuild": "^0.24.0",
@@ -68,5 +68,5 @@
     "directory": "apps/ui/libs/sandbox-components",
     "type": "git"
   },
-  "gitHead": "39f90c8941e7947424a29e36d64c06b62148a6a2"
+  "gitHead": "fa9ef170c1af8f47ece9c48be5fc964954f6c832"
 }

package/src/css/button.css

@@ -1,6 +1,6 @@
 .button {
   border-radius: var(--radius-small);
-  border: 1px solid;
+  border: 1px solid var(--brand-color);
   font-family: var(--brand-font-family);
   font-weight: 600;
   transition: all 0.3s ease;
@@ -23,38 +23,12 @@
   }
   &--type {
     &-outlined {
-      background-color: transparent;
+      background-color: var(--color-white);
       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/react/button.tsx

@@ -2,14 +2,12 @@ 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',
@@ -19,7 +17,6 @@ export const Button: React.FC<ButtonProps> = ({
       type="button"
       className={clsx({
         button: true,
-        [`button--mode-${mode}`]: true,
         [`button--size-${size}`]: true,
         [`button--type-${type}`]: true,
       })}