Merge pull request #8 from weavik/FAD-57-typography

[FAD-57] - Add typography

packages/client3/.storybook/DocsContainer.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { DocsContainer as BaseContainer } from "@storybook/addon-docs/blocks";
+import { useDarkMode } from "storybook-dark-mode";
+import { themes } from "@storybook/theming";
+
+export const DocsContainer = ({ children, context }) => {
+  const dark = useDarkMode();
+
+  return (
+    <BaseContainer
+      context={{
+        ...context,
+        storyById: (id) => {
+          const storyContext = context.storyById(id);
+          return {
+            ...storyContext,
+            parameters: {
+              ...storyContext?.parameters,
+              docs: {
+                ...storyContext?.parameters?.docs,
+                theme: dark ? themes.dark : themes.light,
+              },
+            },
+          };
+        },
+      }}
+    >
+      {children}
+    </BaseContainer>
+  );
+};

packages/client3/.storybook/main.js

@@ -21,6 +21,7 @@ module.exports = {
         },
       },
     },
+    "storybook-dark-mode",
   ],
   framework: "@storybook/react",
   webpackFinal: async (config) => {

packages/client3/.storybook/preview.js

@@ -1,6 +1,10 @@
 import "react-toastify/dist/ReactToastify.min.css";
 import "../styles/globals.css";
 
+import { themes } from "@storybook/theming";
+import { DocsContainer } from "./DocsContainer";
+import { useDarkMode } from "storybook-dark-mode";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
@@ -9,4 +13,23 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  darkMode: {
+    // classTarget: "html",
+    stylePreview: true,
+    // Override the default dark theme
+    dark: { ...themes.dark },
+    // Override the default light theme
+    light: { ...themes.light },
+  },
+  docs: {
+    container: DocsContainer,
+  },
 };
+
+export const decorators = [
+  (Story) => (
+    <div className={useDarkMode() ? themes.dark.className : "light"}>
+      <Story />
+    </div>
+  ),
+];

packages/client3/components/design-system/form/form.tsx

@@ -3,8 +3,6 @@ import { ReactNode, FormHTMLAttributes, useEffect } from "react";
 import { FormProvider } from "react-hook-form";
 import { UseFormReturn, SubmitHandler } from "react-hook-form/dist/types/form";
 
-import { HelperText } from "../typography";
-
 type FormProps<FormFields> = Omit<
   FormHTMLAttributes<HTMLFormElement>,
   "onSubmit"
@@ -75,11 +73,12 @@ export function Form<FormFields>({
         {children}
         {/* @ts-expect-error Same as above */}
         {errors[reservedErrorField] ? (
-          <HelperText className="mt-2">
-            {/* @ts-expect-error Same as above */}
-            Error: {errors[reservedErrorField].message}
-          </HelperText>
-        ) : null}
+          <></>
+        ) : // <HelperText className="mt-2">
+        //   {/* @ts-expect-error Same as above */}
+        //   Error: {errors[reservedErrorField].message}
+        // </HelperText>
+        null}
       </form>
     </FormProvider>
   );

packages/client3/components/design-system/input/input.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { forwardRef, InputHTMLAttributes, ReactNode } from "react";
 import { useFormContext } from "react-hook-form";
 
-import { Icon, IconNameType, HelperText } from "@/components/design-system";
+import { Icon, IconNameType } from "@/components/design-system";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   /**
@@ -147,15 +147,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         ) : null}
       </div>
       {helperText || _errorMessage ? (
-        <HelperText
-          className={clsx(
-            isError ? "text-state-error" : "text-dark-80",
-            "mt-1 text-sm leading-none"
-          )}
-        >
-          {_errorMessage ? _errorMessage : helperText}
-        </HelperText>
-      ) : null}
+        <></>
+      ) : // <HelperText
+      //   className={clsx(
+      //     isError ? "text-state-error" : "text-dark-80",
+      //     "mt-1 text-sm leading-none"
+      //   )}
+      // >
+      //   {_errorMessage ? _errorMessage : helperText}
+      // </HelperText>
+      null}
     </div>
   );
 });

packages/client3/components/design-system/input/select.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { Fragment, ReactNode } from "react";
 import { useController, UseControllerProps } from "react-hook-form";
 
-import { HelperText, Icon } from "@/components/design-system";
+import { Icon } from "@/components/design-system";
 
 export interface Option {
   value: string;
@@ -113,7 +113,7 @@ export function Select({
             "unfocused flex w-full items-center justify-between rounded", // unfocused because the color schemes supply a border color as a focus style
             colorScheme === "light"
               ? [
-                  "border bg-white focus:border-sand-600",
+                  "focus:border-sand-600 border bg-white",
                   isError
                     ? "border-clay-100 placeholder:text-clay-700"
                     : "border-sand-200 placeholder:text-sand-500",
@@ -123,7 +123,7 @@ export function Select({
                   "border bg-sky-900 focus:border-white",
                   isError
                     ? "border-clay-500 placeholder:text-clay-500"
-                    : "border-transparent placeholder:text-sand-300",
+                    : "placeholder:text-sand-300 border-transparent",
                 ]
               : null,
             disabled && "opacity-50",
@@ -187,21 +187,22 @@ export function Select({
       </Listbox>
 
       {helperText || errorMessage ? (
-        <HelperText
-          className={clsx(
-            isError
-              ? "text-clay-500"
-              : colorScheme === "light"
-              ? "text-sand-500"
-              : colorScheme === "dark"
-              ? "text-sand-300"
-              : null,
-            "mt-1 text-sm leading-none"
-          )}
-        >
-          {errorMessage ? errorMessage : helperText}
-        </HelperText>
-      ) : null}
+        <></>
+      ) : // <HelperText
+      //   className={clsx(
+      //     isError
+      //       ? "text-clay-500"
+      //       : colorScheme === "light"
+      //       ? "text-sand-500"
+      //       : colorScheme === "dark"
+      //       ? "text-sand-300"
+      //       : null,
+      //     "mt-1 text-sm leading-none"
+      //   )}
+      // >
+      //   {errorMessage ? errorMessage : helperText}
+      // </HelperText>
+      null}
     </div>
   );
 }

packages/client3/components/design-system/link/link.stories.tsx

@@ -5,21 +5,10 @@ import { Link } from ".";
 export default {
   title: "Components/Link",
   component: Link,
-  argTypes: {
-    nextLinkProps: {
-      control: false,
-    },
-    className: {
-      control: false,
-    },
-  },
+  argTypes: {},
 } as ComponentMeta<typeof Link>;
 
-export const LinkStory: ComponentStory<typeof Link> = (args) => {
-  return <Link {...args} />;
-};
-
-LinkStory.args = {
-  children: "Hello Goldfinch",
-  href: "#",
-};
+export const LinkStory: ComponentStory<typeof Link> = (args) => (
+  <Link {...args} />
+);
+LinkStory.args = { href: "#", children: "Some link", noUnderline: false };

packages/client3/components/design-system/link/link.tsx

@@ -2,45 +2,36 @@ import clsx from "clsx";
 import NextLink, { LinkProps as NextLinkProps } from "next/link";
 import { AnchorHTMLAttributes } from "react";
 
-import { IconNameType, Icon } from "../icon";
-
 interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /**
-   * Content within the link. Limited to strings only
-   */
-  children: string;
   /**
    * Destination URL. This can be any valid URL, but it should be a relative URL if it's meant to link within the app
    */
   href: string;
