playbook_ui 10.4.0 → 10.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 38eeece3fb68d6227c36abeb088a2552e235d10eb997f01c144f50082a797b36
-  data.tar.gz: d861222b9b7916886d94fe39887275811192f8619e6e248133706f415ea2dee8
+  metadata.gz: 31e7e0a26b7b9819517d52aaa9359224528df45c92fbba2cef45a75523d7b52b
+  data.tar.gz: c9f444527d413d7a874a6cbb24be7898a43747d55b5c461bdfe90cee14c2d8b3
 SHA512:
-  metadata.gz: ec248835829f696b9957c544dd4d8b96d5180c1a5bb7799fd8a283678f7f99cbc54f355f47ed1f5a2a9a8c5d2d6cc80e790b37a7a23067bf8c0e228fb03c9dd9
-  data.tar.gz: 3ac794d64bf862f35351784e1efced6de5c38bfbc5d2c38d2e9388cfdb5a3f1756abcc8082275a33e59745e2ce355c97f65c9ef7a750c329c54d732381d02252
+  metadata.gz: bddd1fd46ae05dbff5b5f2d87d96c96d323bb0e0a612cb4234c7a9dce751469dfc68b7745df14876616fb08aaed593d449f4da94cec3d1df77c91d09e68a272b
+  data.tar.gz: 9019f94b33aa5caaa9ee99872df9e6a951d4a9f1c6ffd482dfc24b05e03f773d3f05633a2179addb706d885ed86bdf4918dffd90cd551d5c2d92ce3b5e237db0

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -32,6 +32,14 @@ const FileUpload = (props: FileUploadProps) => {
     onDrop,
   })
 
