@dnb/eufemia 9.18.0 → 9.19.0

package/components/tag/Tag.tsx

@@ -2,21 +2,27 @@ import React from 'react'
 import classnames from 'classnames'
 
 // Components
-import { createSkeletonClass } from '../skeleton/SkeletonHelper'
-import { createSpacingClasses } from '../space/SpacingHelper'
-import Icon, { IconPrimaryIcon } from '../icon-primary/IconPrimary'
+import IconPrimary, { IconPrimaryIcon } from '../icon-primary/IconPrimary'
+import Button from '../button/Button'
 
 // Shared
 import Context from '../../shared/Context'
 import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
-import { extendPropsWithContext } from '../../shared/component-helper'
+import {
+  warn,
+  extendPropsWithContext,
+} from '../../shared/component-helper'
+
+// Internal
+import TagGroup from './TagGroup'
+import { TagGroupContext } from './TagContext'
 
 export interface TagProps {
   /**
    * The content of the tag element, can be a string or a React Element.
    * Default: null
    */
-  text?: React.ReactNode
+  text?: string | React.ReactNode
 
   /**
    * Icon displaying on the left side
@@ -41,6 +47,24 @@ export interface TagProps {
    * Default: null
    */
   children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...
+
+  /**
+   * Handle the click event on 'tag' element
+   * Default: null
+   */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+
+  /**
+   * Handle the delete event on 'tag' element
+   * Default: null
+   */
+  onDelete?: React.MouseEventHandler<HTMLButtonElement>
+
+  /**
+   * Handle the delete event on 'tag' element
+   * Default: null
+   */
+  omitOnKeyUpDeleteEvent?: boolean
 }
 
 export const defaultProps = {
@@ -49,47 +73,122 @@ export const defaultProps = {
   text: null,
   children: null,
   icon: null,
+  onClick: null,
+  onDelete: null,
+  omitOnKeyUpDeleteEvent: false,
 }
 
-function Tag(localProps: TagProps & ISpacingProps) {
+const Tag = (localProps: TagProps & ISpacingProps) => {
   // Every component should have a context
   const context = React.useContext(Context)
+  const tagGroupContext = React.useContext(TagGroupContext)
+
   // Extract additional props from global context
-  const { className, skeleton, children, icon, text, ...props } =
-    extendPropsWithContext(
-      { ...defaultProps, ...localProps },
-      defaultProps,
-      context?.translation?.Tag,
-      context?.Tag
-    )
-  const skeletonClasses = createSkeletonClass('shape', skeleton, context)
-  const spacingClasses = createSpacingClasses(props)
+  const {
+    className,
+    skeleton,
+    children,
+    text,
+    onClick,
+    onDelete,
+    omitOnKeyUpDeleteEvent,
+    ...props
+  } = extendPropsWithContext(
+    { ...defaultProps, ...localProps },
+    defaultProps,
+    context?.translation?.Tag,
+    context?.Tag,
+    tagGroupContext
+  )
 
   const content = text || children
+  const isClickable = !!onClick
+  const isRemovable = !!onDelete && !isClickable
+  const isInteractive = isClickable || isRemovable
+
+  const tagClassNames = classnames(
+    'dnb-tag',
+    className,
+    isInteractive && 'dnb-tag--interactive',
+    isRemovable && 'dnb-tag--removable'
+  )
+
+  const isDeleteKeyboardEvent = (keyboardEvent) => {
+    return (
+      keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete'
+    )
+  }
+
+  const handleKeyUp = (event) => {
+    if (onDelete && isDeleteKeyboardEvent(event)) {
+      onDelete(event)
+    }
+  }
+
+  if (!isInteractive) {
+    props.element = 'span'
+    props.type = ''
+  }
+
+  if (isRemovable) {
+    props.icon = getDeleteIcon()
+  }
+
+  if (!tagGroupContext) {
+    warn(
+      `Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`
+    )
+  }
 
   return (
-    <div
-      className={classnames(
-        'dnb-tag',
-        skeletonClasses,
-        spacingClasses,
-        className
-      )}
+    <Button
       data-testid="tag"
+      variant="unstyled"
+      size="small"
+      icon_position={isRemovable ? 'right' : 'left'}
+      className={tagClassNames}
+      on_click={onClick || onDelete}
+      text={content}
+      skeleton={skeleton}
+      onKeyUp={
+        isRemovable && !omitOnKeyUpDeleteEvent
+          ? (e) => handleKeyUp(e)
+          : undefined
+      }
       {...props}
-    >
-      {icon && (
-        <span data-testid="tag-icon" className="dnb-tag__icon">
-          <Icon icon={icon} right="x-small" />
-        </span>
-      )}
-      {content && (
-        <span data-testid="tag-text" className="dnb-tag__text">
-          {content}
-        </span>
-      )}
-    </div>
+    />
   )
+
+  function getDeleteIcon() {
+    return (
+      <IconPrimary
+        data-testid="tag-delete-icon"
+        inherit_color={false}
+        icon={
+          <svg
+            width="16"
+            height="16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z"
+              className="dnb-icon-close-circle-path"
+            />
+            <path
+              d="m5.5 10.5 5-5m0 5-5-5"
+              className="dnb-icon-close-cross-path"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        }
+      />
+    )
+  }
 }
 
+Tag.Group = TagGroup
+
 export default Tag

package/components/tag/TagContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export var TagGroupContext = React.createContext(null);

package/components/tag/TagContext.tsx

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const TagGroupContext = React.createContext(null)

package/components/tag/TagGroup.js

@@ -0,0 +1,60 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["label", "className", "children"];
+import "core-js/modules/es.array.map.js";
+
+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 { extendPropsWithContext } from '../../shared/component-helper';
+import { TagGroupContext } from './TagContext';
+export var defaultProps = {
+  label: null,
+  className: null,
+  children: null
+};
+
+function TagGroup(localProps) {
+  var context = React.useContext(Context);
+
+  var _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.TagGroup),
+      label = _extendPropsWithConte.label,
+      className = _extendPropsWithConte.className,
+      childrenProp = _extendPropsWithConte.children,
+      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+
+  var children = childrenProp;
+
+  if (Array.isArray(childrenProp)) {
+    children = _toConsumableArray(childrenProp).map(function (child) {
+      return child;
+    });
+  }
+
+  var spacingClasses = createSpacingClasses(props);
+  return React.createElement(TagGroupContext.Provider, {
+    value: props
+  }, React.createElement("div", _extends({
+    className: classnames('dnb-tag__group', spacingClasses, className),
+    "data-testid": "tag-group"
+  }, props), React.createElement("span", {
+    "data-testid": "tag-group-label",
+    className: "dnb-sr-only"
+  }, label), children));
+}
+
+export default TagGroup;

package/components/tag/TagGroup.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import classnames from 'classnames'
+
+// Components
+import { createSpacingClasses } from '../space/SpacingHelper'
+
+// Shared
+import Context from '../../shared/Context'
+import { ISpacingProps } from '../../shared/interfaces'
+import { extendPropsWithContext } from '../../shared/component-helper'
+import { TagGroupContext } from './TagContext'
+
+export interface TagGroupProps {
+  /**
+   * Aria label to describe the tag group
+   * Default: null
+   */
+  label: string
+
+  /**
+   * Custom className on the component root
+   * Default: null
+   */
+  className?: string
+
+  /**
+   * The tags to group.
+   * Default: null
+   */
+  children?: React.ReactNode
+}
+
+export const defaultProps = {
+  label: null,
+  className: null,
+  children: null,
+}
+
+function TagGroup(localProps: TagGroupProps & ISpacingProps) {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  // Extract additional props from global context
+  const {
+    label,
+    className,
+    children: childrenProp,
+    ...props
+  } = extendPropsWithContext(
+    { ...defaultProps, ...localProps },
+    defaultProps,
+    context?.TagGroup
+  )
+
+  let children = childrenProp
+
+  if (Array.isArray(childrenProp)) {
+    children = [...childrenProp].map((child) => {
+      return child
+    })
+  }
+
+  const spacingClasses = createSpacingClasses(props)
+
+  return (
+    <TagGroupContext.Provider value={props}>
+      <div
+        className={classnames('dnb-tag__group', spacingClasses, className)}
+        data-testid="tag-group"
+        {...props}
+      >
+        <span data-testid="tag-group-label" className="dnb-sr-only">
+          {label}
+        </span>
+        {children}
+      </div>
+    </TagGroupContext.Provider>
+  )
+}
+
+export default TagGroup

package/components/tag/style/_tag.scss

@@ -3,24 +3,88 @@
 *
 */
 
-:root {
-  --tag-border-radius: 2.5rem;
-}
+@import '../../button/style/themes/_button-mixins.scss';
+@import './themes/_tag-mixins.scss';
 
 .dnb-tag {
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: var(--spacing-xx-small) var(--spacing-x-small);
-  font-size: var(--font-size-x-small);
-  background-color: var(--color-black-8);
-  border-radius: var(--tag-border-radius);
-  &__icon {
-    display: flex;
-    align-items: center;
+  &.dnb-button {
+    appearance: none;
+    background-color: var(--color-black-8);
+
+    &.dnb-button--size-small {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
+
+    &.dnb-button--size-small.dnb-button--has-icon {
+      padding-left: 0;
+    }
+
+    .dnb-button__text {
+      font-size: var(--font-size-x-small);
+      transform: none;
+    }
   }
-  &__text {
-    color: var(--color-black-80);
+
+  &:not(#{&}--interactive) {
+    user-select: unset;
+    cursor: unset;
+    .dnb-button__text {
+      cursor: text;
+    }
+  }
+
+  &--interactive {
+    &.dnb-button {
+      color: var(--color-sea-green);
+
+      @include fakeBorder(var(--color-sea-green), 0.0625rem, inset, true);
+      @include buttonHover(var(--color-sea-green), var(--color-black-8));
+      @include buttonFocus(var(--color-sea-green), var(--color-black-8));
+      @include buttonActive(
+        var(--color-sea-green),
+        var(--color-mint-green-50)
+      );
+      &[disabled] {
+        color: var(--color-sea-green-30);
+        background-color: var(--color-white);
+        @include fakeBorder(var(--color-sea-green-30));
+      }
+    }
+  }
+
+  &--removable {
+    &.dnb-button {
+      color: var(--color-white);
+      background-color: var(--color-sea-green);
+      @include deleteIcon(var(--color-white), var(--color-sea-green));
+
+      @include buttonFocus(var(--color-sea-green), var(--color-white)) {
+        @include deleteIcon();
+      }
+      @include buttonHover(var(--color-sea-green), var(--color-white)) {
+        @include deleteIcon();
+      }
+      @include buttonActive(
+        var(--color-sea-green),
+        var(--color-mint-green-50)
+      ) {
+        @include deleteIcon();
+      }
+      &[disabled] {
+        @include deleteIcon(
+          var(--color-mint-green-50),
+          var(--color-sea-green-30)
+        );
+      }
+
+      .dnb-button__text {
+        padding-left: 0.5rem;
+      }
+    }
+
+    &.dnb-button--size-small.dnb-button--has-icon {
+      padding-right: 0;
+    }
   }
 }