feat(apps-ui-kit): add Button component (#1010)

* feat(ui): kickoff * feat(ui): update package name * feat(ui): update headers * refactor: move folders around and add aliases * fix: cleanup exports field in package.json * fix: update alias import to use "@" * fix: manypkg check * feat: add configs necessary for the package * fix: update styles import * fix(tooling-ui): linter * refactor!: rename folder * refactor: rename missing strings * fix!: revert and update lockfile * feat(wip): add custom tailwind palettes * feat: add necessary palettes for tailwind * fix: remove unused file * feat: add header to css files * fix: remove change * refactor: format files * fix: update import route * feat(tooling/ui): add button component * fix: add missing scales to tailwind * fix: update border radius and color tertiary * fix: update paddings to new scaling * feat(tooling-ui): add darkmode with an example button * fix: run manypkg fix * feat: add dark and light modes to `Button` * refactor: update tsconfig and use a different file for package compilation * fix: update opacity 8 to be `0.08` instead of `0.8` * manypkg fix * fix: formatting * regenerate lock file * fix: formatting * feat: add enums alias to tsconfig * feat: use tailwindcss darkmode for classes * refactor: remove unused file * fix: remove export * fix: remove outdated styling * fix: add correct export * feat: add shader color palette * fix: improve name of shaders * feat(tooling-ui): add support for darkmode in storybook (#1022) * feat(tooling-ui): add darkmode with an example button * fix: run manypkg fix * regenerate lock file * feat: use tailwindcss darkmode for classes * refactor: remove unused file * fix: remove export * chore: remove debris from story --------- Co-authored-by: marc2332 <[email protected]> * fix: format * fix: Button story props --------- Co-authored-by: evavirseda <[email protected]> Co-authored-by: cpl121 <[email protected]> Co-authored-by: cpl121 <[email protected]> Co-authored-by: Bran <[email protected]> Co-authored-by: Marc Espin <[email protected]>
iotaledger · Jul 9, 2024 · 9f9acdd · 9f9acdd
1 parent 6666ba3
commit 9f9acdd
Show file tree

Hide file tree

Showing 13 changed files with 276 additions and 109 deletions.
diff --git a/apps/ui-kit/.storybook/preview-head.html b/apps/ui-kit/.storybook/preview-head.html
@@ -2,10 +2,10 @@
 
 <style>
     body.dark {
-        @apply bg-neutral-0/80;
+        @apply bg-neutral-6;
     }
 
     body.dark .docs-story {
-        @apply bg-neutral-0/80;
+        @apply bg-neutral-6;
     }
 </style>
diff --git a/apps/ui-kit/package.json b/apps/ui-kit/package.json
@@ -32,6 +32,7 @@
     },
     "dependencies": {
         "@fontsource/inter": "^5.0.17",
+        "classnames": "^2.5.1",
         "lodash.merge": "^4.6.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"

diff --git a/apps/ui-kit/postcss.config.js b/apps/ui-kit/postcss.config.js
@@ -3,6 +3,7 @@
 
 module.exports = {
     plugins: {
+        'tailwindcss/nesting': {},
         tailwindcss: {},
         autoprefixer: {},
     },

diff --git a/apps/ui-kit/src/lib/components/Button.tsx b/apps/ui-kit/src/lib/components/Button.tsx
diff --git a/apps/ui-kit/src/lib/components/atoms/button/Button.tsx b/apps/ui-kit/src/lib/components/atoms/button/Button.tsx
@@ -0,0 +1,72 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { ButtonSize, ButtonType } from './button.enums';
+import {
+    PADDINGS,
+    PADDINGS_ONLY_ICON,
+    BACKGROUND_COLORS,
+    TEXT_COLORS,
+    TEXT_CLASSES,
+    TEXT_COLOR_DISABLED,
+    DISABLED_BACKGROUND_COLORS,
+} from './button.classes';
+import cx from 'classnames';
+
+interface ButtonProps {
+    /**
+     * The size of the button.
+     */
+    size?: ButtonSize;
+    /**
+     * The type of the button
+     */
+    type?: ButtonType;
+    /**
+     * The text of the button.
+     */
+    text?: string;
+    /**
+     The icon of the button
+     */
+    icon?: React.ReactNode;
+    /**
+     * The button is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * The onClick event of the button.
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export function Button({
+    icon,
+    text,
+    disabled,
+    onClick,
+    size = ButtonSize.Medium,
+    type = ButtonType.Primary,
+}: ButtonProps): React.JSX.Element {
+    const paddingClasses = icon && !text ? PADDINGS_ONLY_ICON[size] : PADDINGS[size];
+    const textSizes = TEXT_CLASSES[size];
+    const backgroundColors = disabled ? DISABLED_BACKGROUND_COLORS[type] : BACKGROUND_COLORS[type];
+    const textColors = disabled ? TEXT_COLOR_DISABLED[type] : TEXT_COLORS[type];
+    return (
+        <button
+            onClick={onClick}
+            className={cx(
+                'state-layer relative flex rounded-full disabled:opacity-40',
+                paddingClasses,
+                backgroundColors,
+            )}
+            disabled={disabled}
+        >
+            <div className="flex flex-row items-center justify-center gap-2">
+                {icon && <span className={cx(textColors)}>{icon}</span>}
+                {text && <span className={cx('font-inter', textColors, textSizes)}>{text}</span>}
+            </div>
+        </button>
+    );
+}
diff --git a/apps/ui-kit/src/lib/components/atoms/button/button.classes.ts b/apps/ui-kit/src/lib/components/atoms/button/button.classes.ts
@@ -0,0 +1,53 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ButtonSize, ButtonType } from './button.enums';
+
+export const PADDINGS: Record<ButtonSize, string> = {
+    [ButtonSize.Small]: 'px-md py-xs',
+    [ButtonSize.Medium]: 'px-md py-sm',
+};
+
+export const PADDINGS_ONLY_ICON: Record<ButtonSize, string> = {
+    [ButtonSize.Small]: 'p-xs',
+    [ButtonSize.Medium]: 'p-sm',
+};
+
+export const BACKGROUND_COLORS: Record<ButtonType, string> = {
+    [ButtonType.Primary]: 'bg-primary-30',
+    [ButtonType.Secondary]: 'bg-neutral-90 dark:bg-neutral-20',
+    [ButtonType.Ghost]: 'bg-transparent',
+    [ButtonType.Outlined]: 'bg-transparent border border-neutral-50',
+    [ButtonType.Destructive]: 'bg-error-90',
+};
+
+export const DISABLED_BACKGROUND_COLORS: Record<ButtonType, string> = {
+    [ButtonType.Primary]: 'bg-neutral-80 dark:bg-neutral-30',
+    [ButtonType.Secondary]: 'bg-neutral-90 dark:bg-neutral-20',
+    [ButtonType.Ghost]: 'bg-transparent',
+    [ButtonType.Outlined]: 'bg-transparent border border-neutral-50',
+    [ButtonType.Destructive]: 'bg-error-90',
+};
+
+const DEFAULT_TEXT_COLORS: string = 'text-neutral-10 dark:text-neutral-92';
+
+export const TEXT_COLORS: Record<ButtonType, string> = {
+    [ButtonType.Primary]: 'text-primary-100',
+    [ButtonType.Secondary]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Ghost]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Outlined]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Destructive]: 'text-error-20',
+};
+
+export const TEXT_CLASSES: Record<ButtonSize, string> = {
+    [ButtonSize.Small]: 'text-label-md',
+    [ButtonSize.Medium]: 'text-label-lg',
+};
+
+export const TEXT_COLOR_DISABLED: Record<ButtonType, string> = {
+    [ButtonType.Primary]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Secondary]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Ghost]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Outlined]: DEFAULT_TEXT_COLORS,
+    [ButtonType.Destructive]: 'text-error-20',
+};
diff --git a/apps/ui-kit/src/lib/components/atoms/button/button.enums.ts b/apps/ui-kit/src/lib/components/atoms/button/button.enums.ts
@@ -0,0 +1,15 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ButtonSize {
+    Small = 'small',
+    Medium = 'medium',
+}
+
+export enum ButtonType {
+    Primary = 'primary',
+    Secondary = 'secondary',
+    Ghost = 'ghost',
+    Outlined = 'outlined',
+    Destructive = 'destructive',
+}
diff --git a/apps/ui-kit/src/lib/components/atoms/button/index.ts b/apps/ui-kit/src/lib/components/atoms/button/index.ts
@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Button';
+
+export * from './button.enums';
diff --git a/apps/ui-kit/src/lib/components/atoms/index.ts b/apps/ui-kit/src/lib/components/atoms/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './button';
diff --git a/apps/ui-kit/src/lib/components/index.ts b/apps/ui-kit/src/lib/components/index.ts
@@ -3,4 +3,4 @@
 
 import '../styles/index.css';
 
-export * from './Button';
+export * from './atoms';
diff --git a/apps/ui-kit/src/lib/styles/index.css b/apps/ui-kit/src/lib/styles/index.css
@@ -46,3 +46,38 @@
         font-feature-settings: 'ss01' on;
     }
 }
+
+@layer utilities {
+    .state-layer,
+    .state-layer-inverted {
+        &::after {
+            content: '';
+            border-radius: inherit;
+            @apply absolute;
+            @apply h-full w-full;
+            @apply left-0 top-0;
+            @apply opacity-0;
+            @apply transition-opacity duration-75;
+        }
+
+        &:hover::after {
+            @apply opacity-8;
+        }
+
+        &:active::after {
+            @apply opacity-12;
+        }
+    }
+
+    .state-layer {
+        &::after {
+            @apply bg-primary-60;
+        }
+    }
+
+    .state-layer-inverted {
+        &::after {
+            @apply bg-primary-80;
+        }
+    }
+}
diff --git a/apps/ui-kit/src/storybook/stories/atoms/Button.stories.tsx b/apps/ui-kit/src/storybook/stories/atoms/Button.stories.tsx
@@ -3,17 +3,14 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from '@/components';
+import { Button } from '@/components/atoms/button/Button';
+import { ButtonSize, ButtonType } from '@/components/atoms/button';
 
 const meta = {
     component: Button,
     tags: ['autodocs'],
     render: (props) => {
-        return (
-            <div className="flex flex-col items-start gap-2">
-                <Button {...props} />
-            </div>
-        );
+        return <Button {...props} />;
     },
 } satisfies Meta<typeof Button>;
 
@@ -23,6 +20,26 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
-        label: 'Button',
+        text: 'Button',
+    },
+    argTypes: {
+        text: {
+            control: 'text',
+        },
+        size: {
+            control: {
+                type: 'select',
+                options: Object.values(ButtonSize),
+            },
+        },
+        type: {
+            control: {
+                type: 'select',
+                options: Object.values(ButtonType),
+            },
+        },
+        disabled: {
+            control: 'boolean',
+        },
     },
 };