+  const acceptedFileTypes = accept.map((fileType) => {
+    if (fileType.startsWith('image/')) {
+      return fileType.replace('image/', ' ')
+    } else {
+      return fileType
+    }
+  })
+
   return (
     <div
         className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
@@ -43,7 +51,7 @@ const FileUpload = (props: FileUploadProps) => {
           <If condition={isDragActive}>
             <p>{'Drop the files here ...'}</p>
             <Else />
-            <p>{'Drag & drop some files here, or click to select files'}</p>
+            <p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFileTypes}`}</p>
           </If>
         </Body>
       </Card>

data/app/pb_kits/playbook/pb_message/_message.jsx

@@ -25,6 +25,7 @@ type MessageProps = {
   message: string,
   timestamp?: string,
   timestampObject?: string,
+  timezone?: string,
   alignTimestamp?: string,
 }
 
@@ -42,6 +43,7 @@ const Message = (props: MessageProps) => {
     message,
     timestamp,
     timestampObject,
+    timezone,
     alignTimestamp = 'right',
   } = props
   const ariaProps = buildAriaProps(aria)
@@ -87,11 +89,13 @@ const Message = (props: MessageProps) => {
           <Timestamp
               className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
               text={timestamp}
+              timezone={timezone}
           />
           <If condition={timestampObject}>
             <Timestamp
                 className={`pull-${alignTimestamp} message_timestamp`}
                 timestamp={timestampObject}
+                timezone={timezone}
             />
           </If>
         </Flex>

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -23,11 +23,13 @@
 
         <%= pb_rails("timestamp", props: {
           text: object.timestamp,
+          timezone: object.timezone,
           classname: "pull-#{object.align_timestamp} #{object.timestamp_object.present? ? 'message_humanized_time' : nil}"
         }) %>
         <% if object.timestamp_object.present? %>
           <%= pb_rails("timestamp", props: {
             timestamp: object.timestamp_object,
+            timezone: object.timezone,
             classname: "pull-#{object.align_timestamp} message_timestamp"
           }) %>
         <% end %>

data/app/pb_kits/playbook/pb_message/message.rb

@@ -10,6 +10,7 @@ module Playbook
       prop :message
       prop :timestamp
       prop :timestamp_object
+      prop :timezone, default: "America/New_York"
       prop :align_timestamp, type: Playbook::Props::Enum, values: %w[left right], default: "right"
 
       def classname

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -21,6 +21,7 @@ type SelectProps = {
   aria?: object,
   blankSelection?: string,
   children?: React.Node,
+  compact?: boolean,
   className?: string,
   data?: object,
   disabled?: boolean,
@@ -29,6 +30,7 @@ type SelectProps = {
   options: SelectOption[],
   id?: string,
   includeBlank?: string,
+  inline?: boolean,
   label?: string,
   margin: string,
   marginBottom: string,
@@ -53,10 +55,12 @@ const Select = ({
   blankSelection,
   children,
   className,
+  compact = false,
   data = {},
   disabled = false,
   error,
   label,
+  inline = false,
   multiple = false,
   name,
   onChange = () => {},
@@ -69,13 +73,18 @@ const Select = ({
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
 
+  const inlineClass = inline ? 'inline' : null
+  const compactClass = compact ? 'compact' : null
   const classes = classnames(
     buildCss('pb_select'),
     globalProps({
       ...props,
       marginBottom: props.marginBottom || props.margin || 'sm',
     }),
-    className)
+    className,
+    inlineClass,
+    compactClass
+  )
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
 

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -64,6 +64,37 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
+  &.inline {
+    &:not(:hover) {
+      svg {
+        display: none;
+      }
+    }
+    &:hover {
+      select {
+        color: $primary !important;
+        background: rgba(0,130,255,0.1);
+      }
+      svg {
+        color: $primary !important;
+        font-size: 16px;
+      }
+    }
+    select {
+      box-shadow: none;
+      border-color: transparent;
+      padding: 4px 8px;
+      border-radius: 4px;
+      option {
+        background-color: $white;
+      }
+    }
+    &.compact {
+      select {
+        font-size: 12px;
+      }
+    }
+  }
 }
 
 [class^=pb_select].dark {
@@ -96,4 +127,36 @@
       }
     }
   }
-}
+  &.inline {
+    &:not(:hover) {
+      svg {
+        display: none;
+      }
+    }
+    &:hover {
+      select {
+        color: $white !important;
+        background: rgba(0,130,255,0.1);
+      }
+      svg {
+        color: $primary !important;
+        font-size: 16px;
+      }
+    }
+    select {
+      box-shadow: none;
+      border-color: transparent;
+      background: transparent;
+      padding: 4px 8px;
+      border-radius: 4px;
+      option {
+        background-color: $white;
+      }
+    }
+    &.compact {
+      select {
+        font-size: 12px;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  inline: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Body, Select } from '../..'
+
+const SelectInline = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          inline
+          label="Favorite Food"
+          name="food"
+          options={options}
+          {...props}
+      />
+      <Body
+          status="negative"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectInline

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  inline: true,
+  compact: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Body, Select } from '../..'
+
+const SelectInlineCompact = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          compact
+          inline
+          label="Favorite Food"
+          name="food"
+          options={options}
+          {...props}
+      />
+      <Body
+          status="negative"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectInlineCompact

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

@@ -9,6 +9,8 @@ examples:
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
+  - select_inline: Select Inline
+  - select_inline_compact: Select Inline Compact
 
 
 
@@ -21,3 +23,5 @@ examples:
   - select_value_text_same: Equal option value and value text
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
+  - select_inline: Select Inline
+  - select_inline_compact: Select Inline Compact

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

@@ -6,3 +6,5 @@ export { default as SelectRequired } from './_select_required.jsx'
 export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
+export { default as SelectInline } from './_select_inline.jsx'
+export { default as SelectInlineCompact } from './_select_inline_compact.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
   data: object.data,
   aria: object.aria,
-  class: object.classname) do %>
+  class: object.classnames) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
       <%= pb_rails("caption", props: { text: object.label }) %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -6,9 +6,11 @@ module Playbook
   module PbSelect
     class Select < Playbook::KitBase
       prop :blank_selection
+      prop :compact, type: Playbook::Props::Boolean, default: false
       prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :error
       prop :include_blank
+      prop :inline, type: Playbook::Props::Boolean, default: false
       prop :label
       prop :multiple, type: Playbook::Props::Boolean, default: false
       prop :name
@@ -16,10 +18,22 @@ module Playbook
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
       prop :required, type: Playbook::Props::Boolean, default: false
 
+      def classnames
+        classname + inline_class + compact_class
+      end
+
       def classname
         generate_classname("pb_select", select_margin_bottom, separator: " ")
       end
 
+      def inline_class
+        inline ? " inline " : " "
+      end
+
+      def compact_class
+        compact ? "compact" : ""
+      end
+
       def select_wrapper_class
         "pb_select_kit_wrapper" + error_class
       end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.3.0"
-  VERSION = "10.4.0"
+  PREVIOUS_VERSION = "10.4.0"
+  VERSION = "10.5.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.4.0
+  version: 10.5.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-07-28 00:00:00.000000000 Z
+date: 2021-08-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1505,6 +1505,10 @@ files:
 - app/pb_kits/playbook/pb_select/docs/_select_error.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_error.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_error.md
+- app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_inline.jsx
+- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb
+- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_required.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_required.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb