@dnb/eufemia 9.17.2 → 9.18.0

package/esm/fragments/scroll-view/ScrollView.js

@@ -10,6 +10,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
@@ -25,11 +26,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { extendPropsWithContext, registerElement, validateDOMAttributes, processChildren } from '../../shared/component-helper';
+import { validateDOMAttributes, processChildren, extendPropsWithContext } from '../../shared/component-helper';
 import Context from '../../shared/Context';
-import { spacingPropTypes, createSpacingClasses } from '../../components/space/SpacingHelper';
+import { createSpacingClasses } from '../../components/space/SpacingHelper';
 
 var ScrollView = function (_React$PureComponent) {
   _inherits(ScrollView, _React$PureComponent);
@@ -42,6 +42,9 @@ var ScrollView = function (_React$PureComponent) {
     _classCallCheck(this, ScrollView);
 
     _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "ref", void 0);
+
     _this.ref = props.innerRef || React.createRef();
     return _this;
   }
@@ -51,9 +54,11 @@ var ScrollView = function (_React$PureComponent) {
     value: function render() {
       var props = extendPropsWithContext(this.props, ScrollView.defaultProps, this.context.FormRow, this.context.ScrollView);
 
-      var className = props.className,
+      var _props$className = props.className,
+          className = _props$className === void 0 ? null : _props$className,
           _className = props.class,
-          innerRef = props.innerRef,
+          _props$innerRef = props.innerRef,
+          innerRef = _props$innerRef === void 0 ? null : _props$innerRef,
           attributes = _objectWithoutProperties(props, _excluded);
 
       var contentToRender = ScrollView.getContent(props);
@@ -68,11 +73,6 @@ var ScrollView = function (_React$PureComponent) {
       }), contentToRender);
     }
   }], [{
-    key: "enableWebComponent",
-    value: function enableWebComponent() {
-      registerElement(ScrollView.tagName, ScrollView, ScrollView.defaultProps);
-    }
-  }, {
     key: "getContent",
     value: function getContent(props) {
       if (props.text) return props.text;
@@ -94,12 +94,6 @@ _defineProperty(ScrollView, "defaultProps", {
   class: null
 });
 
-process.env.NODE_ENV !== "production" ? ScrollView.propTypes = _objectSpread(_objectSpread({}, spacingPropTypes), {}, {
-  className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
-  innerRef: PropTypes.object,
-  class: PropTypes.string
-}) : void 0;
 export default React.forwardRef(function ScrollViewRef(props, ref) {
   return React.createElement(ScrollView, _extends({
     innerRef: ref

package/esm/fragments/scroll-view/ScrollView.tsx

@@ -0,0 +1,92 @@
+/**
+ * Web ScrollView Component
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import {
+  validateDOMAttributes,
+  processChildren,
+  extendPropsWithContext,
+} from '../../shared/component-helper'
+import Context from '../../shared/Context'
+import { createSpacingClasses } from '../../components/space/SpacingHelper'
+import { ISpacingProps } from '../../shared/interfaces'
+
+interface ScrollViewProps extends ISpacingProps {
+  className: string
+  children: string | React.ReactNode | ((...args: any[]) => any)
+  innerRef: any
+  class: string
+  // All other props
+  [x: string]: any
+}
+
+class ScrollView extends React.PureComponent<ScrollViewProps> {
+  static tagName = 'dnb-scroll-view'
+  static contextType = Context
+  ref: any
+
+  static getContent(props) {
+    if (props.text) return props.text
+    return processChildren(props)
+  }
+
+  static defaultProps = {
+    className: null,
+    children: null,
+    innerRef: null,
+
+    class: null,
+  }
+
+  constructor(props) {
+    super(props)
+    this.ref = props.innerRef || React.createRef()
+  }
+
+  render() {
+    // use only the props from context, who are available here anyway
+    const props = extendPropsWithContext(
+      this.props,
+      ScrollView.defaultProps,
+      this.context.FormRow,
+      this.context.ScrollView
+    )
+
+    const {
+      className = null,
+      class: _className,
+      innerRef = null, // eslint-disable-line
+      ...attributes
+    } = props
+
+    const contentToRender = ScrollView.getContent(props)
+
+    const mainParams = {
+      className: classnames(
+        'dnb-scroll-view',
+        createSpacingClasses(props),
+        _className,
+        className
+      ),
+      ...attributes,
+    }
+
+    validateDOMAttributes(this.props, mainParams)
+
+    return (
+      <div {...mainParams} ref={this.ref}>
+        {contentToRender}
+      </div>
+    )
+  }
+}
+
+export default React.forwardRef(function ScrollViewRef(
+  props: ScrollViewProps,
+  ref
+) {
+  return <ScrollView innerRef={ref} {...props} />
+})

package/esm/index.d.ts

@@ -42,6 +42,7 @@ import Space from './components/space/Space'
 import StepIndicator from './components/step-indicator/StepIndicator'
 import Switch from './components/switch/Switch'
 import Tabs from './components/tabs/Tabs'
+import Tag from './components/tag/Tag'
 import Textarea from './components/textarea/Textarea'
 import ToggleButton from './components/toggle-button/ToggleButton'
 import Tooltip from './components/tooltip/Tooltip'
@@ -109,6 +110,7 @@ export {
   StepIndicator,
   Switch,
   Tabs,
+  Tag,
   Textarea,
   ToggleButton,
   Tooltip,

package/esm/index.js

@@ -30,6 +30,7 @@ import Space from './components/space/Space';
 import StepIndicator from './components/step-indicator/StepIndicator';
 import Switch from './components/switch/Switch';
 import Tabs from './components/tabs/Tabs';
+import Tag from './components/tag/Tag';
 import Textarea from './components/textarea/Textarea';
 import ToggleButton from './components/toggle-button/ToggleButton';
 import Tooltip from './components/tooltip/Tooltip';
@@ -62,5 +63,5 @@ import Td from './elements/Td';
 import Th from './elements/Th';
 import Tr from './elements/Tr';
 import Ul from './elements/Ul';
-export { Accordion, Autocomplete, Breadcrumb, Button, Checkbox, DatePicker, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Tabs, Textarea, ToggleButton, Tooltip, Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Table, Td, Th, Tr, Ul };
+export { Accordion, Autocomplete, Breadcrumb, Button, Checkbox, DatePicker, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Tabs, Tag, Textarea, ToggleButton, Tooltip, Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Table, Td, Th, Tr, Ul };
 export default {};

package/esm/shared/Context.js

@@ -56,7 +56,8 @@ export var prepareContext = function prepareContext() {
   }, props), {}, {
     translation: translation,
     Breadcrumb: {},
-    BreadcrumbItem: {}
+    BreadcrumbItem: {},
+    Tag: {}
   });
 
   return context;

package/esm/style/core/helper-classes/skip-link.scss

@@ -83,7 +83,7 @@
 }
 
 // How to use the "skip-link"
-// 1. Have this on the top of Your App: <a class="dnb-skip-link dnb-button" href="#dnb-app-content">Skip to content</a>
+// 1. Have this on the top of your app: <a class="dnb-skip-link dnb-button" href="#dnb-app-content">Skip to content</a>
 // 2. Place this id="dnb-app-content" on Your main content container
 .dnb-skip-link {
   position: absolute;

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

@@ -6737,6 +6737,46 @@ html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
 .dnb-tabs__content--spacing {
   padding-top: 2rem; }
 
+/*
+* 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); }
+
 /*
 * Textarea component
 *