@grantbii/design-system 1.0.27 → 1.0.29

package/core/{molecules → atoms}/Badge.d.ts

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

package/core/atoms/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, textWidthPixels, backgroundColor, color, }) => (_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/core/atoms/LinkButton.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributeAnchorTarget, JSX } from "react";
+type LinkButtonProps = {
+    text: string;
+    href: string;
+    target?: HTMLAttributeAnchorTarget;
+    leftIcon?: JSX.Element;
+    rightIcon?: JSX.Element;
+    backgroundColor?: string;
+    color?: string;
+};
+declare const LinkButton: ({ text, href, target, leftIcon, rightIcon, backgroundColor, color, }: LinkButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default LinkButton;

package/core/atoms/LinkButton.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Colors } from "@/.";
+import Link from "next/link";
+import styled from "styled-components";
+const LinkButton = ({ text, href, target, leftIcon, rightIcon, backgroundColor, color, }) => (_jsx(Link, { href: href, target: target, children: _jsxs(BaseLinkButton, { "$backgroundColor": backgroundColor, "$color": color, children: [leftIcon ? leftIcon : _jsx(_Fragment, {}), _jsx("p", { children: text }), rightIcon ? rightIcon : _jsx(_Fragment, {})] }) }));
+export default LinkButton;
+const BaseLinkButton = styled.div `
+  display: flex;
+  gap: 10px;
+
+  padding: 10px 16px;
+  border-radius: 4px;
+
+  font-weight: 500;
+  font-size: 14px;
+
+  color: ${({ $color = Colors.typography.whiteHigh }) => $color};
+  background-color: ${({ $backgroundColor = Colors.main.grantbiiBlue }) => $backgroundColor};
+`;

package/core/global/GlobalStyle.js

@@ -1,7 +1,7 @@
 "use client";
 import { createGlobalStyle } from "styled-components";
 import "../../public/fonts/satoshi/css/satoshi.css";
-import * as Colors from "../atoms/colors";
+import * as Colors from "../foundation/colors";
 const GlobalStyle = createGlobalStyle `
   html,
   body {

package/index.d.ts

@@ -1,7 +1,8 @@
 export * as Icons from "@phosphor-icons/react";
 export * as Flags from "country-flag-icons/react/3x2";
 export { default as BrandLogo } from "./core/atoms/BrandLogo";
-export * as Colors from "./core/atoms/colors";
+export { default as LinkButton } from "./core/atoms/LinkButton";
+export * as Colors from "./core/foundation/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";
+export { default as Badge } from "./core/atoms/Badge";

package/index.js

@@ -1,7 +1,8 @@
 export * as Icons from "@phosphor-icons/react";
 export * as Flags from "country-flag-icons/react/3x2";
 export { default as BrandLogo } from "./core/atoms/BrandLogo";
-export * as Colors from "./core/atoms/colors";
+export { default as LinkButton } from "./core/atoms/LinkButton";
+export * as Colors from "./core/foundation/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";
+export { default as Badge } from "./core/atoms/Badge";

package/package.json

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

package/stories/{molecules → atoms}/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/atoms/Badge.stories.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge, Icons } from "@/.";
+const meta = {
+    title: "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,
+    },
+};

package/stories/atoms/BrandLogo.stories.js

@@ -1,6 +1,6 @@
 import { BrandLogo } from "@/.";
 const meta = {
-    title: "Design System/Atoms/Brand Logo",
+    title: "Atoms/Brand Logo",
     component: BrandLogo,
     tags: ["autodocs"],
     parameters: {

package/stories/atoms/LinkButton.stories.d.ts

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

package/stories/atoms/LinkButton.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icons, LinkButton } from "@/.";
+const meta = {
+    title: "Atoms/LinkButton",
+    component: LinkButton,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        text: "Link",
+        href: "https://grantbii.com",
+        target: "_blank",
+    },
+};
+export const Icon = {
+    args: {
+        text: "Link",
+        href: "https://grantbii.com",
+        target: "_blank",
+        leftIcon: _jsx(Icons.SmileyXEyesIcon, { size: 20 }),
+        rightIcon: _jsx(Icons.SmileyMeltingIcon, { size: 20 }),
+    },
+};