@muraldevkit/ui-toolkit 1.9.1 → 1.10.0

package/dist/styles/MrlModal/mixins.scss

@@ -0,0 +1,46 @@
+////
+/// Modal component mixins
+/// @group modal
+////
+
+/// CSS transition setup for modal backdrop/scrim animating in
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-modal-scrim-in;
+@mixin mrl-modal-scrim-in() {
+	opacity: 1;
+	transition-duration: var(--mrl-duration-04);
+	transition-property: opacity;
+	transition-timing-function: var(--mrl-timing-m1);
+}
+
+/// CSS transition setup for modal backdrop/scrim animating out
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-modal-scrim-out;
+@mixin mrl-modal-scrim-out() {
+	opacity: 0;
+	transition-duration: var(--mrl-duration-03);
+	transition-timing-function: var(--mrl-timing-m3);
+}
+
+/// CSS transition setup for modal dialog animating in
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-modal-dialog-in;
+@mixin mrl-modal-dialog-in() {
+	transform: translate(0, 0);
+	transition-duration: var(--mrl-duration-04);
+	transition-property: transform;
+	transition-timing-function: var(--mrl-timing-m1);
+}
+
+/// CSS transition setup for modal dialog animating out
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-modal-dialog-out;
+@mixin mrl-modal-dialog-out() {
+	transform: translate(0, var(--mrl-distance-02));
+	transition-duration: var(--mrl-duration-03);
+	transition-timing-function: var(--mrl-timing-m3);
+}

package/dist/styles/MrlModal/module.scss

@@ -0,0 +1,81 @@
+////
+/// Modal component styles
+/// @group modal
+////
+
+@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use './styles.variables.scss';
+@use './styles.mixins.scss' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use './styles.mixins.scss' as *;
+
+.mrl-modal-backdrop {
+	align-items: center;
+	background: var(--mrl-modal-backdrop-background);
+	display: flex;
+	inset: 0;
+	justify-content: center;
+	opacity: 0;
+	position: fixed;
+	transition: opacity 300ms ease-in-out;
+	z-index: $mrl-zIndex-overlays;
+
+	&.fade-in {
+		@include mrl-modal-scrim-in;
+	}
+
+	&.fade-out {
+		@include mrl-modal-scrim-out;
+	}
+
+	&.display {
+		display: fixed;
+	}
+
+	&.hide {
+		display: none;
+	}
+}
+
+.mrl-modal {
+	background: var(--mrl-modal-background);
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	height: 100vh;
+	overflow: auto;
+	position: relative;
+	width: 100vw;
+}
+
+.mrl-modal-close {
+	position: absolute;
+
+	// The close button is in the same location for all modal sizes
+	right: var(--mrl-modal-close-offset);
+	top: var(--mrl-modal-close-offset);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.mrl-modal-backdrop.fade-in .mrl-modal {
+		@include mrl-modal-dialog-in;
+	}
+
+	.mrl-modal-backdrop.fade-out .mrl-modal {
+		@include mrl-modal-dialog-out;
+	}
+}
+
+// Modifiers: Sizes
+@media screen and (min-width: $mrl-breakpoint-01) {
+	.mrl-modal {
+		border-radius: var(--mrl-modal-border-radius);
+		box-shadow: 0 0 0 1px rgba(0, 0, 0, 8%), var(--mrl-shadow-03);
+		height: auto;
+		margin: var(--mrl-spacing-08);
+		max-height: 95vh;
+		max-width: var(--mrl-modal-size);
+	}
+}

package/dist/styles/MrlModal/variables.scss

@@ -0,0 +1,28 @@
+////
+/// Modal component styles
+/// @group modal
+////
+
+@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+@use '../styles.variables.scss';
+
+.mrl-modal-backdrop {
+	--mrl-modal-backdrop-background: var(--mrl-black-opacity-06);
+}
+
+.mrl-modal {
+	--mrl-modal-size: 600px;
+	--mrl-modal-border-radius: var(--mrl-radii-05);
+	--mrl-modal-background: var(--mrl-color-background);
+}
+
+/// Media queries' styles for desktop
+@media screen and (min-width: $mrl-breakpoint-01) {
+	.mrl-modal--small {
+		--mrl-modal-size: 400px;
+	}
+
+	.mrl-modal--large {
+		--mrl-modal-size: 800px;
+	}
+}

package/dist/styles/MrlModalContent/module.scss

@@ -0,0 +1,13 @@
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+
+.mrl-modal-content {
+	// Because this is a non-standard tab-able element, we may have limitations with
+	// styling options of the focus ring.
+	@include mrl-focus($style: 'outline');
+
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow: auto;
+	padding: 0 var(--mrl-modal-padding-horizontal);
+}

package/dist/styles/MrlModalFooter/module.scss

