@helsenorge/datepicker 13.4.0 → 13.5.0

package/lib/components/Unsafe_DatePicker/BaseDayPicker/BaseDayPicker.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { Locale } from 'date-fns';
+import { DayPickerProps, Labels, Matcher } from 'react-day-picker';
+import { HNDesignsystemUnsafe_DatePicker } from '../../../resources/Resources';
+export type DatePickerModifiers = {
+    emphasized?: Date[] | Matcher[];
+    partiallyBooked?: Date[] | Matcher[];
+    fullyBooked?: Date[] | Matcher[];
+    disabled?: Date[] | Matcher[];
+    [key: string]: Date[] | Matcher[] | undefined;
+};
+export interface BaseDayPickerProps extends Pick<DayPickerProps, 'startMonth' | 'endMonth' | 'captionLayout' | 'footer' | 'fixedWeeks' | 'animate'> {
+    /** The currenlty selected date in the calendar */
+    selectedDate?: Date;
+    /** Callback for change in selected date */
+    onDateChange?: (date: Date | undefined) => void;
+    /** Show loading state */
+    isLoading?: boolean;
+    /** Modifiers for days. Extended from react-day-picker default modifiers  */
+    modifiers?: DatePickerModifiers;
+    /** If a button sohuld be shown in the footer that switches view to current month */
+    showGoToTodayButton?: boolean;
+    /** Locale used in the calendar texts. Default is nb, norwegian bokmål */
+    localeForCalendar?: Locale;
+    /** Functions used in ReactDayPicker to customize aria labels on different elements */
+    labelsForCalendar?: Partial<Labels>;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemUnsafe_DatePicker>;
+}
+declare const BaseDayPicker: (props: BaseDayPickerProps) => React.ReactNode;
+export default BaseDayPicker;

package/lib/components/Unsafe_DatePicker/BaseDayPicker/BaseDayPicker.module.scss

