@navikt/ds-react 3.4.2 → 4.0.0

package/src/timeline/utils/types.external.ts

@@ -0,0 +1,67 @@
+import React from "react";
+
+export type PeriodStatus =
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "neutral";
+
+export type Percentage = number;
+
+export interface Positioned {
+  horizontalPosition: number;
+  direction: "left" | "right";
+}
+
+export interface Period {
+  id: string;
+  label?: string;
+  start: Date;
+  endInclusive: Date;
+  status?: PeriodStatus;
+  onSelectPeriod?: () => void;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  end: Date;
+  isActive?: boolean;
+  statusLabel?: string;
+  restProps?: any;
+  ref?: Element;
+}
+
+export interface PositionedPeriod extends Period, Positioned {
+  width: number;
+  active?: boolean;
+  cropped?: "left" | "right" | "both";
+  disabled?: boolean;
+  className?: string;
+  hoverLabel?: React.ReactNode;
+  infoPin?: boolean;
+  start: Date;
+}
+
+export interface Spatial {
+  width: number;
+}
+
+export interface AxisLabel extends Positioned, Spatial {
+  label: string;
+  date: Date;
+}
+
+export interface InternalSimpleTimeline {
+  id: string;
+  periods: PositionedPeriod[];
+}
+
+export interface SimplePeriod {
+  /**
+   * Startdato for perioden, mao. periodens høyre kant.
+   */
+  start: Date;
+  /**
+   * Sluttdato for perioden, mao. periodens venstre kant.
+   */
+  end: Date;
+}

package/src/timeline/utils/types.internal.ts

@@ -0,0 +1,76 @@
+import React from "react";
+
+export type TimelineComponentTypes = "row" | "pin" | "period";
+
+export type PeriodStatus =
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "neutral";
+
+export type Percentage = number;
+
+export interface Positioned {
+  horizontalPosition: number;
+  direction: "left" | "right";
+}
+
+export interface Period {
+  id: string;
+  start: Date;
+  endInclusive: Date;
+  status?: PeriodStatus;
+  onSelectPeriod?: () => void;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  isActive?: boolean;
+}
+
+export interface PositionedPeriod extends Period, Positioned {
+  width: number;
+  active?: boolean;
+  cropped?: "left" | "right" | "both";
+  disabled?: boolean;
+  className?: string;
+  hoverLabel?: React.ReactNode;
+  infoPin?: boolean;
+  end: Date;
+  statusLabel?: string;
+  restProps?: any;
+  ref?: any;
+}
+
+export interface Spatial {
+  width: number;
+}
+
+export interface AxisLabel extends Positioned, Spatial {
+  label: string;
+  date: Date;
+}
+
+export interface InternalSimpleTimeline {
+  label: string;
+  id: string;
+  periods: PositionedPeriod[];
+  icon?: React.ReactNode;
+  headingTag: "h2" | "h3" | "h4" | "h5" | "h6";
+  restProps: any;
+  ref: any;
+}
+
+export interface SelectedPeriod {
+  /**
+   * Start of the period.
+   */
+  start: Date;
+  /**
+   * End of the period.
+   */
+  end: Date;
+  /**
+   * Period id
+   */
+  id: string;
+}

package/src/timeline/zoom/ZoomButton.tsx

@@ -0,0 +1,83 @@
+import { Detail } from "../../typography/Detail";
+import {
+  addMonths,
+  addYears,
+  format,
+  isSameDay,
+  subMonths,
+  subYears,
+} from "date-fns";
+import React, { forwardRef } from "react";
+import { useTimelineContext } from "../hooks/useTimelineContext";
+
+export interface TimelineZoomButtonProps {
+  /**
+   * e.g 3mnd, 6mnd etc
+   */
+  label: string;
+  /**
+   * Zoom interval in months or years
+   */
+  interval: "month" | "year";
+  /**
+   * How many units of the interval that will be applied
+   * e.g interval="month" + count={3} equals 3 months
+   */
+  count: number;
+}
+
+export type ZoomButtonType = React.ForwardRefExoticComponent<
+  TimelineZoomButtonProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+export const ZoomButton: ZoomButtonType = forwardRef(
+  ({ label, interval, count, ...rest }, ref) => {
+    const { setStart, endDate, startDate, direction } = useTimelineContext();
+
+    let startOfRange: Date;
+
+    if (interval === "month") {
+      startOfRange =
+        direction === "left"
+          ? subMonths(endDate, count)
+          : addMonths(startDate, count);
+    } else {
+      startOfRange =
+        direction === "left"
+          ? subYears(endDate, count)
+          : addYears(startDate, count);
+    }
+
+    const currentZoom =
+      direction === "left"
+        ? isSameDay(startDate, startOfRange)
+        : isSameDay(endDate, startOfRange);
+
+    return (
+      <Detail as="li">
+        <button
+          type="button"
+          aria-label={
+            !currentZoom
+              ? `Zoom tidslinjen ${format(
+                  startOfRange,
+                  "dd.MM.yyyy"
+                )} til ${format(endDate, "dd.MM.yyyy")}`
+              : "Tilbakestill til initiell tidsperspektiv"
+          }
+          ref={ref}
+          {...rest}
+          className="navds-timeline__zoom-button"
+          onClick={() => {
+            setStart(startOfRange);
+          }}
+          aria-pressed={currentZoom}
+        >
+          {label}
+        </button>
+      </Detail>
+    );
+  }
+);
+
+export default ZoomButton;

package/src/timeline/zoom/index.tsx

@@ -0,0 +1,30 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import ZoomButton, { ZoomButtonType } from "./ZoomButton";
+
+interface ZoomProps extends React.HTMLAttributes<HTMLUListElement> {
+  children: React.ReactNode;
+}
+
+export interface ZoomType<Props = ZoomProps>
+  extends React.ForwardRefExoticComponent<
+    Props & React.RefAttributes<HTMLUListElement>
+  > {
+  Button: ZoomButtonType;
+  componentType: string;
+}
+
+export const Zoom = forwardRef<HTMLUListElement, ZoomProps>(
+  ({ className, children, ...rest }, ref) => {
+    return (
+      <ul ref={ref} className={cl(className, "navds-timeline__zoom")} {...rest}>
+        {children}
+      </ul>
+    );
+  }
+) as ZoomType;
+
+Zoom.Button = ZoomButton;
+Zoom.componentType = "zoom";
+
+export default Zoom;