playbook_ui 8.0.0.pre.alpha4 → 8.2.0.pre.alpha1

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

@@ -0,0 +1,9 @@
+examples:
+
+  rails:
+  - collapsible_default: Light
+
+  react:
+  - collapsible_default: Light
+  
+  

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

@@ -0,0 +1 @@
+export { default as CollapsibleDefault } from './_collapsible_default.jsx'

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

@@ -0,0 +1,79 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+const MAIN_SELECTOR = '[data-collapsible-main]'
+const CONTENT_SELECTOR = '[data-collapsible-content]'
+const DOWN_ARROW_SELECTOR = '.fa-chevron-down'
+const UP_ARROW_SELECTOR = '.fa-chevron-up'
+
+export default class PbCollapsible extends PbEnhancedElement {
+  static get selector() {
+    return MAIN_SELECTOR
+  }
+
+  connect() {
+    this.element.addEventListener('click', () => {
+      this.toggleElement(this.target)
+    })
+    this.displayDownArrow()
+  }
+
+  get target() {
+    return this.element.parentNode.querySelector(CONTENT_SELECTOR)
+  }
+
+  showElement(elem) {
+  // Get the natural height of the element
+    const getHeight = () => {
+      elem.style.display = 'block'
+      const height = elem.scrollHeight + 'px' // Get it's height
+      elem.style.display = '' //  Hide it again
+      return height
+    }
+
+    const height = getHeight()
+    elem.classList.add('is-visible')
+    elem.style.height = height // Update the max-height
+
+    // Once the transition is complete, remove the inline max-height so the content can scale responsively
+    window.setTimeout(() => {
+      elem.style.height = ''
+    }, 300)
+  }
+
+  hideElement(elem) {
+    // Give the element a height to change from
+    elem.style.height = elem.scrollHeight + 'px'
+
+    window.setTimeout(() => {
+      elem.style.height = '0'
+      elem.style.paddingTop = '0'
+      elem.style.paddingBottom = '0'
+    }, 1)
+
+    // When the transition is complete, hide it
+    window.setTimeout(() => {
+      elem.classList.remove('is-visible')
+    }, 300)
+  }
+
+  toggleElement(elem) {
+    if (elem.classList.contains('is-visible')) {
+      this.hideElement(elem)
+      this.displayDownArrow()
+      return
+    }
+    // Otherwise, show it
+    this.showElement(elem)
+    this.displayUpArrow()
+  }
+
+  displayDownArrow() {
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
+  }
+
+  displayUpArrow() {
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
+  }
+}

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -1,5 +1,5 @@
-import colors from '../tokens/_colors.scss'
-import typography from '../tokens/_typography.scss'
+import colors from '../tokens/exports/_colors.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 const dataColors = [
   colors.data_1,

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js

