playbook_ui 12.17.0 → 12.18.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown617

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

@@ -0,0 +1,161 @@
+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
+ */
+
+  //funciton 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) {
+      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 listiner 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 git 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 butto the active class
+          selectActiveRangeButton(selectedDates);
+        }
+
+      },
+      onValueUpdate(selectedDates: Array<string>) {
+        selectActiveRangeButton(selectedDates);
+      },
+
+      onClose(selectedDates: Array<string>) {
+        // set the input value to the selected dates when the dropdown is closed
+        if (!selectedDates[1]) {
+          fp.input.value = fp.formatDate(this.selectedDates[0], fp.config.dateFormat) + ' → ' + fp.formatDate(this.selectedDates[1], fp.config.dateFormat);
+        }
+      }
+    };
+  };
+}
+
+export default quickPickPlugin;

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

@@ -1,6 +1,7 @@
+@import "../../tokens/colors";
 // Calendar Icon Styles
 .cal_icon_wrapper {
-  pointer-events: none;
+  cursor: pointer;
   position: absolute;
   top: $space_md + 2;
   right: 0;
@@ -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_api.html.erb

@@ -15,7 +15,6 @@
               <th>Props</th>
               <th>Type</th>
               <th>Values</th>
-              <th>Default</th>
             </tr>
           </thead>
           <tbody>
@@ -35,11 +34,34 @@
                     <%= pb_rails("body", props: {
                       classname: "kearning"
                     }) do %>
-                        <%= value[:type].downcase %>
+                        <% if key =~ /^padding|^margin/ %>
+                            <%= "array" %>
+                        <% else %>
+                          <%= value[:type].to_s.downcase %>
+                        <% end %>
                     <% end %>
                   <% end %>
                 </td>
                 <td>
+                  <% if key =~ /^padding|^margin/ %>
+                  <% padding_margin_values.each do |item| %>
+                      <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning"
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                  <% else %>
                   <% if value[:values].present? %>
                     <% value[:values].each do |item| %>
                       <% if item != nil %>
@@ -61,22 +83,6 @@
                       <% end %>
                     <% end %>
                   <% end %>
-                </td>
-                <td>
-                  <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
-                    <%= pb_rails("card", props: {
-                            classname: "card",
-                            padding: "xxs",
-                            background: "light",
-                            border_none: true,
-                            border_radius: "sm"
-                      })  do %>
-                        <%= pb_rails("body", props: {
-                          classname: "kearning"
-                        }) do %>
-                            <%= value[:default] %>
-                        <% end %>
-                      <% end %>
                   <% end %>
                 </td>
               </tr>
@@ -110,7 +116,6 @@
               <th>Props</th>
               <th>Type</th>
               <th>Values</th>
-              <th>Default</th>
             </tr>
           </thead>
           <tbody>
@@ -130,11 +135,34 @@
                     <%= pb_rails("body", props: {
                       classname: "kearning"
                     }) do %>
-                        <%= value[:type].downcase %>
+                        <% if key =~ /^padding|^margin/ %>
+                            <%= "array" %>
+                        <% else %>
+                          <%= value[:type].to_s.downcase %>
+                        <% end %>
                     <% end %>
                   <% end %>
                 </td>
                 <td>
+                  <% if key =~ /^padding|^margin/ %>
+                  <% padding_margin_values.each do |item| %>
+                      <%= pb_rails("card", props: {
+                          flex_direction: "row",
+                          classname: "card",
+                          padding: "xxs",
+                          background: "light",
+                          border_none: true,
+                          border_radius: "sm",
+                          margin: "xxs"
+                        })  do %>
+                          <%= pb_rails("body", props: {
+                              classname: "kearning"
+                          }) do %>
+                            <%= item %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                  <% else %>
                   <% if value[:values].present? %>
                     <% value[:values].each do |item| %>
                       <% if item != nil %>
@@ -156,22 +184,6 @@
                       <% end %>
                     <% end %>
                   <% end %>
-                </td>
-                <td>
-                  <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
-                    <%= pb_rails("card", props: {
-                            classname: "card",
-                            padding: "xxs",
-                            background: "light",
-                            border_none: true,
-                            border_radius: "sm"
-                      })  do %>
-                        <%= pb_rails("body", props: {
-                          classname: "kearning"
-                        }) do %>
-                            <%= value[:default] %>
-                        <% end %>
-                      <% end %>
                   <% end %>
                 </td>
               </tr>

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

@@ -13,6 +13,10 @@ module Playbook
         local
       end
 
+      def padding_margin_values
+        %w[none xxs xs sm md lg xl]
+      end
+
       def local_prop_data
         local_props = {}
 
@@ -27,22 +31,106 @@ module Playbook
       end
 
       def kit_global_props
-        global = []
+        global_props = {}
+        global_prop_names = []
+        global_prop_values = {}
+        global_props_with_values = {}
+        global_props_without_values = []
+        parent_child_object = {}
+        updated_global_props_with_values = {}
+
+        # extracts the modules from kit_base.rb, which is where we import all the global props that we inject into every rails kit
+        pb_module = Playbook::KitBase.included_modules.select { |mod| mod.to_s.include?("Playbook::") }
+
+        # loops through the kits and extracts each prop with its values and pushes that to the global_props hash
         kit_props.each do |key, value|
-          value.kit == Playbook::KitBase && global.push({ key: key, value: value })
+          value.kit == Playbook::KitBase && global_props[key.to_sym] = value
+        end
+
+        # loops through the global_props and extracts the name of each prop and pushes that to global_prop_names array
+        global_props.each do |name, _values|
+          global_prop_names.push(name)
+        end
+
+        # Loops through each module in pb_module and searches for methods that end in _values, as these methods hold the values for each prop
+        # we then save the values and type and push that to the values hash as a key value pair
+        pb_module.each do |mod|
+          mod.instance_methods.each do |method_name|
+            next unless method_name.to_s.end_with?("_values")
+
+            value = send(method_name)
+            type = value.class
+            global_prop_values[method_name.to_s.chomp("_values").to_sym] = { "type": type, "values": value }
+          end
+        end
+
+        # loops through the global_prop_names array
+        # then loops through the global_prop_values hash and extracts the values that have the same name found in global_prop_names
+        # this loop helps ensure only global props values are actually extracted, as there could be other methods that end in _values in the modules we are iterating over
+        # these verified global props with values are then pushed to the global_props_with_values hash
+        global_prop_names.each do |name, _prop|
+          global_prop_values.each do |key, value|
+            global_props_with_values[key] = value if key == name
+          end
+        end
+
+        # now we grab all the global_prop_names that do not have a matching key in global_prop_values.
+        # This gives us any global prop that did not have any predefined value. like classname and dark
+        global_props_without_values = global_prop_names - global_prop_values.keys
+
+        # Loops through each module in pb_module and searches for methods that end in _options, as these methods hold all the props in the module
+        # save the prop names prop values and  and parent module name to parent_child_object hash
+        # this is a comprehensive list of all parent module and children props for edge cases like spacing.rb, that is not named after the props it represents
+        pb_module.each do |mod|
+          mod.instance_methods.each do |method_name|
+            next unless method_name.to_s.end_with?("_options")
+
+            props = send(method_name)
+            parent = mod.to_s.split("::").last
+            values = send("#{parent.underscore}_values")
+            parent_child_object[parent] = { "props": props, "values": values }
+          end
+        end
+
+        # loops through each object in parent_child_object and extracts its children (props and values)
+        # loops through each child and extracts the individual props
+        # Checks if the props match any of the props in global_props_without_values
+        # if it does, then we push that prop to global_props_with_values hash
+        # This extracts the props in the spacing.rb file and any file that is not named after the props it represents
+        parent_child_object.each do |_parent, children|
+          children.each do |_child, props|
+            props.each do |prop, _value|
+              type = children[:values].class
+              values = children[:values]
+              global_props_with_values[prop] = { "type": type, "values": values } if global_props_without_values.include?(prop)
+            end
+          end
+        end
+
+        # loop through the global_props hash and the global_props_with_values hash.
+        # extract the props from global_props that are not found in global_props_with_values into updated_global_props_with_values
+        # This is the last piece that grabs the global props that did not have values at all, like classname and dark, and adds it to our hash
+        global_props.each do |prop, value|
+          unless global_props_with_values.include?(prop)
+            type = value.class.to_s.split("::").last
+            updated_global_props_with_values[prop] = { "type": type }
+          end
         end
-        global
+
+        # Merge updated_global_props_with_values into global_props_with_values
+        # global_props_with_values will now hold all the global props thier values and type
+        global_props_with_values.merge!(updated_global_props_with_values)
+
+        global_props_with_values
       end
 
       def global_prop_data
         global_props = {}
 
-        kit_global_props.each do |key, _value|
-          name = key[:value].instance_variable_get(:@name)
-          type = key[:value].class.to_s.split("::").last
-          default = key[:value].instance_variable_get(:@default)
-          values = key[:value].instance_variable_get(:@values)
-          global_props[name.to_sym] = { "type": type, "default": default, "values": values }
+        kit_global_props.each do |key, value|
+          type = value[:type]
+          values = value[:values]
+          global_props[key] = { "type": type, "values": values }
         end
         global_props
       end

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -10,7 +10,7 @@
 
   <% if show_code %>
     <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
-      <%= markdown(description) %>
+      <%= render_markdown(description) %>
     </div>
     <div id="code-wrapper">
       <div class="pb--codeControls">

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

@@ -23,7 +23,7 @@ module Playbook
       end
 
       def description
-        @description ||= read_kit_file("_#{example_key}.md")
+        @description ||= read_kit_file("docs", "_#{example_key}.md")
       end
 
       def highlighter
@@ -33,11 +33,15 @@ module Playbook
       def source
         @source ||= begin
           extension = type == "react" ? "jsx" : "html.erb"
-          stringified_code = read_kit_file("_#{example_key}.#{extension}")
+          stringified_code = read_kit_file("docs", "_#{example_key}.#{extension}")
           sanitize_code(stringified_code)
         end
       end
 
+      def tsx_source
+        read_kit_file("", "_#{example_key}.tsx")
+      end
+
     private
 
       def sanitize_code(stringified_code)
@@ -53,11 +57,11 @@ module Playbook
         elsif type == "rails" && dark
           stringified_code = stringified_code.gsub("props: {", "props: {\n    dark: true,")
         end
-        stringified_code
+        stringified_code.gsub(" {...props}", "")
       end
 
-      def read_kit_file(*args)
-        path = ::Playbook.kit_path(kit, "docs", *args)
+      def read_kit_file(folder, *args)
+        path = ::Playbook.kit_path(kit, folder, *args)
         path.exist? ? path.read : ""
       end
     end

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -47,12 +47,15 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
   } = props
 
   const [activePhoto, setActivePhoto] = useState(initialPhoto)
