@altinn/altinn-components 0.5.2 → 0.6.1

package/lib/components/Searchbar/Searchbar.stories.tsx

@@ -1,151 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { Searchbar } from './Searchbar';
-
-const meta = {
-  title: 'Header/Searchbar',
-  component: Searchbar,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    placeholder: 'Search',
-    name: 'search',
-    expanded: false,
-  },
-} satisfies Meta<typeof Searchbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Query: Story = {
-  args: {
-    value: 'query',
-  },
-};
-
-export const Expanded: Story = {
-  args: {
-    placeholder: 'Søk i innboks',
-    expanded: true,
-    autocomplete: {
-      groups: {
-        2: {
-          title: '2 treff i innboks',
-        },
-      },
-      items: [
-        {
-          id: '1a',
-          groupId: '1',
-          href: '#',
-          label: 'Alt i innboks',
-        },
-        {
-          id: '1b',
-          groupId: '1',
-          href: '#',
-          label: 'Alt i hele Altinn',
-        },
-        {
-          id: '2a',
-          groupId: '2',
-          href: '#',
-          label: 'Skattemelding 2024',
-        },
-        {
-          id: '2b',
-          groupId: '2',
-          href: '#',
-          label: 'Skattemelding 2025',
-        },
-      ],
-    },
-  },
-};
-
-export const ControlledState = (args) => {
-  const [expanded, setExpanded] = useState(false);
-  const [q, setQ] = useState<string>('');
-  const onChange = (event) => {
-    setQ(event.target.value);
-  };
-
-  const onFocus = () => {
-    setExpanded(true);
-  };
-
-  const scopes = [
-    {
-      groupId: '1',
-      id: 'inbox',
-      href: '#',
-      label: q
-        ? () => {
-            return (
-              <span>
-                <mark>{q}</mark> i innboksen
-              </span>
-            );
-          }
-        : 'Alt i innboksen',
-    },
-    {
-      groupId: '1',
-      id: 'global',
-      href: '#',
-      label: q
-        ? () => {
-            return (
-              <span>
-                <mark>{q}</mark> i hele Altinn
-              </span>
-            );
-          }
-        : 'Alt i hele Altinn',
-    },
-  ];
-
-  const suggestions = q
-    ? [
-        {
-          groupId: '2',
-          href: 'http://www.altinn.no',
-          label: 'Skattemelding 2024',
-        },
-        {
-          groupId: '2',
-          onClick: () => {
-            alert('Skattemelding 2025 ble trykket på');
-          },
-          label: 'Skattemelding 2025',
-        },
-      ].filter((item) => item.label.toLowerCase().includes((q ?? '').toLowerCase()))
-    : [];
-
-  const autocomplete = {
-    groups: {
-      2: {
-        title: `${suggestions.length} treff i innboksen`,
-      },
-    },
-    items: [...scopes, ...suggestions],
-  };
-
-  return (
-    <Searchbar
-      {...args}
-      autocomplete={autocomplete}
-      expanded={expanded}
-      value={q}
-      onChange={onChange}
-      onFocus={onFocus}
-      onEnter={() => {
-        alert(`Søk etter ${q}`);
-      }}
-    />
-  );
-};

package/lib/components/Searchbar/Searchbar.tsx

@@ -1,18 +0,0 @@
-import { Autocomplete, type AutocompleteProps } from './Autocomplete';
-import { SearchField, type SearchFieldProps } from './SearchField';
-import { SearchbarBase } from './SearchbarBase';
-
-export interface SearchbarProps extends SearchFieldProps {
-  className?: string;
-  autocomplete?: AutocompleteProps;
-  expanded: boolean;
-}
-
-export const Searchbar = ({ className, autocomplete, expanded = false, onClose, ...search }: SearchbarProps) => {
-  return (
-    <SearchbarBase className={className} expanded={expanded} autocomplete={!!autocomplete}>
-      <SearchField {...search} expanded={expanded} onClose={onClose} />
-      {autocomplete && <Autocomplete {...autocomplete} expanded={expanded} />}
-    </SearchbarBase>
-  );
-};

