playbook_ui 10.5.0 → 10.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 31e7e0a26b7b9819517d52aaa9359224528df45c92fbba2cef45a75523d7b52b
-  data.tar.gz: c9f444527d413d7a874a6cbb24be7898a43747d55b5c461bdfe90cee14c2d8b3
+  metadata.gz: 92a63c7a34002ee474379b924fac531199e11e3d5976bf78b6fe97e5537110e5
+  data.tar.gz: eb19246bf1a95c6bafb81e752a897a92fc8dd7b7e128c08c05e7ce3d24b8b6d8
 SHA512:
-  metadata.gz: bddd1fd46ae05dbff5b5f2d87d96c96d323bb0e0a612cb4234c7a9dce751469dfc68b7745df14876616fb08aaed593d449f4da94cec3d1df77c91d09e68a272b
-  data.tar.gz: 9019f94b33aa5caaa9ee99872df9e6a951d4a9f1c6ffd482dfc24b05e03f773d3f05633a2179addb706d885ed86bdf4918dffd90cd551d5c2d92ce3b5e237db0
+  metadata.gz: 1c76fe545fd05b58ea4e449cbfaed640329cae428bb317203ba41d6b82ff3881cce0beb55ee5e289ca83752490515aa2263b13f4975a94925f955ceee93d6fa6
+  data.tar.gz: a2c4878dbfa7e00663dddba7c265fa8ab7bef5250ddee8bc7b694dcafa2a56185b6dcc0af7611717cf33ad976193594366ce55ce0570c9fe90f27c92af3f76dd

data/app/pb_kits/playbook/pb_date/docs/_description.md

@@ -1,3 +1,11 @@
 Use to display the date. Year will not display if it is the current year.
 
 `DateTime` defaults to the "America/New_York" timezone. `Date` ignores timezone.
+
+**Please note**: this kit could potentially change the dates on you!
+
+This is because the Javascript `Date` class does not have the concept of a date without time. If you pass a Ruby `Date` string to JavaScript, you will receive a date *and* a time which makes use of the timezone it infers from your browser based on your virtual geolocation or custom browser settings.
+
+For example, if you pass a date like "7/2/2022" and your browser is on London time, Javascript will convert this to "7/2/2022 at 0:00 BST".
+
+Subsequently, if you have not passed in a timezone to this kit, it will convert that time into US Eastern Time (default), making the resulting date and time "7/1/2022 at 19:00 EST". In this case the expected July 2 date will now be presented as July 1.

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

@@ -14,12 +14,14 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: array<string>,
   className?: string,
+  acceptedFilesDescription?: string,
   onFilesAccepted: Callback,
 }
 
 const FileUpload = (props: FileUploadProps) => {
   const {
-    accept = ['image/png', 'image/jpg', 'image/jpeg', 'image/svg+xml'],
+    accept = ['*'],
+    acceptedFilesDescription = '',
     className,
     onFilesAccepted = noop,
   } = props
@@ -51,7 +53,7 @@ const FileUpload = (props: FileUploadProps) => {
           <If condition={isDragActive}>
             <p>{'Drop the files here ...'}</p>
             <Else />
-            <p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFileTypes}`}</p>
+            <p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes}`}</p>
           </If>
         </Body>
       </Card>

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,3 +1,8 @@
-[class^=pb_icon_kit]{
-
+// Rails custom icon styles
+svg.pb_custom_icon {
+  width: 1em;
+  fill: currentColor;
+  path {
+    fill: currentColor;
+  }
 }

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -0,0 +1,16 @@
+<%# SVG fill color inherited from css color property %>
+<div class="icon-wrapper">
+
+  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
+  <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
+  <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
+
+  <%= pb_rails("body", props: {
+    text: "Custom icons are compatible with other icon props (size, rotation,
+    spin, flip, etc). Their SVG fill colors will be inherited from
+    parent element's css color properties."
+  } ) %>
+</div>

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md

@@ -1,4 +1,4 @@
-### Experimental: Not currently available in the Rails version!
+# Tips for Custom Icons
 
 When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
 
@@ -8,4 +8,12 @@ Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <cod
 
 Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
 
-You must source *your own SVG into the React component/view* you are working in. This can easily be done in a programmatic and maintainable way. So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
+
+### React
+
+So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+
+### Rails
+
+Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.

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

