@altinn/altinn-components 0.5.2 → 0.6.1

package/lib/components/Toolbar/ToolbarOptions.tsx

@@ -1,74 +0,0 @@
-import { type ChangeEventHandler, Fragment } from 'react';
-import {
-  MenuBase,
-  MenuHeader,
-  MenuList,
-  MenuListItem,
-  MenuOption,
-  type MenuOptionProps,
-  MenuSearch,
-  type MenuSearchProps,
-} from '../Menu';
-
-export type ToolbarOptionType = 'checkbox' | 'radio';
-
-export interface OptionGroup {
-  title?: string;
-  divider?: boolean;
-  optionType?: ToolbarOptionType;
-}
-
-export interface ToolbarOptionsProps {
-  options: MenuOptionProps[];
-  onChange?: ChangeEventHandler;
-  search?: MenuSearchProps;
-  optionType: ToolbarOptionType;
-  optionGroups?: { [key: string]: OptionGroup };
-}
-
-export const ToolbarOptions = ({ search, optionGroups = {}, options, onChange, optionType }: ToolbarOptionsProps) => {
-  const sections = options.reduce(
-    (acc, option) => {
-      const group = option.group || '';
-      acc[group] = acc[group] || [];
-      acc[group].push(option);
-      return acc;
-    },
-    {} as Record<string, MenuOptionProps[]>,
-  );
-
-  return (
-    <MenuBase theme="global">
-      {search && <MenuSearch {...search} />}
-      <MenuList>
-        {Object.keys(sections)?.map((key, groupIndex) => {
-          const groupProps = optionGroups[key] || {};
-          const { title, divider = true } = groupProps;
-          return (
-            <Fragment key={key}>
-              {groupIndex && divider ? <MenuListItem role="separator" /> : ''}
-
-              {title && (
-                <MenuListItem>
-                  <MenuHeader title={title} />
-                </MenuListItem>
-              )}
-              {sections[key]?.map((item) => (
-                <MenuListItem key={item.value}>
-                  <MenuOption
-                    onChange={onChange}
-                    label={item.label}
-                    badge={item.badge}
-                    type={optionGroups?.[key]?.optionType || optionType}
-                    value={item.value}
-                    checked={item.checked}
-                  />
-                </MenuListItem>
-              ))}
-            </Fragment>
-          );
-        })}
-      </MenuList>
-    </MenuBase>
-  );
-};

package/lib/components/Toolbar/ToolbarSearch.stories.ts

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { ToolbarSearch } from './ToolbarSearch';
-
-const meta = {
-  title: 'Toolbar/ToolbarSearch',
-  component: ToolbarSearch,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {},
-} satisfies Meta<typeof ToolbarSearch>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};

package/lib/components/Toolbar/ToolbarSearch.tsx

@@ -1,24 +0,0 @@
-import type { ChangeEventHandler } from 'react';
-import styles from './toolbarSearch.module.css';
-
-export interface ToolbarSearchProps {
-  placeholder?: string;
-  name: string;
-  value: string;
-  onChange: ChangeEventHandler;
-}
-
-export const ToolbarSearch = ({ value, name, placeholder = 'Søk', onChange }: ToolbarSearchProps) => {
-  return (
-    <div className={styles.field}>
-      <input
-        type="search"
-        value={value}
-        name={name}
-        placeholder={placeholder}
-        className={styles.input}
-        onChange={onChange}
-      />
-    </div>
-  );
-};

package/lib/components/Toolbar/toolbarAdd.module.css

@@ -1,7 +0,0 @@
-.menu {
-  position: relative;
-}
-
-.menu[aria-expanded="true"] {
-  z-index: 2;
-}

package/lib/components/Toolbar/toolbarBase.module.css

@@ -1,19 +0,0 @@
-.toolbar {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-  gap: 0.5rem;
-  /*  padding: 0 1rem; */
-}
-
-@media (min-width: 1024px) {
-  .toolbar {
-    padding: 0;
-    /*    margin: 1.125rem 0; */
-  }
-
-  .toolbar > * {
-    width: auto;
-  }
-}

package/lib/components/Toolbar/toolbarButton.module.css

@@ -1,3 +0,0 @@
-.removeButton > button:hover + * + * {
-  text-decoration: line-through;
-}

package/lib/components/Toolbar/toolbarFilter.module.css