package/lib/components/Searchbar/SearchbarBase.tsx

@@ -1,23 +0,0 @@
-import cx from 'classnames';
-import type { ReactNode } from 'react';
-import styles from './searchbarBase.module.css';
-
-export interface SearchbarBaseProps {
-  className?: string;
-  children: ReactNode;
-  expanded?: boolean;
-  autocomplete?: boolean;
-}
-
-export const SearchbarBase = ({ className, children, expanded = false, autocomplete = false }: SearchbarBaseProps) => {
-  return (
-    <div
-      className={cx(styles.searchbar, className)}
-      aria-expanded={expanded}
-      data-autocomplete={autocomplete}
-      data-theme="neutral"
-    >
-      {children}
-    </div>
-  );
-};

package/lib/components/Searchbar/autocompleteBase.module.css

@@ -1,17 +0,0 @@
-.autocomplete {
-  width: 100%;
-  border: 2px solid;
-  border-radius: 0.25rem;
-  background-color: var(--theme-background-default);
-}
-
-.autocomplete ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.autocomplete li {
-  padding: 0;
-  margin: 0.5rem 0;
-}

package/lib/components/Searchbar/autocompleteGroup.module.css

@@ -1,3 +0,0 @@
-.group + .group {
-  border-top: 1px solid var(--theme-border-subtle);
-}

package/lib/components/Searchbar/autocompleteItem.module.css

@@ -1,19 +0,0 @@
-.item {
-  box-shadow: none;
-}
-
-.item mark {
-  background-color: transparent;
-  font-weight: 500;
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 4px;
-}
-
-.item mark:before {
-  content: "«";
-}
-
-.item mark:after {
-  content: "»";
-}

package/lib/components/Searchbar/searchField.module.css

@@ -1,54 +0,0 @@
-.field {
-  position: relative;
-  display: flex;
-  align-items: center;
-  font-size: 1.125rem;
-  background-color: transparent;
-  color: currentColor;
-}
-
-.icon {
-  position: absolute;
-  left: 0;
-  font-size: 1.5rem;
-  margin: 0 1rem;
-}
-
-.input {
-  height: 3.5rem; /* 56px */
-  background-color: transparent;
-  font-size: inherit;
-  flex-grow: 1;
-  padding-left: 3rem;
-  padding-right: 1rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  border: 2px solid;
-  border-radius: 0.25rem;
-  outline: none;
-}
-
-.input[type="search"]::-webkit-search-decoration,
-.input[type="search"]::-webkit-search-cancel-button {
-  appearance: none;
-}
-
-.input:focus,
-.input[value] {
-  background-color: var(--theme-background-default);
-}
-
-.dismiss {
-  position: absolute;
-  right: 0;
-  margin: 0.375rem;
-}
-
-.clear {
-  position: absolute;
-  right: 0;
-  margin: 1rem;
-  border-radius: 100%;
-  width: 1.5rem;
-  height: 1.5rem;
-}

package/lib/components/Searchbar/searchbarBase.module.css

@@ -1,20 +0,0 @@
-.searchbar {
-  position: relative;
-}
-
-.searchbar[data-autocomplete="true"][aria-expanded="true"] input {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.searchbar nav {
-  display: none;
-}
-
-.searchbar[aria-expanded="true"] nav {
-  position: absolute;
-  display: block;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  margin-top: -2px;
-}

package/lib/components/Snackbar/Snackbar.stories.tsx

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Snackbar } from './Snackbar';
-
-const meta = {
-  title: 'Snackbar/Snackbar',
-  component: Snackbar,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    id: 'id',
-    icon: 'bell',
-    message: 'Message',
-  },
-} satisfies Meta<typeof Snackbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};

package/lib/components/Snackbar/Snackbar.tsx

