feat(design-system-components): Added new items to the design compone…

…nts library Added the Badge design component Added the Toast design component
sullivanpj · Jun 5, 2023 · b514777 · b514777
1 parent 93d616a
commit b514777
Show file tree

Hide file tree

Showing 61 changed files with 1,342 additions and 238 deletions.
diff --git a/.storybook/themes/open-system.theme.ts b/.storybook/themes/open-system.theme.ts
@@ -1,25 +1,25 @@
 import { create } from "@storybook/theming";
 
 export default create({
-  base: "dark",
+  base: "light",
 
-  colorPrimary: "#FFFFFF",
-  colorSecondary: "#8B949E",
+  colorPrimary: "#6366F1",
+  colorSecondary: "#10B981",
 
   // UI
   appBg: "#18181B",
   appContentBg: "#18181B",
-  appBorderColor: "#FFFFFF",
+  appBorderColor: "#523188",
   appBorderRadius: 2,
 
   // Text colors
-  textColor: "#FFFFFF",
-  textInverseColor: "#0DDACA",
+  textColor: "#6366F1",
+  textInverseColor: "#10B981",
 
   // Toolbar default and active colors
-  barTextColor: "#FFFFFF",
-  barSelectedColor: "#0DDACA",
-  barBg: "#503083",
+  barTextColor: "#6366F1",
+  barSelectedColor: "#10B981",
+  barBg: "#523188",
 
   // Form colors
   inputBg: "#2D3348",

diff --git a/apps/web/shell/app/(components)/cookie-policy-banner.client.tsx b/apps/web/shell/app/(components)/cookie-policy-banner.client.tsx
diff --git a/apps/web/shell/app/(components)/cookie-policy-banner.server.tsx b/apps/web/shell/app/(components)/cookie-policy-banner.server.tsx
diff --git a/apps/web/shell/app/contact/page.tsx b/apps/web/shell/app/contact/page.tsx
@@ -5,15 +5,15 @@ import {
   ContactFormSegments,
   ContactTypeForm,
 } from "@open-system/contact-feature-form";
-import { MessageTypes, useSetAlerts } from "@open-system/core-data-access";
+import { MessageTypes, useSetToastMessages } from "@open-system/core-data-access";
 import { DateTime, isEmpty } from "@open-system/core-utilities";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import ContactForm from "./contact-form";
 
 export default function Page() {
   const contact = useContactValue();
-  const { add } = useSetAlerts();
+  const { add } = useSetToastMessages();
 
   const router = useRouter();
   useEffect(() => {

diff --git a/apps/web/shell/app/layout.tsx b/apps/web/shell/app/layout.tsx
@@ -1,6 +1,6 @@
 import { ContactFooterForm } from "@open-system/contact-feature-form";
 import { Link, SocialMediaLinks } from "@open-system/core-components";
-import { AlertGroup } from "@open-system/core-feature-notifications";
+import { ToastGroup } from "@open-system/core-feature-notifications";
 import {
   BoxLogo,
   Footer,
@@ -81,7 +81,7 @@ export default function RootLayout(props: {
       <body className="relative h-fit min-h-screen">
         <RootProvider>
           <nav className="fixed top-0 z-nav h-0 w-full overflow-visible">
-            <AlertGroup />
+            <ToastGroup />
 
             <NavigationMenu
               items={[

diff --git a/apps/web/shell/styles/globals.css b/apps/web/shell/styles/globals.css
@@ -72,6 +72,8 @@ select:-webkit-autofill:focus:disabled {
   }
 }
 
+
+
 .title-text h1 {
   animation-delay: 0s;
   font-weight: bold;

diff --git a/assets/favicons/android-chrome-192x192.png b/assets/favicons/android-chrome-192x192.png
diff --git a/assets/favicons/android-chrome-512x512.png b/assets/favicons/android-chrome-512x512.png
diff --git a/assets/favicons/apple-touch-icon.png b/assets/favicons/apple-touch-icon.png
diff --git a/assets/favicons/favicon-16x16.png b/assets/favicons/favicon-16x16.png
diff --git a/assets/favicons/favicon-32x32.png b/assets/favicons/favicon-32x32.png
diff --git a/assets/favicons/favicon.ico b/assets/favicons/favicon.ico
diff --git a/design-system/components/.storybook/manager-head.html b/design-system/components/.storybook/manager-head.html
@@ -0,0 +1,3 @@
+<!-- .storybook/manager-head.html -->
+
+<link rel="icon" type="image/png" sizes="16x16" href="../../../assets/favicons/favicon-16x16.png">
diff --git a/design-system/components/.storybook/preview-body.html b/design-system/components/.storybook/preview-body.html
@@ -5,5 +5,14 @@
     padding: 0px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
       sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    background-color: "#18181B" !important;
+  }
+
+  #storybook-preview-iframe {
+    background-color: "#18181B" !important;
+  }
+
+  iframe {
+    background-color: "#18181B" !important;
   }
 </style>
diff --git a/design-system/components/.storybook/tailwind-imports.css b/design-system/components/.storybook/tailwind-imports.css
@@ -10,3 +10,7 @@
   background: #a36de9; /* Gecko Browsers */
   color: #fff; /* Gecko Browsers */
 }
+
+:host {
+  background: #18181B;
+}
diff --git a/design-system/components/src/badge/Badge.stories.tsx b/design-system/components/src/badge/Badge.stories.tsx
@@ -0,0 +1,76 @@
+import type { ComponentStory } from "@storybook/react";
+import { Badge } from "./Badge";
+import { BadgeBorderThickness, BadgeVariants } from "./Badge.types";
+
+export default {
+  title: "General/Badge",
+  component: Badge,
+};
+
+const Template: ComponentStory<typeof Badge> = args => (
+  <Badge {...args}>Updated</Badge>
+);
+
+export const Primary = Template.bind({});
+Primary.args = { variant: BadgeVariants.PRIMARY };
+
+export const Secondary = Template.bind({});
+Secondary.args = { variant: BadgeVariants.SECONDARY };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { variant: BadgeVariants.TERTIARY };
+
+export const Quaternary = Template.bind({});
+Quaternary.args = { variant: BadgeVariants.QUATERNARY };
+
+export const Inverse = Template.bind({});
+Inverse.args = { variant: BadgeVariants.INVERSE };
+
+export const Warning = Template.bind({});
+Warning.args = { variant: BadgeVariants.WARNING };
+
+export const Error = Template.bind({});
+Error.args = { variant: BadgeVariants.ERROR };
+
+export const Info = Template.bind({});
+Info.args = { variant: BadgeVariants.INFO };
+
+export const Success = Template.bind({});
+Success.args = { variant: BadgeVariants.SUCCESS };
+
+export const Gradient = Template.bind({});
+Gradient.args = { variant: BadgeVariants.GRADIENT };
+
+export const NoBorder = Template.bind({});
+NoBorder.args = {
+  variant: BadgeVariants.SECONDARY,
+  borderThickness: BadgeBorderThickness.NONE,
+};
+
+export const ThinBorder = Template.bind({});
+ThinBorder.args = {
+  variant: BadgeVariants.SECONDARY,
+  borderThickness: BadgeBorderThickness.THIN,
+};
+
+export const NormalBorder = Template.bind({});
+NormalBorder.args = {
+  variant: BadgeVariants.SECONDARY,
+  borderThickness: BadgeBorderThickness.NORMAL,
+};
+
+export const ThickBorder = Template.bind({});
+ThickBorder.args = {
+  variant: BadgeVariants.SECONDARY,
+  borderThickness: BadgeBorderThickness.THICK,
+};
+
+export const CustomBorderColor = Template.bind({});
+CustomBorderColor.args = {
+  variant: BadgeVariants.SECONDARY,
+  borderThickness: BadgeBorderThickness.NORMAL,
+  borderColorClassName: "border-slate-300",
+};
+
+export const OnClickAnimate = Template.bind({});
+OnClickAnimate.args = { variant: BadgeVariants.SECONDARY, onClick: () => {} };
diff --git a/design-system/components/src/badge/Badge.tsx b/design-system/components/src/badge/Badge.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import clsx from "clsx";
+import { MouseEventHandler, useRef } from "react";
+import { PropsWithBase } from "../types";
+import { useRipple } from "../utilities";
+import { isFunction } from "@open-system/core-utilities"
+import { BadgeVariants, BadgeBorderThickness } from "./Badge.types";
+import "../../styles/components.css";
+
+export type BadgeProps = PropsWithBase<{
+  /**
+   * The variant style of the Badge
+   */
+  variant?: BadgeVariants | string;
+
+  /**
+   * Event handler for Badge click event
+   */
+  onClick?: MouseEventHandler;
+
+  /**
+   * The thickness of the border around the badge
+   */
+  borderThickness?: BadgeBorderThickness | string;
+
+   /**
+   * The CSS/Tailwind utility class name to override to color the border
+   */
+   borderColorClassName?: string;
+}>;
+
+/**
+ * The base Badge component used by the Open System repository
+ */
+export const Badge = ({
+  className,
+  children,
+  borderColorClassName,
+  variant = BadgeVariants.SECONDARY,
+  borderThickness = BadgeBorderThickness.NORMAL,
+  onClick,
+}: BadgeProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useRipple(ref);
+
+  return (
+    <div className={clsx({"group badge": isFunction(onClick)},
+    "relative overflow-hidden h-fit w-fit rounded-full")}>
+    <div
+      ref={ref}
+      onClick={onClick}
+      className={clsx({"badge-inner group-active:scale-95": isFunction(onClick)},
+      {"border-[0px]": borderThickness === BadgeBorderThickness.NONE},
+      {"border-[1px]": borderThickness === BadgeBorderThickness.THIN},
+      {"border-[3px]": borderThickness === BadgeBorderThickness.NORMAL},
+      {"border-[4px]": borderThickness === BadgeBorderThickness.THICK},
+        "h-fit w-fit rounded-full pt-0.5 pb-1 px-5 overflow-hidden duration-100 transition-all",
+        {
+          "border-primary": variant === BadgeVariants.PRIMARY,
+        },
+        {
+          "border-secondary": variant === BadgeVariants.SECONDARY,
+        },
+        {
+          "border-tertiary": variant === BadgeVariants.TERTIARY,
+        },
+        {
+          "border-secondary": variant === BadgeVariants.QUATERNARY,
+        },
+        {
+          "border-inverse": variant === BadgeVariants.INVERSE,
+        },
+        {
+          "border-warning": variant === BadgeVariants.WARNING,
+        },
+        {
+          "border-error": variant === BadgeVariants.ERROR,
+        },
+        {
+          "border-info": variant === BadgeVariants.INFO,
+        },
+        {
+          "border-success": variant === BadgeVariants.SUCCESS,
+        },
+        {
+          "border-gradient": variant === BadgeVariants.GRADIENT,
+        },
+        borderColorClassName
+      )}>
+      {children ? (
+        typeof children === "string" ? (
+          <label
+            className={clsx(
+              "font-label-3 text-md font-bold",
+              {
+                "text-primary": variant === BadgeVariants.PRIMARY,
+              },
+              {
+                "text-secondary": variant === BadgeVariants.SECONDARY,
+              },
+              {
+                "text-tertiary": variant === BadgeVariants.TERTIARY,
+              },
+              {
+                "text-secondary": variant === BadgeVariants.QUATERNARY,
+              },
+              {
+                "text-inverse": variant === BadgeVariants.INVERSE,
+              },
+              {
+                "text-warning": variant === BadgeVariants.WARNING,
+              },
+              {
+                "text-error": variant === BadgeVariants.ERROR,
+              },
+              {
+                "text-info": variant === BadgeVariants.INFO,
+              },
+              {
+                "text-success": variant === BadgeVariants.SUCCESS,
+              },
+              {
+                "text-gradient": variant === BadgeVariants.GRADIENT,
+              }
+            )}>
+            {children}
+          </label>
+        ) : (
+          children
+        )
+      ) : (
+        ""
+      )}
+    </div>
+    </div>
+  );
+};