@@ -1,5 +1,5 @@
-import colors from '../tokens/_colors.scss'
-import typography from '../tokens/_typography.scss'
+import colors from '../tokens/exports/_colors.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 import Highcharts from 'highcharts'
 

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
+import { buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type DateTimeStackedProps = {
@@ -12,12 +13,15 @@ type DateTimeStackedProps = {
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps) => {
-  const { date, dark } = props
+  const { date, data = {}, dark } = props,
+    dataProps = buildDataProps(data)
+
   return (
     <Flex
         className={globalProps(props)}
         orientation="row"
         vertical="center"
+        {...dataProps}
     >
       <FlexItem>
         <DateStacked
@@ -32,8 +36,8 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
         <TimeStacked
             className="pb_date_time_stacked_kit"
             dark={dark}
-            date={date}
             tag="caption"
+            time={date}
         />
       </FlexItem>
     </Flex>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -7,7 +7,7 @@
         <%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
       <% end %>
       <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", date: object.date, tag: "caption" }) %>
+        <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", time: object.date, tag: "caption" }) %>
       <% end %>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -21,7 +21,7 @@ module Playbook
       end
 
       def description
-        @description ||= read_kit_file(kit, "_#{example_key}.md")
+        @description ||= read_kit_file("_#{example_key}.md")
       end
 
       def highlighter

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -13,8 +13,8 @@
   ]
 %>
 
-<%= pb_rails("form", props: {
-    form_system_options: { scope: :example, method: :get, url: "" },
+<%= pb_rails("form/form_with", props: {
+    scope: :example, method: :get, url: "",
     validate: true
   }) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_form/form.rb

@@ -19,8 +19,17 @@ module Playbook
         end
       end
 
-      def render_in(view_context, &_block)
-        super(view_context, &nil)
+      def render_in(view_context, &block)
+        form_kit.render_in(view_context, &block)
+      end
+
+    private
+
+      def form_kit
+        @form_system ||= begin
+          ::Playbook::KitResolver.resolve("form/#{form_system}")
+                                 .new(options: form_system_options, validate: validate, children: children)
+        end
       end
     end
   end

data/app/pb_kits/playbook/pb_form/form_builder.rb

@@ -21,7 +21,7 @@ module Playbook
         prepend(DatePickerField)
 
         def actions(&block)
-          @template.render_component ActionArea.new(submit_default_value: submit_default_value), &block
+          @template.render_component ActionArea.new(submit_default_value: submit_default_value, children: block)
         end
       end
     end

data/app/pb_kits/playbook/pb_form/form_builder/action_area.html.erb

@@ -1,3 +1,3 @@
 <ol class="pb-form-actions">
-    <%= content %>
+  <%= instance_exec(self, &children) %>
 </ol>

data/app/pb_kits/playbook/pb_form/form_with.html.erb

@@ -1,18 +1,11 @@
-<%= form_with(id: id,
-              aria: aria,
-              class: classname,
-              data: data,
-              builder: form_builder,
-              **options) do |form| %>
-  <% instance_exec form, &children %>
+<%= form_with(form_options, &method(:render_form)) %>
 
-  <% if validate %>
-    <% content_for :pb_js do %>
-      <%= javascript_tag do %>
-        window.addEventListener('DOMContentLoaded', function() {
-          PbFormValidation.start()
-        })
-      <% end %>
+<% if validate %>
+  <% content_for :pb_js do %>
+    <%= javascript_tag do %>
+      window.addEventListener('DOMContentLoaded', function() {
+        PbFormValidation.start()
+      })
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_form/form_with.rb

@@ -14,16 +14,23 @@ module Playbook
         prop(:data).merge("pb-form-validation" => validate)
       end
 
-      def options
-        { url: "" }.merge(Hash(prop(:options)))
+      def form_options
+        {
+          url: "",
+          id: id,
+          aria: aria,
+          class: classname,
+          data: data,
+          builder: ::Playbook::PbForm::FormWith::FormBuilder,
+        }.merge(options)
       end
 
-      def classname
-        [generate_classname("pb-form"), options[:class]].join(" ")
+      def render_form(builder)
+        view_context.capture(builder, &children)
       end
 
-      def form_builder
-        ::Playbook::PbForm::FormWith::FormBuilder
+      def classname
+        [generate_classname("pb-form"), options[:class]].join(" ")
       end
 
       def render_in(view_context, &_block)

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -75,6 +75,7 @@ const NavItem = (props: NavItemProps) => {
               key={iconLeft}
           >
             <Icon
+                aria={{ label: iconLeft }}
                 className="pb_nav_list_item_icon_left"
                 fixedWidth
                 icon={iconLeft}
@@ -90,6 +91,7 @@ const NavItem = (props: NavItemProps) => {
               key={iconRight}
           >
             <Icon
+                aria={{ label: iconRight }}
                 className="pb_nav_list_item_icon_right"
                 fixedWidth
                 icon={iconRight}

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -48,7 +48,7 @@ const Nav = (props: NavProps) => {
   )
 
   return (
-    <div
+    <nav
         {...ariaProps}
         {...dataProps}
         className={cardCss}
@@ -69,7 +69,7 @@ const Nav = (props: NavProps) => {
         </div>
       </If>
       <ul>{children}</ul>
-    </div>
+    </nav>
   )
 }
 

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -9,13 +9,13 @@
       <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
     <% end %>
     <% if object.icon_left %>
-      <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { aria: { label: object.icon_left }, icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
     <% end %>
     <span class="pb_nav_list_item_text">
       <%= object.text %><%= content.presence %>
     </span>
     <% if object.icon_right %>
-      <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { aria: { label: object.icon_right }, icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/nav.html.erb

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

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx

@@ -14,7 +14,7 @@ type ProgressSimpleProps = {
   muted: boolean,
   percent: string,
   value: number,
-  variant?: "default" | "positive" | "negative",
+  variant?: "default" | "positive" | "negative" | "warning",
   width: string,
 }
 

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -33,6 +33,11 @@ $pb_progress_simple_height: 4px;
         background: $error;
       }
     }
+    &[class*=_warning] {
+      .progress_simple_value {
+        background: $warning;
+      }
+    }
 
   [class^=progress_simple_value] {
     width: 0%;

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb

@@ -7,3 +7,8 @@
 <br>
 
 <%= pb_rails("progress_simple", props: { percent: 10, variant: "negative" }) %>
+
+<br>
+
+<%= pb_rails("progress_simple", props: { percent: 40, variant: "warning" }) %>
+

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx

@@ -19,6 +19,13 @@ const ProgressSimpleVariants = () => {
           percent={10}
           variant="negative"
       />
+
+      <br />
+
+      <ProgressSimple
+          percent={40}
+          variant="warning"
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md

@@ -1 +1 @@
-Progress Simple can pass colors - primary, green and red. Variants names are `default`, `positive`, and `negative` respectively.
+Progress Simple can pass colors - primary, green, red, and yellow. Variants names are `default`, `positive`, `negative`, and `warning`, respectively.

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -18,7 +18,7 @@ module Playbook
       # could this possibly be [sm, md, lg]?
       prop :width, default: "100%"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default positive negative],
+                     values: %w[default positive negative warning],
                      default: "default"
 
       def number_value

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx

@@ -4,50 +4,67 @@ import React from 'react'
 import classnames from 'classnames'
 
 import DateTime from '../pb_kit/dateTime.js'
-import { buildCss } from '../utilities/props'
-import { Body, Caption } from '../'
+import { buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 
+import { Body, Caption } from '../'
+
 type TimeStackedProps = {
   align?: 'left' | 'center' | 'right',
   className?: string | array<string>,
   dark?: boolean,
-  data?: string,
-  date: string,
+  data?: object,
+  date?: string,
   id?: string,
-  tag?: 'body' | 'caption',
+  time: number | Date,
+  timeZone?: string,
 }
 
-const TimeStacked = (props: TimeStackedProps) => {
-  const { align, className, dark, date } = props
-  deprecatedProps('TimeStacked', ['tag'])
+const TimeStackedDefault = (props: TimeStackedProps) => {
+  if (props.date) deprecatedProps('Time Stacked', ['date']) //date prop is deprecated, use time instead
+
+  const {
+    align = 'left',
+    className,
+    dark,
+    data = {},
+    date,
+    time,
+    timeZone,
+  } = props
+
   const classes = classnames(
     buildCss('pb_time_stacked_kit', align),
     globalProps(props),
-    className,
+    className
   )
+  const dataProps = buildDataProps(data)
 
-  const dateTimestamp = new DateTime({ value: date })
+  const dateTimestamp = new DateTime({ value: date ? date : new Date(time), zone: timeZone })
 
   return (
-    <div className={classes}>
-      <div
-          align={align}
-          className="pb_time_stacked_day_month"
+    <div
+        className={classes}
+        {...dataProps}
+    >
+      <Body
+          className={classnames('pb_time_stacked', 'time-spacing')}
+          color="light"
+          dark={dark}
       >
-        <Body
-            color="light"
-            dark={dark}
-            text={dateTimestamp.toTimeWithMeridian()}
-        />
-        <Caption
-            color="light"
-            dark={dark}
-            text={dateTimestamp.toTimezone()}
-        />
-      </div>
+        <time>
+          {dateTimestamp.toTimeWithMeridian()}
+          <Caption
+              className="pb_time_stacked"
+              color="light"
+              dark={dark}
+              tag="span"
+              text={dateTimestamp.toTimezone()}
+          />
+        </time>
+      </Body>
     </div>
   )
 }
 
-export default TimeStacked
+export default TimeStackedDefault