playbook_ui 7.0.0 → 7.0.1.pre.alpha1

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import { CircleChart } from '../../'
-
-const dataWithLabels = [
-  {
-    name: 'Facebook',
-    value: 2498,
-  },
-  {
-    name: 'YouTube',
-    value: 2000,
-  },
-  {
-    name: 'WhatsApp',
-    value: 2000,
-  },
-  {
-    name: 'Facebook Messenger',
-    value: 1300,
-  },
-  {
-    name: 'WeChat',
-    value: 1165,
-  },
-  {
-    name: 'Instagram',
-    value: 1000,
-  },
-  {
-    name: 'Tik Tok',
-    value: 800,
-  },
-]
-
-const CircleChartWithLabels = () => (
-  <div>
-    <CircleChart
-        chartData={dataWithLabels}
-        dataLabels
-        id="with-labels-example"
-    />
-  </div>
-)
-
-export default CircleChartWithLabels

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { CircleChart } from '../../'
-
-const dataWithLegend = [{
-  name: 'Bugs',
-  value: 8,
-
-},
-{
-  name: 'Chores',
-  value: 1,
-
-},
-{
-  name: 'Stories',
-  value: 12,
-},
-]
-
-const CircleChartWithLegendKit = () => (
-  <div>
-    <CircleChart
-        chartData={dataWithLegend}
-        id="with-legend-example"
-        legend
-    />
-  </div>
-)
-
-export default CircleChartWithLegendKit

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import { CircleChart } from '../../'
-
-const dataWithTitle = [
-  {
-    name: 'Facebook',
-    value: 2498,
-  },
-  {
-    name: 'YouTube',
-    value: 2000,
-  },
-  {
-    name: 'WhatsApp',
-    value: 2000,
-  },
-  {
-    name: 'Facebook Messenger',
-    value: 1300,
-  },
-  {
-    name: 'WeChat',
-    value: 1165,
-  },
-  {
-    name: 'Instagram',
-    value: 1000,
-  },
-  {
-    name: 'Tik Tok',
-    value: 800,
-  },
-]
-
-const CircleChartWithLegendKit = () => (
-  <div>
-    <CircleChart
-        chartData={dataWithTitle}
-        id="with-title-example"
-        title="Active Users on Social Media"
-    />
-  </div>
-)
-
-export default CircleChartWithLegendKit

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

@@ -1,9 +0,0 @@
-export { default as CircleChartDefault } from './_circle_chart_default.jsx'
-export { default as CircleChartLiveData } from './_circle_chart_live_data.jsx'
-export { default as CircleChartRounded } from './_circle_chart_rounded.jsx'
-export { default as CircleChartBlock } from './_circle_chart_block.jsx'
-export { default as CircleChartColors } from './_circle_chart_colors.jsx'
-export { default as CircleChartWithLabels } from './_circle_chart_with_labels.jsx'
-export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend_kit.jsx'
-export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
-export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'

data/app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb

@@ -1,51 +0,0 @@
-<%= pb_rails("caption", props: { text: "East Coast (Default)"}) %>
-<%= pb_rails("date", props: {
-  date: DateTime.now,
-  timezone: "America/New_York"
-}) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "West Coast"}) %>
-<%= pb_rails("date", props: {
-  date: DateTime.now,
-  timezone: "America/Los_Angeles"
-}) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "Toyko, Japan"}) %>
-<%= pb_rails("date", props: {
-  date: DateTime.now,
-  timezone: "Asia/Tokyo"
-}) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "Anti-pattern example"}) %>
-
-<%= pb_rails("date", props: {
-  date: Date.today,
-  timezone: "Australia/Sydney"
-}) %>
-<%= pb_rails("body", props: { text: "Date.today ignores Timezone"}) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "DateTime respects Timezone"}) %>
-
-<%= pb_rails("date", props: {
-  date: DateTime.now,
-  timezone: "Australia/Sydney"
-}) %>
-
-<%= pb_rails("body", props: { text: "'.now' in Australia is tomorrow (if you're EST after 10am)"}) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "String Dates"}) %>
-<%= pb_rails("date", props: {
-  date: "2012-08-02T00:49:29Z",
-}) %>
-
-<%= pb_rails("body", props: { text: "Defaults to UTC, then changes due to EST Timezone."}) %>

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

