@helsenorge/designsystem-react 14.6.0 → 14.7.1

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/FilterLinkList/index.d.ts

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

package/lib/components/Filter/FilterLinkList/index.js

@@ -0,0 +1,3 @@
+import { r as Link, t as FilterLinkList } from "../../../FilterLinkList.js";
+import { t as FilterLinkList_default } from "../../../FilterLinkList2.js";
+export { FilterLinkList, Link, FilterLinkList_default as default };

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/FilterOverviewLinkList/index.d.ts

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

package/lib/components/Filter/FilterOverviewLinkList/index.js

@@ -0,0 +1,2 @@
+import { t as FilterOverviewLinkList_default } from "../../../FilterOverviewLinkList.js";
+export { FilterOverviewLinkList_default as default };

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/index.d.ts

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

package/lib/components/Filter/FilterOverviewSearch/index.js

@@ -0,0 +1,2 @@
+import { t as FilterOverviewSearch_default } from "../../../FilterOverviewSearch.js";
+export { FilterOverviewSearch_default as default };

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/index.d.ts

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

package/lib/components/Filter/FilterResultCountAndSortWrapper/index.js

@@ -0,0 +1,2 @@
+import { t as FilterResultCountAndSortWrapper_default } from "../../../FilterResultCountAndSortWrapper.js";
+export { FilterResultCountAndSortWrapper_default as default };

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/index.d.ts

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

package/lib/components/Filter/FilterSearch/index.js

@@ -0,0 +1,2 @@
+import { t as FilterSearch_default } from "../../../FilterSearch2.js";
+export { FilterSearch_default as default };

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/index.d.ts

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

package/lib/components/Filter/FilterSort/index.js

@@ -0,0 +1,2 @@
+import { t as FilterSort_default } from "../../../FilterSort.js";
+export { FilterSort_default as default };

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

@@ -0,0 +1,33 @@
+@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;
+    }
+  }
+
+  select option {
+    text-align: left;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--core-space-4xs);
+  }
+
+  &__label {
+    margin-bottom: 0;
+  }
+}

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

@@ -0,0 +1,11 @@
+export type Styles = {
+  select: string;
+  select__label: string;
+  select__wrapper: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

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

@@ -0,0 +1,17 @@
+import { FilterValues, UseFilterReturn } from '../useFilter';
+export interface GetFilterChipsArgs<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;
+    /** Called when a chip is clicked (f.ex. to open the drawer at that filter category) */
+    onChipClick: (key: keyof T, value: unknown) => void;
+    /** Called when a chip's close button is clicked. If not provided, defaults to filter.removeFilter */
+    onChipRemove?: (key: keyof T, value: unknown) => void;
+    /** Called when the overflow chip is clicked */
+    onOverflowChipClick: () => void;
+    /** Function for mapping if close button is shown on chip or not */
+    willShowCloseButton?: (key: keyof T, value?: unknown) => boolean;
+}
+declare function getFilterChips<T extends FilterValues>({ filter, getLabel, onChipClick, onChipRemove, onOverflowChipClick, willShowCloseButton, }: GetFilterChipsArgs<T>): React.ReactNode[];
+export default getFilterChips;

package/lib/components/Filter/getFilterChips/index.d.ts

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

package/lib/components/Filter/getFilterChips/index.js

@@ -0,0 +1,2 @@
+import { t as getFilterChips_default } from "../../../getFilterChips.js";
+export { getFilterChips_default as default };

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

@@ -0,0 +1,25 @@
+export { default as DrawerNavigation } from './DrawerNavigation';
+export * from './DrawerNavigation';
+export { default as FilterButton } from './FilterButton';
+export * from './FilterButton';
+export { default as FilterButtonAndChipsWrapper } from './FilterButtonAndChipsWrapper';
+export * from './FilterButtonAndChipsWrapper';
+export { default as FilterDrawer } from './FilterDrawer';
+export * from './FilterDrawer';
+export { default as FilterLinkList } from './FilterLinkList';
+export * from './FilterLinkList';
+export { default as FilterOverviewLinkList } from './FilterOverviewLinkList';
+export * from './FilterOverviewLinkList';
+export { default as FilterOverviewSearch } from './FilterOverviewSearch';
+export * from './FilterOverviewSearch';
+export { default as FilterResultCountAndSortWrapper } from './FilterResultCountAndSortWrapper';
+export * from './FilterResultCountAndSortWrapper';
+export { default as FilterSearch } from './FilterSearch';
+export * from './FilterSearch';
+export { default as FilterSort } from './FilterSort';
+export * from './FilterSort';
+export { default as getFilterChips } from './getFilterChips';
+export * from './getFilterChips';
+export * from './useFilter';
+export * from './useFilterDrawer';
+export * from './utils';