@usefui/components 1.5.3 → 1.7.0

package/src/badge/Badge.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Badge } from "./";
+import { Page } from "..";
+import { ComponentSizeEnum } from "../../../../types";
 
 // Duplicated doc: The JSDoc content isn't rendering on Storybook.
 
@@ -20,9 +22,11 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <Story />
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Badge>;
@@ -35,7 +39,7 @@ export const Default: Story = {
 export const Shapes: Story = {
   render: ({ ...args }) => {
     return (
-      <div className="flex g-medium-30">
+      <div className="flex flex column g-medium-30">
         <Badge shape="square">Square</Badge>
         <Badge shape="smooth">Smooth</Badge>
         <Badge shape="round">Round</Badge>
@@ -43,6 +47,23 @@ export const Shapes: Story = {
     );
   },
 };
+export const Sizes: Story = {
+  render: ({ ...args }) => {
+    return (
+      <div className="flex align-start g-medium-30">
+        <Badge variant="border" sizing="small">
+          Label
+        </Badge>
+        <Badge variant="border" sizing="medium">
+          Label
+        </Badge>
+        <Badge variant="border" sizing="large">
+          Label
+        </Badge>
+      </div>
+    );
+  },
+};
 export const Variants: Story = {
   render: ({ ...args }) => {
     return (
@@ -51,9 +72,10 @@ export const Variants: Story = {
         <Badge variant="secondary">Secondary</Badge>
         <Badge variant="border">Border</Badge>
         <Badge variant="meta">Meta</Badge>
+        <Badge variant="hint">Hint</Badge>
         <Badge variant="success">Success</Badge>
         <Badge variant="warning">Warning</Badge>
-        <Badge variant="error">Error</Badge>
+        <Badge variant="danger">Error</Badge>
       </div>
     );
   },

package/src/badge/index.tsx

@@ -3,20 +3,24 @@
 import React from "react";
 import { BadgeWrapper } from "./styles";
 
-import type { IComponentStyling, TComponentShape } from "../../../../types";
+import {
+  ComponentShapeEnum,
+  ComponentSizeEnum,
+  ComponentVariantEnum,
+  IComponentSize,
+  TComponentVariant,
+  TComponentVariantExtended,
+  type IComponentShape,
+  type IComponentStyling,
+} from "../../../../types";
 
-interface IBadgeProperties
-  extends IComponentStyling,
+export interface IBadgeProperties
+  extends
+    IComponentStyling,
+    IComponentShape,
+    IComponentSize,
     React.ComponentProps<"div"> {
-  variant?:
-    | "primary"
-    | "secondary"
-    | "border"
-    | "error"
-    | "warning"
-    | "success"
-    | "meta";
-  shape?: TComponentShape;
+  variant?: TComponentVariant | TComponentVariantExtended;
 }
 
 /**
@@ -30,6 +34,7 @@ interface IBadgeProperties
  * @param {IBadgeProperties} props - The props for the Badge component.
  * @param {boolean} props.raw - Define whether the component is styled or not.
  * @param {TComponentShape} props.shape - The shape of the component. Defaults to `smooth`.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to "small".
  * @param {string} props.variant - The style definition used by the component.
  * @param {ReactNode} props.children - The content to be rendered inside the Badge.
  * @returns {ReactElement} The Badge component.
@@ -37,8 +42,9 @@ interface IBadgeProperties
 export const Badge = (props: IBadgeProperties) => {
   const {
     raw = false,
-    variant = "primary",
-    shape = "smooth",
+    sizing = ComponentSizeEnum.Small,
+    variant = ComponentVariantEnum.Primary,
+    shape = ComponentShapeEnum.Smooth,
     children,
     ...restProps
   } = props;
@@ -48,6 +54,7 @@ export const Badge = (props: IBadgeProperties) => {
       data-raw={raw}
       data-variant={variant}
       data-shape={shape}
+      data-size={sizing}
       {...restProps}
     >
       {children}

package/src/badge/styles/index.ts

@@ -1,91 +1,98 @@
 import styled, { css } from "styled-components";
 
 const BadgeBaseStyles = css`
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--measurement-medium-10);
+
   min-width: var(--measurement-medium-60);
   min-height: var(--measurement-medium-60);
   width: fit-content;
 
   border: var(--measurement-small-10) solid transparent;
+  padding: 0 var(--measurement-medium-30);
 
   font-size: var(--fontsize-small-60);
-  padding: var(--measurement-medium-10) var(--measurement-medium-30);
   font-weight: 500;
+  letter-spacing: calc(
+    var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+  );
+  line-height: 0;
+
   transition: all ease-in-out 0.2s;
 `;
-
 const BadgeVariantStyles = css`
   border: var(--measurement-small-10) solid transparent;
 
   &[data-variant="primary"] {
-    background-color: var(--font-color);
-    color: var(--body-color);
+    background-color: var(--font-color-alpha-10);
+    color: var(--font-color-alpha-80);
 
-    &:hover,
-    &:focus {
-      border-color: var(--font-color-alpha-10);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="secondary"] {
-    background-color: var(--font-color-alpha-10);
-    color: var(--font-color-alpha-60);
+    background-color: var(--contrast-color);
+    color: var(--font-color-alpha-80);
 
-    &:hover,
-    &:focus {
-      color: var(--font-color);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="border"] {
     background-color: transparent;
     border-color: var(--font-color-alpha-10);
-    color: var(--font-color-alpha-60);
+    color: var(--font-color-alpha-80);
 
-    &:hover,
-    &:focus {
-      color: var(--font-color);
+    * {
+      color: currentColor !important;
     }
   }
-  &[data-variant="error"] {
+  &[data-variant="danger"] {
     background-color: var(--alpha-red-10);
-    color: var(--alpha-red-80);
+    border-color: var(--alpha-red-10);
+    color: var(--shade-red-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-red-10);
-      color: var(--color-red);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="warning"] {
     background-color: var(--alpha-orange-10);
-    color: var(--alpha-orange-80);
+    border-color: var(--alpha-orange-10);
+    color: var(--shade-orange-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-orange-10);
-      color: var(--color-orange);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="success"] {
     background-color: var(--alpha-green-10);
-    color: var(--alpha-green-80);
+    border-color: var(--alpha-green-10);
+    color: var(--shade-lime-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-green-10);
-      color: var(--color-green);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="meta"] {
-    background-color: var(--alpha-blue-10);
-    color: var(--alpha-blue-80);
+    background-color: var(--alpha-indigo-10);
+    border-color: var(--alpha-indigo-10);
+    color: var(--shade-indigo-20);
+
+    * {
+      color: currentColor !important;
+    }
+  }
+  &[data-variant="hint"] {
+    background-color: var(--alpha-purple-10);
+    border-color: var(--alpha-purple-10);
+    color: var(--shade-purple-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-blue-10);
-      color: var(--color-blue);
+    * {
+      color: currentColor !important;
     }
   }
 `;
@@ -97,13 +104,35 @@ const BadgeShapeStyles = css`
     border-radius: var(--measurement-medium-20);
   }
   &[data-shape="round"] {
-    border-radius: var(--measurement-large-90);
+    border-radius: var(--measurement-medium-60);
   }
 `;
+const BadgeSizeStyles = css`
+  &[data-size="small"] {
+    padding: 0 var(--measurement-medium-30);
+
+    min-width: var(--measurement-medium-70);
+    min-height: var(--measurement-medium-70);
+  }
+  &[data-size="medium"] {
+    padding: 0 var(--measurement-medium-40);
+
+    min-width: var(--fontsize-medium-60);
+    min-height: var(--fontsize-medium-60);
+  }
+  &[data-size="large"] {
+    padding: 0 var(--measurement-medium-40);
+
+    min-width: var(--fontsize-medium-70);
+    min-height: var(--fontsize-medium-70);
+  }
+`;
+
 export const BadgeWrapper = styled.div<any>`
   &[data-raw="false"] {
     ${BadgeBaseStyles}
     ${BadgeVariantStyles}
     ${BadgeShapeStyles}
+    ${BadgeSizeStyles}
   }
 `;

package/src/button/Button.stories.tsx

@@ -8,9 +8,11 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <Story />
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Button>;
@@ -46,15 +48,28 @@ export const Variants: Story = {
   render: ({ ...args }) => {
     return (
       <Page>
-        <Page.Content className="flex align-center justify-center">
+        <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="accent">
+              <span className="color-mono-white">Accent</span>
+            </Button>
+          </div>
           <div className="flex align-center justify-center g-medium-30 flex-wrap">
             <Button variant="primary">Primary</Button>
             <Button variant="secondary">Secondary</Button>
             <Button variant="tertiary">Tertiary</Button>
-            <Button variant="danger">Danger</Button>
-            <Button variant="warning">Warning</Button>
             <Button variant="mono">Mono</Button>
             <Button variant="border">Border</Button>
+          </div>
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="hint">Hint</Button>
+            <Button variant="meta">Meta</Button>
+            <Button variant="success">Success</Button>
+            <Button variant="danger">Danger</Button>
+            <Button variant="warning">Warning</Button>
+          </div>
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="link">Link</Button>
             <Button variant="ghost">Ghost</Button>
           </div>
         </Page.Content>
@@ -67,6 +82,11 @@ export const Animations: Story = {
     return (
       <Page>
         <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button animation="reflective" variant="accent">
+              <span className="color-mono-white">Accent</span>
+            </Button>
+          </div>
           <div className="flex align-center justify-center g-medium-30 flex-wrap">
             <Button animation="reflective" variant="primary">
               Primary
@@ -77,12 +97,6 @@ export const Animations: Story = {
             <Button animation="reflective" variant="tertiary">
               Tertiary
             </Button>
-            <Button animation="reflective" variant="danger">
-              Danger
-            </Button>
-            <Button animation="reflective" variant="warning">
-              Warning
-            </Button>
             <Button animation="reflective" variant="mono">
               Mono
             </Button>
@@ -91,27 +105,26 @@ export const Animations: Story = {
             </Button>
           </div>
           <div className="flex align-center justify-center g-medium-30 flex-wrap">
-            <Button animation="reflective" variant="border" sizing="small">
-              Small
+            <Button animation="reflective" variant="hint">
+              Hint
             </Button>
-            <Button animation="reflective" variant="border" sizing="medium">
-              Medium
+            <Button animation="reflective" variant="meta">
+              Meta
             </Button>
-            <Button animation="reflective" variant="border" sizing="large">
-              Large
+            <Button animation="reflective" variant="success">
+              Success
             </Button>
-          </div>
-          <div className="flex align-center justify-center g-medium-30 flex-wrap">
-            <Button animation="reflective" variant="border" shape="square">
-              Square
-            </Button>
-            <Button animation="reflective" variant="border" shape="smooth">
-              Smooth
+            <Button animation="reflective" variant="danger">
+              Danger
             </Button>
-            <Button animation="reflective" variant="border" shape="round">
-              Round
+            <Button animation="reflective" variant="warning">
+              Warning
             </Button>
           </div>
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="link">Link</Button>
+            <Button variant="ghost">Ghost</Button>
+          </div>
         </Page.Content>
       </Page>
     );

package/src/button/index.tsx

@@ -9,16 +9,20 @@ import {
   IComponentSize,
   ComponentVariantEnum,
   TComponentVariant,
-  TComponentShape,
+  ComponentShapeEnum,
+  IComponentShape,
+  TComponentVariantExtended,
 } from "../../../../types";
 
 export interface IButtonProperties
-  extends IComponentStyling,
+  extends
+    IComponentStyling,
+    IComponentShape,
     IComponentSize,
     React.ComponentPropsWithRef<"button"> {
   rawicon?: boolean;
-  variant?: TComponentVariant | "danger" | "warning";
-  shape?: TComponentShape;
+  variant?: TComponentVariant | TComponentVariantExtended | "link" | "accent";
+
   animation?: "reflective";
 }
 
@@ -46,7 +50,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
       name,
       variant = ComponentVariantEnum.Primary,
       sizing = ComponentSizeEnum.Medium,
-      shape = "smooth",
+      shape = ComponentShapeEnum.Smooth,
       animation,
       raw,
       rawicon,
@@ -82,7 +86,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
           y: ((e.clientY - rect.top) / rect.height) * 100,
         });
       },
-      []
+      [],
     );
     const handleMouseEnter = React.useCallback(
       (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -91,7 +95,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
 
         setIsHovering(true);
       },
-      []
+      [],
     );
     const handleMouseLeave = React.useCallback(
       (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -100,7 +104,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
 
         setIsHovering(false);
       },
-      []
+      [],
     );
 
     return (
@@ -136,6 +140,6 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
         {children}
       </ButtonWrapper>
     );
-  }
+  },
 );
 Button.displayName = "Button";