playbook_ui 7.11.0.pre.alpha1 → 7.13.0.pre.alpha1

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx

@@ -5,11 +5,11 @@ const CheckboxError = (props) => {
   return (
     <div>
       <Checkbox
-          {...props}
           error
           name="default name"
           text="Checkbox label"
           value="default value"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx

@@ -16,7 +16,7 @@ const dataWithABlock = [
   },
 ]
 
-const CircleChartBlock = () => (
+const CircleChartBlock = (props) => (
 
   <div>
     <CircleChart
@@ -25,10 +25,12 @@ const CircleChartBlock = () => (
         innerSize="lg"
         marginTop="xl"
         rounded
+        {...props}
     >
       <Title
           size={1}
           tag="div"
+          {...props}
       >
         {'83'}
       </Title>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx

@@ -16,12 +16,13 @@ const dataWithColors = [
   },
 ]
 
-const CircleChartColors = () => (
+const CircleChartColors = (props) => (
   <div>
     <CircleChart
         chartData={dataWithColors}
         colors={['data-6', 'data-4', 'data-2']}
         id="colors-example"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx

@@ -16,11 +16,12 @@ const data = [
   },
 ]
 
-const CircleChartDefault = () => (
+const CircleChartDefault = (props) => (
   <div>
     <CircleChart
         chartData={data}
         id="circle-chart-default"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx

@@ -88,28 +88,32 @@ const dataFourth = [
   },
 ]
 
-const CircleChartInnerSizes = () => (
+const CircleChartInnerSizes = (props) => (
   <div>
     <CircleChart
         chartData={dataFirst}
         id="with-innersize-sm"
         innerSize="sm"
+        {...props}
     />
     <CircleChart
         chartData={dataSecond}
         id="with-innersize-md"
         innerSize="md"
+        {...props}
     />
     <CircleChart
         chartData={dataThird}
         id="with-innersize-lg"
         innerSize="lg"
+        {...props}
     />
     <CircleChart
         chartData={dataFourth}
         className="poop"
         id="with-innersize-none "
         innerSize="none"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Button, CircleChart } from '../../'
 
-const CircleChartLiveData = () => {
+const CircleChartLiveData = (props) => {
   const [data, setData] = useState([
     {
       name: 'Waiting for Calls',
@@ -41,10 +41,12 @@ const CircleChartLiveData = () => {
       <Button
           onClick={updateValue}
           text="Update Value"
+          {...props}
       />
       <CircleChart
           chartData={data}
           id="circle-chart-live-data"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx

@@ -16,13 +16,14 @@ const dataRounded = [
   },
 ]
 
-const CircleChartRounded = () => (
+const CircleChartRounded = (props) => (
   <div>
     <CircleChart
         chartData={dataRounded}
         id="default-test-rounded"
         innerSize="lg"
         rounded
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx

@@ -32,12 +32,13 @@ const dataWithLabels = [
   },
 ]
 
-const CircleChartWithLabels = () => (
+const CircleChartWithLabels = (props) => (
   <div>
     <CircleChart
         chartData={dataWithLabels}
         dataLabels
         id="with-labels-example"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx

@@ -17,12 +17,13 @@ const dataWithLegend = [{
 },
 ]
 
-const CircleChartWithLegendKit = () => (
+const CircleChartWithLegendKit = (props) => (
   <div>
     <CircleChart
         chartData={dataWithLegend}
         id="with-legend-example"
         legend
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx

@@ -32,12 +32,13 @@ const dataWithTitle = [
   },
 ]
 
-const CircleChartWithLegendKit = () => (
+const CircleChartWithLegendKit = (props) => (
   <div>
     <CircleChart
         chartData={dataWithTitle}
         id="with-title-example"
         title="Active Users on Social Media"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx

@@ -4,10 +4,10 @@ import { CircleIconButton } from '../..'
 const CircleIconButtonClick = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="plus"
         onClick={() => alert('Click!')}
         variant="primary"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx

@@ -4,33 +4,33 @@ import { CircleIconButton } from '../../'
 const CircleIconButtonDefault = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="plus"
         variant="primary"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="pen"
         variant="secondary"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         disabled
         icon="times"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="user"
         variant="link"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx

@@ -4,21 +4,20 @@ import { CircleIconButton } from '../../'
 const CircleIconButtonLink = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="search"
         link="https://google.com"
         variant="primary"
-
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="window"
         link="https://google.com"
         newWindow
         variant="secondary"
+        {...props}
     />
 
   </div>

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

@@ -0,0 +1,9 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+    <% if object.children %>
+      <%= capture(&object.children) %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,77 @@
+/* @flow */
+
+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,
+  padding?: string,
+}
+
+const useCollapsible = (initial = false) => {
+  const [collapsed, setCollapsed] = useState(initial)
+
+  return [
+    collapsed,
+    () => setCollapsed((t) => !t),
+  ]
+}
+
+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'),
+    className,
+    globalProps(props, { padding })
+  )
+
+  return (
+    <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 = CollapsibleMain
+Collapsible.Content = CollapsibleContent
+
+export default Collapsible

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

@@ -0,0 +1,15 @@
+[class^=pb_collapsible_kit] {
+  .toggle-content {
+    display: none;
+    height: 0;
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
+    overflow: hidden;
+    transition: height 300ms, padding 300ms ease-in-out;
+  }
+
+  .toggle-content.is-visible {
+    display: block;
+    height: auto;
+  }
+}

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,59 @@
+/* @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