@muraldevkit/ui-toolkit 1.13.3 → 1.15.0

package/dist/styles/MrlBlockNotification/global.scss

@@ -0,0 +1,24 @@
+////
+/// Block Notification component styles
+/// @group block-notification
+////
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use './styles.mixins.scss' as *;
+
+// Transition states were not working as expected when migrated to
+// modules, so we are using global styles for now.
+.mrl-blockNotification.mrl-is--transitioning {
+	@include mrl-block-notification-fade-out;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.mrl-blockNotification.mrl-is--transitioning {
+		@include mrl-block-notification-slide-out;
+	}
+}
+
+.mrl-blockNotification .mrl-is--closed {
+	display: none;
+}

package/dist/styles/MrlBlockNotification/mixins.scss

@@ -0,0 +1,48 @@
+////
+/// Block notification component mixins
+/// @group block-notification
+////
+
+/// CSS transition setup for block notification animations.
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-block-notification-animate-in;
+@mixin mrl-block-notification-animate-in() {
+	margin-top: 0;
+	opacity: 1;
+	transition-duration: var(--mrl-duration-03);
+	transition-property: margin opacity;
+	transition-timing-function: var(--mrl-timing-m1);
+}
+
+/// CSS to fade the block notification out.
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-block-notification-fade-out;
+@mixin mrl-block-notification-fade-in() {
+	opacity: 0;
+}
+
+/// CSS to slide block notification out
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-block-notification-slide-out;
+@mixin mrl-block-notification-slide-in() {
+	margin-top: calc(var(--mrl-blockNotification-height));
+}
+
+/// CSS to fade the block notification out.
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-block-notification-fade-out;
+@mixin mrl-block-notification-fade-out() {
+	opacity: 0;
+}
+
+/// CSS to slide block notification out
+/// There are no configurations for this mixin
+///
+/// @example @include mrl-block-notification-slide-out;
+@mixin mrl-block-notification-slide-out() {
+	margin-top: calc(var(--mrl-blockNotification-height) * -1);
+}

package/dist/styles/MrlBlockNotification/module.scss

