@helsenorge/datepicker 13.4.0 → 13.6.0

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

@@ -0,0 +1,277 @@
+@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';
+
+.date-picker {
+  --input-height: 2.75rem;
+
+  padding-right: 0.25rem;
+  border: 2px solid var(--color-base-border-onlight-emphasized);
+  display: inline-flex;
+  vertical-align: top;
+  height: var(--input-height);
+  box-sizing: content-box;
+  width: 7rem;
+  cursor: text;
+
+  @supports not (field-sizing: content) {
+    width: 8rem;
+  }
+
+  &--with-clear-button {
+    width: 9rem;
+
+    @supports not (field-sizing: content) {
+      width: 10rem;
+    }
+  }
+
+  &--time {
+    width: 4.5rem;
+
+    @supports not (field-sizing: content) {
+      width: 5.5rem;
+    }
+
+    &--with-clear-button {
+      width: 6rem;
+
+      @supports not (field-sizing: content) {
+        width: 7rem;
+      }
+    }
+  }
+
+  &__inputs {
+    display: inline-flex;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.1rem;
+    padding: 0.6rem;
+
+    @include breakpoints.tiny-screens-media-query {
+      padding: 0.2rem;
+    }
+  }
+
+  &:has(:hover) {
+    box-shadow: 0 0 0 1px var(--color-base-border-onlight-emphasized);
+  }
+
+  &:has(:focus-visible):not(.date-picker--clear-button-focused) {
+    border-color: black;
+    box-shadow: 0 0 0 2px black;
+  }
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    // Same as Input component
+    --input-height: 3rem;
+  }
+}
+
+.date-field {
+  all: unset;
+
+  &__soft-error-text {
+    color: var(--color-notification-text-error);
+
+    @include fonts.sublabel-subdued;
+
+    margin-top: 0.75rem;
+  }
+}
+
+.legend {
+  @include fonts.label;
+
+  margin-bottom: 8px;
+
+  &__sublabel {
+    @include fonts.sublabel-subdued;
+
+    color: var(--color-base-text-onlight-subdued);
+  }
+}
+
+.date-segment {
+  border: none;
+  outline: none;
+  font-size: 1rem;
+  text-align: left;
+  min-width: 0.5em;
+  max-width: 3em;
+  field-sizing: content;
+  padding: 1px;
+  padding-top: 2px;
+
+  @supports not (field-sizing: content) {
+    width: 3.4ch;
+  }
+
+  &--year {
+    @supports not (field-sizing: content) {
+      width: 5ch;
+    }
+  }
+
+  &--error {
+    text-decoration: underline;
+    color: var(--color-notification-text-error);
+  }
+
+  &:hover {
+    border-radius: 4px;
+    background-color: var(--core-color-neutral-50);
+  }
+
+  &:focus {
+    border-radius: 4px;
+    background-color: var(--core-color-blueberry-100);
+  }
+
+  &::placeholder {
+    color: var(--color-placeholder-text-onlight);
+  }
+}
+
+.calendar-button {
+  // Same as Input component
+  --button-size: 2.75rem;
+
+  width: var(--button-size);
+  height: var(--button-size);
+  background: transparent;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--color-base-border-onlight-emphasized);
+  border-left: none;
+  padding: 0;
+  cursor: pointer;
+  display: inline-flex;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    // Same as Input component
+    --button-size: 3rem;
+  }
+
+  &: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);
+  }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  svg {
+    fill: var(--color-action-graphics-onlight);
+  }
+}
+
+.clear-button {
+  --button-size: 2.75rem;
+
+  width: var(--button-size);
+  height: var(--button-size);
+  border: none;
+  background: transparent;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  display: inline-flex;
+  position: relative;
+  right: 4px;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    --button-size: 3rem;
+  }
+
+  &__placeholder {
+    --button-size: 2.75rem;
+
+    width: var(--button-size);
+    height: var(--button-size);
+    display: inline-flex;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      --button-size: 3rem;
+    }
+  }
+
+  &:hover {
+    &::after {
+      content: '';
+      position: absolute;
+      border-radius: 100%;
+      background: var(--core-color-neutral-50);
+      width: 2rem;
+      height: 2rem;
+      z-index: 1;
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    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 {
+    border: none;
+    outline: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      border-radius: 100%;
+      outline: 2px solid var(--color-action-border-onlight-focus);
+      width: 2rem;
+      height: 2rem;
+      z-index: 1;
+    }
+  }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  svg {
+    fill: var(--color-action-graphics-onlight);
+    z-index: 2;
+  }
+}

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

