playbook_ui 7.3.0.pre.alpha7 → 7.3.0.pre.alpha12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3c09b62c0a91489f73d806b2c42ee1ce510f9fd3cdf9c22d6309f8fae4119a66
-  data.tar.gz: e3261266395ece9efb90e63e202eca63b7e58988f3784140e430049d534a246e
+  metadata.gz: d1ae42d076ae177de10c6ae634260583ce2c56034d5562ef212bf3400cdec1f3
+  data.tar.gz: b86670d2e736072dc5cfa9dfe9134535eb06c257e68c26eba05c42b7fbbb4ad4
 SHA512:
-  metadata.gz: 7f796d76ed877e609689854786b0b1dbe77dc5179a4b624d66f53faed8aa9f5288c41ec84a54700e20c26eb991fcc5869a3c3da5e7fd30b1142a45525514c11c
-  data.tar.gz: 46da75037c9971c264d348420bcf9a16c46e7a4d08c6746874c873709425de9ec7a94838f64addec20a490314bb4448339b9197c9e8dd24051a8cfa658a44fe2
+  metadata.gz: b25282fe2aa8b8c1dd5d3b1dddc01bfb34d7e79bf726a95c4fe2b2ce20c76c3a57d72ba5ef1e4275069f0b6942a77f9a2807cdb4c3f754f1d81c491c00efeba5
+  data.tar.gz: 7caf7691c67d48d5a9b343d0f79cfdcef59095774ec9aa0e7d2e95449f4c231f34a658967c89d52cf2ab61cfeebba3cf48849bdc6a2ed3e71a4ed14c6cb58c3d

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

