@altinn/altinn-components 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.6.0](https://github.com/Altinn/altinn-components/compare/v0.5.2...v0.6.0) (2024-11-20)
+
+
+### Features
+
+* date picker + bookmarks + saved searches ([#60](https://github.com/Altinn/altinn-components/issues/60)) ([3cc249e](https://github.com/Altinn/altinn-components/commit/3cc249ebbd6bb1f5157524a0bfa1fa6693f38dd8))
+
+## [0.5.2](https://github.com/Altinn/altinn-components/compare/v0.5.1...v0.5.2) (2024-11-18)
+
+
+### Bug Fixes
+
+* fixing selecting current account and simplify API for Header ([#58](https://github.com/Altinn/altinn-components/issues/58)) ([b39a14a](https://github.com/Altinn/altinn-components/commit/b39a14a14014ff78209d636f3edc93507b443fd2))
+
 ## [0.5.1](https://github.com/Altinn/altinn-components/compare/v0.5.0...v0.5.1) (2024-11-16)
 
 

package/lib/components/Bookmarks/BookmarksList.tsx

@@ -0,0 +1,17 @@
+import { ListBase, type ListSpacing } from '../';
+import { BookmarksListItem, type BookmarksListItemProps } from './BookmarksListItem';
+
+export interface BookmarksListProps {
+  items: BookmarksListItemProps[];
+  spacing: ListSpacing;
+}
+
+export const BookmarksList = ({ items, spacing }: BookmarksListProps) => {
+  return (
+    <ListBase spacing={spacing}>
+      {items?.map((item) => (
+        <BookmarksListItem {...item} key={item.id} />
+      ))}
+    </ListBase>
+  );
+};

package/lib/components/Bookmarks/BookmarksListItem.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Fragment, useState } from 'react';
+
+import { ListBase } from '..';
+import { MetaItem } from '../Meta';
+import { BookmarksListItem } from './BookmarksListItem';
+
+const sizes = ['lg', 'md', 'sm', 'xs'];
+
+const meta = {
+  title: 'Bookmarks/BookmarksListItem',
+  component: BookmarksListItem,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    id: 'id',
+    params: [
+      {
+        type: 'search',
+        label: 'mva',
+      },
+      {
+        type: 'filter',
+        label: 'Skatteetaten',
+      },
+    ],
+    size: 'md',
+    href: '#',
+  },
+} satisfies Meta<typeof BookmarksListItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const CustomTitle: Story = {
+  args: {
+    title: 'Mitt lagrede søk',
+  },
+};
+
+export const LotsOfParams: Story = {
+  args: {
+    params: [
+      {
+        label: 'skatt',
+      },
+      {
+        label: 'inkasso',
+      },
+      {
+        type: 'filter',
+        label: 'Namsmannen',
+      },
+      {
+        type: 'filter',
+        label: 'Denne uken',
+      },
+    ],
+  },
+};
+
+export const Sizes = (args) => {
+  return (
+    <ListBase>
+      {sizes?.map((size) => {
+        return (
+          <Fragment key={size}>
+            <BookmarksListItem {...args} size={size} selected={size === args?.size} />
+            <MetaItem>{size}</MetaItem>
+          </Fragment>
+        );
+      })}
+    </ListBase>
+  );
+};

package/lib/components/Bookmarks/BookmarksListItem.tsx

@@ -0,0 +1,32 @@
+import type { ElementType } from 'react';
+import { ListItemBase, ListItemLabel, ListItemMedia, type ListItemSize } from '..';
+import { type QueryItemProps, QueryLabel } from './QueryLabel';
+
+export interface BookmarksListItemProps {
+  id: string;
+  /** Element type to render */
+  as?: ElementType;
+  /** ELement link */
+  href?: string;
+  /** Optional onClick */
+  onClick?(): void;
+  /** Size of list item */
+  size?: ListItemSize;
+  /** Optional title */
+  title?: string;
+  /** Optional description */
+  description?: string;
+  /** Query params */
+  params?: QueryItemProps[];
+}
+
+export const BookmarksListItem = ({ size = 'sm', title, description, params, ...rest }: BookmarksListItemProps) => {
+  return (
+    <ListItemBase size={size} linkIcon="chevron-right" {...rest}>
+      <ListItemMedia size={size} icon={'magnifying-glass'} />
+      <ListItemLabel title={title} size={size}>
+        {!title && <QueryLabel params={params} />}
+      </ListItemLabel>
+    </ListItemBase>
+  );
+};

package/lib/components/Bookmarks/QueryLabel.tsx

@@ -0,0 +1,33 @@
+import styles from './queryLabel.module.css';
+export type QueryItemType = 'search' | 'filter';
+
+export interface QueryItemProps {
+  type?: QueryItemType;
+  value?: string;
+  label?: string;
+}
+
+export const QueryItem = ({ type = 'search', label }: QueryItemProps) => {
+  return (
+    <mark className={styles.item} data-type={type}>
+      {label}
+    </mark>
+  );
+};
+
+export interface QueryLabelProps {
+  params?: QueryItemProps[];
+}
+
+export const QueryLabel = ({ params = [] }: QueryLabelProps) => {
+  return (
+    <div className={styles.label}>
+      {params.map((item, index) => (
+        <div className={styles.group} key={index}>
+          <QueryItem {...item} />
+          {params[index + 1] && <span className={styles.plus}>+</span>}
+        </div>
+      ))}
+    </div>
+  );
+};

package/lib/components/Bookmarks/index.ts

@@ -0,0 +1,3 @@
+export * from './BookmarksList';
+export * from './BookmarksListItem';
+export * from './QueryLabel';

package/lib/components/Bookmarks/queryLabel.module.css

@@ -0,0 +1,45 @@
+.label {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 0.25rem;
+  row-gap: 0.25rem;
+}
+
+.group {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 0.25rem;
+}
+
+.plus {
+  color: var(--theme-text-subtle);
+}
+
+.item {
+  font-size: 0.875em;
+}
+
+.item[data-type="search"] {
+  background-color: transparent;
+  font-weight: 500;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.25em;
+}
+
+.item[data-type="search"]:before {
+  content: "«";
+}
+
+.item[data-type="search"]:after {
+  content: "»";
+}
+
+.item[data-type="filter"] {
+  background-color: transparent;
+  border: 1px solid;
+  font-weight: 500;
+  padding: 0.25em 0.5em;
+  border-radius: 2px;
+}

package/lib/components/Button/ButtonBase.tsx

@@ -32,12 +32,13 @@ export const ButtonBase = ({
   size,
   selected,
   variant,
+  tabIndex = 0,
   ...rest
 }: ButtonBaseProps) => {
   const Component = as || 'button';
   return (
     <Component
-      tabIndex={0}
+      tabIndex={tabIndex}
       data-size={size}
       data-variant={variant}
       data-color={color}

package/lib/components/Button/IconButton.tsx

@@ -10,6 +10,7 @@ interface IconButtonProps {
   icon: IconName;
   color?: ButtonColor;
   size?: ButtonSize;
+  iconSize?: ButtonSize;
   variant?: ButtonVariant;
   className?: string;
   onClick?: MouseEventHandler;
@@ -20,12 +21,13 @@ export const IconButton = ({
   color = 'primary',
   size = 'md',
   icon,
+  iconSize,
   className,
   onClick,
 }: IconButtonProps) => {
   return (
     <ButtonBase variant={variant} color={color} size={size} className={cx(styles.button, className)} onClick={onClick}>
-      <ButtonIcon icon={icon} size={size} />
+      <ButtonIcon icon={icon} size={iconSize || size} />
     </ButtonBase>
   );
 };

package/lib/components/ContextMenu/ContextMenuBase.tsx

@@ -17,10 +17,12 @@ export const ContextMenuBase = ({
   children,
 }: ContextMenuBaseProps) => {
   return (
-    <div className={styles.toggle}>
+    <div className={styles.toggle} data-theme="neutral">
       <IconButton
         className={styles.button}
+        size="sm"
         icon="menu-elipsis-horizontal"
+        iconSize="md"
         variant="text"
         color="secondary"
         onClick={onToggle}

package/lib/components/Datepicker/Datepicker.tsx

@@ -0,0 +1,49 @@
+'use client';
+import { useState } from 'react';
+import { DatepickerBase } from './DatepickerBase';
+import { DatepickerHeader } from './DatepickerHeader';
+import { DatepickerTable } from './DatepickerTable';
+import { useDatepicker } from './useDatepicker';
+
+export interface DatepickerProps {
+  defaultDate?: string;
+  months?: string[];
+  weekdays?: string[];
+  selectFrom?: string;
+  selectTo?: string;
+  className?: string;
+  onSelect: (isoDate: string) => void;
+}
+export const Datepicker = ({
+  months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+  defaultDate,
+  selectFrom,
+  selectTo,
+  className,
+  onSelect,
+}: DatepickerProps) => {
+  const [date, setDate] = useState(defaultDate);
+
+  const { month, rows, next, prev } = useDatepicker({ date, selectFrom, selectTo });
+
+  return (
+    <DatepickerBase className={className}>
+      <DatepickerHeader title={months[month]} onNext={() => setDate(next)} onPrev={() => setDate(prev)} />
+      <DatepickerTable rows={rows} weekdays={weekdays} onSelect={onSelect} />
+    </DatepickerBase>
+  );
+};

package/lib/components/Datepicker/DatepickerBase.tsx

@@ -0,0 +1,12 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './datepickerBase.module.css';
+
+export interface DatepickerBaseProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const DatepickerBase = ({ className, children }: DatepickerBaseProps) => {
+  return <div className={cx(styles.datepicker, className)}>{children}</div>;
+};

package/lib/components/Datepicker/DatepickerHeader.tsx

@@ -0,0 +1,20 @@
+import { IconButton } from '../Button';
+import styles from './datepickerHeader.module.css';
+
+export interface DatepickerHeaderProps {
+  title?: string;
+  onPrev: () => void;
+  onNext: () => void;
+}
+
+export const DatepickerHeader = ({ title, onNext, onPrev }: DatepickerHeaderProps) => {
+  return (
+    <header className={styles.header}>
+      <h2 className={styles.title}>{title}</h2>
+      <nav className={styles.nav}>
+        <IconButton icon="chevron-left" size="sm" variant="text" onClick={onPrev} />
+        <IconButton icon="chevron-right" size="sm" variant="text" onClick={onNext} />
+      </nav>
+    </header>
+  );
+};

package/lib/components/Datepicker/DatepickerTable.tsx

@@ -0,0 +1,50 @@
+import { ButtonBase } from '../Button';
+import styles from './datepickerTable.module.css';
+import type { DatepickerDate } from './useDatepicker';
+
+export interface DatepickerTableProps {
+  weekdays: string[];
+  onSelect: (date: string) => void;
+  rows?: DatepickerDate[][];
+}
+
+export const DatepickerTable = ({
+  weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+  rows = [],
+  onSelect,
+}: DatepickerTableProps) => {
+  return (
+    <table className={styles.table}>
+      <thead>
+        <tr>
+          {weekdays.map((weekday) => (
+            <th key={weekday} className={styles.weekday}>
+              {weekday.substring(0, 2)}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, i) => (
+          <tr key={i}>
+            {row.map((item) => {
+              const { day, date, selected, isCurrentMonth } = item;
+              return (
+                <td key={date} className={styles.date} data-current-month={isCurrentMonth}>
+                  <ButtonBase
+                    variant="text"
+                    selected={selected}
+                    className={styles.button}
+                    onClick={() => onSelect(date)}
+                  >
+                    {day}
+                  </ButtonBase>
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

package/lib/components/Datepicker/datepickerBase.module.css

@@ -0,0 +1,5 @@
+.datepicker {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+}

package/lib/components/Datepicker/datepickerHeader.module.css

@@ -0,0 +1,17 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0.5rem 0;
+}
+
+.title {
+  font-size: 1rem;
+  font-weight: 500;
+  margin: 0;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+}

package/lib/components/Datepicker/datepickerTable.module.css

@@ -0,0 +1,37 @@
+.table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.weekday {
+  font-size: 0.75rem;
+  text-align: center;
+  padding: 0.25rem 0;
+}
+
+.date {
+  background-color: transparent;
+  color: var(--theme-text-subtle);
+}
+
+.date[data-current-month="true"] {
+  background-color: var(--theme-background-subtle);
+  color: var(--theme-text-default);
+}
+
+.button {
+  font-size: 0.875rem;
+  width: 100%;
+  text-align: center;
+  height: 2.25rem;
+}
+
+.button[aria-selected="true"] {
+  background-color: transparent;
+  border: 1px solid var(--theme-border-default);
+}
+.button[aria-selected="true"]:hover,
+.button:hover {
+  background-color: var(--theme-surface-hover);
+}

package/lib/components/Datepicker/index.ts

@@ -0,0 +1 @@
+export * from './Datepicker';

package/lib/components/Datepicker/useDatepicker.tsx

@@ -0,0 +1,146 @@
+'use client';
+import { useMemo } from 'react';
+
+export interface DatepickerDate {
+  /** Day of the month */
+  day: number;
+  /** ISO date string in YYYY-MM-DD format */
+  date: string;
+  /** Indicates if the day is selected */
+  selected: boolean;
+  /** Indicates if the day belongs to the current month */
+  isCurrentMonth: boolean;
+}
+
+/**
+ * Represents a day object in the datepicker.
+ */
+interface DayObject extends DatepickerDate {
+  /** Year of the date */
+  year: number;
+  /** Zero-based month (0 = January, 11 = December) */
+  month: number;
+}
+
+interface UseDatepickerOutput {
+  /** Year of the calendar */
+  year: number;
+  /** Zero-based month of the calendar (0 = January, 11 = December) */
+  month: number;
+  /** Weeks in the calendar */
+  rows: DayObject[][];
+  /** Day of the month */
+  day: number;
+  /** ISO date string for the next month */
+  next: string;
+  /** ISO date string for the previous month */
+  prev: string;
+}
+
+/**
+ * Props for the useDatepicker hook.
+ */
+interface UseDatepickerProps {
+  /** ISO date string for the calendar month */
+  date?: string;
+  /** Optional ISO date string for the start of the selection range */
+  selectFrom?: string;
+  /** Optional ISO date string for the end of the selection range */
+  selectTo?: string;
+}
+
+export const useDatepicker = ({ date, selectFrom, selectTo }: UseDatepickerProps): UseDatepickerOutput => {
+  return useMemo(() => {
+    const generateIsoDate = (year: number, month: number, day: number) => {
+      const paddedMonth = String(month + 1).padStart(2, '0');
+      const paddedDay = String(day).padStart(2, '0');
+      return `${year}-${paddedMonth}-${paddedDay}`;
+    };
+
+    const isSelected = (isoDate: string) => {
+      if (!fromTimestamp && !toTimestamp) {
+        return false;
+      }
+
+      const dateTimestamp = new Date(isoDate).getTime();
+      return (
+        (fromTimestamp === null || dateTimestamp >= fromTimestamp) &&
+        (toTimestamp === null || dateTimestamp <= toTimestamp)
+      );
+    };
+
+    const baseDate = date ? new Date(date) : new Date();
+    const year = baseDate.getFullYear();
+    const month = baseDate.getMonth();
+
+    const fromTimestamp = selectFrom ? new Date(selectFrom).getTime() : null;
+    const toTimestamp = selectTo ? new Date(selectTo).getTime() : null;
+
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const firstDayOfMonth = (new Date(year, month, 1).getDay() + 6) % 7; // Start weeks on Monday
+    const daysInPrevMonth = new Date(year, month, 0).getDate();
+
+    const rows: DayObject[][] = [];
+    let currentDay = 1;
+
+    for (let i = 0; i < 6; i++) {
+      const week: DayObject[] = [];
+      for (let j = 0; j < 7; j++) {
+        if (i === 0 && j < firstDayOfMonth) {
+          // Days from the previous month
+          const day = daysInPrevMonth - firstDayOfMonth + j + 1;
+          const prevMonth = month === 0 ? 11 : month - 1;
+          const prevYear = month === 0 ? year - 1 : year;
+          const isoDate = generateIsoDate(prevYear, prevMonth, day);
+          week.push({
+            year: prevYear,
+            month: prevMonth,
+            day,
+            isCurrentMonth: false,
+            date: isoDate,
+            selected: isSelected(isoDate),
+          });
+        } else if (currentDay > daysInMonth) {
+          // Days from the next month
+          const day = currentDay - daysInMonth;
+          const nextMonth = month === 11 ? 0 : month + 1;
+          const nextYear = month === 11 ? year + 1 : year;
+          const isoDate = generateIsoDate(nextYear, nextMonth, day);
+          week.push({
+            year: nextYear,
+            month: nextMonth,
+            day,
+            isCurrentMonth: false,
+            date: isoDate,
+            selected: isSelected(isoDate),
+          });
+          currentDay++;
+        } else {
+          // Days from the current month
+          const isoDate = generateIsoDate(year, month, currentDay);
+          week.push({
+            year,
+            month,
+            day: currentDay,
+            isCurrentMonth: true,
+            date: isoDate,
+            selected: isSelected(isoDate),
+          });
+          currentDay++;
+        }
+      }
+      rows.push(week);
+      if (currentDay > daysInMonth) break; // Stop once we've covered all days
+    }
+
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear = month === 0 ? year - 1 : year;
+    const prev = generateIsoDate(prevYear, prevMonth, 1);
+
+    const nextMonth = month === 11 ? 0 : month + 1;
+    const nextYear = month === 11 ? year + 1 : year;
+    const next = generateIsoDate(nextYear, nextMonth, 1);
+
+    return { year, month, rows, day: currentDay, next, prev };
+  }, [date, selectFrom, selectTo]);
+};

package/lib/components/Dropdown/DrawerOrDropdown.tsx

@@ -16,7 +16,7 @@ export const DrawerOrDropdown = ({ expanded = false, title, onClose, button, chi
   return (
     <>
       {expanded && <Backdrop onClick={onClose} />}
-      <DropdownBase className={styles.dropdown} expanded={expanded}>
+      <DropdownBase className={styles.dropdown} padding={true} expanded={expanded}>
         {children}
       </DropdownBase>
       <DrawerBase className={styles.drawer} placement="bottom" expanded={expanded}>

package/lib/components/Dropdown/dropdownBase.module.css

@@ -16,12 +16,13 @@
   right: 0;
 }
 
-.dropdown[data-padding="trur"] {
+.dropdown[data-padding="true"] {
   padding: 0 0.5rem;
 }
 
 .dropdown {
   min-width: 14rem;
+  max-width: 20rem;
   margin-top: 0.5rem;
   background-color: var(--neutral-background-default);
   border-radius: 0.375rem;

package/lib/components/Footer/FooterMenu.tsx

@@ -9,8 +9,8 @@ export interface FooterMenuProps {
 }
 
 export interface FooterLinkProps {
+  id: string;
   as?: ElementType;
-  id?: string;
   href?: string;
   title?: string;
   className?: string;