playbook_ui 5.5.1.pre.alpha3 → 5.5.1.pre.alpha4

data/app/pb_kits/playbook/vendor.js

@@ -5,10 +5,6 @@ window.pbChart = pbChart
 // Forms
 import './pb_form/pb_form_validation'
 
-// Date Picker
-import datePickerHelper from './pb_date_picker/date_picker_helper.js'
-window.datePickerHelper = datePickerHelper
-
 // Lazy image loading
 import 'lazysizes'
 

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "5.5.1.pre.alpha3"
+  VERSION = "5.5.1-alpha4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 5.5.1.pre.alpha3
+  version: 5.5.1.pre.alpha4
 platform: ruby
 authors:
 - Power UX
@@ -591,8 +591,11 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
 - app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
@@ -662,30 +665,6 @@ files:
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
-- app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb
-- app/pb_kits/playbook/pb_date_picker/_date_picker.jsx
-- app/pb_kits/playbook/pb_date_picker/_date_picker.scss
-- app/pb_kits/playbook/pb_date_picker/date_picker.rb
-- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/example.yml
-- app/pb_kits/playbook/pb_date_picker/docs/index.js
-- app/pb_kits/playbook/pb_date_picker/index.js
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -851,7 +830,6 @@ files:
 - app/pb_kits/playbook/pb_form/form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/action_area.rb
 - app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb
-- app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/select_field.rb

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

@@ -1,36 +0,0 @@
-<%= 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

@@ -1,98 +0,0 @@
-/* @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

@@ -1,59 +0,0 @@
-@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

@@ -1,38 +0,0 @@
-# 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

@@ -1,91 +0,0 @@
-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

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

@@ -1 +0,0 @@
-<%= pb_rails("date_picker", props: { picker_id: "date-picker-default" }) %>

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

@@ -1,12 +0,0 @@
-import React from 'react'
-import { DatePicker } from '../../'
-
-const DatePickerDefault = () => (
-  <div>
-    <DatePicker
-        pickerId="date-picker-default"
-    />
-  </div>
-)
-
-export default DatePickerDefault

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

@@ -1,24 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  default_date: "07/31/2020",
-  label: "Default Date String",
-  picker_id: "date-picker-default-date1"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  default_date: (Date.today + 2).httpdate,
-  label: "Default Date Dynamic",
-  picker_id: "date-picker-default-date2"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  default_date: [(Date.today).httpdate, (Date.today + 7).httpdate],
-  label: "Default Date Range",
-  mode: "range",
-  picker_id: "date-picker-default-date3"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  default_date: "blank",
-  label: "Blank",
-  picker_id: "date-picker-default-date4"
-}) %>