@@ -0,0 +1,24 @@
+export type Styles = {
+  'calendar-button': string;
+  'clear-button': string;
+  'clear-button__placeholder': string;
+  'date-field': string;
+  'date-field__soft-error-text': string;
+  'date-picker': string;
+  'date-picker__inputs': string;
+  'date-picker--clear-button-focused': string;
+  'date-picker--time': string;
+  'date-picker--time--with-clear-button': string;
+  'date-picker--with-clear-button': string;
+  'date-segment': string;
+  'date-segment--error': string;
+  'date-segment--year': string;
+  legend: string;
+  legend__sublabel: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

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

@@ -0,0 +1,9 @@
+.range-date-pickers {
+  display: flex;
+  flex-flow: column;
+  gap: 1.5rem;
+
+  > * {
+    min-width: 225px;
+  }
+}

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

@@ -0,0 +1,9 @@
+export type Styles = {
+  'range-date-pickers': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/Unsafe_DatePicker/TimeInput/TimeInputInternal.d.ts

@@ -0,0 +1,23 @@
+import { HNDesignsystemUnsafe_DatePicker } from '../../../resources/Resources';
+export interface TimeInputInternalProps {
+    /** Currently given date, in format hh:mm */
+    value?: string;
+    /** Callback for change in date */
+    onChange?: (value: string) => void;
+    /** Callback for blur on input field */
+    onBlur?: (value: string) => void;
+    /** 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 of the input field, for connecting labels */
+    id?: string;
+}
+declare const TimeInputInternal: ({ value, onChange, onBlur, id, setErrorText, resources, withClearButton, ["aria-describedby"]: ariaDescribedBy, ["aria-labelledby"]: ariaLabelledBy, }: TimeInputInternalProps) => React.ReactNode;
+export default TimeInputInternal;

package/lib/components/Unsafe_DatePicker/TimeInput/Unsafe_TimeInput.d.ts

@@ -0,0 +1,25 @@
+import { HNDesignsystemDatePicker } from '../../../resources/Resources';
+export interface Unsafe_TimeInputProps {
+    /** Currently given time, in format hh:mm */
+    value?: string;
+    /** Label of the input */
+    label?: React.ReactNode;
+    /** Id of the input field, for connecting labels */
+    id?: string;
+    /** Callback for change in date */
+    onChange?: (value: string) => void;
+    /** Callback for blur on input field */
+    onBlur?: (value: string) => void;
+    /** Callback for setting error text when validating */
+    errorText?: string;
+    /** Wether or not to shw a clear button when there is content in the input */
+    withClearButton?: boolean;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemDatePicker>;
+    /** Sets aria-describedby on the input, for connecting labels */
+    ['aria-describedby']?: string;
+    /** Sets aria-labelledby on the input, for connecting labels */
+    ['aria-labelledby']?: string;
+}
+declare const Unsafe_TimeInput: ({ value, onChange, onBlur, errorText, id, label, resources, withClearButton, ["aria-describedby"]: ariaDescribedBy, ["aria-labelledby"]: ariaLabelledBy, }: Unsafe_TimeInputProps) => React.ReactNode;
+export default Unsafe_TimeInput;

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

@@ -0,0 +1,16 @@
+import { Unsafe_TimeInputProps } from './TimeInput/Unsafe_TimeInput';
+import { Unsafe_DatePickerProps } from './Unsafe_DatePicker';
+export interface Unsafe_DateAndTimeProps {
+    /** Currently given date */
+    value?: Date;
+    /** Callback for change on the given date */
+    onChange?: (value: Date | undefined) => void;
+    /** Legend for labelling both fields */
+    legend?: React.ReactNode;
+    /** Errortext for validation errors */
+    errorText?: string;
+    datepickerProps?: Unsafe_DatePickerProps;
+    timeInputProps?: Unsafe_TimeInputProps;
+}
+declare const Unsafe_DateAndTime: ({ value, onChange, legend, errorText, datepickerProps, timeInputProps, }: Unsafe_DateAndTimeProps) => React.ReactNode;
+export default Unsafe_DateAndTime;

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

@@ -0,0 +1,18 @@
+.date-and-time {
+  &--fieldset {
+    //   overstyr fieldset styling fra browser
+    all: unset;
+
+    // styling med legend
+    // @todo: trengs dette?
+    display: flex;
+    flex-flow: column;
+    gap: 1.5rem;
+  }
+
+  &__fields {
+    display: flex;
+    flex-direction: row;
+    gap: 0.75rem;
+  }
+}

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

@@ -0,0 +1,10 @@
+export type Styles = {
+  'date-and-time__fields': string;
+  'date-and-time--fieldset': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

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

@@ -0,0 +1,26 @@
+import { BaseDayPickerProps } from './BaseDayPicker/BaseDayPicker';
+export interface Unsafe_DatePickerProps extends Omit<BaseDayPickerProps, 'selectedDate' | 'onDateChange'> {
+    /** Currently given date with type Date */
+    value?: Date;
+    /** Callback for change on the given date */
+    onChange?: (value: Date | undefined) => void;
+    /** Callback for bluring the input field */
+    onBlur?: (value: Date | undefined) => void;
+    /** Label of the input */
+    label?: React.ReactNode;
+    /** Id of the input field, for connecting labels */
+    id?: string;
+    /** Error text for the input field */
+    errorText?: string;
+    /** Wether or not to shw a clear button when there is content in the input */
+    withClearButton?: boolean;
+    /** Sets aria-describedby on the input, for connecting labels */
+    ['aria-describedby']?: string;
+    /** Sets aria-labelledby on the input, for connecting labels */
+    ['aria-labelledby']?: string;
+}
+declare const Unsafe_DatePicker: {
+    ({ value, onChange, onBlur, label, id, errorText, withClearButton, ["aria-describedby"]: ariaDescribedBy, ["aria-labelledby"]: ariaLabelledBy, resources, ...baseDayPickerProps }: Unsafe_DatePickerProps): JSX.Element;
+    displayName: string;
+};
+export default Unsafe_DatePicker;

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

@@ -0,0 +1,9 @@
+import { Unsafe_DatePickerProps } from './Unsafe_DatePicker';
+export interface ISODateInputProps extends Omit<Unsafe_DatePickerProps, 'value' | 'onChange'> {
+    /** Currently given date, given as ISO string  */
+    value?: string;
+    /** Callback for change in the given date as ISO string */
+    onChange?: (dateValue: string) => void;
+}
+declare const Unsafe_ISODatePicker: ({ value, onChange, ...baseDateInputProps }: ISODateInputProps) => JSX.Element;
+export default Unsafe_ISODatePicker;

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { Unsafe_DatePickerProps } from './Unsafe_DatePicker';
+export interface RangeDateInputsProps {
+    /** The 'from' date. Must be DateInput */
+    from: React.ReactElement<Unsafe_DatePickerProps>;
+    /** The 'to' date. Must be DateInput */
+    to: React.ReactElement<Unsafe_DatePickerProps>;
+    /** Callback when the date range changes with validation result */
+    onRangeChange?: (from: Date | undefined, to: Date | undefined, isValid: boolean) => void;
+}
+declare const Unsafe_RangeDatePickers: React.FC<RangeDateInputsProps>;
+export default Unsafe_RangeDatePickers;

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

@@ -0,0 +1,11 @@
+import { Modifiers, Matcher } from 'react-day-picker';
+import { default as BaseDayPicker, BaseDayPickerProps } from './BaseDayPicker/BaseDayPicker';
+import { default as Unsafe_TimeInput } from './TimeInput/Unsafe_TimeInput';
+import { default as Unsafe_DateAndTime } from './Unsafe_DateAndTime';
+import { default as Unsafe_DatePicker } from './Unsafe_DatePicker';
+import { default as Unsafe_ISODatePicker } from './Unsafe_ISODatePicker';
+export { BaseDayPicker as Unsafe_DatePickerStandalone };
+export type { Modifiers, Matcher };
+export type { BaseDayPickerProps as Unsafe_DatePickerStandaloneProps };
+export { Unsafe_DatePicker, Unsafe_ISODatePicker, Unsafe_TimeInput, Unsafe_DateAndTime };
+export default Unsafe_DatePicker;