@@ -7,6 +7,7 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom
 
   react:
   - icon_default: Icon Default

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,7 +1,13 @@
-<%= content_tag(:i, nil,
-    id: object.id,
-    data: object.data,
-    class: object.classname ) %>
-<%= content_tag(:span, nil,
-    aria: { label: "#{object.icon} icon" }.merge(object.aria),
-    hidden: true ) %>
+<% if object.custom_icon %>
+  <%= object.render_svg(object.custom_icon) %>
+<% else %>
+  <%= content_tag(:i, nil,
+      id: object.id,
+      data: object.data,
+      class: object.classname
+  ) %>
+  <%= content_tag(:span, nil,
+      aria: { label: "#{object.icon} icon" }.merge(object.aria),
+      hidden: true
+  ) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "open-uri"
+
 module Playbook
   module PbIcon
     class Icon < Playbook::KitBase
@@ -10,7 +12,9 @@ module Playbook
       prop :flip, type: Playbook::Props::Enum,
                   values: ["horizontal", "vertical", "both", nil],
                   default: nil
-      prop :icon, required: true
+      prop :icon
+      prop :custom_icon, type: Playbook::Props::String,
+                         default: nil
       prop :inverse, type: Playbook::Props::Boolean,
                      default: false
       prop :list_item, type: Playbook::Props::Boolean,
@@ -48,6 +52,34 @@ module Playbook
         )
       end
 
+      def custom_icon_classname
+        generate_classname(
+          "pb_icon_kit",
+          border_class,
+          fixed_width_class,
+          flip_class,
+          inverse_class,
+          list_item_class,
+          pull_class,
+          pulse_class,
+          rotation_class,
+          size_class,
+          spin_class,
+          separator: " "
+        )
+      end
+
+      def render_svg(path)
+        if File.extname(path) == ".svg"
+          doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
+          svg = doc.at_css "svg"
+          svg["class"] = "pb_custom_icon " + object.custom_icon_classname
+          raw doc
+        else
+          raise("Custom icon must be an svg. Please check your path and file type.")
+        end
+      end
+
     private
 
       def border_class

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -10,6 +10,8 @@ module Playbook
       prop :error
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
       prop :label
       prop :name
       prop :placeholder
@@ -27,7 +29,7 @@ module Playbook
       end
 
       def input_tag
-        tag(:input, input_options)
+        tag(:input, all_input_options)
       end
 
       def has_add_on?
@@ -44,13 +46,13 @@ module Playbook
 
     private
 
-      def input_options
+      def all_input_options
         {
           autocomplete: autocomplete ? nil : "off",
-          class: "text_input",
+          class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,
           disabled: disabled,
-          id: id,
+          id: input_options.dig(:id) || id,
           name: name,
           pattern: validation_pattern,
           placeholder: placeholder,
@@ -69,7 +71,7 @@ module Playbook
       end
 
       def validation_data
-        fields = {}
+        fields = input_options.dig(:data) || {}
         fields[:message] = validation_message unless validation_message.blank?
         fields
       end

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

@@ -1,4 +1,15 @@
-<%= pb_rails("typeahead", props: { label: "user", name: :foo, data: { typeahead_example: true } }) %>
+<%= pb_rails("typeahead", props: {
+  label: "user",
+  name: :foo,
+  data: { typeahead_example: true },
+  input_options: {
+    classname: "my-typeahead-class",
+    data: {
+      typeahead_testing: "data field test"
+    },
+    id: "typeahead-input-id-test",
+  },
+})%>
 
 <br><br><br>
 

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

@@ -15,6 +15,7 @@
       </div>
       <%= pb_rails("text_input", props: {
         type: "search",
+        input_options: object.input_options,
         label: object.label,
         name: object.name,
         value: object.value,

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

@@ -17,6 +17,8 @@ module Playbook
       prop :name
       prop :options, type: Playbook::Props::HashArray,
                      default: []
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
       prop :pills, type: Playbook::Props::Boolean,
                    default: false
 

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.5.0
+  version: 10.6.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-04 00:00:00.000000000 Z
+date: 2021-08-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1004,6 +1004,7 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/_icon_animate.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
+- app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb