@altinn/altinn-components 0.6.1 → 0.6.2

package/lib/components/Button/buttonBase.module.css

@@ -0,0 +1,142 @@
+.button {
+  border: 1px solid;
+  border-color: transparent;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+
+  background: transparent;
+
+  /* inherit font & color from ancestor */
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+
+  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+  line-height: normal;
+
+  /* Corrects font smoothing for webkit */
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+
+  /* Corrects inability to style clickable `input` types in iOS */
+  appearance: none;
+
+  /* user select none */
+  user-select: none;
+  cursor: pointer;
+}
+
+.button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.button:focus {
+  border-color: var(--theme-base-active);
+}
+
+.button:hover {
+  border-color: var(--theme-base-hover);
+}
+
+.button:active {
+  border-color: var(--theme-base-active);
+}
+
+.button[data-size="sm"] {
+  height: 2.25rem; /* sm 36 */
+}
+
+.button[data-size="md"] {
+  height: 2.75rem; /* md 44 */
+}
+
+.button[data-size="lg"] {
+  height: 3.5rem; /* lg 56 */
+}
+
+/* primary solid */
+
+.button[data-variant="solid"] {
+  border-color: var(--theme-base-default);
+  background-color: var(--theme-base-default);
+  color: white;
+}
+
+.button[data-variant="solid"]:hover {
+  border-color: var(--theme-base-hover);
+  background-color: var(--theme-base-hover);
+}
+
+.button[data-variant="solid"]:active {
+  border-color: var(--theme-base-active);
+  background-color: var(--theme-base-active);
+}
+
+/* primary outline, dotted + text */
+
+.button[data-variant="outline"],
+.button[data-variant="dotted"] {
+  border-color: var(--theme-base-default);
+}
+
+.button[data-variant="outline"] {
+  border-style: solid;
+}
+
+.button[data-variant="dotted"] {
+  border-style: dotted;
+}
+
+.button[data-variant="text"] {
+  border-color: transparent;
+}
+
+.button[data-variant="outline"]:hover,
+.button[data-variant="dotted"]:hover,
+.button[data-variant="text"]:hover {
+  background-color: var(--theme-surface-default);
+}
+
+.button[data-variant="outline"]:active,
+.button[data-variant="dotted"]:active,
+.button[data-variant="text"]:active {
+  background-color: var(--theme-surface-active);
+}
+
+/* selected */
+
+.button[aria-selected="true"] {
+  background-color: var(--theme-background-subtle);
+  color: var(--theme-text-default);
+}
+
+/* secondary color */
+
+.button[data-color="secondary"] {
+  color: var(--theme-text-subtle);
+}
+
+.button[data-color="secondary"]:hover {
+  border-color: var(--theme-surface-hover);
+}
+
+.button[data-color="secondary"][data-variant="solid"] {
+  border-color: var(--theme-surface-default);
+  background-color: var(--theme-surface-default);
+}
+
+.button[data-color="secondary"][data-variant="solid"]:hover {
+  border-color: var(--theme-surface-hover);
+  background-color: var(--theme-surface-hover);
+}
+
+.button[data-color="secondary"][data-variant="solid"]:active,
+.button[data-color="secondary"][data-variant="outline"]:active,
+.button[data-color="secondary"][data-variant="dotted"]:active,
+.button[data-color="secondary"][data-variant="text"]:active {
+  border-color: var(--theme-surface-active);
+  background-color: var(--theme-surface-active);
+}

package/lib/components/Button/buttonIcon.module.css

@@ -0,0 +1,17 @@
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon[data-size="sm"] {
+  font-size: 1.25rem;
+}
+
+.icon[data-size="md"] {
+  font-size: 1.5rem;
+}
+
+.icon[data-size="lg"] {
+  font-size: 1.625rem;
+}

package/lib/components/Button/buttonLabel.module.css

@@ -0,0 +1,17 @@
+.label {
+  line-height: 1;
+  font-weight: 500;
+  padding: 0 .25em;
+}
+
+.label[data-size="sm"] {
+  font-size: 0.875rem;
+}
+
+.label[data-size="md"] {
+  font-size: 1rem;
+}
+
+.label[data-size="lg"] {
+  font-size: 1.125rem;
+}

package/lib/components/Button/comboButton.module.css

