@helsenorge/designsystem-react 1.0.0-experimental.0 → 1.1.0

package/components/StatusDot/styles.module.scss

@@ -0,0 +1,59 @@
+@import '../../scss/palette';
+@import '../../scss/spacers.scss';
+@import '../../scss/font-settings';
+
+.statusdot {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: $font-size-sm;
+  font-weight: 400;
+  line-height: $lineheight-size-sm;
+
+  &--cancelled {
+    color: $cherry600;
+  }
+
+  &__dot {
+    top: getSpacer(3xs);
+    margin-right: getSpacer(2xs);
+    border-radius: 10rem;
+
+    &:not(#{&}--icon) {
+      width: 0.937rem;
+      height: 0.937rem;
+    }
+
+    &--info {
+      background: $kiwi900;
+    }
+
+    &--warning {
+      background: $banana400;
+    }
+
+    &--alert,
+    &--cancelled {
+      background: $cherry500;
+    }
+
+    &--active {
+      background: $blueberry500;
+    }
+
+    &--transparent {
+      border: 1px solid $neutral500;
+    }
+
+    &--icon {
+      position: absolute;
+      margin: getSpacer(4xs) * -1 0 0 getSpacer(3xs) * -1;
+    }
+  }
+
+  &__label {
+    &--icon {
+      margin-left: getSpacer(m);
+    }
+  }
+}

package/components/StatusDot/styles.module.scss.d.ts

@@ -0,0 +1,19 @@
+export type Styles = {
+  statusdot: string;
+  statusdot__dot: string;
+  'statusdot__dot--active': string;
+  'statusdot__dot--alert': string;
+  'statusdot__dot--cancelled': string;
+  'statusdot__dot--icon': string;
+  'statusdot__dot--info': string;
+  'statusdot__dot--transparent': string;
+  'statusdot__dot--warning': string;
+  'statusdot__label--icon': string;
+  'statusdot--cancelled': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Table/Table.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare enum SmallViewportVariant {
+    /**
+     * Show horizontal scrollbar when table is too big for the screen
+     */
+    horizontalscroll = "horizontalscroll",
+    /**
+     * Collapse to two columns on small screens
+     */
+    block = "block"
+}
+export interface Props {
+    /** Unique ID */
+    id?: string;
+    /** Id used for testing */
+    testId?: string;
+    /** Type of table view om small devices */
+    smallViewportVariant?: SmallViewportVariant;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the table. Use TableHead and TableBody */
+    children: React.ReactNode;
+}
+export declare const Table: ({ id, testId, className, children, smallViewportVariant, }: Props) => JSX.Element;
+export default Table;
+//# sourceMappingURL=Table.d.ts.map

package/components/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,gBAAgB,qBAAqB;IACrC;;OAEG;IACH,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,+DAMf,KAAK,gBAcP,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Table/TableBody.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface Props {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the table body. Use TableRows */
+    children?: React.ReactNode;
+}
+export declare const TableBody: ({ className, children }: Props) => JSX.Element;
+export default TableBody;
+//# sourceMappingURL=TableBody.d.ts.map

package/components/Table/TableBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,4BAA+C,KAAK,gBAEzE,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Table/TableBody.js

@@ -0,0 +1,2 @@
+export{T as TableBody,T as default}from"../../TableBody-eac2c23b.js";import"react";
+//# sourceMappingURL=TableBody.js.map

package/components/Table/TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Table/TableCell.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare enum TextAlign {
+    left = "left",
+    center = "center",
+    right = "right"
+}
+export interface Props {
+    /** Label used for small viewport block */
+    dataLabel: string;
+    /**  text align in cell */
+    textAlign?: TextAlign;
+    /**  nowrap for white space */
+    nowrap?: boolean;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the table cell */
+    children: React.ReactNode;
+}
+export declare const TableCell: ({ nowrap, textAlign, dataLabel, children, className }: Props) => JSX.Element;
+export default TableCell;
+//# sourceMappingURL=TableCell.d.ts.map

package/components/Table/TableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,0DAAsG,KAAK,gBAchI,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Table/TableCell.js

@@ -0,0 +1,2 @@
+export{T as TableCell,a as TextAlign,T as default}from"../../TableCell-cc644eb5.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";
+//# sourceMappingURL=TableCell.js.map

package/components/Table/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Table/TableExpandedRow.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface Props {
+    /** Row is expanded. */
+    expanded: boolean;
+    /** Number of columns in table. */
+    numberOfColumns: number;
+    /** Text for hide button. */
+    hideDetailsText: string;
+    /** When hide button inside expanded row is clicked. */
+    toggleClick: () => void;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the expanded row.  */
+    children: React.ReactNode;
+}
+export declare const TableExpandedRow: ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, }: Props) => JSX.Element;
+export default TableExpandedRow;
+//# sourceMappingURL=TableExpandedRow.d.ts.map

