playbook_ui 7.3.0.pre.alpha10 → 7.4.0.pre.alpha2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ffacb9bd2fec12c5de6322d01b9acd45f3b18818f68d0155eb224f964cec579a
-  data.tar.gz: 629da81bbd27bddd718eb38bc0824e4e2754edb85972942e982e8c79b815a984
+  metadata.gz: fc2cc41654667d4db62667450bd430b73beb0746bff14266498b5f99ec5909a3
+  data.tar.gz: 89ec1b4304d12c8101ee5b61637e5ef22a8d3295e041633873a7a42892ddef56
 SHA512:
-  metadata.gz: b4d4257240173e0c2e3ff7c4f810ef6f9cf90c45b1ed8ebe1d10af991c06e6e1f1cbcb8184933d5d6dbd74459e1ca0391e996d01d67e2e083aad61813e9f42dd
-  data.tar.gz: 2e78709ffe438edfdd8282f4111d918fa9a25835cee7af2d41fa87fd15ecf778e675f24b691d6585ccb1866c9df105031a44ca6886563a1edbacb470eaf749cd
+  metadata.gz: a5cba0cc9c3b7e04462251f81c75326a04a89960efe3dcbf8d811f1f28c2858bab565bdf53c11cb78ab3c86a95e6f78de41577ac3309d607f5021afd8ddcb90b
+  data.tar.gz: 77bc046395a15e34958c54a2951862870e69a36413535d4ae53c0437857b91145eb7a2770c45026c0d0ef6b7c7fe0b427924edc931fff8f9770a05319984b726

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

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

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

