playbook_ui 5.4.0 → 5.5.1.pre.alpha3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 55fa48f865b6b79cacae36a5e14f509a3cfefca7cb380e586657739f130d5e2d
-  data.tar.gz: d7ac2b958cc908d72c50f2ba27068f9d3ca8c4f4dd8caa158adeeba6af7fc46a
+  metadata.gz: 31dff4bfa638b81a994e4ceac1efcab5d6125f9978a00355de496dce4f0353e8
+  data.tar.gz: 3e600ee35141d5a5338b8944c76caf17e437556703348c29a45a156ca99848b3
 SHA512:
-  metadata.gz: 95ed9a7e3a31996a636129fd43ae63c41ab31f7011044588116b364023b326f9eecf33b40aa2fa9ba81ca269b8b29ba5ef51de7d0dbca9bd2f34efeca03b1150
-  data.tar.gz: ca78aa387f3d479cd1c1e3ad81f2fc186cb182ab1353376f82baf321aa8afefb001207d1a0669e9bbc18647df210b8fbc48371eca53a6d1295bac6f0b6a351d4
+  metadata.gz: 1552e2015fb8dc9bfd47105e6e4fd8999cf7464b39b1cbfb03f799516a0e57431086343f666b8e2ab006805de9bbaa28c9e5dcab739e2e1bb9b3b9f5617cd058
+  data.tar.gz: c6fa49ddef9e87c9f59cc6e681337188ec22907dea394bdd4dc82edfed29f7a3505de4c71656df879d76c62875072955148ae1906f95e96b15cdf09792b1bb60

data/app/pb_kits/playbook/_playbook.scss

@@ -14,6 +14,7 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
+@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';

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

@@ -2,6 +2,7 @@ samples:
   - dashboards
   - registration
   - filter_table
+  - collection_detail
 
 kits:
   - avatar
@@ -23,6 +24,7 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - date_picker
     - file_upload
     - form
     - form_pill

data/app/pb_kits/playbook/index.js

@@ -13,6 +13,7 @@ export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
+export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -90,6 +91,7 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
+export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

data/app/pb_kits/playbook/packs/examples.js

@@ -27,6 +27,7 @@ import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
+import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -107,6 +108,7 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
+  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,

data/app/pb_kits/playbook/packs/samples.js

@@ -13,7 +13,9 @@ import WebpackerReact from 'webpacker-react'
 import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
 import FilterTable from '../../../views/playbook/samples/filter_table/index.jsx'
 import Registration from '../../../views/playbook/samples/registration/index.jsx'
+import CollectionDetail from '../../../views/playbook/samples/collection_detail/index.jsx'
 
 WebpackerReact.setup({ Dashboards })
 WebpackerReact.setup({ FilterTable })
 WebpackerReact.setup({ Registration })