package/components/Table/TableExpandedRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpandedRow.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableExpandedRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,4BAA4B;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,sFAO1B,KAAK,gBA8BP,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/components/Table/TableExpandedRow.js

@@ -0,0 +1,2 @@
+export{T as TableExpandedRow,T as default}from"../../TableExpandedRow-44b09912.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Button-78f848e6.js";import"../../_tslib-b219470a.js";import"../../constants-dbdea596.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronUp-dfafe27b.js";
+//# sourceMappingURL=TableExpandedRow.js.map

package/components/Table/TableExpandedRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpandedRow.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Table/TableExpanderCell.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface Props {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Row is expanded. */
+    expanded: boolean;
+    /** Id for expanded row. */
+    expandableRowId: string;
+    /** Text for hide button used for aria label. */
+    hideDetailsText: string;
+    /** Text for show button used for aria label. */
+    showDetailsText: string;
+}
+export declare const TableExpanderCell: ({ expandableRowId, hideDetailsText, showDetailsText, expanded, className, }: Props) => JSX.Element;
+export default TableExpanderCell;
+//# sourceMappingURL=TableExpanderCell.d.ts.map

package/components/Table/TableExpanderCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpanderCell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableExpanderCell.tsx"],"names":[],"mappings":";AASA,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,gFAM3B,KAAK,gBAgBP,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/Table/TableExpanderCell.js

@@ -0,0 +1,2 @@
+export{T as TableExpanderCell,T as default}from"../../TableExpanderCell-015d3db2.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Icon-d69d65b3.js";import"../../_tslib-b219470a.js";import"../../constants-dbdea596.js";import"../../useUuid-3b1e73f2.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../uuid-11037462.js";import"../../Button-78f848e6.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-2b3daace.js";import"../../ChevronUp-dfafe27b.js";
+//# sourceMappingURL=TableExpanderCell.js.map

package/components/Table/TableExpanderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpanderCell.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Table/TableHead.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare enum HeaderCategory {
+    normal = "normal",
+    transparent = "transparent",
+    sortable = "sortable"
+}
+export interface Props {
+    /** Header category for styling */
+    category: HeaderCategory;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the thead. Add table rows  */
+    children: React.ReactNode;
+}
+export declare const TableHead: ({ category, className, children }: Props) => JSX.Element;
+export default TableHead;
+//# sourceMappingURL=TableHead.d.ts.map

package/components/Table/TableHead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,cAAc;IACxB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,QAAQ,EAAE,cAAc,CAAC;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,sCAAyD,KAAK,gBAYnF,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Table/TableHead.js

@@ -0,0 +1,2 @@
+export{H as HeaderCategory,T as TableHead,T as default}from"../../TableHead-5ed58948.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";
+//# sourceMappingURL=TableHead.js.map

package/components/Table/TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Table/TableHeadCell.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export declare enum SortDirection {
+    asc = "asc",
+    desc = "desc"
+}
+export interface Props {
+    /** Sets if column for head cell should be sortable*/
+    sortable?: boolean;
+    /** Sort direction  */
+    sortDir?: SortDirection;
+    /** Function that is called when clicked */
+    onClick?: () => void;
+    /** Sets tabIndex on th element */
+    tabIndex?: 0 | -1;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the td element.  */
+    children?: React.ReactNode;
+}
+export declare const TableHeadCell: ({ sortable, onClick, className, children, sortDir, tabIndex }: Props) => JSX.Element;
+export default TableHeadCell;
+//# sourceMappingURL=TableHeadCell.d.ts.map

package/components/Table/TableHeadCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeadCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,IAAI,SAAS;CACd;AAED,MAAM,WAAW,KAAK;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,kEAAyF,KAAK,gBAqCvH,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/Table/TableHeadCell.js

