playbook_ui 13.16.0.pre.alpha.PBNTR184betaflaginmenuyml2085 → 13.16.0.pre.alpha.PLAY11641991

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1fd075f10326a40519c20d95bdda522fd5ffb01c0f8b43cc8daf0c65659df31e
-  data.tar.gz: 668009edc5596c3c139578bbbbb0b9df5aa385a91f00f2ceab250b4ea811f13e
+  metadata.gz: 57fca63de92f445e74e488eda8d295b1479dbe313650e923fee16c785cf6b45e
+  data.tar.gz: c560bc551c9ae918623a7162cdba1697c84abaad1734945179fc8f308d0d9291
 SHA512:
-  metadata.gz: 2a42c6d61a727c8db17a7b65458dea7e4cd05575b138a95050b05fecf936a9cba041381ab7d19c33f8e4241ee6aa586b66cce9cc8e170f70d39b9616f64702f3
-  data.tar.gz: f4ec5842c6736935bf03372ce6efa4806038c16cc0621c55d8e363ba71da75e7d3c1c47838e03f941e3821c351650a7fa41a70d69439466f8993a9cdf1bda589
+  metadata.gz: 4e4515916b811c21fcb4a83494c1da95070ab28eed128ec2c9fb39b468a85c1328afe2f129edfd9076ac87bab0229c1c83947b9d883997e536799b7fd6b4360c
+  data.tar.gz: 6140438567931eff178736f0264a9ead96dfbf29854b2ab0c373521168befbee0650d98bbb2d14771ecd455f5cbf0de1de288ca7f9b8d5e61a045707d39f087c

data/app/pb_kits/playbook/_playbook.scss

@@ -1,17 +1,16 @@
-
-
-@import 'pb_advanced_table/advanced_table';
-@import 'pb_avatar/avatar';
-@import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_background/background';
-@import 'pb_badge/badge';
-@import 'pb_bar_graph/bar_graph';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
 @import 'pb_button_toolbar/button_toolbar';
 @import 'pb_caption/caption';
 @import 'pb_card/card';
+@import 'pb_detail/detail';
+@import 'pb_title/title';
+@import 'pb_avatar/avatar';
+@import 'pb_avatar_action_button/avatar_action_button';
+@import 'pb_badge/badge';
+@import 'pb_bar_graph/bar_graph';
 @import 'pb_checkbox/checkbox';
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
@@ -21,22 +20,21 @@
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
 @import 'pb_date_picker/date_picker';
+@import 'pb_date_time/date_time';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
-@import 'pb_date_time/date_time';
 @import 'pb_date_time_stacked/date_time_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
-@import 'pb_detail/detail';
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
-@import 'pb_flex/flex';
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
+@import 'pb_flex/flex';
 @import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
@@ -57,7 +55,6 @@
 @import 'pb_map/map';
 @import 'pb_map/pb_map_button_mixin';
 @import 'pb_message/message';
-@import 'pb_multi_level_select/multi_level_select';
 @import 'pb_multiple_users/multiple_users';
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
@@ -88,11 +85,9 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
-@import 'pb_time_range_inline/time_range_inline';
-@import 'pb_time_stacked/time_stacked';
 @import 'pb_timeline/timeline';
+@import 'pb_time_range_inline/time_range_inline';
 @import 'pb_timestamp/timestamp';
-@import 'pb_title/title';
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
@@ -101,6 +96,7 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
+@import 'pb_time_stacked/time_stacked';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/mixins';
@@ -119,3 +115,5 @@
 @import './utilities/text_align';
 @import './utilities/overflow';
 @import './utilities/truncate';
+
+@import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/index.js

@@ -4,7 +4,6 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
-export { default as AdvancedTable} from './pb_advanced_table/_advanced_table'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'
@@ -60,8 +59,8 @@ export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
-export { default as MapCustomButton } from './pb_map/_map_custom_button'
 export { default as Map} from './pb_map/_map'