@@ -1,6 +0,0 @@
-Depending on the data you send to the `date` prop you might have unexpected results due to ruby `Date` and `DateTime` classes.
-
-Don't care about timezones? Use `Date`.
-
-If you need a date that recognizes a timezone, especially when paired with the [Time kit](/kits/time), leverage `DateTime`.
-

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

@@ -1,39 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname + object.error_class,
-    data: object.data,
-    id: object.id) do %>
-      <div class="input_wrapper">
-        <%= pb_rails("text_input", props: {
-          aria: object.input_aria,
-          autocomplete: false,
-          dark: object.dark,
-          data: object.input_data,
-          disabled: object.disable_input,
-          error: object.error,
-          id: object.picker_id,
-          label: object.hide_label ? nil : object.label,
-          name: object.name,
-          placeholder: object.placeholder,
-          required: object.required,
-          type: object.type
-        }) %>
-        <% if !object.hide_icon %>
-          <div
-              class="<%= object.icon_wrapper_class %>"
-              id="cal-icon-<%= object.picker_id %>"
-          >
-            <%= pb_rails("icon", props: { 
-              classname: "cal_icon",
-              icon: "calendar-alt"
-            }) %>
-          </div>
-        <% end %>
-      </div>
-
-      <%= javascript_tag do %>
-      window.addEventListener("DOMContentLoaded", () => {
-          datePickerHelper(<%= object.date_picker_config %>)
-      })
-      <% end %>
-<% end %>

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

@@ -1,149 +0,0 @@
-/* @flow */
-
-import React, { useEffect } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
-import { Icon, TextInput } from '../'
-import datePickerHelper from './date_picker_helper.js'
-
-type DatePickerProps = {
-  allowInput?: Boolean,
-  aria?: object,
-  className?: String,
-  dark?: Boolean,
-  data?: object,
-  defaultDate?: String,
-  disableDate?: Array,
-  disableInput?: Boolean,
-  disableRange?: Array,
-  disableWeekdays?: Array,
-  error?: String,
-  format?: String,
-  hideIcon?: Boolean,
-  hideLabel?: Boolean,
-  id?: String,
-  inputAria?: object,
-  inputData?: object,
-  label?: String,
-  maxDate: String,
-  minDate: String,
-  mode?: String,
-  name: String,
-  onChange: (String) => void,
-  pickerId?: String,
-  placeholder?: String,
-  type?: String,
-  yearRange?: Array,
-}
-const DatePicker = (props: DatePickerProps) => {
-  const {
-    allowInput = false,
-    aria = {},
-    className,
-    dark = false,
-    data = {},
-    defaultDate = '',
-    disableDate = null,
-    disableInput,
-    disableRange = null,
-    disableWeekdays = null,
-    error,
-    format = 'm/d/Y',
-    hideIcon = false,
-    hideLabel = false,
-    id,
-    inputAria,
-    inputData,
-    label = 'Date Picker',
-    maxDate,
-    minDate,
-    mode = 'single',
-    name,
-    onChange = () => {},
-    pickerId,
-    placeholder,
-    type,
-    yearRange = [ 1900, 2100 ],
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_date_picker_kit'),
-    globalProps(props),
-    error ? 'error' : null,
-    className
-  )
-
-  useEffect(() => {
-    datePickerHelper({
-      allowInput: allowInput,
-      defaultDate: defaultDate,
-      disableDate: disableDate,
-      disableRange: disableRange,
-      disableWeekdays: disableWeekdays,
-      format: format,
-      hideIcon: hideIcon,
-      maxDate: maxDate,
-      minDate: minDate,
-      mode: mode,
-      onChange: onChange,
-      pickerId: pickerId,
-      yearRange: yearRange,
-    })
-  }, [])
-
-  const iconWrapperClass = () => {
-    let base = 'cal_icon_wrapper'
-    if (dark){
-      base += ' dark'
-    }
-    if (hideLabel){
-      base += ' no_label_shift'
-    }
-    if (error){
-      base += ' error'
-    }
-    return base
-  }
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      {className}
-      <div className="input_wrapper">
-        <TextInput
-            aria={inputAria}
-            autoComplete="off"
-            dark={dark}
-            data={inputData}
-            disabled={disableInput}
-            error={error}
-            id={pickerId}
-            label={hideLabel ? null : label}
-            name={name}
-            placeholder={placeholder}
-            type={type}
-        />
-        <If condition={!hideIcon}>
-          <div
-              className={iconWrapperClass()}
-              id={`cal-icon-${pickerId}`}
-          >
-            <Icon
-                className="cal_icon"
-                icon="calendar-alt"
-            />
-          </div>
-        </If>
-      </div>
-    </div>
-  )
-}
-
-export default DatePicker

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

