@dnb/eufemia 9.17.2 → 9.21.0

package/es/components/avatar/Avatar.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import classnames from 'classnames'
+
+// Components
+import { createSpacingClasses } from '../space/SpacingHelper'
+import { createSkeletonClass } from '../skeleton/SkeletonHelper'
+
+// Elements
+import Img, { ImgProps } from '../../elements/Img'
+
+// Shared
+import Context from '../../shared/Context'
+import { ISpacingProps } from '../../shared/interfaces'
+import { SkeletonShow } from '../skeleton/Skeleton'
+import { warn } from '../../shared/component-helper'
+import { usePropsWithContext } from '../../shared/hooks'
+
+// Internal
+import AvatarGroup, { AvatarGroupContext } from './AvatarGroup'
+
+export type AvatarSizes = 'small' | 'medium' | 'large' | 'x-large'
+export type AvatarVariants = 'primary' | 'secondary' | 'tertiary'
+
+export interface AvatarProps {
+  /**
+   * Used in combination with `src` to provide an alt attribute for the `img` element.
+   * Default: null
+   */
+  alt?: string
+
+  /**
+   * Custom className on the component root
+   * Default: null
+   */
+  className?: string
+
+  /**
+   * Skeleton should be applied when loading content
+   * Default: null
+   */
+  skeleton?: SkeletonShow
+
+  /**
+   * The content of the component. Can be used instead of prop "data".
+   * Default: null
+   */
+  children?: React.ReactNode
+
+  /**
+   * The size of the component.
+   * Default: medium.
+   */
+  size?: AvatarSizes
+
+  /**
+   * Specifies the path to the image
+   * Default: null
+   */
+  src?: string
+
+  /**
+   * Props applied to the `img` element if the component is used to display an image.
+   * Default: null
+   */
+  imgProps?: ImgProps
+
+  /**
+   * The variant of the component.
+   * Default: primary.
+   */
+  variant?: AvatarVariants
+}
+
+export const defaultProps = {
+  alt: null,
+  className: null,
+  size: 'medium',
+  src: null,
+  imgProps: null,
+  variant: 'primary',
+  skeleton: false,
+  children: null,
+}
+
+const Avatar = (localProps: AvatarProps & ISpacingProps) => {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  const avatarGroupContext = React.useContext(AvatarGroupContext)
+
+  // Extract additional props from global context
+  const {
+    alt,
+    className,
+    children: childrenProp,
+    size,
+    skeleton,
+    variant,
+    src,
+    imgProps,
+    ...props
+  } = usePropsWithContext(
+    localProps,
+    defaultProps,
+    context?.Avatar,
+    avatarGroupContext
+  )
+
+  let children = null
+
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context)
+  const spacingClasses = createSpacingClasses(props)
+
+  const childrenIsString = typeof childrenProp === 'string'
+
+  if (src || imgProps) {
+    const imageProps = { src, alt, ...imgProps }
+    children = <Img {...imageProps} />
+  } else if (childrenIsString) {
+    const firstLetterUpperCase = childrenProp.charAt(0).toUpperCase()
+    children = (
+      <span data-testid="avatar-text" aria-hidden>
+        {firstLetterUpperCase}
+      </span>
+    )
+  } else {
+    children = childrenProp
+  }
+
+  if (!avatarGroupContext) {
+    warn(
+      `Avatar group required: An Avatar requires an Avatar.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`
+    )
+  }
+
+  return (
+    <span
+      className={classnames(
+        'dnb-avatar',
+        `dnb-avatar--${variant || 'primary'}`,
+        `dnb-avatar--size-${size || 'medium'}`,
+        skeletonClasses,
+        spacingClasses,
+        className
+      )}
+      data-testid="avatar"
+      {...props}
+    >
+      {childrenIsString && (
+        <span data-testid="avatar-label" className="dnb-sr-only">
+          {childrenProp}
+        </span>
+      )}
+      {children}
+    </span>
+  )
+}
+
+Avatar.Group = AvatarGroup
+
+export { AvatarGroup }
+
+export default Avatar

