@muraldevkit/ui-toolkit 1.8.1 → 1.9.1

package/dist/styles/divider/mixins.scss

@@ -0,0 +1,73 @@
+////
+/// Divider component mixins
+/// @group divider
+////
+
+/// Used to apply a separation between two elements without adding an additional element to the DOM. This is
+/// typically used for things like menus where we don't want to add the DOM elements for accessibility considerations
+/// for screen reader users.
+/// @group mixins
+/// @param {String} $orientation - Defines the orientation of the divider. Available options are: "horizontal" (default)
+/// @param {String} $max-width - Use when the divider should not span the full-width of the container, for example
+/// 	dividers between stacked Icon Buttons in a toolbar. Set to any valid CSS width value.
+///
+/// @example @include mrl-divider; // Generates the default horizontal divider that spans the full width of the container
+/// @example @include mrl-divider($max-width: 2rem); // Generates a separation that is only 2rems wide and centers it between
+/// 	the overall container's width
+/// @todo - since this is no longer used in the component implementation, we need to use this in another component (e.g. menu)
+/// 	or set up Storybook so we can test Sass mixins to ensure this is not breaking
+@mixin mrl-divider($orientation: 'horizontal', $max-width: '') {
+	// Note: if you change this CSS before the @todo comment is addressed, you'll need to run the changes in the product to
+	// verify nothing breaks
+	position: relative;
+
+	// We use pseudo elements so we can apply this to non-divider elements
+	// for better accessibility support
+
+	// The :before element is used to ensure the proper spacing as margin-top
+	// will push content down but margin-bottom does not reflow the content
+
+	// The :after element is the actual visual divider we display to the user
+	// The element that these pseudo elements are applied to is position relative
+
+	@if $orientation == 'horizontal' {
+		&::before {
+			content: '';
+			display: block;
+			height: 0;
+			margin-top: calc(var(--mrl-divider-spacing) * 2);
+			width: 100%;
+		}
+
+		&::after {
+			background-color: var(--mrl-divider-color);
+			content: '';
+			display: block;
+			height: var(--mrl-divider-size);
+			position: absolute;
+			top: calc(var(--mrl-divider-spacing) * -1);
+			width: 100%;
+
+			/* stylelint-disable-next-line max-nesting-depth */
+			@if $max-width != '' {
+				@include mrl-divider-center;
+
+				max-width: $max-width;
+			}
+		}
+	} @else {
+		// @todo - the pseudo elements can't push content to the right
+		// in order to get the correct spacing
+		@warn 'Vertical dividers are not supported as pseudo elements';
+	}
+}
+
+/// Used to create DRY code for shared styles between the actual divider component and mixin.
+/// This mixin is not intended for external adoption.
+/// @group mixins
+///
+/// @example @include mrl-divider-center; // Adds shared code to your implementation
+@mixin mrl-divider-center() {
+	left: 50%;
+	transform: translateX(-50%);
+}

package/dist/styles/divider/module.scss

@@ -0,0 +1,35 @@
+////
+/// Divider component styles
+/// @group divider
+////
+
+@use './styles.variables.scss';
+
+// Horizontal divider
+.MrlDivider--horizontal {
+	background-color: var(--mrl-divider-color);
+	display: block;
+	height: var(--mrl-divider-size);
+	margin: var(--mrl-divider-spacing) 0;
+	width: 100%;
+
+	.MrlDivider--center {
+		margin: var(--mrl-divider-spacing) auto;
+	}
+}
+
+// Vertical divider
+.MrlDivider--vertical {
+	// A display: flex parent will give the most consistent and expected results
+	// but we add display: inline-block just in case so the user can at least see
+	// the divider and then tweak positioning as needed.
+	align-self: stretch;
+	background-color: var(--mrl-divider-color);
+	display: inline-block;
+	margin: 0 var(--mrl-divider-spacing);
+	width: var(--mrl-divider-size);
+
+	.MrlDivider--center {
+		align-self: center;
+	}
+}

package/dist/styles/divider/variables.scss

@@ -0,0 +1,30 @@
+////
+/// Divider component variables
+/// @group divider
+////
+
+// Need to define on both the host and root to support traditional DOM and Shadow DOM
+.MrlDivider {
+	--mrl-divider-size: var(--mrl-spacing-01);
+	--mrl-divider-spacing: var(--mrl-space-stack-section-divider);
+	--mrl-divider-color: var(--mrl-color-line-divider);
+}
+
+// Spacing variants (only applies to horizontal dividers)
+.MrlDivider--small {
+	--mrl-divider-spacing: var(--mrl-space-stack-section-divider-small);
+}
+
+.MrlDivider--large {
+	--mrl-divider-spacing: var(--mrl-space-stack-section-divider-large);
+}
+
+// Kind variants
+.MrlDivider--inverse {
+	--mrl-divider-color: var(--mrl-color-line-divider-inverse);
+}
+
+// Orientation variants
+.MrlDivider--vertical {
+	--mrl-divider-spacing: var(--mrl-spacing-02);
+}

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

@@ -21,7 +21,6 @@ export declare const setClasses: (customClasses: AttrsObject | string | undefine
  * @param {AttrsObject | string} 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
- * @param {boolean} forReact - Whether or not the attributes are being set for a React component.
  *
  * Use when applying attributes such as a className directly to a react component.
  * @returns {AttrsObject} - An object of component attributes

package/package.json

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