@grantbii/design-system 1.0.25 → 1.0.27

package/core/atoms/colors.d.ts

@@ -1,16 +1,18 @@
-export declare const MAIN_COLOR: {
+export declare const main: {
     grantbiiBlue: string;
     grantbiiOrange: string;
 };
-export declare const BLACK_COLOR = "#232022";
-export declare const WHITE_COLOR = "#ffffff";
-export declare const NEUTRAL_COLOR: {
+export declare const base: {
+    black: string;
+    white: string;
+};
+export declare const neutral: {
     grey1: string;
     grey2: string;
     grey3: string;
     grey4: string;
 };
-export declare const ACCENT_COLOR: {
+export declare const accent: {
     red1: string;
     red2: string;
     red3: string;
@@ -24,8 +26,7 @@ export declare const ACCENT_COLOR: {
     blue2: string;
     blue3: string;
 };
-export declare const OVERLAY_COLOR = "#13131366";
-export declare const TYPOGRAPHY_COLOR: {
+export declare const typography: {
     blackHigh: string;
     blackMedium: string;
     blackLow: string;
@@ -33,3 +34,6 @@ export declare const TYPOGRAPHY_COLOR: {
     whiteMedium: string;
     whiteLow: string;
 };
+export declare const semantic: {
+    overlay: string;
+};

package/core/atoms/colors.js

@@ -1,16 +1,18 @@
-export const MAIN_COLOR = {
+export const main = {
     grantbiiBlue: "#16538a",
     grantbiiOrange: "#f3924d",
 };
-export const BLACK_COLOR = "#232022";
-export const WHITE_COLOR = "#ffffff";
-export const NEUTRAL_COLOR = {
+export const base = {
+    black: "#232022",
+    white: "#ffffff",
+};
+export const neutral = {
     grey1: "#999999",
     grey2: "#cccccc",
     grey3: "#eeeeee",
     grey4: "#fafafa",
 };
-export const ACCENT_COLOR = {
+export const accent = {
     // usually includes dangerous, wrong or rejected information
     red1: "#c02318",
     red2: "#f88e86",
@@ -28,8 +30,7 @@ export const ACCENT_COLOR = {
     blue2: "#74aeef",
     blue3: "#bad6f7",
 };
-export const OVERLAY_COLOR = "#13131366";
-export const TYPOGRAPHY_COLOR = {
+export const typography = {
     blackHigh: "#000000e5",
     blackMedium: "#00000099",
     blackLow: "#0000004d",
@@ -37,3 +38,6 @@ export const TYPOGRAPHY_COLOR = {
     whiteMedium: "#ffffff99",
     whiteLow: "#0000001a",
 };
+export const semantic = {
+    overlay: "#13131366",
+};

package/core/global/GlobalStyle.js

@@ -1,7 +1,7 @@
 "use client";
 import { createGlobalStyle } from "styled-components";
 import "../../public/fonts/satoshi/css/satoshi.css";
-import { TYPOGRAPHY_COLOR, WHITE_COLOR } from "../atoms/colors";
+import * as Colors from "../atoms/colors";
 const GlobalStyle = createGlobalStyle `
   html,
   body {
@@ -9,8 +9,8 @@ const GlobalStyle = createGlobalStyle `
   }
 
   body {
-    color: ${TYPOGRAPHY_COLOR.blackHigh};
-    background: ${WHITE_COLOR};
+    color: ${Colors.typography.blackHigh};
+    background: ${Colors.base.white};
     font-family: Satoshi;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

package/core/molecules/Badge.d.ts

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

package/core/molecules/Badge.js

@@ -0,0 +1,23 @@
+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, {}))] }));
+export default Badge;
+const BaseBadge = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  padding: 5px 16px;
+  border-radius: 130px;
+
+  background-color: ${({ $backgroundColor }) => $backgroundColor};
+  color: ${({ $color }) => $color};
+`;
+const BadgeText = styled.p `
+  font-weight: 500;
+  font-size: 14px;
+`;
+const Button = styled.button `
+  display: flex;
+`;

package/index.d.ts

@@ -1,6 +1,7 @@
-export * from "@phosphor-icons/react";
+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 * from "./core/atoms/colors";
+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

@@ -1,6 +1,7 @@
-export * from "@phosphor-icons/react";
+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 * from "./core/atoms/colors";
+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.25",
+  "version": "1.0.27",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

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

@@ -0,0 +1,10 @@
+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 Everything: Story;

package/stories/molecules/Badge.stories.js

@@ -0,0 +1,35 @@
+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;
+export const Default = {
+    args: {
+        text: "Badge",
+    },
+};
+export const Icon = {
+    args: {
+        icon: _jsx(Icons.SmileyXEyesIcon, { size: 20 }),
+        text: "Badge",
+    },
+};
+export const Close = {
+    args: {
+        text: "Badge",
+        onClickClose: () => alert("closed badge"),
+    },
+};
+export const Everything = {
+    args: {
+        icon: _jsx(Icons.SmileyXEyesIcon, { size: 20 }),
+        text: "Badge",
+        onClickClose: () => alert("You have closed the badge!"),
+    },
+};