@@ -0,0 +1,35 @@
+.button {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  border-radius: 2px;
+}
+
+.divider {
+  align-self: stretch;
+  border-left: 1px solid currentColor;
+  width: 1px;
+  margin: 0.375rem 0;
+}
+
+.primary,
+.secondary {
+  display: inline-flex;
+  align-items: center;
+  border: none;
+}
+
+.primary[data-size="sm"],
+.secondary[data-size="sm"] {
+  padding: 0 0.375rem;
+}
+
+.primary[data-size="md"],
+.secondary[data-size="md"] {
+  padding: 0 0.5rem;
+}
+
+.primary[data-size="lg"],
+.secondary[data-size="lg"] {
+  padding: 0 0.625rem;
+}

package/lib/components/Button/iconButton.module.css

@@ -0,0 +1,31 @@
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+}
+
+.icon {
+  font-size: 1.5rem;
+}
+
+/* sm 36 */
+
+.button[data-size="sm"] {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
+/* md 44 */
+
+.button[data-size="md"] {
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
+/* lg 56 */
+
+.button[data-size="lg"] {
+  width: 3.5rem;
+  height: 3.5rem;
+}

package/lib/components/ContextMenu/ContextMenu.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ContextMenu } from './ContextMenu';
+
+const meta = {
+  title: 'ContextMenu/ContextMenu',
+  component: ContextMenu,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    placement: 'left',
+    items: [
+      {
+        id: '1',
+        groupId: '1',
+        icon: 'arrow-redo',
+        label: 'Del og gi tilgang',
+      },
+      {
+        id: '2',
+        groupId: '1',
+        icon: 'eye-closed',
+        label: 'Marker som ny',
+      },
+      {
+        id: '3',
+        groupId: '2',
+        icon: 'archive',
+        label: 'Flytt til arkiv',
+      },
+      {
+        id: '4',
+        groupId: '2',
+        icon: 'trash',
+        label: 'Flytt til papirkurv',
+      },
+      {
+        id: '5',
+        groupId: '3',
+        icon: 'clock-dashed',
+        label: 'Aktivitetslogg',
+      },
+    ],
+  },
+} satisfies Meta<typeof ContextMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/lib/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,20 @@
+import type { DropdownPlacement, MenuItemProps } from '../';
+import { type MenuItemGroups, MenuItems } from '../';
+import { useRootContext } from '../RootProvider';
+import { ContextMenuBase } from './ContextMenuBase';
+
+export interface ContextMenuProps {
+  id: string;
+  items: MenuItemProps[];
+  placement?: DropdownPlacement;
+  groups?: MenuItemGroups;
+}
+
+export const ContextMenu = ({ id = 'context-menu', placement = 'right', groups = {}, items }: ContextMenuProps) => {
+  const { currentId, toggleId } = useRootContext();
+  return (
+    <ContextMenuBase placement={placement} expanded={currentId === id} onToggle={() => toggleId(id)}>
+      <MenuItems groups={groups} items={items} />
+    </ContextMenuBase>
+  );
+};

package/lib/components/ContextMenu/ContextMenuBase.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import { DropdownBase, IconButton } from '../';
+import type { DropdownPlacement } from '../';
+import styles from './contextMenuBase.module.css';
+
+export interface ContextMenuBaseProps {
+  placement: DropdownPlacement;
+  expanded: boolean;
+  onToggle?: () => void;
+  children?: ReactNode;
+}
+
+export const ContextMenuBase = ({
+  placement = 'right',
+  expanded = false,
+  onToggle,
+  children,
+}: ContextMenuBaseProps) => {
+  return (
+    <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}
+      />
+      <DropdownBase className={styles.dropdown} placement={placement} expanded={expanded}>
+        {children}
+      </DropdownBase>
+    </div>
+  );
+};

package/lib/components/ContextMenu/contextMenuBase.module.css

@@ -0,0 +1,35 @@
+.toggle {
+  position: relative;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  padding: 0.625rem;
+  border-radius: 50%;
+}
+
+.icon {
+  font-size: 1.5rem;
+}
+
+.dropdown {
+  display: none;
+}
+
+.dropdown[aria-expanded="true"] {
+  display: block;
+  position: absolute;
+  right: 0;
+  z-index: 2;
+}
+
+.dropdown {
+  margin-top: 0.5rem;
+  padding: 0 0.5rem;
+  background-color: var(--neutral-background-default);
+  border-radius: 2px;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}

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);
+}