playbook_ui 3.1.0 → 3.2.0

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -4,21 +4,36 @@
 
 $pb_pill_height: 25px;
 
+
+$confirmation_toast_colors: (
+  neutral:        $neutral,
+  success:        $success,
+  error:          $error,
+  tip:          transparent,
+);
+
 [class^=pb_fixed_confirmation_toast_kit] {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   padding: $space_xs $space-md;
-  border-radius: $pb_pill_height;
+  border-radius: $border_rad_mega;
+  box-shadow: $shadow_deeper;
 
-  @each $color_name, $color_value in $status_colors {
+  @each $color_name, $color_value in $confirmation_toast_colors {
     &[class*=_#{$color_name}]  {
       background: $color_value;
+      @if $color_name == "tip" {
+        @include gradient;
+      }
 
       .pb_fixed_confirmation_toast_text {
         color: $white;
         margin: 0 $space_md 0 $space_md;
+        text-align: center;
+        white-space: pre;
       }
+
       .pb_icon {
         color: $white;
       }

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx

@@ -1,26 +1,37 @@
-import React from "react"
-import {FixedConfirmationToast} from "../../"
+import React from 'react'
+import { FixedConfirmationToast } from '../../'
 
-function FixedConfirmationToastDefault() {
+const FixedConfirmationToastDefault = () => {
   return (
     <div>
       <div>
-        <FixedConfirmationToast text="Error Message" status="error" />
+        <FixedConfirmationToast
+            status="error"
+            text="Error Message"
+        />
       </div>
 
-      <br/><br/>
+      <br />
+      <br />
 
       <div>
-        <FixedConfirmationToast text="Items Successfully Moved" status="success" />
+        <FixedConfirmationToast
+            status="success"
+            text="Items Successfully Moved"
+        />
       </div>
 
-      <br/><br/>
+      <br />
+      <br />
 
       <div>
-        <FixedConfirmationToast text="Scan to Assign Selected Items" status="neutral" />
+        <FixedConfirmationToast
+            status="neutral"
+            text="Scan to Assign Selected Items"
+        />
       </div>
     </div>
   )
 }
 
-export default FixedConfirmationToastDefault;
+export default FixedConfirmationToastDefault

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Scan to Assign Selected Items.\nClick X to close at any time",
+  status: "tip",
+}) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { FixedConfirmationToast } from '../../'
+
+const FixedConfirmationToastMultiLine = () => {
+  return (
+    <div>
+      <FixedConfirmationToast
+          status="tip"
+          text={'Scan to Assign Selected Items.\n Click X to close at any time'}
+      />
+    </div>
+  )
+}
+
+export default FixedConfirmationToastMultiLine

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

@@ -2,8 +2,10 @@ examples:
   
   rails:
   - fixed_confirmation_toast_default: Default
+  - fixed_confirmation_toast_multi_line: Multi Line
   
   
   react:
   - fixed_confirmation_toast_default: Default
+  - fixed_confirmation_toast_multi_line: Multi Line
   

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

@@ -1 +1,2 @@
-export {default as FixedConfirmationToastDefault} from './_fixed_confirmation_toast_default.jsx';
+export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
+export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -8,7 +8,7 @@ module Playbook
       partial "pb_fixed_confirmation_toast/fixed_confirmation_toast"
 
       prop :status, type: Playbook::Props::Enum,
-                    values: %w[success error neutral],
+                    values: %w[success error neutral tip],
                     default: "neutral"
       prop :text, type: Playbook::Props::String
 
@@ -24,6 +24,8 @@ module Playbook
           "exclamation-triangle"
         when "neutral"
           "info-circle"
+        when "tip"
+          "info-circle"
         end
       end
 

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

@@ -1,3 +1,18 @@
+<%
+  example_collection = [
+    OpenStruct.new(name: "Alabama", value: 1),
+    OpenStruct.new(name: "Alaska", value: 2),
+    OpenStruct.new(name: "Arizona", value: 3),
+    OpenStruct.new(name: "Arkansas", value: 4),
+    OpenStruct.new(name: "California", value: 5),
+    OpenStruct.new(name: "Colorado", value: 6),
+    OpenStruct.new(name: "Connecticut", value: 7),
+    OpenStruct.new(name: "Delaware", value: 8),
+    OpenStruct.new(name: "Florida", value: 9),
+    OpenStruct.new(name: "Georgia", value: 10),
+  ]
+%>
+
 <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.telephone_field :example_phone_field, props: { label: true } %>
@@ -7,6 +22,8 @@
   <%= form.password_field :example_password_field, props: { label: true } %>
   <%= form.url_field :example_url_field, props: { label: true } %>
   <%= form.text_area :example_text_area, props: { label: true } %>
+  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
+  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -5,21 +5,38 @@
   example_form_model = Class.new do
     include ::ActiveModel::Model
     attr_accessor :example_text_field,
-                  :example_phone_field,
-                  :example_email_field,
-                  :example_number_field,
-                  :example_search_field,
-                  :example_password_field,
-                  :example_url_field,
-                  :example_text_area
+    :example_phone_field,
+    :example_email_field,
+    :example_number_field,
+    :example_search_field,
+    :example_password_field,
+    :example_url_field,
+    :example_text_area,
+    :example_select_field,
+    :example_collection_select_field
 
 
-   def self.model_name
-     ActiveModel::Name.new(self, nil, "ExampleFormModel")
-   end
+    def self.model_name
+      ActiveModel::Name.new(self, nil, "ExampleFormModel")
+    end
   end
 %>
 
+<%
+  example_collection = [
+    OpenStruct.new(name: "Alabama", value: 1),
+    OpenStruct.new(name: "Alaska", value: 2),
+    OpenStruct.new(name: "Arizona", value: 3),
+    OpenStruct.new(name: "Arkansas", value: 4),
+    OpenStruct.new(name: "California", value: 5),
+    OpenStruct.new(name: "Colorado", value: 6),
+    OpenStruct.new(name: "Connecticut", value: 7),
+    OpenStruct.new(name: "Delaware", value: 8),
+    OpenStruct.new(name: "Florida", value: 9),
+    OpenStruct.new(name: "Georgia", value: 10),
+  ]
+%>
+
 
 <%= pb_rails("form", props: { form_system: "simple_form", form_system_options: [example_form_model.new, url: "", method: :get] }) do |form| %>
   <%= form.input :example_text_field, as: :string %>
@@ -30,6 +47,8 @@
   <%= form.input :example_password_field, as: :password %>
   <%= form.input :example_url_field, as: :url %>
   <%= form.input :example_text_area, as: :text %>
+  <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
+  <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,6 +14,8 @@ module Playbook
         prepend(FormFieldBuilder.new(:password_field, kit_name: "text_input"))
         prepend(FormFieldBuilder.new(:url_field, kit_name: "text_input"))
         prepend(FormFieldBuilder.new(:text_area, kit_name: "textarea"))
+        prepend(SelectField)
+        prepend(CollectionSelectField)
 
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    module FormBuilder
+      module CollectionSelectField
+        def collection_select(name, collection, value_method, text_method, options = {}, html_options = {}, props: {} )
+          props[:label] = @template.label(@object_name, name) if props[:label] == true
+          options[:skip_default_ids] = false unless options.has_key?(:skip_default_ids)
+          input = super(name, collection, value_method, text_method, options, html_options)
+
+          @template.pb_rails("select", props: props) do
+            input
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    module FormBuilder
+      module SelectField
+        def select(name, choices = nil, options = {}, html_options = {}, props: {}, &block)
+          props[:label] = @template.label(@object_name, name) if props[:label] == true
+          options[:skip_default_ids] = false unless options.has_key?(:skip_default_ids)
+          input = super(name, choices, options, html_options, &block)
+
+          @template.pb_rails("select", props: props) do
+            input
+          end
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx

@@ -2,7 +2,10 @@
 /* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
-import {Badge} from '../'
+import classnames from 'classnames'
+
+import { Badge } from '../'
+import { buildCss } from '../utilities/props'
 
 type HashtagProps = {
   className?: String,
@@ -14,30 +17,28 @@ type HashtagProps = {
   url?: String,
 }
 
-const HashType = {
-  "home": "H#",
-  "project": "P#",
-  "default": "#"
+const typeMap = {
+  'home': 'H#',
+  'project': 'P#',
+  'default': '#',
 }
 
 const Hashtag = ({
   className,
-  data,
   dark = false,
-  id,
   text,
   type,
-  url
-} : HashtagProps) => {
-  const darkClass = dark === true ? "dark" : ""
-
-  return (
-    <div className={`pb_hashtag_kit_${darkClass}`}>
-      <a href={url}>
-        <Badge variant="primary" text={HashType[type] + text} dark={dark}></Badge>
-      </a>
-    </div>
-  )
-}
+  url,
+}: HashtagProps) => (
+  <span className={classnames(className, buildCss('pb_hashtag_kit', { 'dark': dark }))}>
+    <a href={url}>
+      <Badge
+          dark={dark}
+          text={typeMap[type] + text}
+          variant="primary"
+      />
+    </a>
+  </span>
+)
 
 export default Hashtag

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.jsx

@@ -1,7 +1,7 @@
-import React from "react"
-import {Hashtag} from "../../"
+import React from 'react'
+import { Hashtag } from '../../'
 
-function HashtagDark() {
+const HashtagDark = () => {
   return (
     <div>
       <Hashtag
@@ -10,14 +10,14 @@ function HashtagDark() {
           type="project"
           url="https://google.com"
       />
-      <br/>
+      <br />
       <Hashtag
           dark
           text="123456"
           type="home"
           url="https://google.com"
       />
-      <br/>
+      <br />
       <Hashtag
           dark
           text="654321"
@@ -28,4 +28,4 @@ function HashtagDark() {
   )
 }
 
-export default HashtagDark;
+export default HashtagDark

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

@@ -1,7 +1,7 @@
-import React from "react"
-import {Hashtag} from "../../"
+import React from 'react'
+import { Hashtag } from '../../'
 
-function HashtagDefault() {
+const HashtagDefault = () => {
   return (
     <div>
       <Hashtag
@@ -9,13 +9,13 @@ function HashtagDefault() {
           type="project"
           url="https://google.com"
       />
-      <br/>
+      <br />
       <Hashtag
           text="123456"
           type="home"
           url="https://google.com"
       />
-      <br/>
+      <br />
       <Hashtag
           text="654321"
           type="default"
@@ -25,4 +25,4 @@ function HashtagDefault() {
   )
 }
 
-export default HashtagDefault;
+export default HashtagDefault

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

@@ -1,2 +1,2 @@
-export {default as HashtagDefault} from './_hashtag_default.jsx';
-export {default as HashtagDark} from './_hashtag_dark.jsx';
+export { default as HashtagDefault } from './_hashtag_default.jsx'
+export { default as HashtagDark } from './_hashtag_dark.jsx'

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -1,23 +1,10 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 import classnames from 'classnames'
-import { titleize } from '../utilities/text.js'
-
-
-import {
-  Body,
-  Title,
-} from '../'
-
-const dot = (houseStyle) =>
-  { if (houseStyle !== undefined) {
-    return "\u00b7"
-  }
-}
-const titleizeAddessCont = (addressCont) => addressCont ? titleize(addressCont) : null;
 
+import { joinPresent, titleize } from '../utilities/text'
+import { Body, Hashtag, Title } from '../'
 
 type HomeAddressStreetProps = {
   address: String,
@@ -39,13 +26,12 @@ const classes = (className, dark) => (
   })
 )
 
-
 const HomeAddressStreet = ({
   address,
   addressCont,
   city,
   className,
-  dark=false,
+  dark = false,
   homeId,
   houseStyle,
   state,
@@ -55,26 +41,31 @@ const HomeAddressStreet = ({
   <div className={classes(className, dark)}>
     <Title
         className="pb_home_address_street_address"
+        dark={dark}
         size={4}
     >
-      {titleize(address)} {dot(houseStyle)} {houseStyle}
+      {joinPresent([titleize(address), houseStyle], ' · ')}
     </Title>
 
     <Title
         className="pb_home_address_street_address"
+        dark={dark}
         size={4}
     >
-      {titleizeAddessCont(addressCont)}
+      {titleize(addressCont)}
     </Title>
     <Body color="light">
-      {titleize(city)}, {state} {zipcode}
-    </Body>
-    <Body
-        className="home-hashtag"
-        tag="span"
-    >
-      H#{homeId}
+      {`${titleize(city)}, ${state} ${zipcode}`}
     </Body>
+    <If condition={homeId}>
+      <Hashtag
+          classname="home-hashtag"
+          dark={dark}
+          text={homeId}
+          type="home"
+          url="#"
+      />
+    </If>
     <Body
         color="light"
         tag="span"