playbook_ui 13.27.0 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -20,7 +20,6 @@ $transition: $transition_cubic;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
     height: 22px;
-    position: relative;
     transition: background $transition_default ease, box-shadow $transition_default ease;
     width: 22px;
     .check_icon,
@@ -28,8 +27,8 @@ $transition: $transition_cubic;
       color: $white;
       height: 16px;
       left: 1px;
-      position: relative;
       display: flex;
+      margin: auto;
       opacity: 0;
       width: 16px;
       &.hidden {

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,6 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { merge } from 'lodash'
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";
@@ -18,6 +19,7 @@ type CircleChartProps = {
   children?: Node;
   className?: string;
   colors?: string[];
+  customOptions?: Partial<Highcharts.Options>;
   dark?: boolean;
   data?: {[key: string]: string},
   dataLabelHtml?: string;
@@ -67,6 +69,7 @@ const CircleChart = ({
   children,
   className,
   colors = [],
+  customOptions = {},
   dark = false,
   data = {},
   dataLabelHtml = "<div>{point.name}</div>",
@@ -115,6 +118,9 @@ const CircleChart = ({
     innerSizes[size];
 
 
+  const filteredProps: any = {...props};
+  delete filteredProps.verticalAlign;
+
   const [options, setOptions] = useState({});
 
   useEffect(() => {
@@ -171,7 +177,7 @@ const CircleChart = ({
       ],
       credits: false,
     };
-    setOptions({ ...staticOptions });
+    setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 
 
@@ -181,7 +187,7 @@ const CircleChart = ({
         <div id={`wrapper-circle-chart-${id}`}>
           <HighchartsReact
               containerProps={{
-              className: classnames("pb_circle_chart", globalProps(props)),
+              className: classnames("pb_circle_chart", globalProps(filteredProps)),
               id: id,
               ...ariaProps,
               ...dataProps,
@@ -195,7 +201,7 @@ const CircleChart = ({
       ) : (
         <HighchartsReact
             containerProps={{
-            className: classnames("pb_circle_chart", globalProps(props)),
+            className: classnames("pb_circle_chart", globalProps(filteredProps)),
             id: id,
             ...ariaProps,
             ...dataProps,

data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import CircleChart from './_circle_chart';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'circlechart1';
+
+test('uses exact classname', () => {
+  const data = [
+    {
+      name: 'Waiting for Calls',
+      value: 41,
+    },
+    {
+      name: 'On Call',
+      value: 49,
+    },
+    {
+      name: 'After call',
+      value: 10,
+    },
+  ]
+  render(
+    <CircleChart
+        chartData={data}
+        data={{ testid: testId }}
+        id='circlechartid'
+    />
+  );
+ 
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('pb_circle_chart');
+});

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -8,6 +8,7 @@ module Playbook
                    default: "center"
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
+      prop :custom_options, default: {}
       prop :style, type: Playbook::Props::Enum,
                    values: %w[pie],
                    default: "pie"
@@ -40,7 +41,7 @@ module Playbook
       prop :x, type: Playbook::Props::Numeric
       prop :y, type: Playbook::Props::Numeric
 
-      def chart_options
+      def standard_options
         {
           align: align,
           id: id,
@@ -68,6 +69,26 @@ module Playbook
         }
       end
 
+      def chart_options
+        standard_options.deep_merge(custom_options)
+      end
+
+      def vertical_align_props
+        if vertical_align
+          if object.vertical_align
+            original_result = super
+            class_to_remove = "vertical_align_#{object.vertical_align}"
+
+            modified_result = original_result.gsub(class_to_remove, "").strip
+            modified_result.empty? ? nil : modified_result
+          else
+            super
+          end
+        else
+          super
+        end
+      end
+
       def classname
         generate_classname("pb_circle_chart")
       end

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`html structure is correct 1`] = `
+<div>
+  <div
+    class="pb_collapsible_kit additional_class"
+    data-testid="collapsible1"
+  >
+    <div
+      class="pb_collapsible_main_kit cursor_pointer"
+    >
+      <div>
+        <div
+          class="pb_flex_kit_orientation_row_justify_content_left_align_items_center_spacing_between"
+        >
+          <div
+            class="pb_flex_item_kit"
+          >
+            <div>
+              Main Section
+            </div>
+          </div>
+          <div
+            class="pb_flex_item_kit"
+          >
+            <div
+              class="icon_wrapper"
+              style="vertical-align: middle; color: rgb(193, 205, 214);"
+            >
+              <i
+                class="pb_icon_kit far fa-fw fa-lg fa-chevron-down"
+              />
+              <span
+                aria-label="chevron-down icon"
+                hidden=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pb_collapsible_content_kit toggle-content"
+      data-collapsible-content="true"
+      style="height: 0px;"
+    >
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.
+      </div>
+    </div>
+  </div>
+</div>
+`;

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
@@ -9,10 +9,18 @@ import CollapsibleContent from './child_kits/CollapsibleContent'
 import CollapsibleMain from './child_kits/CollapsibleMain'
 import CollapsibleContext from './context'
 import { IconSizes } from "../pb_icon/_icon"
+import CollapsibleIcon from './child_kits/CollapsibleIcon'
 
+type CollapsibleMainProps = {
+  children: React.ReactNode
+}
+
+type CollapsibleContentProps = {
+  children: React.ReactNode
+}
 
 type CollapsibleProps = {
-  children?: React.ReactElement | [] | any,
+  children?: [ReactElement<CollapsibleMainProps>, ReactElement<CollapsibleContentProps>],
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
@@ -29,7 +37,7 @@ type CollapsibleProps = {
 const Collapsible = ({
   aria = {},
   className,
-  children = [],
+  children,
   collapsed = true,
   data = {},
   htmlOptions = {},
@@ -47,17 +55,19 @@ const Collapsible = ({
    setIsCollapsed(collapsed)
   },[collapsed])
 
-  const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
-
-  if (CollapsibleParent.length !== 2) {
+  if (children.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
   }
 
-  const Main = CollapsibleParent[0]
-  const Content = CollapsibleParent[1]
+  const FirstChild = children[0]
+  const SecondChild = children[1]
+
+  const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
+  const Content = SecondChild.type === CollapsibleContent ? SecondChild : null
+
 
-  const { children: mainChildren, ...mainProps } = Main.props
-  const { children: contentChildren, ...contentProps } = Content.props
+  const { children: mainChildren = null, ...mainProps } = Main ? Main.props : {}
+  const { children: contentChildren = null, ...contentProps } = Content ? Content.props : {}
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -75,13 +85,19 @@ const Collapsible = ({
           className={classes}
           id={id}
       >
-        <CollapsibleMain {...mainProps}>
-          {mainChildren}
-        </CollapsibleMain>
+        {Main ? (
+          <CollapsibleMain {...mainProps}>
+            {mainChildren}
+          </CollapsibleMain>
+        ) : (
+          FirstChild
+        )}
 
-        <CollapsibleContent {...contentProps}>
-          {contentChildren}
-        </CollapsibleContent>
+        {Content && (
+          <CollapsibleContent {...contentProps}>
+            {contentChildren}
+          </CollapsibleContent>
+        )}
       </div>
     </CollapsibleContext.Provider>
   )
@@ -89,5 +105,6 @@ const Collapsible = ({
 
 Collapsible.Main = CollapsibleMain
 Collapsible.Content = CollapsibleContent
+Collapsible.Icon = CollapsibleIcon
 
 export default Collapsible

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import Icon, { IconSizes } from "../../pb_icon/_icon";
+
+type IconColors =
+  | "default"
+  | "light"
+  | "lighter"
+  | "link"
+  | "error"
+  | "success";
+
+type IconProps = {
+  collapsed: boolean | (() => void);
+  icon?: string[] | string;
+  iconColor?: IconColors;
+  iconSize?: IconSizes;
+  onIconClick?: () => void;
+};
+
+type colorMap = {
+  default: string;
+  light: string;
+  lighter: string;
+  link: string;
+  error: string;
+  success: string;
+};
+
+const colorMap = {
+  default: "#242B42",
+  light: "#687887",
+  lighter: "#C1CDD6",
+  link: "#0056CF",
+  error: "#FF2229",
+  success: "#00CA74",
+};
+
+const CollapsibleIcon = ({
+  collapsed,
+  icon,
+  iconSize,
+  iconColor,
+  onIconClick,
+}: IconProps) => {
+  const color = colorMap[iconColor];
+
+  const showIcon = (icon: string | string[]) => {
+    if (typeof icon === "string") {
+      return [icon, icon];
+    }
+    return icon;
+  };
+
+  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (onIconClick) {
+      e.stopPropagation();
+      onIconClick();
+    }
+  };
+
+  return (
+    <>
+      {collapsed ? (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[0] : "chevron-down"}
+            onClick={(e) => handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon
+              icon={icon ? showIcon(icon)[0] : "chevron-down"}
+              size={iconSize}
+          />
+        </div>
+      ) : (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[1] : "chevron-up"}
+            onClick={(e) => handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon
+              icon={icon ? showIcon(icon)[1] : "chevron-up"}
+              size={iconSize}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CollapsibleIcon;

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -7,27 +7,9 @@ import { globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Icon, { IconSizes } from "../../pb_icon/_icon"
+import { IconSizes } from "../../pb_icon/_icon"
 import CollapsibleContext from '../context'
-
-
-type colorMap = {
-  default: string,
-  light: string,
-  lighter: string,
-  link: string,
-  error: string,
-  success: string
-}
-
-const colorMap = {
-  default: "#242B42",
-  light: "#687887",
-  lighter: "#C1CDD6",
-  link: "#0056CF",
-  error: "#FF2229",
-  success: "#00CA74",
-}
+import CollapsibleIcon from './CollapsibleIcon'
 
 type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
@@ -38,60 +20,6 @@ type CollapsibleMainProps = {
 }
 type IconColors =  "default" | "light" | "lighter" | "link" | "error" | "success"
 
-type IconProps = {
-  collapsed: boolean | (()=> void)
-  icon?: string[] | string
-  iconColor?: IconColors
-  iconSize?: IconSizes
-  onIconClick?: ()=> void
-}
-
-const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconProps) => {
-  const color = colorMap[iconColor]
-
-  const showIcon = (icon: string |string[]) => {
-    if (typeof icon === "string") {
-      return [icon, icon]
-    }
-    return icon
-  }
-
-  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
-    if (onIconClick) {
-    e.stopPropagation();
-    onIconClick()
-    }
-  }
-
-  return (
-    <>
-      {collapsed ? (
-        <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[0] : "chevron-down"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
-              size={iconSize}
-          />
-        </div>
-      ) : (
-        <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[1] : "chevron-up"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
-              size={iconSize}
-          />
-        </div>
-      )}
-    </>
-  );
-}
-
 const CollapsibleMain = ({
   children,
   className,
@@ -120,7 +48,7 @@ const CollapsibleMain = ({
         >
           <FlexItem>{children}</FlexItem>
           <FlexItem>
-            <ToggleIcon
+            <CollapsibleIcon
                 collapsed={collapsed as () => void}
                 icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}

data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js

@@ -48,3 +48,27 @@ test('returns namespaced additional_class class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} additional_class`)
 })
+
+test('html structure is correct', () => {
+  const { container } = render(
+    <Collapsible
+        className="additional_class"
+        data={{ testid: testId }}
+        iconColor='lighter'
+        iconSize="lg"
+    >
+      <Collapsible.Main>
+        <div>{'Main Section'}</div>
+      </Collapsible.Main>
+      <Collapsible.Content>
+        <div>
+          {
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
+          }
+        </div>
+      </Collapsible.Content>
+    </Collapsible>
+  )
+
+  expect(container).toMatchSnapshot()
+})

data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.html.erb

@@ -0,0 +1,15 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    style: "color: #{object.icon_color};",
+    **combined_html_options) do %>
+        <% if object.icon.present? %>
+          <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
+          <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>
+        <% else %>
+          <%= pb_rails("icon", props: { icon: "chevron-down", id:"collapsible_open_icon", size: object.size }) %>
+          <%= pb_rails("icon", props: { icon: "chevron-up", id:"collapsible_close_icon", size: object.size }) %>
+        <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCollapsible
+    class CollapsibleIcon < Playbook::KitBase
+      prop :collapsed, type: Playbook::Props::Boolean,
+                       default: true
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default light lighter link success error],
+                   default: "default"
+      prop :icon
+      prop :size, type: Playbook::Props::Enum,
+                  values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
+                  default: nil
+
+      def classname
+        generate_classname("pb_collapsible_icon_kit", separator: " ")
+      end
+
+      def show_icon(icon)
+        case icon
+        when ::String
+          [icon, icon]
+        when ::Array
+          icon
+        end
+      end
+
+      def icon_color
+        return "" if color.nil?
+
+        color_object = { light: "#687887", lighter: "#C1CDD6", link: "#0056CF", success: "#00CA74", error: "#FF2229", default: "#242B42" }
+        color_object[color.to_sym]
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <%= pb_rails("flex", props: {vertical: "center", spacing: "between", cursor: "pointer"}) do %>
       <%= pb_rails("flex/flex_item") do %>