Badge

Changelog.md

@@ -1,6 +1,24 @@
 <!-- markdownlint-configure-file { "MD024": false } -->
 # Changelog
 
+## v0.6.0 - Badge
+
+### 👾 Feature
+
+- Badge
+
+### 📶 Changes
+
+- Update changelog
+- Button Outline Color
+- Button Badge
+
+## v0.5.0 - Accordion
+
+### 👾 Feature
+
+- Accordion
+
 ## v0.4.2 - Text Box (Jan 22 - 2024)
 
 ### 📶 Changes

package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.5.0",
+  "version": "0.6.0",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -74,8 +74,8 @@
     "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
-    "@types/node": "20.11.21",
-    "@types/react": "18.2.60",
+    "@types/node": "20.11.24",
+    "@types/react": "18.2.61",
     "@types/react-dom": "18.2.19",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "autoprefixer": "10.4.17",

src/theme/badge.css

@@ -0,0 +1,45 @@
+.badge {
+  &-size {
+    &-lg {
+      @apply badge-lg;
+    }
+
+    &-sm {
+      @apply badge-sm;
+    }
+
+    &-xs {
+      @apply badge-xs;
+    }
+  }
+
+  &-color {
+    &-primary {
+      @apply badge-primary;
+    }
+
+    &-secondary {
+      @apply badge-secondary;
+    }
+
+    &-accent {
+      @apply badge-accent;
+    }
+
+    &-success {
+      @apply badge-success;
+    }
+
+    &-warning {
+      @apply badge-warning;
+    }
+
+    &-info {
+      @apply badge-info;
+    }
+
+    &-error {
+      @apply badge-error;
+    }
+  }
+}

src/theme/button.css

@@ -1,6 +1,4 @@
 .button {
-  @apply btn;
-
   &-link {
     @apply btn-link;
   }
@@ -41,6 +39,10 @@
     &-error {
       @apply btn-error;
     }
+
+    &-ghost {
+      @apply btn-ghost;
+    }
   }
 
   &-size {

src/theme/main.css

@@ -4,6 +4,7 @@
 
 @import './accordion.css';
 @import './avatar.css';
+@import './badge.css';
 @import './button.css';
 @import './checkbox.css';
 @import './radio.css';

src/types/ui/components/badge.types.ts

@@ -0,0 +1,13 @@
+import type { ColorType, SizeType } from '@/types';
+import type { IconType } from 'react-icons';
+import type { PositionType } from '@/types';
+
+export interface BadgeType {
+  children: React.ReactNode;
+
+  color?: ColorType;
+  outline?: boolean;
+  size?: SizeType;
+  icon?: IconType;
+  iconPosition?: PositionType;
+}

src/types/ui/components/button.types.ts

@@ -1,4 +1,4 @@
-import type { ColorButtonType, SizeType } from '@/types';
+import type { BadgeType, ColorButtonType, SizeType } from '@/types';
 import type { IconType } from 'react-icons';
 import type { PositionType } from '@/types';
 
@@ -13,6 +13,10 @@ export interface ButtonType
   iconPosition?: PositionType;
   loading?: boolean;
   loadingLabel?: string;
+
+  withBadge?: boolean;
+  badge?: React.ReactNode;
+  badgeProps?: Omit<BadgeType, 'children' | 'size'>;
 }
 
 export type ButtonRef = HTMLButtonElement;

src/types/ui/components/index.ts

@@ -1,3 +1,4 @@
 export type * from './accordion.types';
 export type * from './avatar.types';
+export type * from './badge.types';
 export type * from './button.types';

src/ui/components/badge/__snapshots__/badge.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Badge /> snapshot 1`] = `
+<div>
+  <div
+    class="badge"
+  >
+    Badge
+  </div>
+</div>
+`;
+
+exports[`<Badge /> snapshot all props 1`] = `
+<div>
+  <div
+    class="badge badge-primary badge-outline badge-size-lg gap-2"
+  >
+    Badge
+    <svg
+      fill="currentColor"
+      height="1em"
+      stroke="currentColor"
+      stroke-width="0"
+      viewBox="0 0 512 512"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M157.52 272h36.96L176 218.78 157.52 272zM352 256c-13.23 0-24 10.77-24 24s10.77 24 24 24 24-10.77 24-24-10.77-24-24-24zM464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM250.58 352h-16.94c-6.81 0-12.88-4.32-15.12-10.75L211.15 320h-70.29l-7.38 21.25A16 16 0 0 1 118.36 352h-16.94c-11.01 0-18.73-10.85-15.12-21.25L140 176.12A23.995 23.995 0 0 1 162.67 160h26.66A23.99 23.99 0 0 1 212 176.13l53.69 154.62c3.61 10.4-4.11 21.25-15.11 21.25zM424 336c0 8.84-7.16 16-16 16h-16c-4.85 0-9.04-2.27-11.98-5.68-8.62 3.66-18.09 5.68-28.02 5.68-39.7 0-72-32.3-72-72s32.3-72 72-72c8.46 0 16.46 1.73 24 4.42V176c0-8.84 7.16-16 16-16h16c8.84 0 16 7.16 16 16v160z"
+      />
+    </svg>
+  </div>
+</div>
+`;

src/ui/components/badge/badge.component.tsx

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import cls from 'classnames';
+
+import type { BadgeType } from '@/types';
+
+const Badge = ({
+  children,
+  color,
+  icon: Icon,
+  iconPosition = 'left',
+  outline,
+  size = 'md'
+}: BadgeType) => {
+  const newIcon = useMemo(() => {
+    if (!Icon) {
+      return;
+    }
+
+    return <Icon />;
+  }, [Icon]);
+
+  return (
+    <div
+      className={cls('badge', {
+        [`badge-color-${color}`]: !outline && color,
+        [`badge-${color}`]: outline && color,
+        'badge-outline': outline,
+        [`badge-size-${size}`]: size !== 'md',
+        'gap-2': Icon
+      })}
+    >
+      {iconPosition === 'left' && newIcon}
+      {children}
+      {iconPosition === 'right' && newIcon}
+    </div>
+  );
+};
+
+export default Badge;