@helsenorge/designsystem-react 1.0.0-beta105 → 1.0.0-beta109

package/components/ExpanderList/ExpanderList.d.ts

@@ -1,46 +1,48 @@
-import React from 'react';
-import { PaletteNames } from '../../theme/palette';
-export declare type ExpanderListColors = PaletteNames;
-export declare type ExpanderType = React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>>;
-export interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {
-    Expander: ExpanderType;
-}
-interface ExpanderListProps {
-    /** Toggles accordion functionality for the expanders. */
-    accordion?: boolean;
-    /** Toggles the bottom border of the last child element. */
-    bottomBorder?: boolean;
-    /** Items in the ExpanderList */
-    children: React.ReactNode;
-    /** Toggles padding of child elements */
-    childPadding?: boolean;
-    /** Adds custom classes to the element. */
-    className?: string;
-    /** Changes the link list background color on hover. */
-    color?: ExpanderListColors;
-    /** Changes the font size. */
-    large?: boolean;
-    /** Opens the first item in the list. */
-    isOpen?: boolean;
-    /** Toggles the top border of the first child element. */
-    topBorder?: boolean;
-    /** Sets the data-testid attribute. */
-    testId?: string;
-}
-declare type Modify<T, R> = Omit<T, keyof R> & R;
-declare type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
-    id?: string;
-    title: JSX.Element | string;
-    children: React.ReactNode;
-    className?: string;
-    color?: ExpanderListColors;
-    icon?: React.ReactElement;
-    padding?: boolean;
-    isExpanded?: boolean;
-    large?: boolean;
-    testId?: string;
-    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-}>;
-export declare const ExpanderList: ExpanderListCompound;
-export default ExpanderList;
+import React from 'react';
+import { PaletteNames } from '../../theme/palette';
+export declare type ExpanderListColors = PaletteNames;
+export declare type ExpanderType = React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>>;
+export interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {
+    Expander: ExpanderType;
+}
+interface ExpanderListProps {
+    /** Toggles accordion functionality for the expanders. */
+    accordion?: boolean;
+    /** Toggles the bottom border of the last child element. */
+    bottomBorder?: boolean;
+    /** Items in the ExpanderList */
+    children: React.ReactNode;
+    /** Toggles padding of child elements */
+    childPadding?: boolean;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Changes the link list background color on hover. */
+    color?: ExpanderListColors;
+    /** Changes the font size. */
+    large?: boolean;
+    /** Opens the first item in the list. */
+    isOpen?: boolean;
+    /** Toggles the top border of the first child element. */
+    topBorder?: boolean;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare type Modify<T, R> = Omit<T, keyof R> & R;
+declare type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
+    id?: string;
+    title: JSX.Element | string;
+    children: React.ReactNode;
+    className?: string;
+    color?: ExpanderListColors;
+    icon?: React.ReactElement;
+    padding?: boolean;
+    expanded?: boolean;
+    large?: boolean;
+    testId?: string;
+    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Called when expander is open/closed. */
+    onExpand?: (isExpanded: boolean) => void;
+}>;
+export declare const ExpanderList: ExpanderListCompound;
+export default ExpanderList;
 //# sourceMappingURL=ExpanderList.d.ts.map

package/components/ExpanderList/ExpanderList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAanD,oBAAY,kBAAkB,GAAG,YAAY,CAAC;AAC9C,oBAAY,YAAY,GAAG,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAE/G,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtI,QAAQ,EAAE,YAAY,CAAC;CACxB;AAMD,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,aAAK,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAEzC,aAAK,aAAa,GAAG,MAAM,CACzB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC;IACE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAClF,CACF,CAAC;AAwDF,eAAO,MAAM,YAAY,sBAoEC,CAAC;AAK3B,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAcnD,oBAAY,kBAAkB,GAAG,YAAY,CAAC;AAC9C,oBAAY,YAAY,GAAG,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAE/G,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtI,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,aAAK,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAEzC,aAAK,aAAa,GAAG,MAAM,CACzB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC;IACE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjF,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACF,CAAC;AAyEF,eAAO,MAAM,YAAY,sBAoEC,CAAC;AAK3B,eAAe,YAAY,CAAC"}

package/components/ExpanderList/index.d.ts

@@ -1,4 +1,4 @@
-import ExpanderList from './ExpanderList';
-export * from './ExpanderList';
-export default ExpanderList;
+import ExpanderList from './ExpanderList';
+export * from './ExpanderList';
+export default ExpanderList;
 //# sourceMappingURL=index.d.ts.map