+
   useEffect(() => {
     onChange(activePhoto)
   },[activePhoto])
 
   useEffect(() => {
+    currentPhotoIndex !== undefined && currentPhotoIndex !== null && (
     setActivePhoto(currentPhotoIndex)
+    )
   },[currentPhotoIndex])
 
   const ariaProps = buildAriaProps(aria)

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -10,14 +10,17 @@ const LightboxCompoundComponent = (props) => {
     'https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80',
     'https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,',
   ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
   const [showLightbox, toggleShowLightbox] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photo) => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photo)
   }
 
   const exampleStyles = {
@@ -31,6 +34,7 @@ const LightboxCompoundComponent = (props) => {
         {showLightbox ? (
           <Lightbox
               description='Description Content Goes Here.'
+              initialPhoto={selectedPhoto}
               onClose={handleCloseLightbox}
               photos={photos}
               title='Windows, Sidings, & Gutters'

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -118,4 +118,4 @@ const LightboxCurrentPhoto = (props) => {
   )
 }
 
-export default LightboxCurrentPhoto
+export default LightboxCurrentPhoto

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx

@@ -10,14 +10,17 @@ const LightboxCustomHeader = (props) => {
     "https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80",
     "https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,",
   ];
+  const [selectedPhoto, setSelectedPhoto] = useState(0);
   const [showLightbox, toggleShowLightbox] = useState(false);
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox);
+    setSelectedPhoto(null);
   };
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photo) => {
     toggleShowLightbox(!showLightbox);
+    setSelectedPhoto(photo);
   };
 
   const exampleStyles = {
@@ -52,6 +55,7 @@ const LightboxCustomHeader = (props) => {
       {showLightbox ? (
           <Lightbox
               description={customDescription}
+              initialPhoto={selectedPhoto}
               navRight="All Photos"
               onClickRight={()=> alert("Clicked!")}
               onClose={handleCloseLightbox}

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -8,14 +8,17 @@ const LightboxDefault = (props) => {
   const photos = [
     'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
   ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
   const [showLightbox, toggleShowLightbox] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photoIndex) => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photoIndex)
   }
 
   return (
@@ -24,6 +27,7 @@ const LightboxDefault = (props) => {
         {showLightbox ? (
           <Lightbox
               icon="times"
+              initialPhoto={selectedPhoto}
               onClose={handleCloseLightbox}
               photos={photos}
               {...props}

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md

@@ -1 +1 @@
-Lightbox contains several props: `photos` (an array of urls), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).
+Lightbox contains several props: `photos` (an array of urls), `initialPhoto` (a number), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).