@@ -1,4 +1,4 @@
-<%= content_tag(:div,
+ n<%= content_tag(:div,
     aria: object.aria,
     class: object.classname,
     data: object.data,

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

@@ -1,12 +1,12 @@
 /* @flow */
 
-import classnames from 'classnames'
-import { get } from 'lodash'
-import { Flex, FlexItem } from '../'
-import React, { useState } from 'react'
-import AnimateHeight from 'react-animate-height'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import classnames from "classnames"
+import { get } from "lodash"
+import { Flex, FlexItem } from "../"
+import React, { useState } from "react"
+import AnimateHeight from "react-animate-height"
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { globalProps } from "../utilities/globalProps.js"
 
 type CollapsibleProps = {
   children: React.ChildrenArray<React.Element<typeof Main | Content>>,
@@ -29,8 +29,8 @@ type CollapsibleContentProps = {
 }
 
 const Main = (props: CollapsibleMainProps) => {
-  const { children, className, padding = 'sm' } = props
-  const mainCSS = buildCss('pb_collapsible_main_kit')
+  const { children, className, padding = "sm" } = props
+  const mainCSS = buildCss("pb_collapsible_main_kit")
   const mainSpacing = globalProps(props, { padding })
 
   return (
@@ -41,8 +41,8 @@ const Main = (props: CollapsibleMainProps) => {
 }
 
 const Content = (props: CollapsibleContentProps) => {
-  const { children, className, padding = 'md' } = props
-  const contentCSS = buildCss('pb_collapsible_content_kit')
+  const { children, className, padding = "md" } = props
+  const contentCSS = buildCss("pb_collapsible_content_kit")
   const contentSpacing = globalProps(props, { padding })
 
   return (
@@ -53,89 +53,81 @@ const Content = (props: CollapsibleContentProps) => {
 }
 
 const Collapsible = (props: CollapsibleProps) => {
-  const {
-    aria = {},
-    className,
-    children = [],
-    data = {},
-    id,
-  } = props
+  const { aria = {}, className, children = [], data = {}, id } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_collapsible'), className, globalProps(props))
+  const classes = classnames(
+    buildCss("pb_collapsible"),
+    className,
+    globalProps(props)
+  )
 
   const [height, setHeight] = useState(0)
   const toggleExpand = () => {
-    setHeight(height === 0 ? 'auto' : 0)
+    setHeight(height === 0 ? "auto" : 0)
   }
 
   const collapsibleChildren =
-    typeof children === 'object' && children.length ? children : [children]
+    typeof children === "object" && children.length ? children : [children]
+
+  console.log("CollapsibleChildren:", collapsibleChildren)
 
   const subComponentTags = (tagName) => {
-    return collapsibleChildren.filter((c) => (
-      get(c, 'type.name') === tagName
-    )).map((child, i) => {
-      return React.cloneElement(child, { key: `${tagName.toLowerCase()}-${i}` })
-    })
+    console.log("TagName:", tagName)
+    return collapsibleChildren
+      .filter((c) => get(c, "type.displayName") === tagName)
+      .map((child, i) => {
+        console.log("the child:", child)
+        return React.cloneElement(child, {
+          key: `${tagName.toLowerCase()}-${i}`,
+        })
+      })
   }
 
   const renderChevron = (height) => {
-    const direction = height === 0 ? 'down' : 'up'
+    const direction = height === 0 ? "down" : "up"
 
     return (
-      <div
-          key={direction}
-          style={{ verticalAlign: 'middle' }}
-      >
-        <i  className={`far fa-2x fa-chevron-${direction} fa-fw`} />
+      <div key={direction} style={{ verticalAlign: "middle" }}>
+        <i className={`far fa-chevron-${direction} fa-fw`} />
       </div>
     )
   }
 
   const renderMain = () => {
-    const mainTags = subComponentTags('Main')
+    const mainTags = subComponentTags("Main")
 
     return (
       <div onClick={toggleExpand}>
-        <Flex
-            spacing="between"
-            vertical="center"
-        >
+        <Flex spacing='between' vertical='center'>
           <FlexItem>{mainTags}</FlexItem>
           <FlexItem>{renderChevron(height)}</FlexItem>
         </Flex>
       </div>
-
     )
   }
 
   const renderContent = () => {
-    const nonMainChildren = collapsibleChildren.filter((child) => (get(child, 'type.name') !== 'Main'))
+    const nonMainChildren = collapsibleChildren.filter(
+      (child) => get(child, "type.displayName") !== "Main"
+    )
+    console.log("NonMainChildren:", nonMainChildren)
     return (
-      <AnimateHeight
-          duration={500}
-          height={height}
-          id="bottom-section"
-      >
+      <AnimateHeight duration={500} height={height} id='bottom-section'>
         {nonMainChildren}
       </AnimateHeight>
     )
   }
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
+    <div {...ariaProps} {...dataProps} className={classes} id={id}>
       {renderMain()}
       {renderContent()}
     </div>
   )
 }
+
 Collapsible.Main = Main
 Collapsible.Content = Content
 

data/app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_main.html.erb

@@ -9,8 +9,8 @@
         <%= capture(&object.children) %>
       <% end %>
       <%= pb_rails("flex/flex_item") do %>
-        <i class="far fa-chevron-down fa-2x"></i>
-        <i class="far fa-chevron-up fa-2x" style="display: none"></i>
+        <i class="far fa-chevron-down"></i>
+        <i class="far fa-chevron-up" style="display: none"></i>
       <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/useToggler.js

@@ -0,0 +1,10 @@
+/* @flow */
+
+import { useState } from "react"
+
+export const useToggler = (startValue: boolean = false) => {
+  const [show, toggle] = useState(startValue)
+  const toggler = () => toggle(!show)
+
+  return [show, toggler]
+}

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.3.0.pre.alpha7"
+  VERSION = "7.3.0.pre.alpha12"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.3.0.pre.alpha7
+  version: 7.3.0.pre.alpha12
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-21 00:00:00.000000000 Z
+date: 2020-10-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -640,6 +640,7 @@ files:
 - app/pb_kits/playbook/pb_collapsible/docs/example.yml
 - app/pb_kits/playbook/pb_collapsible/docs/index.js
 - app/pb_kits/playbook/pb_collapsible/index.js
+- app/pb_kits/playbook/pb_collapsible/useToggler.js
 - app/pb_kits/playbook/pb_contact/_contact.html.erb
 - app/pb_kits/playbook/pb_contact/_contact.jsx
 - app/pb_kits/playbook/pb_contact/_contact.scss