SIKKA-5849[closed]

CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sikka/hawa
 
+## 0.21.2
+
+### Patch Changes
+
+- Added `chip` prop to `Accordion` item [#SIKKA-5849](https://app.clickup.com/t/613523/SIKKA-5849)
+
 ## 0.21.1
 
 ### Patch Changes

components/elements/Accordion.tsx

@@ -2,12 +2,15 @@ import * as React from "react";
 
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 
+import { Chip, ChipTypes } from "@elements/index";
+
 import { cn } from "../util";
 
 export type AccordionItemProps = {
  trigger: string;
  content: string;
  disabled?: boolean;
+ chip?: ChipTypes;
 };
 
 type AccordionProps = {
@@ -62,7 +65,14 @@ const Accordion = React.forwardRef<
  triggerclassNames
  )}
  >
- {item.trigger}
+ <span
+ className={cn(
+ "hawa-flex hawa-flex-row",
+ item.chip && "hawa-gap-2"
+ )}
+ >
+ {item.trigger} {item.chip && <Chip {...item.chip} />}
+ </span>
  </AccordionTrigger>
  <AccordionContent
  aria-disabled={item.disabled || false}

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sikka/hawa",
- "version": "0.21.1",
+ "version": "0.21.2",
  "description": "Modern UI Kit made with Tailwind",
  "author": {
  "name": "Sikka Software",

stories/ElementsStories/Accordion.stories.tsx

@@ -1,13 +1,14 @@
+import { ArgsTable, Story, Title } from "@storybook/blocks";
 import type { Meta, StoryObj } from "@storybook/react";
+
 import {
  Accordion,
  AccordionRoot,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
- AccordionItemProps,
+ AccordionItemProps
 } from "../../components/elements";
-import { ArgsTable, Story, Title } from "@storybook/blocks";
 import { setLocale, t } from "../translations/i18n";
 
 const meta = {
@@ -20,10 +21,10 @@ const meta = {
  <h1>{"<Accordion/>"}</h1>
  <ArgsTable />
  </>
- ),
- },
+ )
+ }
  },
- tags: ["autodocs"],
+ tags: ["autodocs"]
 } satisfies Meta<typeof Accordion>;
 
 export default meta;
@@ -33,12 +34,18 @@ const accordionData: AccordionItemProps[] = [
  {
  trigger: "Another Question",
  content: "Here's another answer.",
- disabled: true,
+ disabled: true
+ },
+ {
+ trigger: "Another Question",
+ content: "Here's another answer.",
+ chip: {
+ label: "soon"
+ }
  },
  { trigger: "Another Question", content: "Here's another answer." },
  { trigger: "Another Question", content: "Here's another answer." },
- { trigger: "Another Question", content: "Here's another answer." },
- { trigger: "Another Question", content: "Here's another answer." },
+ { trigger: "Another Question", content: "Here's another answer." }
 ];
 const Template = (args: any, globals: any) => {
  const locale = globals.globals?.locale === "ar" ? "ar" : "en";
@@ -52,7 +59,7 @@ const Template = (args: any, globals: any) => {
  );
 };
 export const Default: Story = {
- render: Template.bind({}),
+ render: Template.bind({})
 };
 export const SeparatedVariant: Story = {
  render: (args: any, globals: any) => {
@@ -70,7 +77,7 @@ export const SeparatedVariant: Story = {
  />
  </div>
  );
- },
+ }
 };
 export const CustomMade: Story = {
  render: (args: any, globals: any) => {
@@ -90,5 +97,5 @@ export const CustomMade: Story = {
  </AccordionItem>
  </AccordionRoot>
  );
- },
+ }
 };