generated from UofA-Blueprint/ScaffoldTool
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #35 from UofA-Blueprint/button-refactor
♻️ Button Refactor
- Loading branch information
Showing
16 changed files
with
538 additions
and
269 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { useState } from "react"; | ||
| import clsx from "clsx"; | ||
| import Modal from "@/components/Modal"; | ||
| import InputField from "@/components/InputField"; | ||
| import MemberProfilePicture from "@/components/MemberProfilePicture"; | ||
| import Button from "@/components/Button"; | ||
| import { WarningCircle } from "@phosphor-icons/react"; | ||
|
|
||
| interface AddMemberProps { | ||
| /* Toggles the modal's visibility */ | ||
| isOpen: boolean; | ||
|
|
||
| /* Callback to close the modal */ | ||
| onClose: () => void; | ||
| } | ||
| function AddMember({ isOpen, onClose }: AddMemberProps) { | ||
| const [nameError, setNameError] = useState<boolean>(false); | ||
| const [idError, setIdError] = useState<boolean>(false); | ||
|
|
||
| // Content style | ||
| const content = "flex flex-col gap-6"; | ||
|
|
||
| return ( | ||
| <Modal | ||
| isOpen={isOpen} | ||
| onClose={onClose} | ||
| title="Add Member" | ||
| content={ | ||
| <div className={clsx(content)}> | ||
| <InputField | ||
| type="text" | ||
| label="Name" | ||
| error={false} | ||
| required={true} | ||
| placeholder={"John Doe"} | ||
| setError={setNameError} | ||
| setInput={() => {}} | ||
| /> | ||
| <InputField | ||
| type="text" | ||
| label="Unique ID" | ||
| error={false} | ||
| required={true} | ||
| placeholder="12345678" | ||
| setError={setIdError} | ||
| setInput={() => {}} | ||
| /> | ||
| <MemberProfilePicture /> | ||
| </div> | ||
| } | ||
| actions={ | ||
| <div className="flex flex-col gap-1 w-full"> | ||
| <Button | ||
| shape="medium" | ||
| text="Add Member" | ||
| onClick={onClose} | ||
| /> | ||
| {(idError || nameError) && ( | ||
| <div className="flex flex-row justify-start items-center gap-1 text-red-500 text-body-sm"> | ||
| <WarningCircle size={16} /> | ||
| <span> Error</span> | ||
| </div> | ||
| )} | ||
| </div> | ||
| } | ||
| ></Modal> | ||
| ); | ||
| } | ||
|
|
||
| export default AddMember; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,85 @@ | ||
| import { useRef } from "react"; | ||
| import { ReactNode, useRef } from "react"; | ||
| import { twMerge } from "tailwind-merge"; | ||
| import clsx from "clsx"; | ||
|
|
||
| interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
| onClick?: React.MouseEventHandler<HTMLButtonElement>; | ||
| icon?: React.ElementType; | ||
| /* Height of the button */ | ||
| shape: "small" | "medium" | "large" | "round" | "square"; | ||
|
|
||
| /* The text to display on the button */ | ||
| text?: string; | ||
| rounded?: boolean; | ||
| fill?: boolean; | ||
|
|
||
| /* 32x32 Phosphor icon to display on the button */ | ||
| icon?: React.ReactNode; | ||
|
|
||
| /* Whether the button is disabled */ | ||
| disabled?: boolean; | ||
| fontSize?: string; | ||
| color?: string; | ||
|
|
||
| /* The severity of the button */ | ||
| severity?: "primary" | "secondary" | "danger"; | ||
|
|
||
| /* The callback to run when the button is clicked */ | ||
| onClick?: React.MouseEventHandler<HTMLButtonElement>; | ||
| } | ||
|
|
||
| const Button: React.FC<ButtonProps> = ({ | ||
| text = null, | ||
| icon: Icon = null, | ||
| function Button({ | ||
| shape, | ||
| text, | ||
| icon, | ||
| disabled = false, | ||
| severity = "primary", | ||
| onClick, | ||
| rounded = false, | ||
| fill = true, | ||
| disabled, | ||
| fontSize = "1em", | ||
| className = null, | ||
| }) => { | ||
| }: ButtonProps) { | ||
| const buttonRef = useRef<HTMLButtonElement>(null); | ||
| const buttonClassName = twMerge( | ||
| `flex flex-row items-center justify-center p-4 ${ | ||
| disabled === true | ||
| ? "bg-neutrals-light-200 text-gray-400 cursor-default" | ||
| : fill | ||
| ? "relative overflow-hidden bg-primary-main text-white z-10 active:bg-primary-main active:text-white transition-colors hover:bg-neutrals-light-100 hover:text-primary-main border-2 border-primary-main hover:border-primary-main rounded-full w-full h-full before:absolute before:right-0 before:top-0 before:w-full before:h-full before:z-0 before:bg-primary-main before:content[''] before:transition-transform before:duration-300 hover:before:transform hover:before:translate-x-full" | ||
| : "relative overflow-hidden text-primary-dark border-primary-dark border-2 active:bg-white active:text-primary-dark transition-colors before:absolute before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:origin-top-left before:scale-x-0 before:bg-primary-dark before:transition-transform before:duration-300 before:content-[''] hover:text-white before:hover:scale-x-100" | ||
| } ${rounded ? "rounded-full" : "rounded-lg"} w-full h-full`, | ||
| className, | ||
| // change color --> change text-{color}, border-{color} and active:bg-{color}, active:text-{color}, before:bg-{color} | ||
| ); | ||
|
|
||
| // Button styles | ||
| const base = | ||
| "flex flex-row items-center justify-center cursor-pointer w-full rounded-lg gap-2"; | ||
|
|
||
| const small = "h-8 py-1 px-6 gap-1 text-sm"; | ||
|
|
||
| const medium = "h-12 py-3 px-6 text-base"; | ||
|
|
||
| const large = "h-16 py-4 px-6 text-2xl"; | ||
|
|
||
| const round = " h-[60px] w-[60px] rounded-full p-4"; | ||
|
|
||
| const square = "h-[60px] w-[60px] p-4"; | ||
|
|
||
| const primary = "bg-primary-main text-neutrals-light-100"; | ||
|
|
||
| const secondary = | ||
| "bg-transparent text-primary-dark border-2 border-primary-dark "; | ||
|
|
||
| const danger = | ||
| "bg-transparent text-status-red-main border-2 border-status-red-main"; | ||
|
|
||
| const disabledButton = | ||
| "bg-neutrals-light-500 text-neutrals-dark-200 border-transparent cursor-not-allowed"; | ||
|
|
||
| return ( | ||
| <button | ||
| ref={buttonRef} | ||
| style={{ fontSize: fontSize }} | ||
| onClick={onClick} | ||
| className={buttonClassName} | ||
| disabled={disabled} | ||
| > | ||
| {Icon && !text && ( | ||
| <div className="relative z-20"> | ||
| <Icon size={20} /> | ||
| </div> | ||
| )} | ||
| {Icon && text && ( | ||
| <div className="flex items-center"> | ||
| <div className="relative z-20"> | ||
| <Icon | ||
| className="mt-0.2" | ||
| size={20} | ||
| /> | ||
| </div> | ||
| <span className="relative z-20 pl-1 whitespace-nowrap hidden lg:block"> | ||
| {text} | ||
| </span> | ||
| </div> | ||
| className={twMerge( | ||
| clsx(base, { | ||
| [small]: shape === "small", | ||
| [medium]: shape === "medium", | ||
| [large]: shape === "large", | ||
| [round]: shape === "round", | ||
| [square]: shape === "square", | ||
| [primary]: severity === "primary", | ||
| [secondary]: severity === "secondary", | ||
| [danger]: severity === "danger", | ||
| [disabledButton]: disabled, | ||
| }), | ||
| )} | ||
| {!Icon && text && <span className="relative z-20">{text}</span>} | ||
| onClick={onClick} | ||
| > | ||
| {icon} | ||
| {text} | ||
| </button> | ||
| ); | ||
| }; | ||
| } | ||
|
|
||
| export default Button; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import clsx from "clsx"; | ||
| import Modal from "@/components/Modal"; | ||
| import InputField from "@/components/InputField"; | ||
| import MemberProfilePicture from "@/components/MemberProfilePicture"; | ||
| import MemberPageBackground from "@/components/MemberPageBackground"; | ||
| import Button from "@/components/Button"; | ||
| import { WarningCircle, PencilSimple } from "@phosphor-icons/react"; | ||
|
|
||
| interface EditMemberProps { | ||
| /* Toggles the modal's visibility */ | ||
| isOpen: boolean; | ||
|
|
||
| /* Callback to close the modal */ | ||
| onClose: () => void; | ||
| } | ||
| function EditMember({ isOpen, onClose }: EditMemberProps) { | ||
| // Content style | ||
| const content = "flex flex-col gap-6"; | ||
|
|
||
| return ( | ||
| <Modal | ||
| isOpen={isOpen} | ||
| onClose={onClose} | ||
| icon={<PencilSimple size={24} />} | ||
| title="Edit Member" | ||
| content={ | ||
| <div className={clsx(content)}> | ||
| <InputField | ||
| type="text" | ||
| label="Name" | ||
| error={false} | ||
| required={false} | ||
| placeholder={"John Doe"} | ||
| setError={() => {}} | ||
| setInput={() => {}} | ||
| /> | ||
| <MemberProfilePicture /> | ||
| <MemberPageBackground /> | ||
| </div> | ||
| } | ||
| actions={ | ||
| <div className="flex flex-col gap-1 w-full"> | ||
| <div className="flex flex-col gap-4"> | ||
| <div> | ||
| <Button | ||
| shape="medium" | ||
| text="Save Changes" | ||
| onClick={onClose} | ||
| /> | ||
| </div> | ||
| <div className="flex flex-row gap-4"> | ||
| <Button | ||
| shape="medium" | ||
| text="Delete Member Page" | ||
| severity="danger" | ||
| /> | ||
| <Button | ||
| shape="medium" | ||
| text="Reset Member Page" | ||
| severity="secondary" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-row justify-start items-center gap-1 text-red-500 text-body-sm"> | ||
| <WarningCircle size={16} /> | ||
| <span> Error</span> | ||
| </div> | ||
| </div> | ||
| } | ||
| ></Modal> | ||
| ); | ||
| } | ||
|
|
||
| export default EditMember; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.