Indent prop added to accordion (#2027)

navikt · Jun 5, 2023 · c028f36 · c028f36
1 parent 988fb36
commit c028f36
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/.changeset/small-clouds-wash.md b/.changeset/small-clouds-wash.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-css": patch
+"@navikt/ds-react": patch
+---
+
+add indent prop to accordion
diff --git a/@navikt/core/css/accordion.css b/@navikt/core/css/accordion.css
@@ -141,11 +141,16 @@
 /*************************
  * Content *
  *************************/
+
 .navds-accordion__content {
-  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+  padding: 0 var(--a-spacing-3) var(--a-spacing-5);
   animation: fadeAccordionContent 250ms ease;
 }
 
+.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
+  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+}
+
 .navds-accordion__content--closed {
   display: none;
 }

diff --git a/@navikt/core/react/src/accordion/Accordion.tsx b/@navikt/core/react/src/accordion/Accordion.tsx
@@ -27,6 +27,11 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
+  /**
+   * Whether to indent content or not
+   * @default true
+   */
+  indent?: boolean;
   /**
    * Instances of Accordion.Item
    */
@@ -40,6 +45,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
       variant = "default",
       headingSize = "small",
       size = "medium",
+      indent = true,
       ...rest
     },
     ref
@@ -57,7 +63,8 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
           className={cl(
             "navds-accordion",
             className,
-            `navds-accordion--${size}`
+            `navds-accordion--${size}`,
+            { "navds-accordion--indent": indent }
           )}
           ref={ref}
         />

diff --git a/@navikt/core/react/src/accordion/accordion.stories.tsx b/@navikt/core/react/src/accordion/accordion.stories.tsx
@@ -114,11 +114,12 @@ export const Default = {
   },
 
   args: {
-    controlled: "false",
+    controlled: false,
     nItems: 2,
     variant: "default",
     headingSize: "medium",
     size: "medium",
+    indent: true,
   },
 };
 
@@ -137,7 +138,7 @@ export const DefaultOpen = {
 
   args: {
     openItems: [1, 2],
-    controlled: "false",
+    controlled: false,
     nItems: 5,
     variant: "neutral",
     headingSize: "large",
@@ -251,6 +252,7 @@ export const WithTable = {
   args: {
     variant: "default",
     headingSize: "large",
+    indent: false,
   },
 };