@@ -0,0 +1,49 @@
+////
+/// Modal footer component styles
+/// @group modal
+////
+
+@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
+@use './styles.variables.scss';
+
+.mrl-modal-footer {
+	display: flex;
+	flex-direction: row;
+	gap: var(--mrl-modal-footer-inline-margin);
+	padding: var(--mrl-modal-padding-vertical) var(--mrl-modal-padding-horizontal);
+}
+
+.mrl-modal-footer-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: var(--mrl-modal-footer-inline-margin);
+	width: 100%;
+}
+
+.slotted :global(.mrlButton) {
+	display: block;
+	width: 100%;
+}
+
+/// Media queries' styles for desktop
+@media screen and (min-width: $mrl-breakpoint-01) {
+	.mrl-modal-footer {
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.mrl-modal-footer-wrapper {
+		flex-direction: row;
+		justify-content: right;
+	}
+
+	.mrl-modal-footer-wrapper .slotted {
+		display: inline-flex;
+		width: auto;
+	}
+
+	.tertiary.slotted {
+		margin-right: auto;
+	}
+}

package/dist/styles/MrlModalFooter/variables.scss

@@ -0,0 +1,10 @@
+////
+/// Modal footer component styles
+/// @group modal
+////
+
+@use '../styles.variables.scss';
+
+.mrl-modal-footer {
+	--mrl-modal-footer-inline-margin: var(--mrl-spacing-03);
+}

package/dist/styles/MrlModalHeader/module.scss

@@ -0,0 +1,21 @@
+////
+/// Modal header component styles
+/// @group modal
+////
+
+@use '../styles.variables.scss' as *;
+
+.mrl-modal-header {
+	color: var(--mrl-modal-header-text-color);
+	display: flex;
+	min-height: calc(
+		var(--mrl-type-size-headline-large) * var(--mrl-type-line-height-headline-large)
+	);
+	padding: var(--mrl-modal-padding-vertical)
+		// We calculate padding based on the position of the close button
+		// that is added to the modal container
+		calc(
+			#{$mrl-modal-close-size} + var(--mrl-modal-close-offset) + var(--mrl-modal-close-inline-margin)
+		)
+		var(--mrl-modal-padding-vertical) var(--mrl-modal-padding-horizontal);
+}

package/dist/styles/button/global.scss

@@ -59,9 +59,9 @@ $mrl-interaction-scope: ':not(#{$mrl-button-toggle-selector}):not([aria-disabled
 	}
 
 	// Developer-initiated skeleton state
-	// Requires additional weight to overwrite other hydrated versions of the component
+	// Requires additional weight to overwrite other versions of the component
 	&--skeleton,
-	&--skeleton[aria-disabled="true"] {
+	&--skeleton[aria-disabled='true'] {
 		@include mrl-button-skeleton;
 	}
 }

package/dist/styles/modal/variables.scss

@@ -0,0 +1,37 @@
+////
+/// Modal shared variables
+/// @group modal
+////
+
+@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
+
+// @use '~@muraldevkit/ds-component-button/dist/scss/variables' as *;
+
+// import button.variables.scss from button component in this repositories button component
+@use '../button/button.variables.scss' as *;
+
+$mrl-modal-close-size: $mrl-button-height--default;
+
+.mrl-modal {
+	--mrl-modal-header-text-color: rgba(var(--mrl-gray-100), 1);
+	--mrl-modal-padding-vertical: var(--mrl-spacing-07);
+	--mrl-modal-padding-horizontal: var(--mrl-spacing-07);
+	--mrl-modal-close-inline-margin: var(--mrl-space-inline-related);
+	--mrl-modal-close-offset: var(--mrl-spacing-06);
+}
+
+/// Media queries' styles for desktop
+@media screen and (min-width: $mrl-breakpoint-01) {
+	.mrl-modal,
+	.mrl-modal .footer.slotted .mrl-modal-footer,
+	.mrl-modal .header.slotted .mrl-modal-header {
+		--mrl-modal-padding-horizontal: var(--mrl-spacing-08);
+	}
+
+	.mrl-modal--large,
+	.mrl-modal--large .footer.slotted .mrl-modal-footer,
+	.mrl-modal--large .header.slotted .mrl-modal-header {
+		--mrl-modal-padding-horizontal: var(--mrl-spacing-09);
+	}
+}

package/dist/utils/isElementScrollable/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Test if an element is scrollable
+ *
+ * @param {HTMLElement} element - the element you want to test
+ * @returns {boolean} - true if the element is scrollable, false if it is not scrollable
+ */
+export declare const isElementScrollable: (element: HTMLElement) => boolean;

package/dist/utils/trapFocus/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Focus trap logic
+ *
+ * @param {HTMLElement} element - The component props.
+ * @returns {HTMLElement[]} - The focusable elements inside the element.
+ */
+export declare const getFocusableElementsInsideElement: (element: HTMLElement) => HTMLElement[];
+/**
+ * Traps focus inside of an element.
+ * Adapted from https://hidde.blog/using-javascript-to-trap-focus-in-an-element/
+ *
+ * @param {HTMLElement} element // Element to trap focus in
+ * @returns {Function}          // Cleanup function to be run when component is
+ *                              // removed from the DOM
+ */
+export declare const trapFocus: (element: HTMLElement) => (() => void);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "1.9.1",
+	"version": "1.10.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -93,6 +93,7 @@
 		"jest-environment-jsdom": "29.5.0",
 		"jest-matchmedia-mock": "1.1.0",
 		"lint-staged": "13.2.2",
+		"null-loader": "4.0.1",
 		"prettier": "2.8.8",
 		"rimraf": "5.0.0",
 		"sass": "1.62.1",