first commit

calcom/packages/ui/components/layout/ShellSubHeading.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+import { classNames } from "@calcom/lib";
+
+export function ShellSubHeading(props: {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <header className={classNames("mb-3 block justify-between sm:flex", props.className)}>
+      <div>
+        <h2 className="text-emphasis flex content-center items-center space-x-2 text-base font-bold leading-6 rtl:space-x-reverse">
+          {props.title}
+        </h2>
+        {props.subtitle && <p className="text-subtle text-sm ltr:mr-4">{props.subtitle}</p>}
+      </div>
+      {props.actions && <div className="mt-2 flex-shrink-0 sm:mt-0">{props.actions}</div>}
+    </header>
+  );
+}

calcom/packages/ui/components/layout/index.ts

@@ -0,0 +1 @@
+export { ShellSubHeading } from "./ShellSubHeading";

calcom/packages/ui/components/layout/shellSubHeading.test.tsx

@@ -0,0 +1,37 @@
+import { render, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { ShellSubHeading } from "./ShellSubHeading";
+
+const titleText = "Main Title";
+const subtitleText = "Subtitle Text";
+const buttonText = "Click Me";
+
+describe("Tests for ShellSubHeading Component", () => {
+  test("Should render correctly the component with title and subtitle if the prop was passed", () => {
+    const { getByText, queryByText, rerender } = render(
+      <ShellSubHeading title={titleText} subtitle={subtitleText} />
+    );
+
+    expect(getByText(titleText)).toBeInTheDocument();
+    expect(getByText(subtitleText)).toBeInTheDocument();
+
+    rerender(<ShellSubHeading title={titleText} />);
+
+    expect(getByText(titleText)).toBeInTheDocument();
+    expect(queryByText(subtitleText)).toBeNull();
+  });
+
+  test("Should render the component with actions and verifies if the button was clicked", () => {
+    const mockClickHandler = vi.fn();
+
+    const { getByText } = render(
+      <ShellSubHeading title={titleText} actions={<button onClick={mockClickHandler}>{buttonText}</button>} />
+    );
+
+    const button = getByText(buttonText);
+    fireEvent.click(button);
+
+    expect(mockClickHandler).toHaveBeenCalled();
+  });
+});

calcom/packages/ui/components/layout/spacing.stories.mdx

@@ -0,0 +1,83 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  VariantsTable,
+  VariantColumn,
+  RowTitles,
+  CustomArgsTable,
+} from "@calcom/storybook/components";
+
+import { Tooltip } from "../tooltip";
+
+<Meta title="Layout/Spacing" />
+
+<Title title="Spacing" suffix="Brief" subtitle="Version 2.0 — Last Update: 15 Feb 2023" />
+
+## Definition
+
+Defines the spacing guide used in Cal.coms design system
+
+## Structure
+
+<Examples title="Spacing">
+  <TooltipPrimitive.Provider>
+    <div className="flex flex-row gap-6">
+      <Example title="0"></Example>
+      <Example title="px">
+        <Tooltip content="1px">
+          <div className="bg-inverted h-4 w-px rounded-sm"> </div>
+        </Tooltip>
+      </Example>
+      <Example title="0.5">
+        <Tooltip content="2px">
+          <div className="bg-inverted h-4 w-0.5 rounded-sm"> </div>
+        </Tooltip>
+      </Example>
+      <Example title="1">
+        <Tooltip content="4px">
+          <div className="bg-inverted h-4 w-1 rounded-sm"> </div>
+        </Tooltip>
+      </Example>
+      <Example title="2">
+        <Tooltip content="8px">
+          <div className="bg-inverted h-4 w-2 rounded-sm"> </div>
+        </Tooltip>
+      </Example>
+      <Example title="3">
+        <Tooltip content="12px">
+          <div className="bg-inverted h-4 w-3 rounded-sm"> </div>
+        </Tooltip>
+      </Example>
+      <Example title="4">
+        <Tooltip content="16px">
+          <div className="bg-inverted h-4 w-4 rounded-sm"> </div>
+        </Tooltip>
+      </Example>
+      <Example title="5">
+        <Tooltip content="20px">
+          <div className="bg-inverted h-4 w-5 rounded-sm"> </div>
+        </Tooltip>
+      </Example>
+      <Example title="6">
+        <Tooltip content="24px">
+          <div className="bg-inverted h-4 w-6 rounded-sm"> </div>
+        </Tooltip>
+      </Example>
+      <Example title="8">
+        <Tooltip content="32px">
+          <div className="bg-inverted h-4 w-8 rounded-sm"> </div>
+        </Tooltip>
+      </Example>
+      <Example title="10">
+        <Tooltip content="48px">
+          <div className="bg-inverted h-4 w-10 rounded-sm"> </div>
+        </Tooltip>
+      </Example>
+    </div>
+  </TooltipPrimitive.Provider>
+</Examples>