@helsenorge/designsystem-react 14.5.1 → 14.7.0

package/lib/components/Filter/FilterButton/styles.module.scss

@@ -0,0 +1,52 @@
+@use 'sass:map';
+@use '../../../scss/breakpoints' as breakpoints;
+@import '../../../scss/supernova/styles/spacers.css';
+
+.filter-button {
+  width: fit-content;
+  height: 2.75rem;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  border-radius: 100px;
+  cursor: pointer;
+
+  &__inner {
+    border-radius: 100px;
+    height: 2rem;
+    background-color: var(--color-action-graphics-onlight);
+    border: 1px solid transparent;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    padding: 0.1875rem var(--core-space-s) 0.1875rem 0.3125rem;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      height: 2.25rem;
+    }
+
+    &--hovered,
+    &:hover {
+      background-color: var(--color-action-graphics-onlight-hover);
+    }
+
+    .filter-button:active & {
+      background-color: var(--color-action-background-onlight-active, #06596c);
+    }
+
+    .filter-button:focus-visible & {
+      outline: 4px solid var(--color-action-border-onlight-focus);
+      border-color: var(--color-action-border-ondark-focus);
+    }
+
+    svg {
+      fill: white;
+    }
+  }
+
+  &__text {
+    color: white;
+    text-wrap: nowrap;
+  }
+}

package/lib/components/Filter/FilterButton/styles.module.scss.d.ts

