playbook_ui 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756 → 12.24.0.pre.alpha.alphatestforselfhostfak720

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import { Caption, Date as FormattedDate, Title } from '../../'
-
-const DateUnstyled = (props) => {
-  return (
-    <>
-      <Caption size="xs"
-          text="Basic unstyled example"
-      />
-      <FormattedDate
-          unstyled
-          value={new Date()}
-          {...props}
-      />
-
-      <br />
-
-      <Caption size="xs"
-          text="Example with wrapping typography kit"
-      />
-      <Title size={1}>
-        <FormattedDate
-            unstyled
-            value="1995-12-25"
-            {...props}
-        />
-      </Title>
-
-      <br />
-
-      <Caption size="xs"
-          text="Example with icon + subcaption"
-      />
-      <Caption size="xs">
-        <FormattedDate
-            showDayOfWeek
-            showIcon
-            unstyled
-            value="1995-12-25"
-            {...props}
-        />
-      </Caption>
-    </>
-  )
-}
-
-export default DateUnstyled

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

@@ -1 +0,0 @@
-For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Date` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Date` kit to inherit any of our typography styles.

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

@@ -1,8 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  allow_input: true,
-  mode: "range",
-  picker_id: "date-picker-quick-pick",
-  placeholder: "mm/dd/yyyy → mm/dd/yyyy",
-  selection_type: "quickpick"
-}) %>
-

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

@@ -1,18 +0,0 @@
-import React from 'react'
-
-import DatePicker from '../_date_picker'
-
-const DatePickerQuickPick = (props) => (
-  <div>
-    <DatePicker
-        allowInput
-        mode="range"
-        pickerId="date-picker-quick-pick"
-        placeholder="mm/dd/yyyy → mm/dd/yyyy"
-        selectionType="quickpick"
-        {...props}
-    />
-  </div>
-)
-
-export default DatePickerQuickPick

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -1,164 +0,0 @@
-import moment from 'moment'
-
-type FpTypes = {
-  setDate: (arg0: any, arg1: boolean) => void,
-  config: { [key: string]: string },
-  clear: (arg0: boolean, arg1: boolean) => void,
-  close: () => void,
-  calendarContainer?: {
-    classList: { add: (arg0: string) => void };
-    prepend: (arg0: HTMLDivElement) => void;
-    append: (arg0: HTMLDivElement) => void;
-  },
-  loadedPlugins: string[],
-};
-
-type pluginDataType = {
-  ranges: { [key: string]: Date[] },
-  rangesNav: HTMLUListElement,
-  rangesButtons: [] | any,
-}
-
-let activeLabel = ""
-
-const quickPickPlugin = () => {
-  return function (fp: FpTypes & any): any {
-    // variable that holds the ranges available
-    const ranges = {
-      'Today': [new Date(), new Date()],
-      'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
-      'This week': [moment().startOf('week').toDate(), moment().endOf('week').toDate()],
-      'This month': [moment().startOf('month').toDate(), new Date()],
-      'This quarter': [moment().startOf('quarter').toDate(), new Date()],
-      'This year': [moment().startOf('year').toDate(), new Date()],
-      'Last week': [
-        moment().subtract(1, 'week').startOf('week').toDate(),
-        moment().subtract(1, 'week').endOf('week').toDate()
-      ],
-      'Last month': [
-        moment().subtract(1, 'month').startOf('month').toDate(),
-        moment().subtract(1, 'month').endOf('month').toDate()
-      ],
-      'Last quarter': [
-        moment().subtract(1, 'quarter').startOf('quarter').toDate(),
-        moment().subtract(1, 'quarter').endOf('quarter').toDate()
-      ],
-      'Last year': [
-        moment().subtract(1, 'year').startOf('year').toDate(),
-        moment().subtract(1, 'year').endOf('year').toDate()
-      ]
-    }
-    //creating the ul element for the nav dropdown and giving it classnames
-    const rangesNav = document.createElement('ul');
-
-    // creating the pluginData object that will hold the properties of this plugin
-    const pluginData: pluginDataType = {
-      ranges: ranges,
-      rangesNav: rangesNav,
-      rangesButtons: [],
-    };
-
-    /**
-   *    @param {string} label
-   *    @returns HTML Element
-   */
-
-    //function for creating the range buttons in the nav
-    const addRangeButton = (label: string) => {
-
-      // creating new elements to mimick selectable card component
-      const div2 = document.createElement('div');
-      div2.className = "nav-item-link"
-      div2.innerHTML = label;
-
-      pluginData.rangesButtons[label] = div2;
-
-      // create li elements inside the dropdown
-      const item = document.createElement('li');
-      item.className = "nav-item";
-
-      // append those nav items to the li items
-      item.appendChild(pluginData.rangesButtons[label]);
-
-      // append the li item to the ul rangeNav prop
-      pluginData.rangesNav.appendChild(item);
-
-      // return the ranges buton prop
-      return pluginData.rangesButtons[label];
-    };
-
-    const selectActiveRangeButton = (selectedDates: Array<string>) => {
-      const current = pluginData.rangesNav.querySelector('.active');
-
-      if (current) {
-        current.classList.remove('active');
-      }
-      /** conditional statment to extract start and end dates from selectedDates,
-      *   then loop through ranges prop in pluginData
-      *   and check if chosen dates equal to a date in the ranges prop
-      *   if they are equal, add the active class
-      */
-      if (selectedDates.length > 0 && activeLabel) {
-        // const selected = pluginData.rangesNav.querySelectorAll(".nav-item-link")
-        // selected.forEach(el => {
-        //   if (el.innerHTML === activeLabel)
-        //   el.classList.add('active')
-        //   return
-        // })
-
-        pluginData.rangesButtons[activeLabel].classList.add('active');
-      }
-    }
-
-
-    return {
-      // onReady is a hook from flatpickr that runs when calender is in a ready state
-      onReady(selectedDates: Array<string>) {
-        // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
-        for (const [label, range] of Object.entries(pluginData.ranges)) {
-          addRangeButton(label).addEventListener('click', function () {
-
-            const start = moment(range[0]).toDate();
-            const end = moment(range[1]).toDate();
-
-            if (!start) {
-              fp.clear();
-            }
-            else {
-              activeLabel = label
-              fp.setDate([start, end], true);
-              fp.close();
-            }
-          });
-        }
-        // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
-        if (pluginData.rangesNav.children.length > 0) {
-
-          fp.calendarContainer.prepend(pluginData.rangesNav);
-          pluginData.rangesNav.classList.add('quick-pick-ul')
-          fp.calendarContainer.classList.add('quick-pick-drop-down');
-
-          /**
-           *
-           * @param {Array} selectedDates
-           */
-          // function to give the active button the active class
-          selectActiveRangeButton(selectedDates);
-        }
-      },
-      onValueUpdate(selectedDates: Array<string>) {
-        debugger
-        selectActiveRangeButton(selectedDates);
-      },
-
-      onClose(selectedDates: Array<string>) {
-        // set the input value to the selected dates when the dropdown is closed
-        if (selectedDates.length < 2 && selectedDates.length > 0) {
-          fp.input.placeholder = fp.formatDate(this.selectedDates[0], fp.config.dateFormat);
-        }
-      }
-    };
-  };
-}
-
-export default quickPickPlugin;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss

