playbook_ui 8.0.0.pre.alpha5 → 8.1.0.pre.alpha1

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md

@@ -0,0 +1,2 @@
+By default, the Dialog.Header will load with `separator={true}` and the Dialog.Footer will load with `separator={false}`.
+To control it yourself, toggle the boolean prop as you wish.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import { Button, Dialog } from '../../'
+
+const DialogShouldCloseOnOverlay = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => setIsOpen(false)
+  const open = () => setIsOpen(true)
+
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog'}</Button>
+      <Dialog
+          cancelButton="Cancel"
+          confirmButton="Okay"
+          onCancel={close}
+          onClose={close}
+          onConfirm={close}
+          opened={isOpen}
+          shouldCloseOnOverlayClick={false}
+          size="sm"
+          text="Click on the overlay all day. I will stay open."
+          title="Neat Header"
+      />
+    </>
+  )
+}
+
+export default DialogShouldCloseOnOverlay

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md

@@ -0,0 +1,2 @@
+When shouldCloseOnOverlayClick is explicitly set to `false`, click events on the overlay will not close the modal.
+By default, shouldCloseOnOverlayClick is set to true.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -0,0 +1,93 @@
+/* @flow */
+
+import React, { useState } from 'react'
+import { Button, Dialog, Flex } from '../../'
+
+const useDialog = (visible = false) => {
+  const [opened, setOpened] = useState(visible)
+  const toggle = () => setOpened(!opened)
+
+  return [opened, toggle]
+}
+
+const DialogSizes = () => {
+  const [smDialogOpened, toggleSmDialog] = useDialog()
+  const [mdDialogOpened, toggleMdDialog] = useDialog()
+  const [lgDialogOpened, toggleLgDialog] = useDialog()
+
+  /* eslint-disable react/jsx-handler-names */
+
+  const dialogs = [
+    {
+      size: 'sm',
+      text: 'Body on small dialog',
+      title: 'Header on small dialog',
+      toggle: toggleSmDialog,
+      visible: smDialogOpened,
+    },
+    {
+      size: 'md',
+      text: 'Body on medium dialog',
+      title: 'Header on medium dialog',
+      toggle: toggleMdDialog,
+      visible: mdDialogOpened,
+    },
+    {
+      size: 'lg',
+      text: 'Body on large dialog',
+      title: 'Header on large dialog',
+      toggle: toggleLgDialog,
+      visible: lgDialogOpened,
+    },
+  ]
+
+  return (
+    <div>
+      <Flex>
+        <Button
+            id="sm"
+            marginRight="xl"
+            onClick={toggleSmDialog}
+        >
+          {'Small Dialog'}
+        </Button>
+        <Button
+            marginRight="xl"
+            onClick={toggleMdDialog}
+        >
+          {'Medium Dialog'}
+        </Button>
+        <Button
+            marginRight="xl"
+            onClick={toggleLgDialog}
+        >
+          {'Large Dialog'}
+        </Button>
+      </Flex>
+      <Flex>
+        {dialogs.map((dialog) => (
+          <Dialog
+              key={dialog.size}
+              onClose={dialog.toggle}
+              opened={dialog.visible}
+              size={dialog.size}
+          >
+            <Dialog.Header>{dialog.title}</Dialog.Header>
+            <Dialog.Body>{dialog.text}</Dialog.Body>
+            <Dialog.Footer>
+              <Button onClick={dialog.toggle}>{'Okay'}</Button>
+              <Button
+                  onClick={dialog.toggle}
+                  variant="link"
+              >
+                {'Cancel'}
+              </Button>
+            </Dialog.Footer>
+          </Dialog>
+        ))}
+      </Flex>
+    </div>
+  )
+}
+
+export default DialogSizes

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

@@ -0,0 +1,10 @@
+examples:
+
+  rails:
+
+  react:
+  - dialog_default: Simple
+  - dialog_compound_components: Complex
+  - dialog_sizes: Sizes
+  - dialog_scrollable: Scrollable
+  - dialog_should_close_on_overlay: Overlay Click

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

@@ -0,0 +1,6 @@
+export { default as DialogDefault } from './_dialog_default.jsx'
+export { default as DialogCompoundComponents } from './_dialog_compound_components.jsx'
+export { default as DialogSizes } from './_dialog_sizes.jsx'
+export { default as DialogScrollable } from './_dialog_scrollable.jsx'
+export { default as DialogSeparators } from './_dialog_separators.jsx'
+export { default as DialogShouldCloseOnOverlay } from './_dialog_should_close_on_overlay.jsx'

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/_form.scss

