@altinn/altinn-components 0.4.1 → 0.5.1

package/lib/components/Menu/menuItemLabel.module.css

@@ -4,12 +4,22 @@
   padding: 0 0.25rem;
 }
 
+.title {
+  color: var(--theme-text-default);
+}
+
 .title[data-size="lg"] {
   font-size: 1.125rem;
   line-height: 1.25;
   font-weight: 500;
 }
 
+.title[data-size="md"] {
+  font-size: 1rem;
+  line-height: 1.25;
+  font-weight: 500;
+}
+
 .title[data-size="sm"] {
   font-size: 1rem;
   line-height: 1.25;
@@ -17,6 +27,6 @@
 }
 
 .description {
-  font-size: 14px;
+  font-size: 0.875rem;
   color: var(--theme-text-subtle);
 }

package/lib/components/Menu/menuSearch.module.css

@@ -1,5 +1,6 @@
 .input {
   width: 100%;
+  height: 2.75rem;
   font-size: 0.875rem;
   line-height: 1rem;
   font-weight: normal;

package/lib/components/Meta/MetaItemBase.tsx

@@ -3,7 +3,7 @@ import type { ElementType, ReactNode } from 'react';
 import styles from './metaItem.module.css';
 
 export type MetaItemVariant = 'solid' | 'outline' | 'dotted' | 'text';
-export type MetaItemSize = 'xs' | 'sm' | 'md';
+export type MetaItemSize = 'xs'; // | 'sm' | 'md';
 export type MetaItemColor = 'subtle';
 
 export interface MetaItemBaseProps {

package/lib/components/Meta/MetaItemLabel.tsx

@@ -11,7 +11,7 @@ export interface MetaItemLabelProps {
   children?: ReactNode;
 }
 
-export const MetaItemLabel = ({ size = 'sm', variant = 'text', children }: MetaItemLabelProps) => {
+export const MetaItemLabel = ({ size = 'xs', variant = 'text', children }: MetaItemLabelProps) => {
   return (
     <span className={styles.label} data-variant={variant} data-size={size}>
       {children}

package/lib/components/Meta/MetaItemMedia.tsx

@@ -8,7 +8,7 @@ interface MetaItemMediaProps {
   icon?: IconName;
 }
 
-export const MetaItemMedia = ({ size = 'sm', icon, progress }: MetaItemMediaProps) => {
+export const MetaItemMedia = ({ size = 'xs', icon, progress }: MetaItemMediaProps) => {
   if (!icon && typeof progress !== 'number') {
     return false;
   }

package/lib/components/Page/PageBase.tsx

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

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

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

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

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

@@ -0,0 +1,16 @@
+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/index.ts

@@ -0,0 +1,5 @@
+export * from './PageBase';
+export * from './PageHeader';
+export * from './SectionBase';
+export * from './SectionHeader';
+export * from './SectionFooter';

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

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

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

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

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

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

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

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

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

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

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

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

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