@helsenorge/designsystem-react 3.1.5 → 4.1.0

package/components/Checkbox/styles.module.scss

@@ -3,6 +3,9 @@
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
 @import '../../scss/font-settings';
+@import '../../scss/screen-reader';
+
+$checkbox-icon-size: 1.625rem;
 
 .checkbox-errors {
   font-size: $font-size-sm;
@@ -45,47 +48,145 @@
   display: flex;
   align-items: flex-start;
   cursor: pointer;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
 
   &__text {
-    display: flex;
-  }
+    color: $black;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-  }
+    &--on-dark {
+      color: $white;
+    }
 
-  &--on-dark {
-    color: $white;
-  }
+    &__big-form {
+      &--checked {
+        color: $white;
+      }
+      &--checked#{&}--invalid {
+        color: $black;
+      }
+      &--checked#{&}--disabled {
+        color: $neutral700;
+      }
+    }
 
-  &--invalid {
-    color: $black;
+    &--disabled {
+      color: $neutral700;
+    }
   }
 
   &--disabled {
     cursor: default;
-    color: $neutral400;
   }
 
-  &--bigform {
-    padding: getSpacer(s);
-    background-color: $neutral50;
+  &__big-form {
+    &--focus {
+      box-shadow: 0 0 0 getSpacer(3xs);
+    }
+
+    &--on-white {
+      background-color: $neutral50;
+
+      :hover > & {
+        background-color: $neutral100;
+      }
+    }
+    &--on-white#{&}--focus {
+      color: $neutral500;
+    }
+
+    &--on-grey {
+      background-color: $white;
+
+      :hover > & {
+        background-color: $neutral100;
+      }
+    }
+
+    &--on-grey#{&}--focus {
+      color: $neutral500;
+      background-color: $white;
+    }
+
+    &--on-blueberry {
+      background-color: $white;
+
+      :hover > & {
+        background-color: $blueberry100;
+      }
+    }
+    &--on-blueberry#{&}--focus {
+      color: $blueberry500;
+      background-color: $white;
+    }
+
+    &--on-invalid {
+      background-color: $white;
+
+      :hover > & {
+        background-color: $cherry100;
+      }
+    }
+    &--on-invalid#{&}--focus {
+      color: $cherry400;
+      background-color: $white;
+    }
+
+    &--disabled {
+      background-color: $neutral50;
+
+      :hover > & {
+        background-color: $neutral50;
+      }
+    }
+
+    &--checked {
+      background-color: $blueberry500;
+
+      :hover > & {
+        background-color: $blueberry600;
+      }
+    }
+    &--checked#{&}--focus {
+      color: $blueberry900;
+      background-color: $blueberry500;
+    }
+
+    &--checked#{&}--on-invalid {
+      background-color: $cherry100;
+
+      :hover > & {
+        background-color: $cherry200;
+      }
+    }
+
+    &--checked#{&}--on-invalid#{&}--focus {
+      color: $cherry400;
+    }
+
+    &--checked#{&}--disabled {
+      background-color: $neutral50;
+
+      :hover > & {
+        background-color: $neutral50;
+      }
+    }
+
+    &--disabled#{&}--white {
+      background-color: $white;
+
+      :hover > & {
+        background-color: $white;
+      }
+    }
   }
 
-  &--bigform#{&}--on-blueberry {
-    background-color: $blueberry50;
+  &--bigform {
+    padding: getSpacer(s);
   }
 
   &--bigform#{&}--on-dark {
     background-color: $blueberry800;
   }
 
