Extract Button into its own component

neuland · Feb 23, 2024 · ae2b20f · ae2b20f
1 parent 8549161
commit ae2b20f
Show file tree

Hide file tree

Showing 7 changed files with 165 additions and 194 deletions.
diff --git a/src/checkout/components/AddToCart.css b/src/checkout/components/AddToCart.css
@@ -20,100 +20,3 @@
 .c_AddToCart__stock--empty {
   color: red;
 }
-
-.c_AddToCart__button {
-  --accent-color: #ff5a55;
-  display: block;
-  height: 50px;
-  width: 100%;
-  border-radius: 25px;
-  padding: 2px;
-  border: 0;
-  background: linear-gradient(180deg, rgb(168, 168, 168), rgb(255, 255, 255)),
-    var(--accent-color);
-  box-shadow:
-    0 -2px 3px rgb(229, 229, 229),
-    0 2px 3px 2px rgb(255, 255, 255),
-    0 0 25px rgba(0, 0, 0, 0.05),
-    0 -10px 5px rgb(255, 255, 255) inset;
-  position: relative;
-  text-transform: uppercase;
-  letter-spacing: 0.3em;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  text-decoration: none;
-  color: #fff;
-  font-size: 16px;
-}
-
-.c_AddToCart__button[disabled] {
-  --accent-color: #d3d3d3;
-  pointer-events: none;
-}
-
-.c_AddToCart__button::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: inherit;
-  left: 0;
-  background: linear-gradient(
-      0deg,
-      rgba(0, 0, 0, 0.19),
-      rgba(255, 255, 255, 0.3)
-    ),
-    var(--accent-color);
-  content: "";
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1);
-  display: block;
-  transition:
-    transform 0.3s,
-    box-shadow 0.3s,
-    background 0.1s 0.2s;
-}
-
-.c_AddToCart__inner {
-  position: relative;
-  padding-left: 20px;
-  padding-right: 20px;
-  background-color: var(--accent-color);
-  height: 46px;
-  border-radius: inherit;
-  display: grid;
-  place-content: center;
-  transition:
-    transform 0.3s,
-    background 0.3s,
-    box-shadow 0.3s;
-  -webkit-user-select: none; /* Safari */
-  -ms-user-select: none; /* IE 10 and IE 11 */
-  user-select: none;
-  white-space: nowrap;
-}
-
-.c_AddToCart__button:hover .c_AddToCart__inner {
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
-    var(--accent-color);
-}
-
-.c_AddToCart__button:active::before {
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.16)),
-    var(--accent-color);
-  box-shadow:
-    0 0 3px rgba(0, 0, 0, 0.6) inset,
-    0 2px 1px -1px rgba(0, 0, 0, 0.1);
-  transform: scale(0.97);
-  transition:
-    all 0.1s,
-    background 0.05s;
-}
-
-.c_AddToCart__button:active .c_AddToCart__inner {
-  transform: scale(0.97);
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
-    var(--accent-color);
-  transition: all 0.1s;
-  box-shadow:
-    0 5px 5px rgba(0, 0, 0, 0.2) inset,
-    0 -3px 3px rgba(255, 255, 255, 0.2) inset;
-}
diff --git a/src/checkout/components/AddToCart.js b/src/checkout/components/AddToCart.js
@@ -1,5 +1,6 @@
 import data from "../database/index.js";
 import { html } from "../utils.js";
+import Button from "./Button.js";
 
 export default ({ sku }) => {
   const product = data.variants.find((p) => p.sku === sku);
@@ -21,8 +22,12 @@ export default ({ sku }) => {
             out of stock
           </p>`}
     </div>
-    <button ${outOfStock ? "disabled" : ""} class="c_AddToCart__button">
-      <div class="c_AddToCart__inner">add to basket</div>
-    </button>
+    ${Button({
+      tag: "button",
+      disabled: outOfStock,
+      className: "c_AddToCart__button",
+      children: html`add to basket`,
+      variant: "primary",
+    })}
   </form>`;
 };
diff --git a/src/checkout/components/Button.css b/src/checkout/components/Button.css
@@ -0,0 +1,110 @@
+.c_Button {
+  --button-height: 50px;
+  display: block;
+  height: var(--button-height);
+  width: 100%;
+  border-radius: calc(var(--button-height) / 2);
+  padding: 2px;
+  border: 0;
+  background: linear-gradient(180deg, rgb(168, 168, 168), rgb(255, 255, 255)),
+    var(--accent-color);
+  box-shadow:
+    0 -2px 3px rgb(229, 229, 229),
+    0 2px 3px 2px rgb(255, 255, 255),
+    0 0 25px rgba(0, 0, 0, 0.05),
+    0 -10px 5px rgb(255, 255, 255) inset;
+  position: relative;
+  text-transform: uppercase;
+  letter-spacing: 0.3em;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  text-decoration: none;
+  font-size: 16px;
+}
+
+.c_Button--primary {
+  --accent-color: #ff5a55;
+  color: #fff;
+}
+
+.c_Button--secondary {
+  --accent-color: #ffffff;
+  color: #000;
+}
+
+.c_Button--rounded {
+  --button-height: 66px;
+  width: var(--button-height);
+}
+
+.c_Button[disabled] {
+  --accent-color: #d3d3d3;
+  pointer-events: none;
+}
+
+.c_Button::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  left: 0;
+  background: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.19),
+      rgba(255, 255, 255, 0.3)
+    ),
+    var(--accent-color);
+  content: "";
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1);
+  display: block;
+  transition:
+    transform 0.3s,
+    box-shadow 0.3s,
+    background 0.1s 0.2s;
+}
+
+.c_Button__inner {
+  position: relative;
+  padding-left: 20px;
+  padding-right: 20px;
+  background-color: var(--accent-color);
+  height: calc(var(--button-height) - 4px);
+  border-radius: inherit;
+  display: grid;
+  place-content: center;
+  transition:
+    transform 0.3s,
+    background 0.3s,
+    box-shadow 0.3s;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none;
+  white-space: nowrap;
+}
+
+.c_Button:hover .c_Button__inner {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
+    var(--accent-color);
+}
+
+.c_Button:active::before {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.16)),
+    var(--accent-color);
+  box-shadow:
+    0 0 3px rgba(0, 0, 0, 0.6) inset,
+    0 2px 1px -1px rgba(0, 0, 0, 0.1);
+  transform: scale(0.97);
+  transition:
+    all 0.1s,
+    background 0.05s;
+}
+
+.c_Button:active .c_Button__inner {
+  transform: scale(0.97);
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+    var(--accent-color);
+  transition: all 0.1s;
+  box-shadow:
+    0 5px 5px rgba(0, 0, 0, 0.2) inset,
+    0 -3px 3px rgba(255, 255, 255, 0.2) inset;
+}
diff --git a/src/checkout/components/Button.js b/src/checkout/components/Button.js
@@ -0,0 +1,20 @@
+import { html } from "../utils.js";
+
+export default ({
+  tag = "button",
+  href,
+  disabled,
+  rounded,
+  className,
+  children,
+  variant = "secondary",
+}) => {
+  return html` <${href ? "a" : tag}
+    ${disabled ? "disabled" : ""}
+    ${href ? `href="${href}"` : ""}
+    class="c_Button c_Button--${variant} ${className} ${rounded ? "c_Button--rounded" : ""}"
+    ontouchstart
+  >
+    <div class="c_Button__inner">${children}</div>
+  </${href ? "a" : tag}>`;
+};
diff --git a/src/checkout/components/MiniCart.css b/src/checkout/components/MiniCart.css
@@ -2,103 +2,29 @@
   position: relative;
 }
 
