chore: port existing button styles to legacy files

ably · Nov 20, 2024 · 05c3165 · 05c3165
1 parent f634a72
commit 05c3165
Show file tree

Hide file tree

Showing 5 changed files with 314 additions and 241 deletions.
diff --git a/src/core/styles.components.css b/src/core/styles.components.css
@@ -1,4 +1,5 @@
 @import "./styles/buttons.css";
+@import "./styles/legacy-buttons.css";
 @import "./styles/dropdowns.css";
 @import "./styles/forms.css";
 @import "./styles/layout.css";

diff --git a/src/core/styles/Button.stories.tsx b/src/core/styles/Button.stories.tsx
@@ -1,162 +1,72 @@
 import React from "react";
-import Icon from "../Icon";
 
 export default {
   title: "CSS/Button",
 };
 
-export const Standard = {
-  render: () => (
-    <div className="flex flex-col gap-16 max-w-[300px]">
-      <button type="button" className="ui-btn">
-        Primary button
-      </button>
-      <button type="button" className="ui-btn-alt">
-        Primary button alternative
-      </button>
-      <button type="button" className="ui-btn-secondary">
-        Secondary button
-      </button>
-      <button type="button" className="ui-btn" disabled>
-        Unavailable primary button
-      </button>
-      <button type="button" className="ui-btn-alt" disabled>
-        Unavailable primary button alternative
-      </button>
-      <button type="button" className="ui-btn-secondary" disabled>
-        Unavailable secondary button
-      </button>
-    </div>
-  ),
+const buttons = {
+  priority: {
+    default: "ui-button-priority",
+    iconLeft: "",
+  },
 };
 
-export const Inverted = {
-  render: () => (
-    <div className="flex flex-col gap-16 max-w-[300px]">
-      <button type="button" className="ui-btn-invert">
-        Primary button
-      </button>
-      <button type="button" className="ui-btn-secondary-invert">
-        Secondary button
-      </button>
-      <button type="button" className="ui-btn-invert" disabled>
-        Unavailable primary button
-      </button>
-      <button type="button" className="ui-btn-secondary-invert" disabled>
-        Unavailable secondary button
-      </button>
-    </div>
-  ),
-};
+const sizes = [
+  { label: "Large", symbol: "lg" },
+  { label: "Regular", symbol: "" },
+  { label: "Small", symbol: "sm" },
+  { label: "Extra small", symbol: "xs" },
+];
 
-export const WithIcons = {
-  render: () => (
-    <div className="flex flex-col gap-16 max-w-[300px]">
-      <button type="button" className="ui-btn">
-        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
-        Primary button with icon
-      </button>
-      <button type="button" className="ui-btn-alt">
-        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
-        Primary button alternative with icon
-      </button>
-      <button type="button" className="ui-btn-secondary">
-        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
-        Secondary button with icon
-      </button>
-      <button type="button" className="ui-btn" disabled>
-        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
-        Unavailable primary button with icon
-      </button>
-      <button type="button" className="ui-btn-alt" disabled>
-        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
-        Unavailable primary button alternative with icon
-      </button>
-      <button type="button" className="ui-btn-secondary" disabled>
-        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
-        Unavailable secondary button with icon
-      </button>
-    </div>
-  ),
-};
+type ButtonSetType = "priority" | "primary" | "secondary";
 
-export const LinkStyledAsButton = {
-  render: () => (
-    <div className="flex flex-col gap-16 max-w-[300px]">
-      <a href="#" role="button" className="ui-btn">
-        Link
-      </a>
-      <a href="#" role="button" className="ui-btn ui-btn-disabled">
-        Disabled link
-      </a>
-    </div>
-  ),
-};
+const buttonSet = (type: ButtonSetType) => (
+  <div className="grid sm:grid-cols-3 gap-16">
+    {Array(3)
+      .fill(0)
+      .map((_, index) => (
+        <div
+          key={`button-variant-${index}`}
+          className="flex flex-col gap-16 max-w-[300px]"
+        >
+          {sizes.map((size, sizeIndex) => (
+            <button
+              type="button"
+              key={`button-size-${sizeIndex}`}
+              className={`ui-button-${type}-${size}`}
+            >
+              {index === 1 ? (
+                <svg
+                  className="text-cool-black hover:text-active-orange"
+                  style={{ width: "1.5rem", height: "1.5rem" }}
+                >
+                  <use xlinkHref="#sprite-icon-gui-search"></use>
+                </svg>
+              ) : null}
+              {size.label}
+              {index === 2 ? (
+                <svg
+                  className="text-cool-black hover:text-active-orange"
+                  style={{ width: "1.5rem", height: "1.5rem" }}
+                >
+                  <use xlinkHref="#sprite-icon-gui-arrow-right"></use>
+                </svg>
+              ) : null}
+            </button>
+          ))}
+        </div>
+      ))}
+  </div>
+);
 
-export const ExtraSmall = {
-  render: () => (
-    <div className="flex flex-col gap-16 max-w-[300px]">
-      <button type="button" className="ui-btn p-btn-xsmall text-btn4">
-        Primary button
-      </button>
-      <button type="button" className="ui-btn p-btn-xsmall text-btn4">
-        <Icon
-          name="icon-gui-search"
-          size="1rem"
-          additionalCSS="ui-btn-icon-xsmall"
-        />
-        Primary button with icon
-      </button>
-      <button type="button" className="ui-btn-alt p-btn-xsmall text-btn4">
-        Primary button alternative
-      </button>
-      <button type="button" className="ui-btn-secondary p-btn-xsmall text-btn4">
-        Secondary button
-      </button>
-    </div>
-  ),
+export const HighPriority = {
+  render: () => buttonSet("priority"),
 };
 
-export const Small = {
-  render: () => (
-    <div className="flex flex-col gap-16 max-w-[300px]">
-      <button type="button" className="ui-btn p-btn-small text-btn3">
-        Primary button
-      </button>
-      <button type="button" className="ui-btn p-btn-small text-btn3">
-        <Icon
-          name="icon-gui-search"
-          size="1rem"
-          additionalCSS="ui-btn-icon-small"
-        />
-        Primary button with icon
-      </button>
-      <button type="button" className="ui-btn-alt p-btn-small text-btn3">
-        Primary button alternative
-      </button>
-      <button type="button" className="ui-btn-secondary p-btn-small text-btn3">
-        Secondary button
-      </button>
-    </div>
-  ),
+export const Primary = {
+  render: () => buttonSet("primary"),
 };
 
-export const Large = {
-  render: () => (
-    <div className="flex flex-col gap-16 max-w-[300px]">
-      <button type="button" className="ui-btn p-btn-large text-btn1">
-        Primary button
-      </button>
-      <button type="button" className="ui-btn p-btn-large text-btn1">
-        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
-        Primary button with icon
-      </button>
-      <button type="button" className="ui-btn-alt p-btn-large text-btn1">
-        Primary button alternative
-      </button>
-      <button type="button" className="ui-btn-secondary p-btn-large text-btn1">
-        Secondary button
-      </button>
-    </div>
-  ),
+export const Secondary = {
+  render: () => buttonSet("secondary"),
 };
diff --git a/src/core/styles/LegacyButton.stories.tsx b/src/core/styles/LegacyButton.stories.tsx
@@ -0,0 +1,162 @@
+import React from "react";
+import Icon from "../Icon";
+
+export default {
+  title: "CSS/Button (legacy)",
+};
+
+export const Standard = {
+  render: () => (
+    <div className="flex flex-col gap-16 max-w-[300px]">
+      <button type="button" className="ui-btn">
+        Primary button
+      </button>
+      <button type="button" className="ui-btn-alt">
+        Primary button alternative
+      </button>
+      <button type="button" className="ui-btn-secondary">
+        Secondary button
+      </button>
+      <button type="button" className="ui-btn" disabled>
+        Unavailable primary button
+      </button>
+      <button type="button" className="ui-btn-alt" disabled>
+        Unavailable primary button alternative
+      </button>
+      <button type="button" className="ui-btn-secondary" disabled>
+        Unavailable secondary button
+      </button>
+    </div>
+  ),
+};
+
+export const Inverted = {
+  render: () => (
+    <div className="flex flex-col gap-16 max-w-[300px]">
+      <button type="button" className="ui-btn-invert">
+        Primary button
+      </button>
+      <button type="button" className="ui-btn-secondary-invert">
+        Secondary button
+      </button>
+      <button type="button" className="ui-btn-invert" disabled>
+        Unavailable primary button
+      </button>
+      <button type="button" className="ui-btn-secondary-invert" disabled>
+        Unavailable secondary button
+      </button>
+    </div>
+  ),
+};
+
+export const WithIcons = {
+  render: () => (
+    <div className="flex flex-col gap-16 max-w-[300px]">
+      <button type="button" className="ui-btn">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Primary button alternative with icon
+      </button>
+      <button type="button" className="ui-btn-secondary">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Secondary button with icon
+      </button>
+      <button type="button" className="ui-btn" disabled>
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Unavailable primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt" disabled>
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Unavailable primary button alternative with icon
+      </button>
+      <button type="button" className="ui-btn-secondary" disabled>
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Unavailable secondary button with icon
+      </button>
+    </div>
+  ),
+};
+
+export const LinkStyledAsButton = {
+  render: () => (
+    <div className="flex flex-col gap-16 max-w-[300px]">
+      <a href="#" role="button" className="ui-btn">
+        Link
+      </a>
+      <a href="#" role="button" className="ui-btn ui-btn-disabled">
+        Disabled link
+      </a>
+    </div>
+  ),
+};
+
+export const ExtraSmall = {
+  render: () => (
+    <div className="flex flex-col gap-16 max-w-[300px]">
+      <button type="button" className="ui-btn p-btn-xsmall text-btn4">
+        Primary button
+      </button>
+      <button type="button" className="ui-btn p-btn-xsmall text-btn4">
+        <Icon
+          name="icon-gui-search"
+          size="1rem"
+          additionalCSS="ui-btn-icon-xsmall"
+        />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt p-btn-xsmall text-btn4">
+        Primary button alternative
+      </button>
+      <button type="button" className="ui-btn-secondary p-btn-xsmall text-btn4">
+        Secondary button
+      </button>
+    </div>
+  ),
+};
+
+export const Small = {
+  render: () => (
+    <div className="flex flex-col gap-16 max-w-[300px]">
+      <button type="button" className="ui-btn p-btn-small text-btn3">
+        Primary button
+      </button>
+      <button type="button" className="ui-btn p-btn-small text-btn3">
+        <Icon
+          name="icon-gui-search"
+          size="1rem"
+          additionalCSS="ui-btn-icon-small"
+        />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt p-btn-small text-btn3">
+        Primary button alternative
+      </button>
+      <button type="button" className="ui-btn-secondary p-btn-small text-btn3">
+        Secondary button
+      </button>
+    </div>
+  ),
+};
+
+export const Large = {
+  render: () => (
+    <div className="flex flex-col gap-16 max-w-[300px]">
+      <button type="button" className="ui-btn p-btn-large text-btn1">
+        Primary button
+      </button>
+      <button type="button" className="ui-btn p-btn-large text-btn1">
+        <Icon name="icon-gui-search" size="1rem" additionalCSS="ui-btn-icon" />
+        Primary button with icon
+      </button>
+      <button type="button" className="ui-btn-alt p-btn-large text-btn1">
+        Primary button alternative
+      </button>
+      <button type="button" className="ui-btn-secondary p-btn-large text-btn1">
+        Secondary button
+      </button>
+    </div>
+  ),
+};