@helsenorge/designsystem-react 11.2.0-beta.0 → 11.3.0

package/components/ArticleTeaser/ArticleTeaser.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { HNDesignsystemArticleTeaser } from '../../resources/Resources';
+export type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';
+export interface ArticleTeaserProps {
+    /** Callback for the button. Should be used for setting the expanded boolean */
+    onExpand: () => void;
+    /** What's in the box? */
+    children: React.ReactNode;
+    /** Id of the content, used to set aria-controls */
+    contentId: string;
+    /** If the component is expanded or not */
+    expanded: boolean;
+    /** For overriding the height of the collapsed teaser */
+    heightCollapsed?: string;
+    /** Changes the underlying element of the wrapper */
+    htmlMarkup?: ArticleTeaserTags;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemArticleTeaser>;
+    /** Sets the data-testid attribute */
+    testId?: string;
+}
+declare const ArticleTeaser: React.FC<ArticleTeaserProps>;
+export default ArticleTeaser;

package/components/ArticleTeaser/ArticleTeaser.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/ArticleTeaser/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ArticleTeaser } from './ArticleTeaser';
+export * from './ArticleTeaser';
+export default ArticleTeaser;

package/components/ArticleTeaser/index.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { LanguageLocales, AnalyticsId } from "../../constants.js";
+import { useLanguage } from "../../utils/language.js";
+import styles from "./styles.module.scss";
+const expandButtonClose$1 = "Show more";
+const expandButtonOpen$1 = "Show less";
+const enGB = {
+  expandButtonClose: expandButtonClose$1,
+  expandButtonOpen: expandButtonOpen$1
+};
+const expandButtonClose = "Vis mer";
+const expandButtonOpen = "Vis mindre";
+const nbNO = {
+  expandButtonClose,
+  expandButtonOpen
+};
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.ENGLISH:
+      return enGB;
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
+const ArticleTeaser = (props) => {
+  const { onExpand, children, contentId, expanded, htmlMarkup = "div", resources, testId } = props;
+  const WrapperTag = htmlMarkup;
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources
+  };
+  return /* @__PURE__ */ jsxs(WrapperTag, { className: classNames(styles.articleteaser), "data-testid": testId, "data-analyticsid": AnalyticsId.ArticleTeaser, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(styles["articleteaser__content"], {
+          [styles["articleteaser__content--collapsed"]]: !expanded
+        }),
+        style: {
+          maxHeight: expanded ? "none" : props.heightCollapsed
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: classNames(styles["articleteaser__button"], {
+          [styles["articleteaser__button--expanded"]]: expanded
+        }),
+        onClick: onExpand,
+        "aria-expanded": expanded,
+        "aria-controls": contentId,
+        children: expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose
+      }
+    )
+  ] });
+};
+export {
+  ArticleTeaser as default
+};
+//# sourceMappingURL=index.js.map