+  noUnderline?: boolean;
   /**
    * Advanced option for controlling props specific to Next.js' Link component
    */
   nextLinkProps?: NextLinkProps;
   className?: string;
-  iconRight?: IconNameType;
 }
 
 export function Link({
-  children,
   href,
+  noUnderline = false,
   nextLinkProps,
   className,
-  iconRight,
   ...rest
 }: LinkProps) {
   return (
     <NextLink passHref {...nextLinkProps} href={href}>
       <a
         className={clsx(
-          "inline-flex items-center gap-1 underline hover:no-underline",
+          noUnderline ? "no-underline" : "underline",
+          "font-semibold",
           className
         )}
         {...rest}
-      >
-        {children}
-        {iconRight ? <Icon name={iconRight} size="sm" /> : null}
-      </a>
+      />
     </NextLink>
   );
 }

packages/client3/components/design-system/typography/body-text.stories.tsx

@@ -0,0 +1,13 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { BodyText } from ".";
+
+export default {
+  title: "Components/Typography",
+  component: BodyText,
+} as ComponentMeta<typeof BodyText>;
+
+export const BodyTextStory: ComponentStory<typeof BodyText> = (args) => (
+  <BodyText {...args} />
+);
+BodyTextStory.args = { size: "large", children: "Some text" };

packages/client3/components/design-system/typography/body-text.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+import { HTMLAttributes } from "react";
+
+export interface BodyTextProps extends HTMLAttributes<HTMLHeadingElement> {
+  size: "large" | "medium" | "normal" | "small";
+  semiBold?: boolean;
+}
+
+export function BodyText({
+  size,
+  semiBold = false,
+  className,
+  ...rest
+}: BodyTextProps) {
+  return (
+    <p
+      className={clsx(
+        `body-text-${size}`,
+        semiBold ? "font-semibold" : "font-normal",
+        className
+      )}
+      {...rest}
+    />
+  );
+}

packages/client3/components/design-system/typography/caption.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Caption } from ".";
+
+export default {
+  title: "Components/Typography",
+  component: Caption,
+} as ComponentMeta<typeof Caption>;
+
+export const CaptionStory: ComponentStory<typeof Caption> = (args) => {
+  return <Caption {...args} />;
+};
+CaptionStory.args = {
+  children: "Caption",
+};

packages/client3/components/design-system/typography/caption.tsx

@@ -0,0 +1,9 @@
+import clsx from "clsx";
+import { HTMLAttributes } from "react";
+
+export function Caption({
+  className,
+  ...rest
+}: HTMLAttributes<HTMLHeadingElement>) {
+  return <small className={clsx(className)} {...rest} />;
+}

packages/client3/components/design-system/typography/display.stories.tsx

@@ -0,0 +1,13 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Display } from ".";
+
+export default {
+  title: "Components/Typography",
+  component: Display,
+} as ComponentMeta<typeof Display>;
+
+export const DisplayStory: ComponentStory<typeof Display> = (args) => (
+  <Display {...args} />
+);
+DisplayStory.args = { level: 1, children: "Some text" };

packages/client3/components/design-system/typography/display.tsx

@@ -0,0 +1,15 @@
+import clsx from "clsx";
+import { HTMLAttributes } from "react";
+
+export interface DisplayProps extends HTMLAttributes<HTMLHeadingElement> {
+  level: 1 | 2;
+}
+
+export function Display({ level, className, ...rest }: DisplayProps) {
+  return (
+    <div
+      className={clsx(`display-${level}`, "font-semibold", className)}
+      {...rest}
+    />
+  );
+}

packages/client3/components/design-system/typography/heading.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Heading } from ".";
+
+export default {
+  title: "Components/Typography",
+  component: Heading,
+  argTypes: {
+    as: {
+      control: {
+        type: null,
+      },
+    },
+  },
+} as ComponentMeta<typeof Heading>;
+
+export const HeadingStory: ComponentStory<typeof Heading> = (args) => (
+  <Heading {...args} />
+);
+HeadingStory.args = { level: 1, medium: false, children: "Some text" };