@@ -1,75 +0,0 @@
-@import "../../tokens/animation-curves";
-@import "../../tokens/colors";
-@import "../../tokens/typography";
-@import "../../tokens/titles";
-@import "../../tokens/spacing";
-
-$pb_card_border_width: 1px;
-$pb_card_border_radius: $border_rad_heavier;
-
-// used to display dropdown on the left of the calender
-.quick-pick-drop-down {
-  width: auto;
-  display: grid;
-}
-
-.quick-pick-ul {
-  padding: $space_xs 0px;
-  margin: 0;
-  list-style: none;
-}
-
-.nav-item {
-  list-style: none;
-  border-radius: 6px;
-  border-bottom: 0;
-  margin: $space_xs $space_sm;
-}
-
-.nav-item-link {
-  text-decoration: none;
-  border-width: $pb_card_border_width;
-  border-style: solid;
-  border-color: $border_light;
-  border-radius: $pb_card_border_radius;
-  padding: $space_xs 14px;
-  transition-property: color, background-color;
-  transition-duration: 0.15s;
-  transition-timing-function: $bezier;
-  line-height: 1.4;
-  color: $charcoal;
-  font-size: $font_default;
-  font-weight: $regular;
-  &.active {
-    border-width: 2px;
-    border-color: $primary;
-  }
-  @media (hover:hover) {
-    &:hover {
-      cursor: pointer;
-      box-shadow: $shadow-deep;
-      border-color: $slate;
-    }
-  }
-}
-
-// Hide the calendar
-.quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
-  display: none;
-}
-
-@media only screen and (max-width: 767px) {
-  .quick-pick-ul {
-    padding: $space_xs $space_xs;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .nav-item {
-    margin: $space_xxs $space_xs;
-  }
-
-  .nav-item-link {
-    padding: $space_xs $space_xxs;
-  }
-}

data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb

@@ -1,37 +0,0 @@
-<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
-
-<%= pb_rails("time", props: {
-  show_icon: true,
-  show_timezone: true,
-  time: DateTime.now,
-  timezone: "America/New_York",
-  unstyled: true
-}) %>
-
-<br />
-
-<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
-
-<%= pb_rails("title", props: { size: 1 }) do %>
-  <%= pb_rails("time", props: {
-    show_icon: true,
-    show_timezone: true,
-    time: DateTime.now,
-    timezone: "America/New_York",
-    unstyled: true
-  }) %>
-<% end %>
-
-<br />
-
-<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
-
-<%= pb_rails("caption", props: { size: "xs" }) do %>
-  <%= pb_rails("time", props: {
-    show_icon: true,
-    show_timezone: true,
-    time: DateTime.now,
-    timezone: "America/New_York",
-    unstyled: true
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import Time from '../_time'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
-
-const TimeUnstyled = (props) => {
-  return (
-    <>
-      <Caption size="xs"
-          text="Basic unstyled example"
-      />
-      <Time
-          date={new Date()}
-          showIcon
-          showTimezone
-          timeZone="America/New_York"
-          unstyled
-          {...props}
-      />
-
-      <br />
-
-      <Caption size="xs"
-          text="Example with wrapping typography kit"
-      />
-      <Title size={1}>
-        <Time
-            date={new Date()}
-            showIcon
-            showTimezone
-            timeZone="America/New_York"
-            unstyled
-            {...props}
-        />
-      </Title>
-
-      <br />
-
-      <Caption size="xs"
-          text="Example with icon + subcaption"
-      />
-      <Caption size="xs">
-        <Time
-            date={new Date()}
-            showIcon
-            showTimezone
-            timeZone="America/New_York"
-            unstyled
-            {...props}
-        />
-      </Caption>
-
-      <br />
-    </>
-  )
-}
-
-export default TimeUnstyled

data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md

@@ -1 +0,0 @@
-For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Time` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Time` kit to inherit any of our typography styles.