docs: MDS-866 Chip Component Docs

docs/app/client/chip/description.md

@@ -0,0 +1,10 @@
+Chip component is typically used to filter or trigger actions in clickable format.
+<br />
+For example, in a UI, you might use a `<Chip />` component for:
+§
+
+- Represent a selected filter category among a list
+- Tag associated with an item
+
+<br/>
+The characteristics of a `<Chip />` component are its small size, simplicity and ability to perform actions on a click

docs/app/client/chip/descriptions/Active.md

@@ -0,0 +1,5 @@
+---
+title: Active state
+---
+
+Utilize the `isActive` prop to activate the state, set it as active by default, or maintain it in an always-active state.

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

@@ -0,0 +1,5 @@
+---
+title: Customization
+---
+
+You can use the `className` prop to assign any CSS classes to the `<Chip />` component.

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

@@ -0,0 +1,3 @@
+---
+title: Default
+---

docs/app/client/chip/descriptions/Disabled.md

@@ -0,0 +1,5 @@
+---
+title: Disabled status
+---
+
+By passing any truthy value to the prop `disabled`, the component will prevent the click from the user.

docs/app/client/chip/descriptions/Icons.md

@@ -0,0 +1,5 @@
+---
+title: Displaying icons
+---
+
+Using the props `iconRight`, `iconLeft`, `iconOnly` is possible to pass icons to the `<Chip />` component.

docs/app/client/chip/descriptions/IsStroke.md

@@ -0,0 +1,5 @@
+---
+title: Show stroke on hover
+---
+
+Setting the `isStroke` prop to any truthy value will display the stroke on hover/active.

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

@@ -0,0 +1,7 @@
+---
+title: Different sizes
+---
+
+It supports two different sizes: small and medium. By default, if not specified by the prop `size`, it renders as medium.
+<br />
+The possible values is `sm` (small) or `md` (medium).

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

@@ -0,0 +1,5 @@
+---
+title: Variants
+---
+
+If the background of the element should not be visible, you can use the `"ghost"` variant by passing it through the `variant` prop to hide the default background.

docs/app/client/chip/descriptions/WithOnClick.md

@@ -0,0 +1,5 @@
+---
+title: Adding onClick function
+---
+
+Using the props `onClick` you can execute a custom function whenever the `<Chip />` component is clicked by the user,

docs/app/client/chip/examples/Active.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Chip } from "@heathmont/moon-core-tw";
+import { useCallback, useState } from "react";
+
+const sports = ["basket", "football", "cricket"];
+
+const IsActive = () => {
+  const [isActive, setIsActive] = useState<string[]>([]);
+  const onClick = useCallback(
+    (item: string) => {
+      if (isActive.includes(item)) {
+        setIsActive((prev: string[]) =>
+          prev.filter((sport: string) => sport !== item),
+        );
+      } else {
+        setIsActive([...isActive, item]);
+      }
+    },
+    [setIsActive, isActive],
+  );
+
+  return (
+    <div className="flex items-center gap-2 mt-2">
+      <p className="text-moon-14">Hobbies (Poker is mandatory):</p>
+      <Chip className="border border-beerus" isActive>
+        Poker
+      </Chip>
+      {sports.map((item: string) => (
+        <Chip
+          className="border border-beerus"
+          onClick={() => onClick(item)}
+          isActive={isActive.includes(item)}
+          isStroke
+        >
+          {item}
+        </Chip>
+      ))}
+    </div>
+  );
+};
+
+export default IsActive;

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { Chip } from "@heathmont/moon-core-tw";
+import { useCallback, useState } from "react";
+
+const Customization = () => {
+  const [isActive, setIsActive] = useState(false);
+  const onClick = useCallback(() => {
+    setIsActive(!isActive);
+  }, [setIsActive, isActive]);
+
+  return (
+    <>
+      <Chip
+        onClick={onClick}
+        isActive={isActive}
+        isStroke
+        className={
+          isActive
+            ? "outline-none text-bulma hover:text-chichi shadow shadow-bulma hover:shadow-bulma"
+            : "border border-beerus text-chichi hover:bg-chichi-10 hover:shadow-none"
+        }
+      >
+        Custom Chip
+      </Chip>
+    </>
+  );
+};
+
+export default Customization;

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

@@ -0,0 +1,5 @@
+import { Chip } from "@heathmont/moon-core-tw";
+
+const Default = () => <Chip className="border border-beerus">Default</Chip>;
+
+export default Default;

docs/app/client/chip/examples/Disabled.tsx

@@ -0,0 +1,14 @@
+import { Chip } from "@heathmont/moon-core-tw";
+
+const Disabled = () => (
+  <>
+    <Chip variant="ghost" disabled>
+      Ghost variant
+    </Chip>
+    <Chip className="border border-beerus" disabled>
+      Default variant
+    </Chip>
+  </>
+);
+
+export default Disabled;

docs/app/client/chip/examples/Icons.tsx

