@altinn/altinn-components 0.6.0 → 0.6.1

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

@@ -1,142 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-.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

@@ -1,35 +0,0 @@
-.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

@@ -1,31 +0,0 @@
-.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

@@ -1,49 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,35 +0,0 @@
-.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

@@ -1,49 +0,0 @@
-'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

@@ -1,12 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-.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

@@ -1,37 +0,0 @@
-.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);
-}