@muraldevkit/ui-toolkit 2.2.0 → 2.3.0

package/dist/styles/MrlSmartTable/module.scss

@@ -0,0 +1,24 @@
+////
+/// Table component styles
+/// @group Table
+////
+
+// IMPORTANT!
+// Please DO NOT add visual styling to the MrlSmartTable component. As
+// a smart component, it should only compose other existing components and handle
+// data and interactivity concerns. By adding styling unique to the smart component,
+// it tightly couples the composed component to the smart component and makes it
+// much more likely to have styling regressions.
+// IMPORTANT!
+
+.MrlSortToggleWrapperButton {
+	// Because sorting is performed by clicking the table header, which itself
+	// is not meant to be an interactive element, the sort controls are wrapped
+	// in a visually hidden button to allow for accessible interaction.
+	all: unset;
+	cursor: pointer;
+
+	&:focus {
+		outline: revert;
+	}
+}

package/dist/styles/MrlTable/module.scss

@@ -0,0 +1,10 @@
+////
+/// Table component styles
+/// @group Table
+////
+
+@use '../table.variables.scss';
+
+.MrlTable {
+	width: 100%;
+}

package/dist/styles/MrlTableBody/module.scss

@@ -0,0 +1,8 @@
+////
+/// Table component styles
+/// @group Table
+////
+
+@use '../table.variables.scss';
+
+// .MrlTableBody {}

package/dist/styles/MrlTableCell/module.scss

@@ -0,0 +1,11 @@
+////
+/// Table component styles
+/// @group Table
+////
+
+@use '../table.variables.scss';
+@use '../table.global.scss' as *;
+
+.MrlTableCell {
+	@include mrl-cell-layout;
+}

package/dist/styles/MrlTableColumn/module.scss

@@ -0,0 +1,27 @@
+////
+/// Table component styles
+/// @group Table
+////
+
+@use '../table.variables.scss';
+@use '../table.global.scss' as *;
+
+.MrlTableColumn {
+	@include mrl-cell-layout;
+
+	color: var(--mrl-color-text);
+	font-size: var(--mrl-type-size-text);
+	font-weight: var(--mrl-type-weight-title);
+
+	&.clickable:hover {
+		background-color: var(--mrl-table-column-background-hover);
+		cursor: pointer;
+		user-select: none;
+	}
+
+	// This ensures alignment of the sort indicator icons in the
+	// table header. Please suggest/replace if there are better solutions!
+	:global(.MrlSvgContainer.header-sort-indicator) {
+		vertical-align: text-top;
+	}
+}

package/dist/styles/MrlTableEmptyState/module.scss

@@ -0,0 +1,18 @@
+////
+/// Table component styles
+/// @group Table
+////
+
+@use '../table.variables.scss';
+
+.MrlTableEmptyState {
+	align-items: center;
+	color: var(--mrl-color-text-secondary);
+	display: flex;
+	font-size: var(--mrl-type-size-text);
+	font-weight: var(--mrl-type-weight-text);
+	justify-content: center;
+	min-height: var(--mrl-table-empty-state-min-height);
+	padding-block: var(--mrl-table-empty-state-padding-block);
+	padding-inline: var(--mrl-table-empty-state-padding-block);
+}

package/dist/styles/MrlTableHeader/module.scss

@@ -0,0 +1,12 @@
+////
+/// Table component styles
+/// @group Table
+////
+
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use '../table.variables.scss';
+
+.MrlTableHeader {
+	background-color: var(--mrl-color-background);
+	border-bottom: var(--mrl-table-header-row-border-bottom);
+}

package/dist/styles/MrlTableRow/module.scss

@@ -0,0 +1,18 @@
+////
+/// Table component styles
+/// @group Table
+////
+
+@use '../table.variables.scss';
+
+.MrlTableRow {
+	border-bottom: var(--mrl-table-row-border-bottom);
+	font-size: var(--mrl-type-size-text-small);
+	font-weight: var(--mrl-type-weight-text);
+	height: var(--mrl-table-row-height);
+	outline: none;
+
+	&:hover {
+		background-color: var(--mrl-table-row-background-hover);
+	}
+}

package/dist/styles/table/global.scss

@@ -0,0 +1,22 @@
+////
+/// Table shared styles
+/// @group Table
+////
+
+/// Shared between MrlTableColumn and MrlTableCell
+/// which are functionally very similar.
+///
+/// @example @include mrl-cell-layout;
+@mixin mrl-cell-layout {
+	height: var(--mrl-table-column-height);
+	padding-inline: var(--mrl-table-default-padding-inline);
+	text-align: left;
+	vertical-align: middle;
+
+	&:global(.selection) {
+		max-width: var(--mrl-table-selection-width);
+		padding: unset;
+		text-align: center;
+		width: var(--mrl-table-selection-width);
+	}
+}

package/dist/styles/table/variables.scss

@@ -0,0 +1,33 @@
+////
+/// Table component style variables
+/// @group Table
+////
+
+// Design System Reference:
+// https: //www.figma.com/file/bd6vLvk4eTVGJcxXDaFeHT/DS-Hana-%7C-Core-Library?node-id=24264%3A44378&mode=dev
+
+.MrlTable {
+	--mrl-table-default-width: calc(100% - 10px);
+	--mrl-table-max-width: 1280px;
+	--mrl-table-header-row-border-bottom: 2px solid rgba(var(--mrl-gray-30), 1);
+	--mrl-table-column-background-hover: var(--mrl-color-background-highlight-hover);
+	--mrl-table-column-height: 48px;
+	--mrl-table-row-height: 48px;
+	--mrl-table-row-border-bottom: 1px solid rgba(var(--mrl-gray-30), 1);
+	--mrl-table-row-background-hover: var(--mrl-color-background-highlight-hover);
+	--mrl-table-cell-height: 48px;
+	--mrl-table-cell-padding-block: 6px;
+	--mrl-table-cell-padding-inline: 6px;
+	--mrl-table-default-padding-inline: 6px;
+	--mrl-table-selection-width: 48px;
+	--mrl-table-default-min-width: 198px;
+	--mrl-table-status-width: 192px;
+	--mrl-table-call-to-action-width: 92px;
+	--mrl-table-action-width: 48px;
+}
+
+.MrlTableEmptyState {
+	--mrl-table-empty-state-padding-block: 64px;
+	--mrl-table-empty-state-padding-inline: 48px;
+	--mrl-table-empty-state-min-height: 104px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -56,6 +56,7 @@
 		"@babel/preset-typescript": "7.21.4",
 		"@muraldevkit/ds-foundation": "2.0.2",
 		"@storybook/addon-a11y": "7.0.26",
+		"@storybook/addon-docs": "7.0.26",
 		"@storybook/addon-essentials": "7.0.26",
 		"@storybook/addon-interactions": "7.0.26",
 		"@storybook/addon-links": "7.0.26",