@uncinc/uncinc-react-kitchen-sink 2.22.0 → 2.23.1

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,12 +11,20 @@ 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,
     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,20 +184,18 @@ var LottieAnimation = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [loadAnimation, lottieAnimation, onDestroy]);
   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 ? {
+    id: "lottie--".concat(lottieId)
+  }, ariaLabel && {
+    'aria-label': ariaLabel
+  }, !ariaLabel && !pauseOnClick && !activateOnHover && {
+    role: 'presentation'
+  }, (pauseOnClick || activateOnHover) && {
     role: 'button',
     tabIndex: 0,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClick,
     onKeyDown: onKeyDown
-  } : {
-    role: 'img'
   }));
 });
 export default LottieAnimation;

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

@@ -11,8 +11,7 @@ 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;
-    ariaHidden?: boolean;
+    ariaLabel?: string;
     data?: unknown;
     autoPlay?: AnimationConfig['autoplay'];
     delay?: number;

package/package.json

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