@@ -0,0 +1,446 @@
+/* stylelint-disable custom-property-pattern */
+@use 'sass:map';
+@use '@helsenorge/designsystem-react/scss/font-mixins' as fonts;
+@use '@helsenorge/designsystem-react/scss/breakpoints' as breakpoints;
+@import '@helsenorge/designsystem-react/scss/supernova/styles/colors';
+
+// todo: active states når tokens er brukt i figma
+
+.root_override {
+  --rdp-day_button-border-radius: 0;
+  --rdp-day_button-height: 2.375rem;
+  --rdp-day_button-width: 2.375rem;
+  --rdp-day-width: calc(2.375rem + 0.375rem); // day width + gap 3px
+  --rdp-day-height: calc(2.375rem + 0.375rem); // day width + gap 3px
+  --rdp-nav_button-width: 2.75rem;
+  --rdp-nav_button-height: 2.75rem;
+  --rdp-dropdown-gap: 0;
+
+  width: fit-content;
+  border: 1px solid var(--color-action-border-onlight);
+  padding: 0.5rem;
+  background-color: var(--color-base-background-white);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
+    --rdp-day_button-height: 2.75rem;
+    --rdp-day_button-width: 2.75rem;
+    --rdp-day-width: calc(2.75rem + 0.375rem); // day width + gap 6px
+    --rdp-day-height: calc(2.75rem + 0.375rem); // day width + gap 6px
+
+    padding: 0.875rem;
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    --rdp-day_button-height: 2.875rem;
+    --rdp-day_button-width: 2.875rem;
+    --rdp-day-width: calc(2.875rem + 0.375rem); // day width + gap 6px
+    --rdp-day-height: calc(2.875rem + 0.375rem); // day width + gap 6px
+    --rdp-nav_button-width: 3rem;
+    --rdp-nav_button-height: 3rem;
+
+    padding: 1rem;
+  }
+}
+
+@mixin strikethrough-line {
+  text-decoration: line-through;
+  text-decoration-color: var(--color-disabled-border);
+}
+
+@mixin no-strikethrough-line {
+  text-decoration: unset;
+}
+
+@mixin focus-border {
+  outline: 4px solid var(--color-action-border-onlight-focus);
+}
+
+@mixin day-indicator($color) {
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: if($color == 'blue', var(--color-action-graphics-onlight), var(--color-action-graphics-ondark));
+    border-radius: 100%;
+    width: 6px;
+    height: 6px;
+    transform: translateY(calc(0.1875em + 0.5rem));
+  }
+}
+
+/* by design */
+/* stylelint-disable no-descending-specificity */
+.date {
+  &--default {
+    .custom_day_button {
+      @include fonts.label;
+
+      color: var(--color-action-graphics-onlight);
+
+      &:hover:not(:disabled) {
+        background: var(--color-action-background-transparent-onlight-hover);
+      }
+
+      &:focus-visible {
+        @include focus-border;
+      }
+    }
+  }
+
+  &--emphasized {
+    .custom_day_button {
+      color: var(--color-action-graphics-emphasized-onlight);
+      border: 1px solid var(--color-action-border-onlight);
+      background: var(--color-action-background-transparent-onlight-hover);
+
+      &:hover:not(:disabled) {
+        background: var(--color-action-background-transparent-onlight-active);
+      }
+
+      &:focus-visible {
+        @include focus-border;
+      }
+    }
+  }
+
+  &--today {
+    .custom_day_button {
+      @include day-indicator('blue');
+    }
+  }
+
+  &--disabled {
+    .custom_day_button {
+      @include strikethrough-line;
+      @include fonts.label-subdued;
+
+      color: var(--color-disabled-text);
+    }
+  }
+
+  &--partial {
+    .custom_day_button {
+      @include strikethrough-line;
+
+      color: var(--color-action-graphics-emphasized-onlight);
+      border: 1px solid var(--color-action-border-onlight);
+      background: linear-gradient(180deg, transparent 50%, var(--color-action-background-transparent-onlight-hover) 50%);
+
+      &:hover:not(:disabled) {
+        background: linear-gradient(180deg, transparent 50%, var(--color-action-background-transparent-onlight-active) 50%);
+      }
+
+      &:focus-visible {
+        @include focus-border;
+      }
+    }
+  }
+
+  &--fully {
+    .custom_day_button {
+      @include strikethrough-line;
+      @include fonts.label-subdued;
+
+      border: 1px dashed var(--color-disabled-border);
+      color: var(--color-disabled-text);
+      background-color: unset;
+
+      &:focus-visible {
+        @include focus-border;
+      }
+
+      &:hover:not(:disabled) {
+        background: var(--core-color-neutral-100);
+      }
+    }
+  }
+
+  &--selected {
+    .custom_day_button {
+      --rdp-day_button-border-radius: 100%;
+
+      @include no-strikethrough-line;
+
+      background: var(--color-action-graphics-onlight);
+      color: var(--color-base-text-ondark);
+
+      &:hover:not(:disabled) {
+        background: var(--color-action-graphics-onlight-hover);
+      }
+
+      &:focus-visible {
+        @include focus-border;
+
+        border: 1px solid var(--color-action-border-ondark-focus);
+      }
+
+      &:active {
+        background-color: var(--color-action-background-onlight-active);
+      }
+    }
+  }
+
+  &--selected.date--today {
+    .custom_day_button {
+      @include day-indicator('white');
+    }
+  }
+}
+
+.custom_month_caption {
+  text-transform: capitalize;
+}
+
+.custom_chevron {
+  fill: var(--color-action-graphics-onlight);
+}
+
+.custom_nav_button {
+  border: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &__circle {
+    border: 1px solid var(--color-action-border-onlight);
+    border-radius: 100%;
+    width: 2rem;
+    height: 2rem;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      width: 2.375rem;
+      height: 2.375rem;
+    }
+
+    :focus-visible > & {
+      outline: 2px solid var(--color-action-border-onlight-focus);
+    }
+
+    // todo: fix aria-disabled
+    :hover:not([aria-disabled='true']) > & {
+      background: var(--core-color-neutral-50);
+    }
+
+    :active:not([aria-disabled='true']) > & {
+      background: var(--core-color-neutral-100);
+    }
+
+    svg {
+      // sentrer ikonet vertikalt i sirkelen
+      // 24px is IconSize.XXSmall
+      margin-top: calc((2rem - 24px - 1px) / 2);
+      margin-left: -1px;
+
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        margin-top: -1px;
+      }
+    }
+  }
+}
+
+.loading-overlay {
+  position: absolute;
+  inset: 2.75rem 0 0;
+  background-color: var(--color-action-graphics-ondark);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.datepicker-footer {
+  max-width: 19.75rem;
+  margin-top: 0.25rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
+    max-width: 22.375rem;
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    max-width: 24.25rem;
+  }
+
+  &--with-today-button {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 0 0.25rem;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      gap: 0 0.5rem;
+    }
+  }
+}
+
+.custom_caption-label {
+  @include fonts.body;
+
+  font-weight: 400;
+  align-items: center;
+}
+
+.dropdown_container {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.1875rem 0.25rem 0.1875rem 1rem;
+  background-color: var(--core-color-white);
+  border: none;
+  font-size: 1.125rem;
+  line-height: 150%;
+  font-weight: 400;
+  margin: 2px; // gir plass til fokusstrek
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 140%;
+    padding: 0.3125rem 0.25rem 0.3125rem 1rem;
+  }
+
+  &:hover {
+    background: var(--core-color-neutral-100);
+  }
+
+  &:active {
+    background: var(--color-action-background-transparent-onlight-active);
+  }
+}
+
+.dropdown_root_custom {
+  &:focus-within {
+    .dropdown_container {
+      outline: 4px solid var(--color-action-border-onlight-focus);
+    }
+  }
+
+  &:hover {
+    .dropdown_container {
+      background: var(--core-color-neutral-100);
+    }
+  }
+}
+
+.dropdown_label {
+  @include fonts.input-text;
+
+  font-weight: 600;
+}
+
+.dropdown_chevron {
+  fill: var(--color-action-graphics-onlight);
+}
+
+.clear-button {
+  --button-size: calc(2.75rem);
+
+  // position inside input field and 2px for centering adjusted for border
+  translate: -3rem 2px;
+  position: absolute;
+  width: var(--button-size);
+  height: var(--button-size);
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    --button-size: calc(3rem);
+
+    // position inside input field and 2px for centering adjusted for border
+    translate: -3.25rem 2px;
+  }
+
+  &:hover {
+    &::after {
+      content: '';
+      position: absolute;
+      border-radius: 100%;
+      background: var(--core-color-neutral-50);
+      width: 2rem;
+      height: 2rem;
+      z-index: 1;
+    }
+
+    svg {
+      fill: var(--color-action-graphics-onlight-hover);
+    }
+  }
+
+  &:active {
+    &::after {
+      content: '';
+      position: absolute;
+      border-radius: 100%;
+      background: var(--core-color-neutral-100);
+      width: 2rem;
+      height: 2rem;
+      z-index: 1;
+    }
+  }
+
+  &:focus-visible {
+    @include focus-border;
+  }
+
+  svg {
+    fill: var(--color-action-graphics-onlight);
+    z-index: 2;
+  }
+}
+
+.calendar-button {
+  // Same as Input component
+  --button-size: calc(2.75rem + 0.25rem); // 44px height + 4px border
+
+  width: var(--button-size);
+  height: var(--button-size);
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--color-base-border-onlight-emphasized);
+  border-left: none;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    // Same as Input component
+    --button-size: calc(3rem + 0.25rem); // 48px height + 4px border
+  }
+
+  &:disabled {
+    border: 2px dashed var(--color-disabled-border);
+    border-left: none;
+
+    svg {
+      fill: var(--color-disabled-graphics);
+    }
+  }
+
+  &:hover:not(:disabled) {
+    background: var(--core-color-neutral-50);
+
+    svg {
+      fill: var(--color-action-graphics-onlight-hover);
+    }
+  }
+
+  &:active:not(:disabled) {
+    background: var(--core-color-neutral-100);
+
+    svg {
+      fill: var(--color-action-graphics-emphasized-onlight);
+    }
+  }
+
+  &:focus-visible:not(:disabled) {
+    outline: 2px solid var(--color-action-border-onlight-focus);
+    border-color: var(--color-action-border-onlight-focus);
+
+    // hack to make focus border on left without moving icon
+    box-shadow: -2px 0 0 2px var(--color-action-border-onlight-focus);
+  }
+
+  svg {
+    fill: var(--color-action-graphics-onlight);
+  }
+}