@@ -1,25 +0,0 @@
-.filter {
-  position: relative;
-}
-
-.filter[aria-expanded="true"] {
-  z-index: 2;
-}
-
-.dropdown[aria-expanded="true"] {
-  display: none;
-}
-
-.drawer[aria-expanded="true"] {
-  display: block;
-}
-
-@media (min-width: 1024px) {
-  .drawer[aria-expanded="true"] {
-    display: none;
-  }
-
-  .dropdown[aria-expanded="true"] {
-    display: block;
-  }
-}

package/lib/components/Toolbar/toolbarMenu.module.css

@@ -1,7 +0,0 @@
-.menu {
-  position: relative;
-}
-
-.menu[aria-expanded="true"] {
-  z-index: 2;
-}

package/lib/components/Toolbar/toolbarSearch.module.css

@@ -1,28 +0,0 @@
-.input {
-  font-size: 0.875rem;
-  line-height: 1rem;
-  font-weight: 600;
-  padding: 9px;
-  border-radius: 2px;
-  border: 1px solid;
-  border-color: var(--theme-border-default);
-}
-
-.button[aria-selected="true"] {
-  background-color: var(--theme-background-subtle);
-  color: var(--theme-text-default);
-}
-
-.close {
-  padding: 6px 0;
-}
-
-.icon {
-  border-left: 1px solid;
-  border-color: var(--theme-background-subtle);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  padding: 0 6px;
-}

package/lib/components/Typography/Heading.tsx

@@ -1,23 +0,0 @@
-import cx from 'classnames';
-import type { ReactNode } from 'react';
-import styles from './heading.module.css';
-
-export type HeadingSize = 'sm' | 'md' | 'lg';
-export type HeadingComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
-export interface HeadingProps {
-  as?: HeadingComponent;
-  size?: HeadingSize;
-  className?: string;
-  children?: ReactNode;
-}
-
-export const Heading = ({ as = 'h2', size = 'md', className, children }: HeadingProps) => {
-  const H = as;
-
-  return (
-    <H className={cx(styles.heading, className)} data-size={size}>
-      {children}
-    </H>
-  );
-};

package/lib/components/Typography/Typography.tsx

@@ -1,24 +0,0 @@
-import cx from 'classnames';
-import type { ElementType, ReactNode } from 'react';
-import type { LayoutTheme } from '../Layout';
-import styles from './typography.module.css';
-
-export type TypographySize = 'sm' | 'md' | 'lg';
-
-export interface TypographyProps {
-  as?: ElementType;
-  size?: TypographySize;
-  theme?: LayoutTheme;
-  className?: string;
-  children?: ReactNode;
-}
-
-export const Typography = ({ as = 'div', size = 'md', theme, className, children }: TypographyProps) => {
-  const Component = as;
-
-  return (
-    <Component className={cx(styles.typography, className)} data-size={size} data-theme={theme}>
-      {children}
-    </Component>
-  );
-};

package/lib/components/Typography/heading.module.css

@@ -1,21 +0,0 @@
-.heading {
-  margin: 0;
-}
-
-.heading[data-size="sm"] {
-  font-size: 1.125rem;
-  font-weight: 500;
-  line-height: 1.25;
-}
-
-.heading[data-size="md"] {
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: 1.5rem;
-}
-
-.heading[data-size="lg"] {
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 1.5rem;
-}

package/lib/components/Typography/typography.module.css

@@ -1,64 +0,0 @@
-.typography {
-  width: 100%;
-  max-width: 45rem;
-  line-height: 1.5;
-}
-
-.item[data-size="sm"] {
-  font-size: 0.875rem;
-}
-
-.item[data-size="md"] {
-  font-size: 1rem;
-}
-
-.typography[data-size="lg"] {
-  font-size: 1.125rem;
-}
-
-.typography > *:first-child {
-  margin-top: 0;
-}
-
-.typography > *:last-child {
-  margin-bottom: 0;
-}
-
-.typography h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-top: 1.5em;
-  margin-bottom: 0;
-}
-
-.typography h3 {
-  font-size: 1em;
-  font-weight: 600;
-  margin: 1em 0;
-}
-
-.typography h4 {
-  font-size: 1em;
-  font-weight: 600;
-  margin: 1em 0 0;
-}
-
-.typography p {
-  font-size: 1em;
-  margin: 1em 0;
-}
-
-.typography strong {
-  font-weight: 600;
-}
-
-.typography a {
-  color: var(--link-base-default);
-}
-
-.typography ul:not([class]),
-.typography ol:not([class]) {
-  list-style-position: inside;
-  padding-left: 1rem;
-  margin: 1em 0;
-}