-.c_MiniCart__button {
-  display: block;
-  height: 66px;
-  border-radius: 33px;
-  padding: 2px;
-  border: 0;
-  background: linear-gradient(180deg, rgb(168, 168, 168), rgb(255, 255, 255));
-  box-shadow:
-    0 -2px 3px rgb(229, 229, 229),
-    0 2px 3px 2px rgb(255, 255, 255),
-    0 0 25px rgba(0, 0, 0, 0.05),
-    0 -10px 5px rgb(255, 255, 255) inset;
-  position: relative;
-  text-transform: uppercase;
-  letter-spacing: 0.2em;
-  font-weight: bold;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  transition: all 0.3s;
-  text-decoration: none;
-}
-
-.c_MiniCart__button::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: inherit;
-  left: 0;
-  background: linear-gradient(0deg, rgb(205, 205, 205), rgb(255, 255, 255));
-  content: "";
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1);
-  display: block;
-  transition:
-    all 0.3s,
-    background 0.1s 0.2s;
-}
-
-.c_MiniCart__inner {
-  position: relative;
-  padding-left: 25px;
-  padding-right: 25px;
-  background-color: rgb(255, 255, 255);
-  height: 62px;
-  border-radius: inherit;
-  display: grid;
-  place-content: center;
-  transition: all 0.3s;
-  -webkit-user-select: none; /* Safari */
-  -ms-user-select: none; /* IE 10 and IE 11 */
-  user-select: none;
-  white-space: nowrap;
-}
-
-.c_MiniCart__button:hover .c_MiniCart__inner {
-  background-color: rgb(250, 250, 250);
-}
-
-.c_MiniCart__button:active::before {
-  background: linear-gradient(0deg, rgb(220, 220, 220), rgb(205, 205, 205));
-  box-shadow:
-    0 0 3px rgba(0, 0, 0, 0.6) inset,
-    0 2px 1px -1px rgba(0, 0, 0, 0.1);
-  transform: scale(0.97);
-  transition:
-    all 0.1s,
-    background 0.05s;
-}
-
-.c_MiniCart__button:active .c_MiniCart__inner {
-  transform: scale(0.97);
-  background-color: rgb(240, 240, 240);
-  transition: all 0.1s;
-  box-shadow:
-    0 5px 5px rgba(0, 0, 0, 0.2) inset,
-    0 -3px 3px rgba(255, 255, 255, 0.2) inset;
-}
-
 .c_MiniCart__quantity {
-  position: absolute;
-  top: 0px;
-  right: 0px;
   background-color: #ff5a55;
-  color: rgb(255, 255, 255);
   border-radius: 10px;
-  letter-spacing: normal;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+  color: rgb(255, 255, 255);
+  display: grid;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  font-weight: bold;
   height: 20px;
+  letter-spacing: normal;
   min-width: 20px;
-  display: grid;
   place-content: center;
+  position: absolute;
+  right: 0px;
   text-align: center;
-  font-size: 12px;
-  font-weight: bold;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+  top: 0px;
+  transform: scale(1);
   transition: all 0.3s;
-  font-variant-numeric: tabular-nums;
-  /* transform: scale(0);
-  opacity: 0; */
+}
+
+.c_MiniCart__quantity:empty {
+  transform: scale(0);
 }
 
 @keyframes bounce {
@@ -129,7 +55,7 @@
   }
 }
 
-.c_MiniCart--highlight .c_MiniCart__inner svg g {
+.c_MiniCart--highlight svg g {
   transform-origin: center 7px;
   animation: shake 0.2s infinite ease-in-out;
 }