+export { default as MapCustomButton } from './pb_map/_map_custom_button'
 export { default as Message } from './pb_message/_message'
 export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
 export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -10,7 +10,7 @@ type FlexProps = {
   data?: GenericObject,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
   justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: unknown) => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inline?: boolean,
   orientation?: "row" | "column",

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactSVGElement } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
@@ -27,7 +27,7 @@ type IconProps = {
   data?: {[key: string]: string},
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
-  icon: string,
+  icon: string | ReactSVGElement,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inverse?: boolean,
@@ -57,7 +57,7 @@ const Icon = (props: IconProps) => {
     fixedWidth = true,
     flip = "none",
     htmlOptions = {},
-    icon,
+    icon = "",
     id,
     inverse = false,
     listItem = false,
@@ -79,19 +79,19 @@ const Icon = (props: IconProps) => {
     [`fa-${size}`]: size,
     [`fa-pull-${pull}`]: pull,
     [`fa-rotate-${rotation}`]: rotation,
-
   }
 
-  // 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 iconURL = typeof(icon) === 'string' && icon.includes('.svg') ? icon : null
+  const iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
+
+  const isFA = !iconElement && !customIcon && !iconURL
+
+  if (isFA) faClasses[`fa-${icon}`] = icon as string
+
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
-    customIcon ? '' : fontStyle,
+    (iconElement || customIcon) ? '' : fontStyle,
     faClasses,
     globalProps(props),
     className
@@ -110,11 +110,11 @@ const Icon = (props: IconProps) => {
 
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
-    if (customIcon)
+    if (iconElement || customIcon)
       return (
         <>
           {
-            React.cloneElement(customIcon, {
+            React.cloneElement(iconElement || customIcon, {
               ...dataProps,
               ...htmlProps,
               className: classes,
@@ -123,7 +123,7 @@ const Icon = (props: IconProps) => {
           }
         </>
       )
-    else if (isValidEmoji(icon))
+    else if (isValidEmoji(icon as string))
       return (
         <>
           <span
@@ -136,7 +136,19 @@ const Icon = (props: IconProps) => {
           </span>
         </>
       )
-
+    else if (iconURL)
+      return (
+        <>
+          <span
+              {...dataProps}
+              {...htmlProps}
+              className={classesEmoji}
+              id={id}
+          >
+            <img src={iconURL} />
+          </span>
+        </>
+      )
     else
       return (
         <>
@@ -161,4 +173,4 @@ const Icon = (props: IconProps) => {
   )
 }
 
-export default Icon
+export default Icon

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

@@ -2,15 +2,9 @@
 <div class="icon-wrapper">
 
   <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
-  <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."
-  } ) %>
+  <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>
 </div>

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

@@ -1,33 +1,59 @@
 import React from 'react'
 import { Icon } from '../../'
 
-// import Icons as config from 'power-icons'
 const config = {
-  moon: (
-    <svg
-        ariaHidden="true"
-        focusable="false"
-        role="img"
-        viewBox="0 0 512 512"
+  icon: (
+    <svg viewBox="0 -256 1792 1792"
         xmlns="http://www.w3.org/2000/svg"
     >
-      <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"
-      />
+      <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>
     </svg>
   ),
 }
 
 const IconCustom = (props) => {
   return (
-    <div>
-      <Icon
-          customIcon={config.moon}
-          size="7x"
-          {...props}
-      />
-    </div>
+    <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>
   )
 }
 

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

@@ -1,19 +1,14 @@
 # Tips for Custom Icons
 
-When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
-
-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.
-
-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.
-
 ### React
 
-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.
+- 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" />
+  ```
 
 ### Rails
 
-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.
+Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.

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

@@ -1,7 +1,9 @@
-<% 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>
+<% if object.is_svg? %>
+  <%= object.render_svg %>
+<% elsif object.valid_emoji? %>
+  <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(icon)
+      def valid_emoji?
         emoji_regex = /\p{Emoji}/
         emoji_regex.match?(icon)
       end
@@ -79,15 +79,15 @@ module Playbook
         )
       end
 
-      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
+      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
+        raw doc
+      end
+
+      def is_svg?
+        (icon || custom_icon).include?(".svg")
       end
 
     private

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 ? (

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -61,31 +61,23 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
 
   const HeaderBody = () => (
     <React.Fragment>
-      <FlexItem flex="1"
-          marginLeft="sm"
-      >
+      <FlexItem flex="1" marginLeft="sm">
         <CircleIconButton
-            dark
-            icon={icon}
-            onClick={handleOnLightboxClose}
-            variant="link"
+          onClick={handleOnLightboxClose}
+          dark={true}
+          variant="link"
+          icon={icon}
         />
       </FlexItem>
       {title && text && (
         <FlexItem flex="5">
           <Flex justify="center">
-            <Flex align="center"
-                orientation="column"
-            >
+            <Flex align="center" orientation="column">
               {typeof title === "string" ? (
-                <Title dark
-                    paddingBottom="xxs"
-                    size={4}
-                    text={title}
-                />
+                <Title dark paddingBottom="xxs" size={4} text={title} />
               ) : (
-                <Flex className="custom-header"
-                    justify="center"
+                <Flex justify="center"
+                   className="custom-header"
                 >
                   {title}
                   </Flex>
@@ -94,8 +86,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
               {typeof text === "string" ? (
                 <Caption dark>{text}</Caption>
               ) : (
-                <Flex className="custom-header"
-                    justify="center"
+                <Flex justify="center"
+                className="custom-header"
                 >
                   {text}
                 </Flex>
@@ -107,12 +99,12 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
       <FlexItem flex="1">
         <Flex justify="end">
           <Button
-              className="nav-right-btn"
-              dark
-              htmlType="button"
-              onClick={onClickRight}
-              text={navRight}
-              variant="link"
+            className="nav-right-btn"
+            htmlType="button"
+            onClick={onClickRight}
+            dark
+            variant="link"
+            text={navRight}
           />
         </Flex>
       </FlexItem>
@@ -122,11 +114,11 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
   return (
     <div className="carousel-header">
       <Flex
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classnames(headerCSS, headerSpacing, className)}
-          spacing={spacing}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(headerCSS, headerSpacing, className)}
+        spacing={spacing}
       >
         {closeable && <HeaderBody />}
         {children}