package/lib/css/colors.css

@@ -1,113 +0,0 @@
-:root {
-  --colors-neutral-1: #ffffff;
-  --colors-neutral-2: #f3f4f5;
-  --colors-neutral-3: #e2e3e5;
-  --colors-neutral-4: #cfd1d4;
-  --colors-neutral-5: #bec1c6;
-  --colors-neutral-6: #b9bcc1;
-  --colors-neutral-7: #7c818b;
-  --colors-neutral-8: #464e5c;
-  --colors-neutral-9: #212b3b;
-  --colors-neutral-10: #333c4a;
-  --colors-neutral-11: #464e5c;
-  --colors-neutral-12: #5d6470;
-  --colors-neutral-13: #232c3c;
-
-  --colors-company-1: #ffffff;
-  --colors-company-2: #e9f5ff;
-  --colors-company-3: #d3eafd;
-  --colors-company-4: #a5d6fb;
-  --colors-company-5: #78c1f9;
-  --colors-company-6: #4badf7;
-  --colors-company-7: #1e98f5;
-  --colors-company-8: #4086d7;
-  --colors-company-9: #111d46;
-  --colors-company-10: #364163;
-  --colors-company-11: #166aac;
-  --colors-company-12: #5a637f;
-  --colors-company-13: #1e2950;
-
-  --colors-person-1: #ffffff;
-  --colors-person-2: #eaf7ef;
-  --colors-person-3: #a8f3d0;
-  --colors-person-4: #6ee7b7;
-  --colors-person-5: #34d399;
-  --colors-person-6: #10b981;
-  --colors-person-7: #079669;
-  --colors-person-8: #347659;
-  --colors-person-9: #084826;
-  --colors-person-10: #076046;
-  --colors-person-11: #3b6d52;
-  --colors-person-12: #3b6d52;
-  --colors-person-13: #06331b;
-
-  /* link **/
-
-  --link-base-default: #2a4dd0;
-  --link-base-hover: #213ca3;
-  --link-base-active: #192d7b;
-
-  /* global */
-
-  --global-background-default: var(--colors-neutral-2);
-  --global-background-subtle: var(--colors-neutral-1);
-  --global-base-default: var(--colors-neutral-9);
-  --global-base-hover: var(--colors-neutral-10);
-  --global-base-active: var(--colors-neutral-11);
-  --global-border-default: var(--colors-neutral-7);
-  --global-border-strong: var(--colors-neutral-8);
-  --global-border-subtle: var(--colors-neutral-6);
-  --global-surface-active: var(--colors-neutral-5);
-  --global-surface-default: var(--colors-neutral-3);
-  --global-surface-hover: var(--colors-neutral-4);
-  --global-text-default: var(--colors-neutral-13);
-  --global-text-subtle: var(--colors-neutral-12);
-
-  /* neutral */
-
-  --neutral-background-default: var(--colors-neutral-1);
-  --neutral-background-subtle: var(--colors-neutral-2);
-  --neutral-base-default: var(--colors-neutral-9);
-  --neutral-base-hover: var(--colors-neutral-10);
-  --neutral-base-active: var(--colors-neutral-11);
-  --neutral-border-default: var(--colors-neutral-7);
-  --neutral-border-strong: var(--colors-neutral-8);
-  --neutral-border-subtle: var(--colors-neutral-6);
-  --neutral-surface-active: var(--colors-neutral-5);
-  --neutral-surface-default: var(--colors-neutral-3);
-  --neutral-surface-hover: var(--colors-neutral-4);
-  --neutral-text-default: var(--colors-neutral-13);
-  --neutral-text-subtle: var(--colors-neutral-12);
-
-  /* company */
-
-  --company-background-default: var(--colors-company-1);
-  --company-background-subtle: var(--colors-company-2);
-  --company-base-default: var(--colors-company-9);
-  --company-base-hover: var(--colors-company-10);
-  --company-base-active: var(--colors-company-11);
-  --company-border-default: var(--colors-company-7);
-  --company-border-strong: var(--colors-company-8);
-  --company-border-subtle: var(--colors-company-6);
-  --company-surface-active: var(--colors-company-5);
-  --company-surface-default: var(--colors-company-3);
-  --company-surface-hover: var(--colors-company-4);
-  --company-text-default: var(--colors-company-13);
-  --company-text-subtle: var(--colors-company-12);
-
-  /* person */
-
-  --person-background-default: var(--colors-person-1);
-  --person-background-subtle: var(--colors-person-2);
-  --person-base-default: var(--colors-person-9);
-  --person-base-hover: var(--colors-person-10);
-  --person-base-active: var(--colors-person-11);
-  --person-border-default: var(--colors-person-7);
-  --person-border-strong: var(--colors-person-8);
-  --person-border-subtle: var(--colors-person-6);
-  --person-surface-active: var(--colors-person-5);
-  --person-surface-default: var(--colors-person-3);
-  --person-surface-hover: var(--colors-person-4);
-  --person-text-default: var(--colors-person-13);
-  --person-text-subtle: var(--colors-person-12);
-}

