@grantbii/design-system 1.0.26 → 1.0.28

package/core/molecules/Badge.d.ts

@@ -0,0 +1,11 @@
+import { JSX, MouseEventHandler } from "react";
+type BadgeProps = {
+    text: string;
+    icon?: JSX.Element;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
+    backgroundColor?: string;
+    color?: string;
+    textWidthPixels?: number;
+};
+declare const Badge: ({ icon, text, onClickClose, backgroundColor, color, textWidthPixels, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/core/molecules/Badge.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Colors, Icons } from "../../index";
+const Badge = ({ icon, text, onClickClose, backgroundColor, color, textWidthPixels, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [icon ? icon : _jsx(_Fragment, {}), _jsx(BadgeText, { "$widthPixels": textWidthPixels, children: text }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
+export default Badge;
+const BaseBadge = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  padding: 5px 16px;
+  border-radius: 130px;
+
+  color: ${({ $color = Colors.typography.blackHigh }) => $color};
+  background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) => $backgroundColor};
+`;
+const BadgeText = styled.p `
+  width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : "auto")};
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  font-weight: 500;
+  font-size: 14px;
+`;
+const Button = styled.button `
+  display: flex;
+`;

package/index.d.ts

@@ -4,3 +4,4 @@ export { default as BrandLogo } from "./core/atoms/BrandLogo";
 export * as Colors from "./core/atoms/colors";
 export { default as GlobalStyle } from "./core/global/GlobalStyle";
 export { default as StyledComponentsRegistry } from "./core/integrations/StyledComponentsRegistry";
+export { default as Badge } from "./core/molecules/Badge";

package/index.js

@@ -4,3 +4,4 @@ export { default as BrandLogo } from "./core/atoms/BrandLogo";
 export * as Colors from "./core/atoms/colors";
 export { default as GlobalStyle } from "./core/global/GlobalStyle";
 export { default as StyledComponentsRegistry } from "./core/integrations/StyledComponentsRegistry";
+export { default as Badge } from "./core/molecules/Badge";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/molecules/Badge.stories.d.ts

@@ -0,0 +1,11 @@
+import { Badge } from "@/.";
+import type { StoryObj } from "@storybook/nextjs-vite";
+import { Meta } from "@storybook/nextjs-vite";
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Icon: Story;
+export declare const Close: Story;
+export declare const Long: Story;
+export declare const Everything: Story;

package/stories/molecules/Badge.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge, Icons } from "@/.";
+const meta = {
+    title: "Design System/Atoms/Badge",
+    component: Badge,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+const DEFAULT_TEXT = "Badge";
+const LONG_TEXT = "the quick brown fox jumps over the lazy dog";
+const ICON = _jsx(Icons.SmileyXEyesIcon, { size: 20 });
+const ON_CLICK_CLOSE = () => alert("You have closed the badge!");
+export const Default = {
+    args: {
+        text: DEFAULT_TEXT,
+    },
+};
+export const Icon = {
+    args: {
+        icon: ICON,
+        text: DEFAULT_TEXT,
+    },
+};
+export const Close = {
+    args: {
+        text: DEFAULT_TEXT,
+        onClickClose: ON_CLICK_CLOSE,
+    },
+};
+export const Long = {
+    args: {
+        text: LONG_TEXT,
+        textWidthPixels: 160,
+    },
+};
+export const Everything = {
+    args: {
+        icon: ICON,
+        text: LONG_TEXT,
+        textWidthPixels: 160,
+        onClickClose: ON_CLICK_CLOSE,
+    },
+};