docs: MDS-860 Avatar component docs

docs/app/client/authcode/page.tsx

@@ -1,9 +1,11 @@
 import React from "react";
-import dynamic from "next/dynamic";
-import { Loader } from "@heathmont/moon-base-tw";
 import { getExamples } from "@/utils/getExamples";
 import { ExampleSectionData } from "@/components/exampleSection/ExampleSection";
 import { MainLayout } from "@/components/MainLayout";
+
+import dynamic from "next/dynamic";
+
+import { Loader } from "@heathmont/moon-base-tw";
 import { PageHeadComponent } from "@/components/PageHeadComponent";
 import { PropsTable } from "@/components/propsTable";
 

docs/app/client/avatar/description.md

@@ -0,0 +1 @@
+The Avatar component is typically used to display images, icons, or initials representing people or other entities.

docs/app/client/avatar/descriptions/ActiveStatus.md

@@ -0,0 +1,5 @@
+---
+title: Active Status for your Avatar
+---
+
+You can use the component `<Avatar.Status />` as a child of the component `<Avatar />` to display the status of your user, or the availability of a specific resource.

docs/app/client/avatar/descriptions/Customization.md

@@ -0,0 +1,5 @@
+---
+title: Customization
+---
+
+The `<Avatar />` component supports any CSS classes, enabling it to be fully customizable in all of its aspects.

docs/app/client/avatar/descriptions/Default.md

@@ -0,0 +1,5 @@
+---
+title: Default
+---
+
+The component can be used by default to display icons out-of-the-box. Just pass them as direct children of the `<Avatar />` component.

docs/app/client/avatar/descriptions/Sizes.md

@@ -0,0 +1,5 @@
+---
+title: Different sizes
+---
+
+The component `<Avatar />` supports various sizes using the `size` prop, allowing seamless integration with your custom layout.

docs/app/client/avatar/descriptions/StatusOrigin.md

@@ -0,0 +1,5 @@
+---
+title: Reposition the Status within the Avatar
+---
+
+`<Avatar.Status />` supports flexible positioning. Specify the desired visibility location by using `position` prop.

docs/app/client/avatar/descriptions/Variants.md