@@ -0,0 +1,12 @@
+export type Styles = {
+  'filter-button': string;
+  'filter-button__inner': string;
+  'filter-button__inner--hovered': string;
+  'filter-button__text': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/Filter/FilterButtonAndChipsWrapper/FilterButtonAndChipsWrapper.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface FilterButtonAndChipsWrapperProps {
+    /** FilterButton content area */
+    filterButtonComponent: React.ReactNode;
+    /** Content area for rendering filter chips */
+    filterChips: React.ReactNode[];
+    /** test id that is placed on the wrapper */
+    testId?: string;
+}
+declare const FilterButtonAndChipsWrapper: React.FC<FilterButtonAndChipsWrapperProps>;
+export default FilterButtonAndChipsWrapper;

package/lib/components/Filter/FilterButtonAndChipsWrapper/styles.module.scss

@@ -0,0 +1,8 @@
+@import '../../../scss/supernova/styles/spacers.css';
+
+.filter-chip-bar {
+  display: flex;
+  flex-flow: row wrap;
+  column-gap: var(--core-space-xs);
+  align-items: center;
+}

package/lib/components/Filter/FilterButtonAndChipsWrapper/styles.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  'filter-chip-bar': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/Filter/FilterDrawer/FilterDrawer.d.ts

@@ -0,0 +1,42 @@
+import { HNDesignsystemFilter } from '../../../resources/Resources';
+import { UseFilterDrawerReturn } from '../useFilterDrawer';
+import { DrawerViewProps } from '../DrawerNavigation/DrawerNavigation';
+export interface FilterDrawerProps<ViewId extends string = string> {
+    /** The drawer state from useFilterDrawer */
+    drawer: UseFilterDrawerReturn<ViewId>;
+    /** Additional callback when the drawer closes (drawer.close() is always called automatically) */
+    onClose?: () => void;
+    /** Fully custom footer — overrides the default footer built from onReset/resultText */
+    footer?: React.ReactNode;
+    /** If provided, shows a "Nullstill filter" button in the default footer */
+    onReset?: () => void;
+    /** If provided, shows a result count button (e.g. "Vis 5 treff") that closes the drawer */
+    resultCount?: number;
+    /** Resources for the component */
+    resources?: Partial<HNDesignsystemFilter>;
+    /** DrawerNavigation.View children defining the overview and filter views */
+    children: React.ReactNode;
+}
+export interface FilterDrawerViewProps extends DrawerViewProps {
+    /** Hide reset button for view */
+    noResetButton?: boolean;
+    /** View specific close handler */
+    onClose?: () => void;
+    /** View specific reset handler */
+    onReset?: () => void;
+}
+/**
+ * Never rendered directly — FilterDrawer reads its props and creates a DrawerNavigation.View
+ * with id="overview" and home=true.
+ */
+declare function FilterDrawerOverview(_props: Omit<DrawerViewProps, 'id' | 'home'>): React.ReactNode;
+/**
+ * Never rendered directly — FilterDrawer reads its props and creates a FilterDrawerView
+ */
+declare function FilterDrawerView(_props: FilterDrawerViewProps): React.ReactNode;
+declare function FilterDrawer<ViewId extends string>({ drawer, onClose, footer, onReset, resultCount, resources, children, }: FilterDrawerProps<ViewId>): React.ReactNode;
+declare namespace FilterDrawer {
+    var Overview: typeof FilterDrawerOverview;
+    var View: typeof FilterDrawerView;
+}
+export default FilterDrawer;

package/lib/components/Filter/FilterDrawer/styles.module.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use '../../../scss/breakpoints' as breakpoints;
+@import '../../../scss/supernova/styles/spacers.css';
+
+.filter-drawer {
+  &__view {
+    --extra-horizontal-padding: 8px;
+
+    padding-left: var(--extra-horizontal-padding);
+    padding-right: var(--extra-horizontal-padding);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      --extra-horizontal-padding: 12px;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    // Override for single button
+    @supports selector(:has(> *)) {
+      &:not(:has(> :nth-child(2))) {
+        justify-content: flex-end;
+      }
+    }
+  }
+}

package/lib/components/Filter/FilterDrawer/styles.module.scss.d.ts

@@ -0,0 +1,10 @@
+export type Styles = {
+  'filter-drawer__footer': string;
+  'filter-drawer__view': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/Filter/FilterLinkList/FilterLinkList.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+export type LinkType = React.FC<LinkProps>;
+export interface CompoundComponent extends React.FC<LinkListProps> {
+    Link: LinkType;
+}
+export interface LinkListProps {
+    /** Items in the LinkList */
+    children: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Ref passed to the ul element */
+    ref?: React.Ref<HTMLUListElement | null>;
+}
+type Modify<T, R> = Omit<T, keyof R> & R;
+export type LinkProps = Modify<React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, {
+    /** If needed children will be content instead of title and chips. Use only in edge cases */
+    children?: React.ReactNode;
+    /** Title text on link element */
+    title?: string;
+    /** Texts rendered inside non-interactive chips on link element */
+    chips?: string[];
+    /** Custom classname for link element */
+    className?: string;
+    /** Ref for button */
+    linkRef?: React.RefObject<HTMLButtonElement | null>;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Ref passed to the list item element */
+    ref?: React.Ref<HTMLLIElement | null>;
+}>;
+export declare const Link: LinkType;
+export declare const FilterLinkList: CompoundComponent;
+export default FilterLinkList;

package/lib/components/Filter/FilterLinkList/FilterLinkList.module.scss

@@ -0,0 +1,89 @@
+@use 'sass:map';
+@use '../../../scss/breakpoints' as breakpoints;
+@import '../../../scss/supernova/styles/colors.css';
+
+.link-list {
+  list-style: none;
+  padding: 0;
+  width: inherit;
+  margin: 0;
+  position: relative;
+
+  &__item {
+    &:first-of-type {
+      border-top: 1px solid var(--component-listelements-border-neutral-normal);
+    }
+  }
+
+  &__button {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    padding-right: 0;
+    min-height: 4rem;
+    text-decoration: none;
+    color: var(--color-base-text-onlight);
+    cursor: pointer;
+    width: 100%;
+    background-color: var(--color-base-background-white);
+    border: none;
+    text-align: left;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--component-listelements-border-neutral-normal);
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    }
+
+    &:hover {
+      background-color: var(--component-listelements-background-neutral-light);
+    }
+
+    &:active {
+      background-color: var(--component-listelements-background-neutral-medium);
+    }
+
+    &:focus-visible {
+      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline-offset: 0; // Override user agent default
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  &__chip-list {
+    display: flex;
+    flex-flow: row wrap;
+    column-gap: 0.5rem;
+  }
+
+  &__chip {
+    box-sizing: border-box;
+    height: 1.625rem;
+    margin-top: 0.375rem;
+    margin-bottom: 6px;
+    background-color: var(--core-color-blueberry-50);
+    border: 1px solid var(--core-color-blueberry-500);
+    color: var(--core-color-blueberry-800);
+    border-radius: 100px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    text-wrap: none;
+    line-height: 1.25rem;
+    padding-top: 0.1875rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      height: 1.875rem;
+      padding-top: 0.3125rem;
+      margin-top: 0.4375rem;
+      margin-bottom: 0.4375rem;
+    }
+  }
+}

package/lib/components/Filter/FilterLinkList/FilterLinkList.module.scss.d.ts

@@ -0,0 +1,14 @@
+export type Styles = {
+  'link-list': string;
+  'link-list__button': string;
+  'link-list__button__content': string;
+  'link-list__chip': string;
+  'link-list__chip-list': string;
+  'link-list__item': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/Filter/FilterOverviewLinkList/FilterOverviewLinkList.d.ts

@@ -0,0 +1,19 @@
+import { FilterValues, UseFilterReturn } from '../useFilter';
+export interface FilterOverviewLink {
+    /** The filter key to read values from */
+    filterKey: string;
+    /** Display title for the link */
+    title: string;
+    /** View ID to navigate to when clicked. Defaults to filterKey */
+    viewId?: string;
+}
+export interface FilterOverviewLinkListProps<T extends FilterValues> {
+    /** The filter instance from useFilter */
+    filter: UseFilterReturn<T>;
+    /** Look up the display label for a filter key + value */
+    getLabel: (key: keyof T, value: unknown) => string;
+    /** Configuration for which filter keys to show as links */
+    links: FilterOverviewLink[];
+}
+declare function FilterOverviewLinkList<T extends FilterValues>({ filter, getLabel, links }: FilterOverviewLinkListProps<T>): React.ReactNode;
+export default FilterOverviewLinkList;

package/lib/components/Filter/FilterOverviewSearch/FilterOverviewSearch.d.ts

@@ -0,0 +1,9 @@
+import { FilterSearchProps } from '../FilterSearch/FilterSearch';
+export interface FilterOverviewSearchProps extends FilterSearchProps {
+    /** Adds custom classes to the wrapper element. */
+    wrapperClassName?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const FilterOverviewSearch: React.FC<FilterOverviewSearchProps>;
+export default FilterOverviewSearch;

package/lib/components/Filter/FilterOverviewSearch/styles.module.scss

@@ -0,0 +1,14 @@
+@import '../../../scss/supernova/styles/colors.css';
+@import '../../../scss/supernova/styles/spacers.css';
+
+.filter-overview-search {
+  width: 100%;
+  padding: var(--core-space-s);
+  padding-right: var(--core-space-xl);
+  background-color: var(--color-base-background-white);
+  border-bottom: 1px solid var(--component-listelements-border-neutral-normal);
+
+  &:first-child {
+    border-top: 1px solid var(--component-listelements-border-neutral-normal);
+  }
+}

package/lib/components/Filter/FilterOverviewSearch/styles.module.scss.d.ts

@@ -0,0 +1,9 @@
+export type Styles = {
+  'filter-overview-search': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/Filter/FilterResultCountAndSortWrapper/FilterResultCountAndSortWrapper.d.ts

@@ -0,0 +1,8 @@
+export interface FilterResultCountAndSortWrapper {
+    /** Result count content area */
+    resultCount?: React.ReactNode;
+    /** FilterSort content area */
+    sortComponent?: React.ReactNode;
+}
+declare const FilterResultCountAndSortWrapper: React.FC<FilterResultCountAndSortWrapper>;
+export default FilterResultCountAndSortWrapper;

package/lib/components/Filter/FilterResultCountAndSortWrapper/styles.module.scss

@@ -0,0 +1,17 @@
+.filter-result-count-and-sort-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: var(--core-space-xs);
+
+  &__count {
+    text-wrap: nowrap;
+    line-height: 3rem;
+    flex-shrink: 0;
+  }
+
+  &__sort {
+    flex: 1 1 0;
+  }
+}

package/lib/components/Filter/FilterResultCountAndSortWrapper/styles.module.scss.d.ts

@@ -0,0 +1,11 @@
+export type Styles = {
+  'filter-result-count-and-sort-wrapper': string;
+  'filter-result-count-and-sort-wrapper__count': string;
+  'filter-result-count-and-sort-wrapper__sort': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/Filter/FilterSearch/FilterSearch.d.ts

@@ -0,0 +1,19 @@
+import { HNDesignsystemFilter } from '../../../resources/Resources';
+export interface FilterSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'value' | 'onChange'> {
+    /** Adds custom classes to the component */
+    className?: string;
+    /** The value given by the user in the input field */
+    value: string | undefined;
+    /** onChange handler for the input field */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** Props for the search button */
+    buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Props for the clear button */
+    clearButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Texts if overriding SOT */
+    resources?: Partial<HNDesignsystemFilter>;
+    /** Ref passed to the input element */
+    ref?: React.Ref<HTMLInputElement | null>;
+}
+declare const FilterSearch: React.FC<FilterSearchProps>;
+export default FilterSearch;

package/lib/components/Filter/FilterSearch/styles.module.scss

@@ -0,0 +1,181 @@
+@use 'sass:map';
+@use '../../../scss/breakpoints' as breakpoints;
+@use '../../../scss/screen-reader' as sr;
+@import '../../../scss/supernova/styles/spacers.css';
+
+.filter-search {
+  &__wrapper {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    align-items: center;
+  }
+
+  &__input-wrapper {
+    grid-column: 1 / 3;
+    grid-row: 1;
+
+    &:hover {
+      cursor: text;
+    }
+  }
+
+  &__input {
+    position: relative;
+    height: 2rem;
+    width: 100%;
+    border-radius: 100px 0 0 100px;
+    border: 2px solid var(--color-base-border-onlight-emphasized);
+    background-color: var(--core-color-white);
+    padding: 0.375rem 1rem;
+    padding-right: 2.75rem;
+    text-overflow: ellipsis;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      height: 2.75rem;
+    }
+
+    &:not(:disabled)::placeholder {
+      color: var(--color-base-text-onlight);
+    }
+
+    &--hovered,
+    &:hover,
+    &:active {
+      outline: 1px solid var(--color-base-border-onlight-emphasized);
+      background-color: var(--core-color-neutral-50);
+      z-index: 1;
+    }
+
+    &:focus-visible {
+      border-color: var(--color-action-border-onlight-focus);
+      outline: 2px solid var(--color-action-border-onlight-focus);
+      z-index: 1;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      border: 2px dashed var(--color-disabled-border);
+      outline: none;
+      color: var(--color-disabled-text);
+      background-color: transparent;
+    }
+
+    &__label {
+      @include sr.sr-only;
+    }
+  }
+
+  &__search-button,
+  &__clear-button {
+    cursor: pointer;
+    outline: unset;
+    border: unset;
+    background-color: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+
+    svg {
+      fill: var(--color-action-graphics-onlight);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+
+      svg {
+        fill: var(--color-disabled-graphics);
+      }
+    }
+  }
+
+  &__search-button {
+    grid-column: 3;
+    grid-row: 1;
+    width: 2.75rem;
+    height: 2.75rem;
+    margin-left: -2px;
+    background-color: transparent;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      width: 3rem;
+    }
+
+    &--inner {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 2.75rem;
+      height: 2rem;
+      background-color: var(--core-color-white);
+      border: 2px solid var(--color-base-border-onlight-emphasized);
+      border-radius: 0 100px 100px 0;
+      padding-right: 0.3125rem;
+
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        height: 2.75rem;
+        width: 3rem;
+      }
+
+      :disabled > & {
+        border: 2px dashed var(--color-disabled-border);
+        background: transparent;
+      }
+
+      :hover > &:not(:disabled > &),
+      :active > &:not(:disabled > &) {
+        outline: 1px solid var(--color-base-border-onlight-emphasized);
+      }
+
+      :hover > &:not(:disabled > &) {
+        background-color: var(--core-color-neutral-50);
+      }
+
+      :active > &:not(:disabled > &) {
+        background-color: var(--core-color-neutral-100);
+      }
+
+      :focus-visible > &:not(:disabled > &) {
+        border-color: var(--color-action-border-onlight-focus);
+        outline: 2px solid var(--color-action-border-onlight-focus);
+        z-index: 1;
+      }
+
+      svg {
+        margin-left: 0.5rem;
+
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+          margin-left: 0.0625rem;
+        }
+      }
+    }
+  }
+
+  &__clear-button {
+    position: relative;
+    grid-column: 2;
+    grid-row: 1;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 0.375rem;
+    border-radius: 100%;
+    z-index: 1;
+
+    &:hover:not(:disabled) {
+      background-color: var(--core-color-neutral-50);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--core-color-neutral-100);
+    }
+
+    &:focus-visible:not(:disabled) {
+      outline: 4px solid var(--color-action-border-onlight-focus);
+    }
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+}

