@altinn/altinn-components 0.6.0 → 0.6.1

package/lib/components/Searchbar/SearchField.tsx

@@ -1,81 +0,0 @@
-'use client';
-import cx from 'classnames';
-import { type ChangeEventHandler, type FocusEventHandler, useRef } from 'react';
-import { IconButton } from '../Button';
-import { Icon } from '../Icon';
-import styles from './searchField.module.css';
-
-export interface SearchFieldProps {
-  name: string;
-  value?: string;
-  className?: string;
-  expanded?: boolean;
-  placeholder?: string;
-  onFocus?: FocusEventHandler;
-  onBlur?: FocusEventHandler;
-  onChange?: ChangeEventHandler;
-  onClear?: () => void;
-  onClose?: () => void;
-  onEnter?: () => void;
-  tabIndex?: number;
-}
-
-export const SearchField = ({
-  className,
-  expanded,
-  name = 'q',
-  value,
-  placeholder = 'Søk',
-  onFocus,
-  onBlur,
-  onChange,
-  onClear,
-  onClose,
-  onEnter,
-  tabIndex,
-}: SearchFieldProps) => {
-  const ref = useRef<HTMLInputElement>(null);
-
-  const handleOnKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Escape') {
-      ref.current?.blur();
-    }
-    if (event.key === 'Enter') {
-      onEnter?.();
-    }
-  };
-
-  return (
-    <div className={cx(styles.field, className)} aria-expanded={expanded}>
-      <input
-        ref={ref}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        name={name}
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        className={styles.input}
-        onKeyUp={handleOnKeyUp}
-        type="search"
-        aria-haspopup
-        autoComplete="off"
-        aria-autocomplete="list"
-        aria-expanded={expanded}
-        tabIndex={tabIndex ?? 0}
-      />
-      <Icon name="magnifying-glass" className={styles.icon} />
-      {(value && (
-        <IconButton
-          icon="x-mark"
-          color="secondary"
-          variant="solid"
-          size="custom"
-          className={styles.clear}
-          onClick={onClear}
-        />
-      )) ||
-        (expanded && <IconButton icon="x-mark" variant="text" className={styles.dismiss} onClick={onClose} />)}
-    </div>
-  );
-};

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,26 +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;
-  tabIndex?: number;
-}
-
-export const Searchbar = ({
-  className,
-  autocomplete,
-  expanded = false,
-  onClose,
-  tabIndex,
-  ...search
-}: SearchbarProps) => {
-  return (
-    <SearchbarBase className={className} expanded={expanded} autocomplete={!!autocomplete}>
-      <SearchField {...search} expanded={expanded} onClose={onClose} tabIndex={tabIndex} />
-      {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;
-}