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

package/components/Tile/Tile.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { HTMLAnchorProps } from '../../constants';
+import { TitleTags } from './../Title/Title';
+export declare type TileTags = 'button' | 'a';
+interface TileProps extends HTMLAnchorProps {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /**	Sets the icon to be displayed inside the tile. */
+    icon: React.ReactElement;
+    /**	Sets the title to be displayed inside the tile. */
+    title: React.ReactElement;
+    /** Toggles the highlighted style of the tile. */
+    highlighted?: boolean;
+    /** Sets the description to be displayed inside the tile. */
+    description?: string;
+    /** Sets a fixed max and min width for the tile. */
+    fixed?: boolean;
+    /** Called when the tile is clicked on. */
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** HTML markup for tile. Default: a */
+    htmlMarkup?: TileTags;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+interface TileTitleProps {
+    children: React.ReactNode;
+    className?: string;
+    htmlMarkup?: TitleTags;
+    highlighted?: boolean;
+    compact?: boolean;
+}
+export interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {
+    Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+}
+export declare const Tile: TileCompound;
+export default Tile;
+//# sourceMappingURL=Tile.d.ts.map

package/components/Tile/Tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../src/components/Tile/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAe,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAM7C,oBAAY,QAAQ,GAAG,QAAQ,GAAG,GAAG,CAAC;AAEtC,UAAU,SAAU,SAAQ,eAAe;IACzC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,sDAAsD;IACtD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClE,uCAAuC;IACvC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACvH,KAAK,EAAE,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;CAClG;AAqBD,eAAO,MAAM,IAAI,cAuDC,CAAC;AAInB,eAAe,IAAI,CAAC"}

package/components/Tile/componentdata.json

@@ -0,0 +1,390 @@
+{
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/Tile/Tile.tsx",
+        "name": "TileProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tile/Tile.tsx",
+          "name": "TileProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "icon": {
+      "defaultValue": null,
+      "description": "Sets the icon to be displayed inside the tile.",
+      "name": "icon",
+      "parent": {
+        "fileName": "src/components/Tile/Tile.tsx",
+        "name": "TileProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tile/Tile.tsx",
+          "name": "TileProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "ReactElement<any, string | JSXElementConstructor<any>>"
+      }
+    },
+    "title": {
+      "defaultValue": null,
+      "description": "Sets the title to be displayed inside the tile.",
+      "name": "title",
+      "parent": {
+        "fileName": "src/components/Tile/Tile.tsx",
+        "name": "TileProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tile/Tile.tsx",
+          "name": "TileProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "ReactElement<any, string | JSXElementConstructor<any>>"
+      }
+    },
+    "highlighted": {
+      "defaultValue": null,
+      "description": "Toggles the highlighted style of the tile.",
+      "name": "highlighted",
+      "parent": {
+        "fileName": "src/components/Tile/Tile.tsx",
+        "name": "TileProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tile/Tile.tsx",
+          "name": "TileProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "description": {
+      "defaultValue": null,
+      "description": "Sets the description to be displayed inside the tile.",
+      "name": "description",
+      "parent": {
+        "fileName": "src/components/Tile/Tile.tsx",
+        "name": "TileProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tile/Tile.tsx",
+          "name": "TileProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "fixed": {
+      "defaultValue": null,
+      "description": "Sets a fixed max and min width for the tile.",
+      "name": "fixed",
+      "parent": {
+        "fileName": "src/components/Tile/Tile.tsx",
+        "name": "TileProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tile/Tile.tsx",
+          "name": "TileProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "onClick": {
+      "defaultValue": null,
+      "description": "Called when the tile is clicked on.",
+      "name": "onClick",
+      "parent": {
+        "fileName": "src/components/Tile/Tile.tsx",
+        "name": "TileProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tile/Tile.tsx",
+          "name": "TileProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "((e?: MouseEvent<HTMLElement, MouseEvent>) => void) | undefined"
+      }
+    },
+    "htmlMarkup": {
+      "defaultValue": null,
+      "description": "HTML markup for tile. Default: a",
+      "name": "htmlMarkup",
+      "parent": {
+        "fileName": "src/components/Tile/Tile.tsx",
+        "name": "TileProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tile/Tile.tsx",
+          "name": "TileProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "TileTags | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"button\""
+          },
+          {
+            "value": "\"a\""
+          }
+        ]
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Tile/Tile.tsx",
+        "name": "TileProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Tile/Tile.tsx",
+          "name": "TileProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "download": {
+      "defaultValue": null,
+      "description": "",
+      "name": "download",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLAnchorProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLAnchorProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "href": {
+      "defaultValue": null,
+      "description": "",
+      "name": "href",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLAnchorProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLAnchorProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "hrefLang": {
+      "defaultValue": null,
+      "description": "",
+      "name": "hrefLang",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLAnchorProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLAnchorProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "media": {
+      "defaultValue": null,
+      "description": "",
+      "name": "media",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLAnchorProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLAnchorProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "ping": {
+      "defaultValue": null,
+      "description": "",
+      "name": "ping",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLAnchorProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLAnchorProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "rel": {
+      "defaultValue": null,
+      "description": "",
+      "name": "rel",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLAnchorProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLAnchorProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "AnchorTarget | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"_self\""
+          },
+          {
+            "value": "\"_blank\""
+          },
+          {
+            "value": "\"_parent\""
+          },
+          {
+            "value": "\"_top\""
+          }
+        ]
+      }
+    },
+    "target": {
+      "defaultValue": null,
+      "description": "",
+      "name": "target",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLAnchorProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLAnchorProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "referrerPolicy": {
+      "defaultValue": null,
+      "description": "",
+      "name": "referrerPolicy",
+      "parent": {
+        "fileName": "designsystem/src/constants.ts",
+        "name": "HTMLAnchorProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/constants.ts",
+          "name": "HTMLAnchorProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"\" | \"same-origin\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"\""
+          },
+          {
+            "value": "\"same-origin\""
+          },
+          {
+            "value": "\"no-referrer\""
+          },
+          {
+            "value": "\"no-referrer-when-downgrade\""
+          },
+          {
+            "value": "\"origin\""
+          },
+          {
+            "value": "\"origin-when-cross-origin\""
+          },
+          {
+            "value": "\"strict-origin\""
+          },
+          {
+            "value": "\"strict-origin-when-cross-origin\""
+          },
+          {
+            "value": "\"unsafe-url\""
+          }
+        ]
+      }
+    }
+  }
+}

package/components/Tile/index.d.ts

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

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

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

package/components/Tile/index.js

@@ -0,0 +1,2 @@
+import{d as e}from"../../_rollupPluginBabelHelpers-0f007973.js";import{_ as t}from"../../_tslib-b219470a.js";import i from"react";import{c as r}from"../../index-d1c0552c.js";import{A as a,I as l}from"../../constants-dbdea596.js";import"../../Icon-d69d65b3.js";import o from"./styles.module.scss";import{u as s}from"../../useHover-18479690.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";var n=i.forwardRef((function(t,a){var l,s=t.children,n=t.className,c=t.htmlMarkup,m=void 0===c?"span":c,d=t.highlighted,p=t.compact,u=r(o.tile__title,(e(l={},o["tile__title--highlighted"],d),e(l,o["tile__title--compact"],p),l),n),f=m;return i.createElement(f,{className:u,ref:a},s)})),c=i.forwardRef((function(n,c){var m,d,p=n.icon,u=n.title,f=n.className,h=void 0===f?"":f,g=n.description,b=n.fixed,v=void 0!==b&&b,_=n.highlighted,j=void 0!==_&&_,E=n.testId,N=n.htmlMarkup,k=void 0===N?"a":N,w=t(n,["icon","title","className","description","fixed","highlighted","testId","htmlMarkup"]),x=s(c),H=x.hoverRef,I=x.isHovered,M=!g,y=r(o.tile,(e(m={},o["tile--fixed"],v),e(m,o["tile--compact"],M),e(m,o["tile--highlighted"],j),e(m,o["tile--button"],"button"===k),m),h),O=r(o["title-wrapper"],e({},o["title-wrapper--compact"],M)),R=function(){return i.createElement(i.Fragment,null,i.createElement("div",{className:O},i.cloneElement(p,{size:l.Medium,isHovered:I,color:j?"white":"black"}),i.cloneElement(u,{highlighted:j,compact:M})),g?i.createElement("p",{className:o.tile__description},g):null)},F=Object.assign((e(d={className:y},"data-testid",E),e(d,"data-analyticsid",a.Tile),d),w);return i.createElement(i.Fragment,null,"a"===k&&i.createElement("a",Object.assign({ref:H,rel:"_blank"===n.target?"noopener noreferrer":n.rel},F),R()),"button"===k&&i.createElement("button",Object.assign({ref:H,type:"button"},F),R()))}));c.Title=n;export{c as Tile,c as default};
+//# sourceMappingURL=index.js.map

package/components/Tile/index.js.map

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

package/components/Tile/styles.module.scss

@@ -0,0 +1,127 @@
+@import '../../scss/_palette.scss';
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+
+@mixin tile-title {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  font-size: 1.5rem;
+  text-align: left;
+  line-height: 1.75rem;
+  font-weight: 600;
+  margin: 0;
+  margin-left: 0.5rem;
+
+  @media (min-width: map-get($grid-breakpoints, sm)) {
+    font-size: 1.25rem;
+    margin-top: 1rem;
+  }
+}
+
+.tile {
+  // Referanse for grandparent selection i underklassene lenger nede
+  $tile: &;
+
+  display: flex;
+  width: inherit;
+  padding: 1.5rem 2rem 2rem 1rem;
+  flex-direction: column;
+  justify-content: flex-start;
+  background-color: $white;
+  color: $black;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+
+  @media print {
+    border: 1px solid $black;
+  }
+
+  &--button {
+    border: none;
+  }
+
+  &--fixed {
+    min-width: 15rem;
+    max-width: 20rem;
+  }
+
+  &--compact {
+    padding: 1.5rem 1rem 1.5rem 1rem;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: $neutral100;
+  }
+  &:focus {
+    box-shadow: 0 0 0 6px $neutral600;
+  }
+
+  &--highlighted {
+    background-color: $blueberry500;
+    color: $white;
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $blueberry700;
+    }
+    &:focus {
+      box-shadow: 0 0 0 6px $blueberry700;
+    }
+  }
+
+  &__title {
+    @include tile-title;
+
+    &--compact {
+      margin: 0 0 0 1.5rem;
+    }
+  }
+
+  #{$tile}:focus & {
+    &__title {
+      &--highlighted {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__description {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    margin: 0 0 0 0.5rem;
+  }
+}
+
+.title-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-bottom: 0.5rem;
+
+  @media (min-width: map-get($grid-breakpoints, sm)) {
+    flex-direction: column;
+    align-items: start;
+
+    @media print {
+      flex-direction: row;
+    }
+  }
+
+  &--compact {
+    flex-direction: row;
+    align-items: center;
+    padding-right: 1rem;
+    padding-bottom: 0;
+
+    svg {
+      flex-shrink: 0;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+export type Styles = {
+  tile: string;
+  tile__description: string;
+  tile__title: string;
+  'tile__title--compact': string;
+  'tile__title--highlighted': string;
+  'tile--button': string;
+  'tile--compact': string;
+  'tile--fixed': string;
+  'tile--highlighted': string;
+  'title-wrapper': string;
+  'title-wrapper--compact': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Title/Title.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';
+export declare type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5';
+interface TitleProps {
+    children: React.ReactNode;
+    /** Gives a unique id to the title */
+    id?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Adds top and bottom margin in rem. */
+    margin?: number | TitleMargin;
+    /** Changes the underlying element of the title. */
+    htmlMarkup?: TitleTags;
+    /** Changes the appearance of the title. */
+    appearance?: TitleAppearances;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface TitleMargin {
+    marginTop: number;
+    marginBottom: number;
+}
+export declare const instanceOfTitleMargin: (margin: any) => margin is TitleMargin;
+export default Title;
+//# sourceMappingURL=Title.d.ts.map

package/components/Title/Title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/components/Title/Title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,oBAAY,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAClE,oBAAY,gBAAgB,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErG,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,mDAAmD;IACnD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,KAAK,uFAyBhB,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,WAAY,GAAG,0BAEhD,CAAC;AAEF,eAAe,KAAK,CAAC"}