package/lib/components/Filter/FilterSearch/styles.module.scss.d.ts

@@ -0,0 +1,16 @@
+export type Styles = {
+  'filter-search__clear-button': string;
+  'filter-search__input': string;
+  'filter-search__input__label': string;
+  'filter-search__input--hovered': string;
+  'filter-search__input-wrapper': string;
+  'filter-search__search-button': string;
+  'filter-search__search-button--inner': string;
+  'filter-search__wrapper': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/Filter/FilterSort/FilterSort.d.ts

@@ -0,0 +1,8 @@
+import { HNDesignsystemFilter } from '../../../resources/Resources';
+import { SelectProps } from '../../Select';
+export interface FilterSortProps extends SelectProps {
+    /** Texts if overriding SOT */
+    resources?: Partial<HNDesignsystemFilter>;
+}
+declare const FilterSort: React.FC<FilterSortProps>;
+export default FilterSort;

package/lib/components/Filter/FilterSort/styles.module.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use '../../../scss/breakpoints' as breakpoints;
+@import '../../../scss/supernova/styles/spacers.css';
+
+.select {
+  select {
+    outline: none;
+    text-align: right;
+    color: var(--color-action-text-onlight);
+    padding-right: 3rem;
+    height: 2.75rem;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      height: 3rem;
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--core-space-4xs);
+  }
+
+  &__label {
+    margin-bottom: 0;
+  }
+}