playbook_ui 7.8.2 → 7.11.0.pre.alpha1

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -28,6 +28,13 @@ module Playbook
       prop :unit, type: Playbook::Props::String,
                   required: false
 
+      prop :emphasized, type: Playbook::Props::Boolean,
+                        default: true
+
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default light bold],
+                     default: "default"
+
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
 
@@ -61,6 +68,21 @@ module Playbook
         }
       end
 
+      def emphasized_class
+        emphasized ? "" : "_deemphasized"
+      end
+
+      def variant_class
+        return unless size == "sm"
+
+        case variant
+        when "light"
+          "_light"
+        when "bold"
+          "_bold"
+        end
+      end
+
     private
 
       def whole_value

data/app/pb_kits/playbook/pb_currency/docs/{_currency_small.html.erb → _currency_alignment.html.erb}

@@ -1,13 +1,13 @@
 <%= pb_rails("currency", props: {
-  label: "Caption",
   amount: "2,000.50",
+  label: "Left",
   size: "sm",
 }) %>
 
 <%= pb_rails("currency", props: {
   align: "center",
   amount: "342",
-  label: "Caption",
+  label: "Center",
   size: "sm",
   symbol: "€",
 }) %>
@@ -15,7 +15,7 @@
 <%= pb_rails("currency", props: {
   align: "right",
   amount: "45",
-  label: "Caption",
+  label: "Right",
   unit: "/mo",
   size: "sm",
 }) %>

data/app/pb_kits/playbook/pb_currency/docs/{_currency_small.jsx → _currency_alignment.jsx}

