@altinn/altinn-components 0.6.0 → 0.6.1

package/lib/components/List/ListItemBase.tsx

@@ -1,82 +0,0 @@
-import cx from 'classnames';
-import type { ElementType, KeyboardEvent, KeyboardEventHandler, ReactNode } from 'react';
-import { Badge, type BadgeProps } from '../Badge';
-import { ContextMenu, type ContextMenuProps } from '../ContextMenu';
-import { Icon, type IconName } from '../Icon';
-import styles from './listItemBase.module.css';
-
-export type ListItemColor = 'default' | 'accent';
-export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-interface ListItemBaseProps {
-  as?: ElementType;
-  size?: ListItemSize;
-  menu?: ContextMenuProps;
-  linkIcon?: IconName;
-  color?: ListItemColor;
-  badge?: BadgeProps;
-  href?: string;
-  className?: string;
-  active?: boolean;
-  hidden?: boolean;
-  collapsible?: boolean;
-  selected?: boolean;
-  expanded?: boolean;
-  onClick?: () => void;
-  onKeyPress?: KeyboardEventHandler;
-  children?: ReactNode;
-  style?: React.CSSProperties;
-}
-
-export const ListItemBase = ({
-  as,
-  children,
-  className,
-  href,
-  size,
-  color,
-  active = false,
-  hidden = false,
-  collapsible,
-  selected,
-  expanded,
-  linkIcon,
-  menu,
-  badge,
-  onClick,
-  onKeyPress,
-  style,
-}: ListItemBaseProps) => {
-  const Component = as || 'a';
-
-  const applicableIcon =
-    collapsible && expanded ? 'chevron-up' : collapsible ? 'chevron-down' : href ? 'chevron-right' : linkIcon;
-  return (
-    <Component
-      className={cx(styles.item, className)}
-      data-color={color}
-      data-size={size}
-      data-active={active}
-      aria-hidden={hidden}
-      aria-selected={selected}
-      aria-expanded={expanded}
-      href={href}
-      onKeyPress={(e: KeyboardEvent) => {
-        e.key === 'Enter' && onClick?.();
-        onKeyPress?.(e);
-      }}
-      onClick={onClick}
-      tabIndex={-1}
-      style={style}
-    >
-      <div className={styles.content} data-size={size}>
-        {children}
-      </div>
-      <div className={styles.action}>
-        {badge && <Badge {...badge} />}
-        {menu && <ContextMenu {...menu} />}
-        {applicableIcon && <Icon name={applicableIcon} className={styles.linkIcon} />}
-      </div>
-    </Component>
-  );
-};

package/lib/components/List/ListItemLabel.tsx

@@ -1,29 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ListItemSize } from './ListItemBase';
-import styles from './listItemLabel.module.css';
-
-export interface ListItemLabelProps {
-  size?: ListItemSize;
-  title?: string;
-  description?: string;
-  children?: ReactNode;
-}
-
-export const ListItemLabel = ({ size = 'sm', title, description, children }: ListItemLabelProps) => {
-  return (
-    <span className={styles.label} data-size={size}>
-      {children ? (
-        children
-      ) : (
-        <>
-          <strong className={styles.title} data-size={size}>
-            {title}
-          </strong>
-          <span className={styles.description} data-size={size}>
-            {description}
-          </span>
-        </>
-      )}
-    </span>
-  );
-};

package/lib/components/List/ListItemMedia.tsx

@@ -1,59 +0,0 @@
-import type { ReactNode } from 'react';
-import { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize } from '../Avatar';
-import { Icon, type IconName } from '../Icon';
-import type { ListItemColor, ListItemSize } from './ListItemBase';
-import styles from './listItemMedia.module.css';
-
-interface ListItemMediaProps {
-  color?: ListItemColor;
-  size?: ListItemSize;
-  icon?: IconName;
-  avatar?: AvatarProps;
-  avatarGroup?: AvatarGroupProps;
-  children?: ReactNode;
-}
-
-const sizeMap = {
-  avatar: {
-    xs: 'xs',
-    sm: 'sm',
-    md: 'md',
-    lg: 'lg',
-    xl: 'xl',
-  },
-  avatarGroup: {
-    xs: 'xs',
-    sm: 'xs',
-    md: 'sm',
-    lg: 'md',
-    xl: 'lg',
-  },
-};
-
-export const ListItemMedia = ({
-  size = 'sm',
-  color = 'default',
-  icon,
-  avatar,
-  avatarGroup,
-  children,
-}: ListItemMediaProps) => {
-  if (!icon && !avatar && !avatarGroup && !children) {
-    return false;
-  }
-
-  return (
-    <div className={styles.media} data-size={size} data-color={!icon ? null : color}>
-      {(icon && <Icon name={icon} variant="outline" className={styles.icon} />) ||
-        (avatar && <Avatar {...avatar} size={sizeMap?.avatar[size] as AvatarSize} className={styles.avatar} />) ||
-        (avatarGroup && (
-          <AvatarGroup
-            {...avatarGroup}
-            size={sizeMap?.avatarGroup[size] as AvatarSize}
-            className={styles.avatarGroup}
-          />
-        ))}
-      {children}
-    </div>
-  );
-};

