playbook_ui 7.1.1.pre.alpha1 → 7.3.0.pre.alpha2

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("button_toolbar", props: { orientation: "vertical", connected: true }) do %>
+      <%= pb_rails("button", props: { text: "Field" }) %>
+      <%= pb_rails("button", props: { text: "Retail"}) %>
+      <%= pb_rails("button", props: { text: "Event"}) %>
+      <%= pb_rails("button", props: { text: "Training"}) %>
+      <%= pb_rails("button", props: { text: "Not Working"}) %>
+    <% end %>
+  </div>
+</div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarVertical = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="vertical"
+    >
+      <Button
+          text="Field"
+      />
+      <Button
+          text="Retail"
+      />
+      <Button
+          text="Event"
+      />
+      <Button
+          text="Training"
+      />
+      <Button
+          text="Not Working"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarVertical

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("button_toolbar", props: { orientation: "vertical", connected: true }) do %>
+      <%= pb_rails("button", props: { text: "Field", variant: "secondary" }) %>
+      <%= pb_rails("button", props: { text: "Retail", variant: "secondary" }) %>
+      <%= pb_rails("button", props: { text: "Event", variant: "secondary" }) %>
+      <%= pb_rails("button", props: { text: "Training", variant: "secondary" }) %>
+      <%= pb_rails("button", props: { text: "Not Working", variant: "secondary" }) %>
+    <% end %>
+  </div>
+</div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarVerticalSecondary = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="vertical"
+    >
+      <Button
+          text="Field"
+          variant="secondary"
+      />
+      <Button
+          text="Retail"
+          variant="secondary"
+      />
+      <Button
+          text="Event"
+          variant="secondary"
+      />
+      <Button
+          text="Training"
+          variant="secondary"
+      />
+      <Button
+          text="Not Working"
+          variant="secondary"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarVerticalSecondary

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

@@ -1,11 +1,15 @@
 examples:
   
   rails:
-  - button_toolbar_default: Default
-  - button_toolbar_secondary: Secondary
+  - button_toolbar_default: Horizontal Button Toolbar
+  - button_toolbar_vertical: Vertical Button Toolbar
+  - button_toolbar_secondary: Horizontal Secondary Button Toolbar
+  - button_toolbar_vertical_secondary: Vertical Secondary Button Toolbar
   
   
   react:
   - button_toolbar_default: Default
-  - button_toolbar_secondary: Secondary
+  - button_toolbar_vertical: Vertical Button Toolbar
+  - button_toolbar_secondary: Horizontal Secondary Button Toolbar
+  - button_toolbar_vertical_secondary: Vertical Secondary Button Toolbar
   

data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js

@@ -1,2 +1,4 @@
 export { default as ButtonToolbarDefault } from './_button_toolbar_default.jsx'
+export { default as ButtonToolbarVertical } from './_button_toolbar_vertical.jsx'
 export { default as ButtonToolbarSecondary } from './_button_toolbar_secondary.jsx'
+export { default as ButtonToolbarVerticalSecondary } from './_button_toolbar_vertical_secondary.jsx'

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -35,8 +35,8 @@ const Caption = (props: CaptionProps) => {
   const dataProps = buildDataProps(data)
   const css = classnames(
     buildCss('pb_caption_kit', size, variant),
-    globalProps(props),
-    className
+    className,
+    globalProps(props)
   )
 
   return (

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

@@ -40,11 +40,8 @@ const Checkbox = (props: CheckboxProps) => {
 
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(
-    buildCss('pb_checkbox_kit', { checked, error }),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_checkbox_kit',
+    { checked: checked, error: error }), className, globalProps(props))
 
   return (
     <label

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -15,8 +15,6 @@ module Playbook
       prop :value
       prop :name
 
-      prop :input_options, type: Playbook::Props::Hash,
-                           default: {}
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :form_spacing, type: Playbook::Props::Boolean,
@@ -31,7 +29,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked, input_options)
+        check_box_tag(name, value, checked)
       end
 
       def checkbox_label_status

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

@@ -4,7 +4,6 @@ examples:
     - checkbox_checked: Load as checked
     - checkbox_custom: Custom Checkbox
     - checkbox_error: Default w/ Error
-    - checkbox_options: Checkbox w/ Options
 
   react:
   - checkbox_default: Default

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx

@@ -46,11 +46,7 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_circle_icon_button_kit'),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_circle_icon_button_kit'), className, globalProps(props))
 
   return (
     <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,142 @@
+/* @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'
+
+type CollapsibleProps = {
+  children: React.ChildrenArray<React.Element<typeof Main | Content>>,
+  aria?: object,
+  className?: string,
+  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 Content = (props: CollapsibleContentProps) => {
+  const { children, className, padding = 'md' } = props
+  const contentCSS = buildCss('pb_collapsible_content_kit')
+  const contentSpacing = globalProps(props, { padding })
+
+  return (
+    <div className={classnames(contentCSS, className, contentSpacing)}>
+      {children}
+    </div>
+  )
+}
+
+const Collapsible = (props: CollapsibleProps) => {
+  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 [height, setHeight] = useState(0)
+  const toggleExpand = () => {
+    setHeight(height === 0 ? 'auto' : 0)
+  }
+
+  const collapsibleChildren =
+    typeof children === 'object' && children.length ? children : [children]
+
+  const subComponentTags = (tagName) => {
+    return collapsibleChildren.filter((c) => (
+      get(c, 'type.name') === tagName
+    )).map((child, i) => {
+      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) => (get(child, 'type.name') !== 'Main'))
+    return (
+      <AnimateHeight
+          duration={500}
+          height={height}
+          id="bottom-section"
+      >
+        {nonMainChildren}
+      </AnimateHeight>
+    )
+  }
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {renderMain()}
+      {renderContent()}
+    </div>
+  )
+}
+Collapsible.Main = Main
+Collapsible.Content = Content
+
+export default Collapsible

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

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

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

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

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

@@ -0,0 +1,16 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria) do %>
+
+    <%= pb_rails("flex", props: {vertical: "center", spacing: "between"}) do %>
+      <%= pb_rails("flex/flex_item") do %>
+        <%= 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>
+      <% end %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCollapsible
+    class Collapsible
+      include Playbook::Props
+
+      partial "pb_collapsible/collapsible"
+
+      def classname
+        generate_classname("pb_collapsible_kit")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCollapsible
+    class CollapsibleContent
+      include Playbook::Props
+
+      partial "pb_collapsible/child_kits/collapsible_content"
+
+      def data
+        Hash(values[:data]).merge(
+          collapsible_content: true
+        )
+      end
+
+      def classname
+        generate_classname("pb_collapsible_content_kit", "toggle-content", padding, separator: " ")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCollapsible
+    class CollapsibleMain
+      include Playbook::Props
+
+      partial "pb_collapsible/child_kits/collapsible_main"
+
+      def data
+        Hash(values[:data]).merge(
+          collapsible_main: true
+        )
+      end
+
+      def classname
+        generate_classname("pb_collapsible_main_kit", padding, separator: " ")
+      end
+
+
+
+    end
+  end
+end