added upsell variant / fix iconButton icon Size

gsoft-inc · Oct 10, 2023 · 2b721cc · 2b721cc
1 parent 135752c
commit 2b721cc
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 8 deletions.
diff --git a/packages/components/src/button/docs/Button.stories.mdx b/packages/components/src/button/docs/Button.stories.mdx
@@ -195,6 +195,16 @@ Tertiary buttons are used for actions that need to be there but that we don't wa
     </Story>
 </Preview>
 
+#### Upsell
+
+<Preview>
+    <Story name="upsell">
+        <Inline>
+            <Button variant="upsell">Upsell</Button>
+        </Inline>
+    </Story>
+</Preview>
+
 #### Negative
 
 Negative buttons are used for actions that would result in a deletion or another non recoverable negative action. These are mostly useful in modals.

diff --git a/packages/components/src/button/src/Button.css b/packages/components/src/button/src/Button.css
@@ -138,6 +138,42 @@ a.o-ui-button {
     color: var(--hop-primary-text-active);
 }
 
+/* UPSELL */
+.o-ui-button-upsell {
+    background-color: var(--hop-upsell-surface);
+    color: var(--hop-upsell-text);
+}
+
+/* UPSELL | HOVER */
+.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading):hover,
+.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover {
+    background-color: var(--hop-upsell-surface-hover);
+    outline: 1px solid var(--hop-upsell-border-hover);
+    color: var(--hop-upsell-text-hover);
+}
+
+/* UPSELL | FOCUS */
+.o-ui-button-upsell:not([disabled]):focus-visible,
+.o-ui-button-upsell:not([disabled]).o-ui-button-focus {
+    background-color: var(--hop-upsell-surface-hover);
+}
+
+/* UPSELL | ACTIVE */
+.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading):active,
+.o-ui-button-upsell:not([disabled]).o-ui-button-active {
+    background-color: var(--hop-upsell-surface-active);
+    outline: 1px solid var(--hop-upsell-border-active);
+    color: var(--hop-upsell-text-active);
+}
+
+/* UPSELL | HOVER | ACTIVE */
+.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading):hover:active,
+.o-ui-button-upsell:not([disabled]).o-ui-button-hover.o-ui-button-active {
+    background-color: var(--hop-upsell-surface-active);
+    outline: 1px solid var(--hop-upsell-border-active);
+    color: var(--hop-upsell-text-active);
+}
+
 /* SECONDARY */
 .o-ui-button-secondary {
     border: 1px solid var(--hop-neutral-border-strong);

diff --git a/packages/components/src/button/src/IconButton.css b/packages/components/src/button/src/IconButton.css
@@ -1,8 +1,8 @@
 @import "./Button.css";
 
 .o-ui {
-    --o-ui-icon-button-height-2xs: var(--o-ui-sz-3);
-    --o-ui-icon-button-height-xs: var(--o-ui-sz-4);
+    --o-ui-icon-button-height-2xs: 1.25rem;
+    --o-ui-icon-button-height-xs: 1.5rem;
 }
 
 /* ICON BUTTON */
@@ -17,21 +17,21 @@
 /* SIZES */
 .o-ui-icon-button.o-ui-button-2xs {
     min-height: var(--o-ui-icon-button-height-2xs);
-    min-width: var(--o-ui-sz-3);
+    min-width: 1.25rem;
 }
 
 .o-ui-icon-button.o-ui-button-xs {
     min-height: var(--o-ui-icon-button-height-xs);
-    min-width: var(--o-ui-sz-4);
+    min-width: 1.5rem;
 }
 
 /* SIZES */
 .o-ui-icon-button.o-ui-button-sm {
-    min-width: var(--o-ui-sz-5);
+    min-width: 2rem;
 }
 
 .o-ui-icon-button.o-ui-button-md {
-    min-width: var(--o-ui-sz-6);
+    min-width: 2.5rem;
 }
 
 /* LOADING */
@@ -47,7 +47,7 @@
 
 /* INHERIT */
 .o-ui-button-inherit.o-ui-button-solid .o-ui-button-icon {
-    fill: var(--o-ui-white);
+    fill: var(--hop-samoyed);
     opacity: .9;
 }
 
@@ -56,3 +56,14 @@
     color: inherit;
     fill: currentColor;
 }