package/components/ExpanderList/index.js

@@ -1,2 +1,2 @@
-import{_ as e,b as n}from"../../_rollupPluginBabelHelpers-b8ef6dd9.js";import t,{useState as a,useEffect as i}from"react";import{I as r}from"../../Icon-89da8de4.js";import{A as o,I as d}from"../../constants-ad6c82db.js";import{C as s,a as l}from"../../ChevronUp-4b6797ef.js";import{u as c}from"../../useHover-9710204a.js";import{u as m,B as p}from"../../useBreakpoint-552af2b9.js";import{c as u}from"../../index-9b84fabc.js";import f from"./styles.module.scss";import"../../_tslib-51c8a283.js";import"../../grid-11a70eb7.js";var x=t.forwardRef((function(e,a){var i,x=e.id,v=e.children,g=e.padding,E=void 0===g||g,_=e.color,b=void 0===_?"neutral":_,h=e.className,k=void 0===h?"":h,j=e.icon,N=e.large,C=void 0!==N&&N,w=e.title,H=e.isExpanded,I=void 0!==H&&H,y=e.testId,B=e.handleExpanderClick,O=c(),R=O.hoverRef,S=O.isHovered,z=m(),L=u(f["expander-list-link"],f["expander-list-link--".concat(b)],(n(i={},f["expander-list-link--closed"],!I),n(i,f["expander-list-link--large"],C),i)),P=u(f["expander-list-link__main-content"],E?f["expander-list-link__main-content--padding"]:"");return t.createElement("li",{className:k,ref:a},t.createElement("button",{id:x,onClick:B,"data-testid":y,"data-analyticsid":o.Expander,className:L,ref:R},j&&t.createElement("span",{className:f["expander-list-link__icon"]},t.cloneElement(j,{size:z===p.xs?d.XSmall:d.Small,isHovered:S})),t.createElement("span",{className:f["expander-list-link__title"]},w),t.createElement("span",{className:f["expander-list-link__chevron"]},t.createElement(r,{size:d.XSmall,svgIcon:I?s:l,isHovered:S}))),I?t.createElement("div",{className:P},v):null)})),v=t.forwardRef((function(r,d){var s=r.children,l=r.childPadding,c=void 0===l||l,m=r.large,p=r.isOpen,v=void 0!==p&&p,g=r.color,E=r.className,_=void 0===E?"":E,b=r.accordion,h=void 0!==b&&b,k=r.topBorder,j=void 0===k||k,N=r.bottomBorder,C=void 0===N||N,w=r.testId,H=a({}),I=e(H,2),y=I[0],B=I[1],O=a(),R=e(O,2),S=R[0],z=R[1],L=t.Children.count(s),P=u(f["expander-list"],_);return i((function(){var e,n,t,a,i;!h||!S||(e=S.getBoundingClientRect(),n=e.top,t=e.left,a=e.bottom,i=e.right,n>=0&&t>=0&&a<=(window.innerHeight||document.documentElement.clientHeight)&&i<=(window.innerWidth||document.documentElement.clientWidth))||S.scrollIntoView()}),[h,S]),i((function(){if(v){var e="expander-0";B((function(t){return h?n({},e,!t[e]):Object.assign(Object.assign({},t),n({},e,!t[e]))}))}}),[v]),t.createElement("ul",{className:P,ref:d,"data-testid":w,"data-analyticsid":o.ExpanderList},t.Children.map(s,(function(e,a){if(e.type===x){var i=y["expander-".concat(a)],r=function(e){var t;return u(f["expander-list__item"],(n(t={},f["expander-list__item--top"],0===e&&j),n(t,f["expander-list__item--no-bottom"],e===L-1&&!C),t))}(a);return t.cloneElement(e,{id:"expander-".concat(a),key:"expander-".concat(a),isExpanded:i,padding:c,color:g,large:m,"aria-expanded":i,className:r,handleExpanderClick:function(e){return function(e,t){B((function(e){return h?n({},t,!e[t]):Object.assign(Object.assign({},e),n({},t,!e[t]))})),z(e.currentTarget)}(e,"expander-".concat(a))}})}return e})))}));v.Expander=x,x.displayName="ExpanderList.Expander";export default v;export{v as ExpanderList};
+import{_ as e,b as n}from"../../_rollupPluginBabelHelpers-6b3099b0.js";import t,{useState as a,useEffect as i}from"react";import{Icon as r}from"../Icons/Icon.js";import{A as o,I as d}from"../../constants-075356e2.js";import s from"../Icons/ChevronUp.js";import l from"../Icons/ChevronDown.js";import{u as c}from"../../useHover-507fb85a.js";import{u as m}from"../../usePrevious-ae293b10.js";import{u as p,B as u}from"../../useBreakpoint-3186b97e.js";import{c as f}from"../../index-9b84fabc.js";import x from"./styles.module.scss";import"../../_tslib-51c8a283.js";import"../../grid-c105cad1.js";var v=t.forwardRef((function(v,g){var E,_=v.id,b=v.children,h=v.padding,j=void 0===h||h,k=v.color,N=void 0===k?"neutral":k,I=v.className,w=void 0===I?"":I,C=v.icon,H=v.large,y=void 0!==H&&H,B=v.title,O=v.expanded,R=void 0!==O&&O,L=v.testId,P=v.handleExpanderClick,S=v.onExpand,z=a(R),W=e(z,2),X=W[0],A=W[1],D=m(X),T=c(),U=T.hoverRef,V=T.isHovered,q=p(),F=f(x["expander-list-link"],x["expander-list-link--".concat(N)],(n(E={},x["expander-list-link--closed"],!X),n(E,x["expander-list-link--large"],y),E)),G=f(x["expander-list-link__main-content"],X&&x["expander-list-link__main-content--expanded"],j?x["expander-list-link__main-content--padding"]:"");return i((function(){R!==X&&A(R)}),[R]),i((function(){S&&X!==!!D&&S(X)}),[X,S]),t.createElement("li",{className:w,ref:g},t.createElement("button",{id:_,onClick:P,"data-testid":L,"data-analyticsid":o.ExpanderListExpander,className:F,ref:U,"aria-expanded":X},C&&t.createElement("span",{className:x["expander-list-link__icon"]},t.cloneElement(C,{size:q===u.xs?d.XSmall:d.Small,isHovered:V})),t.createElement("span",{className:x["expander-list-link__title"]},B),t.createElement("span",{className:x["expander-list-link__chevron"]},t.createElement(r,{size:d.XSmall,svgIcon:X?s:l,isHovered:V}))),t.createElement("div",{className:G},b))})),g=t.forwardRef((function(r,d){var s=r.children,l=r.childPadding,c=void 0===l||l,m=r.large,p=r.isOpen,u=void 0!==p&&p,g=r.color,E=r.className,_=void 0===E?"":E,b=r.accordion,h=void 0!==b&&b,j=r.topBorder,k=void 0===j||j,N=r.bottomBorder,I=void 0===N||N,w=r.testId,C=a({}),H=e(C,2),y=H[0],B=H[1],O=a(),R=e(O,2),L=R[0],P=R[1],S=t.Children.count(s),z=f(x["expander-list"],_);return i((function(){var e,n,t,a,i;!h||!L||(e=L.getBoundingClientRect(),n=e.top,t=e.left,a=e.bottom,i=e.right,n>=0&&t>=0&&a<=(window.innerHeight||document.documentElement.clientHeight)&&i<=(window.innerWidth||document.documentElement.clientWidth))||L.scrollIntoView()}),[h,L]),i((function(){if(u){var e="expander-0";B((function(t){return h?n({},e,!t[e]):Object.assign(Object.assign({},t),n({},e,!t[e]))}))}}),[u]),t.createElement("ul",{className:z,ref:d,"data-testid":w,"data-analyticsid":o.ExpanderList},t.Children.map(s,(function(e,a){if(e.type===v){var i=y["expander-".concat(a)],r=function(e){var t;return f(x["expander-list__item"],(n(t={},x["expander-list__item--top"],0===e&&k),n(t,x["expander-list__item--no-bottom"],e===S-1&&!I),t))}(a);return t.cloneElement(e,{id:"expander-".concat(a),key:"expander-".concat(a),expanded:i,padding:c,color:g,large:m,"aria-expanded":i,className:r,handleExpanderClick:function(e){return function(e,t){B((function(e){return h?n({},t,!e[t]):Object.assign(Object.assign({},e),n({},t,!e[t]))})),P(e.currentTarget)}(e,"expander-".concat(a))}})}return e})))}));g.Expander=v,v.displayName="ExpanderList.Expander";export default g;export{g as ExpanderList};
 //# sourceMappingURL=index.js.map