package/lib/components/List/listBase.module.css

@@ -1,30 +0,0 @@
-.list {
-  display: flex;
-  flex-direction: column;
-}
-
-.list[data-spacing="sm"] {
-  row-gap: 4px;
-}
-
-.list[data-spacing="md"] {
-  row-gap: 8px;
-}
-
-.list[data-spacing="lg"] {
-  row-gap: 16px;
-}
-
-/*
-
-.list[data-spacing="none"] > :first-child {
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
-}
-
-.list[data-spacing="none"] > :last-child {
-  border-bottom-left-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-}
-
-*/

package/lib/components/List/listItemBase.module.css

@@ -1,97 +0,0 @@
-/* reset */
-
-.item {
-  color: inherit;
-  font: inherit;
-  text-align: inherit;
-
-  line-height: normal;
-
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-
-  user-select: none;
-  cursor: pointer;
-}
-
-.item {
-  width: 100%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: inherit;
-}
-
-/* sizes */
-
-.item[data-size="xs"] {
-  min-height: 36px;
-}
-
-.item[data-size="sm"] {
-  min-height: 44px;
-}
-
-.item[data-size="md"] {
-  min-height: 56px;
-}
-
-.item[data-size="lg"] {
-  min-height: 64px;
-}
-
-.item[data-size="xl"] {
-  min-height: 72px;
-}
-
-/* content (icon + header) */
-
-.content {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.5rem 0.625rem;
-}
-
-/* action */
-
-.action {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.625rem;
-}
-
-.linkIcon {
-  font-size: 1.5rem;
-}
-
-/* colors */
-
-.item {
-  background-color: var(--theme-background-default);
-  box-shadow: var(--ds-shadow-xs);
-}
-
-.item:hover {
-  outline: 2px solid var(--theme-border-strong);
-  z-index: 2;
-}
-
-.item:hover strong {
-  text-decoration: underline;
-}
-
-.item[data-active="true"] {
-  background-color: var(--theme-surface-default);
-}
-
-.item[data-color="accent"] {
-  background-color: var(--theme-surface-default);
-}
-
-.item[data-color="accent"]:hover {
-  background-color: var(--theme-surface-hover);
-}

package/lib/components/List/listItemLabel.module.css

@@ -1,55 +0,0 @@
-/* label */
-
-.label {
-  display: flex;
-  justify-content: center;
-}
-
-.label[data-size="xs"] {
-  align-items: center;
-  column-gap: 0.25em;
-  font-size: 0.875rem;
-}
-
-.label[data-size="sm"] {
-  align-items: center;
-  column-gap: 0.25rem;
-}
-
-.label[data-size="md"] {
-  flex-direction: column;
-}
-
-.label[data-size="lg"] {
-  flex-direction: column;
-}
-
-.label[data-size="xl"] {
-  flex-direction: column;
-}
-
-/* title + descr */
-
-.title {
-  font-weight: 600;
-  margin: 0;
-}
-
-.title[data-size="lg"] {
-  font-size: 1.125rem;
-}
-
-.title[data-size="xl"] {
-  font-size: 1.25rem;
-}
-
-.description {
-  color: var(--theme-text-subtle);
-  margin: 0;
-}
-
-.description[data-size="md"],
-.description[data-size="lg"],
-.description[data-size="xl"] {
-  font-size: 0.875em;
-}

package/lib/components/List/listItemMedia.module.css

@@ -1,41 +0,0 @@
-/* media */
-
-.media {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1em;
-  height: 1em;
-}
-
-.media {
-  font-size: 1.5rem;
-}
-
-.media[data-size="xs"] {
-  font-size: 1.25rem;
-}
-
-.media[data-size="md"] {
-  font-size: 1.875rem;
-}
-
-.media[data-size="md"] .icon {
-  font-size: 1.5rem;
-}
-
-.media[data-size="lg"] {
-  font-size: 2.25rem;
-}
-
-.media[data-size="lg"] .icon {
-  font-size: 1.75rem;
-}
-
-.media[data-size="xl"] {
-  font-size: 2.75rem;
-}
-
-.media[data-size="xl"] .icon {
-  font-size: 2rem;
-}