+
+/* ICON */
+.o-ui-button-sm.o-ui-icon-button .o-ui-button-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.o-ui-button-md.o-ui-icon-button .o-ui-button-icon {
+    width: 2rem;
+    height: 2rem;
+}
diff --git a/packages/components/src/button/src/useButton.ts b/packages/components/src/button/src/useButton.ts
@@ -3,7 +3,7 @@ import { HtmlButton } from "../../html";
 import { InteractionProps, InternalProps, MergedRef, Size, cssModule, isNumber, mergeClasses, normalizeSize, useAutoFocus, useMergedRefs } from "../../shared";
 import { useDisableClick } from "./useDisableClick";
 
-export type ButtonVariant = "primary" | "secondary" | "tertiary" | "negative";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "negative" | "upsell";
 
 export interface UseButtonProps extends Partial<InternalProps>, InteractionProps {
     autoFocus?: boolean | number;

diff --git a/packages/components/src/button/tests/chromatic/Button.chroma.jsx b/packages/components/src/button/tests/chromatic/Button.chroma.jsx
@@ -22,6 +22,7 @@ createButtonTestSuite(<Button variant="secondary" />, stories("/secondary"));
 createButtonTestSuite(<WarningBackground button={<Button variant="secondary" inherit />} />, stories("/secondary (inherit)"));
 createButtonTestSuite(<Button variant="tertiary" />, stories("/tertiary"));
 createButtonTestSuite(<WarningBackground button={<Button variant="tertiary" inherit />} />, stories("/tertiary (inherit)"));
+createButtonTestSuite(<Button variant="upsell" />, stories("/upsell"));
 createButtonTestSuite(<Button variant="negative" />, stories("/negative"));
 
 stories()

diff --git a/packages/components/src/button/tests/chromatic/ButtonAsLink.chroma.jsx b/packages/components/src/button/tests/chromatic/ButtonAsLink.chroma.jsx
@@ -15,6 +15,8 @@ createButtonTestSuite(<ButtonAsLink variant="secondary" />, stories("/secondary"
 
 createButtonTestSuite(<ButtonAsLink variant="tertiary" />, stories("/tertiary"));
 
+createButtonTestSuite(<ButtonAsLink variant="upsell" />, stories("/upsell"));
+
 createButtonTestSuite(<ButtonAsLink variant="negative" />, stories("/negative"));
 
 stories()

diff --git a/packages/components/src/button/tests/chromatic/IconButton.chroma.jsx b/packages/components/src/button/tests/chromatic/IconButton.chroma.jsx
@@ -16,6 +16,8 @@ createIconButtonTestSuite(<IconButton variant="secondary" />, stories("/secondar
 
 createIconButtonTestSuite(<IconButton variant="tertiary" />, stories("/tertiary"));
 
+createIconButtonTestSuite(<IconButton variant="upsell" />, stories("/upsell"));
+
 createIconButtonTestSuite(<IconButton variant="negative" />, stories("/negative"));
 
 stories()

diff --git a/packages/components/src/button/tests/chromatic/IconButtonAsLink.chroma.jsx b/packages/components/src/button/tests/chromatic/IconButtonAsLink.chroma.jsx
@@ -16,6 +16,8 @@ createIconButtonTestSuite(<IconButtonAsLink variant="secondary" />, stories("/se
 
 createIconButtonTestSuite(<IconButtonAsLink variant="tertiary" />, stories("/tertiary"));
 
+createIconButtonTestSuite(<IconButtonAsLink variant="upsell" />, stories("/upsell"));
+
 createIconButtonTestSuite(<IconButtonAsLink variant="negative" />, stories("/negative"));
 
 stories()