@@ -0,0 +1,2 @@
+export{S as SortDirection,T as TableHeadCell,T as default}from"../../TableHeadCell-84651910.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Icon-d69d65b3.js";import"../../_tslib-b219470a.js";import"../../constants-dbdea596.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../ArrowUp-e7787d9c.js";import"../../ArrowDown-88b2c27a.js";
+//# sourceMappingURL=TableHeadCell.js.map

package/components/Table/TableHeadCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeadCell.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Table/TableRow.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface Props {
+    /** Sets if expanded row can be expanded */
+    expandable?: boolean;
+    /** Sets if expanded row is expanded */
+    expanded?: boolean;
+    /** When hide/show button for expanded row is clicked. */
+    onClick?: () => void;
+    /** Text for expanded row hide button. */
+    hideDetailsText?: string;
+    /** Text for expanded row show button. */
+    showDetailsText?: string;
+    /** Key attribute for row */
+    rowKey?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the cells of the table row element.  */
+    children?: React.ReactNode;
+}
+export declare const TableRow: ({ rowKey, hideDetailsText, showDetailsText, expandable, expanded, onClick, className, children, }: Props) => JSX.Element;
+export default TableRow;
+//# sourceMappingURL=TableRow.d.ts.map

package/components/Table/TableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,KAAK;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,QAAQ,sGASlB,KAAK,gBA0CP,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Table/TableRow.js

@@ -0,0 +1,2 @@
+export{T as TableRow,T as default}from"../../TableRow-692099ee.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Button-78f848e6.js";import"../../_tslib-b219470a.js";import"../../constants-dbdea596.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronUp-dfafe27b.js";import"../../ChevronDown-2b3daace.js";
+//# sourceMappingURL=TableRow.js.map

package/components/Table/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Table/collapseTwoCol.scss

@@ -0,0 +1,144 @@
+.table {
+  &--collapse2col {
+    @media (max-width: map-get($grid-max-breakpoints, sm)) {
+      .table__cell-expander {
+        display: none;
+      }
+
+      .table__head {
+        display: none;
+      }
+
+      display: block;
+      clear: both;
+
+      tbody,
+      tr,
+      th,
+      td {
+        display: block;
+      }
+
+      tr {
+        clear: both;
+      }
+
+      select {
+        max-width: 100%;
+      }
+
+      th:focus {
+        outline: none;
+        background-color: $blueberry800;
+        text-decoration: underline;
+      }
+      td {
+        position: relative;
+        padding-left: 40%;
+        padding-right: 0;
+        padding-top: 0.75rem;
+        padding-bottom: 0.75rem;
+        float: left;
+        clear: both;
+        width: 100%;
+
+        &:not(.expandable-container) {
+          font-weight: 400;
+        }
+
+        /* Get data from the td-tag attribute "data-label"   and use this to populate :before content */
+        &::before {
+          content: attr(data-label);
+          position: relative;
+          top: 0;
+          left: 0;
+          width: 60%;
+          padding-right: $spacer;
+          white-space: normal;
+          display: block;
+          float: left;
+          word-wrap: break-word;
+          margin-left: -67%;
+          padding-left: 0.75rem;
+          font-weight: 400;
+        }
+      }
+
+      .table__expander-cell-mobile {
+        padding-left: 0.75rem;
+      }
+
+      .table__expander-button-mobile {
+        font-weight: 100;
+        padding-right: 1rem;
+        &:hover {
+          background-color: $blueberry50;
+        }
+        &--expanded {
+          background-color: $blueberry50;
+        }
+      }
+
+      .table__expanded-row td {
+        text-align: left;
+        padding: 0.75rem;
+      }
+
+      .table__expanded-row {
+        display: none;
+        &--expanded {
+          display: block;
+        }
+      }
+
+      .table__cell {
+        border-top: 0;
+        border-bottom: 0;
+
+        outline: 0;
+
+        &--center {
+          text-align: left;
+        }
+        &--right {
+          text-align: left;
+        }
+      }
+      .table__cell:first-child {
+        border-collapse: collapse;
+        border-top: 1px solid $neutral500;
+      }
+      .table__expanded-row {
+        .table__cell:first-child {
+          border-top: 0;
+        }
+      }
+      .table__row--expandable {
+        .table__cell:nth-child(2) {
+          border-collapse: collapse;
+          border-top: 1px solid $neutral500;
+        }
+      }
+
+      tr:last-child .table__cell:last-child {
+        border-bottom: 1px solid $neutral500;
+      }
+
+      .table__expander-cell-mobile {
+        border-bottom: 1px solid $neutral500;
+        &--expanded {
+          border-bottom: 0;
+        }
+      }
+
+      .table__row--expandable {
+        &:focus-within {
+          outline: none;
+        }
+      }
+      .table__expanded-row-button {
+        display: none;
+      }
+    }
+  }
+}