@@ -1,32 +0,0 @@
-import type { ElementType } from 'react';
-import type { IconName } from '../Icon';
-import { SnackbarBase, type SnackbarColor } from './SnackbarBase';
-import { SnackbarLabel } from './SnackbarLabel';
-import { SnackbarMedia } from './SnackbarMedia';
-
-export interface SnackbarProps {
-  id: string;
-  /** Element type to render */
-  as?: ElementType;
-  /** Color */
-  color?: SnackbarColor;
-  /** Message */
-  message?: string;
-  /** Icon */
-  icon?: IconName;
-  /** Dismissable */
-  dismissable?: boolean;
-  /** onDismiss */
-  onDismiss?: () => void;
-  /** Optional classname */
-  className?: string;
-}
-
-export const Snackbar = ({ as = 'a', color, message, icon, ...rest }: SnackbarProps) => {
-  return (
-    <SnackbarBase as={as} color={color} {...rest}>
-      <SnackbarMedia icon={icon} />
-      <SnackbarLabel>{message}</SnackbarLabel>
-    </SnackbarBase>
-  );
-};

package/lib/components/Snackbar/SnackbarBase.tsx

@@ -1,39 +0,0 @@
-import cx from 'classnames';
-import type { ElementType, ReactNode } from 'react';
-import { IconButton } from '../Button';
-import styles from './snackbarBase.module.css';
-
-export type SnackbarColor = 'default' | 'accent';
-
-interface SnackbarBaseProps {
-  as?: ElementType;
-  color?: SnackbarColor;
-  href?: string;
-  className?: string;
-  dismissable?: boolean;
-  onDismiss?: () => void;
-  children?: ReactNode;
-}
-
-export const SnackbarBase = ({
-  as,
-  children,
-  className,
-  color,
-  dismissable = true,
-  onDismiss,
-  ...rest
-}: SnackbarBaseProps) => {
-  const Component = as || 'div';
-
-  return (
-    <Component className={cx(styles.item, className)} data-color={color} {...rest}>
-      <div className={styles.content}>{children}</div>
-      {dismissable && (
-        <div className={styles.action}>
-          <IconButton icon="x-mark" variant="text" onClick={onDismiss} className={styles.dismiss} />
-        </div>
-      )}
-    </Component>
-  );
-};

package/lib/components/Snackbar/SnackbarLabel.tsx

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './snackbarLabel.module.css';
-
-export interface SnackbarLabelProps {
-  children?: ReactNode;
-}
-
-export const SnackbarLabel = ({ children }: SnackbarLabelProps) => {
-  return <span className={styles.label}>{children}</span>;
-};

package/lib/components/Snackbar/SnackbarMedia.tsx

@@ -1,14 +0,0 @@
-import { Icon, type IconName } from '../Icon';
-import styles from './snackbarMedia.module.css';
-
-interface SnackbarMediaProps {
-  icon?: IconName;
-}
-
-export const SnackbarMedia = ({ icon = 'bell' }: SnackbarMediaProps) => {
-  return (
-    <div className={styles.media}>
-      <Icon name={icon} variant="solid" className={styles.icon} />
-    </div>
-  );
-};

package/lib/components/Snackbar/snackbarBase.module.css

@@ -1,55 +0,0 @@
-.item {
-  border: none;
-
-  color: inherit;
-  font: inherit;
-  text-align: inherit;
-
-  line-height: normal;
-
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-
-  user-select: none;
-
-  border-radius: 0.5rem;
-}
-
-.item {
-  position: relative;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: inherit;
-}
-
-.content {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  margin: 0.625rem;
-}
-
-.action {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  margin: 0.625rem;
-}
-
-/* colors */
-
-.item {
-  background-color: var(--global-base-default);
-  color: #fff;
-  box-shadow: var(--ds-shadow-xs);
-}
-
-.item[data-color="accent"] {
-  background-color: var(--theme-surface-default);
-}
-
-.item[data-color="accent"]:hover {
-  background-color: var(--theme-surface-hover);
-}

package/lib/components/Snackbar/snackbarLabel.module.css

@@ -1,6 +0,0 @@
-/* label */
-
-.label {
-  display: flex;
-  justify-content: center;
-}

package/lib/components/Snackbar/snackbarMedia.module.css

