@grantbii/design-system 1.0.27 → 1.0.28

package/core/molecules/Badge.d.ts

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

package/core/molecules/Badge.js

@@ -1,7 +1,7 @@
 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 = Colors.neutral.grey3, color = Colors.typography.blackHigh, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [icon ? icon : _jsx(_Fragment, {}), text ? _jsx(BadgeText, { children: text }) : _jsx(_Fragment, {}), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 20 }) })) : (_jsx(_Fragment, {}))] }));
+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;
@@ -11,10 +11,15 @@ const BaseBadge = styled.div `
   padding: 5px 16px;
   border-radius: 130px;
 
-  background-color: ${({ $backgroundColor }) => $backgroundColor};
-  color: ${({ $color }) => $color};
+  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;
 `;

package/package.json

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

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

@@ -7,4 +7,5 @@ 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

@@ -9,27 +9,38 @@ const meta = {
     },
 };
 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: "Badge",
+        text: DEFAULT_TEXT,
     },
 };
 export const Icon = {
     args: {
-        icon: _jsx(Icons.SmileyXEyesIcon, { size: 20 }),
-        text: "Badge",
+        icon: ICON,
+        text: DEFAULT_TEXT,
     },
 };
 export const Close = {
     args: {
-        text: "Badge",
-        onClickClose: () => alert("closed badge"),
+        text: DEFAULT_TEXT,
+        onClickClose: ON_CLICK_CLOSE,
+    },
+};
+export const Long = {
+    args: {
+        text: LONG_TEXT,
+        textWidthPixels: 160,
     },
 };
 export const Everything = {
     args: {
-        icon: _jsx(Icons.SmileyXEyesIcon, { size: 20 }),
-        text: "Badge",
-        onClickClose: () => alert("You have closed the badge!"),
+        icon: ICON,
+        text: LONG_TEXT,
+        textWidthPixels: 160,
+        onClickClose: ON_CLICK_CLOSE,
     },
 };