RubyGems - playbook_ui - Versions diffs - 9.7.0 → 9.8.0 - Mend

playbook_ui 9.7.0 → 9.8.0

Files changed (28) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f80298017b48e65f5ec8a3ec7a6782608b90adf0bae7c32596837f3c964f5c85
-  data.tar.gz: 2c8e80673442f37ff2cce022f1324642c80c17b8c6da2912a119502a84c5781e
+  metadata.gz: bfe0ad928a2d058675961581c2e7579a7b2b686b7444c461b907d9976e46983b
+  data.tar.gz: 7dd7e0d985acdff72829e21de5b09b94f823006cd26b588831096334ea645690
 SHA512:
-  metadata.gz: ee6e023775fc1c6d7ec91beaec5d1bed2d4cca9f342ef4e7b8c203f70f577e197b7ae0048e1872f881d12c13113fe9eadd7fd3a369c4d0ff8213541c8ab67b9c
-  data.tar.gz: 75e487fb2251126f2c74d67d4db3173c68e2838e7350279f1c4e5a1e5315be3e0c17233e22b645adb8438695317797b05baf44ce0448764db22139200a1e40d3
+  metadata.gz: c8682707eb5b82740167457664a027d16b1635181692900c4c62f0aba012ee6803a13c4fdcfe55296682cf7979688cf34ea36d15a5b6fb2085faa40c2f7e58a8
+  data.tar.gz: c879311f4ffaa99290028fdf45579a595920fd8c9d953823c451d2891e9bac9b1302bc95d9f31dfb9a389f48657f36502f00b8a85eb15b3e29ce4775bca325f3

data/app/pb_kits/playbook/pb_date/_date.jsx CHANGED Viewed

@@ -95,16 +95,16 @@ const PbDate = (props: PbDateProps) => {
         <Else />
         <>
           <If condition={showIcon}>
-            <Body
+            <Caption
                 className="pb_icon_kit_container"
-                color="light"
                 tag="span"
             >
               <Icon
                   fixedWidth
                   icon="calendar-alt"
+                  size="xs"
               />
-            </Body>
+            </Caption>
           </If>
           <If condition={showDayOfWeek}>
             <Caption tag="div">

data/app/pb_kits/playbook/pb_date/date.html.erb CHANGED Viewed

@@ -39,11 +39,10 @@
     <!-- icon -->
     <% if object.show_icon %>
-      <%= pb_rails("body", props: {
-        color: "light",
+      <%= pb_rails("caption", props: {
         tag: "div",
       }) do %>
-        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: 'xs' }) %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb CHANGED Viewed

@@ -1,4 +1,12 @@
 <div>
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    size: "sm"
+  }) %>
+  <br>
   <%= pb_rails("date", props: {
     date: DateTime.now,
   }) %>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx CHANGED Viewed

@@ -4,6 +4,16 @@ import { Date as FormattedDate } from '../..'
 const DateVariants = (props) => {
   return (
     <div>
+      <FormattedDate
+          showIcon
+          size="sm"
+          value="1995-12-25"
+          {...props}
+      />
+      <br />
+      <br />
       <FormattedDate
           value="1995-12-25"
           {...props}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx CHANGED Viewed

@@ -17,15 +17,17 @@ type FixedConfirmationToastProps = {
   closeable?: boolean,
   data?: string,
   id?: string,
-  status?: "success" | "error" | "neutral" | "tip",
+  multiLine?: boolean,
+  status?: 'success' | 'error' | 'neutral' | 'tip',
   text: string,
 }
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const [showToast, toggleToast] = useState(true)
-  const { className, closeable = false, status = 'neutral', text } = props
+  const { className, closeable = false, multiLine = false, status = 'neutral', text } = props
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
+    { '_multi_line': multiLine },
     globalProps(props),
     className
   )

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

@@ -47,6 +47,13 @@ $confirmation_toast_colors: (
       .pb_icon {
         color: $white;
       }
+      &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
+        color: $white;
+        margin: 0 $space_md 0 $space_md;
+        max-width: 100%;
+        white-space: break-spaces;
+      }
     }
   }
 }

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

@@ -1,4 +1,5 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items.\nClick here to generate report",
+  multi_line: true,
+  text: "Scan to Assign Selected Items. Click here to generate report",
   status: "tip",
 }) %>

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