@@ -1,137 +1,77 @@
 /* @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 React, { useState } from 'react'
+import { globalProps } from '../utilities/globalProps.js'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import CollapsibleContent from './child_kits/CollapsibleContent'
+import CollapsibleMain from './child_kits/CollapsibleMain'
+
+export const CollapsibleContext = React.createContext({})
 
 type CollapsibleProps = {
   children: React.ChildrenArray<React.Element<typeof Main | Content>>,
   aria?: object,
   className?: string,
+  collapsed?: boolean,
   data?: object,
   id?: string,
-}
-
-type CollapsibleMainProps = {
-  children: array<React.ReactNode> | React.ReactNode,
-  className?: string,
-  padding?: string,
-}
-
-type CollapsibleContentProps = {
-  children: array<React.ReactNode> | React.ReactNode | string,
-  className?: string,
   padding?: string,
 }
 
-const Main = (props: CollapsibleMainProps) => {
-  const { children, className, padding = "sm" } = props
-  const mainCSS = buildCss("pb_collapsible_main_kit")
-  const mainSpacing = globalProps(props, { padding })
-
-  return (
-    <div className={classnames(mainCSS, className, mainSpacing)}>
-      {children}
-    </div>
-  )
-}
-
-const MainType = (<Main />).type
-
-
-const Content = (props: CollapsibleContentProps) => {
-  const { children, className, padding = "md" } = props
-  const contentCSS = buildCss("pb_collapsible_content_kit")
-  const contentSpacing = globalProps(props, { padding })
+const useCollapsible = (initial = false) => {
+  const [collapsed, setCollapsed] = useState(initial)
 
-  return (
-    <div className={classnames(contentCSS, className, contentSpacing)}>
-      {children}
-    </div>
-  )
+  return [
+    collapsed,
+    () => setCollapsed((t) => !t),
+  ]
 }
 
-const Collapsible = (props: CollapsibleProps) => {
-  const { aria = {}, className, children = [], data = {}, id } = props
-
+const Collapsible = ({
+  aria = {},
+  className,
+  children = [],
+  collapsed = true,
+  data = {},
+  id,
+  padding = 'md',
+  ...props
+}: CollapsibleProps) => {
+  const [isCollapsed, collapse] = useCollapsible(collapsed)
+  const Main = React.Children.toArray(children).find((child) => child.type === CollapsibleMain)
+  const Content = React.Children.toArray(children).find((child) => child.type === CollapsibleContent)
+  const { children: mainChildren, ...mainProps } = Main.props
+  const { children: contentChildren, ...contentProps } = Content.props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss("pb_collapsible"),
+    buildCss('pb_collapsible'),
     className,
-    globalProps(props)
+    globalProps(props, { padding })
   )
 
-  const [height, setHeight] = useState(0)
-  const toggleExpand = () => {
-    setHeight(height === 0 ? "auto" : 0)
-  }
-
-  const collapsibleChildren =
-    typeof children === "object" && children.length ? children : [children]
-
-  console.log("CollapsibleChildren:", collapsibleChildren)
-
-  const subComponentTags = (tagName) => {
-    console.log("TagName:", tagName)
-    return collapsibleChildren
-      .filter((c) => get(c, "type.name") === 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"
-
-    return (
-      <div key={direction} style={{ verticalAlign: "middle" }}>
-        <i className={`far fa-2x fa-chevron-${direction} fa-fw`} />
-      </div>
-    )
-  }
-
-  const renderMain = () => {
-    const mainTags = subComponentTags("Main")
-
-    return (
-      <div onClick={toggleExpand}>
-        <Flex spacing='between' vertical='center'>
-          <FlexItem>{mainTags}</FlexItem>
-          <FlexItem>{renderChevron(height)}</FlexItem>
-        </Flex>
-      </div>
-    )
-  }
-
-  const renderContent = () => {
-    const nonMainChildren = collapsibleChildren.filter(
-      (child) => child.type !== MainType
-    )
-    console.log("NonMainChildren:", nonMainChildren)
-    return (
-      <AnimateHeight duration={500} height={height} id='bottom-section'>
-        {nonMainChildren}
-      </AnimateHeight>
-    )
-  }
-
   return (
-    <div {...ariaProps} {...dataProps} className={classes} id={id}>
-      {renderMain()}
-      {renderContent()}
-    </div>
+    <CollapsibleContext.Provider value={{ collapsed: isCollapsed, collapse }}>
+      <div
+          {...ariaProps}
+          {...dataProps}
+          className={classes}
+          id={id}
+      >
+        <CollapsibleMain {...mainProps}>
+          {mainChildren}
+        </CollapsibleMain>
+
+        <CollapsibleContent {...contentProps}>
+          {contentChildren}
+        </CollapsibleContent>
+      </div>
+    </CollapsibleContext.Provider>
   )
 }
 
-Collapsible.Main = Main
-Collapsible.Content = Content
+Collapsible.Main = CollapsibleMain
+Collapsible.Content = CollapsibleContent
 
 export default Collapsible

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

@@ -7,7 +7,7 @@
     padding-bottom: 0 !important;
     padding-top: 0 !important;
     overflow: hidden;
-    transition: height 500ms, padding 500ms ease-in-out;
+    transition: height 300ms, padding 300ms ease-in-out;
   }
 
   .toggle-content.is-visible {

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx

@@ -0,0 +1,40 @@
+/* @flow */
+
+import classnames from 'classnames'
+import React, { useContext } from 'react'
+import AnimateHeight from 'react-animate-height'
+import { buildCss } from '../../utilities/props'
+import { globalProps } from '../../utilities/globalProps.js'
+
+import { CollapsibleContext } from '../_collapsible.jsx'
+
+type CollapsibleContentProps = {
+  children: array<React.ReactNode> | React.ReactNode | string,
+  className?: string,
+  padding?: string,
+}
+
+const CollapsibleContent = ({
+  children,
+  className,
+  padding = 'md',
+  ...props
+}: CollapsibleContentProps) => {
+  const context = useContext(CollapsibleContext)
+  const contentCSS = buildCss('pb_collapsible_content_kit')
+  const contentSpacing = globalProps(props, { padding })
+
+  return (
+    <div className={classnames(contentCSS, className, contentSpacing)}>
+      <AnimateHeight
+          duration={300}
+          height={context.collapsed ? 0 : 'auto'}
+          id="bottom-section"
+      >
+        {children}
+      </AnimateHeight>
+    </div>
+  )
+}
+
+export default CollapsibleContent

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