package/es/components/avatar/AvatarGroup.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["label", "className", "children", "size", "maxElements", "variant"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from 'react';
+import classnames from 'classnames';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import Context from '../../shared/Context';
+import { usePropsWithContext } from '../../shared/hooks';
+export const defaultProps = {
+  label: null,
+  className: null,
+  maxElements: 4,
+  size: 'medium',
+  children: null,
+  variant: 'primary'
+};
+export const AvatarGroupContext = React.createContext(null);
+
+const AvatarGroup = localProps => {
+  const context = React.useContext(Context);
+
+  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.AvatarGroup),
+        {
+    label,
+    className,
+    children: childrenProp,
+    size,
+    maxElements: maxElementsProp,
+    variant
+  } = _usePropsWithContext,
+        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+
+  const maxElements = maxElementsProp && maxElementsProp > 0 ? maxElementsProp : 4;
+  let children = childrenProp;
+  let numOfHiddenAvatars = 0;
+
+  if (Array.isArray(childrenProp)) {
+    const total = childrenProp.length;
+
+    if (total > maxElements) {
+      numOfHiddenAvatars = total - maxElements + 1;
+    }
+
+    children = childrenProp.slice(0, total - numOfHiddenAvatars).map((child, i) => {
+      const appliedSize = child.props.size ? child.props.size : size;
+      const appliedVariant = child.props.variant ? child.props.variant : variant;
+      return React.cloneElement(child, {
+        size: appliedSize,
+        variant: appliedVariant,
+        style: _objectSpread(_objectSpread({}, child.props.style), {}, {
+          zIndex: total - i
+        }),
+        key: i
+      });
+    });
+  }
+
+  const spacingClasses = createSpacingClasses(props);
+  return React.createElement(AvatarGroupContext.Provider, {
+    value: props
+  }, React.createElement("span", _extends({
+    className: classnames('dnb-avatar__group', spacingClasses, className),
+    "data-testid": "avatar-group"
+  }, props), React.createElement("span", {
+    "data-testid": "avatar-group-label",
+    className: "dnb-sr-only"
+  }, label), children, numOfHiddenAvatars ? React.createElement(ElementsHidden, {
+    size: size
+  }, "+", numOfHiddenAvatars) : null));
+};
+
+function ElementsHidden(props) {
+  const {
+    size,
+    children
+  } = props;
+  return React.createElement("span", {
+    className: `dnb-avatar__group--elements-left dnb-avatar__group--elements-left--size-${size || 'medium'}`,
+    "data-testid": "elements-left"
+  }, children);
+}
+
+export default AvatarGroup;

package/es/components/avatar/AvatarGroup.tsx

@@ -0,0 +1,163 @@
+import React from 'react'
+import classnames from 'classnames'
+
+// Components
+import { createSpacingClasses } from '../space/SpacingHelper'
+import { AvatarSizes, AvatarVariants } from './Avatar'
+
+// Shared
+import Context from '../../shared/Context'
+import { ISpacingProps } from '../../shared/interfaces'
+import { usePropsWithContext } from '../../shared/hooks'
+
+export interface AvatarGroupProps {
+  /**
+   * Label to describe the avatar group
+   * Default: null
+   */
+  label: React.ReactNode
+
+  /**
+   * Custom className on the component root
+   * Default: null
+   */
+  className?: string
+
+  /**
+   * Number of max displayed elements, including the "elements hidden text (+x)".
+   * Default: 4
+   */
+  maxElements?: number
+
+  /**
+   * The avatars to group.
+   * Default: null
+   */
+  children?: React.ReactNode
+
+  /**
+   * The size of the Avatars, and "elements hidden text (+x)".
+   * Default: medium.
+   */
+  size?: AvatarSizes
+
+  /**
+   * The variant of the Avatars.
+   * Default: primary.
+   */
+  variant?: AvatarVariants
+}
+
+export const defaultProps = {
+  label: null,
+  className: null,
+  maxElements: 4,
+  size: 'medium',
+  children: null,
+  variant: 'primary',
+}
+
+export const AvatarGroupContext = React.createContext(null)
+
+const AvatarGroup = (localProps: AvatarGroupProps & ISpacingProps) => {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  // Extract additional props from global context
+  const {
+    label,
+    className,
+    children: childrenProp,
+    size,
+    maxElements: maxElementsProp,
+    variant,
+    ...props
+  } = usePropsWithContext(localProps, defaultProps, context?.AvatarGroup)
+
+  const maxElements =
+    maxElementsProp && maxElementsProp > 0 ? maxElementsProp : 4
+
+  let children = childrenProp
+  let numOfHiddenAvatars = 0
+
+  if (Array.isArray(childrenProp)) {
+    const total = childrenProp.length
+
+    if (total > maxElements) {
+      numOfHiddenAvatars = total - maxElements + 1
+    }
+
+    children = childrenProp
+      .slice(0, total - numOfHiddenAvatars)
+      .map((child, i) => {
+        const appliedSize = child.props.size ? child.props.size : size
+        const appliedVariant = child.props.variant
+          ? child.props.variant
+          : variant
+        return React.cloneElement(child, {
+          size: appliedSize,
+          variant: appliedVariant,
+          style: { ...child.props.style, zIndex: total - i },
+          key: i,
+        })
+      })
+  }
+
+  const spacingClasses = createSpacingClasses(props)
+
+  return (
+    <AvatarGroupContext.Provider value={props}>
+      <span
+        className={classnames(
+          'dnb-avatar__group',
+          spacingClasses,
+          className
+        )}
+        data-testid="avatar-group"
+        {...props}
+      >
+        <span data-testid="avatar-group-label" className="dnb-sr-only">
+          {label}
+        </span>
+
+        {children}
+
+        {numOfHiddenAvatars ? (
+          <ElementsHidden size={size}>
+            +{numOfHiddenAvatars}
+          </ElementsHidden>
+        ) : null}
+      </span>
+    </AvatarGroupContext.Provider>
+  )
+}
+
+export interface ElementsHiddenProps {
+  /**
+   * The avatars to group.
+   * Default: null
+   */
+  children?: React.ReactNode
+
+  /**
+   * The size of the "elements hidden text (+x)".
+   * Default: medium.
+   */
+  size?: AvatarSizes
+}
+
+function ElementsHidden(props: ElementsHiddenProps) {
+  const { size, children } = props
+  return (
+    <span
+      className={classnames(
+        'dnb-avatar__group--elements-left',
+        `dnb-avatar__group--elements-left--size-${size || 'medium'}`
+      )}
+      data-testid="elements-left"
+    >
+      {children}
+    </span>
+  )
+}
+
+export default AvatarGroup