@@ -1,10 +0,0 @@
-.media {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon {
-  font-size: 1.5rem;
-  margin: 0.625rem;
-}

package/lib/components/Toolbar/Toolbar.stories.tsx

@@ -1,188 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { type FilterState, Toolbar } from './Toolbar';
-
-const meta = {
-  title: 'Toolbar/Toolbar',
-  component: Toolbar,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {},
-} satisfies Meta<typeof Toolbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    menu: {
-      label: 'Ola Nordmann',
-      value: 'ola',
-      items: [
-        {
-          avatar: {
-            name: 'Ola Nordmann',
-          },
-          label: 'Ola Nordmann',
-        },
-        {
-          avatar: {
-            name: 'Kari Nordmann',
-          },
-          label: 'Kari Nordmann',
-        },
-      ],
-    },
-    filters: [
-      {
-        removable: true,
-        name: 'from',
-        optionType: 'checkbox',
-        label: 'Velg avsender',
-        options: [
-          {
-            value: 'skatt',
-            label: 'Skatteetaten',
-          },
-          {
-            value: 'brreg',
-            label: 'Brønnøysund',
-          },
-          {
-            value: 'nav',
-            label: 'NAV',
-          },
-          {
-            value: 'oslo',
-            label: 'Oslo kommune',
-          },
-        ],
-      },
-      {
-        removable: true,
-        name: 'to',
-        optionType: 'radio',
-        label: 'Velg mottaker',
-        options: [
-          {
-            value: 'ola',
-            label: 'Ola Nordmann',
-          },
-          {
-            value: 'kari',
-            label: 'Kari Nordmann',
-          },
-        ],
-      },
-      {
-        removable: true,
-        name: 'status',
-        optionType: 'radio',
-        label: 'Velg status',
-        options: [
-          {
-            groupId: '1',
-            value: 'draft',
-            label: 'Utkast',
-          },
-          {
-            groupId: '1',
-            value: 'sent',
-            label: 'Sendt',
-          },
-          {
-            groupId: '2',
-            value: 'in-progress',
-            label: 'Under arbeid',
-          },
-          {
-            groupId: '2',
-            value: 'requires-attention',
-            label: 'Krever handling',
-          },
-          {
-            groupId: '2',
-            value: 'completed',
-            label: 'Avsluttet',
-          },
-        ],
-      },
-    ],
-  },
-};
-
-export const CustomFilterLabel: Story = {
-  args: {
-    ...Default.args,
-    getFilterLabel: (name, value) => {
-      return Array.isArray(value) && value.length > 1 ? `${value.length} selected` : value;
-    },
-  },
-};
-
-export const NoFilters: Story = {
-  args: {
-    ...Default.args,
-    filters: [],
-  },
-};
-
-export const StaticFilters: Story = {
-  args: {
-    filters: Default?.args?.filters?.map((item) => {
-      return {
-        ...item,
-        removable: false,
-      };
-    }),
-  },
-};
-
-export const ControlledStateFilters = () => {
-  const [filterState, setFilterState] = React.useState<FilterState>({
-    from: ['skatt', 'brreg'],
-  });
-  return <Toolbar filters={Default.args!.filters} filterState={filterState} onFilterStateChange={setFilterState} />;
-};
-
-export const FilterAndSearch: Story = {
-  args: {
-    search: {
-      placeholder: 'Søk etter filter',
-    },
-    filters: [
-      {
-        name: 'status',
-        optionType: 'checkbox',
-        label: 'Velg status',
-        options: [
-          {
-            groupId: '1',
-            value: 'draft',
-            label: 'Utkast',
-          },
-          {
-            groupId: '1',
-            value: 'sent',
-            label: 'Sendt',
-          },
-          {
-            groupId: '2',
-            value: 'in-progress',
-            label: 'Under arbeid',
-          },
-          {
-            groupId: '2',
-            value: 'requires-attention',
-            label: 'Krever handling',
-          },
-          {
-            groupId: '2',
-            value: 'completed',
-            label: 'Avsluttet',
-          },
-        ],
-      },
-    ],
-  },
-};