@dnb/eufemia 9.26.1 → 9.27.0

package/components/table/TableTd.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+
+var Td = function Td(componentProps) {
+  var className = componentProps.className,
+      children = componentProps.children,
+      props = _objectWithoutProperties(componentProps, _excluded);
+
+  return React.createElement("td", _extends({
+    role: "cell",
+    className: classnames('dnb-table__td', className)
+  }, props));
+};
+
+export default Td;

package/components/table/TableTh.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type TableThProps = {
+    /**
+     * The content of the table header given as Tr.
+     */
+    children: React.ReactNode;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+};
+declare const Th: (componentProps: TableThProps & React.ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+export default Th;

package/components/table/TableTh.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+
+var Th = function Th(componentProps) {
+  var className = componentProps.className,
+      children = componentProps.children,
+      props = _objectWithoutProperties(componentProps, _excluded);
+
+  return React.createElement("th", _extends({
+    role: "columnheader",
+    className: classnames('dnb-table__th', className)
+  }, props), children);
+};
+
+export default Th;

package/components/table/TableTr.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TableTdProps } from './TableTd';
+export declare type TableTrProps = {
+    /**
+     * The content of the component.
+     */
+    children: Array<React.ReactElement<TableTdProps>>;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+};
+declare const Tr: (componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>) => JSX.Element;
+export default Tr;

package/components/table/TableTr.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+
+var Tr = function Tr(componentProps) {
+  var className = componentProps.className,
+      children = componentProps.children,
+      props = _objectWithoutProperties(componentProps, _excluded);
+
+  return React.createElement("tr", _extends({
+    className: classnames('dnb-table__tr', className)
+  }, props), children);
+};
+
+export default Tr;

package/components/table/index.d.ts

@@ -0,0 +1,3 @@
+export default Table;
+export * from "./Table";
+import Table from "./Table";

package/components/table/index.js

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

package/components/table/style/_table.scss

