@dnb/eufemia 9.17.2 → 9.18.0

package/esm/components/tag/Tag.tsx

@@ -0,0 +1,95 @@
+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'
+
+// Shared
+import Context from '../../shared/Context'
+import { ISpacingProps, SkeletonTypes } from '../../shared/interfaces'
+import { extendPropsWithContext } from '../../shared/component-helper'
+
+export interface TagProps {
+  /**
+   * The content of the tag element, can be a string or a React Element.
+   * Default: null
+   */
+  text?: React.ReactNode
+
+  /**
+   * Icon displaying on the left side
+   * Default: null
+   */
+  icon?: IconPrimaryIcon
+
+  /**
+   * Custom className on the component root
+   * Default: null
+   */
+  className?: string
+
+  /**
+   * Skeleton should be applied when loading content
+   * Default: null
+   */
+  skeleton?: SkeletonTypes
+
+  /**
+   * The content of the tag element, can be a string or a React Element. Will be overwritten by text prop
+   * Default: null
+   */
+  children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...
+}
+
+export const defaultProps = {
+  className: null,
+  skeleton: false,
+  text: null,
+  children: null,
+  icon: null,
+}
+
+function Tag(localProps: TagProps & ISpacingProps) {
+  // Every component should have a context
+  const context = React.useContext(Context)
+  // 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 content = text || children
+
+  return (
+    <div
+      className={classnames(
+        'dnb-tag',
+        skeletonClasses,
+        spacingClasses,
+        className
+      )}
+      data-testid="tag"
+      {...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>
+  )
+}
+
+export default Tag

package/esm/components/tag/index.d.ts

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

package/esm/components/tag/index.js

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

package/esm/components/tag/style/_tag.scss

@@ -0,0 +1,26 @@
+/*
+* Tag component
+*
+*/
+
+:root {
+  --tag-border-radius: 2.5rem;
+}
+
+.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;
+  }
+  &__text {
+    color: var(--color-black-80);
+  }
+}

package/esm/components/tag/style/dnb-tag.css