+WebpackerReact.setup({ CollectionDetail })

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -40,11 +40,11 @@ const Body = (props: BodyProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    className,
     buildCss('pb_body_kit', color, status, {
       dark: dark,
     }),
-    spacing(props)
+    spacing(props),
+    className
   )
   const Tag = `${tag}`
 

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -72,6 +72,7 @@ const Button = (props: ButtonPropTypes) => {
   const {
     children,
     className,
+    disabled,
     icon = null,
     id,
     loading = false,
@@ -120,6 +121,7 @@ const Button = (props: ButtonPropTypes) => {
       <button
           {...buttonAria}
           className={css}
+          disabled={disabled}
           id={id}
           onClick={onClick}
           type={htmlType}

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -3,11 +3,11 @@
 [class^=pb_caption_kit] {
   @include caption;
 
-  &[class*=_lg] {
+  &[class^=pb_caption_kit_lg] {
     @include caption_lg;
   }
 
-  &[class*=_xs] {
+  &[class^=pb_caption_kit_xs] {
     @include caption_xs;
   }
 

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
   <% if object.stat_label.present? %>
     <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
   <% end %>

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 import {
   Body,
@@ -11,7 +12,9 @@ import {
 
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',
+  aria?: object,
   className?: String,
+  data?: object,
   id?: String,
   statChange?: {
     change?: String,
@@ -24,27 +27,27 @@ type DashboardValueProps = {
   }
 }
 
-const dashboardValueCSS = ({
-  align = 'left',
-
-}: DashboardValueProps) => {
-  const alignStyle = align !== '' ? `_${align}` : ''
-
-  return 'pb_dashboard_value_kit' + alignStyle
-}
-
 const DashboardValue = (props: DashboardValueProps) => {
   const {
+    align = 'left',
+    aria = {},
     className,
+    data = {},
     id,
-    statChange,
+    statChange = {},
     statLabel,
-    statValue,
+    statValue = {},
   } = props
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_dashboard_value_kit', align), className, spacing(props))
+
   return (
     <div
-        className={classnames(dashboardValueCSS(props), className, spacing(props))}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
         id={id}
     >
       <If condition={statLabel}>

data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb

@@ -0,0 +1,36 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + " " + object.error_class,
+    data: object.data,
+    id: object.id) do %>
+    <%= pb_rails("caption", props: { text: object.label }) %>
+      <div class="input_wrapper">
+        <input
+            autocomplete="off"
+            id="<%= object.picker_id %>"
+        />
+        <% if object.error %>
+          <%= pb_rails("body", props: { 
+            status: "negative",
+            text: object.error
+          }) %>
+        <% end %>
+      </div>
+
+      <%= javascript_tag do %>
+      document.addEventListener("DOMContentLoaded", () => {
+          datePickerHelper({
+            defaultDate: "<%= object.default_date %>",
+            disableDate: <%=raw object.disable_date %>,
+            disableRange: <%=raw object.disable_range.to_json %>,
+            disableWeekdays: <%=raw object.disable_weekdays %>,
+            format: "<%= object.format %>",
+            maxDate: "<%= object.max_date %>",
+            minDate: "<%= object.min_date %>",
+            mode: "<%= object.mode %>",
+            pickerId: "<%= object.picker_id %>",
+            propModel: "rails"
+          })
+      })
+      <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -0,0 +1,98 @@
+/* @flow */
+
+import React, { useEffect } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
+import flatpickr from 'flatpickr'
+import { Body, Caption } from '../'
+import datePickerHelper from './date_picker_helper.js'
+
+type DatePickerProps = {
+  aria?: object,
+  className?: String,
+  data?: object,
+  defaultDate?: String,
+  disableDate?: Array,
+  disableRange?: Array,
+  disableWeekdays?: Array,
+  error?: String,
+  format?: String,
+  id?: String,
+  label?: String,
+  maxDate: String,
+  minDate: String,
+  mode?: String,
+  pickerId?: String,
+}
+const DatePicker = (props: DatePickerProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    defaultDate = '',
+    disableDate = null,
+    disableRange = null,
+    disableWeekdays = null,
+    error,
+    format = 'm/d/Y',
+    id,
+    label = 'Date Picker',
+    maxDate,
+    minDate,
+    mode = 'single',
+    pickerId,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_date_picker'),
+    className,
+    spacing(props),
+    error ? 'error' : null,
+  )
+
+  useEffect(() => {
+    datePickerHelper({
+      defaultDate: defaultDate,
+      disableDate: disableDate,
+      disableRange: disableRange,
+      disableWeekdays: disableWeekdays,
+      format: format,
+      maxDate: maxDate,
+      minDate: minDate,
+      mode: mode,
+      pickerId: pickerId,
+      propModel: 'React',
+    })
+  }, [])
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+      <Caption
+          text={label}
+      />
+      <div className="input_wrapper">
+        <input
+            autoComplete="off"
+            id={pickerId}
+        />
+        <If condition={error}>
+          <Body
+              status="negative"
+              text={error}
+          />
+        </If>
+      </div>
+    </div>
+  )
+}
+
+export default DatePicker

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -0,0 +1,59 @@
+@import '~flatpickr/dist/flatpickr.css';
+@import "../pb_textarea/textarea_mixin";
+@import "../pb_title/title_mixin";
+@import "../tokens/colors";
+@import "../pb_caption/caption_mixin";
+
+[class^=pb_date_picker] {
+  // input styles
+  [class^=pb_caption_kit] {
+    margin-bottom: $space_xs;
+    display: block;
+  }
+  .input_wrapper {
+    margin-bottom: $space_sm;
+    
+    .flatpickr-wrapper {
+      display: block;
+      input::placeholder {
+        @include pb_body_light;
+      }
+  
+      > input:first-child {
+        @include pb_textarea_light;
+        @include pb_title_4;
+        overflow: hidden;
+      }
+  
+      input:focus, input:-webkit-autofill:focus {
+        @include pb_textarea_focus;
+        -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+    }
+  }
+
+  &.error {
+    [class^=pb_body_kit] {
+      margin-top: $space_xs / 2;
+    }
+    .flatpickr-wrapper {
+      > input:first-child {
+        border-color: $error;
+      }
+    }
+  }
+}
+
+// date-picker styles
+
+div.flatpickr-weekdays {
+  margin-top: 5px;
+}
+span.flatpickr-weekday {
+  @include caption;
+}
+
+.pb_popover_body {
+  overflow: visible !important;
+}

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDatePicker
+    class DatePicker
+      include Playbook::Props
+
+      partial "pb_date_picker/date_picker"
+
+      prop :default_date, type: Playbook::Props::String,
+                          default: ""
+      prop :disable_date, type: Playbook::Props::Array,
+                          default: []
+      prop :disable_range, type: Playbook::Props::Array,
+                           default: []
+      prop :disable_weekdays, type: Playbook::Props::Array,
+                              default: []
+      prop :error, type: Playbook::Props::String
+      prop :format, type: Playbook::Props::String,
+                    default: "m/d/Y"
+      prop :label, type: Playbook::Props::String,
+                   default: "Date Picker"
+      prop :max_date, type: Playbook::Props::String
+      prop :min_date, type: Playbook::Props::String
+      prop :mode, type: Playbook::Props::String,
+                  default: "single"
+      prop :picker_id, type: Playbook::Props::String
+
+      def classname
+        generate_classname("pb_date_picker")
+      end
+
+      def error_class
+        error ? "error" : ""
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -0,0 +1,91 @@
+import flatpickr from 'flatpickr'
+
+const datePickerHelper = (config) => {
+  const {
+    defaultDate,
+    disableDate,
+    disableRange,
+    disableWeekdays,
+    format,
+    maxDate,
+    minDate,
+    mode,
+    pickerId,
+    propModel,
+  } = config
+
+  const defaultDateGetter = () => {
+    if (defaultDate !== '') {
+      if (propModel === 'rails' && defaultDate.includes('[') == true) {
+        return JSON.parse(defaultDate.replace(/"/g, '"'))
+      } else if (defaultDate === 'blank') {
+        return ''
+      } else {
+        return defaultDate
+      }
+    }
+    if (mode === 'single' && defaultDate === '') {
+      return new Date()
+    } else if (mode === 'range' && defaultDate === '') {
+      const today = new Date()
+      const tomorrow = new Date(today)
+      tomorrow.setDate(tomorrow.getDate() + 1)
+      return [today, tomorrow]
+    }
+  }
+  const disabledParser = () => {
+    if (disableDate && disableDate.length > 0) {
+      return disableDate
+    } else if (disableRange && disableRange.length > 0) {
+      return disableRange
+    } else {
+      return []
+    }
+  }
+
+  flatpickr(`#${pickerId}`, {
+    allowInput: true,
+    dateFormat: format,
+    defaultDate: defaultDateGetter(),
+    disable: disableWeekdays && disableWeekdays.length > 0 ? [
+      (date) => {
+        const weekdayObj = {
+          Sunday: 0,
+          Monday: 1,
+          Tuesday: 2,
+          Wednesday: 3,
+          Thursday: 4,
+          Friday: 5,
+          Saturday: 6,
+        }
+        return (
+          // try to refactor with for loop
+          date.getDay() === weekdayObj[disableWeekdays[0]] ||
+          date.getDay() === weekdayObj[disableWeekdays[1]] ||
+          date.getDay() === weekdayObj[disableWeekdays[2]] ||
+          date.getDay() === weekdayObj[disableWeekdays[3]] ||
+          date.getDay() === weekdayObj[disableWeekdays[4]] ||
+          date.getDay() === weekdayObj[disableWeekdays[5]] ||
+          date.getDay() === weekdayObj[disableWeekdays[6]]
+        )
+      },
+    ] : disabledParser(),
+    maxDate: maxDate,
+    minDate: minDate,
+    mode: mode,
+    static: true,
+  })
+
+  document.querySelector(`#${pickerId}`).addEventListener('input', (e) => {
+    const picker = document.querySelector(`#${pickerId}`)._flatpickr
+    picker.input.setAttribute('value', e.target.value)
+    const variant = picker.config.mode
+    if (variant === 'single' && e.target.value.split('').length === 10) {
+      picker.setDate(e.target.value)
+    } else if (variant === 'range' && e.target.value.split('').length === 24) {
+      picker.setDate(e.target.value)
+    }
+  })
+}
+
+export default datePickerHelper