@altinn/altinn-components 0.5.2 → 0.6.1

package/lib/components/Meta/metaItem.module.css

@@ -1,107 +0,0 @@
-.item {
-  border: 1px;
-  border-radius: 2px;
-  color: var(--neutral-text-subtle);
-  display: inline-flex;
-  align-items: center;
-  column-gap: 0.25em;
-  white-space: nowrap;
-  text-decoration: none;
-}
-
-button.item:hover,
-a.item:hover {
-  color: var(--theme-base-hover);
-}
-
-.label {
-  font-weight: normal;
-  line-height: 1;
-}
-
-/* xs = 24, sm = 30, md = 36? */
-
-.item[data-size="xs"] {
-  font-size: 0.875rem;
-  height: 1.5rem;
-}
-
-.item[data-size="sm"] {
-  font-size: 1rem;
-}
-
-.item[data-size="md"] {
-  font-size: 1.125rem;
-}
-
-/* media */
-
-.media {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* text */
-
-.item[data-variant="text"] {
-  border-color: transparent;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-/* outline */
-
-.item[data-variant="outline"] {
-  border-color: var(--theme-base-hover);
-  border-style: solid;
-}
-
-.item[data-variant="dotted"] {
-  border-color: var(--theme-base-hover);
-  border-style: dashed;
-}
-
-.item[data-variant="solid"] {
-  border-color: var(--theme-base-hover);
-  background-color: var(--theme-base-hover);
-  color: white;
-}
-
-.item[data-variant="outline"],
-.item[data-variant="dotted"],
-.item[data-variant="solid"] {
-  padding: 0 0.25em;
-}
-
-.label[data-variant="outline"],
-.label[data-variant="dotted"],
-.label[data-variant="solid"] {
-  font-size: 0.875em;
-  font-weight: 500;
-  padding: 0 0.25em;
-}
-
-/* xs */
-
-.item[data-size="xs"] {
-  font-size: 0.875rem;
-}
-
-.media[data-size="xs"] {
-  font-size: 1rem;
-}
-
-/* sm */
-
-.item[data-size="sm"] {
-  font-size: 1rem;
-}
-
-.media[data-size="sm"] {
-  font-size: 1.25rem;
-}
-
-.label[data-size="sm"] {
-  font-size: 1rem;
-}

package/lib/components/Meta/metaList.module.css

@@ -1,15 +0,0 @@
-.list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  text-indent: 0;
-
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  column-gap: 0.5rem;
-}
-
-.item {
-  margin: 0;
-}

package/lib/components/Page/PageBase.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from 'react';
-import { SectionBase, type SectionBaseProps } from './SectionBase';
-
-export interface PageBaseProps extends SectionBaseProps {
-  children?: ReactNode;
-}
-
-export const PageBase = ({ children, ...props }: PageBaseProps) => {
-  return (
-    <SectionBase as="main" {...props}>
-      {children}
-    </SectionBase>
-  );
-};

package/lib/components/Page/PageHeader.tsx

@@ -1,21 +0,0 @@
-import { Heading } from '../';
-import { PageHeaderMedia, type PageHeaderMediaProps } from './PageHeaderMedia';
-import { SectionBase, type SectionBaseProps } from './SectionBase';
-import styles from './pageHeader.module.css';
-
-export interface PageHeaderProps extends SectionBaseProps, PageHeaderMediaProps {
-  title?: string;
-}
-
-export const PageHeader = ({ title, icon, avatar, avatarGroup, children, ...props }: PageHeaderProps) => {
-  return (
-    <SectionBase as="header" {...props}>
-      <div className={styles.title}>
-        <PageHeaderMedia icon={icon} avatar={avatar} avatarGroup={avatarGroup} />
-        <Heading size="md">{title}</Heading>
-      </div>
-
-      {children}
-    </SectionBase>
-  );
-};

package/lib/components/Page/PageHeaderMedia.tsx

@@ -1,25 +0,0 @@
-import type { ReactNode } from 'react';
-import { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps } from '../Avatar';
-import { Icon, type IconName } from '../Icon';
-import styles from './pageHeader.module.css';
-
-export interface PageHeaderMediaProps {
-  icon?: IconName;
-  avatar?: AvatarProps;
-  avatarGroup?: AvatarGroupProps;
-  children?: ReactNode;
-}
-
-export const PageHeaderMedia = ({ icon, avatar, avatarGroup }: PageHeaderMediaProps) => {
-  if (!icon && !avatar && !avatarGroup) {
-    return false;
-  }
-
-  return (
-    <div className={styles.media}>
-      {(icon && <Icon name={icon} variant="outline" className={styles.icon} />) ||
-        (avatar && <Avatar {...avatar} size="xl" className={styles.avatar} />) ||
-        (avatarGroup && <AvatarGroup {...avatarGroup} size="lg" className={styles.avatarGroup} />)}
-    </div>
-  );
-};

package/lib/components/Page/SectionBase.tsx

@@ -1,52 +0,0 @@
-import cx from 'classnames';
-import type { CSSProperties, ReactNode } from 'react';
-import styles from './sectionBase.module.css';
-
-export type SectionElement = 'section' | 'main' | 'header' | 'footer' | 'div';
-export type SectionColor = 'transparent' | 'white' | 'subtle' | 'accent';
-export type SectionSpacing = 'none' | 'sm' | 'md' | 'lg';
-export type SectionMargin = 'none' | 'sm' | 'md' | 'lg';
-export type SectionShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export interface SectionBaseProps {
-  as?: SectionElement;
-  color?: SectionColor;
-  padding?: boolean;
-  spacing?: SectionSpacing;
-  margin?: SectionMargin;
-  shadow?: SectionShadow;
-  inset?: boolean;
-  children?: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export const SectionBase = ({
-  as = 'section',
-  color = 'transparent',
-  padding = false,
-  spacing = 'none',
-  margin = 'none',
-  shadow = 'none',
-  inset = false,
-  className,
-  style,
-  children,
-}: SectionBaseProps) => {
-  const Component = as;
-
-  return (
-    <Component
-      className={cx(styles.section, className)}
-      style={style}
-      data-color={color}
-      data-inset={inset}
-      data-padding={padding}
-      data-spacing={spacing}
-      data-margin={margin}
-      data-shadow={shadow}
-    >
-      {children}
-    </Component>
-  );
-};

package/lib/components/Page/SectionFooter.tsx

@@ -1,15 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './sectionFooter.module.css';
-
-export interface SectionFooterProps {
-  margin?: boolean;
-  children?: ReactNode;
-}
-
-export const SectionFooter = ({ margin = false, children }: SectionFooterProps) => {
-  return (
-    <footer data-margin={margin} className={styles.footer}>
-      {children}
-    </footer>
-  );
-};

package/lib/components/Page/SectionHeader.tsx

@@ -1,16 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './sectionHeader.module.css';
-
-export interface SectionHeaderProps {
-  padding?: boolean;
-  margin?: boolean;
-  children?: ReactNode;
-}
-
-export const SectionHeader = ({ margin = false, children }: SectionHeaderProps) => {
-  return (
-    <header data-margin={margin} className={styles.header}>
-      {children}
-    </header>
-  );
-};

package/lib/components/Page/pageHeader.module.css

@@ -1,5 +0,0 @@
-.title {
-  display: flex;
-  align-items: center;
-  column-gap: 0.5rem;
-}

package/lib/components/Page/sectionBase.module.css

@@ -1,82 +0,0 @@
-.section {
-  display: flex;
-  flex-direction: column;
-}
-
-/* inset on small screens */
-
-@media (max-width: 1024px) {
-  .section[data-inset="true"] {
-    margin-left: -1rem;
-    margin-right: -1rem;
-  }
-}
-
-/* spacing */
-
-.section[data-spacing="sm"] {
-  row-gap: 0.25rem;
-}
-
-.section[data-spacing="md"] {
-  row-gap: 0.5rem;
-}
-
-.section[data-spacing="lg"] {
-  row-gap: 1rem;
-}
-
-/* margin */
-
-.section[data-margin="sm"] {
-  margin: 0.25rem 0;
-}
-
-.section[data-margin="md"] {
-  margin: 0.5rem 0;
-}
-
-.section[data-margin="lg"] {
-  margin: 1rem 0;
-}
-
-/* padding */
-
-.section[data-padding="true"] {
-  padding: 1rem;
-}
-
-/* color */
-
-.section[data-color="white"] {
-  background-color: #fff;
-}
-
-.section[data-color="subtle"] {
-  background-color: var(--theme-surface-default);
-}
-
-.section[data-color="accent"] {
-  background-color: var(--theme-base-default);
-}
-
-/* size */
-
-.section[data-shadow="xs"] {
-  box-shadow: var(--ds-shadow-xs);
-}
-
-.section[data-shadow="sm"] {
-  box-shadow: var(--ds-shadow-sm);
-}
-.section[data-shadow="md"] {
-  box-shadow: var(--ds-shadow-md);
-}
-
-.section[data-shadow="lg"] {
-  box-shadow: var(--ds-shadow-lg);
-}
-
-.section[data-shadow="xl"] {
-  box-shadow: var(--ds-shadow-xl);
-}

package/lib/components/Page/sectionFooter.module.css

@@ -1,8 +0,0 @@
-.footer {
-  display: flex;
-  justify-content: space-between;
-}
-
-.header[data-margin="true"] {
-  margin: 0.5rem 0;
-}

package/lib/components/Page/sectionHeader.module.css

@@ -1,9 +0,0 @@
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.header[data-margin="true"] {
-  margin: 0.5rem 0;
-}

package/lib/components/RootProvider/RootProvider.tsx

@@ -1,55 +0,0 @@
-import { type ReactNode, createContext, useContext, useState } from 'react';
-
-type OpenElementId = 'search' | 'menu' | string;
-
-interface RootContextProvider {
-  currentId: OpenElementId;
-  toggleId: (elementId: OpenElementId) => void;
-  closeAll: () => void;
-  openId: (elementId: OpenElementId) => void;
-}
-
-const initialValue = {
-  currentId: '',
-};
-
-interface RootContextInitialValue {
-  currentId: OpenElementId;
-  setCurrentId?: (elementId: OpenElementId) => void;
-}
-
-const RootContext = createContext<RootContextInitialValue>(initialValue);
-
-interface ProviderProps {
-  children: ReactNode;
-  initialValue?: RootContextInitialValue;
-}
-
-export const RootProvider = ({ children, initialValue }: ProviderProps) => {
-  const [currentId, setCurrentId] = useState<OpenElementId>(initialValue?.currentId || '');
-  return (
-    <RootContext.Provider
-      value={{
-        currentId,
-        setCurrentId,
-      }}
-    >
-      {children}
-    </RootContext.Provider>
-  );
-};
-
-export const useRootContext = (): RootContextProvider => {
-  const { currentId, setCurrentId } = useContext(RootContext);
-  const toggleId = (elementId: OpenElementId) => setCurrentId!(currentId === elementId ? '' : elementId);
-  const closeAll = () => {
-    setCurrentId!('');
-  };
-  const openId = (elementId: OpenElementId) => setCurrentId!(elementId);
-  return {
-    currentId,
-    toggleId,
-    closeAll,
-    openId,
-  };
-};

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

@@ -1,77 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Autocomplete } from './Autocomplete';
-
-const meta = {
-  title: 'Header/Autocomplete',
-  component: Autocomplete,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {},
-} satisfies Meta<typeof Autocomplete>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Scopes: Story = {
-  args: {
-    groups: {},
-    items: [
-      {
-        id: '1a',
-        groupId: '1',
-        href: '#',
-        label: 'Alt i innboks',
-      },
-      {
-        id: '1b',
-        groupId: '1',
-        href: '#',
-        label: 'Alt i hele Altinn',
-      },
-    ],
-  },
-};
-
-export const ScopesAndSuggestions: Story = {
-  args: {
-    groups: {
-      '2': {
-        title: '2 treff i innboksen',
-      },
-    },
-    items: [
-      {
-        id: '1a',
-        groupId: '1',
-        href: '#',
-        label: () => (
-          <span>
-            <mark>skatt</mark> i innboks
-          </span>
-        ),
-      },
-      {
-        id: '1b',
-        groupId: '1',
-        href: '#',
-        label: () => (
-          <span>
-            <mark>skatt</mark> i hele Altinn
-          </span>
-        ),
-      },
-      {
-        id: '2a',
-        groupId: '2',
-        href: '#',
-        label: 'Skattemeldingen 2023',
-      },
-      {
-        id: '2b',
-        groupId: '2',
-        href: '#',
-        label: 'Skattemeldingen 2022',
-      },
-    ],
-  },
-};

package/lib/components/Searchbar/Autocomplete.tsx

@@ -1,44 +0,0 @@
-import { useMenu } from '../../hooks';
-import { AutocompleteBase } from './AutocompleteBase';
-import { AutocompleteGroup, type AutocompleteGroupProps } from './AutocompleteGroup';
-import { AutocompleteItem, type AutocompleteItemProps } from './AutocompleteItem';
-
-export interface AutocompleteProps {
-  items: AutocompleteItemProps[];
-  groups?: Record<string, AutocompleteGroupProps>;
-  expanded?: boolean;
-  className?: string;
-}
-
-export const Autocomplete = ({ className, items, groups = {}, expanded }: AutocompleteProps) => {
-  const { menu, setActiveIndex } = useMenu<AutocompleteItemProps, AutocompleteGroupProps>({
-    items,
-    groups,
-    groupByKey: 'groupId',
-    keyboardEvents: true,
-  });
-  return (
-    <AutocompleteBase className={className} expanded={expanded}>
-      {menu.map((group, index) => {
-        return (
-          <AutocompleteGroup {...group.props} key={index}>
-            <ul>
-              {group.items.map((item, index) => {
-                const {
-                  active,
-                  menuIndex,
-                  props: { groupId, ...itemProps },
-                } = item;
-                return (
-                  <li key={index} tabIndex={-1} onMouseEnter={() => setActiveIndex(menuIndex)}>
-                    <AutocompleteItem {...itemProps} active={active} />
-                  </li>
-                );
-              })}
-            </ul>
-          </AutocompleteGroup>
-        );
-      })}
-    </AutocompleteBase>
-  );
-};

package/lib/components/Searchbar/AutocompleteBase.tsx

@@ -1,16 +0,0 @@
-import cx from 'classnames';
-import type { ReactNode } from 'react';
-import styles from './autocompleteBase.module.css';
-export interface AutocompleteBaseProps {
-  className?: string;
-  expanded?: boolean;
-  children?: ReactNode;
-}
-
-export const AutocompleteBase = ({ expanded, children, className }: AutocompleteBaseProps) => {
-  return (
-    <nav className={cx(styles.autocomplete, className)} aria-expanded={expanded}>
-      {children}
-    </nav>
-  );
-};

package/lib/components/Searchbar/AutocompleteGroup.tsx

@@ -1,17 +0,0 @@
-import type { ReactNode } from 'react';
-import { MenuHeader } from '../Menu';
-import styles from './autocompleteGroup.module.css';
-
-export interface AutocompleteGroupProps {
-  title?: string;
-  children?: ReactNode;
-}
-
-export const AutocompleteGroup = ({ title, children }: AutocompleteGroupProps) => {
-  return (
-    <section className={styles.group}>
-      {title && <MenuHeader title={title} />}
-      {children}
-    </section>
-  );
-};

package/lib/components/Searchbar/AutocompleteItem.tsx

@@ -1,23 +0,0 @@
-import type { ElementType, ReactNode } from 'react';
-import { ListItemBase, ListItemLabel } from '../List/';
-import styles from './autocompleteItem.module.css';
-
-export interface AutocompleteItemProps {
-  as?: ElementType;
-  href?: string;
-  onClick?: () => void;
-  loading?: boolean;
-  active?: boolean;
-  disabled?: boolean;
-  label?: string | (() => ReactNode);
-  groupId?: string;
-  style?: React.CSSProperties;
-}
-
-export const AutocompleteItem = ({ as = 'a', label, active, ...rest }: AutocompleteItemProps) => {
-  return (
-    <ListItemBase className={styles.item} as={as} size="sm" active={active} linkIcon="chevron-right" {...rest}>
-      <ListItemLabel size="sm">{typeof label === 'function' ? label() : label}</ListItemLabel>
-    </ListItemBase>
-  );
-};

package/lib/components/Searchbar/SearchField.tsx

@@ -1,78 +0,0 @@
-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;
-  // TODO: Should be required?
-  value?: string;
-  className?: string;
-  expanded?: boolean;
-  placeholder?: string;
-  onFocus?: FocusEventHandler;
-  onBlur?: FocusEventHandler;
-  onChange?: ChangeEventHandler;
-  onClear?: () => void;
-  onClose?: () => void;
-  onEnter?: () => void;
-}
-
-export const SearchField = ({
-  className,
-  expanded,
-  name = 'q',
-  value,
-  placeholder = 'Søk',
-  onFocus,
-  onBlur,
-  onChange,
-  onClear,
-  onClose,
-  onEnter,
-}: 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}
-      />
-      <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>
-  );
-};