@navikt/ds-react 1.3.7 → 1.3.9

package/src/date/utils/labels.ts

@@ -0,0 +1,84 @@
+import { Labels, NavButtonLabel } from "react-day-picker";
+
+const labelNext: NavButtonLabel = (date, options) => {
+  switch (options?.locale?.code) {
+    case "nb":
+      return "Gå til neste måned";
+    case "nn":
+      return "Gå til neste månad";
+    case "en":
+      return "Go to next month";
+    default:
+      return "Gå til neste måned";
+  }
+};
+
+const labelPrevious: NavButtonLabel = (date, options) => {
+  switch (options?.locale?.code) {
+    case "nb":
+      return "Gå til forrige måned";
+    case "nn":
+      return "Gå til førre månad";
+    case "en":
+      return "Go to previous month";
+    default:
+      return "Gå til forrige måned";
+  }
+};
+
+export const labelYearDropdown = (locale: Locale) => {
+  switch (locale?.code) {
+    case "nb":
+      return "År";
+    case "nn":
+      return "År";
+    case "en":
+      return "Year";
+    default:
+      return "År";
+  }
+};
+
+export const labelMonthDropdown = (locale: Locale) => {
+  switch (locale?.code) {
+    case "nb":
+      return "Måned";
+    case "nn":
+      return "Månad";
+    case "en":
+      return "Month";
+    default:
+      return "Måned";
+  }
+};
+
+export const labelNextYear = (localeCode: string | undefined) => {
+  switch (localeCode) {
+    case "nb":
+      return "Gå til neste år";
+    case "nn":
+      return "Gå til neste år";
+    case "en-GB":
+      return "Go to next year";
+    default:
+      return "Gå til neste måned";
+  }
+};
+
+export const labelPrevYear = (localeCode: string | undefined): string => {
+  switch (localeCode) {
+    case "nb":
+      return "Gå til forrige år";
+    case "nn":
+      return "Gå til førre år";
+    case "en-GB":
+      return "Go to next year";
+    default:
+      return "Gå til neste år";
+  }
+};
+
+export const labels: Partial<Labels> = {
+  labelNext,
+  labelPrevious,
+};

package/src/date/utils/locale.ts

@@ -0,0 +1,15 @@
+import enGB from "date-fns/locale/en-GB";
+import nb from "date-fns/locale/nb";
+import nn from "date-fns/locale/nn";
+
+/** @private */
+export const getLocaleFromString = (locale: "nb" | "nn" | "en" = "nb") => {
+  switch (locale) {
+    case "nn":
+      return nn;
+    case "en":
+      return enGB;
+    default:
+      return nb;
+  }
+};

package/src/date/utils/navigation.ts