@@ -0,0 +1,147 @@
+/*
+* Table component
+*
+*/
+
+.dnb-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+
+  overflow: auto;
+  margin-top: 0;
+  margin-bottom: var(--spacing-small);
+
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  &--fixed {
+    table-layout: fixed;
+  }
+
+  &__sticky-helper > td {
+    display: block;
+    overflow: hidden;
+    padding: 0 !important;
+    height: 0;
+  }
+
+  &,
+  &--left {
+    text-align: left;
+  }
+  &--right {
+    text-align: right;
+  }
+  &--center {
+    text-align: center;
+  }
+
+  & > caption {
+    font-size: var(--font-size-small);
+
+    margin-top: var(--spacing-x-small);
+    caption-side: bottom;
+  }
+
+  /* stylelint-disable-next-line */
+
+  tr.sticky th {
+    position: sticky;
+    top: var(--table-top, 0); // is set by "stickyOffset" prop
+    z-index: 2;
+
+    &::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 6px;
+
+      // The @mixin defaultDropShadow() does not work in this case
+      // because we need only a bottom shadow (with clip-path)
+      box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+      clip-path: inset(6px 0 -48px 0);
+
+      transition: opacity 300ms ease-out;
+      [data-visual-test-wrapper] & {
+        transition: none;
+      }
+    }
+  }
+  tr.sticky.show-shadow th::before {
+    opacity: 1;
+  }
+
+  /* stylelint-disable */
+
+  &--small,
+  &--small > tr > th,
+  &--small > tr > td,
+  &--small > thead > tr > th,
+  &--small > tbody > tr > td {
+    font-size: var(--font-size-small);
+  }
+
+  & > tr#{&}--small > th,
+  & > tr#{&}--small > td,
+  & > thead > tr#{&}--small > th,
+  & > tbody > tr#{&}--small > td {
+    font-size: var(--font-size-small);
+  }
+
+  & > tr > th#{&}--small,
+  & > tr > td#{&}--small,
+  & > thead > tr > th#{&}--small,
+  & > tbody > tr > td#{&}--small,
+  &__th#{&}--small,
+  &__td#{&}--small {
+    font-size: var(--font-size-small);
+  }
+
+  &--x-small,
+  &--x-small > tr > th,
+  &--x-small > tr > td,
+  &--x-small > thead > tr > th,
+  &--x-small > tbody > tr > td {
+    font-size: var(--font-size-x-small);
+  }
+
+  & > tr#{&}--x-small > th,
+  & > tr#{&}--x-small > td,
+  & > thead > tr#{&}--x-small > th,
+  & > tbody > tr#{&}--x-small > td {
+    font-size: var(--font-size-x-small);
+  }
+
+  & > tr > th#{&}--x-small,
+  & > tr > td#{&}--x-small,
+  & > thead > tr > th#{&}--x-small,
+  & > tbody > tr > td#{&}--x-small,
+  &__th#{&}--x-small,
+  &__td#{&}--x-small {
+    font-size: var(--font-size-x-small);
+  }
+
+  /* stylelint-enable */
+
+  &.dnb-skeleton {
+    > * {
+      -webkit-text-fill-color: var(--skeleton-color);
+    }
+  }
+}
+
+// Reset Table spacing
+.dnb-spacing .dnb-table {
+  p,
+  ul,
+  ol,
+  dl,
+  pre {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}

package/components/table/style/dnb-table.css

@@ -0,0 +1,181 @@
+/*
+* DNB Table
+*
+*/
+/**
+ * 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-table {
+  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-table *,
+  .dnb-table ::before,
+  .dnb-table ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  .dnb-table ::before,
+  .dnb-table ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+
+/*
+* Table component
+*
+*/
+.dnb-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+  overflow: auto;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-small);
+  border-spacing: 0;
+  border-collapse: collapse;
+  /* stylelint-disable-next-line */
+  /* stylelint-disable */
+  /* stylelint-enable */ }
+  .dnb-table--fixed {
+    table-layout: fixed; }
+  .dnb-table__sticky-helper > td {
+    display: block;
+    overflow: hidden;
+    padding: 0 !important;
+    height: 0; }
+  .dnb-table, .dnb-table--left {
+    text-align: left; }
+  .dnb-table--right {
+    text-align: right; }
+  .dnb-table--center {
+    text-align: center; }
+  .dnb-table > caption {
+    font-size: 1rem;
+    font-size: var(--font-size-small);
+    margin-top: 0.5rem;
+    margin-top: var(--spacing-x-small);
+    caption-side: bottom; }
+  .dnb-table tr.sticky th {
+    position: sticky;
+    top: 0;
+    top: var(--table-top, 0);
+    z-index: 2; }
+    .dnb-table tr.sticky th::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 6px;
+      -webkit-box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
+              box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
+      -webkit-box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+              box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+      -webkit-clip-path: inset(6px 0 -48px 0);
+              clip-path: inset(6px 0 -48px 0);
+      -webkit-transition: opacity 300ms ease-out;
+      transition: opacity 300ms ease-out; }
+      [data-visual-test-wrapper] .dnb-table tr.sticky th::before {
+        -webkit-transition: none;
+        transition: none; }
+  .dnb-table tr.sticky.show-shadow th::before {
+    opacity: 1; }
+  .dnb-table--small,
+  .dnb-table--small > tr > th,
+  .dnb-table--small > tr > td,
+  .dnb-table--small > thead > tr > th,
+  .dnb-table--small > tbody > tr > td {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table > tr.dnb-table--small > th,
+  .dnb-table > tr.dnb-table--small > td,
+  .dnb-table > thead > tr.dnb-table--small > th,
+  .dnb-table > tbody > tr.dnb-table--small > td {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table > tr > th.dnb-table--small,
+  .dnb-table > tr > td.dnb-table--small,
+  .dnb-table > thead > tr > th.dnb-table--small,
+  .dnb-table > tbody > tr > td.dnb-table--small, .dnb-table__th.dnb-table--small, .dnb-table__td.dnb-table--small {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table--x-small,
+  .dnb-table--x-small > tr > th,
+  .dnb-table--x-small > tr > td,
+  .dnb-table--x-small > thead > tr > th,
+  .dnb-table--x-small > tbody > tr > td {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table > tr.dnb-table--x-small > th,
+  .dnb-table > tr.dnb-table--x-small > td,
+  .dnb-table > thead > tr.dnb-table--x-small > th,
+  .dnb-table > tbody > tr.dnb-table--x-small > td {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table > tr > th.dnb-table--x-small,
+  .dnb-table > tr > td.dnb-table--x-small,
+  .dnb-table > thead > tr > th.dnb-table--x-small,
+  .dnb-table > tbody > tr > td.dnb-table--x-small, .dnb-table__th.dnb-table--x-small, .dnb-table__td.dnb-table--x-small {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table.dnb-skeleton > * {
+    -webkit-text-fill-color: #ebebeb;
+    -webkit-text-fill-color: var(--skeleton-color); }
+
+.dnb-spacing .dnb-table p,
+.dnb-spacing .dnb-table ul,
+.dnb-spacing .dnb-table ol,
+.dnb-spacing .dnb-table dl,
+.dnb-spacing .dnb-table pre {
+  margin-top: 0;
+  margin-bottom: 0; }

package/components/table/style/dnb-table.min.css

@@ -0,0 +1 @@
+.dnb-table{-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-table *,.dnb-table :after,.dnb-table :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-table :after,.dnb-table :before{text-decoration:inherit;vertical-align:inherit}.dnb-table{border-collapse:collapse;border-spacing:0;display:table;margin-bottom:1rem;margin-bottom:var(--spacing-small);margin-top:0;overflow:auto;table-layout:auto;width:100%}.dnb-table--fixed{table-layout:fixed}.dnb-table__sticky-helper>td{display:block;height:0;overflow:hidden;padding:0!important}.dnb-table,.dnb-table--left{text-align:left}.dnb-table--right{text-align:right}.dnb-table--center{text-align:center}.dnb-table>caption{caption-side:bottom;font-size:1rem;font-size:var(--font-size-small);margin-top:.5rem;margin-top:var(--spacing-x-small)}.dnb-table tr.sticky th{position:sticky;top:0;top:var(--table-top,0);z-index:2}.dnb-table tr.sticky th:before{bottom:0;-webkit-box-shadow:0 -2px 12px 8px rgba(51,51,51,.08);box-shadow:0 -2px 12px 8px rgba(51,51,51,.08);-webkit-box-shadow:var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);box-shadow:var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);-webkit-clip-path:inset(6px 0 -48px 0);clip-path:inset(6px 0 -48px 0);content:"";height:6px;left:0;opacity:0;position:absolute;right:0;-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out}[data-visual-test-wrapper] .dnb-table tr.sticky th:before{-webkit-transition:none;transition:none}.dnb-table tr.sticky.show-shadow th:before{opacity:1}.dnb-table--small,.dnb-table--small>tbody>tr>td,.dnb-table--small>thead>tr>th,.dnb-table--small>tr>td,.dnb-table--small>tr>th,.dnb-table>tbody>tr.dnb-table--small>td,.dnb-table>tbody>tr>td.dnb-table--small,.dnb-table>thead>tr.dnb-table--small>th,.dnb-table>thead>tr>th.dnb-table--small,.dnb-table>tr.dnb-table--small>td,.dnb-table>tr.dnb-table--small>th,.dnb-table>tr>td.dnb-table--small,.dnb-table>tr>th.dnb-table--small,.dnb-table__td.dnb-table--small,.dnb-table__th.dnb-table--small{font-size:1rem;font-size:var(--font-size-small)}.dnb-table--x-small,.dnb-table--x-small>tbody>tr>td,.dnb-table--x-small>thead>tr>th,.dnb-table--x-small>tr>td,.dnb-table--x-small>tr>th,.dnb-table>tbody>tr.dnb-table--x-small>td,.dnb-table>tbody>tr>td.dnb-table--x-small,.dnb-table>thead>tr.dnb-table--x-small>th,.dnb-table>thead>tr>th.dnb-table--x-small,.dnb-table>tr.dnb-table--x-small>td,.dnb-table>tr.dnb-table--x-small>th,.dnb-table>tr>td.dnb-table--x-small,.dnb-table>tr>th.dnb-table--x-small,.dnb-table__td.dnb-table--x-small,.dnb-table__th.dnb-table--x-small{font-size:.875rem;font-size:var(--font-size-x-small)}.dnb-table.dnb-skeleton>*{-webkit-text-fill-color:#ebebeb;-webkit-text-fill-color:var(--skeleton-color)}.dnb-spacing .dnb-table dl,.dnb-spacing .dnb-table ol,.dnb-spacing .dnb-table p,.dnb-spacing .dnb-table pre,.dnb-spacing .dnb-table ul{margin-bottom:0;margin-top:0}

package/components/table/style/dnb-table.scss

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

package/components/table/style/index.d.ts

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

package/components/table/style/index.js

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