fix: add Tabs to Docs, align colours [MDS-726]

docs/app/components/server/tabs/description.md

@@ -0,0 +1,3 @@
+Tabs to allow users to navigate easily between views within the same context.
+
+Each tab should contain content that is distinct from other tabs in a set for example, tabs can present different sections of news, different genres of music, or different themes of documents.

docs/app/components/server/tabs/examples/Default.tsx

@@ -0,0 +1,16 @@
+import Tabs from '@heathmont/moon-base-tw/lib/tabs/Tabs';
+
+export const Default = () => (
+  <Tabs>
+    <Tabs.List>
+      <Tabs.Tab href="#1">Tab 1</Tabs.Tab>
+      <Tabs.Tab href="#2">Tab 2</Tabs.Tab>
+      <Tabs.Tab href="#3">Tab 3</Tabs.Tab>
+    </Tabs.List>
+    <Tabs.Panels className="h-10">
+      <Tabs.Panel id="1">1</Tabs.Panel>
+      <Tabs.Panel id="2">2</Tabs.Panel>
+      <Tabs.Panel id="3">3</Tabs.Panel>
+    </Tabs.Panels>
+  </Tabs>
+);

docs/app/components/server/tabs/page.tsx

@@ -0,0 +1,22 @@
+import { Default } from '@/app/components/server/tabs/examples/Default';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Tabs() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.tabs.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Tabs</h1>
+      <MDX markdown={server.tabs.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.tabs.examples.Default}
+      />
+    </div>
+  );
+}

docs/app/components/types.ts

@@ -78,6 +78,12 @@ export interface Examples {
         Default: 'string';
       };
     };