package/components/ArticleTeaser/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ArticleTeaser/resourceHelper.ts","../../../src/components/ArticleTeaser/ArticleTeaser.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.ArticleTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.ArticleTeaser.nb-NO.json';\nimport { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemArticleTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemArticleTeaser } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface ArticleTeaserProps {\n  /** Callback for the button. Should be used for setting the expanded boolean */\n  onExpand: () => void;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Id of the content, used to set aria-controls */\n  contentId: string;\n  /** If the component is expanded or not */\n  expanded: boolean;\n  /** For overriding the height of the collapsed teaser */\n  heightCollapsed?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: ArticleTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemArticleTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst ArticleTeaser: React.FC<ArticleTeaserProps> = props => {\n  const { onExpand, children, contentId, expanded, htmlMarkup = 'div', resources, testId } = props;\n  const WrapperTag = htmlMarkup;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemArticleTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <WrapperTag className={classNames(styles.articleteaser)} data-testid={testId} data-analyticsid={AnalyticsId.ArticleTeaser}>\n      <div\n        className={classNames(styles['articleteaser__content'], {\n          [styles['articleteaser__content--collapsed']]: !expanded,\n        })}\n        style={{\n          maxHeight: expanded ? 'none' : props.heightCollapsed,\n        }}\n      >\n        {children}\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles['articleteaser__button'], {\n          [styles['articleteaser__button--expanded']]: expanded,\n        })}\n        onClick={onExpand}\n        aria-expanded={expanded}\n        aria-controls={contentId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default ArticleTeaser;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAKa,MAAA,eAAe,CAAC,aAA2D;AACtF,UAAQ,UAAU;AAAA,IAChB,KAAK,gBAAgB;AACZ,aAAA;AAAA,IACT,KAAK,gBAAgB;AAAA,IACrB;AACS,aAAA;AAAA,EAAA;AAEb;ACmBA,MAAM,gBAA8C,CAAS,UAAA;AACrD,QAAA,EAAE,UAAU,UAAU,WAAW,UAAU,aAAa,OAAO,WAAW,OAAA,IAAW;AAC3F,QAAM,aAAa;AAEnB,QAAM,EAAE,SAAa,IAAA,YAA6B,gBAAgB,SAAS;AACrE,QAAA,mBAAmB,aAAa,QAAQ;AAE9C,QAAM,kBAA+C;AAAA,IACnD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAGE,SAAA,qBAAC,YAAW,EAAA,WAAW,WAAW,OAAO,aAAa,GAAG,eAAa,QAAQ,oBAAkB,YAAY,eAC1G,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,WAAW,OAAO,wBAAwB,GAAG;AAAA,UACtD,CAAC,OAAO,mCAAmC,CAAC,GAAG,CAAC;AAAA,QAAA,CACjD;AAAA,QACD,OAAO;AAAA,UACL,WAAW,WAAW,SAAS,MAAM;AAAA,QACvC;AAAA,QAEC;AAAA,MAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,WAAW,OAAO,uBAAuB,GAAG;AAAA,UACrD,CAAC,OAAO,iCAAiC,CAAC,GAAG;AAAA,QAAA,CAC9C;AAAA,QACD,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,iBAAe;AAAA,QAEd,UAAA,WAAW,gBAAgB,mBAAmB,gBAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EACjE,GACF;AAEJ;"}

package/components/ArticleTeaser/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { LanguageLocales } from '../../constants';
+import { HNDesignsystemArticleTeaser } from '../../resources/Resources';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemArticleTeaser;

