From 0f322a54c8bc3c413339795f673a8babe7ce66c9 Mon Sep 17 00:00:00 2001 From: Taylor Bantle Date: Tue, 26 Mar 2024 15:38:01 -0700 Subject: [PATCH 1/4] components: Button props --- .../src/Button/Default/index.module.css | 87 +++++++++++ .../components/src/Button/Default/index.tsx | 36 +++++ .../src/Button/Group/index.module.css | 5 + .../components/src/Button/Group/index.tsx | 18 +++ .../src/Button/Link/index.module.css | 61 ++++++++ packages/components/src/Button/Link/index.tsx | 41 +++++ .../src/Button/Outlined/index.module.css | 83 ++++++++++ .../components/src/Button/Outlined/index.tsx | 35 +++++ .../components/src/Button/index.module.css | 145 ------------------ packages/components/src/Button/index.tsx | 129 +--------------- packages/components/src/Button/types.ts | 15 ++ ....stories.tsx => ButtonDefault.stories.tsx} | 77 +++++----- .../src/__stories__/ButtonLink.stories.tsx | 77 +++++----- .../__stories__/ButtonOutlined.stories.tsx | 70 ++++++++- .../components/src/__tests__/Button.test.tsx | 14 +- packages/utils/package.json | 1 + 16 files changed, 541 insertions(+), 353 deletions(-) create mode 100644 packages/components/src/Button/Default/index.module.css create mode 100644 packages/components/src/Button/Default/index.tsx create mode 100644 packages/components/src/Button/Group/index.module.css create mode 100644 packages/components/src/Button/Group/index.tsx create mode 100644 packages/components/src/Button/Link/index.module.css create mode 100644 packages/components/src/Button/Link/index.tsx create mode 100644 packages/components/src/Button/Outlined/index.module.css create mode 100644 packages/components/src/Button/Outlined/index.tsx delete mode 100644 packages/components/src/Button/index.module.css create mode 100644 packages/components/src/Button/types.ts rename packages/components/src/__stories__/{Button.stories.tsx => ButtonDefault.stories.tsx} (75%) diff --git a/packages/components/src/Button/Default/index.module.css b/packages/components/src/Button/Default/index.module.css new file mode 100644 index 00000000..34255934 --- /dev/null +++ b/packages/components/src/Button/Default/index.module.css @@ -0,0 +1,87 @@ +.button { + @apply outline-none text-white font-semibold leading-relaxed button-shadow; + + &:hover { + @apply button-shadow-hover; + } + + &:focus { + @apply outline-none widget-shadow-lightblue; + } + + &:disabled { + @apply cursor-default bg-acc-light-text text-white; + + &:hover { + @apply button-shadow bg-acc-light-text; + } + } +} + +/* COLOR VARIANTS */ + +.color-default { + @apply bg-button-1 hover:bg-button-2; +} + +.color-dark { + @apply bg-primary hover:bg-acc-hoverblue; +} + +.color-red { + @apply bg-acc-red hover:bg-acc-hoverred; +} + +.color-green { + @apply bg-acc-green hover:bg-acc-hovergreen; +} + +.color-white { + @apply bg-white text-link-1 shadow-none; + + &:hover { + @apply bg-white/70; + } +} + +.color-gradient { + background: linear-gradient(92.21deg, #6db0fc 11.79%, #5deda2 113.81%); + + &:disabled { + background: linear-gradient(92.21deg, #6db0fc 11.79%, #5deda2 113.81%); + } +} + +/* SHAPE VARIANTS */ + +.shape-default { + @apply rounded; +} + +.shape-pill { + @apply rounded-full; +} + +/* SIZE VARIANTS */ + +.size-small { + @apply px-3 py-0.5 text-sm; +} + +.size-medium { + @apply px-6 py-1.5 text-base; +} + +.size-large { + @apply px-8 py-2 text-base; +} + +/* ICON */ + +.withIcon { + @apply flex items-center justify-center; + + svg { + @apply mr-2; + } +} diff --git a/packages/components/src/Button/Default/index.tsx b/packages/components/src/Button/Default/index.tsx new file mode 100644 index 00000000..d4108da4 --- /dev/null +++ b/packages/components/src/Button/Default/index.tsx @@ -0,0 +1,36 @@ +import cx from "classnames"; +import React from "react"; +import { Props } from "../types"; +import css from "./index.module.css"; + +function Button({ + children, + className, + icon, + color = "default", + size = "medium", + shape = "default", + ...props +}: Props) { + return ( + + ); +} + +export default Button; diff --git a/packages/components/src/Button/Group/index.module.css b/packages/components/src/Button/Group/index.module.css new file mode 100644 index 00000000..8c4eeddb --- /dev/null +++ b/packages/components/src/Button/Group/index.module.css @@ -0,0 +1,5 @@ +.group { + button:not(:last-of-type) { + @apply mr-3; + } +} diff --git a/packages/components/src/Button/Group/index.tsx b/packages/components/src/Button/Group/index.tsx new file mode 100644 index 00000000..b00c1f87 --- /dev/null +++ b/packages/components/src/Button/Group/index.tsx @@ -0,0 +1,18 @@ +import cx from "classnames"; +import React from "react"; +import css from "./index.module.css"; + +type GroupProps = { + children: React.ReactNode; + className?: string; +}; + +function Group({ children, className }: GroupProps) { + return ( +
+ {children} +
+ ); +} + +export default Group; diff --git a/packages/components/src/Button/Link/index.module.css b/packages/components/src/Button/Link/index.module.css new file mode 100644 index 00000000..202d6635 --- /dev/null +++ b/packages/components/src/Button/Link/index.module.css @@ -0,0 +1,61 @@ +.buttonLink { + @apply font-semibold text-sm leading-relaxed bg-transparent; + + &:focus { + @apply outline-none widget-shadow-lightblue; + } + + &:disabled { + @apply text-ld-darkgrey; + + &:hover { + @apply text-ld-darkgrey; + } + } +} + +.underlined { + @apply underline px-2; +} + +/* COLOR VARIANTS */ + +.color-default { + @apply text-link-1 hover:text-link-2; +} + +.color-dark { + @apply text-primary hover:text-acc-hoverblue; +} + +.color-red { + @apply text-acc-red hover:text-acc-hoverred; +} + +.color-green { + @apply text-acc-green hover:text-acc-hovergreen; +} + +/* SIZE VARIANTS */ + +.size-small { + @apply text-sm; +} + +.size-medium { + @apply text-base; +} + +.size-large { + @apply text-lg; +} + +/* ICON */ + +.withIcon { + @apply flex items-center justify-center; + + svg { + @apply mr-2; + } +} diff --git a/packages/components/src/Button/Link/index.tsx b/packages/components/src/Button/Link/index.tsx new file mode 100644 index 00000000..b4969644 --- /dev/null +++ b/packages/components/src/Button/Link/index.tsx @@ -0,0 +1,41 @@ +import cx from "classnames"; +import React from "react"; +import { Props } from "../types"; +import css from "./index.module.css"; + +type LinkProps = Props & { + underlined?: boolean; +}; + +function Link({ + children, + className, + icon, + color = "default", + size = "medium", + underlined = false, + ...props +}: LinkProps) { + return ( + + ); +} + +export default Link; diff --git a/packages/components/src/Button/Outlined/index.module.css b/packages/components/src/Button/Outlined/index.module.css new file mode 100644 index 00000000..bc646c30 --- /dev/null +++ b/packages/components/src/Button/Outlined/index.module.css @@ -0,0 +1,83 @@ +.buttonOutlined { + @apply outline-none font-semibold leading-relaxed border button-shadow bg-transparent; + + &:focus { + @apply outline-none widget-shadow-lightblue; + } + + &:disabled { + @apply cursor-default border-acc-light-text text-acc-light-text; + + &:hover { + @apply border-acc-light-text text-acc-light-text; + } + } +} + +/* COLOR VARIANTS */ + +.color-default { + @apply border-button-1 text-button-1; + + &:hover { + @apply border-button-2 text-button-2; + } +} + +.color-dark { + @apply border-primary text-primary; + + &:hover { + @apply border-acc-hoverblue text-acc-hoverblue; + } +} + +.color-red { + @apply border-acc-red text-acc-red; + + &:hover { + @apply border-acc-hoverred text-acc-hoverred; + } +} + +.color-green { + @apply border-acc-green text-acc-green; + + &:hover { + @apply border-acc-hovergreen text-acc-hovergreen; + } +} + +/* SHAPE VARIANTS */ + +.shape-default { + @apply rounded; +} + +.shape-pill { + @apply rounded-full; +} + +/* SIZE VARIANTS */ + +.size-small { + @apply px-3 py-0.5 text-sm; +} + +.size-medium { + @apply px-6 py-1.5 text-base; +} + +.size-large { + @apply px-8 py-2 text-base; +} + +/* ICON */ + +.withIcon { + @apply flex items-center justify-center; + + svg { + @apply mr-2; + } +} diff --git a/packages/components/src/Button/Outlined/index.tsx b/packages/components/src/Button/Outlined/index.tsx new file mode 100644 index 00000000..64863266 --- /dev/null +++ b/packages/components/src/Button/Outlined/index.tsx @@ -0,0 +1,35 @@ +import cx from "classnames"; +import React from "react"; +import { Props } from "../types"; +import css from "./index.module.css"; + +function Outlined({ + children, + className, + icon, + color = "default", + size = "medium", + shape = "default", + ...props +}: Props) { + return ( + + ); +} + +export default Outlined; diff --git a/packages/components/src/Button/index.module.css b/packages/components/src/Button/index.module.css deleted file mode 100644 index 146a0c41..00000000 --- a/packages/components/src/Button/index.module.css +++ /dev/null @@ -1,145 +0,0 @@ -.button { - @apply rounded px-8 py-1 outline-none text-white text-sm font-semibold leading-relaxed button-shadow bg-button-1; - - &:hover { - @apply button-shadow-hover bg-button-2; - } - - &:focus { - @apply outline-none widget-shadow-lightblue; - } - - &:disabled { - @apply cursor-default bg-acc-light-text; - - &:hover { - @apply button-shadow bg-acc-light-text; - } - } -} - -.small { - @apply px-3; -} - -.outlined { - @apply rounded px-12 py-1 outline-none font-semibold leading-relaxed border button-shadow bg-transparent text-button-1 border-button-1; - - &:hover { - @apply border-button-2 text-button-2; - } - - &:focus { - @apply outline-none widget-shadow-lightblue; - } - - &:disabled { - @apply cursor-default border-acc-light-text text-acc-light-text; - - &:hover { - @apply border-acc-light-text text-acc-light-text; - } - } -} - -.link { - @apply text-link-1 font-semibold text-sm leading-relaxed bg-transparent; - - &:hover { - @apply text-link-2; - } - - &:focus { - @apply outline-none widget-shadow-lightblue; - } - - &:disabled { - @apply text-ld-darkgrey; - - &:hover { - @apply text-ld-darkgrey; - } - } -} - -.dark { - @apply bg-primary; - - &:hover { - @apply bg-acc-hoverblue; - } -} - -.red { - @apply bg-acc-red; - - &:hover { - @apply bg-acc-hoverred; - } -} - -.green { - @apply bg-acc-green; - - &:hover { - @apply bg-acc-hovergreen; - } -} - -.white { - @apply bg-white text-link-1 shadow-none; - - &:hover { - @apply bg-white/70; - } - - &:disabled { - @apply text-white; - } -} - -.gradient { - background: linear-gradient(92.21deg, #6db0fc 11.79%, #5deda2 113.81%); - - &:disabled { - background: linear-gradient(92.21deg, #6db0fc 11.79%, #5deda2 113.81%); - } -} - -.redText { - @apply text-acc-red; - - &:hover { - @apply text-acc-hoverred; - } -} - -.greenText { - @apply text-acc-green; - - &:hover { - @apply text-acc-hovergreen; - } -} - -.darkText { - @apply text-primary; - - &:hover { - @apply text-acc-hoverblue; - } -} - -.pill { - @apply rounded-full text-base; -} - -.underlined { - @apply underline px-2; -} - -.group { - button:not(:last-of-type) { - @apply mr-3; - } -} diff --git a/packages/components/src/Button/index.tsx b/packages/components/src/Button/index.tsx index cc6784dc..31293eb2 100644 --- a/packages/components/src/Button/index.tsx +++ b/packages/components/src/Button/index.tsx @@ -1,125 +1,6 @@ -import cx from "classnames"; -import React, { ButtonHTMLAttributes } from "react"; -import css from "./index.module.css"; +import Button from "./Default"; +import Group from "./Group"; +import Link from "./Link"; +import Outlined from "./Outlined"; -type VariantProps = { - red?: boolean; - green?: boolean; - dark?: boolean; - pill?: boolean; - white?: boolean; - gradient?: boolean; - size?: "small" | "medium" | "large"; -}; - -type ButtonProps = ButtonHTMLAttributes; -type Props = ButtonProps & VariantProps; - -function Button({ - children, - className, - red = false, - green = false, - dark = false, - pill = false, - white = false, - gradient = false, - ...props -}: Props) { - return ( - - ); -} - -function Outlined({ - children, - className, - pill = false, - ...props -}: ButtonProps & { pill?: boolean }) { - return ( - - ); -} - -Button.Outlined = Outlined; - -type LinkProps = Props & { - underlined?: boolean; -}; - -function Link({ - children, - className, - red = false, - green = false, - dark = false, - underlined = false, - ...props -}: LinkProps) { - return ( - - ); -} - -Button.Link = Link; - -type GroupProps = { - children: React.ReactNode; - className?: string; -}; - -function Group({ children, className }: GroupProps) { - return ( -
- {children} -
- ); -} - -Button.Group = Group; - -export default Button; +export default Object.assign(Button, { Outlined, Link, Group }); diff --git a/packages/components/src/Button/types.ts b/packages/components/src/Button/types.ts new file mode 100644 index 00000000..c88dc55e --- /dev/null +++ b/packages/components/src/Button/types.ts @@ -0,0 +1,15 @@ +import { ButtonHTMLAttributes, ReactNode } from "react"; + +type Color = "default" | "red" | "green" | "dark" | "white" | "gradient"; +type Size = "small" | "medium" | "large"; +type Shape = "default" | "pill"; + +type VariantProps = { + color?: Color; + size?: Size; + shape?: Shape; + icon?: ReactNode; +}; + +type ButtonProps = ButtonHTMLAttributes; +export type Props = ButtonProps & VariantProps; diff --git a/packages/components/src/__stories__/Button.stories.tsx b/packages/components/src/__stories__/ButtonDefault.stories.tsx similarity index 75% rename from packages/components/src/__stories__/Button.stories.tsx rename to packages/components/src/__stories__/ButtonDefault.stories.tsx index 677fea19..6e516dcf 100644 --- a/packages/components/src/__stories__/Button.stories.tsx +++ b/packages/components/src/__stories__/ButtonDefault.stories.tsx @@ -1,5 +1,7 @@ +import { AiOutlinePlus } from "@react-icons/all-files/ai/AiOutlinePlus"; import type { Meta, StoryObj } from "@storybook/react"; import { userEvent, within } from "@storybook/test"; +import React from "react"; import Button from "../Button"; const meta: Meta = { @@ -28,91 +30,90 @@ export const Default: Story = { }, }; -export const Green: Story = { - args: { - children: "Button name", - green: true, - }, -}; +// State -export const Red: Story = { +export const Disabled: Story = { args: { children: "Button name", - red: true, + disabled: true, }, }; -export const Dark: Story = { +// Shape + +export const Pill: Story = { args: { children: "Button name", - dark: true, + shape: "pill", }, + name: "Pill (Hosted)", }; -export const WhitePill: Story = { +// Size + +export const Small: Story = { args: { children: "Button name", - white: true, - pill: true, - }, - parameters: { - backgrounds: { default: "lightish" }, + size: "small", }, - name: "White Pill (Hosted)", }; -export const GradientPill: Story = { +export const Large: Story = { args: { children: "Button name", - gradient: true, - pill: true, + size: "large", }, - name: "Gradient Pill (Hosted)", }; -export const Pill: Story = { +// Icon + +export const WithIcon: Story = { args: { children: "Button name", - pill: true, + icon: , }, - name: "Pill (Hosted)", }; -export const Disabled: Story = { +// Color + +export const Green: Story = { args: { children: "Button name", - disabled: true, + color: "green", }, }; -export const DisabledRed: Story = { +export const Red: Story = { args: { children: "Button name", - disabled: true, - red: true, + color: "red", }, }; -export const DisabledGreen: Story = { +export const Dark: Story = { args: { children: "Button name", - disabled: true, - green: true, + color: "dark", }, }; -export const DisabledDark: Story = { +export const WhitePill: Story = { args: { children: "Button name", - disabled: true, - dark: true, + color: "white", + shape: "pill", + }, + parameters: { + backgrounds: { default: "lightish" }, }, + name: "White Pill (Hosted)", }; -export const DisabledWhite: Story = { +export const GradientPill: Story = { args: { children: "Button name", - disabled: true, - white: true, + color: "gradient", + shape: "pill", }, + name: "Gradient Pill (Hosted)", }; diff --git a/packages/components/src/__stories__/ButtonLink.stories.tsx b/packages/components/src/__stories__/ButtonLink.stories.tsx index e3cb0d23..87a17742 100644 --- a/packages/components/src/__stories__/ButtonLink.stories.tsx +++ b/packages/components/src/__stories__/ButtonLink.stories.tsx @@ -1,4 +1,7 @@ +import { AiOutlinePlus } from "@react-icons/all-files/ai/AiOutlinePlus"; import type { Meta, StoryObj } from "@storybook/react"; +import { userEvent, within } from "@storybook/test"; +import React from "react"; import Button from "../Button"; const meta: Meta = { @@ -14,75 +17,79 @@ export default meta; type Story = StoryObj; -export const Basic: Story = { +export const Default: Story = { args: { - children: "Link button name", + children: "Button name", }, -}; + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); -export const Green: Story = { - args: { - children: "Link button name", - green: true, + const button = canvas.getByRole("button"); + + await userEvent.click(button); }, }; -export const Red: Story = { +// State + +export const Disabled: Story = { args: { - children: "Link button name", - red: true, + children: "Button name", + disabled: true, }, }; -export const Dark: Story = { +export const Underlined: Story = { args: { - children: "Link button name", - dark: true, + children: "Button name", + underlined: true, }, }; -export const Underlined: Story = { +// Size + +export const Small: Story = { args: { - children: "Link button name", - underlined: true, + children: "Button name", + size: "small", }, }; -export const Disabled: Story = { +export const Large: Story = { args: { - children: "Link button name", - disabled: true, + children: "Button name", + size: "large", }, }; -export const DisabledRed: Story = { +// Icon + +export const WithIcon: Story = { args: { - children: "Link button name", - disabled: true, - red: true, + children: "Button name", + icon: , }, }; -export const DisabledGreen: Story = { +// Color + +export const Green: Story = { args: { - children: "Link button name", - disabled: true, - green: true, + children: "Button name", + color: "green", }, }; -export const DisabledDark: Story = { +export const Red: Story = { args: { - children: "Link button name", - disabled: true, - dark: true, + children: "Button name", + color: "red", }, }; -export const DisabledUnderlined: Story = { +export const Dark: Story = { args: { - children: "Link button name", - disabled: true, - underlined: true, + children: "Button name", + color: "dark", }, }; diff --git a/packages/components/src/__stories__/ButtonOutlined.stories.tsx b/packages/components/src/__stories__/ButtonOutlined.stories.tsx index fcb9695f..e5789cfd 100644 --- a/packages/components/src/__stories__/ButtonOutlined.stories.tsx +++ b/packages/components/src/__stories__/ButtonOutlined.stories.tsx @@ -1,4 +1,7 @@ +import { AiOutlinePlus } from "@react-icons/all-files/ai/AiOutlinePlus"; import type { Meta, StoryObj } from "@storybook/react"; +import { userEvent, within } from "@storybook/test"; +import React from "react"; import Button from "../Button"; const meta: Meta = { @@ -14,23 +17,82 @@ export default meta; type Story = StoryObj; -export const Solid: Story = { +export const Default: Story = { args: { children: "Button name", }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + const button = canvas.getByRole("button"); + + await userEvent.click(button); + }, +}; + +// State + +export const Disabled: Story = { + args: { + children: "Button name", + disabled: true, + }, }; +// Shape + export const Pill: Story = { args: { children: "Button name", - pill: true, + shape: "pill", }, name: "Pill (Hosted)", }; -export const Disabled: Story = { +// Size + +export const Small: Story = { args: { children: "Button name", - disabled: true, + size: "small", + }, +}; + +export const Large: Story = { + args: { + children: "Button name", + size: "large", + }, +}; + +// Icon + +export const WithIcon: Story = { + args: { + children: "Button name", + icon: , + }, +}; + +// Color + +export const Green: Story = { + args: { + children: "Button name", + color: "green", + }, +}; + +export const Red: Story = { + args: { + children: "Button name", + color: "red", + }, +}; + +export const Dark: Story = { + args: { + children: "Button name", + color: "dark", }, }; diff --git a/packages/components/src/__tests__/Button.test.tsx b/packages/components/src/__tests__/Button.test.tsx index f3538677..6735a84d 100644 --- a/packages/components/src/__tests__/Button.test.tsx +++ b/packages/components/src/__tests__/Button.test.tsx @@ -79,21 +79,21 @@ describe("test Button", () => { }); it("renders a red button", () => { - render(); + render(); const button = screen.getByText("Button Name"); expect(button).toHaveTextContent("Button Name"); expect(button).toHaveAttribute("type", "button"); - expect(button).toHaveClass(/red/); + expect(button).toHaveClass(/color-red/); }); it("renders a solid green button", () => { - render(); + render(); const button = screen.getByText("Button Name"); expect(button).toHaveTextContent("Button Name"); expect(button).toHaveAttribute("type", "button"); - expect(button).toHaveClass(/green/); + expect(button).toHaveClass(/color-green/); expect(button).toHaveClass(/button/); }); @@ -103,7 +103,7 @@ describe("test Button", () => { const button = screen.getByText("Button Name"); expect(button).toHaveTextContent("Button Name"); expect(button).toHaveAttribute("type", "button"); - expect(button).toHaveClass(/link/); + expect(button).toHaveClass(/buttonLink/); }); it("renders an underlined button", () => { @@ -112,7 +112,7 @@ describe("test Button", () => { const button = screen.getByText("Button Name"); expect(button).toHaveTextContent("Button Name"); expect(button).toHaveAttribute("type", "button"); - expect(button).toHaveClass(/link/); + expect(button).toHaveClass(/buttonLink/); expect(button).toHaveClass(/underlined/); }); @@ -122,7 +122,7 @@ describe("test Button", () => { const button = screen.getByText("Button Name"); expect(button).toHaveTextContent("Button Name"); expect(button).toHaveAttribute("type", "button"); - expect(button).toHaveClass(/outlined/); + expect(button).toHaveClass(/buttonOutlined/); }); it("renders a Button Group", () => { diff --git a/packages/utils/package.json b/packages/utils/package.json index 95179eb1..3c773b92 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -16,6 +16,7 @@ ], "packageManager": "yarn@4.0.2", "scripts": { + "clean": "rm -rf dist && rm -rf .rollup.cache && rm -rf types && rm -rf tsconfig.tsbuildinfo && rm -rf .eslintcache", "compile": "tsc -b", "build": "rollup -c --bundleConfigAsCjs", "dbuild": "yarn compile && yarn build", From 239f35adb8060d3dabcc5fc2a4f61acd6dbd8c14 Mon Sep 17 00:00:00 2001 From: Taylor Bantle Date: Wed, 10 Apr 2024 16:09:45 -0700 Subject: [PATCH 2/4] components: Button fixes --- packages/components/src/Button/types.ts | 4 ++-- packages/components/src/CopyButton/index.tsx | 11 ++++++----- packages/components/src/Modal/ForForm.tsx | 15 +++++++++------ .../src/__stories__/CopyButton.stories.tsx | 2 +- 4 files changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/components/src/Button/types.ts b/packages/components/src/Button/types.ts index c88dc55e..ae396de6 100644 --- a/packages/components/src/Button/types.ts +++ b/packages/components/src/Button/types.ts @@ -1,8 +1,8 @@ import { ButtonHTMLAttributes, ReactNode } from "react"; -type Color = "default" | "red" | "green" | "dark" | "white" | "gradient"; +export type Color = "default" | "red" | "green" | "dark" | "white" | "gradient"; type Size = "small" | "medium" | "large"; -type Shape = "default" | "pill"; +export type Shape = "default" | "pill"; type VariantProps = { color?: Color; diff --git a/packages/components/src/CopyButton/index.tsx b/packages/components/src/CopyButton/index.tsx index ae11e1f3..047f5803 100644 --- a/packages/components/src/CopyButton/index.tsx +++ b/packages/components/src/CopyButton/index.tsx @@ -4,23 +4,24 @@ import cx from "classnames"; import React from "react"; import CopyToClipboard from "react-copy-to-clipboard"; import Button from "../Button"; +import { Color } from "../Button/types"; import css from "./index.module.css"; type Props = { text: string; - light?: boolean; + color?: Color; }; -export default function CopyButton({ text, light }: Props) { +export default function CopyButton({ text, color }: Props) { const success = useDelay(3000); return ( diff --git a/packages/components/src/Modal/ForForm.tsx b/packages/components/src/Modal/ForForm.tsx index 76416609..da2818d0 100644 --- a/packages/components/src/Modal/ForForm.tsx +++ b/packages/components/src/Modal/ForForm.tsx @@ -1,6 +1,7 @@ import React, { SyntheticEvent } from "react"; import { ModalButtons, ModalInner, ModalOuter, OuterProps } from "."; import Button from "../Button"; +import { Color, Shape } from "../Button/types"; type Props = OuterProps & { onSubmit: (e: SyntheticEvent) => void | Promise; @@ -9,10 +10,11 @@ type Props = OuterProps & { // Button props btnText: string; buttonDataCy?: string; - pill?: boolean; - red?: boolean; + shape?: Shape; + color?: Color; + // red?: boolean; disabled?: boolean; - gradient?: boolean; + // gradient?: boolean; }; export default function FormModal({ children, ...props }: Props) { @@ -23,9 +25,10 @@ export default function FormModal({ children, ...props }: Props) { ); } diff --git a/packages/components/src/Button/Loader.tsx b/packages/components/src/Button/Loader.tsx new file mode 100644 index 00000000..097d0c72 --- /dev/null +++ b/packages/components/src/Button/Loader.tsx @@ -0,0 +1,65 @@ +import React from "react"; +import ReactLoader from "react-loader"; +import { useThemeContext } from "../tailwind/context"; +import { staticColors } from "../tailwind/theme/base/colors"; +import { IThemeColors } from "../tailwind/types"; +import { Color } from "./types"; + +const loaderDefaultOptions = { + lines: 100, + length: 1, + width: 1, + radius: 4.5, + scale: 1.5, + corners: 1, + opacity: 0.25, + rotate: 0, + direction: 1, + speed: 0.75, + trail: 30, + fps: 20, + zIndex: 2e9, + shadow: false, + hwaccel: false, + position: "absolute", + fadeColor: "transparent", +}; + +type Props = { + loaded: boolean; + color?: Color; +}; + +export default function ButtonLoader(props: Props) { + const { convertThemeRGBToHex } = useThemeContext(); + return ( + + ); +} + +function getLoaderTailwindColor( + convertedHex: IThemeColors, + color?: Color, +): string | undefined { + if (!color) return undefined; + switch (color) { + case "default": + return convertedHex["button-1"]; + case "dark": + return convertedHex.primary; + case "red": + return staticColors["acc-red"]; + case "green": + return staticColors["acc-green"]; + default: + return "#fff"; + } +} diff --git a/packages/components/src/Button/Outlined/index.module.css b/packages/components/src/Button/Outlined/index.module.css index bc646c30..be6f8408 100644 --- a/packages/components/src/Button/Outlined/index.module.css +++ b/packages/components/src/Button/Outlined/index.module.css @@ -1,15 +1,19 @@ .buttonOutlined { - @apply outline-none font-semibold leading-relaxed border button-shadow bg-transparent; + @apply outline-none font-semibold leading-relaxed border-[1.5px] bg-white; &:focus { - @apply outline-none widget-shadow-lightblue; + @apply outline outline-button-2; + } + + &:active { + box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.25); } &:disabled { - @apply cursor-default border-acc-light-text text-acc-light-text; + @apply cursor-default bg-[#C1C3D0] text-acc-darkgrey border-transparent; &:hover { - @apply border-acc-light-text text-acc-light-text; + @apply bg-[#C1C3D0]; } } } @@ -20,7 +24,7 @@ @apply border-button-1 text-button-1; &:hover { - @apply border-button-2 text-button-2; + @apply bg-button-1/10; } } @@ -28,7 +32,7 @@ @apply border-primary text-primary; &:hover { - @apply border-acc-hoverblue text-acc-hoverblue; + @apply bg-primary/10; } } @@ -36,7 +40,7 @@ @apply border-acc-red text-acc-red; &:hover { - @apply border-acc-hoverred text-acc-hoverred; + @apply bg-acc-red/10; } } @@ -44,7 +48,15 @@ @apply border-acc-green text-acc-green; &:hover { - @apply border-acc-hovergreen text-acc-hovergreen; + @apply bg-acc-green/10; + } +} + +.color-white { + @apply bg-transparent text-white border-white/30; + + &:hover { + @apply border-white bg-white/10; } } @@ -61,15 +73,15 @@ /* SIZE VARIANTS */ .size-small { - @apply px-3 py-0.5 text-sm; + @apply border px-4 py-2 text-sm; } .size-medium { - @apply px-6 py-1.5 text-base; + @apply px-6 py-2 text-base; } .size-large { - @apply px-8 py-2 text-base; + @apply px-8 py-2 text-lg; } /* ICON */ @@ -81,3 +93,13 @@ @apply mr-2; } } + +/* LOADING */ + +.loader { + @apply flex items-center; +} + +.invis { + @apply invisible; +} diff --git a/packages/components/src/Button/Outlined/index.tsx b/packages/components/src/Button/Outlined/index.tsx index 64863266..c696cb61 100644 --- a/packages/components/src/Button/Outlined/index.tsx +++ b/packages/components/src/Button/Outlined/index.tsx @@ -1,5 +1,6 @@ import cx from "classnames"; import React from "react"; +import ButtonLoader from "../Loader"; import { Props } from "../types"; import css from "./index.module.css"; @@ -10,6 +11,7 @@ function Outlined({ color = "default", size = "medium", shape = "default", + loading = false, ...props }: Props) { return ( @@ -26,8 +28,17 @@ function Outlined({ // These props need to come last {...props} > - {icon} - {children} + {loading ? ( +
+ +
{children}
+
+ ) : ( + <> + {icon} + {children} + + )} ); } diff --git a/packages/components/src/Button/types.ts b/packages/components/src/Button/types.ts index ae396de6..e624b018 100644 --- a/packages/components/src/Button/types.ts +++ b/packages/components/src/Button/types.ts @@ -9,6 +9,7 @@ type VariantProps = { size?: Size; shape?: Shape; icon?: ReactNode; + loading?: boolean; }; type ButtonProps = ButtonHTMLAttributes; diff --git a/packages/components/src/__stories__/ButtonDefault.stories.tsx b/packages/components/src/__stories__/ButtonDefault.stories.tsx index 6e516dcf..49c03777 100644 --- a/packages/components/src/__stories__/ButtonDefault.stories.tsx +++ b/packages/components/src/__stories__/ButtonDefault.stories.tsx @@ -39,6 +39,13 @@ export const Disabled: Story = { }, }; +export const Loading: Story = { + args: { + children: "Button name", + loading: true, + }, +}; + // Shape export const Pill: Story = { diff --git a/packages/components/src/__stories__/ButtonOutlined.stories.tsx b/packages/components/src/__stories__/ButtonOutlined.stories.tsx index e5789cfd..f4e399c9 100644 --- a/packages/components/src/__stories__/ButtonOutlined.stories.tsx +++ b/packages/components/src/__stories__/ButtonOutlined.stories.tsx @@ -39,6 +39,13 @@ export const Disabled: Story = { }, }; +export const Loading: Story = { + args: { + children: "Button name", + loading: true, + }, +}; + // Shape export const Pill: Story = { @@ -96,3 +103,13 @@ export const Dark: Story = { color: "dark", }, }; + +export const White: Story = { + args: { + children: "Button name", + color: "white", + }, + parameters: { + backgrounds: { default: "dark" }, + }, +}; diff --git a/packages/components/src/tailwind/theme/base/colors.ts b/packages/components/src/tailwind/theme/base/colors.ts index 7b4dd22e..170fd062 100644 --- a/packages/components/src/tailwind/theme/base/colors.ts +++ b/packages/components/src/tailwind/theme/base/colors.ts @@ -28,8 +28,8 @@ const accents = { "acc-lightgreen": "#d4f5e4", "ld-green": "#5deda2", "acc-bright-green": "#29e3c1", - "acc-hovergreen": "#6fdda4", - "acc-green": "#5ac58d", + "acc-hovergreen": "#0A9664", + "acc-green": "#19BA80", "acc-hoverred": "#EF4341", "acc-red": "#FF6967", @@ -39,7 +39,7 @@ const accents = { }; // TODO: Improve these names -export const staticColors = { +export const staticColors: Record = { ...greys, ...blues, ...accents, From c8d3d71adb19e1d4e3e96c6c04c23bc241d2cd05 Mon Sep 17 00:00:00 2001 From: Taylor Bantle Date: Thu, 11 Apr 2024 11:52:15 -0700 Subject: [PATCH 4/4] components: Fix compile --- packages/components/src/tailwind/theme/base/colors.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/tailwind/theme/base/colors.ts b/packages/components/src/tailwind/theme/base/colors.ts index 170fd062..b7e849b8 100644 --- a/packages/components/src/tailwind/theme/base/colors.ts +++ b/packages/components/src/tailwind/theme/base/colors.ts @@ -59,7 +59,10 @@ const configurableColors: IThemeColors = { "code-background": withOpacity("--color-code-background"), }; -const colors = { ...staticColors, ...configurableColors }; +const colors: Record = { + ...staticColors, + ...configurableColors, +}; export default colors;