@@ -0,0 +1,68 @@
+import { Chip } from "@heathmont/moon-core-tw";
+import { OtherFrame } from "@heathmont/moon-icons-tw";
+
+const sharedProps = {
+  className: "border border-beerus",
+};
+
+const Icons = () => (
+  <>
+    <div className="flex flex-wrap items-center justify-start gap-2 w-full">
+      <p>Small:</p>
+      <Chip
+        {...sharedProps}
+        size="sm"
+        iconLeft={<OtherFrame className="text-moon-24" />}
+      >
+        Left Icon
+      </Chip>
+      <Chip
+        {...sharedProps}
+        size="sm"
+        iconRight={<OtherFrame className="text-moon-24" />}
+      >
+        Right Icon
+      </Chip>
+      <Chip
+        {...sharedProps}
+        size="sm"
+        iconRight={<OtherFrame className="text-moon-24" />}
+        iconLeft={<OtherFrame className="text-moon-24" />}
+      >
+        Left/Right Icons
+      </Chip>
+      <Chip
+        {...sharedProps}
+        size="sm"
+        iconOnly={<OtherFrame className="text-moon-24" />}
+        aria-label="Single icon"
+      />
+    </div>
+    <div className="flex flex-wrap items-center justify-start gap-2 w-full">
+      <p>Medium:</p>
+      <Chip {...sharedProps} iconLeft={<OtherFrame className="text-moon-24" />}>
+        Left Icon
+      </Chip>
+      <Chip
+        {...sharedProps}
+        iconRight={<OtherFrame className="text-moon-24" />}
+      >
+        Right Icon
+      </Chip>
+      <Chip
+        {...sharedProps}
+        iconRight={<OtherFrame className="text-moon-24" />}
+        iconLeft={<OtherFrame className="text-moon-24" />}
+      >
+        Left/Right Icons
+      </Chip>
+      <Chip
+        {...sharedProps}
+        iconOnly={<OtherFrame className="text-moon-24" />}
+        aria-label="Single icon"
+      />
+    </div>
+  </>
+);
+
+export default Icons;

docs/app/client/chip/examples/IsStroke.tsx

@@ -0,0 +1,26 @@
+import { Chip } from "@heathmont/moon-core-tw";
+import { OtherFrame } from "@heathmont/moon-icons-tw";
+
+const StrokeOnHover = () => (
+  <>
+    <Chip className="border border-beerus" isStroke>
+      Hover me
+    </Chip>
+    <Chip
+      iconRight={<OtherFrame className="text-moon-24" />}
+      isStroke
+      className="border border-beerus"
+    >
+      Right Icon
+    </Chip>
+    <Chip
+      className="border border-beerus"
+      iconLeft={<OtherFrame className="text-moon-24" />}
+      isStroke
+    >
+      Left Icon
+    </Chip>
+  </>
+);
+
+export default StrokeOnHover;

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

@@ -0,0 +1,12 @@
+import { Chip } from "@heathmont/moon-core-tw";
+
+const Sizes = () => (
+  <>
+    <Chip className="border border-beerus" size="sm">
+      Small
+    </Chip>
+    <Chip className="border border-beerus">Medium is Default</Chip>
+  </>
+);
+
+export default Sizes;

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

@@ -0,0 +1,10 @@
+import { Chip } from "@heathmont/moon-core-tw";
+
+const Variants = () => (
+  <>
+    <Chip variant="ghost">Ghost variant</Chip>
+    <Chip className="border border-beerus">Default variant</Chip>
+  </>
+);
+
+export default Variants;

docs/app/client/chip/examples/WithOnClick.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { Chip } from "@heathmont/moon-core-tw";
+
+const WithOnClick = () => {
+  return (
+    <Chip
+      className="border border-beerus"
+      onClick={() => alert("Chip clicked")}
+    >
+      Click me
+    </Chip>
+  );
+};
+
+export default WithOnClick;

docs/app/client/chip/page.tsx

@@ -0,0 +1,88 @@
+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 { PageHeadComponent } from "@/components/PageHeadComponent";
+import { PropsTable } from "@/components/propsTable";
+
+import props from "./props";
+import image from "./chip.webp";
+
+const ordered = [
+  "Default",
+  "Sizes",
+  "Variants",
+  "Active",
+  "Disabled",
+  "Icons",
+  "IsStroke",
+  "WithOnClick",
+  "Customization",
+];
+
+export default async function AuthCodePage(request: {
+  searchParams: { raw: string };
+}) {
+  const {
+    client: {
+      chip: { 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/chip/examples/${searchParam}`),
+      {
+        loading: () => <Loader />,
+        ssr: false,
+      },
+    );
+    return (
+      <div className="p-4" id="playwright-test">
+        <Component />
+      </div>
+    );
+  }
+
+  return (
+    <MainLayout
+      isMockup={isMockup}
+      componentName="chip"
+      contentSidebar={ordered}
+    >
+      <div className="flex flex-col gap-12 text-moon-14 pb-20">
+        <PageHeadComponent
+          title={"Chip"}
+          description={description}
+          tags={["ARIA", "RTL"]}
+          image={image}
+        />
+
+        <ExampleSectionData
+          componentName="chip"
+          client={{
+            description,
+            descriptions: exampleDescriptions,
+            examples,
+          }}
+          data={ordered}
+        />
+        <PropsTable
+          title="Chip props"
+          description={
+            <p>
+              These are props specific to the{" "}
+              <span className="text-frieza">Chip</span> component:
+            </p>
+          }
+          data={props}
+        />
+      </div>
+    </MainLayout>
+  );
+}