package/components/ExpanderList/styles.module.scss

@@ -1,155 +1,160 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_font-settings.scss';
-@import '../../scss/_palette.scss';
-
-.expander-list {
-  list-style: none;
-  padding: 0;
-  width: inherit;
-  margin: 0;
-
-  &__item {
-    border: 0;
-    border-bottom: 1px solid $neutral500;
-
-    &--top {
-      border-top: 1px solid $neutral500;
-    }
-
-    &--no-bottom {
-      border-bottom: 0;
-    }
-  }
-}
-
-.expander-list-link {
-  padding: getSpacer(2xs) 0 getSpacer(2xs) 0;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    padding-left: getSpacer(2xs);
-    padding-right: getSpacer(2xs);
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
-  }
-  display: flex;
-  cursor: pointer;
-  font-weight: 600;
-  font-family: inherit;
-  text-decoration: none;
-  justify-content: space-between;
-  align-items: center;
-  letter-spacing: unset;
-  color: $black;
-  border: 0;
-  width: 100%;
-  outline: none;
-
-  &--banana {
-    background-color: $banana100;
-
-    &:hover,
-    &:focus {
-      background-color: $banana100;
-    }
-  }
-  &--blueberry {
-    background-color: $blueberry100;
-
-    &:hover,
-    &:focus {
-      background-color: $blueberry100;
-    }
-  }
-  &--cherry {
-    background-color: $cherry100;
-
-    &:hover,
-    &:focus {
-      background-color: $cherry100;
-    }
-  }
-  &--kiwi {
-    background-color: $kiwi100;
-
-    &:hover,
-    &:focus {
-      background-color: $kiwi100;
-    }
-  }
-  &--neutral {
-    background-color: $neutral100;
-
-    &:hover,
-    &:focus {
-      background-color: $neutral100;
-    }
-  }
-  &--plum {
-    background-color: $plum100;
-
-    &:hover,
-    &:focus {
-      background-color: $plum100;
-    }
-  }
-  &--white {
-    background-color: $neutral50;
-
-    &:hover,
-    &:focus {
-      background-color: $neutral50;
-    }
-  }
-
-  &--closed:not(:hover, :focus) {
-    background-color: transparent;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &--large {
-    font-size: $font-size-lg;
-    line-height: $lineheight-size-lg;
-  }
-
-  &__title {
-    color: $black;
-    display: flex;
-    align-items: center;
-    text-align: left;
-    border-bottom: 1px solid transparent;
-
-    :focus > & {
-      border-color: $black;
-    }
-  }
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    margin-right: getSpacer(2xs);
-  }
-
-  &__chevron {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    padding-left: getSpacer(2xs);
-  }
-
-  &__main-content {
-    padding: 0;
-
-    &--padding {
-      padding: getSpacer(m) 0 getSpacer(m) 0;
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        padding-left: getSpacer(2xs);
-        padding-right: getSpacer(2xs);
-      }
-    }
-  }
-}
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_font-settings.scss';
+@import '../../scss/_palette.scss';
+
+.expander-list {
+  list-style: none;
+  padding: 0;
+  width: inherit;
+  margin: 0;
+
+  &__item {
+    border: 0;
+    border-bottom: 1px solid $neutral500;
+
+    &--top {
+      border-top: 1px solid $neutral500;
+    }
+
+    &--no-bottom {
+      border-bottom: 0;
+    }
+  }
+}
+
+.expander-list-link {
+  padding: getSpacer(2xs) 0 getSpacer(2xs) 0;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    padding-left: getSpacer(2xs);
+    padding-right: getSpacer(2xs);
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
+  }
+  display: flex;
+  cursor: pointer;
+  font-weight: 600;
+  font-family: inherit;
+  text-decoration: none;
+  justify-content: space-between;
+  align-items: center;
+  letter-spacing: unset;
+  color: $black;
+  border: 0;
+  width: 100%;
+  outline: none;
+
+  &--banana {
+    background-color: $banana100;
+
+    &:hover,
+    &:focus {
+      background-color: $banana100;
+    }
+  }
+  &--blueberry {
+    background-color: $blueberry100;
+
+    &:hover,
+    &:focus {
+      background-color: $blueberry100;
+    }
+  }
+  &--cherry {
+    background-color: $cherry100;
+
+    &:hover,
+    &:focus {
+      background-color: $cherry100;
+    }
+  }
+  &--kiwi {
+    background-color: $kiwi100;
+
+    &:hover,
+    &:focus {
+      background-color: $kiwi100;
+    }
+  }
+  &--neutral {
+    background-color: $neutral100;
+
+    &:hover,
+    &:focus {
+      background-color: $neutral100;
+    }
+  }
+  &--plum {
+    background-color: $plum100;
+
+    &:hover,
+    &:focus {
+      background-color: $plum100;
+    }
+  }
+  &--white {
+    background-color: $neutral50;
+
+    &:hover,
+    &:focus {
+      background-color: $neutral50;
+    }
+  }
+
+  &--closed:not(:hover, :focus) {
+    background-color: transparent;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &--large {
+    font-size: $font-size-lg;
+    line-height: $lineheight-size-lg;
+  }
+
+  &__title {
+    color: $black;
+    display: flex;
+    align-items: center;
+    text-align: left;
+    border-bottom: 1px solid transparent;
+
+    :focus > & {
+      border-color: $black;
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    margin-right: getSpacer(2xs);
+  }
+
+  &__chevron {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    padding-left: getSpacer(2xs);
+  }
+
+  &__main-content {
+    padding: 0;
+    display: none;
+
+    &--expanded {
+      display: block;
+    }
+
+    &--padding {
+      padding: getSpacer(m) 0 getSpacer(m) 0;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        padding-left: getSpacer(2xs);
+        padding-right: getSpacer(2xs);
+      }
+    }
+  }
+}

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