@@ -0,0 +1,5 @@
+---
+title: Different content type support
+---
+
+The `<Avatar />` component is versatile and can be used in various different scenarios. It supports an icon, text(e.g., the user fullname's initials), or an image by providing the URL through the `imageUrl` prop.

docs/app/client/avatar/examples/ActiveStatus.tsx

@@ -0,0 +1,26 @@
+import { Avatar } from "@heathmont/moon-core-tw";
+import { GenericUser } from "@heathmont/moon-icons-tw";
+
+import image from "../avatar_example.jpeg";
+
+const sharedProps = {
+  className: "border-beerus border",
+};
+
+const ActiveStatus = () => (
+  <>
+    <Avatar {...sharedProps}>
+      <GenericUser className="text-moon-24" />
+      <Avatar.Status />
+    </Avatar>
+    <Avatar {...sharedProps}>
+      md
+      <Avatar.Status className="bg-trunks" />
+    </Avatar>
+    <Avatar imageUrl={image.src}>
+      <Avatar.Status />
+    </Avatar>
+  </>
+);
+
+export default ActiveStatus;

docs/app/client/avatar/examples/Customization.tsx

@@ -0,0 +1,26 @@
+import { Avatar } from "@heathmont/moon-core-tw";
+import { GenericUser } from "@heathmont/moon-icons-tw";
+
+const Customization = () => (
+  <>
+    <Avatar className="text-chichi border border-beerus">
+      <GenericUser className="text-moon-24" />
+    </Avatar>
+    <Avatar className="bg-piccolo text-goten">
+      <GenericUser className="text-moon-24" />
+    </Avatar>
+    <Avatar className="rounded-full border border-beerus">
+      <GenericUser className="text-moon-24" />
+    </Avatar>
+    <Avatar className="border border-beerus">
+      <GenericUser className="text-moon-24" />
+      <Avatar.Status className="bg-chichi" />
+    </Avatar>
+    <Avatar className="border border-beerus">
+      <GenericUser className="text-moon-24" />
+      <Avatar.Status className="border-chichi" />
+    </Avatar>
+  </>
+);
+
+export default Customization;

docs/app/client/avatar/examples/Default.tsx

@@ -0,0 +1,10 @@
+import { Avatar } from "@heathmont/moon-core-tw";
+import { GenericUser } from "@heathmont/moon-icons-tw";
+
+const AvatarDefault = () => (
+  <Avatar className="border border-beerus">
+    <GenericUser className="text-moon-24" />
+  </Avatar>
+);
+
+export default AvatarDefault;

docs/app/client/avatar/examples/Sizes.tsx

@@ -0,0 +1,60 @@
+import { Avatar } from "@heathmont/moon-core-tw";
+import { GenericUser } from "@heathmont/moon-icons-tw";
+import image from "../avatar_example.jpeg";
+
+const sharedProps = {
+  className: "border border-beerus",
+};
+
+const Example = () => (
+  <>
+    <div className="flex flex-wrap items-center justify-around gap-2 w-full">
+      <Avatar {...sharedProps} size="xs">
+        <GenericUser className="text-moon-16" />
+      </Avatar>
+      <Avatar {...sharedProps} size="sm">
+        <GenericUser className="text-moon-24" />
+      </Avatar>
+      <Avatar {...sharedProps}>
+        <GenericUser className="text-moon-24" />
+      </Avatar>
+      <Avatar {...sharedProps} size="lg">
+        <GenericUser className="text-moon-24" />
+      </Avatar>
+      <Avatar {...sharedProps} size="xl">
+        <GenericUser className="text-moon-24" />
+      </Avatar>
+      <Avatar {...sharedProps} size="2xl">
+        <GenericUser className="text-moon-32" />
+      </Avatar>
+    </div>
+    <div className="flex flex-wrap items-center justify-around gap-2 w-full">
+      <Avatar {...sharedProps} size="xs">
+        xs
+      </Avatar>
+      <Avatar {...sharedProps} size="sm">
+        sm
+      </Avatar>
+      <Avatar {...sharedProps}>md</Avatar>
+      <Avatar {...sharedProps} size="lg">
+        lg
+      </Avatar>
+      <Avatar {...sharedProps} size="xl">
+        xl
+      </Avatar>
+      <Avatar {...sharedProps} size="2xl">
+        2xl
+      </Avatar>
+    </div>
+    <div className="flex flex-wrap items-center justify-around gap-2 w-full">
+      <Avatar imageUrl={image.src} size="xs" />
+      <Avatar imageUrl={image.src} size="sm" />
+      <Avatar imageUrl={image.src} />
+      <Avatar imageUrl={image.src} size="lg" />
+      <Avatar imageUrl={image.src} size="xl" />
+      <Avatar imageUrl={image.src} size="2xl" />
+    </div>
+  </>
+);
+
+export default Example;

docs/app/client/avatar/examples/StatusOrigin.tsx

@@ -0,0 +1,25 @@
+import { Avatar } from "@heathmont/moon-core-tw";
+import { GenericUser } from "@heathmont/moon-icons-tw";
+
+const StatusOrigin = () => (
+  <>
+    <Avatar className="border border-beerus">
+      <GenericUser className="text-moon-24" />
+      <Avatar.Status position={{ vertical: "top", horizontal: "right" }} />
+    </Avatar>
+    <Avatar className="border border-beerus">
+      <GenericUser className="text-moon-24" />
+      <Avatar.Status position={{ vertical: "top", horizontal: "left" }} />
+    </Avatar>
+    <Avatar className="border border-beerus">
+      <GenericUser className="text-moon-24" />
+      <Avatar.Status />
+    </Avatar>
+    <Avatar className="border border-beerus">
+      <GenericUser className="text-moon-24" />
+      <Avatar.Status position={{ vertical: "bottom", horizontal: "left" }} />
+    </Avatar>
+  </>
+);
+
+export default StatusOrigin;

docs/app/client/avatar/examples/Variants.tsx

@@ -0,0 +1,15 @@
+import { Avatar } from "@heathmont/moon-core-tw";
+import { GenericUser } from "@heathmont/moon-icons-tw";
+import image from "../avatar_example.jpeg";
+
+const Variants = () => (
+  <>
+    <Avatar className="border-beerus border">
+      <GenericUser className="text-moon-24" />
+    </Avatar>
+    <Avatar className="border-beerus border">md</Avatar>
+    <Avatar imageUrl={image.src} />
+  </>
+);
+
+export default Variants;

docs/app/client/avatar/page.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { getExamples } from "@/utils/getExamples";
+import { ExampleSectionData } from "@/components/exampleSection/ExampleSection";
+import { MainLayout } from "@/components/MainLayout";
+
+import dynamic from "next/dynamic";
+
+import { Loader } from "@heathmont/moon-base-tw";
+import { PageHeadComponent } from "@/components/PageHeadComponent";
+import { avatarProps, avatarStatusProps } from "./props";
+import image from "./avatar.webp";
+import { PropsTable } from "@/components/propsTable";
+
+const TITLE = "Avatar";
+const ordered: string[] = [
+  "Default",
+  "Variants",
+  "Sizes",
+  "ActiveStatus",
+  "StatusOrigin",
+  "Customization",
+];
+
+export default async function AuthCodePage(request: {
+  searchParams: { raw: string };
+}) {
+  const {
+    client: {
+      avatar: { description, descriptions: exampleDescriptions, examples },
+    },
+  } = await getExamples();
+
+  const searchParam = request?.searchParams?.raw;
+  const isMockup = !!searchParam && Object.keys(examples).includes(searchParam);
+
+  if (isMockup) {
+    const Component = dynamic(
+      () => import(`@/app/client/avatar/examples/${searchParam}`),
+      {
+        loading: () => <Loader />,
+        ssr: false,
+      },
+    );
+    return (
+      <div className="p-4" id="playwright-test">
+        <Component />
+      </div>
+    );
+  }
+
+  return (
+    <MainLayout
+      isMockup={isMockup}
+      componentName="avatar"
+      contentSidebar={ordered}
+    >
+      <div className="flex flex-col gap-4 text-moon-14 pb-20">
+        <PageHeadComponent
+          title={TITLE}
+          description={description}
+          tags={["ARIA", "RTL"]}
+          image={image}
+        />
+
+        <ExampleSectionData
+          componentName="avatar"
+          client={{
+            description,
+            descriptions: exampleDescriptions,
+            examples,
+          }}
+          data={ordered}
+        />
+        <PropsTable
+          title="Avatar props"
+          description={
+            <p>
+              These are props specific to the{" "}
+              <span className="text-frieza">Avatar</span> component:
+            </p>
+          }
+          data={avatarProps}
+        />
+        <PropsTable
+          title="Avatar.Status props"
+          description={
+            <p>
+              These are props specific to the{" "}
+              <span className="text-frieza">Avatar.Status</span> component:
+            </p>
+          }
+          data={avatarStatusProps}
+        />
+      </div>
+    </MainLayout>
+  );
+}

docs/app/client/avatar/props.ts

@@ -0,0 +1,32 @@
+import { PropsTableProp } from "@/types";
+
+export const avatarProps: PropsTableProp[] = [
+  {
+    name: "className",
+    description: "Tailwind classes for customization",
+    type: ["string"],
+  },
+  {
+    name: "imageUrl",
+    description: "Path to the image",
+    type: ["string"],
+  },
+  {
+    name: "size",
+    description: "Size of avatar",
+    type: ["xs", "sm", "md", "lg", "xl", "2xl"],
+    defaultState: "md",
+  },
+];
+export const avatarStatusProps: PropsTableProp[] = [
+  {
+    name: "className",
+    description: "Tailwind classes for customization",
+    type: ["string"],
+  },
+  {
+    name: "position",
+    description: "Position for status indicator",
+    type: ["{ vertical: 'top' | 'bottom', horizontal: 'left' | 'right' }"],
+  },
+];

docs/app/types.ts

@@ -42,6 +42,25 @@ export type Examples = {
         "WithManualSubmit": "string"
       }
     },
+    "avatar": {
+      "description": "string",
+      "descriptions": {
+        "ActiveStatus": "string",
+        "Customization": "string",
+        "Default": "string",
+        "Sizes": "string",
+        "StatusOrigin": "string",
+        "Variants": "string"
+      },
+      "examples": {
+        "ActiveStatus": "string",
+        "Customization": "string",
+        "Default": "string",
+        "Sizes": "string",
+        "StatusOrigin": "string",
+        "Variants": "string"
+      }
+    },
     "breadcrumb": {
       "description": "string",
       "descriptions": {

docs/components/MDX.tsx

@@ -17,6 +17,11 @@ const defaultComponents: ComponentProps<any> = {
       {props.children}
     </ul>
   ),
+  code: (props: HTMLProps<HTMLSpanElement>) => (
+    <code {...props} className="text-chichi bg-gohan">
+      {props.children}
+    </code>
+  ),
 };
 
 export function MDX({