package/lib/css/global.css

@@ -1,15 +0,0 @@
-@import "https://altinncdn.no/fonts/inter/inter.css";
-@import "./colors.css";
-@import "./shadows.css";
-@import "./theme-global.css";
-@import "./theme-global-dark.css";
-@import "./theme-article.css";
-@import "./theme-neutral.css";
-@import "./theme-company.css";
-@import "./theme-person.css";
-@import "./theme.css";
-
-* {
-  font-family: "Inter", sans-serif;
-  box-sizing: border-box;
-}

package/lib/css/shadows.css

@@ -1,7 +0,0 @@
-:root {
-  --ds-shadow-xs: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
-  --ds-shadow-sm: 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);
-  --ds-shadow-md: 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12);
-  --ds-shadow-lg: 0 0 1px 0 rgba(0, 0, 0, 0.13), 0 3px 5px 0 rgba(0, 0, 0, 0.13), 0 6px 12px 0 rgba(0, 0, 0, 0.14);
-  --ds-shadow-xl: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.16), 0 12px 24px 0 rgba(0, 0, 0, 0.16);
-}

package/lib/css/theme-article.css

@@ -1,15 +0,0 @@
-[data-theme="article"] {
-  --theme-background-default: var(--neutral-background-subtle);
-  --theme-background-subtle: var(--neutral-background-default);
-  --theme-base-active: var(--link-base-active);
-  --theme-base-default: var(--link-base-default);
-  --theme-base-hover: var(--link-base-hover);
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-  --theme-surface-active: var(--neutral-surface-active);
-  --theme-surface-default: var(--neutral-surface-default);
-  --theme-surface-hover: var(--neutral-surface-hover);
-  --theme-text-default: var(--neutral-text-default);
-  --theme-text-subtle: var(--neutral-text-subtle);
-}

package/lib/css/theme-company.css

@@ -1,15 +0,0 @@
-[data-theme="company"] {
-  --theme-background-default: var(--company-background-default);
-  --theme-background-subtle: var(--company-background-subtle);
-  --theme-base-active: var(--company-base-active);
-  --theme-base-default: var(--company-base-default);
-  --theme-base-hover: var(--company-base-hover);
-  --theme-border-default: var(--company-border-default);
-  --theme-border-strong: var(--company-border-strong);
-  --theme-border-subtle: var(--company-border-subtle);
-  --theme-surface-active: var(--company-surface-active);
-  --theme-surface-default: var(--company-surface-default);
-  --theme-surface-hover: var(--company-surface-hover);
-  --theme-text-default: var(--company-text-default);
-  --theme-text-subtle: var(--company-text-subtle);
-}

package/lib/css/theme-global-dark.css

@@ -1,19 +0,0 @@
-[data-theme="global-dark"] {
-  --theme-background-default: var(--company-base-hover);
-  --theme-background-subtle: var(--company-base-default);
-
-  --theme-base-default: var(--company-background-subtle);
-  --theme-base-hover: var(--company-base-hover);
-  --theme-base-active: var(--company-base-active);
-
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-
-  --theme-surface-default: var(--company-base-default);
-  --theme-surface-hover: var(--company-base-hover);
-  --theme-surface-active: var(--company-base-active);
-
-  --theme-text-default: var(--company-background-default);
-  --theme-text-subtle: var(--company-background-subtle);
-}