@@ -0,0 +1,78 @@
+////
+/// Block Notification component styles
+/// @group block-notification
+////
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
+@use './styles.variables.scss';
+@use './styles.mixins.scss' as *;
+
+$mrl-notification-close-inset: var(--mrl-spacing-02);
+
+.mrl-blockNotification {
+	@include mrl-block-notification-animate-in;
+
+	align-items: center;
+	background: var(--mrl-blockNotification-background);
+	border-radius: var(--mrl-blockNotification-radius);
+	color: var(--mrl-blockNotification-color);
+	display: flex;
+	flex-direction: row;
+	gap: var(--mrl-blockNotification-inline-spacing);
+	justify-content: center;
+	min-height: var(--mrl-blockNotification-height);
+	padding: var(--mrl-blockNotification-inset-spacing);
+	position: relative;
+	width: 100%;
+
+	svg {
+		color: var(--mrl-blockNotification-color);
+	}
+}
+
+.mrl-blockNotification--dismissible {
+	padding-right: calc(
+		#{$mrl-notification-close-inset} + var(--mrl-blockNotification-inline-spacing) + #{$mrl-button-height--small}
+	);
+	position: relative;
+}
+
+.mrl-blockNotification-close {
+	position: absolute;
+	right: $mrl-notification-close-inset;
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+.mrl-blockNotification-message {
+	align-items: center;
+	display: flex;
+
+	:global(.message) {
+		@include mrl-text-static('small');
+
+		display: inline;
+	}
+}
+
+.mrl-blockNotification-heading {
+	color: var(--mrl-blockNotification-heading-color);
+	display: inline;
+	margin-right: var(--mrl-blockNotification-inline-spacing-message);
+}
+
+/**
+ * @todo v2 - we should apply a class to the mrl-svg element instead
+ * of targeting the element. However, the class should be `mrl-blockNotification-icon`
+ * so we would want to rename the existing class to `mrl-blockNotification-iconWrapper`
+ * which is a breaking change. Also we could explore if we need this div at all?
+ **/
+.mrl-blockNotification-icon {
+	min-width: fit-content;
+
+	> svg {
+		display: flex;
+	}
+}

package/dist/styles/MrlBlockNotification/variables.scss

@@ -0,0 +1,37 @@
+////
+/// Block Notification component styles
+/// @group block-notification
+////
+
+.mrl-blockNotification {
+	--mrl-blockNotification-background: var(--mrl-color-background-info);
+	--mrl-blockNotification-background-general: rgba(var(--mrl-gray-100), 1);
+	--mrl-blockNotification-color: rgba(var(--mrl-gray-10), 1);
+	--mrl-blockNotification-heading-color: var(--mrl-color-text-inverse);
+	--mrl-blockNotification-height: var(--mrl-spacing-09);
+	--mrl-blockNotification-inline-spacing: var(--mrl-spacing-03);
+	--mrl-blockNotification-inline-spacing-message: var(--mrl-spacing-02);
+	--mrl-blockNotification-inset-spacing: var(--mrl-spacing-03) var(--mrl-spacing-07);
+	--mrl-blockNotification-radius: 0;
+	--mrl-blockNotification-svg-color: var(--mrl-color-text-inverse);
+}
+
+// Kind variants
+.mrl-blockNotification[data-kind='error'] {
+	--mrl-blockNotification-background: var(--mrl-color-background-error);
+}
+
+.mrl-blockNotification[data-kind='success'] {
+	--mrl-blockNotification-background: var(--mrl-color-background-success);
+}
+
+.mrl-blockNotification[data-kind='warning'] {
+	--mrl-blockNotification-background: var(--mrl-color-background-warning);
+	--mrl-blockNotification-color: rgba(var(--mrl-gray-90), 1);
+	--mrl-blockNotification-heading-color: rgba(var(--mrl-black), 1);
+}
+
+.mrl-blockNotification[data-kind='general'],
+.mrl-blockNotification[data-kind='private'] {
+	--mrl-blockNotification-background: var(--mrl-blockNotification-background-general);
+}

package/dist/utils/index.d.ts

@@ -2,3 +2,5 @@ export * from './commonProps';
 export * from './getCamelCase';
 export * from './isObject';
 export * from './setAttributes';
+export * from './noop';
+export * from './trapFocus';

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

@@ -0,0 +1,7 @@
+/**
+ * No operation function to be used as a default callback.
+ *
+ * Example usage: in tests where there is a required handler, but we do not want to do anything.
+ * Better than passing a console log which clutters up our test output.
+ */
+export declare const noop: () => void;

package/dist/utils/setAttributes/setAttributes.d.ts

@@ -14,18 +14,18 @@ export type ClassObject = Record<string, boolean>;
  * @param {ClassObject} defaultClasses - design system component classes to apply
  * @returns {ClassObject} - with all classes
  */
-export declare const setClasses: (customClasses: AttrsObject | string | undefined, defaultClasses: ClassObject) => ClassObject;
+export declare const setClasses: (customClasses: AttrsObject | undefined, defaultClasses: ClassObject) => ClassObject;
 /**
  * Set an object of attributes to be used in a given component.
  *
- * @param {AttrsObject | string} attributes - The custom attributes passed to the component
+ * @param {AttrsObject} attributes - The custom attributes passed to the component
  * @param {AttrsObject} [defaults={}] - An optional object of the default attributes of a component
  * @param {string} className - Default classes to apply to the component
  *
  * Use when applying attributes such as a className directly to a react component.
  * @returns {AttrsObject} - An object of component attributes
  */
-export declare const setAttributes: (attributes: AttrsObject | string | undefined, defaults?: AttrsObject, className?: string) => AttrsObject;
+export declare const setAttributes: (attributes: AttrsObject | undefined, defaults?: AttrsObject, className?: string) => AttrsObject;
 /**
  *  Generates unique identifier
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "1.13.3",
+	"version": "1.15.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",