@@ -5,8 +5,9 @@ const FixedConfirmationToastMultiLine = (props) => {
   return (
     <div>
       <FixedConfirmationToast
+          multiLine
           status="tip"
-          text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          text="Scan to Assign Selected Items. Click here to generate report"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md CHANGED Viewed

@@ -1,2 +1,2 @@
-Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow.
+Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.

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

@@ -7,6 +7,8 @@ module Playbook
                     values: %w[success error neutral tip],
                     default: "neutral"
       prop :text, type: Playbook::Props::String
+      prop :multi_line, type: Playbook::Props::Boolean,
+                       default: false
       prop :closeable, type: Playbook::Props::Boolean,
                        default: false
@@ -18,6 +20,10 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
+      def multi_line_class
+        multi_line.present? ? "multi_line" : nil
+      end
       def icon_value
         case status
         when "success"
@@ -32,7 +38,7 @@ module Playbook
       end
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status) + close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class
       end
     end
   end

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx CHANGED Viewed

@@ -14,7 +14,7 @@ type FlexItemPropTypes = {
 }
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, overflow = null, shrink, flex } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none' } = props
   const growClass = grow === true ? 'grow' : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
   const overflowClass = overflow ? `overflow_${overflow}` : ''

data/app/pb_kits/playbook/pb_form_group/_form_group.jsx CHANGED Viewed

@@ -10,6 +10,7 @@ type FormGroupProps = {
   children?: Node,
   className?: string,
   data?: object,
+  fullWidth?: boolean,
   id?: string,
 }
@@ -18,13 +19,14 @@ const FormGroup = (props: FormGroupProps) => {
     aria = {},
     className,
     data = {},
+    fullWidth = false,
     id,
     children,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_form_group_kit'), globalProps(props), className)
+  const classes = classnames(buildCss('pb_form_group_kit', { full: fullWidth }), globalProps(props), className)
   return (
     <div

data/app/pb_kits/playbook/pb_form_group/_form_group.scss CHANGED Viewed

@@ -4,6 +4,14 @@
   align-items: flex-end;
   justify-content: flex-start;
+  &[class*=_full] {
+    display: flex;
+    justify-content: space-between;
+    & > div {
+      width: 100%;
+    }
+  }
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb ADDED Viewed

@@ -0,0 +1,13 @@
+<div>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
+    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
+    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
+  <% end %>
+  <br/>
+  <br/>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { placeholder: "Search" }) %>
+    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx ADDED Viewed

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Button, FormGroup, TextInput } from '../../'
+const FormGroupFullWidth = (props) => (
+  <div>
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            label="First Name"
+            placeholder="Enter First Name"
+            {...props}
+        />
+        <TextInput
+            label="Middle Intial"
+            placeholder="Enter Middle Initial"
+            {...props}
+        />
+        <TextInput
+            label="Last Name"
+            placeholder="Enter Last Name"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+    <br />
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            placeholder="Search"
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  </div>
+)
+export default FormGroupFullWidth

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Full Width is a prop that can be added to any of the Form Group options. This prop allows the Form Group to stretch the full width of the div.

data/app/pb_kits/playbook/pb_form_group/docs/example.yml CHANGED Viewed

@@ -3,6 +3,7 @@ examples:
   rails:
   - form_group_default: Default
   - form_group_button: Button
+  - form_group_full_width: Full Width
   - form_group_date_picker: Date Picker
   # - form_group_typeahead: Typeahead
   - form_group_select: Select
@@ -13,6 +14,7 @@ examples:
   react:
   - form_group_default: Default
   - form_group_button: Button
+  - form_group_full_width: Full Width
   - form_group_date_picker: Date Picker
   # - form_group_typeahead: Typeahead
   - form_group_select: Select

data/app/pb_kits/playbook/pb_form_group/docs/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 export { default as FormGroupDefault } from './_form_group_default.jsx'
 export { default as FormGroupButton } from './_form_group_button.jsx'
+export { default as FormGroupFullWidth } from './_form_group_full_width.jsx'
 export { default as FormGroupDatePicker } from './_form_group_date_picker.jsx'
-// export { default as FormGroupTypeahead } from './_form_group_typeahead.jsx'
 export { default as FormGroupSelect } from './_form_group_select.jsx'
 export { default as FormGroupSelectableCard } from './_form_group_selectable_card.jsx'
 export { default as FormGroupSelectableCardIcon } from './_form_group_selectable_card_icon.jsx'

data/app/pb_kits/playbook/pb_form_group/form_group.rb CHANGED Viewed

@@ -3,8 +3,17 @@
 module Playbook
   module PbFormGroup
     class FormGroup < Playbook::KitBase
+      prop :full_width, type: Playbook::Props::Boolean,
+                        default: false
       def classname
-        generate_classname("pb_form_group_kit")
+        generate_classname("pb_form_group_kit", full_width_class)
+      end
+    private
+      def full_width_class
+        full_width ? "full" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss CHANGED Viewed