@@ -1,27 +1,28 @@
-export type Styles = {
-  'expander-list': string;
-  'expander-list__item': string;
-  'expander-list__item--no-bottom': string;
-  'expander-list__item--top': string;
-  'expander-list-link': string;
-  'expander-list-link__chevron': string;
-  'expander-list-link__icon': string;
-  'expander-list-link__main-content': string;
-  'expander-list-link__main-content--padding': string;
-  'expander-list-link__title': string;
-  'expander-list-link--banana': string;
-  'expander-list-link--blueberry': string;
-  'expander-list-link--cherry': string;
-  'expander-list-link--closed': string;
-  'expander-list-link--kiwi': string;
-  'expander-list-link--large': string;
-  'expander-list-link--neutral': string;
-  'expander-list-link--plum': string;
-  'expander-list-link--white': string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  'expander-list': string;
+  'expander-list__item': string;
+  'expander-list__item--no-bottom': string;
+  'expander-list__item--top': string;
+  'expander-list-link': string;
+  'expander-list-link__chevron': string;
+  'expander-list-link__icon': string;
+  'expander-list-link__main-content': string;
+  'expander-list-link__main-content--expanded': string;
+  'expander-list-link__main-content--padding': string;
+  'expander-list-link__title': string;
+  'expander-list-link--banana': string;
+  'expander-list-link--blueberry': string;
+  'expander-list-link--cherry': string;
+  'expander-list-link--closed': string;
+  'expander-list-link--kiwi': string;
+  'expander-list-link--large': string;
+  'expander-list-link--neutral': string;
+  'expander-list-link--plum': string;
+  'expander-list-link--white': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/FormExample/FormExample.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-import { FormVariant } from '../../constants';
-interface FormExampleProps {
-    exampleType: FormExampleVariants;
-    variant?: keyof typeof FormVariant;
-}
-export declare enum FormExampleVariants {
-    formgroup = "formgroup",
-    checkbox = "checkbox",
-    radiobutton = "radiobutton",
-    textarea = "textarea",
-    input = "input"
-}
-export declare const FormExample: (props: FormExampleProps) => JSX.Element;
-export default FormExample;
+/// <reference types="react" />
+import { FormVariant } from '../../constants';
+interface FormExampleProps {
+    exampleType: FormExampleVariants;
+    variant?: keyof typeof FormVariant;
+}
+export declare enum FormExampleVariants {
+    formgroup = "formgroup",
+    checkbox = "checkbox",
+    radiobutton = "radiobutton",
+    textarea = "textarea",
+    input = "input"
+}
+export declare const FormExample: (props: FormExampleProps) => JSX.Element;
+export default FormExample;
 //# sourceMappingURL=FormExample.d.ts.map

package/components/FormExample/index.d.ts

@@ -1,4 +1,4 @@
-import FormExample from './FormExample';
-export * from './FormExample';
-export default FormExample;
+import FormExample from './FormExample';
+export * from './FormExample';
+export default FormExample;
 //# sourceMappingURL=index.d.ts.map