@@ -0,0 +1,292 @@
+import { setYear } from "date-fns";
+import { isMatch, Matcher } from "./is-match";
+
+export const nextEnabled = (
+  months,
+  key: string,
+  disabled: Matcher[],
+  currentMonth: Date,
+  setYearState: Function,
+  yearState: Date,
+  dropdownCaption: boolean,
+  fromDate?: Date,
+  toDate?: Date
+): Date => {
+  const currentIndex = currentMonth.getMonth();
+
+  if (key === "Home") {
+    const nextEnabled = nextOnRow(
+      currentIndex,
+      months,
+      yearState,
+      disabled,
+      "home"
+    );
+    if (nextEnabled) {
+      return nextEnabled;
+    }
+  }
+  if (key === "End") {
+    const nextEnabled = nextOnRow(
+      currentIndex,
+      months,
+      yearState,
+      disabled,
+      "end"
+    );
+    if (nextEnabled) {
+      return nextEnabled;
+    }
+  }
+  if (key === "PageUp") {
+    if (
+      !dropdownCaption ||
+      (fromDate && yearState.getFullYear() - 1 >= fromDate?.getFullYear())
+    ) {
+      setYearState(setYear(yearState, Number(yearState.getFullYear() - 1)));
+    }
+  }
+  if (key === "PageDown") {
+    if (
+      !dropdownCaption ||
+      (toDate && yearState.getFullYear() + 1 <= toDate?.getFullYear())
+    ) {
+      setYearState(setYear(yearState, Number(yearState.getFullYear() + 1)));
+    }
+  }
+  if (key === "ArrowRight") {
+    const nextMonth = loopForward(
+      currentIndex,
+      months,
+      yearState,
+      setYearState,
+      disabled,
+      false,
+      dropdownCaption,
+      fromDate,
+      toDate
+    );
+    if (nextMonth) {
+      return setYear(months[nextMonth.index], nextMonth.year);
+    }
+  }
+  if (key === "ArrowLeft") {
+    const prevMonth = loopBack(
+      currentIndex - 1,
+      months,
+      disabled,
+      yearState,
+      setYearState,
+      false,
+      dropdownCaption,
+      fromDate,
+      toDate
+    );
+    if (prevMonth) {
+      return setYear(months[prevMonth.index], prevMonth.year);
+    }
+  }
+  if (key === "ArrowDown") {
+    if (
+      months[currentIndex + 4] &&
+      !isMatch(
+        setYear(months[currentIndex + 4], yearState.getFullYear()),
+        disabled
+      )
+    ) {
+      return setYear(months[currentIndex + 4], yearState.getFullYear());
+    }
+
+    const fallbackNext = loopForward(
+      currentIndex,
+      months,
+      yearState,
+      setYearState,
+      disabled,
+      true,
+      dropdownCaption,
+      fromDate,
+      toDate
+    );
+
+    if (
+      fallbackNext &&
+      getRow(fallbackNext.index) !== getRow(currentIndex + 8)
+    ) {
+      return setYear(months[fallbackNext.index], fallbackNext.year);
+    }
+  }
+
+  if (key === "ArrowUp") {
+    if (
+      months[currentIndex - 4] &&
+      !isMatch(
+        setYear(months[currentIndex - 4], Number(yearState.getFullYear())),
+        disabled
+      )
+    )
+      return setYear(months[currentIndex - 4], Number(yearState.getFullYear()));
+    const fallbackPrev = loopBack(
+      currentIndex,
+      months,
+      disabled,
+      yearState,
+      setYearState,
+      true,
+      dropdownCaption,
+      fromDate,
+      toDate
+    );
+    if (fallbackPrev)
+      return setYear(months[fallbackPrev.index], fallbackPrev.year);
+  }
+  return currentMonth;
+};
+
+const loopBack = (
+  currentIndex: number,
+  months: Date[],
+  disabled: Matcher[],
+  yearState: Date,
+  setYearState: Function,
+  rowCheck: boolean,
+  dropdownCaption: boolean,
+  fromDate?: Date,
+  toDate?: Date
+): { index: number; year: number } | undefined => {
+  let currentYear = setYear(yearState, Number(yearState.getFullYear()));
+  for (let i = currentIndex; i >= -1; i--) {
+    if (i === -1) {
+      if (
+        isOutOfRange(
+          dropdownCaption,
+          setYear(currentYear, Number(currentYear.getFullYear() - 1)),
+          fromDate,
+          toDate
+        )
+      )
+        return;
+      currentYear = setYear(currentYear, Number(currentYear.getFullYear() - 1));
+      setYearState(currentYear);
+      i = 11;
+    }
+    const month = months[i];
+    const isDisabled = !isMatch(
+      setYear(month, Number(currentYear.getFullYear())),
+      disabled
+    );
+    if (rowCheck) {
+      if (isDisabled && getRow(i) !== getRow(currentIndex)) {
+        return { index: i, year: Number(currentYear.getFullYear()) };
+      }
+    } else {
+      if (isDisabled) {
+        return { index: i, year: Number(currentYear.getFullYear()) };
+      }
+    }
+  }
+};
+
+const loopForward = (
+  currentIndex: number,
+  months: Date[],
+  yearState: Date,
+  setYearState: Function,
+  disabled: Matcher[],
+  rowCheck: boolean,
+  dropdownCaption: boolean,
+  fromDate?: Date,
+  toDate?: Date
+): { index: number; year: number } | undefined => {
+  let currentYear = setYear(yearState, Number(yearState.getFullYear()));
+  for (let i = currentIndex + 1; i < months.length + 1; i++) {
+    if (i === 12) {
+      if (
+        isOutOfRange(
+          dropdownCaption,
+          setYear(currentYear, Number(currentYear.getFullYear() + 1)),
+          fromDate,
+          toDate
+        )
+      )
+        return;
+      currentYear = setYear(currentYear, Number(currentYear.getFullYear() + 1));
+      setYearState(currentYear);
+      i = 0;
+    }
+    const month = months[i];
+    const isDisabled = !isMatch(
+      setYear(month, Number(currentYear.getFullYear())),
+      disabled
+    );
+    if (rowCheck) {
+      if (isDisabled && getRow(i) !== getRow(currentIndex)) {
+        return { index: i, year: Number(currentYear.getFullYear()) };
+      }
+    } else {
+      if (isDisabled) {
+        return { index: i, year: Number(currentYear.getFullYear()) };
+      }
+    }
+  }
+};
+
+const getRow = (index: number): number => {
+  if (index >= 0 && index <= 3) return 1;
+  if (index >= 4 && index <= 7) return 2;
+  return 3;
+};
+
+const isOutOfRange = (
+  dropdownCaption: boolean,
+  year: Date,
+  fromDate?: Date,
+  toDate?: Date
+): boolean => {
+  if (
+    dropdownCaption &&
+    fromDate &&
+    toDate &&
+    (year.getFullYear() < fromDate?.getFullYear() ||
+      year.getFullYear() > toDate?.getFullYear())
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+const nextOnRow = (
+  currentIndex: number,
+  months,
+  yearState: Date,
+  disabled: Matcher[],
+  mode: "home" | "end"
+) => {
+  const row = getRow(currentIndex);
+  let monthsOfRow;
+
+  switch (row) {
+    case 1:
+      monthsOfRow = months.slice(0, 4);
+      break;
+    case 2:
+      monthsOfRow = months.slice(4, 8);
+      break;
+    case 3:
+      monthsOfRow = months.slice(8, 12);
+      break;
+    default:
+      break;
+  }
+
+  if (mode === "end") monthsOfRow = monthsOfRow.reverse();
+
+  for (let i = 0; i < monthsOfRow.length; i++) {
+    const month = monthsOfRow[i];
+
+    if (!isMatch(setYear(month, Number(yearState.getFullYear())), disabled)) {
+      return setYear(month, Number(yearState.getFullYear()));
+    }
+  }
+};

package/src/date/utils/parse-date.ts

@@ -0,0 +1,46 @@
+import { parse } from "date-fns";
+import { isValidDate } from ".";
+
+export const INPUT_DATE_STRING_FORMAT_DATE = "dd.MM.yyyy";
+
+export const INPUT_DATE_STRING_FORMAT_MONTH = "MM.yyyy";
+
+const ALLOWED_INPUT_FORMATS_DATE = [
+  "ddMMyy",
+  "d.M.yy",
+  "dd.MM.yy",
+  "dd/MM/yy",
+  "dd-MM-yy",
+  INPUT_DATE_STRING_FORMAT_DATE,
+  "ddMMyyyy",
+  "dd/MM/yyyy",
+  "dd-MM-yyyy",
+  "d.M.yyyy",
+];
+
+const ALLOWED_INPUT_FORMATS_MONTH = [
+  "M/yyyy",
+  "MM/yyyy",
+  "M-yyyy",
+  "MM-yyyy",
+  "MM.yyyy",
+  INPUT_DATE_STRING_FORMAT_MONTH,
+];
+
+export const parseDate = (
+  date: string,
+  today: Date,
+  locale: Locale,
+  type: "date" | "month"
+) => {
+  let parsed;
+  const ALLOWED_FORMATS =
+    type === "date" ? ALLOWED_INPUT_FORMATS_DATE : ALLOWED_INPUT_FORMATS_MONTH;
+  for (const format of ALLOWED_FORMATS) {
+    parsed = parse(date, format, today, { locale });
+    if (isValidDate(parsed)) {
+      return parsed;
+    }
+  }
+  return parsed;
+};

package/src/form/ConfirmationPanel.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useId } from "react";
 import cl from "clsx";
 import { BodyLong, Checkbox, CheckboxProps, ErrorMessage } from "..";
 import { useFormField } from "./useFormField";
@@ -32,9 +32,11 @@ export const ConfirmationPanel = forwardRef<
 >(({ className, children, label, ...props }, ref) => {
   const { errorId, showErrorMsg, hasError, size, inputProps } = useFormField(
     props,
-    "confirmationPanel"
+    "confirmation-panel"
   );
 
+  const id = useId();
+
   return (
     <div
       className={cl("navds-confirmation-panel", "navds-form-field", className, {
@@ -48,6 +50,7 @@ export const ConfirmationPanel = forwardRef<
           <BodyLong
             size={props.size}
             className="navds-confirmation-panel__content"
+            id={`confirmation-panel-${id}`}
           >
             {children}
           </BodyLong>
@@ -56,6 +59,10 @@ export const ConfirmationPanel = forwardRef<
           ref={ref}
           {...props}
           {...inputProps}
+          aria-describedby={cl(
+            inputProps["aria-describedby"],
+            children && `confirmation-panel-${id}`
+          )}
           error={hasError}
           size={size}
         >

package/src/form/checkbox/Checkbox.test.tsx

@@ -36,8 +36,8 @@ test("checkbox group chains onChange calls", async () => {
 describe("Checkbox handles controlled-state correctly", () => {
   const CheckboxComponent = ({ onChange = () => null, value }) => (
     <CheckboxGroup legend="legend" onChange={onChange} value={value}>
-      <Checkbox value={"value1"}>label1</Checkbox>
-      <Checkbox value={"value2"}>label2</Checkbox>
+      <Checkbox value="value1">label1</Checkbox>
+      <Checkbox value="value2">label2</Checkbox>
     </CheckboxGroup>
   );
 

package/src/form/radio/radio.stories.tsx

@@ -50,7 +50,7 @@ Default.args = {
 };
 
 export const Group = () => (
-  <RadioGroup legend="Group legend" defaultValue={"tekst2"}>
+  <RadioGroup legend="Group legend" defaultValue="tekst2">
     <Radio value="tekst">Radiotekst</Radio>
     <Radio value="tekst2">Radiotekst</Radio>
   </RadioGroup>
@@ -59,7 +59,7 @@ export const Group = () => (
 export const GroupError = () => (
   <RadioGroup
     legend="Group legend"
-    defaultValue={"tekst2"}
+    defaultValue="tekst2"
     error="Group errormelding"
   >
     <Radio value="tekst">Radiotekst</Radio>
@@ -68,7 +68,7 @@ export const GroupError = () => (
 );
 
 export const GroupSmall = () => (
-  <RadioGroup legend="Group legend" defaultValue={"tekst2"} size="small">
+  <RadioGroup legend="Group legend" defaultValue="tekst2" size="small">
     <Radio value="tekst">Radiotekst</Radio>
     <Radio value="tekst2">Radiotekst</Radio>
   </RadioGroup>
@@ -77,7 +77,7 @@ export const GroupSmall = () => (
 export const GroupDescription = () => (
   <RadioGroup
     legend="Group legend"
-    defaultValue={"tekst2"}
+    defaultValue="tekst2"
     description="Group description"
   >
     <Radio value="tekst">Radiotekst</Radio>

package/src/form/stories/textarea.stories.tsx

@@ -109,9 +109,7 @@ export const MaxRows = () => {
   return (
     <Textarea
       maxRows={3}
-      value={
-        "Aute fugiat ut culpa enim ad culpa proident adipisicing anim proident ipsum elit. Cillum Lorem magna nisi cupidatat consequat culpa. Veniam ex quis elit dolore ea cupidatat fugiat in. Sint proident magna duis consequat velit ea velit pariatur in dolore ad. Aliqua officia nostrud veniam pariatur eu sint elit qui amet."
-      }
+      value="Aute fugiat ut culpa enim ad culpa proident adipisicing anim proident ipsum elit. Cillum Lorem magna nisi cupidatat consequat culpa. Veniam ex quis elit dolore ea cupidatat fugiat in. Sint proident magna duis consequat velit ea velit pariatur in dolore ad. Aliqua officia nostrud veniam pariatur eu sint elit qui amet."
       label="Ipsum enim quis culpa"
     />
   );

package/src/help-text/help-text.stories.tsx

@@ -4,6 +4,9 @@ import { HelpText } from "..";
 export default {
   title: "ds-react/HelpText",
   component: HelpText,
+  parameters: {
+    chromatic: { delay: 300 },
+  },
   argTypes: {
     placement: {
       control: {

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./accordion";
 export * from "./alert";
 export * from "./button";
+export * from "./date";
 export * from "./form";
 export * from "./grid";
 export * from "./help-text";

package/src/typography/Detail.tsx

@@ -5,7 +5,7 @@ import { OverridableComponent } from "..";
 export interface DetailProps
   extends React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * medium: 14px bold, small: 14px
+   * medium: 14px, small: 14px
    * @default "medium"
    */
   size?: "medium" | "small";

package/src/util/AnimateHeight.tsx

@@ -224,13 +224,12 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const ariaHidden = hasAriaHiddenProp ? props["aria-hidden"] : height === 0;
 
   return (
-    <div
-      {...props}
-      aria-hidden={ariaHidden}
-      className={className}
-      style={componentStyle}
-    >
-      <div className={innerClassName} ref={contentElement}>
+    <div {...props} className={className} style={componentStyle}>
+      <div
+        aria-hidden={ariaHidden}
+        className={innerClassName}
+        ref={contentElement}
+      >
         {children}
       </div>
     </div>