playbook_ui 13.16.0.pre.alpha.play1141iconkitusinglibrary2060 → 13.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c35038cfd349294c386c785ca696338870b551bfb47e5889cec5e44a6233dc27
-  data.tar.gz: 151eb7f0807953ea027f0cf63e43136116e49386a96cd8ed29d07e5a10808e80
+  metadata.gz: ead10fd559bd856f7f8ab99fae8f09f709917597051f693a1328d3b5c0801da7
+  data.tar.gz: d65933a64cf81ddc8d39a7be40bf3e65c5aa98a0d74ecf2e528ca1edb07f1851
 SHA512:
-  metadata.gz: 1cd6a8f948a5310a1da9507e8c86837ecc2575f35e687286bee218ad69e267652be963559389326b6ab857b1e43df62d956568d286d56a8336d222bc8188ebf6
-  data.tar.gz: 21c09b14ec1fc73db4f2f6bd34e0e2697b751e11e0e169aab5574c491203daea655169dc4b1bc02dbfc29875c47f23167f3d7a0435e0de1d5f8490d6a7cd5725
+  metadata.gz: 38f2bb66b95bac19fa9f5fa3a786df73f4eb7b738f50d561220476e72904761d7ba68c7ba785086b66796e6f80709f9dd693fed7c136da0d369f299ca7d0bc6d
+  data.tar.gz: f8b2432816f7b229d96b6bf53f6507569dc54b6fcf8f40246f0a34799beff3dedaf7d92ecee7f88d2f4bac71580f9a78edac3a28365c38b91fd7eab4a33d0c88

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,51 +1,9 @@
-$rotate-list: (90, 180, 270);
-$flip-list: (
-  "horizontal": (-1, 1),
-  "vertical": (1, -1),
-  "both": (-1, -1)
-);
-
-@keyframes pb_icon_spin {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-};
-
-svg {
-  &.pb_icon_kit {
-    path {
-      fill: currentColor !important;
-    }
-    @each $r in $rotate-list {
-      &.rotate_#{$r} {
-        transform: rotate(#{$r}deg);
-      }
-    }
-    @each $f, $v in $flip-list {
-      &.flip_#{$f} {
-        transform: scale($v);
-      }
-    }
-    &.pulse {
-      animation-name: pb_icon_spin;
-      animation-direction: normal;
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-      animation-timing-function: steps(8);
-    }
-    &.spin {
-      animation-name: pb_icon_spin;
-      animation-delay: 0s;
-      animation-direction: normal;
-      animation-duration: 2s;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
+// Rails custom icon styles
+svg.pb_custom_icon {
+  width: 1em;
+  fill: currentColor;
+  path {
+    fill: currentColor;
   }
 }
 

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -1,14 +1,13 @@
-import React, { ReactSVGElement } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
 
-type IconSizeNames = "lg"
+export type IconSizes = "lg"
 | "xs"
 | "sm"
-
-export type IconSizes = IconSizeNames | "1x"
+| "1x"
 | "2x"
 | "3x"
 | "4x"
@@ -22,14 +21,13 @@ export type IconSizes = IconSizeNames | "1x"
 
 type IconProps = {
   aria?: {[key: string]: string},
-  aspectRatio?: string,
   border?: string,
   className?: string,
   customIcon?: {[key: string] :SVGElement},
   data?: {[key: string]: string},
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
-  icon: string | ReactSVGElement,
+  icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inverse?: boolean,
@@ -42,66 +40,16 @@ type IconProps = {
   spin?: boolean,
 } & GlobalProps
 
-const iconSizeMap = {
-  base: 16,
-  xs: .75,
-  sm: .875,
-  lg: 1.25
-}
-
-const getSvgDimensions = (aspectRatio = '1:1', size: string): {width: number, height: number} | null => {
-  if (!size) return null
-  const aspect = aspectRatio.split(':')
-
-  const scale = size.toLowerCase().endsWith('x') ?
-    parseInt(size.replace(/\x/i, '')) :
-    iconSizeMap[size as IconSizeNames]
-
-  return {
-    width: (iconSizeMap.base * scale) * parseInt(aspect[0]),
-    height: (iconSizeMap.base * scale) * parseInt(aspect[1])
-  }
-}
-
 const flipMap = {
-  fa: {
-    horizontal: 'fa-flip-horizontal',
-    vertical: 'fa-flip-vertical',
-    both: 'fa-flip-horizontal fa-flip-vertical',
-    none: ''
-  },
-  svg: {
-    horizontal: 'flip_horizontal',
-    vertical: 'flip_vertical',
-    both: 'flip_horizontal flip_vertical',
-    none: ''
-  }
-}
-const pulseMap = {
-  fa: 'fa-pulse',
-  svg: 'pulse'
-}
-const spinMap = {
-  fa: 'fa-spin',
-  svg: 'spin'
-}
-const rotateMap = {
-  fa: {
-    90: 'fa-rotate-90',
-    180: 'fa-rotate-180',
-    270: 'fa-rotate-270'
-  },
-  svg: {
-    90: 'rotate_90',
-    180: 'rotate_180',
-    270: 'rotate_270'
-  }
+  horizontal: 'fa-flip-horizontal',
+  vertical: 'fa-flip-vertical',
+  both: 'fa-flip-horizontal fa-flip-vertical',
+  none: ""
 }
 
 const Icon = (props: IconProps) => {
   const {
     aria = {},
-    aspectRatio,
     border = false,
     className,
     customIcon,
@@ -109,52 +57,46 @@ const Icon = (props: IconProps) => {
     fixedWidth = true,
     flip = "none",
     htmlOptions = {},
-    icon = "",
+    icon,
     id,
     inverse = false,
     listItem = false,
     pull,
     pulse = false,
     rotation,
-    size = '1x',
+    size,
     fontStyle = 'far',
     spin = false,
   } = props
 
-  const iconURL = typeof(icon) === 'string' && icon.includes('.svg') ? icon : null
-  const iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
+  const faClasses = {
+    'fa-border': border,
+    'fa-fw': fixedWidth,
+    'fa-inverse': inverse,
+    'fa-li': listItem,
+    'fa-pulse': pulse,
+    'fa-spin': spin,
+    [`fa-${size}`]: size,
+    [`fa-pull-${pull}`]: pull,
+    [`fa-rotate-${rotation}`]: rotation,
 
-  const isFA = !iconElement && !customIcon && !iconURL
-  const svgProps = isFA ? null : {...{fill: 'currentColor'}, ...getSvgDimensions(aspectRatio, size)}
+  }
 
-  let classes = classnames(
+  // Lets check and see if the icon prop is referring to a custom Power icon...
+  // If so, then set fa-icon to "custom"
+  // this ensures the JS will not do any further operations
+  // faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
+  if (!customIcon) faClasses[`fa-${icon}`] = icon
+  
+  const classes = classnames(
+    flipMap[flip],
     'pb_icon_kit',
-    isFA ? fontStyle : null,
+    customIcon ? '' : fontStyle,
+    faClasses,
     globalProps(props),
     className
   )
 
-  const transformClasses = classnames(
-    flip ? flipMap[isFA ? 'fa' : 'svg'][flip] : null,
-    pulse ? pulseMap[isFA ? 'fa' : 'svg'] : null,
-    rotation ? rotateMap[isFA ? 'fa' : 'svg'][rotation] : null,
-    spin ? spinMap[isFA ? 'fa' : 'svg'] : null,
-  )
-  if (transformClasses) classes += ` ${transformClasses}`
-
-  if (isFA) {
-    const faClassList = {
-      'fa-border': border,
-      'fa-fw': (iconElement) ? false : fixedWidth,
-      'fa-inverse': inverse,
-      'fa-li': listItem,
-      [`fa-${size}`]: size,
-      [`fa-pull-${pull}`]: pull,
-    }
-    faClassList[`fa-${icon}`] = icon as string
-    classes += ` ${classnames(faClassList)}`
-  }
-
   const classesEmoji = classnames(
     'pb_icon_kit_emoji',
     globalProps(props),
@@ -168,21 +110,20 @@ const Icon = (props: IconProps) => {
 
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
-    if (iconElement || customIcon)
+    if (customIcon)
       return (
         <>
           {
-            React.cloneElement(iconElement || customIcon, {
+            React.cloneElement(customIcon, {
               ...dataProps,
               ...htmlProps,
-              ...svgProps,
               className: classes,
               id,
             })
           }
         </>
       )
-    else if (isValidEmoji(icon as string))
+    else if (isValidEmoji(icon))
       return (
         <>
           <span
@@ -195,19 +136,7 @@ const Icon = (props: IconProps) => {
           </span>
         </>
       )
-    else if (iconURL)
-      return (
-        <>
-          <img
-              {...dataProps}
-              {...htmlProps}
-              {...svgProps}
-              className={classes}
-              id={id}
-              src={iconURL}
-          />
-        </>
-      )
+
     else
       return (
         <>
@@ -232,4 +161,4 @@ const Icon = (props: IconProps) => {
   )
 }
 
-export default Icon
+export default Icon

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -2,9 +2,15 @@
 <div class="icon-wrapper">
 
   <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
-  <p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
-  <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
-  <p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
-  <p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
-  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
+  <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
+
+  <%= pb_rails("body", props: {
+    text: "Custom icons are compatible with other icon props (size, rotation,
+    spin, flip, etc). Their SVG fill colors will be inherited from
+    parent element's css color properties."
+  } ) %>
 </div>

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx

@@ -1,59 +1,33 @@
 import React from 'react'
 import { Icon } from '../../'
 
+// import Icons as config from 'power-icons'
 const config = {
-  icon: (
-    <svg viewBox="0 -256 1792 1792"
+  moon: (
+    <svg
+        ariaHidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
         xmlns="http://www.w3.org/2000/svg"
     >
-      <g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
-          <path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" />
-      </g>
+      <path
+          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
+          fill="currentColor"
+      />
     </svg>
   ),
 }
 
 const IconCustom = (props) => {
   return (
-    <React.Fragment>
-      <p>
-        <Icon
-            icon={config.icon}
-            {...props}
-        />
-      </p>
-      <p>
-        <Icon
-            icon={config.icon}
-            rotation={90}
-            size="2x"
-            {...props}
-        />
-      </p>
-      <p>
-        <Icon
-            icon={config.icon}
-            size="3x"
-            spin
-            {...props}
-        />
-      </p>
-      <p>
-        <Icon
-            icon={config.icon}
-            size="5x"
-            {...props}
-        />
-      </p>
-      <p>
-        <Icon
-            flip="horizontal"
-            icon={config.icon}
-            size="5x"
-            {...props}
-        />
-      </p>
-    </React.Fragment>
+    <div>
+      <Icon
+          customIcon={config.moon}
+          size="7x"
+          {...props}
+      />
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md

@@ -4,21 +4,16 @@ When using custom icons it is important to introduce a "clean" SVG. In order to
 
 Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
 
-Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
 
-Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point **when designing instead of trying to retrofit the viewbox afterwards**!
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
 
-You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
+You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
 
 ### React
 
-- Providing a valid React `<SVG>` element to the `icon` prop results in an `<SVG>` node within the working view.
-- Sending the absolute path to your SVG (e.g. `/my/path/to/icon.svg`) results in an `img` node with the `src` attribute set to the provided path:
-
-  ```html
-  <img src="host.com/my/path/to/icon.svg" />
-  ```
+So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
 
 ### Rails
 
-Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.
+Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,9 +1,7 @@
-<% if object.is_svg? %>
-  <%= object.render_svg %>
-<% elsif object.valid_emoji? %>
-  <span class="pb_icon_kit_emoji">
-    <%= object.icon.html_safe %>
-  </span>
+<% if object.custom_icon %>
+  <%= object.render_svg(object.custom_icon) %>
+<% elsif object.valid_emoji(object.icon) %>
+  <span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
 <% else %>
   <%= content_tag(:i, nil,
       id: object.id,

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -38,7 +38,7 @@ module Playbook
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
 
-      def valid_emoji?
+      def valid_emoji(icon)
         emoji_regex = /\p{Emoji}/
         emoji_regex.match?(icon)
       end
@@ -79,42 +79,19 @@ module Playbook
         )
       end
 
-      def render_svg
-        doc = Nokogiri::XML(URI.open(icon || custom_icon)) # rubocop:disable Security/Open
-        svg = doc.at_css "svg"
-        svg["class"] = "pb_custom_icon " + object.custom_icon_classname
-        svg["height"] = svg_dims[svg_size] * 16
-        svg["width"] = svg_dims[svg_size] * 16
-        doc.at_css("path")["fill"] = "currentColor"
-        raw doc
-      end
-
-      def is_svg?
-        (icon || custom_icon.to_s).include?(".svg")
+      def render_svg(path)
+        if File.extname(path) == ".svg"
+          doc = Nokogiri::XML(URI.open(path)) # rubocop:disable Security/Open
+          svg = doc.at_css "svg"
+          svg["class"] = "pb_custom_icon " + object.custom_icon_classname
+          raw doc
+        else
+          raise("Custom icon must be an svg. Please check your path and file type.")
+        end
       end
 
     private
 
-      def svg_size
-        size.nil? ? "1x" : size
-      end
-
-      def svg_dims
-        { "lg" => 1.25,
-          "xs" => 0.75,
-          "sm" => 0.875,
-          "1x" => 1,
-          "2x" => 2,
-          "3x" => 3,
-          "4x" => 4,
-          "5x" => 5,
-          "6x" => 6,
-          "7x" => 7,
-          "8x" => 8,
-          "9x" => 9,
-          "10x" => 10 }
-      end
-
       def border_class
         border ? "fa-border" : nil
       end

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx

@@ -15,7 +15,7 @@ type LabelValueProps = {
   aria?: { [key: string]: string };
   className?: string;
   dark?: boolean;
-  data?: Record<string, unknown>;
+  data?: object;
   date?: Date;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -10,7 +10,7 @@ type LayoutPropTypes = {
   className?: string,
   collapse?: "xs" | "sm" | "md" | "lg" | "xl",
   dark?: boolean,
-  data?: Record<string, unknown>,
+  data?: object,
   full?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   position?: "left" | "right",
@@ -168,7 +168,6 @@ const Layout = (props: LayoutPropTypes) => {
         layoutCss,
         layoutCollapseCss,
         className,
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         globalProps(filteredProps)
       )}

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -16,8 +16,7 @@ test("render all color variants", () => {
   testValues.forEach((variant) => {
     const { getByTestId } = render(
       <LayoutTest data={{ testid: `test-${variant}` }}
-          variant={variant}
-      />
+          variant={variant} />
     )
     expect(getByTestId(`test-${variant}`)).toHaveClass(
       `pb_layout_kit_sidebar_size_md_left_${
@@ -34,8 +33,7 @@ test("render transparent class", () => {
 
   const { getByTestId } = render(
     <LayoutTest data={{ testid: `test-${id}` }}
-        variant={id}
-    />
+        variant={id} />
   )
   expect(getByTestId(`test-${id}`)).toHaveClass(
     `pb_layout_kit_sidebar_size_md_left_${id}`
@@ -49,8 +47,7 @@ test("render all sizes variants", () => {
   testValues.forEach((size) => {
     const { getByTestId } = render(
       <LayoutTest data={{ testid: `test-${size}` }}
-          size={size}
-      />
+          size={size} />
     )
     expect(getByTestId(`test-${size}`)).toHaveClass(
       `pb_layout_kit_sidebar_size_${size}_left_light`
@@ -87,8 +84,7 @@ test("render all layout variants", () => {
   testValues.forEach(({ layout, expected }) => {
     const { getByTestId } = render(
       <Layout data={{ testid: `test-${layout}` }}
-          layout={layout}
-      >
+          layout={layout}>
         <Layout.Body>
           <Card>{"Card content"}</Card>
         </Layout.Body>

data/app/pb_kits/playbook/pb_legend/_legend.tsx

@@ -12,7 +12,7 @@ type LegendProps = {
   className?: string,
   color?: string,
   dark?: boolean,
-  data?: Record<string, unknown>,
+  data?: object,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   prefixText?: string,
@@ -64,11 +64,11 @@ const Legend = (props: LegendProps) => {
         {
           prefixText && (
             <Title
-                dark={dark}
-                size={4}
-                tag="span"
-                text={` ${prefixText} `}
-            />
+              dark={dark}
+              size={4}
+              tag="span"
+              text={` ${prefixText} `}
+          />
           )
         }
         {` ${text} `}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -56,15 +56,15 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
   return (
     <div
         className="Slides"
-        onTouchEnd={onTouchEnd} 
+        onTouchStart={onTouchStart} 
         onTouchMove={onTouchMove} 
-        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd}
     >
       {
         urls.length > 1 && (
         <CircleIconButton
             className='carousel-arrow-left'
-            dark
+            dark={true}
             icon="chevron-left"
             onClick={arrowLeft}
             variant="link"
@@ -81,7 +81,7 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
         urls.length > 1 && (
         <CircleIconButton
             className='carousel-arrow-right'
-            dark
+            dark={true}
             icon="chevron-right"
             onClick={arrowRight}
             variant="link"

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx

@@ -16,7 +16,7 @@ export default function Thumbnail({
   alt,
   width,
   url,
-  onClick,
+  onClick = ()=>{},
   buttonRef,
 }: ThumbnailType): React.ReactElement {
   const activeClasses = classnames('Thumbnail', { active })

data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx

@@ -20,8 +20,8 @@ type CarouselType = {
 export default function Carousel({
   currentIndex,
   photos,
-  onClick,
-  onChange = () => undefined,
+  onClick = ()=>{},
+  onChange = ()=>{},
   setIndex,
 }: CarouselType): React.ReactElement {
   useEffect(() => {
@@ -39,10 +39,10 @@ export default function Carousel({
   return (
     <div className="Lightbox">
       <Slides
+          setIndex={setIndex}
           current={currentIndex}
           onChange={handleChange}
           onClick={onClick}
-          setIndex={setIndex}
           urls={photos.map((photo) => photo.url)}
       />
       {photos.length > 1 ? (