Button style and variations

NIAEFEUP · Nov 1, 2024 · eec3139 · eec3139
1 parent 20b5288
commit eec3139
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 47 deletions.
diff --git a/content-scripts/components/Button.tsx b/content-scripts/components/Button.tsx
@@ -2,40 +2,43 @@
 import jsx from "texsaur";
 import Icon from "./Icon";
 
-type ButtonVariant = "solid" | "outline";
+type ButtonVariant = "solid" | "outline" | "link";
 type ButtonColor = "primary";
-type Radius = "full" | "sm" | "md" | "lg";
+type Radius = "full" | "lg" | "md" | "sm" | "none";
 type Size = "sm" | "md" | "lg";
 
 interface ButtonProps {
     title?: string;
     icon?: string;
-    id?: string;
     variant?: ButtonVariant;
     color?: ButtonColor;
     radius?: Radius;
     size?: Size;
+    id?: string;
     className?: string;
     onclick?: (e: Event) => void;
 }
 
 const Button: JSX.Component<ButtonProps> = ({
     title,
     icon,
-    id,
-    variant,
+    onclick,
+
+    variant = "solid",
     color,
-    radius,
-    size,
+    radius = "md",
+    size = "md",
+
+    id,
     className,
-    onclick,
 }) => {
     let finalClassName = "se-button";
     if (variant) finalClassName += " " + variant;
     if (color) finalClassName += " " + color;
     if (radius) finalClassName += " rounded-" + radius;
     if (size) finalClassName += " " + size;
     if (className) finalClassName += " " + className;
+    if (icon && !title) finalClassName += " icon-only";
 
     return (
         <button id={id ? id : ""} className={finalClassName} onclick={onclick}>

diff --git a/content-scripts/pages/components_page.tsx b/content-scripts/pages/components_page.tsx
@@ -73,68 +73,101 @@ export function createComponentsPage() {
                 {/* Button */}
                 <Component
                     name="Button"
-                    description="Our button abstraction that can be used to create buttons with icons and text."
+                    description="Our button abstraction that can be used to create buttons with icons and text. "
                     code={`
 <Button
   name="MY BUTTON"
   text="Click me"
   icon="ri-notification-line"
-  onclick={() => alert("Button was clicked")}
+  onclick={() => console.log("Button was clicked")}
 />
             `}
                 >
                     <Button
-                        title="MY BUTTON"
-                        icon="ri-notification-line"
-                        onclick={() => alert("Button was clicked")}
+                        title="Small"
+                        size="sm"
+                        onclick={() => console.log("Button was clicked")}
                     />
                     <Button
-                        title="MY BUTTON"
-                        icon="ri-notification-line"
-                        color="primary"
-                        onclick={() => alert("Button was clicked")}
+                        title="Medium"
+                        size="md"
+                        onclick={() => console.log("Button was clicked")}
                     />
                     <Button
-                        title="MY BUTTON"
-                        icon="ri-notification-line"
-                        color="primary"
-                        size="sm"
-                        onclick={() => alert("Button was clicked")}
+                        title="Large"
+                        size="lg"
+                        onclick={() => console.log("Button was clicked")}
                     />
                     <Button
-                        title="MY BUTTON"
-                        icon="ri-notification-line"
+                        title="Full"
+                        radius="full"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Large"
+                        radius="lg"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Medium"
+                        radius="md"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Small"
+                        radius="sm"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="None"
+                        radius="none"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Default"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Primary"
                         color="primary"
-                        size="md"
-                        onclick={() => alert("Button was clicked")}
+                        onclick={() => console.log("Button was clicked")}
                     />
                     <Button
-                        title="MY BUTTON"
-                        icon="ri-notification-line"
+                        title="Solid"
+                        variant="solid"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Outline"
+                        variant="outline"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Link"
+                        variant="link"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Outline Primary"
+                        variant="outline"
                         color="primary"
-                        size="lg"
-                        onclick={() => alert("Button was clicked")}
+                        onclick={() => console.log("Button was clicked")}
                     />
                     <Button
-                        title="MY BUTTON"
-                        icon="ri-notification-line"
+                        title="Link Primary"
+                        variant="link"
                         color="primary"
-                        radius="sm"
-                        onclick={() => alert("Button was clicked")}
+                        onclick={() => console.log("Button was clicked")}
                     />
                     <Button
-                        title="MY BUTTON"
+                        title="Icon"
                         icon="ri-notification-line"
-                        color="primary"
-                        radius="md"
-                        onclick={() => alert("Button was clicked")}
+                        onclick={() => console.log("Button was clicked")}
                     />
                     <Button
-                        title="MY BUTTON"
                         icon="ri-notification-line"
-                        color="primary"
-                        radius="lg"
-                        onclick={() => alert("Button was clicked")}
+                        radius="full"
+                        onclick={() => console.log("Button was clicked")}
                     />
                 </Component>
 
@@ -196,5 +229,6 @@ const Component: JSX.Component<ComponentProps> = (
         <p>{description}</p>
         <div className="se-component-show">{children}</div>
         <pre className="se-code-block">{code}</pre>
+        {/* TODO(thePeras): Add Props field, so we can know the Component Reference and the default values */}
     </div>
 );
diff --git a/css/components.css b/css/components.css
@@ -1,5 +1,4 @@
 /* Button */
-
 .se-button {
     background-color: #f4f4f4;
     padding: 0.5rem 1rem;
@@ -15,15 +14,20 @@
     -webkit-font-smoothing: auto;
     -moz-osx-font-smoothing: auto;
 
+    /* Focus Outline */
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+
     /* Animation */
     transition-timing-function: ease;
     transition-duration: 0.25s;
 
-    outline: 1px solid transparent;
-    outline-offset: 1px;
+    align-items: center;
+    justify-content: center;
 
     &:hover {
-        background-color: #e6e6e6;
+        opacity: 0.9;
+        scale: 0.95;
     }
 
     /* Rounded Borders */
@@ -36,16 +40,35 @@
     &.rounded-lg {
         border-radius: 14px;
     }
+    &.rounded-full {
+        border-radius: 9999px;
+    }
 
     /* Sizes */
     &.sm {
         font-size: small;
+        height: 2rem;
+        min-width: 4rem;
     }
     &.md {
         font-size: medium;
+        height: 2.5rem;
+        min-width: 5rem;
+
+        font-size: 1rem;
+        line-height: 1.5rem;
     }
     &.lg {
         font-size: large;
+        height: 3rem;
+        min-width: 6rem;
+    }
+
+    &.icon-only {
+        padding: 0.5rem;
+        min-width: 2.5rem;
+        height: 2.5rem;
+        justify-content: center;
     }
 
     /* Colors */
@@ -63,4 +86,40 @@
     }
 
     /* Variants */
+    &.outline {
+        background-color: transparent;
+        border: 1.5px solid #f4f4f4;
+        color: #333;
+
+        &:hover {
+            background-color: #f4f4f4;
+        }
+
+        &.primary {
+            border-color: #8c2d19;
+            color: #8c2d19;
+
+            &:hover {
+                background-color: transparent;
+
+                background-color: #8c2d19;
+                color: white;
+            }
+        }
+    }
+
+    &.link {
+        background-color: transparent;
+        span {
+            text-decoration: underline;
+        }
+
+        &:hover {
+            background-color: #f4f4f4;
+        }
+
+        &.primary {
+            color: #8c2d19;
+        }
+    }
 }
diff --git a/css/componentsPage.css b/css/componentsPage.css
@@ -59,6 +59,9 @@ body {
 
         .se-component-show {
             padding: 20px 0 20px 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1em;
         }
 
         .se-component-section {

diff --git a/css/icons.css b/css/icons.css
@@ -1,5 +1,5 @@
 .se-icon {
-    font-size: 24px;
+    font-size: 20px;
     line-height: 1 !important;
     display: inline-block !important;
     vertical-align: middle !important;