-  &--bigform#{&}--invalid {
-    background-color: $white;
-  }
-
   @media (min-width: map.get($grid-breakpoints, md)) {
     &--bigform {
       padding: 1.68rem getSpacer(l);
@@ -94,37 +195,29 @@
 }
 
 .checkbox {
-  width: 0;
-  margin: 0;
-  appearance: none;
+  @include sr-only;
 
   &__icon-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: getSpacer(4xs) getSpacer(s) getSpacer(4xs) getSpacer(4xs);
-    height: 1.625rem;
-    width: 1.625rem;
-    min-height: 1.625rem;
-    min-width: 1.625rem;
-    color: $neutral700;
+    height: $checkbox-icon-size;
+    width: $checkbox-icon-size;
+    min-height: $checkbox-icon-size;
+    min-width: $checkbox-icon-size;
     box-shadow: 0 0 0 getSpacer(4xs);
 
     :hover > & {
       box-shadow: 0 0 0 getSpacer(3xs);
-      background-color: $neutral100;
     }
 
-    :active > & {
-      box-shadow: 0 0 0 getSpacer(3xs);
-      color: $black;
-    }
-
-    &--checked {
-      color: $blueberry500;
+    &--on-white,
+    &--on-grey {
+      color: $neutral700;
 
       :hover > & {
-        background-color: $blueberry50;
+        background-color: $neutral100;
       }
     }
 
@@ -136,52 +229,94 @@
       }
     }
 
+    &--on-invalid {
+      color: $cherry500;
+
+      :hover > & {
+        background-color: $cherry100;
+      }
+    }
+
     &--on-dark {
       color: $neutral200;
 
       :hover > & {
-        background-color: $inverted-hover;
+        background-color: #ffffff1a;
       }
+    }
 
-      &.checkbox__icon-wrapper--checked {
-        color: $blueberry200;
-      }
+    &--disabled {
+      color: $neutral600;
+      background-color: $neutral50;
 
-      :active > & {
-        color: $white;
+      :hover > & {
+        box-shadow: 0 0 0 getSpacer(4xs);
+        background-color: $neutral50;
       }
     }
 
-    &--invalid {
-      color: $cherry600;
+    &__regular {
+      &--checked {
+        background-color: $blueberry500;
+        color: $blueberry500;
+        box-shadow: 0 0 0 getSpacer(4xs);
 
-      :hover > & {
-        background-color: $cherry100;
+        :hover > & {
+          background-color: $blueberry600;
+          color: $blueberry600;
+          box-shadow: 0 0 0 getSpacer(4xs);
+        }
       }
+      &--checked#{&}--invalid {
+        background-color: $cherry500;
+        color: $cherry500;
+        box-shadow: 0 0 0 getSpacer(4xs);
 
-      &.checkbox__icon-wrapper--checked {
-        color: $cherry600;
+        :hover > & {
+          background-color: $cherry600;
+          color: $cherry600;
+          box-shadow: 0 0 0 getSpacer(4xs);
+        }
       }
+      &--checked#{&}--on-dark {
+        background-color: $blueberry50;
+        color: $blueberry50;
+        box-shadow: 0 0 0 getSpacer(4xs);
 
-      :active > & {
-        color: $black;
+        :hover > & {
+          background-color: $blueberry200;
+          color: $blueberry200;
+          box-shadow: 0 0 0 getSpacer(4xs);
+        }
       }
     }
 
-    &--disabled {
-      color: $neutral400;
+    &__big-form {
+      &--checked {
+        background-color: $blueberry50;
+        box-shadow: none;
 
-      &.checkbox__icon-wrapper--checked {
-        color: $neutral400;
+        :hover > & {
+          background-color: $blueberry200;
+          box-shadow: none;
+        }
       }
+      &--checked#{&}--invalid {
+        background-color: $cherry500;
 
-      :hover > & {
-        box-shadow: 0 0 0 getSpacer(4xs);
-        background-color: transparent;
+        :hover > & {
+          background-color: $cherry600;
+        }
       }
+      &--checked#{&}--disabled {
+        color: $neutral600;
+        background-color: $neutral50;
+        box-shadow: 0 0 0 getSpacer(4xs);
 
-      :active > & {
-        color: $neutral400;
+        :hover > & {
+          background-color: $neutral50;
+          box-shadow: 0 0 0 getSpacer(4xs);
+        }
       }
     }
   }
@@ -193,6 +328,7 @@
   }
 
   &:focus {
+    /* stylelint-disable-next-line */
     & + .checkbox__icon-wrapper {
       box-shadow: 0 0 0 getSpacer(3xs);
       color: $black;
@@ -204,6 +340,33 @@
       &--invalid {
         color: $black;
       }
+
+      &__big-form {
+        &--checked {
+          background-color: $blueberry200;
+          box-shadow: 0 0 0 getSpacer(3xs);
+          color: $white;
+
+          // komboklasser fungerer ikke i nested struktur
+          &--invalid {
+            background-color: $cherry500;
+            color: $black;
+          }
+
+          &--disabled {
+            color: $neutral700;
+            background-color: $neutral50;
+          }
+        }
+      }
     }
   }
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.checkbox-sublabel-wrapper {
+  padding-left: 2.8rem;
 }

package/components/Checkbox/styles.module.scss.d.ts

@@ -2,19 +2,41 @@ export type Styles = {
   checkbox: string;
   checkbox__icon: string;
   'checkbox__icon-wrapper': string;
-  'checkbox__icon-wrapper--checked': string;
+  'checkbox__icon-wrapper__big-form--checked': string;
+  'checkbox__icon-wrapper__big-form--checked--disabled': string;
+  'checkbox__icon-wrapper__big-form--checked--invalid': string;
+  'checkbox__icon-wrapper__big-form--disabled': string;
+  'checkbox__icon-wrapper__big-form--invalid': string;
+  'checkbox__icon-wrapper__regular--checked': string;
+  'checkbox__icon-wrapper__regular--invalid': string;
+  'checkbox__icon-wrapper__regular--on-dark': string;
   'checkbox__icon-wrapper--disabled': string;
   'checkbox__icon-wrapper--invalid': string;
   'checkbox__icon-wrapper--on-blueberry': string;
   'checkbox__icon-wrapper--on-dark': string;
+  'checkbox__icon-wrapper--on-grey': string;
+  'checkbox__icon-wrapper--on-invalid': string;
+  'checkbox__icon-wrapper--on-white': string;
   'checkbox-errors': string;
   'checkbox-label': string;
+  'checkbox-label__big-form--checked': string;
+  'checkbox-label__big-form--disabled': string;
+  'checkbox-label__big-form--focus': string;
+  'checkbox-label__big-form--on-blueberry': string;
+  'checkbox-label__big-form--on-grey': string;
+  'checkbox-label__big-form--on-invalid': string;
+  'checkbox-label__big-form--on-white': string;
+  'checkbox-label__big-form--white': string;
   'checkbox-label__text': string;
+  'checkbox-label__text__big-form--checked': string;
+  'checkbox-label__text__big-form--disabled': string;
+  'checkbox-label__text__big-form--invalid': string;
+  'checkbox-label__text--disabled': string;
+  'checkbox-label__text--on-dark': string;
   'checkbox-label--bigform': string;
   'checkbox-label--disabled': string;
-  'checkbox-label--invalid': string;
-  'checkbox-label--on-blueberry': string;
   'checkbox-label--on-dark': string;
+  'checkbox-sublabel-wrapper': string;
   'checkbox-wrapper': string;
   'checkbox-wrapper--bigform': string;
   'checkbox-wrapper--with-error': string;

package/components/Dropdown/componentdata.json

@@ -1 +1 @@
-{"props":{"label":{"defaultValue":null,"description":"Label for dropdown. Synlig for skjermlesere.","name":"label","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":true,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"Tekst på knappen som åpner dropdownen","name":"placeholder","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":true,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the dropdown content","name":"children","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"closeText":{"defaultValue":null,"description":"Close button text","name":"closeText","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"string"}},"noCloseButton":{"defaultValue":null,"description":"No close button","name":"noCloseButton","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"onToggle":{"defaultValue":null,"description":"Called when dropdown is open/closed.","name":"onToggle","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"((isOpen: boolean) => void)"}},"open":{"defaultValue":null,"description":"Om dropdown er åpen","name":"open","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the dropdown","name":"mode","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"oncherry\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"oncherry\""}]}},"transparent":{"defaultValue":null,"description":"Makes the background transparent","name":"transparent","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"fluid":{"defaultValue":null,"description":"Makes the background transparent","name":"fluid","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"Makes the dropdown disabled","name":"disabled","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the dropdown button.","name":"testId","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"label":{"defaultValue":null,"description":"Label for dropdown. Synlig for skjermlesere.","name":"label","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":true,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"Tekst på knappen som åpner dropdownen","name":"placeholder","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":true,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the dropdown content","name":"children","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"closeText":{"defaultValue":null,"description":"Close button text","name":"closeText","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"string"}},"noCloseButton":{"defaultValue":null,"description":"No close button","name":"noCloseButton","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"onToggle":{"defaultValue":null,"description":"Called when dropdown is open/closed.","name":"onToggle","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"((isOpen: boolean) => void)"}},"open":{"defaultValue":null,"description":"Om dropdown er åpen","name":"open","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the dropdown","name":"mode","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"oncherry\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"oncherry\""}]}},"transparent":{"defaultValue":null,"description":"Makes the background transparent","name":"transparent","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"fluid":{"defaultValue":null,"description":"Makes the background transparent","name":"fluid","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"Makes the dropdown disabled","name":"disabled","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the dropdown button.","name":"testId","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"string"}}}}

package/components/ErrorWrapper/componentdata.json

@@ -1 +1 @@
-{"props":{"errorText":{"defaultValue":null,"description":"Error message","name":"errorText","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Form component","name":"children","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"errorText":{"defaultValue":null,"description":"Error message","name":"errorText","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Form component","name":"children","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}}}}

package/components/Expander/componentdata.json

@@ -1 +1 @@
-{"props":{"title":{"defaultValue":null,"description":"Sets the trigger title","name":"title","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":true,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the expanded content","name":"children","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"size":{"defaultValue":null,"description":"Sets the size of the expander. Default: ExpanderSize.small","name":"size","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderSize","value":[{"value":"\"small\"","description":"","fullComment":"","tags":{}},{"value":"\"large\"","description":"","fullComment":"","tags":{}}]}},"color":{"defaultValue":null,"description":"Sets the background of the expander. Requires size=ExpanderSize.large.","name":"color","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderColors","value":[{"value":"\"banana\""},{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""},{"value":"\"white\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the expander trigger. Requires size=ExpanderSize.large.","name":"svgIcon","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"SvgIcon"}},"expanded":{"defaultValue":null,"description":"Opens or closes the expander","name":"expanded","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"noNestedLine":{"defaultValue":null,"description":"Removes border to the left of the content. Requires size=ExpanderSize.small.","name":"noNestedLine","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"sticky":{"defaultValue":null,"description":"Stick expander trigger to top of screen while scrolling down","name":"sticky","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"onExpand":{"defaultValue":null,"description":"Called when expander is open/closed.","name":"onExpand","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"((isExpanded: boolean) => void)"}},"renderChildrenWhenClosed":{"defaultValue":null,"description":"Whether to render children when closed (in which case they are hidden with CSS). Default: false","name":"renderChildrenWhenClosed","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the expander button.","name":"testId","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"title":{"defaultValue":null,"description":"Sets the trigger title","name":"title","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":true,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the expanded content","name":"children","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"size":{"defaultValue":null,"description":"Sets the size of the expander. Default: ExpanderSize.small","name":"size","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderSize","value":[{"value":"\"small\"","description":"","fullComment":"","tags":{}},{"value":"\"large\"","description":"","fullComment":"","tags":{}}]}},"color":{"defaultValue":null,"description":"Sets the background of the expander. Requires size=ExpanderSize.large.","name":"color","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderColors","value":[{"value":"\"banana\""},{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""},{"value":"\"white\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the expander trigger. Requires size=ExpanderSize.large.","name":"svgIcon","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"SvgIcon"}},"expanded":{"defaultValue":null,"description":"Opens or closes the expander","name":"expanded","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"noNestedLine":{"defaultValue":null,"description":"Removes border to the left of the content. Requires size=ExpanderSize.small.","name":"noNestedLine","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"sticky":{"defaultValue":null,"description":"Stick expander trigger to top of screen while scrolling down","name":"sticky","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"onExpand":{"defaultValue":null,"description":"Called when expander is open/closed.","name":"onExpand","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"((isExpanded: boolean) => void)"}},"renderChildrenWhenClosed":{"defaultValue":null,"description":"Whether to render children when closed (in which case they are hidden with CSS). Default: false","name":"renderChildrenWhenClosed","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the expander button.","name":"testId","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"string"}}}}

package/components/FormExample/FormExample.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormExample.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/FormExample.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAe9C,UAAU,gBAAgB;IACxB,WAAW,EAAE,mBAAmB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;CACpC;AAED,oBAAY,mBAAmB;IAC7B,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WA0QrD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormExample.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/FormExample.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAgB9C,UAAU,gBAAgB;IACxB,WAAW,EAAE,mBAAmB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;CACpC;AAED,oBAAY,mBAAmB;IAC7B,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WAmTrD,CAAC;AAEF,eAAe,WAAW,CAAC"}