@@ -1,8 +1,12 @@
 .pb-form {
   .pb-form-actions {
     list-style: none;
-    margin: 8px;
+    margin: 0;
     padding: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-direction: row;
 
     > li {
       display: inline-flex;

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

@@ -19,9 +19,11 @@ module Playbook
         prepend(CollectionSelectField)
         prepend(CheckboxField)
         prepend(DatePickerField)
+      end
 
-        def actions(&block)
-          @template.render_component ActionArea.new(submit_default_value: submit_default_value), &block
+      def actions
+        @template.send(:view_context).content_tag :ol, class: "pb-form-actions" do
+          yield ActionArea.new(@template, submit_default_value)
         end
       end
     end

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

@@ -3,22 +3,29 @@
 module Playbook
   module PbForm
     module FormBuilder
-      class ActionArea < Playbook::KitBase
-        prop :submit_default_value, type: Playbook::Props::String
+      class ActionArea
+        def initialize(view_context, submit_default_value)
+          self.view_context = view_context
+          self.submit_default_value = submit_default_value
+        end
 
         def submit(value = nil, props: {})
           props[:type] ||= "submit"
+          props[:text] ||= value || submit_default_value
+
           button(value, props: props)
         end
 
         def button(value = nil, props:)
-          props[:text] ||= value || submit_default_value
-
-          content_tag(:li) do
-            pb_rails("button", props: props)
+          view_context.content_tag(:li) do
+            view_context.pb_rails("button", props: props)
           end
         end
+
+      private
+
+        attr_accessor :view_context, :submit_default_value
       end
     end
   end
-end
+end

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_form/simple_form.html.erb

@@ -1,6 +1,4 @@
-<%= simple_form_for model, options do |form| %>
-  <% instance_exec form, &children %>
-<% end %>
+<%= simple_form_for model, options, &method(:render_form) %>
 
 <% if validate %>
   <% content_for :pb_js do %>
@@ -10,4 +8,4 @@
       })
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -48,6 +48,10 @@ module Playbook
         prop(:options).fetch(:html, {})
       end
 
+      def render_form(builder)
+        view_context.capture(builder, &children)
+      end
+
       def render_in(view_context, &_block)
         super(view_context, &nil)
       end

data/app/pb_kits/playbook/pb_inline/_inline.jsx

@@ -0,0 +1,83 @@
+/* @flow */
+
+import React, { useEffect, useRef, useState } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import './_inline.scss'
+
+type InlineProps = {
+  aria?: object,
+  className?: string,
+  data?: object,
+  displayKit?: React.Node,
+  formInput?: React.Node,
+  id?: string,
+}
+
+const Inline = (props: InlineProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    displayKit,
+    id,
+    formInput,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_inline'), globalProps(props), className)
+
+  const [editing, setEditing] = useState(false)
+
+  const ToggleClickHandler = () => {
+    setEditing(!editing)
+  }
+
+  useEffect(() => {
+    if (editing) {
+      modifiedInput.ref.current.focus()
+
+      modifiedInput.ref.current.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' || e.key === 'Enter') {
+          setEditing(!editing)
+        }
+      })
+    }
+  }, [editing])
+
+  const { kitType, size } = displayKit.props
+  const textInputClassName = kitType ? (kitType.toLowerCase() + (size ? `_${size}` : '')) : ''
+
+  const modifiedInput = React.cloneElement(formInput, {
+    className: textInputClassName,
+    onBlur: () => setEditing(!editing),
+    ref: useRef(null),
+  })
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <If condition={editing}>
+        {modifiedInput}
+      </If>
+      <If condition={!editing}>
+        <div
+            onClick={() => ToggleClickHandler()}
+            onFocus={() => ToggleClickHandler()}
+            tabIndex="0"
+        >
+          {displayKit}
+        </div>
+      </If>
+
+    </div>
+  )
+}
+
+export default Inline

data/app/pb_kits/playbook/pb_inline/_inline.scss

@@ -0,0 +1,58 @@
+@import "../pb_title/title_mixin";
+@import "../pb_body/body_mixins";
+@import "../pb_caption/caption_mixin";
+
+.pb_inline {
+  .pb_text_input_kit {
+    &.title_1 {
+      .text_input_wrapper input {
+        @include pb_title_1;
+      }
+      &.dark .text_input_wrapper input {
+        @include pb_title_1;
+        @include pb_title_dark;
+      }
+    }
+    &.title_2 {
+      .text_input_wrapper input {
+        @include pb_title_2;
+      }
+      &.dark .text_input_wrapper input {
+        @include pb_title_2;
+        @include pb_title_dark;
+      }
+    }
+    &.title_3 {
+      .text_input_wrapper input {
+        @include pb_title_3;
+      }
+      &.dark .text_input_wrapper input {
+        @include pb_title_3;
+        @include pb_title_dark;
+      }
+    }
+    &.body {
+      .text_input_wrapper input {
+        @include pb_body;
+      }
+      &.dark .text_input_wrapper input {
+        @include pb_body_dark;
+      }
+    }
+    &.caption {
+      .text_input_wrapper input {
+        @include caption;
+      }
+      &.dark .text_input_wrapper input {
+        @include caption;
+        @include caption_dark;
+      }
+    }
+    .text_input_wrapper input {
+      padding: 8px 5px;
+    }
+    .text_input_wrapper, .pb_textarea_kit {
+      margin-bottom: 0;
+    }
+  }
+}