playbook_ui 12.23.0 → 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown752

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

@@ -0,0 +1,168 @@
+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,
+}
+
+const quickPickPlugin = () => {
+  return function (fp: FpTypes & any): any {
+
+    let activeLabel = ""
+
+  // 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
+          debugger
+          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/_calendar_input_icon.scss

@@ -1,3 +1,4 @@
+@import "../../tokens/colors";
 // Calendar Icon Styles
 .cal_icon_wrapper {
   pointer-events: none;
@@ -13,8 +14,8 @@
   padding-left: $space_sm - 1;
   color: $text_lt_light;
   @media (hover: hover) {
-    &:hover {
-      cursor: pointer;
+    &:hover{
+      background-color: rgba($focus_input_light,$opacity_5);
     }
   }
   &.dark {

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

@@ -0,0 +1,75 @@
+@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_docs/kit_example.html.erb

@@ -7,7 +7,12 @@
     <%= example %>
     <br>
   </div>
-
+  
+  <% if (action_name == "kit_show_swift") %>
+    <div class="pb--kit-example-markdown pt_none <%= dark ? "dark" : "" %>">
+      <%= render_markdown(description) %>
+    </div>
+  <% end %>
   <% if show_code %>
     <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
       <%= render_markdown(description) %>

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -5,13 +5,11 @@
 module Playbook
   module PbDocs
     class KitExample < Playbook::KitBase
-      include Playbook::Markdown::Helper
-
       prop :kit, type: Playbook::Props::String, required: true
       prop :example_title, type: Playbook::Props::String, required: true
       prop :example_key, type: Playbook::Props::String, required: true
       prop :show_code, type: Playbook::Props::Boolean, default: true
-      prop :type, type: Playbook::Props::Enum, values: %w[rails react], default: "rails"
+      prop :type, type: Playbook::Props::Enum, values: %w[rails react swift], default: "rails"
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       def example
@@ -19,6 +17,9 @@ module Playbook
           render inline: source
         elsif type == "react"
           react_component example_key.camelize, { dark: dark }
+        elsif type == "swift"
+          ## render the markdown file
+          render inline: source
         end
       end
 
@@ -32,7 +33,11 @@ module Playbook
 
       def source
         @source ||= begin
-          extension = type == "react" ? "jsx" : "html.erb"
+          extension = if type == "rails"
+                        "html.erb"
+                      else
+                        type == "swift" ? "swift" : "jsx"
+                      end
           stringified_code = read_kit_file("docs", "_#{example_key}.#{extension}")
           sanitize_code(stringified_code)
         end
@@ -42,6 +47,10 @@ module Playbook
         read_kit_file("", "_#{example_key}.tsx")
       end
 
+      def swift_source
+        read_kit_file("", "_#{example_key}.swift")
+      end
+
     private
 
       def sanitize_code(stringified_code)

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -87,7 +87,7 @@ const NavItem = (props: NavItemProps) => {
         <span className="pb_nav_list_item_text">
           {text || children}
         </span>
-        
+
         {iconRight &&
           <div
             className="pb_nav_list_item_icon_section"

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -44,7 +44,7 @@
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
-       letter-spacing: normal;
+      letter-spacing: normal;
     }
   }
 }

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -12,6 +12,7 @@
   &[class*=_2] {
     @include pb_title_2;
     @include title_colors;
+    @include pb_title_bold;
   }
 
   &[class*=_3] {

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb

@@ -1 +1,2 @@
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -1,15 +1,20 @@
-import React from 'react'
+import React from "react"
 
-import Title from '../_title'
+import Title from "../_title"
 
 const TitleLightWeight = (props) => {
   return (
     <div>
-      <Title
-          bold={false}
+      <Title bold={false}
           size={1}
-          tag="h1"
-          text="Title 1"
+          tag='h1'
+          text='Title 1'
+          {...props}
+      />
+      <Title bold={false}
+          size={2}
+          tag='h2'
+          text='Title 2'
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -1,4 +1,4 @@
 ##### Prop
-Title `size 1` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
-Title `size 2` & `size 3` uses a light font weight by default and will not accept a bold font weight.
+Title `size 1` & `size 2` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
+Title `size 3` uses a light font weight by default and will not accept a bold font weight.
 Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.

data/app/pb_kits/playbook/tokens/_screen_sizes.scss

@@ -38,6 +38,25 @@ $breakpoints_grid: (
     )
 );
 
+$breakpoints_max_only: (
+    xl: (
+        max: $screen-xl-max
+    ),
+    lg: (
+        max: $screen-lg-max
+    ),
+    md: (
+        max: $screen-md-max
+    ),
+    sm: (
+        max: $screen-sm-max
+    ),
+    xs: (
+        max: $screen-xs-max,
+    )
+);
+
+
 @function breakpoint($breakpoint_name) {
   @return map-get($breakpoints, $breakpoint_name);
 }

data/app/pb_kits/playbook/utilities/_spacing.scss

@@ -7,7 +7,10 @@ $space_classes: (
 	md: $space_md,
 	lg: $space_lg,
 	xl: $space_xl,
-	none: 0
+	none: 0,
+  auto: auto,
+  initial: initial,
+  inherit: inherit
 );
 
 $positions: (
@@ -41,3 +44,26 @@ $positions: (
 		}
 	}
 }
+
+@each $size, $size_value in $breakpoints_max_only {
+  @each $position_name, $position in $positions {
+    @each $space_name, $space in $space_classes {
+        $min_size: map-get($size_value, "min");
+        $max_size: map-get($size_value, "max");
+        .#{$position_name}_#{$size}_#{$space_name} {
+          @if type-of($position)=="list" {
+            @each $coordinate in $position {
+              @include break_at( $max_size) {
+              #{$coordinate}: #{$space} !important;
+              }
+            }
+          }
+          @else {
+            @include break_at( $max_size) {
+              #{$position}: #{$space} !important;
+            }
+          }
+        }
+    }
+  }
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -22,7 +22,7 @@ type AlignItems = {
 type AlignSelf = {
   alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
 }
-type AllSizes = None | Sizes
+type AllSizes = None | Sizes | "auto" | "initial" | "inherit"
 
 type BorderRadius = {
   borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
@@ -153,22 +153,67 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     padding,
   }: Margin & Padding) => {
     let css = ''
-    css += marginRight ? `mr_${marginRight} ` : ''
-    css += marginLeft ? `ml_${marginLeft} ` : ''
-    css += marginTop ? `mt_${marginTop} ` : ''
-    css += marginBottom ? `mb_${marginBottom} ` : ''
-    css += marginX ? `mx_${marginX} ` : ''
-    css += marginY ? `my_${marginY} ` : ''
-    css += margin ? `m_${margin} ` : ''
-    css += paddingRight ? `pr_${paddingRight} ` : ''
-    css += paddingLeft ? `pl_${paddingLeft} ` : ''
-    css += paddingTop ? `pt_${paddingTop} ` : ''
-    css += paddingBottom ? `pb_${paddingBottom} ` : ''
-    css += paddingX ? `px_${paddingX} ` : ''
-    css += paddingY ? `py_${paddingY} ` : ''
-    css += padding ? `p_${padding} ` : ''
-    return css
+    const spacingProps = {
+      marginRight,
+      marginLeft,
+      marginTop,
+      marginBottom,
+      marginX,
+      marginY,
+      margin,
+      paddingRight,
+      paddingLeft,
+      paddingTop,
+      paddingBottom,
+      paddingX,
+      paddingY,
+      padding,
+    };
+
+    function handleObjectValue(properties: Margin | Padding, prefix: string) {
+      let classResult = '';
+
+      Object.entries(properties).forEach(([key, value]) => {
+        classResult += `${prefix}_${key}_${value} `;
+      });
+
+      return classResult;
+    }
+
+    function getPrefix(key: string) {
+      const prefixes: Record<string, string> = {
+        marginRight: 'mr',
+        marginLeft: 'ml',
+        marginTop: 'mt',
+        marginBottom: 'mb',
+        marginX: 'mx',
+        marginY: 'my',
+        margin: 'm',
+        paddingRight: 'pr',
+        paddingLeft: 'pl',
+        paddingTop: 'pt',
+        paddingBottom: 'pb',
+        paddingX: 'px',
+        paddingY: 'py',
+        padding: 'p',
+      };
+
+      return prefixes[key];
+    }
+
+    Object.entries(spacingProps).forEach(([key, value]) => {
+      if (value) {
+        if (typeof value === 'object') {
+          css += handleObjectValue(value, getPrefix(key));
+        } else {
+          const prefix = getPrefix(key);
+          css += `${prefix}_${value} `;
+        }
+      }
+    });
+    return css.trim();
   },
+
   darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
   numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
     let css = ''