@@ -0,0 +1,58 @@
+/* @flow */
+
+import classnames from 'classnames'
+import { Flex, FlexItem } from '../../'
+import React, { useContext } from 'react'
+import { buildCss } from '../../utilities/props'
+import { globalProps } from '../../utilities/globalProps.js'
+import { CollapsibleContext } from '../_collapsible.jsx'
+
+type CollapsibleMainProps = {
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  padding?: string,
+}
+
+type IconProps = {
+  collapsed: boolean
+}
+
+const Icon = ({ collapsed }: IconProps) => {
+  const direction = collapsed ? 'down' : 'up'
+
+  return (
+    <div
+        key={direction}
+        style={{ verticalAlign: 'middle' }}
+    >
+      <i className={`far fa-chevron-${direction} fa-fw`} />
+    </div>
+  )
+}
+
+const CollapsibleMain = ({
+  children,
+  className,
+  padding = 'md',
+  ...props
+}: CollapsibleMainProps) => {
+  const context = useContext(CollapsibleContext)
+  const mainCSS = buildCss('pb_collapsible_main_kit')
+  const mainSpacing = globalProps(props, { padding })
+
+  return (
+    <div className={classnames(mainCSS, className, mainSpacing)}>
+      <div onClick={() => context.collapse()}>
+        <Flex
+            spacing="between"
+            vertical="center"
+        >
+          <FlexItem>{children}</FlexItem>
+          <FlexItem><Icon collapsed={context.collapsed} /></FlexItem>
+        </Flex>
+      </div>
+    </div>
+  )
+}
+
+export default CollapsibleMain

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("collapsible", props: { dark: true }) do %>
-  <%= pb_rails("collapsible/collapsible_main", props: { padding: "sm", name: "dark-example" }) do %>
+  <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "dark-example" }) do %>
       <%= pb_rails("body", props: { text: "Main Section", dark: true}) %>
   <% end %>
   <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
-  <%= pb_rails("collapsible/collapsible_main", props: { padding: "sm", name: "default-main" }) do %>
+  <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main" }) do %>
     <%= pb_rails("body", props: { text: "Main Section"}) %>
   <% end %>
   <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx

@@ -2,16 +2,18 @@ import React from 'react'
 import { Collapsible } from '../..'
 
 const CollapsibleDefault = () => (
-  <div>
-    <Collapsible>
-      <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>
-  </div>
+  <Collapsible>
+    <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>
 )
 
 export default CollapsibleDefault

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

@@ -38,7 +38,7 @@ export default class PbCollapsible extends PbEnhancedElement {
     // Once the transition is complete, remove the inline max-height so the content can scale responsively
     window.setTimeout(() => {
       elem.style.height = ''
-    }, 500)
+    }, 300)
   }
   // Hide an element
   hide(elem) {
@@ -54,7 +54,7 @@ export default class PbCollapsible extends PbEnhancedElement {
     // When the transition is complete, hide it
     window.setTimeout(() => {
       elem.classList.remove('is-visible')
-    }, 500)
+    }, 300)
   }
 
   // Toggle element visibility

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.3.0.pre.alpha10"
+  VERSION = "7.4.0.pre.alpha2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.3.0.pre.alpha10
+  version: 7.4.0.pre.alpha2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-22 00:00:00.000000000 Z
+date: 2020-10-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -628,6 +628,8 @@ files:
 - app/pb_kits/playbook/pb_collapsible/_collapsible.html.erb
 - app/pb_kits/playbook/pb_collapsible/_collapsible.jsx
 - app/pb_kits/playbook/pb_collapsible/_collapsible.scss
+- app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx
+- app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.jsx
 - app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_content.html.erb
 - app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_main.html.erb
 - app/pb_kits/playbook/pb_collapsible/collapsible.rb
@@ -640,7 +642,6 @@ 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

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

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