+    tabs: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
     tag: {
       description: 'string';
       examples: {

workspaces/base/src/tabs/Tabs.tsx

@@ -1,46 +1,25 @@
 import React from 'react';
-import type Size from './private/types/Size';
+import type PanelProps from './private/types/PanelProps';
+import type Props from './private/types/Props';
+import type TabPolymorphicProps from './private/types/TabPolymorphicProps';
 import getTabSize from './private/utils/getTabSize';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
-type TabsRootProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-const TabsRoot = ({ className, children }: TabsRootProps) => (
-  <div className={mergeClassnames(className)}>{children}</div>
+const TabsRoot = ({ className, children }: Props) => (
+  <div className={className}>{children}</div>
 );
 
-type ListProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-const List = ({ className, children }: ListProps) => (
+const List = ({ className, children }: Props) => (
   <div
     className={mergeClassnames(
-      className,
-      'flex items-center justify-center w-fit gap-2'
+      'flex items-center justify-center w-fit gap-2',
+      className
     )}
   >
     {children}
   </div>
 );
 
-type TabProps = {
-  className?: string;
-  children?: React.ReactNode;
-  isDisabled?: boolean;
-  selected?: boolean;
-  size?: Size;
-};
-
-type TabPolymorphicProps<C extends React.ElementType> =
-  PolymorphicComponentPropWithRef<C, TabProps>;
-
-type TabComponentProps = <C extends React.ElementType = 'a'>(
-  props: TabPolymorphicProps<C>
-) => React.ReactElement | null;
-
 const Tab = React.forwardRef(
   <C extends React.ElementType = 'a'>(
     {
@@ -67,9 +46,10 @@ const Tab = React.forwardRef(
           'after:duration-300 ltr:after:origin-top-left rtl:after:origin-top-right',
           'after:scale-x-0 after:scale-y-100 ltr:hover:after:origin-top-left',
           'rtl:hover:after:origin-top-right hover:after:scale-100 hover:text-piccolo',
-          'focus:outline-none',
+          'focus:outline-none ltr:[&:local-link]:after:origin-top-left',
+          'rtl:[&:local-link]:after:origin-top-right [&:local-link]:after:scale-x-100',
+          '[&:local-link]:text-piccolo',
           isDisabled && 'opacity-30 hover:after:scale-0 cursor-not-allowed',
-          'ltr:[&:local-link]:after:origin-top-left rtl:[&:local-link]:after:origin-top-right [&:local-link]:after:scale-x-100 [&:local-link]:text-piccolo',
           selected &&
             'ltr:after:origin-top-left rtl:after:origin-top-right after:scale-x-100 text-piccolo',
           className
@@ -109,8 +89,9 @@ const Pill = React.forwardRef(
           'after:duration-300 ltr:after:origin-top-left rtl:after:origin-top-right after:scale-x-0',
           'after:scale-y-100 ltr:hover:after:origin-top-left rtl:hover:after:origin-top-right',
           'hover:after:scale-100 hover:text-piccolo focus:outline-none',
+          'ltr:[&:local-link]:after:origin-top-left rtl:[&:local-link]:after:origin-top-right',
+          '[&:local-link]:after:scale-x-100 [&:local-link]:text-piccolo',
           isDisabled && 'opacity-30 hover:after:scale-0 cursor-not-allowed',
-          'ltr:[&:local-link]:after:origin-top-left rtl:[&:local-link]:after:origin-top-right [&:local-link]:after:scale-x-100 [&:local-link]:text-piccolo',
           selected &&
             'ltr:after:origin-top-left rtl:after:origin-top-right after:scale-x-100 text-piccolo',
           className
@@ -144,9 +125,9 @@ const Pill = React.forwardRef(
 //         className={mergeClassnames(
 //           getTabSize(size),
 //           'flex items-center justify-center w-full whitespace-nowrap text-moon-14 text-bulma',
-//           'font-medium rounded-moon-i-sm transition-colors cursor-pointer hover:bg-gohan',
+//           'font-medium rounded-moon-i-sm transition-colors cursor-pointer hover:bg-goku',
 //           'focus:outline-none',
-//           selected && 'bg-gohan',
+//           selected && 'bg-goku',
 //           isDisabled && 'opacity-30 hover:bg-transparent cursor-not-allowed'
 //         )}
 //         ref={ref}
@@ -159,25 +140,17 @@ const Pill = React.forwardRef(
 //   }
 // );
 
-type PanelsProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Panels = ({ children }: PanelsProps) => (
-  <div className=" relative">{children}</div>
+const Panels = ({ children, className }: Props) => (
+  <div className={mergeClassnames('relative', className)}>{children}</div>
 );
 
-type PanelProps = {
-  id: string;
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Panel = ({ children, id }: PanelProps) => (
+const Panel = ({ children, id, className }: PanelProps) => (
   <div
     id={id}
-    className=" absolute w-full p-5  [&:not(:target)]:hidden target:block"
+    className={mergeClassnames(
+      'absolute w-full p-5 [&:not(:target)]:hidden target:block',
+      className
+    )}
   >
     {children}
   </div>

workspaces/base/src/tabs/private/types/PanelProps.ts

@@ -1,6 +1,7 @@
-type PanelProps = {
-  className?: string;
-  children?: React.ReactNode;
+import type Props from './Props';
+
+type PanelProps = Props & {
+  id: string;
 };
 
 export default PanelProps;

workspaces/base/src/tabs/private/types/Props.ts

@@ -0,0 +1,6 @@
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export default Props;

workspaces/base/src/tabs/private/types/TabComponentProps.ts

@@ -0,0 +1,7 @@
+import type TabPolymorphicProps from './TabPolymorphicProps';
+
+type TabComponentProps = <C extends React.ElementType = 'a'>(
+  props: TabPolymorphicProps<C>
+) => React.ReactElement | null;
+
+export default TabComponentProps;

workspaces/base/src/tabs/private/types/TabPolymorphicProps.ts

@@ -0,0 +1,6 @@
+import type TabProps from './TabProps';
+
+type TabPolymorphicProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<C, TabProps>;
+
+export default TabPolymorphicProps;

workspaces/base/src/tabs/private/types/TabProps.ts

@@ -1,10 +1,10 @@
-import { ElementType } from 'react';
+import type Props from './Props';
+import type Size from './Size';
 
-type TabProps = {
-  disabled?: boolean;
-  as?: ElementType<any>;
-  className?: string | (({ selected }: { selected: boolean }) => string);
-  children?: React.ReactNode;
+type TabProps = Props & {
+  isDisabled?: boolean;
+  selected?: boolean;
+  size?: Size;
 };
 
 export default TabProps;