@@ -1,20 +1,20 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencySmall = (props) => {
+const CurrencyAlignment = (props) => {
   return (
     <>
       <Currency
           {...props}
           amount="2,000.50"
-          label="Caption"
+          label="Left"
           size="sm"
       />
       <Currency
           {...props}
           align="center"
           amount="342"
-          label="Caption"
+          label="Center"
           size="sm"
           symbol="€"
       />
@@ -22,7 +22,7 @@ const CurrencySmall = (props) => {
           {...props}
           align="right"
           amount="45"
-          label="Caption"
+          label="Right"
           size="sm"
           unit="/mo"
       />
@@ -30,4 +30,4 @@ const CurrencySmall = (props) => {
   )
 }
 
-export default CurrencySmall
+export default CurrencyAlignment

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("currency", props: {
+  amount: "309",
+  label: "Sales",
+  size: "md",
+  symbol: "",
+  unit: "/week"
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Currency } from '../../'
+
+const CurrencyNoSymbol = (props) => {
+  return (
+    <Currency
+        {...props}
+        amount="309"
+        label="Sales"
+        size="md"
+        symbol=""
+        unit="/week"
+    />
+  )
+}
+
+export default CurrencyNoSymbol

data/app/pb_kits/playbook/pb_currency/docs/{_currency_large.html.erb → _currency_size.html.erb}

@@ -1,20 +1,21 @@
 <%= pb_rails("currency", props: {
   amount: "2,000.50",
-  size: "lg"
+  label: "Small",
+  margin_bottom: "md",
+  size: "sm",
 }) %>
 
 <%= pb_rails("currency", props: {
-  align: "center",
   amount: "342",
-  label: "Caption",
-  size: "lg",
+  label: "Medium",
+  margin_bottom: "md",
+  size: "md",
   symbol: "€",
 }) %>
 
 <%= pb_rails("currency", props: {
-  align: "right",
   amount: "45",
-  label: "Caption",
-  unit: "/mo",
+  label: "Large",
   size: "lg",
+  unit: "/mo",
 }) %>

data/app/pb_kits/playbook/pb_currency/docs/{_currency_large.jsx → _currency_size.jsx}

@@ -1,27 +1,28 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencyLarge = (props) => {
+const CurrencySize = (props) => {
   return (
     <>
       <Currency
           {...props}
           amount="2,000.50"
-          size="lg"
+          label="Small"
+          marginBottom="md"
+          size="sm"
       />
       <Currency
           {...props}
-          align="center"
           amount="342"
-          label="Caption"
-          size="lg"
+          label="Medium"
+          marginBottom="md"
+          size="md"
           symbol="€"
       />
       <Currency
           {...props}
-          align="right"
           amount="45"
-          label="Caption"
+          label="Large"
           size="lg"
           unit="/mo"
       />
@@ -29,4 +30,4 @@ const CurrencyLarge = (props) => {
   )
 }
 
-export default CurrencyLarge
+export default CurrencySize

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("currency", props: {
+  amount: "2,000.50",
+  emphasized: false,
+  label: "Emphasized False",
+  margin_bottom: "md",
+  size: "sm",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "342",
+  label: "Light",
+  margin_bottom: "md",
+  size: "sm",
+  symbol: "€",
+  variant: "light",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "45",
+  label: "Bold",
+  size: "sm",
+  unit: "/mo",
+  variant: "bold",
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/{_currency_medium.jsx → _currency_variants.jsx}

@@ -1,33 +1,36 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencyMedium = (props) => {
+const CurrencyVariants = (props) => {
   return (
     <>
       <Currency
           {...props}
           amount="2,000.50"
-          label="Caption"
-          size="md"
+          emphasized={false}
+          label="Emphasized False"
+          marginBottom="md"
+          size="sm"
       />
       <Currency
           {...props}
-          align="center"
           amount="342"
-          label="Caption"
-          size="md"
+          label="Light"
+          marginBottom="md"
+          size="sm"
           symbol="€"
+          variant="light"
       />
       <Currency
           {...props}
-          align="right"
           amount="45"
-          label="Caption"
-          size="md"
+          label="Bold"
+          size="sm"
           unit="/mo"
+          variant="bold"
       />
     </>
   )
 }
 
-export default CurrencyMedium
+export default CurrencyVariants

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

@@ -1,11 +1,13 @@
 examples:
 
   rails:
-  - currency_small: Small
-  - currency_medium: Medium
-  - currency_large: Large
+  - currency_variants: Variants
+  - currency_size: Size
+  - currency_alignment: Alignment
+  - currency_no_symbol: No Symbol
 
   react:
-  - currency_small: Small
-  - currency_medium: Medium
-  - currency_large: Large
+  - currency_variants: Variants
+  - currency_size: Size
+  - currency_alignment: Alignment
+  - currency_no_symbol: No Symbol

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

@@ -1,3 +1,4 @@
-export { default as CurrencySmall } from './_currency_small.jsx'
-export { default as CurrencyLarge } from './_currency_large.jsx'
-export { default as CurrencyMedium } from './_currency_medium.jsx'
+export { default as CurrencyVariants } from './_currency_variants.jsx'
+export { default as CurrencySize } from './_currency_size.jsx'
+export { default as CurrencyAlignment } from './_currency_alignment.jsx'
+export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("date_picker", props: {
+  label: "Unformatted Date Object",
+  default_date: Date.today,
+  picker_id: "date-picker-anti-pattern1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "Date Object Without Time - Displays Yesterday's Date",
+  default_date: Date.today.to_datetime.utc.iso8601,
+  picker_id: "date-picker-anti-pattern2"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "Unformatted DateTime Object",
+  default_date: DateTime.current,
+  picker_id: "date-picker-anti-pattern3"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "String Conversion Without ISO Formatting",
+  default_date: DateTime.current.utc.to_s,
+  picker_id: "date-picker-anti-pattern5"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb

@@ -1,17 +1,17 @@
 <%= pb_rails("date_picker", props: {
-  default_date: "07/31/2020",
+  default_date: "07/25/2020",
   label: "Default Date String",
   picker_id: "date-picker-default-date1"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  default_date: (Date.today + 2).httpdate,
+  default_date: DateTime.current.utc.iso8601,
   label: "Default Date Dynamic",
   picker_id: "date-picker-default-date2"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  default_date: [(Date.today).httpdate, (Date.today + 7).httpdate],
+  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
   label: "Default Date Range",
   mode: "range",
   picker_id: "date-picker-default-date3"
@@ -20,4 +20,4 @@
 <%= pb_rails("date_picker", props: {
   label: "Default Behavior",
   picker_id: "date-picker-default-date4"
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx

@@ -9,12 +9,12 @@ const DatePickerDefaultDate = () => (
         pickerId="date-picker-default-date1"
     />
     <DatePicker
-        defaultDate={new Date().fp_incr(1)}
+        defaultDate={new Date()}
         label="Default Date Dynamic"
         pickerId="date-picker-default-date2"
     />
     <DatePicker
-        defaultDate={[new Date(), new Date().fp_incr(6)]}
+        defaultDate={[new Date(), new Date().fp_incr(7)]}
         label="Default Date Range"
         mode="range"
         pickerId="date-picker-default-date3"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -1 +1,3 @@
-The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass a string or date object if you want a default value on page load.
+The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load.  Use Ruby UTC DateTime objects and convert them to ISO date strings with `DateTime.now.utc.iso8601`.  
+
+If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb

@@ -1,11 +1,11 @@
 <%= pb_rails("date_picker", props: {
-  disable_date: [(Date.today + 1).httpdate],
+  disable_date: [(DateTime.current + 1.day).utc.iso8601],
   label: "Disable Single Date",
   picker_id: "single-disabled-date"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  disable_date: [(Date.today + 1).httpdate, (Date.today + 3).httpdate],
+  disable_date: [(DateTime.current + 1.day).utc.iso8601, (DateTime.current + 2.day).utc.iso8601],
   label: "Disable Multiple Dates",
   picker_id: "multiple-disabled-dates"
 }) %>
@@ -13,8 +13,8 @@
 <%= pb_rails("date_picker", props: {
   disable_range: [
           {
-            from: (Date.today + 1).httpdate,
-            to: (Date.today + 7).httpdate,
+            from: DateTime.current.utc.iso8601,
+            to: (DateTime.current + 7.day).utc.iso8601,
           },
         ],
   label: "Disable Single Range",
@@ -24,12 +24,12 @@
 <%= pb_rails("date_picker", props: {
   disable_range: [
           {
-            from: (Date.today + 1).httpdate,
-            to: (Date.today + 3).httpdate,
+            from: (DateTime.current + 1.day).utc.iso8601,
+            to: (DateTime.current + 2.day).utc.iso8601,
           },
           {
-            from: (Date.today + 7).httpdate,
-            to: (Date.today + 14).httpdate,
+            from: (DateTime.current + 7.day).utc.iso8601,
+            to: (DateTime.current + 14.day).utc.iso8601,
           },
         ],
   label: "Disable Multiple Ranges",

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("button", props: { id: "close-btn", margin_right: "sm", text: "Close" }) %>
+<%= pb_rails("button", props: { id: "clear-btn", margin_right: "sm", text: "Clear" }) %>
+<%= pb_rails("button", props: { id: "today-btn", text: "Today" }) %>
+<%= pb_rails("date_picker", props: {
+  hide_label: true,
+  margin_top: "sm",
+  picker_id: "fp-methods"
+}) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    const fp = document.querySelector("#fp-methods")._flatpickr
+    const closeBtn = document.querySelector("#close-btn")
+    const clearBtn = document.querySelector("#clear-btn")
+    const todayBtn = document.querySelector("#today-btn")
+
+    closeBtn.addEventListener("click", () => {
+      fp.close()
+    })
+    clearBtn.addEventListener("click", () => {
+      fp.clear()
+    })
+    todayBtn.addEventListener("click", () => {
+      fp.setDate(new Date(), true)
+    })
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react'
+import { Button, DatePicker } from '../../'
+
+const DatePickerFlatpickrMethods = () => {
+  let fpInstance
+  useEffect(() => {
+    fpInstance = document.querySelector('#fp-methods')._flatpickr
+  }, [])
+  const clickHandlerClear = () => {
+    fpInstance.clear()
+  }
+  const clickHandlerClose = () => {
+    fpInstance.close()
+  }
+  const clickHandlerToday = () => {
+    fpInstance.setDate(new Date(), true)
+  }
+
+  return (
+    <div>
+      <Button
+          marginRight="sm"
+          onClick={clickHandlerClose}
+          text="Close"
+      />
+      <Button
+          marginRight="sm"
+          onClick={clickHandlerClear}
+          text="Clear"
+      />
+      <Button
+          onClick={clickHandlerToday}
+          text="Today"
+      />
+      <DatePicker
+          hideLabel
+          marginTop="sm"
+          pickerId="fp-methods"
+      />
+    </div>
+  )
+}
+
+export default DatePickerFlatpickrMethods