package/components/Table/componentdata.json

@@ -0,0 +1,156 @@
+{
+  "props": {
+    "expandable": {
+      "defaultValue": null,
+      "description": "Sets if expanded row can be expanded",
+      "name": "expandable",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "expanded": {
+      "defaultValue": null,
+      "description": "Sets if expanded row is expanded",
+      "name": "expanded",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "onClick": {
+      "defaultValue": null,
+      "description": "When hide/show button for expanded row is clicked.",
+      "name": "onClick",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "(() => void)"
+      }
+    },
+    "hideDetailsText": {
+      "defaultValue": null,
+      "description": "Text for expanded row hide button.",
+      "name": "hideDetailsText",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "showDetailsText": {
+      "defaultValue": null,
+      "description": "Text for expanded row show button.",
+      "name": "showDetailsText",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "rowKey": {
+      "defaultValue": null,
+      "description": "Key attribute for row",
+      "name": "rowKey",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "children": {
+      "defaultValue": null,
+      "description": "Sets the cells of the table row element.",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/Table/TableRow.tsx",
+        "name": "Props"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Table/TableRow.tsx",
+          "name": "Props"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    }
+  }
+}

package/components/Table/index.d.ts

@@ -0,0 +1,11 @@
+import { Table } from './Table';
+export { TableBody } from './TableBody';
+export { TableCell, TextAlign } from './TableCell';
+export { TableExpandedRow } from './TableExpandedRow';
+export { TableExpanderCell } from './TableExpanderCell';
+export { TableHead, HeaderCategory } from './TableHead';
+export { TableHeadCell, SortDirection } from './TableHeadCell';
+export { TableRow } from './TableRow';
+export * from './Table';
+export default Table;
+//# sourceMappingURL=index.d.ts.map

package/components/Table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,cAAc,SAAS,CAAC;AAExB,eAAe,KAAK,CAAC"}

package/components/Table/index.js

@@ -0,0 +1,2 @@
+import{d as e}from"../../_rollupPluginBabelHelpers-0f007973.js";import o from"react";import{c as r}from"../../index-d1c0552c.js";import s from"./styles.module.scss";import{A as l}from"../../constants-dbdea596.js";import{H as t}from"../../HorizontalScroll-a4634c75.js";export{T as TableBody}from"../../TableBody-eac2c23b.js";export{T as TableCell,a as TextAlign}from"../../TableCell-cc644eb5.js";export{T as TableExpandedRow}from"../../TableExpandedRow-44b09912.js";export{T as TableExpanderCell}from"../../TableExpanderCell-015d3db2.js";export{H as HeaderCategory,T as TableHead}from"../../TableHead-5ed58948.js";export{S as SortDirection,T as TableHeadCell}from"../../TableHeadCell-84651910.js";export{T as TableRow}from"../../TableRow-692099ee.js";import"../../useIsVisible-2ffbdea2.js";import"../HorizontalScroll/styles.module.scss";import"../../Button-78f848e6.js";import"../../_tslib-b219470a.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronUp-dfafe27b.js";import"../../ChevronDown-2b3daace.js";import"../../ArrowUp-e7787d9c.js";import"../../ArrowDown-88b2c27a.js";var i;!function(e){e.horizontalscroll="horizontalscroll",e.block="block"}(i||(i={}));var d=function(a){var d=a.id,m=a.testId,p=a.className,c=a.children,b=a.smallViewportVariant,n=void 0===b?i.horizontalscroll:b,j=r(s.table,e({},s["table--collapse2col"],n===i.block),p);return o.createElement(t,null,o.createElement("table",{className:j,id:d,"data-testid":m,"data-analyticsid":l.Table},c))};export{i as SmallViewportVariant,d as Table,d as default};
+//# sourceMappingURL=index.js.map