package/lib/components/Unsafe_DatePicker/BaseDayPicker/BaseDayPicker.module.scss.d.ts

@@ -0,0 +1,31 @@
+export type Styles = {
+  'calendar-button': string;
+  'clear-button': string;
+  'custom_caption-label': string;
+  custom_chevron: string;
+  custom_day_button: string;
+  custom_month_caption: string;
+  custom_nav_button: string;
+  custom_nav_button__circle: string;
+  'date--default': string;
+  'date--disabled': string;
+  'date--emphasized': string;
+  'date--fully': string;
+  'date--partial': string;
+  'date--selected': string;
+  'date--today': string;
+  'datepicker-footer': string;
+  'datepicker-footer--with-today-button': string;
+  dropdown_chevron: string;
+  dropdown_container: string;
+  dropdown_label: string;
+  dropdown_root_custom: string;
+  'loading-overlay': string;
+  root_override: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/Unsafe_DatePicker/BaseDayPicker/CustomComponents.d.ts

@@ -0,0 +1,6 @@
+import { default as React, ButtonHTMLAttributes } from 'react';
+import { CaptionLabelProps, DropdownProps } from 'react-day-picker';
+export declare const CustomPreviousButton: (props: ButtonHTMLAttributes<HTMLButtonElement>) => React.JSX.Element;
+export declare const CustomNextButton: (props: ButtonHTMLAttributes<HTMLButtonElement>) => React.JSX.Element;
+export declare const CustomDropdown: (props: DropdownProps) => React.JSX.Element;
+export declare const CustomCaptionLabel: (props: CaptionLabelProps) => React.JSX.Element;

package/lib/components/Unsafe_DatePicker/BaseDayPicker/utils.d.ts

@@ -0,0 +1 @@
+export declare function matchesDayObjectMatcher(date: Date, matcher: Record<string, any>): boolean;

package/lib/components/Unsafe_DatePicker/DateInputInternal.d.ts

@@ -0,0 +1,28 @@
+import { HNDesignsystemUnsafe_DatePicker } from '../../resources/Resources';
+export interface DateInputInternalProps {
+    /** Currently given date, in norwegian format dd.mm.yyyy */
+    value?: string;
+    /** Callback for change in date */
+    onChange?: (value: string) => void;
+    /** Callback for blur on input field */
+    onBlur?: (value: string) => void;
+    /** Id for legend, for connecting legend to input */
+    legendId: string;
+    /** Callback for setting error text when validating */
+    setErrorText?: (text: string) => void;
+    /** Wether or not to shw a clear button when there is content in the input */
+    withClearButton?: boolean;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemUnsafe_DatePicker>;
+    /** Sets aria-describedby on the input, for connecting labels */
+    ['aria-describedby']?: string;
+    /** Sets aria-labelledby on the input, for connecting labels */
+    ['aria-labelledby']?: string;
+    /** Id for input, for connecting labels */
+    inputId?: string;
+}
+declare const DateInputInternal: {
+    ({ value, onChange, onBlur, inputId, legendId, setErrorText, resources, withClearButton, ["aria-describedby"]: ariaDescribedBy, ["aria-labelledby"]: ariaLabelledBy, }: DateInputInternalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DateInputInternal;