Component Updates

packages/admin-ui/src/Accordion/Accordion.stories.tsx

@@ -99,6 +99,22 @@ export const WithIcon: Story = {
     }
 };
 
+export const WithColorMark: Story = {
+    ...Default,
+    args: {
+        children: (
+            <>
+                <AccordionItem
+                    colorMark={"#ff6584"}
+                    index={1}
+                    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                    icon={<Accordion.Item.Icon icon={<WarningIcon />} label={"Warning icon"} />}
+                />
+            </>
+        )
+    }
+};
+
 export const WithActionsIcon: Story = {
     ...Default,
     args: {

packages/admin-ui/src/Accordion/Accordion.tsx

@@ -24,6 +24,7 @@ const accordionVariants = cva("wby-group wby-w-full", {
 type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> &
     VariantProps<typeof accordionVariants> & {
         children: React.ReactNode;
+        colorMark?: string;
     };
 
 const AccordionBase = ({ children, variant, background, className, ...props }: AccordionProps) => {

packages/admin-ui/src/Accordion/components/AccordionItem.tsx

@@ -9,6 +9,7 @@ import { AccordionRoot, type AccordionRootProps } from "~/Accordion/components/A
 interface AccordionItemProps extends Omit<AccordionRootProps, "title"> {
     title: React.ReactNode;
     description?: React.ReactNode;
+    colorMark?: string;
     icon?: React.ReactNode;
     handle?: React.ReactNode;
     interactive?: boolean;

packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx

@@ -9,13 +9,21 @@ import { AccordionItemDragHandle } from "~/Accordion/components/AccordionItemDra
 
 type AccordionTriggerProps = Pick<
     AccordionItemProps,
-    "title" | "description" | "icon" | "handle" | "interactive" | "actions" | "draggable"
+    | "title"
+    | "description"
+    | "colorMark"
+    | "icon"
+    | "handle"
+    | "interactive"
+    | "actions"
+    | "draggable"
 >;
 
 const AccordionTrigger = ({
     title,
     description,
     actions,
+    colorMark,
     icon,
     interactive = true,
     draggable
@@ -53,6 +61,12 @@ const AccordionTrigger = ({
                 )}
             >
                 {draggable ? <AccordionItemDragHandle /> : null}
+                {colorMark && (
+                    <div
+                        style={{ backgroundColor: colorMark }}
+                        className={"wby-block wby-w-[4px] wby-h-[48px] wby-rounded-sm wby-ml-sm"}
+                    />
+                )}
                 <div
                     className={
                         "wby-w-full wby-flex wby-justify-between wby-items-center wby-px-md wby-py-sm-extra"