package/es/components/avatar/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Component Entry
+ *
+ */
+
+import Avatar from './Avatar'
+export default Avatar
+export * from './Avatar'

package/es/components/avatar/index.js

@@ -0,0 +1,3 @@
+import Avatar from './Avatar';
+export default Avatar;
+export * from './Avatar';

package/es/components/avatar/style/_avatar.scss

@@ -0,0 +1,147 @@
+/*
+* Avatar component
+*
+*/
+
+:root {
+  --avatar-font-size--small: var(--font-size-x-small);
+  --avatar-font-size--medium: var(--font-size-basis);
+  --avatar-font-size--large: var(--font-size-x-large);
+  --avatar-font-size--x-large: var(--font-size-x-large);
+  --avatar-line-height--small: var(--line-height-x-small);
+  --avatar-line-height--medium: var(--line-height-basis);
+  --avatar-line-height--large: var(--line-height-large);
+  --avatar-line-height--x-large: var(--line-height-large);
+  --avatar-width--small: 1.5rem;
+  --avatar-height--small: 1.5rem;
+  --avatar-width--medium: 2rem;
+  --avatar-height--medium: 2rem;
+  --avatar-width--large: 4rem;
+  --avatar-height--large: 4rem;
+  --avatar-width--x-large: 5rem;
+  --avatar-height--x-large: 5rem;
+}
+
+.dnb-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+  overflow: hidden;
+  user-select: none;
+
+  border-radius: 50%;
+  font-weight: var(--font-weight-medium);
+
+  // Safari needs a correct CSS specificity
+  &,
+  .dnb-core-style & {
+    line-height: var(--button-height);
+  }
+
+  &--size-small {
+    width: var(--avatar-width--small);
+    height: var(--avatar-height--small);
+    font-size: var(--avatar-font-size--small);
+    // Safari needs a correct CSS specificity
+    &,
+    .dnb-core-style & {
+      line-height: var(--avatar-line-height--small);
+    }
+  }
+
+  &--size-medium {
+    width: var(--avatar-width--medium);
+    height: var(--avatar-height--medium);
+    font-size: var(--avatar-font-size--medium);
+    // Safari needs a correct CSS specificity
+    &,
+    .dnb-core-style & {
+      line-height: var(--avatar-line-height--medium);
+    }
+  }
+
+  &--size-large {
+    width: var(--avatar-width--large);
+    height: var(--avatar-height--large);
+    font-size: var(--avatar-font-size--large);
+    // Safari needs a correct CSS specificity
+    &,
+    .dnb-core-style & {
+      line-height: var(--avatar-line-height--large);
+    }
+  }
+
+  &--size-x-large {
+    width: var(--avatar-width--x-large);
+    height: var(--avatar-height--x-large);
+    font-size: var(--avatar-font-size--x-large);
+    // Safari needs a correct CSS specificity
+    &,
+    .dnb-core-style & {
+      line-height: var(--avatar-line-height--x-large);
+    }
+  }
+
+  &__group {
+    display: inline-flex;
+    justify-content: flex;
+    flex-direction: row;
+
+    .dnb-avatar {
+      box-sizing: content-box;
+      border: 0.125rem solid var(--color-black-3);
+
+      &--size-small {
+        margin-left: -0.5rem;
+      }
+
+      &--size-medium {
+        margin-left: -0.75rem;
+      }
+
+      &--size-large {
+        margin-left: -1rem;
+      }
+
+      &--size-x-large {
+        margin-left: -1.5rem;
+      }
+
+      &:nth-of-type(2) {
+        margin-left: 0;
+        border-left: none;
+      }
+    }
+
+    &--elements-left {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--color-black-55);
+
+      &--size-small {
+        font-size: var(--font-size-x-small);
+        margin-left: 0.125rem;
+      }
+
+      &--size-medium {
+        font-size: var(--font-size-small);
+        margin-left: 0.125rem;
+      }
+
+      &--size-large {
+        font-size: var(--font-size-large);
+        margin-left: var(--spacing-xx-small);
+      }
+
+      &--size-x-large {
+        font-size: var(--font-size-large);
+        margin-left: var(--spacing-xx-small);
+      }
+    }
+  }
+}