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

package/components/Table/componentdata.json

@@ -0,0 +1,156 @@
+{
+  "props": {
+    "expandable": {
+      "defaultValue": null,
+      "description": "Sets if expanded row can be expanded",
+      "name": "expandable",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "expanded": {
+      "defaultValue": null,
+      "description": "Sets if expanded row is expanded",
+      "name": "expanded",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "onClick": {
+      "defaultValue": null,
+      "description": "When hide/show button for expanded row is clicked.",
+      "name": "onClick",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "(() => void)"
+      }
+    },
+    "hideDetailsText": {
+      "defaultValue": null,
+      "description": "Text for expanded row hide button.",
+      "name": "hideDetailsText",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "showDetailsText": {
+      "defaultValue": null,
+      "description": "Text for expanded row show button.",
+      "name": "showDetailsText",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "rowKey": {
+      "defaultValue": null,
+      "description": "Key attribute for row",
+      "name": "rowKey",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "children": {
+      "defaultValue": null,
+      "description": "Sets the cells of the table row element.",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    }
+  }
+}

package/components/Table/index.d.ts

@@ -0,0 +1,11 @@
+import { Table } from './Table';
+export { TableBody } from './TableBody';
+export { TableCell, TextAlign } from './TableCell';
+export { TableExpandedRow } from './TableExpandedRow';
+export { TableExpanderCell } from './TableExpanderCell';
+export { TableHead, HeaderCategory } from './TableHead';
+export { TableHeadCell, SortDirection } from './TableHeadCell';
+export { TableRow } from './TableRow';
+export * from './Table';
+export default Table;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,cAAc,SAAS,CAAC;AAExB,eAAe,KAAK,CAAC"}

package/components/Table/index.js

@@ -0,0 +1,2 @@
+import{d as e}from"../../_rollupPluginBabelHelpers-0f007973.js";import o from"react";import{c as r}from"../../index-d1c0552c.js";import s from"./styles.module.scss";import{A as t}from"../../constants-dbdea596.js";export{T as TableBody}from"../../TableBody-eac2c23b.js";export{T as TableCell,a as TextAlign}from"../../TableCell-cc644eb5.js";export{T as TableExpandedRow}from"../../TableExpandedRow-44b09912.js";export{T as TableExpanderCell}from"../../TableExpanderCell-015d3db2.js";export{H as HeaderCategory,T as TableHead}from"../../TableHead-5ed58948.js";export{S as SortDirection,T as TableHeadCell}from"../../TableHeadCell-84651910.js";export{T as TableRow}from"../../TableRow-692099ee.js";import"../../Button-78f848e6.js";import"../../_tslib-b219470a.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronUp-dfafe27b.js";import"../../ChevronDown-2b3daace.js";import"../../ArrowUp-e7787d9c.js";import"../../ArrowDown-88b2c27a.js";var l;!function(e){e.horizontalscroll="horizontalscroll",e.block="block"}(l||(l={}));var d=function(a){var d=a.id,i=a.testId,p=a.className,m=a.children,c=a.smallViewportVariant,b=void 0===c?l.block:c,n=r(s.table,e({},s["table--collapse2col"],b===l.block),p);return o.createElement("table",{className:n,id:d,"data-testid":i,"data-analyticsid":t.Table},m)};export{l as SmallViewportVariant,d as Table,d as default};
+//# sourceMappingURL=index.js.map

package/components/Table/index.js.map

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

package/components/Table/styles.module.scss

@@ -0,0 +1,136 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_grid.scss';
+@import '../../scss/_font-settings.scss';
+
+/* fix outline for Safari */
+table tbody tr {
+  outline: 3px solid transparent;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+
+  &__expander-cell-mobile {
+    display: none;
+  }
+}
+
+.table__head {
+  background: $blueberry50;
+  &--normal {
+    background: $neutral50;
+  }
+  &--transparent {
+    background: transparent;
+  }
+
+  &--sortable {
+    background: $blueberry50;
+  }
+
+  @media (min-width: map-get($grid-breakpoints, lg)) {
+    height: 6.125rem;
+  }
+}
+
+.table__head-cell {
+  height: 3.625rem;
+  font-size: $font-size-sm;
+  line-height: 1.5rem;
+  text-align: left;
+  vertical-align: bottom;
+  font-weight: 200;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid $neutral500;
+
+  &--sortable:hover {
+    background-color: $blueberry100;
+    cursor: pointer;
+  }
+  &--sortable:focus {
+    outline: 3px solid $black;
+  }
+
+  &--sorted {
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.3125rem;
+  }
+  @media (min-width: map-get($grid-breakpoints, lg)) {
+    padding: 1rem;
+    height: 5.5rem;
+    font-size: $font-size-md;
+    line-height: 1.75rem;
+    font-weight: 200;
+  }
+}
+
+.table__head-cell-sort-icon-wrapper {
+  min-height: 2rem;
+}
+
+.table__cell {
+  height: 2, 375;
+  font-size: $font-size-xs;
+  line-height: 1.5rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  border: 1px solid $neutral500;
+
+  &--center {
+    text-align: center;
+  }
+  &--right {
+    text-align: right;
+  }
+  &--nowrap {
+    white-space: nowrap;
+  }
+
+  @media (min-width: map-get($grid-breakpoints, lg)) {
+    padding: 1rem;
+    height: 3.625rem;
+    font-size: $font-size-sm;
+    line-height: 1.75rem;
+  }
+}
+
+.table__cell-expander {
+  text-align: center;
+  width: min-content;
+  padding: 0px;
+  vertical-align: middle;
+}
+
+.table__row--expandable {
+  &--selected {
+    background: $neutral100;
+  }
+  &:hover {
+    cursor: pointer;
+    background: $neutral100;
+  }
+  &:focus-within {
+    outline: 3px solid $black;
+  }
+}
+.table__expanded-row {
+  display: none;
+  &--expanded {
+    display: table-row;
+  }
+
+  &-container {
+    padding: 0.5rem;
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      &--open {
+        border-bottom: 1px solid $neutral100;
+      }
+    }
+  }
+}
+
+@import 'collapseTwoCol.scss';

package/components/Tag/Tag.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { SvgIcon } from '../Icons';
+import { PaletteNames } from '../../theme/palette';
+export declare enum TagSize {
+    medium = "medium",
+    large = "large"
+}
+export declare enum TagAction {
+    remove = "remove",
+    undo = "undo"
+}
+export declare enum TagVariant {
+    normal = "normal",
+    oncolor = "oncolor",
+    emphasised = "emphasised"
+}
+export declare type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;
+interface TagProps {
+    /** Sets the text of the tag */
+    children: string;
+    /** Sets the size of the tag. Default: small */
+    size?: keyof typeof TagSize;
+    /** Sets the background of the tag. Not used if action is "undo". Default: blueberry */
+    color?: TagColors;
+    /** Adds an icon to the tag. Not shown if action is set. */
+    svgIcon?: SvgIcon;
+    variant?: keyof typeof TagVariant;
+    action?: keyof typeof TagAction;
+    onClick?: () => void;
+    /** Sets the data-testid attribute on the expander button. */
+    testId?: string;
+}
+declare const Tag: React.FC<TagProps>;
+export default Tag;
+//# sourceMappingURL=Tag.d.ts.map

package/components/Tag/Tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAW,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAQ5D,oBAAY,OAAO;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,UAAU,eAAe;CAC1B;AAED,oBAAY,SAAS,GAAG,OAAO,CAAC,YAAY,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AAE/G,UAAU,QAAQ;IAChB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC5B,uFAAuF;IACvF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,OAAO,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAElC,MAAM,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAEhC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuCD,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAqB3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/Tag/componentdata.json

@@ -0,0 +1,223 @@
+{
+  "props": {
+    "children": {
+      "defaultValue": null,
+      "description": "Sets the text of the tag",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/Tag/Tag.tsx",
+        "name": "TagProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tag/Tag.tsx",
+          "name": "TagProps"
+        },
+        {
+          "fileName": "designsystem/node_modules/@types/react/index.d.ts",
+          "name": "TypeLiteral"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string & ReactNode"
+      }
+    },
+    "size": {
+      "defaultValue": null,
+      "description": "Sets the size of the tag. Default: small",
+      "name": "size",
+      "parent": {
+        "fileName": "src/components/Tag/Tag.tsx",
+        "name": "TagProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tag/Tag.tsx",
+          "name": "TagProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"medium\" | \"large\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"medium\""
+          },
+          {
+            "value": "\"large\""
+          }
+        ]
+      }
+    },
+    "color": {
+      "defaultValue": null,
+      "description": "Sets the background of the tag. Not used if action is \"undo\". Default: blueberry",
+      "name": "color",
+      "parent": {
+        "fileName": "src/components/Tag/Tag.tsx",
+        "name": "TagProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tag/Tag.tsx",
+          "name": "TagProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "TagColors | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"banana\""
+          },
+          {
+            "value": "\"blueberry\""
+          },
+          {
+            "value": "\"cherry\""
+          },
+          {
+            "value": "\"kiwi\""
+          },
+          {
+            "value": "\"neutral\""
+          },
+          {
+            "value": "\"plum\""
+          }
+        ]
+      }
+    },
+    "svgIcon": {
+      "defaultValue": null,
+      "description": "Adds an icon to the tag. Not shown if action is set.",
+      "name": "svgIcon",
+      "parent": {
+        "fileName": "src/components/Tag/Tag.tsx",
+        "name": "TagProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tag/Tag.tsx",
+          "name": "TagProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "SvgIcon"
+      }
+    },
+    "variant": {
+      "defaultValue": null,
+      "description": "",
+      "name": "variant",
+      "parent": {
+        "fileName": "src/components/Tag/Tag.tsx",
+        "name": "TagProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tag/Tag.tsx",
+          "name": "TagProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"normal\" | \"oncolor\" | \"emphasised\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"normal\""
+          },
+          {
+            "value": "\"oncolor\""
+          },
+          {
+            "value": "\"emphasised\""
+          }
+        ]
+      }
+    },
+    "action": {
+      "defaultValue": null,
+      "description": "",
+      "name": "action",
+      "parent": {
+        "fileName": "src/components/Tag/Tag.tsx",
+        "name": "TagProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tag/Tag.tsx",
+          "name": "TagProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"remove\" | \"undo\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"remove\""
+          },
+          {
+            "value": "\"undo\""
+          }
+        ]
+      }
+    },
+    "onClick": {
+      "defaultValue": null,
+      "description": "",
+      "name": "onClick",
+      "parent": {
+        "fileName": "src/components/Tag/Tag.tsx",
+        "name": "TagProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tag/Tag.tsx",
+          "name": "TagProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "(() => void)"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute on the expander button.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Tag/Tag.tsx",
+        "name": "TagProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tag/Tag.tsx",
+          "name": "TagProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/Tag/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,OAAO,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,eAAe,GAAG,CAAC"}

package/components/Tag/index.js

@@ -0,0 +1,2 @@
+import{d as o}from"../../_rollupPluginBabelHelpers-0f007973.js";import t from"react";import{c as a}from"../../index-d1c0552c.js";import{I as e}from"../../Icon-d69d65b3.js";import{A as r,I as c}from"../../constants-dbdea596.js";import{p as n}from"../../palette-f206f488.js";import s from"./styles.module.scss";import{u as i}from"../../useHover-18479690.js";import{U as m}from"../../Undo-cc42e7d0.js";import{X as l}from"../../X-867957f2.js";import"../../_tslib-b219470a.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";var d,u,f;!function(o){o.medium="medium",o.large="large"}(d||(d={})),function(o){o.remove="remove",o.undo="undo"}(u||(u={})),function(o){o.normal="normal",o.oncolor="oncolor",o.emphasised="emphasised"}(f||(f={}));var p=function(o){var d=o.children,u=o.size,f=o.color,p=o.variant,v=o.action,g=o.onClick,b=o.testId,j=i(),I=j.hoverRef,h=j.isHovered,y=a(s.tag,s["tag--".concat(u)],s["tag--".concat(v)],s["tag--has-action"],"remove"===v&&[s["tag--".concat(f)],s["tag--".concat(p)]]);return t.createElement("button",{className:y,onClick:g,ref:I,type:"button","data-testid":b,"data-analyticsid":r.Tag},d,t.createElement(e,{svgIcon:function(){switch(v){case"remove":return l;case"undo":return m}}(),size:c.XXSmall,color:n["".concat("undo"===v?"blueberry":f,"800")],isHovered:h}))},v=function(i){var m=i.children,l=i.size,u=void 0===l?d.medium:l,f=i.color,v=void 0===f?"blueberry":f,g=i.svgIcon,b=i.variant,j=void 0===b?"normal":b,I=i.action,h=i.onClick,y=i.testId,z=a(s.tag,s["tag--".concat(u)],s["tag--".concat(v)],s["tag--".concat(j)],o({},s["tag--has-icon"],g));return I&&h?t.createElement(p,{size:u,color:v,variant:j,action:I,onClick:h,testId:y},m):t.createElement("span",{className:z,"data-testid":y,"data-analyticsid":r.Tag},g&&t.createElement(e,{svgIcon:g,size:c.XXSmall,color:n["".concat(v,"800")],className:s.tag__icon}),m)};export{u as TagAction,d as TagSize,f as TagVariant,v as default};
+//# sourceMappingURL=index.js.map

package/components/Tag/index.js.map

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