@uncinc/uncinc-react-kitchen-sink 2.21.4 → 2.23.0

package/dist/components/Icon/style.scss

@@ -5,6 +5,7 @@
 // https://marella.me/material-design-icons/demo/svg/
 
 $custom-icon-path: '' !default;
+$custom-icon-names: () !default;
 
 $material-icon-names: (
   arrow_forward,
@@ -32,7 +33,10 @@ $material-icon-styles: (
   background-color: none;
 }
 
-@mixin generateMaterialIconClasses() {
+@mixin generateMaterialIconClasses(
+  $material-icon-names: $material-icon-names,
+  $material-icon-styles: $material-icon-styles,
+) {
   @for $styleIndex from 1 through length($material-icon-styles) {
     $style: list.nth($material-icon-styles, $styleIndex);
 
@@ -55,7 +59,10 @@ $material-icon-styles: (
   }
 }
 
-@mixin generateCustomIconClasses() {
+@mixin generateCustomIconClasses(
+  $custom-icon-names: $custom-icon-names,
+  $custom-icon-path: $custom-icon-path,
+) {
   @for $nameIndex from 1 through length($custom-icon-names) {
     $name: list.nth($custom-icon-names, $nameIndex);
 
@@ -94,6 +101,9 @@ $material-icon-styles: (
 /// @param {Boolean} $custom - Are we overwwriting with a
 /// custom icon?
 ///
+/// @param {String} $custom-path - Needed when using @import
+/// instead of @use, because $custom-icon-path isn't available globally.
+///
 /// @example scss
 ///   .icon-arrow {
 ///     @include gridIconToMaterialIcon('download');
@@ -108,14 +118,17 @@ $material-icon-styles: (
   $icon-name: null,
   $style: 'outlined',
   $custom: false,
+  $custom-path: null,
   $color: #000000,
 ) {
   @if not $icon-name {
-    @error 'an icon name is required'
+    @error 'an icon name is required';
   }
 
   @if not $custom {
     mask-image: url('~@material-design-icons/svg/#{$style}/#{$icon-name}.svg');
+  } @else if $custom-path {
+    mask-image: url('#{$custom-path}/#{$icon-name}.svg');
   } @else {
     mask-image: url('#{$custom-icon-path}/#{$icon-name}.svg');
   }
@@ -137,12 +150,14 @@ $material-icon-styles: (
   $icon-name: null,
   $style: 'outlined',
   $custom: false,
+  $custom-path: null,
   $color: #000000,
 ) {
   @include gridIconToMaterialIcon(
     $icon-name,
     $style,
     $custom,
+    $custom-path,
     $color,
-  )
+  );
 }

package/dist/components/Lottie/LottieAnimation/index.d.ts

@@ -1,5 +1,13 @@
 import React from 'react';
 import type { LottieProps } from '../types';
 import './style.scss';
+/**
+ * LottieAnimation renders an interactive or static Lottie animation.
+ *
+ * Accessibility note:
+ * - The ariaLabel prop will only be effective if the animation is interactive
+ *   (pauseOnClick or activateOnHover is true) because it adds role="button" and tabIndex=0.
+ * - On non-interactive divs, aria-label is ignored by screen readers.
+ */
 declare const LottieAnimation: React.ForwardRefExoticComponent<Omit<LottieProps, "delay"> & React.RefAttributes<import("lottie-web").AnimationItem>>;
 export default LottieAnimation;

package/dist/components/Lottie/LottieAnimation/index.js

@@ -11,11 +11,22 @@ import lottie from 'lottie-web';
 import './style.scss';
 var DIRECTION_FORWARD = 1;
 var DIRECTION_BACKWARDS = -1;
+
+/**
+ * LottieAnimation renders an interactive or static Lottie animation.
+ *
+ * Accessibility note:
+ * - The ariaLabel prop will only be effective if the animation is interactive
+ *   (pauseOnClick or activateOnHover is true) because it adds role="button" and tabIndex=0.
+ * - On non-interactive divs, aria-label is ignored by screen readers.
+ */
+
 var LottieAnimation = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
     className = props.className,
-    _props$ariaLabel = props.ariaLabel,
-    ariaLabel = _props$ariaLabel === void 0 ? 'animation' : _props$ariaLabel,
+    ariaLabel = props.ariaLabel,
+    _props$ariaHidden = props.ariaHidden,
+    ariaHidden = _props$ariaHidden === void 0 ? false : _props$ariaHidden,
     data = props.data,
     path = props.path,
     _props$renderer = props.renderer,
@@ -176,7 +187,7 @@ var LottieAnimation = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("div", _extends({
     className: lottieClasses,
     id: "lottie--".concat(lottieId),
-    "aria-label": ariaLabel
+    "aria-hidden": ariaHidden
     // Only make the Lottie interactable if we provide the necessary props,
     // otherwise it's just a plain div.
   }, pauseOnClick || activateOnHover ? {
@@ -184,6 +195,7 @@ var LottieAnimation = /*#__PURE__*/React.forwardRef(function (props, ref) {
     tabIndex: 0,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
+    ariaLabel: ariaLabel,
     onClick: onClick,
     onKeyDown: onKeyDown
   } : {}));

package/dist/components/Lottie/types.d.ts

@@ -11,7 +11,8 @@ export interface LottieConfig<T extends RendererType = 'svg'> extends Omit<Anima
 export interface LottieProps extends Omit<Partial<LottieConfig>, 'animationData' | 'autoplay'> {
     id?: string;
     className?: string;
-    ariaLabel?: string;
+    ariaLabel: string;
+    ariaHidden?: boolean;
     data?: unknown;
     autoPlay?: AnimationConfig['autoplay'];
     delay?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.21.4",
+  "version": "2.23.0",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",