package/components/ArticleTeaser/styles.module.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
+
+.articleteaser {
+  position: relative;
+  border-bottom: 1px solid var(--color-base-border-onlight);
+
+  &__content {
+    margin-bottom: var(--core-space-l);
+    overflow: hidden;
+
+    &--collapsed {
+      max-height: 10rem;
+
+      &::after {
+        content: '';
+        position: absolute;
+        height: var(--core-space-3xl);
+        background: linear-gradient(180deg, #ffffff40 0%, #fff 80%);
+        width: 100%;
+        bottom: 1px;
+      }
+    }
+  }
+
+  &__button {
+    position: absolute;
+    right: calc(50%);
+    border: none;
+    width: fit-content;
+    white-space: nowrap;
+    border-radius: 1.25rem;
+    background: var(--color-action-graphics-onlight, #188097);
+    color: var(--core-color-white, #fff);
+    padding: 0.375rem 1rem;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) translateY(50%);
+    cursor: pointer;
+
+    /* @todo Mobile/HelpTriggerText */
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 120%; /* 1.2rem */
+
+    &:hover {
+      background-color: var(--color-action-graphics-onlight-hover);
+    }
+
+    &:focus-visible {
+      border: 1px solid var(--color-base-graphics-ondark);
+      outline: none;
+      box-shadow: 0 0 0 3px var(--color-base-graphics-onlight);
+    }
+
+    &:active {
+      background-color: var(--core-color-blueberry-800);
+    }
+
+    &--expanded {
+      background: var(--color-action-graphics-ondark);
+      color: var(--color-action-graphics-onlight);
+      border: 1px solid var(--color-action-border-onlight);
+
+      &:hover {
+        // @todo: endre denne når ny token er laget
+        background-color: var(--color-action-graphics-ondark-hover);
+      }
+
+      &:active {
+        // @todo: endre denne når ny token er laget
+        background-color: var(--color-action-graphics-ondark);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+export type Styles = {
+  articleteaser: string;
+  articleteaser__button: string;
+  'articleteaser__button--expanded': string;
+  articleteaser__content: string;
+  'articleteaser__content--collapsed': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Close/Close.d.ts

@@ -11,7 +11,7 @@ export interface CloseProps {
     /** Adds custom classes to the element. */
     className?: string;
     /** Gives color to the svg */
-    color?: string;
+    color?: 'blueberry' | 'black' | 'plum';
 }
 declare const Close: React.ForwardRefExoticComponent<CloseProps & React.RefAttributes<HTMLButtonElement>>;
 export default Close;

package/components/Close/styles.module.scss

@@ -2,42 +2,73 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
+
+$desktop-size: 3rem;
+$mobile-inner-size: 2.375rem;
+$mobile-outer-size: 2.75rem;
 
 .close {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 3rem;
-  width: 3rem;
+  height: $mobile-outer-size;
+  width: $mobile-outer-size;
   padding: 0;
   border: 0;
   background-color: transparent;
   cursor: pointer;
 
-  @media (max-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-    height: 2.375rem;
-    width: 2.375rem;
+  &:focus-visible {
+    outline: none;
   }
 
-  &:hover,
-  &:active {
-    background-color: rgb(88 170 187 / 10%);
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    height: $desktop-size;
+    width: $desktop-size;
   }
 
-  &:focus {
-    box-shadow: 0 0 0 2px palette.$black;
-    background-color: transparent;
-    border-radius: 0;
-    border: 0;
-    outline: none;
+  &--small {
+    height: $mobile-outer-size;
+    width: $mobile-outer-size;
   }
 
-  &:hover {
-    background-color: rgb(88 170 187 / 10%);
-  }
+  &__inner-container {
+    width: $mobile-inner-size;
+    height: $mobile-inner-size;
 
-  &--small {
-    height: auto;
-    width: auto;
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      height: $desktop-size;
+      width: $desktop-size;
+    }
+
+    &--small {
+      width: $mobile-inner-size;
+      height: $mobile-inner-size;
+    }
+
+    :hover > &,
+    :active > & {
+      background-color: var(--color-action-background-transparent-onlight-hover);
+    }
+
+    :focus-visible > & {
+      outline: 3px solid var(--color-action-border-onlight-focus);
+      border-radius: 0;
+      border: 0;
+    }
+
+    &--plum {
+      :hover > &,
+      :active > & {
+        background-color: var(--color-help-background-transparent-onlight-hover, #6c36b31a);
+      }
+
+      :focus-visible > & {
+        outline: 3px solid var(--color-action-border-onlight-focus);
+        border-radius: 0;
+        border: 0;
+      }
+    }
   }
 }

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

@@ -1,5 +1,8 @@
 export type Styles = {
   close: string;
+  'close__inner-container': string;
+  'close__inner-container--plum': string;
+  'close__inner-container--small': string;
   'close--small': string;
 };
 

package/components/Drawer/Drawer.d.ts

@@ -12,8 +12,12 @@ export interface InnerDrawerProps {
     ariaLabelledBy?: string;
     /** Close button aria-label */
     ariaLabelCloseBtn?: string;
+    /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */
+    closeColor?: 'blueberry' | 'plum';
     /** Direction of the drawer on desktop. Default: left */
     desktopDirection?: DesktopDirections;
+    /** Sets the style of the Drawer header */
+    headerClasses?: string;
     /** Title to display in the header of the drawer */
     title: string;
     /** id of the drawer title */
@@ -21,11 +25,13 @@ export interface InnerDrawerProps {
     /** Changes the underlying element of the title. Default: h3 */
     titleHtmlMarkup?: TitleTags;
     /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */
-    onRequestClose: () => void;
+    onRequestClose?: () => void;
     /** Optional footer content that can be rendered instead of default CTA(s) */
     footerContent?: React.ReactNode;
     /** Main content of the drawer */
     children?: React.ReactNode;
+    /** Hides the close button */
+    noCloseButton?: boolean;
     /** Primary CTA callback */
     onPrimaryAction?: () => void;
     /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */