From ec57b73244eaf0bb4a825afcd9af7ca7377bc04e Mon Sep 17 00:00:00 2001
From: Steven Malaihollo <stevenjanm@gmail.com>
Date: Fri, 26 Apr 2024 17:03:14 +0200
Subject: [PATCH 1/3] Add `open` option to Accordion

---
 .../src/components/BccAccordion/BccAccordion.stories.ts   | 8 ++++++++
 .../src/components/BccAccordion/BccAccordion.vue          | 5 +++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/design-library/src/components/BccAccordion/BccAccordion.stories.ts b/design-library/src/components/BccAccordion/BccAccordion.stories.ts
index f982d576..5b523628 100644
--- a/design-library/src/components/BccAccordion/BccAccordion.stories.ts
+++ b/design-library/src/components/BccAccordion/BccAccordion.stories.ts
@@ -72,6 +72,14 @@ Example.parameters = {
   },
 };
 
+export const WithOpened = Template.bind({});
+WithOpened.args = {
+  title: "Example Accordion was expanded once the page was loaded",
+  variant: "desktop",
+  size: "base",
+  open: true,
+};
+
 const TempWithPin: StoryFn<typeof BccAccordion> = (args) => ({
   components: { BccAccordion },
   setup() {
diff --git a/design-library/src/components/BccAccordion/BccAccordion.vue b/design-library/src/components/BccAccordion/BccAccordion.vue
index 7b117a26..32d53c78 100644
--- a/design-library/src/components/BccAccordion/BccAccordion.vue
+++ b/design-library/src/components/BccAccordion/BccAccordion.vue
@@ -17,6 +17,7 @@ const sizes = {
 
 type Props = {
   title: string;
+  open?: boolean;
   subtitle?: string;
   variant?: keyof typeof variants;
   size?: keyof typeof sizes;
@@ -25,7 +26,7 @@ type Props = {
   pin?: InstanceType<typeof BccPin>["$props"];
 };
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   title: "",
   subtitle: "",
   variant: "readonly",
@@ -35,7 +36,7 @@ withDefaults(defineProps<Props>(), {
   pin: undefined,
 });
 
-const isOpen = ref(false);
+const isOpen = ref(props.open ?? false);
 </script>
 
 <template>

From 26778125890e4df90be3c149430c1fee1645b70d Mon Sep 17 00:00:00 2001
From: Steven Malaihollo <stevenjanm@gmail.com>
Date: Fri, 3 May 2024 17:07:47 +0200
Subject: [PATCH 2/3] Refactor variant usage

---
 .../components/BccAccordion/BccAccordion.css  | 198 +++++++++---------
 .../components/BccAccordion/BccAccordion.vue  |  28 +--
 2 files changed, 103 insertions(+), 123 deletions(-)

diff --git a/design-library/src/components/BccAccordion/BccAccordion.css b/design-library/src/components/BccAccordion/BccAccordion.css
index e376343b..3b0549b2 100644
--- a/design-library/src/components/BccAccordion/BccAccordion.css
+++ b/design-library/src/components/BccAccordion/BccAccordion.css
@@ -1,105 +1,97 @@
 @layer components {
-    .bcc-accordion {
-        @apply rounded-lg bg-secondary shadow-sm;
-    }
-
-    .bcc-accordion-header {
-        @apply flex w-full px-3 bg-white flex-row rounded-lg items-center justify-between cursor-pointer;
-    }
-
-    .bcc-accordion-title-wrap {
-        @apply flex flex-row items-center
-    }
-
-    .bcc-accordion:has(.bcc-accordion-interactive) {
-        @apply border border-on-primary bg-white;
-    }
-
-    .bcc-accordion:has(.bcc-accordion-desktop) {
-        @apply bg-white shadow-none;
-    }
-
-    .bcc-accordion:has(.bcc-accordion-lg) {
-        & .bcc-accordion-content {
-            @apply px-4;
-        }
-    }
-
-    .bcc-accordion:has(.bcc-accordion-readonly) {
-        & .bcc-accordion-content {
-            @apply pt-0 text-secondary text-body-sm;
-        }
-    }
-
-    .bcc-accordion:has(.bcc-accordion-brand) {
-        & .bcc-accordion-content {
-            @apply pt-3 px-4 text-secondary text-body-sm;
-        }
-    }
-
-    .bcc-accordion-header.bcc-accordion-readonly.bcc-accordion-active {
-        @apply bg-secondary pb-1;
-    }
-
-    .bcc-accordion-header.bcc-accordion-interactive.bcc-accordion-active {
-        @apply rounded-b-none border-b border-on-primary;
-    }
-
-    .bcc-accordion-desktop.bcc-accordion-active {
-        @apply bg-secondary;
-    }
-
-    .bcc-accordion-base {
-        @apply py-2 px-3;
-    }
-    .bcc-accordion-lg {
-        @apply px-4 py-4 text-lg;
-    }
-    .bcc-accordion-title {
-        @apply font-semibold text-primary flex flex-col items-start;
-    }
-    .bcc-accordion-subtitle {
-        @apply text-caption text-secondary;
-    }
-    .bcc-accordion-right {
-        @apply flex flex-row items-center justify-end h-6;
-    }
-    .bcc-accordion-icon {
-        @apply h-full text-interactive rotate-0 transform duration-300;
-
-        > svg{
-            @apply w-6 h-6;
-        }
-    }
-    .bcc-accordion-active .bcc-accordion-icon {
-        @apply rotate-180 transform;
-    }
-
-    .bcc-accordion-brand.bcc-accordion-active {
-        @apply bg-brand-600;
-        & .bcc-accordion-title {
-            @apply text-emphasis;
-        }
-        & .bcc-accordion-subtitle {
-            @apply text-neutral-200;
-        }
-        & .bcc-accordion-icon {
-            @apply text-neutral-200;
-        }
-    }
-    .bcc-accordion-right-icon {
-        @apply ml-4;
-    }
-
-    .bcc-accordion.bcc-accordion-interactive {
-        @apply border border-on-primary bg-white;
-    }
-
-    .bcc-accordion.bcc-desktop {
-        @apply bg-white;
-    }
-
-    .bcc-accordion-content {
-        @apply w-full px-3 py-4;
-    }
+  .bcc-accordion {
+    @apply rounded-lg bg-secondary shadow-sm;
+  }
+
+  .bcc-accordion-header {
+    @apply flex w-full cursor-pointer flex-row items-center justify-between rounded-lg bg-white px-3;
+  }
+
+  .bcc-accordion-title-wrap {
+    @apply flex flex-row items-center;
+  }
+
+  .bcc-accordion:has(.bcc-accordion-lg) {
+    & .bcc-accordion-content {
+      @apply px-4;
+    }
+  }
+
+  .bcc-accordion-base {
+    @apply px-3 py-2;
+  }
+  .bcc-accordion-lg {
+    @apply px-4 py-4 text-lg;
+  }
+  .bcc-accordion-title {
+    @apply flex flex-col items-start font-semibold text-primary;
+  }
+  .bcc-accordion-subtitle {
+    @apply text-caption text-secondary;
+  }
+  .bcc-accordion-right {
+    @apply flex h-6 flex-row items-center justify-end;
+  }
+  .bcc-accordion-icon {
+    @apply h-full rotate-0 transform text-interactive duration-300;
+
+    > svg {
+      @apply h-6 w-6;
+    }
+  }
+  .bcc-accordion-active .bcc-accordion-icon {
+    @apply rotate-180 transform;
+  }
+
+  .bcc-accordion-right-icon {
+    @apply ml-4;
+  }
+
+  .bcc-accordion-content {
+    @apply text-body-sm w-full px-3 py-4;
+  }
+
+  /* Filled Variant */
+  .bcc-accordion:has(.bcc-accordion-filled) {
+    @apply bg-secondary;
+    & .bcc-accordion-content {
+      @apply rounded-b-lg border border-on-primary;
+    }
+  }
+  .bcc-accordion-filled.bcc-accordion-header {
+    @apply border border-on-primary bg-secondary;
+  }
+  .bcc-accordion-filled.bcc-accordion-active.bcc-accordion-header {
+    @apply rounded-b-none;
+  }
+
+  /* Outlined Variant */
+  .bcc-accordion:has(.bcc-accordion-outlined) {
+    @apply border border-on-primary bg-white;
+  }
+  .bcc-accordion-header.bcc-accordion-outlined.bcc-accordion-active {
+    @apply rounded-b-none border-b border-on-primary;
+  }
+  .bcc-accordion.bcc-accordion-outlined {
+    @apply border border-on-primary bg-white;
+  }
+
+  /* Ghost Variant */
+  .bcc-accordion:has(.bcc-accordion-ghost) {
+    @apply shadow-none;
+    background-color: unset;
+  }
+  .bcc-accordion-ghost.bcc-accordion-header {
+    @apply hover:bg-secondary;
+  }
+
+  /* Soft Variant */
+  .bcc-accordion:has(.bcc-accordion-soft) {
+    & .bcc-accordion-content {
+      @apply text-body-sm pt-0 text-secondary;
+    }
+  }
+  .bcc-accordion-header.bcc-accordion-soft.bcc-accordion-header {
+    @apply bg-secondary;
+  }
 }
diff --git a/design-library/src/components/BccAccordion/BccAccordion.vue b/design-library/src/components/BccAccordion/BccAccordion.vue
index 32d53c78..65e3872d 100644
--- a/design-library/src/components/BccAccordion/BccAccordion.vue
+++ b/design-library/src/components/BccAccordion/BccAccordion.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { ExpandMoreIcon } from "@bcc-code/icons-vue";
-import { BccBadge, BccPin } from "@/index";
-import { type Component, ref } from "vue";
+import { ref } from "vue";
 
 const variants = {
-  readonly: "bcc-accordion-readonly",
-  brand: "bcc-accordion-brand",
-  interactive: "bcc-accordion-interactive",
-  desktop: "bcc-accordion-desktop",
+  filled: "bcc-accordion-filled",
+  outlined: "bcc-accordion-outlined",
+  soft: "bcc-accordion-soft",
+  ghost: "bcc-accordion-ghost",
 };
 
 const sizes = {
@@ -21,19 +20,13 @@ type Props = {
   subtitle?: string;
   variant?: keyof typeof variants;
   size?: keyof typeof sizes;
-  icon?: string | Component | Function;
-  badge?: InstanceType<typeof BccBadge>["$props"] & { text: string };
-  pin?: InstanceType<typeof BccPin>["$props"];
 };
 
 const props = withDefaults(defineProps<Props>(), {
   title: "",
   subtitle: "",
-  variant: "readonly",
+  variant: "filled",
   size: "base",
-  icon: "",
-  badge: undefined,
-  pin: undefined,
 });
 
 const isOpen = ref(props.open ?? false);
@@ -52,7 +45,7 @@ const isOpen = ref(props.open ?? false);
     >
       <div class="bcc-accordion-title-wrap">
         <div>
-          <slot name="left" />
+          <slot name="prepend" />
         </div>
         <div>
           <span class="bcc-accordion-title">
@@ -62,12 +55,7 @@ const isOpen = ref(props.open ?? false);
         </div>
       </div>
       <div class="bcc-accordion-right">
-        <slot name="action" />
-        <component class="bcc-accordion-right-icon bcc-accordion-icon" v-if="icon" :is="icon" />
-        <BccBadge class="bcc-accordion-right-icon" v-if="badge" v-bind="badge">{{
-          badge.text
-        }}</BccBadge>
-        <BccPin class="bcc-accordion-right-icon" v-show="pin" v-bind="pin" />
+        <slot name="append" />
         <div class="bcc-accordion-right-icon bcc-accordion-icon">
           <ExpandMoreIcon />
         </div>

From 12ddf5b88afbc0aefe6cf0d7815899bd7840265b Mon Sep 17 00:00:00 2001
From: Steven Malaihollo <stevenjanm@gmail.com>
Date: Mon, 6 May 2024 12:39:58 +0200
Subject: [PATCH 3/3] Accordion add slots and info text

---
 .../components/BccAccordion/BccAccordion.css  |   3 +
 .../BccAccordion/BccAccordion.spec.ts         |  10 +-
 .../BccAccordion/BccAccordion.stories.ts      | 213 ++++++------------
 .../components/BccAccordion/BccAccordion.vue  |   4 +
 4 files changed, 86 insertions(+), 144 deletions(-)

diff --git a/design-library/src/components/BccAccordion/BccAccordion.css b/design-library/src/components/BccAccordion/BccAccordion.css
index 3b0549b2..999be9dc 100644
--- a/design-library/src/components/BccAccordion/BccAccordion.css
+++ b/design-library/src/components/BccAccordion/BccAccordion.css
@@ -29,6 +29,9 @@
   .bcc-accordion-subtitle {
     @apply text-caption text-secondary;
   }
+  .bcc-accordion-info {
+    @apply text-caption text-tertiary;
+  }
   .bcc-accordion-right {
     @apply flex h-6 flex-row items-center justify-end;
   }
diff --git a/design-library/src/components/BccAccordion/BccAccordion.spec.ts b/design-library/src/components/BccAccordion/BccAccordion.spec.ts
index 69a23ce7..324a9b7c 100644
--- a/design-library/src/components/BccAccordion/BccAccordion.spec.ts
+++ b/design-library/src/components/BccAccordion/BccAccordion.spec.ts
@@ -17,17 +17,21 @@ describe("BccAccordion", () => {
       props: {
         title: "Props Title",
         subtitle: "Props Subtitle",
-        variant: "readonly",
+        info: "Props Info",
+        variant: "filled",
         size: "base",
       },
       slots: {
-        left: '<div class="test-slot-content">Slot Content</div>',
+        prepend: '<div class="test-slot-content-left">Slot Content</div>',
+        append: '<div class="test-slot-content-right">Slot Content</div>',
       },
     });
 
     expect(wrapper.find(".bcc-accordion-title").text()).toBe("Props Title");
     expect(wrapper.find(".bcc-accordion-subtitle").text()).toBe("Props Subtitle");
-    expect(wrapper.find(".test-slot-content").exists()).toBe(true);
+    expect(wrapper.find(".bcc-accordion-info").text()).toBe("Props Info");
+    expect(wrapper.find(".test-slot-content-left").exists()).toBe(true);
+    expect(wrapper.find(".test-slot-content-right").exists()).toBe(true);
   });
 
   it("toggles content visibility on header click", async () => {
diff --git a/design-library/src/components/BccAccordion/BccAccordion.stories.ts b/design-library/src/components/BccAccordion/BccAccordion.stories.ts
index 5b523628..a70f027f 100644
--- a/design-library/src/components/BccAccordion/BccAccordion.stories.ts
+++ b/design-library/src/components/BccAccordion/BccAccordion.stories.ts
@@ -1,4 +1,7 @@
 import BccAccordion from "./BccAccordion.vue";
+import BccCheckbox from "../BccCheckbox/BccCheckbox.vue";
+import BccPin from "../BccPin/BccPin.vue";
+import BccBadge from "../BccBadge/BccBadge.vue";
 import { GeneticsIcon, VisibilityIcon } from "@bcc-code/icons-vue";
 import { Meta, StoryFn } from "@storybook/vue3";
 import { ref } from "vue";
@@ -15,8 +18,12 @@ export default {
       control: { type: "text" },
       description: "The subtitle of the accordion",
     },
+    info: {
+      control: { type: "text" },
+      description: "The info on the right side of the accordion header",
+    },
     variant: {
-      options: ["readonly", "brand", "interactive", "desktop"],
+      options: ["filled", "outlined", "soft", "ghost"],
       control: { type: "radio" },
       description: "The visual variant of the accordion",
     },
@@ -25,17 +32,9 @@ export default {
       control: { type: "radio" },
       description: "The size of the accordion",
     },
-    icon: {
-      control: { type: "object" },
-      description: "The icon of the accordion",
-    },
-    badge: {
-      control: { type: "object" },
-      description: "The badge of the accordion",
-    },
-    pin: {
-      control: { type: "object" },
-      description: "The pin of the accordion",
+    open: {
+      description: "The option to initiate the accordion in an expanded state or not",
+      control: { type: "boolean" },
     },
   },
 } as Meta<typeof BccAccordion>;
@@ -53,122 +52,56 @@ const Template: StoryFn<typeof BccAccordion> = (args) => ({
 });
 export const Example = Template.bind({});
 Example.args = {
-  title: "Example Accordion with Pin",
+  title: "Example Accordion",
   subtitle: "This is a subtitle",
-  variant: "readonly",
+  variant: "filled",
   size: "base",
 };
 
-Example.parameters = {
-  docs: {
-    source: {
-      language: "html",
-      code: `
-    <BccAccordion title="Example Accordion with Pin" variant="readonly" size="base">
-      Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </BccAccordion>
-      `,
-    },
-  },
-};
-
 export const WithOpened = Template.bind({});
 WithOpened.args = {
   title: "Example Accordion was expanded once the page was loaded",
-  variant: "desktop",
+  variant: "outlined",
   size: "base",
   open: true,
 };
 
-const TempWithPin: StoryFn<typeof BccAccordion> = (args) => ({
-  components: { BccAccordion },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BccAccordion v-bind="args">
-      Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </BccAccordion>
-  `,
-});
-export const WithPin = TempWithPin.bind({});
-WithPin.args = {
-  title: "Example Accordion with Pin",
-  variant: "readonly",
-  size: "base",
-  pin: {
-    text: "310",
-    context: "warning",
-  },
-};
-
-const TempWithBadge: StoryFn<typeof BccAccordion> = (args) => ({
-  components: { BccAccordion },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BccAccordion v-bind="args">
-      Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </BccAccordion>
-  `,
-});
-export const WithBadge = TempWithBadge.bind({});
-WithBadge.args = {
-  title: "Example Accordion with Badge",
-  subtitle: "This is a subtitle",
-  variant: "readonly",
-  size: "base",
-  badge: {
-    text: "New",
-    context: "info",
-  },
-};
-
-const TempWithIcon: StoryFn<typeof BccAccordion> = (args) => ({
-  components: { BccAccordion, GeneticsIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BccAccordion v-bind="args">
-      Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </BccAccordion>
-  `,
-});
-export const WithIcon = TempWithIcon.bind({});
-WithIcon.args = {
-  title: "Example Accordion with Icon",
-  variant: "brand",
+export const WithInfoText = Template.bind({});
+WithInfoText.args = {
+  title: "Example Accordion look at the info to the right",
+  info: "I am the Info text on the right",
+  variant: "filled",
   size: "base",
-  icon: GeneticsIcon,
 };
 
 const TempWithLeft: StoryFn<typeof BccAccordion> = (args) => ({
-  components: { BccAccordion },
+  components: { BccAccordion, BccCheckbox },
   setup() {
     return { args };
   },
   template: `
     <BccAccordion v-bind="args">
-      <template #left>
-        <div class="pr-4">
-          <img src="https://via.placeholder.com/40" alt="Placeholder"  class="rounded-full" />
+      <template #prepend>
+        <div class="flex gap-x-3">
+          <BccCheckbox :modelValue="true" />
+          <div class="pr-4">
+            <img src="https://via.placeholder.com/40" alt="Placeholder" class="rounded-full" />
+          </div>
         </div>
-        </template>
+      </template>
       Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </BccAccordion>
   `,
 });
-export const WithLeft = TempWithLeft.bind({});
-WithLeft.args = {
-  title: "Example Accordion with Left",
-  variant: "interactive",
+export const WithLeftSlot = TempWithLeft.bind({});
+WithLeftSlot.args = {
+  title: "Example Accordion with slot to the left",
+  variant: "filled",
   size: "lg",
   left: true,
 };
 
-const TempWithAction: StoryFn<typeof BccAccordion> = (args) => ({
+const TempWithRight: StoryFn<typeof BccAccordion> = (args) => ({
   components: { BccAccordion, VisibilityIcon },
   setup() {
     const visible = ref(false);
@@ -178,32 +111,32 @@ const TempWithAction: StoryFn<typeof BccAccordion> = (args) => ({
   },
   template: `
     <BccAccordion v-bind="args" class="mb-20">
-      <template #action>
-      <div class="flex flex-row">
-      <div @mouseover="show()" @mouseleave="hide()">
-      <div v-if="visible" class="relative z-10">
-        <div class="absolute top-10 right-0">
-          <div class="bg-neutral-100 w-[250px] p-4 px-6 rounded-lg shadow-lg">
-            <img src="https://design.bcc.no/logos/bcc_logo_primary_dark-green_32.png" class="w-full">
+      <template #append>
+        <div class="flex flex-row">
+          <div @mouseover="show()" @mouseleave="hide()">
+            <div v-if="visible" class="relative z-10">
+              <div class="absolute top-10 right-0">
+                <div class="bg-neutral-100 w-[250px] p-4 px-6 rounded-lg shadow-lg">
+                  <img src="https://design.bcc.no/logos/bcc_logo_primary_dark-green_32.png" class="w-full">
+                </div>
+              </div>
+            </div>
+            <VisibilityIcon class="w-6 h-6" />
           </div>
         </div>
-      </div>
-      <VisibilityIcon class="w-6 h-6" />
-    </div>
-            </div>
       </template>
       Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </BccAccordion>
   `,
 });
-export const WithAction = TempWithAction.bind({});
-WithAction.args = {
-  title: "Example Accordion with Action",
-  variant: "readonly",
+export const WithSlotRight = TempWithRight.bind({});
+WithSlotRight.args = {
+  title: "Example Accordion with slot to the right",
+  variant: "filled",
 };
 
 const TempWithAll: StoryFn<typeof BccAccordion> = (args) => ({
-  components: { BccAccordion, VisibilityIcon, GeneticsIcon },
+  components: { BccAccordion, BccBadge, BccPin, BccCheckbox, VisibilityIcon, GeneticsIcon },
   setup() {
     const visible = ref(false);
     const show = () => (visible.value = true);
@@ -212,26 +145,32 @@ const TempWithAll: StoryFn<typeof BccAccordion> = (args) => ({
   },
   template: `
     <BccAccordion v-bind="args" class="mb-20">
-      <template #action>
-      <div class="flex flex-row">
-      <div @mouseover="show()" @mouseleave="hide()">
-      <div v-if="visible" class="relative z-10">
-        <div class="absolute top-10 right-0">
-          <div class="bg-neutral-100 w-[250px] p-4 px-6 rounded-lg shadow-lg">
-            <img src="https://design.bcc.no/logos/bcc_logo_primary_dark-green_32.png" class="w-full">
+      <template #prepend>
+        <div class="flex gap-x-3">
+          <BccCheckbox :modelValue="true" />
+          <div class="pr-4">
+            <img src="https://via.placeholder.com/40" alt="Placeholder" class="rounded-full" />
           </div>
         </div>
-      </div>
-      <VisibilityIcon class="w-6 h-6" />
-    </div>
-            </div>
       </template>
-      <template #left>
-        <div class="pr-4">
-          <img src="https://via.placeholder.com/40" alt="Placeholder"  class="rounded-full" />
-        </div>
-        </template>
       Here is some content inside the BccAccordion component. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <template #append>
+        <div class="flex flex-row gap-x-3 ml-3">
+          <div @mouseover="show()" @mouseleave="hide()">
+            <div v-if="visible" class="relative z-10">
+              <div class="absolute top-10 right-0">
+                <div class="bg-neutral-100 w-[250px] p-4 px-6 rounded-lg shadow-lg">
+                  <img src="https://design.bcc.no/logos/bcc_logo_primary_dark-green_32.png" class="w-full">
+                </div>
+              </div>
+            </div>
+            <VisibilityIcon class="w-6 h-6" />
+          </div>
+          <BccBadge context="info">310</BccBadge>
+          <BccPin text="310" context="warning" />
+          <GeneticsIcon class="w-6 h-6" />
+        </div>
+      </template>
     </BccAccordion>
   `,
 });
@@ -239,14 +178,6 @@ export const WithAll = TempWithAll.bind({});
 WithAll.args = {
   title: "Example Accordion with Action",
   subtitle: "This is a subtitle",
-  variant: "readonly",
-  badge: {
-    text: "New",
-    context: "info",
-  },
-  pin: {
-    text: "310",
-    context: "warning",
-  },
-  icon: GeneticsIcon,
+  info: "This is an info text",
+  variant: "ghost",
 };
diff --git a/design-library/src/components/BccAccordion/BccAccordion.vue b/design-library/src/components/BccAccordion/BccAccordion.vue
index 65e3872d..26c2f5c8 100644
--- a/design-library/src/components/BccAccordion/BccAccordion.vue
+++ b/design-library/src/components/BccAccordion/BccAccordion.vue
@@ -18,6 +18,7 @@ type Props = {
   title: string;
   open?: boolean;
   subtitle?: string;
+  info?: string;
   variant?: keyof typeof variants;
   size?: keyof typeof sizes;
 };
@@ -55,6 +56,9 @@ const isOpen = ref(props.open ?? false);
         </div>
       </div>
       <div class="bcc-accordion-right">
+        <span v-if="info" class="bcc-accordion-info">
+          {{ info }}
+        </span>
         <slot name="append" />
         <div class="bcc-accordion-right-icon bcc-accordion-icon">
           <ExpandMoreIcon />