@helsenorge/designsystem-react 1.0.0-experimental.0 → 1.0.0

package/components/LinkList/componentdata.json

@@ -0,0 +1,198 @@
+{
+  "props": {
+    "children": {
+      "defaultValue": null,
+      "description": "Items in the LinkList",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/LinkList/LinkList.tsx",
+        "name": "LinkListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/LinkList/LinkList.tsx",
+          "name": "LinkListProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/LinkList/LinkList.tsx",
+        "name": "LinkListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/LinkList/LinkList.tsx",
+          "name": "LinkListProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "color": {
+      "defaultValue": null,
+      "description": "Changes the link list background color on hover.",
+      "name": "color",
+      "parent": {
+        "fileName": "src/components/LinkList/LinkList.tsx",
+        "name": "LinkListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/LinkList/LinkList.tsx",
+          "name": "LinkListProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "enum",
+        "raw": "PaletteNames",
+        "value": [
+          {
+            "value": "\"banana\""
+          },
+          {
+            "value": "\"blueberry\""
+          },
+          {
+            "value": "\"cherry\""
+          },
+          {
+            "value": "\"kiwi\""
+          },
+          {
+            "value": "\"neutral\""
+          },
+          {
+            "value": "\"plum\""
+          },
+          {
+            "value": "\"black\""
+          },
+          {
+            "value": "\"white\""
+          }
+        ]
+      }
+    },
+    "chevron": {
+      "defaultValue": null,
+      "description": "Toggles chevron icon on or off.",
+      "name": "chevron",
+      "parent": {
+        "fileName": "src/components/LinkList/LinkList.tsx",
+        "name": "LinkListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/LinkList/LinkList.tsx",
+          "name": "LinkListProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "bottomBorder": {
+      "defaultValue": null,
+      "description": "Toggles the bottom border of the last child element.",
+      "name": "bottomBorder",
+      "parent": {
+        "fileName": "src/components/LinkList/LinkList.tsx",
+        "name": "LinkListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/LinkList/LinkList.tsx",
+          "name": "LinkListProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "topBorder": {
+      "defaultValue": null,
+      "description": "Toggles the top border of the first child element.",
+      "name": "topBorder",
+      "parent": {
+        "fileName": "src/components/LinkList/LinkList.tsx",
+        "name": "LinkListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/LinkList/LinkList.tsx",
+          "name": "LinkListProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "size": {
+      "defaultValue": null,
+      "description": "Changes size of the LinkList.",
+      "name": "size",
+      "parent": {
+        "fileName": "src/components/LinkList/LinkList.tsx",
+        "name": "LinkListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/LinkList/LinkList.tsx",
+          "name": "LinkListProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "LinkListSize | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"small\""
+          },
+          {
+            "value": "\"medium\""
+          },
+          {
+            "value": "\"large\""
+          }
+        ]
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/LinkList/LinkList.tsx",
+        "name": "LinkListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/LinkList/LinkList.tsx",
+          "name": "LinkListProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/LinkList/index.d.ts

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

package/components/LinkList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LinkList/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,eAAe,QAAQ,CAAC"}

package/components/LinkList/index.js

@@ -0,0 +1,2 @@
+import{d as e}from"../../_rollupPluginBabelHelpers-0f007973.js";import{_ as t}from"../../_tslib-b219470a.js";import r from"react";import{c as a}from"../../index-d1c0552c.js";import{I as i}from"../../Icon-d69d65b3.js";import{A as o,I as s}from"../../constants-dbdea596.js";import{C as n}from"../../ChevronRight-5ab9349b.js";import{u as l,B as m}from"../../useBreakpoint-a74f5af5.js";import{u as c}from"../../useHover-18479690.js";import d from"./styles.module.scss";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../grid-c105cad1.js";var u=r.forwardRef((function(u,f){var p,v=u.children,_=u.className,h=void 0===_?"":_,k=u.color,b=void 0===k?"neutral":k,j=u.icon,g=u.size,E=void 0===g?"medium":g,N=u.chevron,I=void 0!==N&&N,L=u.testId,y=u.target,z=u.htmlMarkup,B=void 0===z?"a":z,H=t(u,["children","className","color","icon","size","chevron","testId","target","htmlMarkup"]),R=c(),x=R.hoverRef,C=R.isHovered,S=l(),w="small"!==E&&!(!I&&!j),M=function(){return r.createElement(r.Fragment,null,w&&j&&r.createElement("span",{className:d["link-list__icon"]},r.cloneElement(j,{size:S===m.xs?s.XSmall:s.Small,isHovered:C})),r.createElement("span",{className:d["link-list__content"]},v),w&&I&&r.createElement("span",{className:d["link-list__chevron"]},r.createElement(i,{svgIcon:n,isHovered:C,size:s.XSmall})))},O=a(d["link-list__anchor"],d["link-list__anchor--"+b],(e(p={},d["link-list__anchor--small"],"small"===E),e(p,d["link-list__anchor--medium"],"medium"===E),e(p,d["link-list__anchor--large"],"large"===E),e(p,d["link-list__anchor--button"],"button"===B),p),h);return r.createElement("li",{ref:f,"data-testid":L,"data-analyticsid":o.Link},"a"===B&&r.createElement("a",Object.assign({className:O,ref:x,rel:"_blank"===y?"noopener noreferrer":void 0,target:y},H),M()),"button"===B&&r.createElement("button",Object.assign({className:O,ref:x,type:"button"},H),M()))})),f=r.forwardRef((function(t,i){var s,n=t.children,l=t.className,m=void 0===l?"":l,c=t.chevron,f=void 0!==c&&c,p=t.size,v=void 0===p?"medium":p,_=t.color,h=t.topBorder,k=void 0===h||h,b=t.bottomBorder,j=void 0===b||b,g=t.testId;return r.createElement("ul",{ref:i,className:a(d["link-list"],(s={},e(s,d["link-list--hastopborder"],k),e(s,d["link-list--nobottomborder"],!j),s),m),"data-testid":g,"data-analyticsid":o.LinkList},r.Children.map(n,(function(e){if(e.type===u)return r.cloneElement(e,{color:_,size:v,chevron:f})})))}));f.Link=u,u.displayName="LinkList.Link";export{f as LinkList,f as default};
+//# sourceMappingURL=index.js.map

package/components/LinkList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/LinkList/styles.module.scss

@@ -0,0 +1,153 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_font-settings.scss';
+@import '../../scss/_palette.scss';
+
+.link-list {
+  list-style: none;
+  padding: 0;
+  width: inherit;
+  margin: 0;
+
+  & > :nth-child(n) {
+    border-bottom: 1px solid $neutral500;
+  }
+  &--hastopborder {
+    & > :first-child {
+      border-top: 1px solid $neutral500;
+    }
+  }
+  &--nobottomborder {
+    & > :last-child {
+      border-bottom: 0;
+    }
+  }
+
+  &__anchor {
+    display: flex;
+    min-height: 4rem;
+    text-decoration: none;
+    align-items: center;
+    color: $black;
+    cursor: pointer;
+    &--button {
+      width: 100%;
+      background: none;
+      border: none;
+      text-align: left;
+      box-sizing: border-box;
+    }
+    &--small {
+      padding: getSpacer(2xs) 0 getSpacer(2xs) 0;
+      font-size: $font-size-xs;
+      line-height: $lineheight-size-xs;
+    }
+    &--medium {
+      padding: getSpacer(2xs) 0 getSpacer(2xs) 0;
+      font-size: $font-size-sm;
+      line-height: $lineheight-size-sm;
+    }
+    &--large {
+      padding: getSpacer(2xs) 0 getSpacer(2xs) 0;
+      font-size: $font-size-md;
+      line-height: $lineheight-size-md;
+    }
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      &--small {
+        padding-left: getSpacer(2xs);
+        padding-right: getSpacer(2xs);
+        font-size: $font-size-sm;
+        line-height: $lineheight-size-sm;
+      }
+      &--medium {
+        padding-left: getSpacer(2xs);
+        padding-right: getSpacer(2xs);
+        font-size: $font-size-md;
+        line-height: $lineheight-size-md;
+      }
+      &--large {
+        padding-left: getSpacer(2xs);
+        padding-right: getSpacer(2xs);
+        font-size: $font-size-lg;
+        line-height: $lineheight-size-lg;
+      }
+    }
+
+    &--banana {
+      &:hover,
+      &:focus {
+        background-color: $banana100;
+      }
+    }
+    &--blueberry {
+      &:hover,
+      &:focus {
+        background-color: $blueberry100;
+      }
+    }
+    &--cherry {
+      &:hover,
+      &:focus {
+        background-color: $cherry100;
+      }
+    }
+    &--kiwi {
+      &:hover,
+      &:focus {
+        background-color: $kiwi100;
+      }
+    }
+    &--neutral,
+    &--black {
+      &:hover,
+      &:focus {
+        background-color: $neutral100;
+      }
+    }
+    &--plum {
+      &:hover,
+      &:focus {
+        background-color: $plum100;
+      }
+    }
+    &--black {
+      &:hover,
+      &:focus {
+        background-color: $black;
+        color: $white;
+      }
+    }
+    &--white {
+      &:hover,
+      &:focus {
+        background-color: $neutral50;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    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);
+  }
+}

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

@@ -0,0 +1,27 @@
+export type Styles = {
+  'link-list': string;
+  'link-list__anchor': string;
+  'link-list__anchor--banana': string;
+  'link-list__anchor--black': string;
+  'link-list__anchor--blueberry': string;
+  'link-list__anchor--button': string;
+  'link-list__anchor--cherry': string;
+  'link-list__anchor--kiwi': string;
+  'link-list__anchor--large': string;
+  'link-list__anchor--medium': string;
+  'link-list__anchor--neutral': string;
+  'link-list__anchor--plum': string;
+  'link-list__anchor--small': string;
+  'link-list__anchor--white': string;
+  'link-list__chevron': string;
+  'link-list__content': string;
+  'link-list__icon': string;
+  'link-list--hastopborder': string;
+  'link-list--nobottomborder': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/List/List.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ListProps {
+    children: React.ReactNode[];
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare function List(props: ListProps): JSX.Element;
+export default List;
+//# sourceMappingURL=List.d.ts.map

package/components/List/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,SAAS;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,eAa7B;AAED,eAAe,IAAI,CAAC"}

package/components/List/componentdata.json

@@ -0,0 +1,42 @@
+{
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/List/List.tsx",
+        "name": "ListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/List/List.tsx",
+          "name": "ListProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/List/List.tsx",
+        "name": "ListProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/List/List.tsx",
+          "name": "ListProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/List/index.d.ts

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

package/components/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,eAAe,IAAI,CAAC"}

package/components/List/index.js

@@ -0,0 +1,2 @@
+import t from"react";import{c as e}from"../../index-d1c0552c.js";import s from"./styles.module.scss";import{A as a}from"../../constants-dbdea596.js";function r(r){var i=r.children,m=r.className,c=r.testId;return t.createElement("ul",{className:e(s.list,m),"data-testid":c,"data-analyticsid":a.List},i.map((function(e,a){return t.createElement("li",{className:s.list__item,key:a},e)})))}export{r as default};
+//# sourceMappingURL=index.js.map

package/components/List/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/List/styles.module.scss

@@ -0,0 +1,11 @@
+@import '../../scss/_palette.scss';
+
+.list {
+  width: 100%;
+  list-style: none;
+  padding: 0 1rem 0 0.5rem;
+
+  &__item {
+    border-bottom: 1px solid $neutral600;
+  }
+}

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

@@ -0,0 +1,10 @@
+export type Styles = {
+  list: string;
+  list__item: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Loader/Loader.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { PaletteNames } from '../../theme/palette';
+export declare type LoaderColors = PaletteNames;
+export declare type LoaderSizes = 'tiny' | 'small' | 'medium' | 'large';
+export declare enum Overlay {
+    screen = "screen",
+    parent = "parent"
+}
+export interface LoaderProps {
+    /** Sets the color of the loader */
+    color?: LoaderColors;
+    /**	Adds custom classes to the element. */
+    className?: string;
+    /** Changes the size of the loader. */
+    size?: LoaderSizes;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** id of the label */
+    labelId?: string;
+    /** Centers the loader in a container */
+    center?: boolean;
+    /** Inline the loader so it can be used in a span or paragraph */
+    inline?: boolean;
+    /** Loader is displayed with grey background covering the entire screen */
+    overlay?: keyof typeof Overlay;
+    /**  Individual id for loading icon (aria-labelledby).  */
+    ariaLabelledById?: string;
+    /**  String that labels the current loading element  */
+    ariaLabel?: string;
+}
+declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLElement>>;
+export default Loader;
+//# sourceMappingURL=Loader.d.ts.map

package/components/Loader/Loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD,oBAAY,YAAY,GAAG,YAAY,CAAC;AACxC,oBAAY,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChE,oBAAY,OAAO;IACjB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC/B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,iFA6FV,CAAC;AAEH,eAAe,MAAM,CAAC"}