@muraldevkit/ui-toolkit 1.8.0 → 1.9.0

package/dist/components/divider/MrlDivider.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { AttrsObject } from '../../utils';
+import { Kind, Orientation, Spacing } from './constants';
+interface MrlDividerProps {
+    /**
+     * Applies additional HTML attributes to the divider element.
+     */
+    attrs?: AttrsObject;
+    /**
+     * Defines which color scheme to used based on the background color of the container.
+     * White/light backgrounds should use "default" and dark/saturated color backgrounds
+     * should use "inverse".
+     */
+    kind: Kind;
+    /**
+     * Use to set a width/height of a divider to create an offset from surrounding content.
+     * This is commonly found in toolbars. Value can be any valid CSS `width/height` value, such as
+     * a CSS variable or rem value. Warning, vertical dividers may not work if set to a percentage,
+     * due to browser limitations with calculating dynamic heights. You should not set the parent to
+     * a static height to make this work as that poses accessibility issues.
+     */
+    length?: string;
+    /**
+     * Determines the orientation of the divider based on the sibling elements' orientation.
+     * Stacked elements should use "horizontal" and elements displayed in a row should use
+     * "vertical". Note for the "vertical" orientation, only usage between a row of Icon Buttons
+     * is currently supported.
+     */
+    orientation: Orientation;
+    /**
+     * Determines how much space to provide between the elements that the divider is separating.
+     * This option only applies to horizontal orientation.
+     */
+    spacing?: Spacing;
+}
+/**
+ * Used to visually and semantically separate two elements.
+ * For visual separation only view this package's mixins
+ *
+ * @param props - component props
+ * @returns a MrlDivider React component.
+ */
+export declare function MrlDivider({ attrs, kind, length, orientation, spacing }: MrlDividerProps): JSX.Element;
+export {};

package/dist/components/divider/constants.d.ts

@@ -0,0 +1,18 @@
+export declare const allowedValues: {
+    kinds: readonly ["default", "inverse"];
+    orientations: readonly ["horizontal", "vertical"];
+    spacings: readonly ["small", "medium", "large"];
+};
+export type Kind = (typeof allowedValues.kinds)[number];
+export type Orientation = (typeof allowedValues.orientations)[number];
+export type Spacing = (typeof allowedValues.spacings)[number];
+export interface DividerDefaults {
+    kind: Kind;
+    orientation: Orientation;
+    spacing: Spacing;
+}
+/**
+ * Default values for props on the Divider component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: DividerDefaults;

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.0",
+	"version": "1.9.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",