package/lib/css/theme-global.css

@@ -1,15 +0,0 @@
-[data-theme="global"] {
-  --theme-background-default: var(--neutral-background-subtle);
-  --theme-background-subtle: var(--neutral-background-default);
-  --theme-base-active: var(--company-base-active);
-  --theme-base-default: var(--company-base-default);
-  --theme-base-hover: var(--company-base-hover);
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-  --theme-surface-active: var(--neutral-surface-active);
-  --theme-surface-default: var(--neutral-surface-default);
-  --theme-surface-hover: var(--neutral-surface-hover);
-  --theme-text-default: var(--neutral-text-default);
-  --theme-text-subtle: var(--neutral-text-subtle);
-}

package/lib/css/theme-neutral.css

@@ -1,15 +0,0 @@
-[data-theme="neutral"] {
-  --theme-background-default: var(--neutral-background-default);
-  --theme-background-subtle: var(--neutral-background-subtle);
-  --theme-base-active: var(--neutral-base-active);
-  --theme-base-default: var(--neutral-base-default);
-  --theme-base-hover: var(--neutral-base-hover);
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-  --theme-surface-active: var(--neutral-surface-active);
-  --theme-surface-default: var(--neutral-surface-default);
-  --theme-surface-hover: var(--neutral-surface-hover);
-  --theme-text-default: var(--neutral-text-default);
-  --theme-text-subtle: var(--neutral-text-subtle);
-}

package/lib/css/theme-person.css

@@ -1,15 +0,0 @@
-[data-theme="person"] {
-  --theme-background-default: var(--person-background-default);
-  --theme-background-subtle: var(--person-background-subtle);
-  --theme-base-active: var(--person-base-active);
-  --theme-base-default: var(--person-base-default);
-  --theme-base-hover: var(--person-base-hover);
-  --theme-border-default: var(--person-border-default);
-  --theme-border-strong: var(--person-border-strong);
-  --theme-border-subtle: var(--person-border-subtle);
-  --theme-surface-active: var(--person-surface-active);
-  --theme-surface-default: var(--person-surface-default);
-  --theme-surface-hover: var(--person-surface-hover);
-  --theme-text-default: var(--person-text-default);
-  --theme-text-subtle: var(--person-text-subtle);
-}

package/lib/css/theme.css

@@ -1,22 +0,0 @@
-html {
-  --theme-background-default: var(--global-background-default);
-  --theme-background-subtle: var(--global-background-subtle);
-  --theme-base-active: var(--global-base-active);
-  --theme-base-default: var(--global-base-default);
-  --theme-base-hover: var(--global-base-hover);
-  --theme-border-default: var(--global-border-default);
-  --theme-border-strong: var(--global-border-strong);
-  --theme-border-subtle: var(--global-border-subtle);
-  --theme-surface-active: var(--global-surface-active);
-  --theme-surface-default: var(--global-surface-default);
-  --theme-surface-hover: var(--global-surface-hover);
-  --theme-text-default: var(--global-text-default);
-  --theme-text-subtle: var(--global-text-subtle);
-}
-html[data-theme] {
-  background: var(--theme-background-subtle);
-  color: var(--neutral-text-default);
-}
-body {
-  background-color: inherit;
-}

package/lib/hooks/useClickOutside.ts

@@ -1,22 +0,0 @@
-'use client';
-import { type RefObject, useEffect } from 'react';
-
-export const useClickOutside = (ref: RefObject<HTMLDivElement>, callback: () => void) => {
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        callback();
-      }
-    };
-
-    document.addEventListener('mouseup', handleClickOutside);
-    document.addEventListener('touchend', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mouseup', handleClickOutside);
-      document.removeEventListener('touchend', handleClickOutside);
-    };
-  }, [callback, ref]);
-
-  return ref;
-};

package/lib/hooks/useEscapeKey.ts

@@ -1,17 +0,0 @@
-'use client';
-import { useEffect } from 'react';
-
-export const useEscapeKey = (onEscape?: () => void): void => {
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onEscape?.();
-      }
-    };
-    document.addEventListener('keydown', handleEscape);
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [onEscape]);
-};