RubyGems - playbook_ui - Versions diffs - 9.5.0.alpha.rs.downgrade → 9.7.0.pre.alphawidth1 - Mend

playbook_ui 9.5.0.alpha.rs.downgrade → 9.7.0.pre.alphawidth1

Files changed (59) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 566bf05016cdbd914b93dd26f30748ef55e924c3c2a50680a7f378ab936c6992
-  data.tar.gz: 54e7da499075ccf13d244c4a53e3809fd9db0e8ad6bbb73c95b9581cb9409db7
+  metadata.gz: 3a4e16697962adfdbfb453aae9013b077e229bb1043d6584b6c872f7a876d57d
+  data.tar.gz: 565485a903d9e946589f765a24e2518e5380fa05818917780560f42eb02a08f3
 SHA512:
-  metadata.gz: 87dc6b5f61305e12598ba8a2cae7886888d58d8b60d7bc6f99ebd3feba27df7c6efaad4397c99a0cccd9354c256c37de7021e4a5934d211578b04f8b6f38b833
-  data.tar.gz: ee0101d042837334f790f3165cb1cd46eec4ad3e1a281a0ba84913eb4c399240d54b76b1d941770cfe38bd5428470ef2eeb7f48ac129e4342a2c2217d7265b57
+  metadata.gz: 3aae8d85a3f348aef5f23c41f22a4d5917bd729e007a2766a33cdc79b54ac60504063f31f1e2d021f3bc6ce16486e32832a0eca0c681560191a9d4ac1049b213
+  data.tar.gz: 95d568d4915960a1370c2200456c8f6d2a9f7d2963a86477e92e8158fa0f75a00ed305b4be7a04b5e007645f8fa177bf23773088d249e5eb8e40b1e1d399a769

data/app/pb_kits/playbook/_playbook.scss CHANGED Viewed

@@ -55,6 +55,7 @@
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
+@import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
 @import 'pb_pill/pill';

data/app/pb_kits/playbook/data/menu.yml CHANGED Viewed

@@ -26,6 +26,7 @@ kits:
     - form
     - form_group
     - form_pill
+    - passphrase
     - radio
     - rich_text_editor
     - select

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

@@ -61,6 +61,7 @@ export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_st
 export Nav from './pb_nav/_nav.jsx'
 export NavItem from './pb_nav/_item.jsx'
 export OnlineStatus from './pb_online_status/_online_status.jsx'
+export Passphrase from './pb_passphrase/_passphrase.jsx'
 export PbReactPopover from './pb_popover/_popover.jsx'
 export Person from './pb_person/_person.jsx'
 export PersonContact from './pb_person_contact/_person_contact.jsx'
@@ -84,13 +85,13 @@ export StatChange from './pb_stat_change/_stat_change.jsx'
 export StatValue from './pb_stat_value/_stat_value.jsx'
 export Table from './pb_table/_table.jsx'
 export TableRow from './pb_table/_table_row.jsx'
-export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
+export Textarea from './pb_textarea/_textarea.jsx'
 export Time from './pb_time/_time.jsx'
-export Timeline from './pb_timeline/_timeline.jsx'
+export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
 export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
+export Timeline from './pb_timeline/_timeline.jsx'
 export Timestamp from './pb_timestamp/_timestamp.jsx'
-export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
 export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'

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_dialog/dialog_header.rb CHANGED Viewed

@@ -1,31 +1,30 @@
 # frozen_string_literal: true
 module Playbook
-    module PbDialog
-      class DialogHeader
-        include Playbook::Props
-        partial "pb_dialog/child_kits/dialog_header"
+  module PbDialog
+    class DialogHeader
+      include Playbook::Props
-        prop :closeable, type: Playbook::Props::Boolean, default: true
-        prop :padding
-        prop :separator, type: Playbook::Props::Boolean, default: true
-        prop :spacing
-        prop :text
-        prop :title
-        def dialog_header_options
-          {
-            id: id,
-            closeable: closeable,
-            padding: padding,
-            separator: separator,
-            spacing: spacing,
-            text: text,
-            title: title,
-          }
-        end
+      partial "pb_dialog/child_kits/dialog_header"
+      prop :closeable, type: Playbook::Props::Boolean, default: true
+      prop :padding
+      prop :separator, type: Playbook::Props::Boolean, default: true
+      prop :spacing
+      prop :text
+      prop :title
+      def dialog_header_options
+        {
+          id: id,
+          closeable: closeable,
+          padding: padding,
+          separator: separator,
+          spacing: spacing,
+          text: text,
+          title: title,
+        }
       end
     end
   end
+end

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 %>