Merge pull request #198 from NIAEFEUP/component/button

Button Component

content-scripts/components/Button.tsx

@@ -2,9 +2,18 @@
 import jsx from "texsaur";
 import Icon from "./Icon";
 
+type ButtonVariant = "solid" | "outline" | "link";
+type ButtonColor = "primary";
+type Radius = "full" | "lg" | "md" | "sm" | "none";
+type Size = "sm" | "md" | "lg";
+
 interface ButtonProps {
     title?: string;
     icon?: string;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    radius?: Radius;
+    size?: Size;
     id?: string;
     className?: string;
     onclick?: (e: Event) => void;
@@ -13,16 +22,26 @@ interface ButtonProps {
 const Button: JSX.Component<ButtonProps> = ({
     title,
     icon,
+    onclick,
+
+    variant = "solid",
+    color,
+    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={className ? className : ""}
-            onclick={onclick}
-        >
+        <button id={id ? id : ""} className={finalClassName} onclick={onclick}>
             {icon ? <Icon name={icon} /> : ""}
             {title ? <span>{title}</span> : ""}
         </button>

content-scripts/components/Navbar/HeaderAuthentication.tsx

@@ -2,6 +2,7 @@
 import jsx from "texsaur";
 import { AuthSession } from "../../types";
 import { togglePopover } from "../../modules/utilities/popover";
+import Button from "../Button";
 import Icon from "../Icon";
 
 interface Props {
@@ -12,15 +13,12 @@ const Authentication = ({ auth }: Props) => {
     if (auth)
         return (
             <div id="se-auth">
-                <button
-                    id="se-auth-notifications-button"
-                    className={`se-button se-icon-button ${
-                        auth.hasNotifications ? "se-badge" : ""
-                    }`}
+                <Button
+                    icon="ri-notification-line"
+                    radius="full"
                     onclick={() => togglePopover("se-auth-notifications-menu")}
-                >
-                    <Icon name="ri-notification-line" />
-                </button>
+                    className={auth.hasNotifications ? "se-badge" : ""}
+                />
                 <div id="se-auth-notifications-menu">
                     <input
                         type="radio"
@@ -102,13 +100,11 @@ const Authentication = ({ auth }: Props) => {
 
     return (
         <div id="se-auth">
-            <button
-                className="se-buttonn"
-                id="se-auth-button"
+            <Button
+                title="Iniciar Sessão"
+                radius="sm"
                 onclick={() => togglePopover("se-auth-form")}
-            >
-                Iniciar Sessão
-            </button>
+            />
             <form
                 id="se-auth-form"
                 action="vld_validacao.validacao"
@@ -141,10 +137,9 @@ const Authentication = ({ auth }: Props) => {
                     placeholder="Palavra-passe"
                     autoComplete="current-password"
                 />
-                <button className="se-button se-primary-button" type="submit">
-                    Iniciar Sessão
-                </button>
+                <Button title="Iniciar Sessão" color="primary" radius="sm" />
                 <span className="se-separator">ou</span>
+                {/* What to do here? It is an <a> not a button. Should the button has an href? */}
                 <a
                     href="vld_validacao.federate_login?p_redirect=web_page.Inicial"
                     id="se-auth-federate"

content-scripts/components/Navbar/HeaderLinks.tsx

@@ -10,7 +10,7 @@ const HeaderLinks = ({ links }: Props) => {
         <nav id="se-header-links">
             {Object.entries(links).map(([key, value]) => (
                 <div className="se-header-link" key={key}>
-                    <button>{key}</button>
+                    <span>{key}</span>
                     <div className="se-header-link-popover">
                         {Object.entries(value).map(([label, url]) => (
                             <a href={url} key={label}>

content-scripts/modules/layout.ts

@@ -159,7 +159,6 @@ const loadNotifications = async (): Promise<void> => {
                     li.append(
                         Button({
                             icon: "ri-check-line",
-                            className: "se-notification-button",
                             onclick: markAsRead,
                         }),
                     );

content-scripts/pages/components_page.tsx

@@ -73,20 +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"
+  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"
+                        title="Small"
+                        size="sm"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Medium"
+                        size="md"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Large"
+                        size="lg"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        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"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        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"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Link Primary"
+                        variant="link"
+                        color="primary"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
+                        title="Icon"
+                        icon="ri-notification-line"
+                        onclick={() => console.log("Button was clicked")}
+                    />
+                    <Button
                         icon="ri-notification-line"
-                        onclick={() => alert("Button was clicked")}
+                        radius="full"
+                        onclick={() => console.log("Button was clicked")}
                     />
                 </Component>
 
@@ -148,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>
 );

css/components.css

@@ -0,0 +1,131 @@
+/* Button */
+.se-button {
+    /* Reset Sigarra Styles */
+    background-image: none;
+    box-shadow: none;
+    /* Ending Reseting Sigarra Styles */
+
+    background-color: #f4f4f4;
+    padding: 0.5rem 1rem;
+    text-decoration: none !important;
+    cursor: pointer;
+    border: none;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    font-weight: 400;
+    color: #333;
+
+    -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;
+
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+        background-image: none;
+        opacity: 0.9;
+        scale: 0.95;
+    }
+
+    /* Rounded Borders */
+    &.rounded-sm {
+        border-radius: 8px;
+    }
+    &.rounded-md {
+        border-radius: 12px;
+    }
+    &.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 */
+    &.primary {
+        background-color: #8c2d19;
+        color: white;
+
+        &:hover {
+            background-color: #6f1e0e;
+        }
+
+        &:active {
+            background-color: #4f1309;
+        }
+    }
+
+    /* 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;
+        }
+    }
+}

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 {

css/expandableCard.css

@@ -10,6 +10,7 @@
     border: none !important;
     padding: none !important;
     margin: none !important;
+    box-shadow: none !important;
 }
 
 .se-card-expand-button:hover {

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;