@@ -0,0 +1,109 @@
+/*
+* DNB Tag
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+.dnb-tag {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  margin: 0;
+  padding: 0; }
+  .dnb-tag *,
+  .dnb-tag ::before,
+  .dnb-tag ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-tag ::before,
+  .dnb-tag ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Tag component
+*
+*/
+:root {
+  --tag-border-radius: 2.5rem; }
+
+.dnb-tag {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0.25rem 0.5rem;
+  padding: var(--spacing-xx-small) var(--spacing-x-small);
+  font-size: 0.875rem;
+  font-size: var(--font-size-x-small);
+  background-color: #ebebeb;
+  background-color: var(--color-black-8);
+  border-radius: 2.5rem;
+  border-radius: var(--tag-border-radius); }
+  .dnb-tag__icon {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  .dnb-tag__text {
+    color: #333;
+    color: var(--color-black-80); }

package/esm/components/tag/style/dnb-tag.min.css

@@ -0,0 +1 @@
+.dnb-tag{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tag *,.dnb-tag :after,.dnb-tag :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tag :after,.dnb-tag :before{text-decoration:inherit;vertical-align:inherit}:root{--tag-border-radius:2.5rem}.dnb-tag{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;background-color:#ebebeb;background-color:var(--color-black-8);border-radius:2.5rem;border-radius:var(--tag-border-radius);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;font-size:.875rem;font-size:var(--font-size-x-small);justify-content:center;padding:.25rem .5rem;padding:var(--spacing-xx-small) var(--spacing-x-small)}.dnb-tag,.dnb-tag__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.dnb-tag__icon{display:-webkit-box;display:-ms-flexbox;display:flex}.dnb-tag__text{color:#333;color:var(--color-black-80)}

package/esm/components/tag/style/dnb-tag.scss

@@ -0,0 +1,12 @@
+/*
+* DNB Tag
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+.dnb-tag {
+  @include componentReset();
+}
+
+@import './_tag.scss';

package/esm/components/tag/style/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-tag.scss'

package/esm/components/tag/style/index.js

@@ -0,0 +1 @@
+import "./dnb-tag.min.css";

package/esm/components/tag/style.js

@@ -0,0 +1 @@
+import "./style/dnb-tag.min.css";

package/esm/components/textarea/Textarea.d.ts

@@ -96,7 +96,7 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
   textarea_state?: string;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -154,7 +154,7 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
   textarea_class?: string;
 
   /**
-   * Provide the Textarea element with any attributes by using an Object `textarea_attributes={{size:&#39;2&#39;}}` or a JSON Object `textarea_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be send along and set as a Textarea element attribute.
+   * Provide the Textarea element with any attributes by using an Object `textarea_attributes={{size:&#39;2&#39;}}` or a JSON Object `textarea_attributes=&#39;{"size":"2"}&#39;`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as a Textarea element attribute.
    */
   textarea_attributes?: TextareaTextareaAttributes;
   readOnly?: TextareaReadOnly;
@@ -162,7 +162,7 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
   cols?: TextareaCols;
 
   /**
-   * By providing a React.ref we can get the internal used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
+   * By providing a React.ref we can get the internally used Textarea element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.
    */
   inner_ref?: TextareaInnerRef;
 
@@ -202,7 +202,7 @@ export interface TextareaProps extends React.HTMLProps<HTMLElement> {
   on_change?: (...args: any[]) => any;
 
   /**
-   * Will be called on focus set by the user. Returns `{ value, event }`.
+   * Will be called on the focus set by the user. Returns `{ value, event }`.
    */
   on_focus?: (...args: any[]) => any;
 

package/esm/components/toggle-button/ToggleButton.d.ts

@@ -64,12 +64,12 @@ export type ToggleButtonChildren = string | ((...args: any[]) => any);
  */
 export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   /**
-   * The text show in the ToggleButton.
+   * The text shown in the ToggleButton.
    */
   text?: string;
 
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: ToggleButtonLabel;
   label_direction?: ToggleButtonLabelDirection;
@@ -81,7 +81,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   title?: string;
 
   /**
-   * Determine whether the ToggleButton is checked or not. Default will be `false`.
+   * Determine whether the ToggleButton is checked or not. The default will be `false`.
    */
   checked?: ToggleButtonChecked;
   variant?: ToggleButtonVariant;
@@ -100,7 +100,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   status?: ToggleButtonStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -131,7 +131,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   icon?: ToggleButtonIcon;
 
   /**
-   * Position of icon inside the toggle button. Set to `left` or `right`. Defaults to `right` if not set.
+   * Position of the icon inside the toggle button. Set to `left` or `right`. Defaults to `right` if not set.
    */
   icon_position?: ToggleButtonIconPosition;
 
@@ -173,7 +173,7 @@ export interface ToggleButtonProps extends React.HTMLProps<HTMLElement> {
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an boolean and string `{ checked, value, event }`.
+   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
    */
   on_change?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;

package/esm/components/toggle-button/ToggleButtonGroup.d.ts

@@ -65,7 +65,7 @@ export type ToggleButtonGroupChildren =
 export interface ToggleButtonGroupProps
   extends React.HTMLProps<HTMLElement> {
   /**
-   * Use either the `label` property or provide custom one.
+   * Use either the `label` property or provide a custom one.
    */
   label?: ToggleButtonGroupLabel;
   label_direction?: ToggleButtonGroupLabelDirection;
@@ -94,7 +94,7 @@ export interface ToggleButtonGroupProps
   status?: ToggleButtonGroupStatus;
 
   /**
-   * Defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.
+   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.
    */
   status_state?: string;
 
@@ -158,7 +158,7 @@ export interface ToggleButtonGroupProps
   custom_method?: (...args: any[]) => any;
 
   /**
-   * Will be called on state changes made by the user. Returns an boolean and string `{ checked, value, event }`.
+   * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`.
    */
   on_change?: (...args: any[]) => any;
 }

package/esm/components/tooltip/Tooltip.d.ts

@@ -57,7 +57,7 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   id?: string;
 
   /**
-   * If the tooltip should animate from one target to the next, define an unique ID.
+   * If the tooltip should animate from one target to the next, define a unique ID.
    */
   group?: string;
 
@@ -72,7 +72,7 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   active?: TooltipActive;
 
   /**
-   * Defines the offset position in corporation to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
+   * Defines the offset position to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
    */
   position?: TooltipPosition;
 
@@ -82,13 +82,13 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   arrow?: TooltipArrow;
 
   /**
-   * Defines the offset alignment in corporation to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
+   * Defines the offset alignment to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
    */
   align?: TooltipAlign;
   animate_position?: TooltipAnimatePosition;
 
   /**
-   * If set to `true`, the Tooltip will be fixed in it&#39;s scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   * If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. Defaults to `false`.
    */
   fixed_position?: TooltipFixedPosition;
 
@@ -98,7 +98,7 @@ export interface TooltipProps extends React.HTMLProps<HTMLElement> {
   no_animation?: TooltipNoAnimation;
 
   /**
-   * Define the delay until the tooltip should show up after initial hover / active state.
+   * Define the delay until the tooltip should show up after the initial hover / active state.
    */
   show_delay?: TooltipShowDelay;
 

package/esm/components/tooltip/TooltipContainer.d.ts

@@ -28,7 +28,7 @@ export interface TooltipContainerProps
   active?: TooltipContainerActive;
 
   /**
-   * Defines the offset position in corporation to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
+   * Defines the offset position to the target element the arrow appears. Can be `top`, `right`, `left` and `bottom`. Defaults to `top`.
    */
   position?: string;
 
@@ -38,13 +38,13 @@ export interface TooltipContainerProps
   arrow?: string;
 
   /**
-   * Defines the offset alignment in corporation to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
+   * Defines the offset alignment to the target element the arrow appears. Can be `center`, `right` and `left`.Defaults to `center`.
    */
   align?: string;
   animate_position?: TooltipContainerAnimatePosition;
 
   /**
-   * If set to `true`, the Tooltip will be fixed in it's scroll position by using CSS `position: fixed;`. Defaults to `false`.
+   * If set to `true`, the Tooltip will be fixed in its scroll position by using CSS `position: fixed;`. Defaults to `false`.
    */
   fixed_position?: TooltipContainerFixedPosition;
 

package/esm/components/tooltip/TooltipPortal.d.ts

@@ -15,7 +15,7 @@ export interface TooltipPortalProps extends React.HTMLProps<HTMLElement> {
   active?: boolean;
 
   /**
-   * If the tooltip should animate from one target to the next, define an unique ID.
+   * If the tooltip should animate from one target to the next, define a unique ID.
    */
   group?: string;
 

package/esm/components/tooltip/TooltipWithEvents.d.ts

@@ -18,7 +18,7 @@ export interface TooltipWithEventsProps
   internal_id?: string;
 
   /**
-   * Define the delay until the tooltip should show up after initial hover / active state.
+   * Define the delay until the tooltip should show up after the initial hover / active state.
    */
   show_delay?: TooltipWithEventsShowDelay;
   target?: TooltipWithEventsTarget;