@@ -16,7 +16,7 @@ $selector: ".pb_nav_list";
     list-style: none;
   }
-  [class*=_title] {
+  [class*=pb_nav_list_title] {
     padding: 0 $space_md $space_sm;
   }

data/app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb CHANGED Viewed

@@ -1,6 +1,42 @@
-<%= pb_rails("nav", props: {title: "Menu", link: "#"}) do %>
-  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>Photos<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Music<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Video<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Files<% end %>
+<%= pb_rails("nav", props: {title: "Users", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+    }) %>
+  <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Julie Hamilton",
+      territory: "PHL",
+      title: "Inside Sales Agent",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/45.jpg"
+      }) %>
+    <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Dennis Wilks",
+      territory: "PHL",
+      title: "Senior Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/men/44.jpg"
+      }) %>
+    <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Ronnie Martin",
+      territory: "PHL",
+      title: "Customer Development Representative",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/men/46.jpg"
+      }) %>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx CHANGED Viewed

@@ -1,12 +1,12 @@
 import React from 'react'
-import { Nav } from '../../'
+import { Nav, User } from '../../'
 import NavItem from '../_item.jsx'
 const BlockNav = (props) => {
   return (
     <Nav
         link="#"
-        title="Menu"
+        title="Users"
         {...props}
     >
       <NavItem
@@ -14,11 +14,49 @@ const BlockNav = (props) => {
           link="#"
           {...props}
       >
-        {'Photos'}
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
+            territory="PHL"
+            title="Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/45.jpg"
+            name="Julie Hamilton"
+            orientation="horizontal"
+            territory="PHL"
+            title="Inside Sales Agent"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            name="Dennis Wilks"
+            orientation="horizontal"
+            territory="PHL"
+            title="Senior Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/46.jpg"
+            name="Ronnie Martin"
+            orientation="horizontal"
+            territory="PHL"
+            title="Customer Development Representative"
+            {...props}
+        />
       </NavItem>
-      <NavItem link="#">{'Music'}</NavItem>
-      <NavItem link="#">{'Video'}</NavItem>
-      <NavItem link="#">{'Files'}</NavItem>
     </Nav>
   )
 }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb CHANGED Viewed

@@ -8,7 +8,7 @@
   <% end %>
   <%= pb_rails("body") do %>
-    When you make a selection, you will see it apear in the list below
+    When you make a selection, you will see it appear in the list below
   <% end %>
   <div data-selected-option></div>

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb CHANGED Viewed

@@ -7,7 +7,11 @@
                 class: object.classname) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
-        <i class="far fa-spinner fa-spin"></i>
+        <%= pb_rails("icon", props: {
+          icon: "spinner",
+          pulse: true,
+          fixed_width: true,
+        }) %>
       </div>
       <%= pb_rails("text_input", props: {
         type: "search",

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb CHANGED Viewed

@@ -3,8 +3,7 @@
 module Playbook
   module PbTypeahead
     class Typeahead < Playbook::KitBase
-      prop :async, type: Playbook::Props::Boolean,
-                    default: false
+      prop :async, type: Playbook::Props::Boolean, default: false
       prop :default_options, type: Playbook::Props::HashArray, default: []
       prop :get_option_label
       prop :get_option_value
@@ -13,9 +12,7 @@ module Playbook
       prop :load_options
       prop :name
       prop :options, type: Playbook::Props::HashArray, default: []
-      prop :pills, type: Playbook::Props::Boolean,
-                    default: false
+      prop :pills, type: Playbook::Props::Boolean, default: false
       prop :placeholder
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
@@ -45,14 +42,9 @@ module Playbook
           placeholder: placeholder,
         }
-        base_options.merge!({getOptionLabel: get_option_label}) if get_option_label.present?
-        base_options.merge!({getOptionValue: get_option_value}) if get_option_value.present?
-        base_options.merge!({
-          async: true,
-          loadOptions: load_options,
-        }) if async
+        base_options.merge!({ getOptionLabel: get_option_label }) if get_option_label.present?
+        base_options.merge!({ getOptionValue: get_option_value }) if get_option_value.present?
+        base_options.merge!({ async: true, loadOptions: load_options }) if async
         base_options
       end
     end

data/lib/playbook/version.rb CHANGED Viewed

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "9.7.0"
+  VERSION = "9.8.0"
 end

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.7.0
+  version: 9.8.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-19 00:00:00.000000000 Z
+date: 2021-04-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1004,6 +1004,9 @@ files:
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_default.html.erb
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.html.erb