@@ -1,33 +0,0 @@
-@import "../pb_caption/caption_mixin";
-@import "../pb_textarea/textarea_mixin";
-@import "../tokens/colors";
-@import "./sass_partials/flatpickr_styles";
-
-[class^=pb_date_picker_kit] {
-  .input_wrapper {
-    margin-bottom: $space_sm;
-    position: relative;
-    @import "./sass_partials/calendar_input_icon";
-    @import "./sass_partials/day_styles";
-    @import "./sass_partials/header_styles";
-    @import "./sass_partials/overrides";
-
-    .flatpickr-wrapper {
-      display: block;
-      .text_input.flatpickr-input {
-        text-overflow: ellipsis;
-        padding-right: $space_xl + 10 !important;
-      }
-      // Calendar Shadow and Border
-      .flatpickr-calendar {
-        box-shadow: $shadow_deeper;
-        border: 1px solid $border_light;
-      }
-      // Hide Caret
-      .flatpickr-calendar:before,
-      .flatpickr-calendar:after {
-        content: none;
-      }
-    }
-  }
-}

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

@@ -1,85 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDatePicker
-    class DatePicker
-      include Playbook::Props
-
-      partial "pb_date_picker/date_picker"
-
-      prop :allow_input, type: Playbook::Props::Boolean,
-                         default: false
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-      prop :default_date, type: Playbook::Props::String,
-                          default: ""
-      prop :disable_date, type: Playbook::Props::Array,
-                          default: []
-      prop :disable_input, type: Playbook::Props::Boolean,
-                           default: false
-      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 :hide_icon, type: Playbook::Props::Boolean,
-                       default: false
-      prop :hide_label, type: Playbook::Props::Boolean,
-                        default: false
-      prop :label, type: Playbook::Props::String,
-                   default: "Date Picker"
-      prop :input_aria, type: Playbook::Props::Hash,
-                        default: {}
-      prop :input_data, type: Playbook::Props::Hash,
-                        default: {}
-      prop :max_date, type: Playbook::Props::String
-      prop :min_date, type: Playbook::Props::String
-      prop :name, type: Playbook::Props::String
-      prop :mode, type: Playbook::Props::String,
-                  default: "single"
-      prop :picker_id, type: Playbook::Props::String,
-                       required: true
-      prop :placeholder, type: Playbook::Props::String
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
-      prop :type, type: Playbook::Props::String
-      prop :year_range, type: Playbook::Props::Array,
-                        default: [1900, 2100]
-
-      def classname
-        generate_classname("pb_date_picker_kit")
-      end
-
-      def date_picker_config
-        {
-          allowInput: allow_input,
-          defaultDate: default_date,
-          disableDate: disable_date,
-          disableRange: disable_range,
-          disableWeekdays: disable_weekdays,
-          format: format,
-          hideIcon: hide_icon,
-          maxDate: max_date,
-          minDate: min_date,
-          mode: mode,
-          pickerId: picker_id,
-          yearRange: year_range,
-        }.to_json.html_safe
-      end
-
-      def error_class
-        error ? " error" : ""
-      end
-
-      def icon_wrapper_class
-        class_string = "cal_icon_wrapper"
-        class_string += " dark" if dark
-        class_string += " no_label_shift" if hide_label
-        class_string += error_class
-        class_string
-      end
-    end
-  end
-end