playbook_ui 13.27.0.pre.alpha.testingcollapsible2912 → 13.27.0.pre.alpha.testingcollapsible2917

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 139239375cde8415b10b6381e0d294df8666584609ff6c16002aab7f8cb2d5fa
-  data.tar.gz: 870ef281c575c7e7c752df452e3c368a197f0adfdbd9a7659259a7b713d4772d
+  metadata.gz: b12c7a464c2f34a42001f703bfb42df3f750da9574ab1163e059a4ce6b906f77
+  data.tar.gz: 8deca1276b0a8ae5c8d6a542e2a7e5362c1c3f7e206c4379b21d2cb48da0cb97
 SHA512:
-  metadata.gz: 031cc99959af36b9584cf2a68cd7e0dd69fa59908292e5c7865d9d44329ca6955c1968fa3000b724aef7e6416fcb67f08a3dea5542a88d99234e0d79176b0345
-  data.tar.gz: 6614ed6e1c90b0d1c9e404952b1ef22759bd710389a156e821c796b550fca8bcb680615ddb2ee723ab7dc1f0a6c48af5ebfb5c43f58c7b67ce073a4c48defb5c
+  metadata.gz: 3d5187d01379e3fdc8aea8d2d0c6bdf717ba10ee4c60f29ca5eb4abb83900ddb5b78fd627522ec54aa1e3bb6957f36252dc9001827efd3b70bc597ee69cb6e10
+  data.tar.gz: 0e33d8a8583c2ad4c58002c04f087dae84ffa6586f8579eae2f1bd479cf4ab6143907a3305503e1679e179f98e4ac75a67069ce9b42056c2a84881de2149cab0

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

@@ -9,6 +9,7 @@ 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 CollapsibleProps = {
@@ -98,5 +99,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_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/docs/_collapsible_custom_main.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible, useCollapsible, Background, Flex, Title, IconCircle, List, ListItem } from '../..'
+import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
 
 const CollapsibleCustomMain = () => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)
@@ -25,10 +25,7 @@ const CollapsibleCustomMain = () => {
                     size={4} 
                     text="Custom Main Section" 
                 />
-                <IconCircle 
-                    icon="check" 
-                    size="xs" 
-                />
+                <Collapsible.Icon collapsed={isCollapsed}/>
               </Flex>
           </Background>
       <Collapsible.Content padding="none">

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md

@@ -0,0 +1,5 @@
+A custom Main section can also be used in place of the provided `Collapsible.Main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
+
+If a custom component is used in place of the default, devs must handle collapsible toggling themselves via the useCollapsible hook as seen in this example.
+
+The default Collapsible icon can also be used as part of the custom Main as shown, you will need to pass the Collapsible state to the `collapsed` prop on the optional `Collapsible.Icon`.

data/app/pb_kits/playbook/pb_collapsible/docs/{_collapsible_custom_main.html.erb → _collapsible_custom_main_rails.html.erb}

@@ -2,10 +2,7 @@
     <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
       <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
         <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
-        <%= pb_rails("icon_circle", props: {
-        icon: "check",
-        size: "xs"
-      }) %>
+    <%= pb_rails("collapsible/collapsible_icon") %>
      <% end %>
       <% end %>
      <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md

@@ -0,0 +1,5 @@
+A custom Main section can also be used in place of the provided `collapsible/collapsible_main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
+
+If a custom component is used in place of the default, devs must add `data: {"collapsible-main": "true"}` to the custom Main for toggling of the collapsible to work correctly.
+
+The default Collapsible icon can also be used as part of the custom Main as shown with the optional  `collapsible/collapsible_icon`. This optional subcomponent accepts all icon related props `color`, `icon` and `size`.

data/app/pb_kits/playbook/pb_collapsible/docs/example.yml

@@ -7,7 +7,7 @@ examples:
   - collapsible_icons: Custom Icons
   - collapsible_external_controls: Toggle Collapsible With External Controls
   - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
-  - collapsible_custom_main: Custom Main
+  - collapsible_custom_main_rails: Custom Main Section
 
   react:
   - collapsible_default: Default
@@ -15,7 +15,7 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
-  - collapsible_custom_main: Custom Main
+  - collapsible_custom_main: Custom Main Section
 
 
   swift: