playbook_ui 11.4.0 → 11.5.0.pre.alpha.pre.rubocop

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 638051af443b06b03b9de8a9092d21f8ce06f3806e60bd43cec8463ce428a69a
-  data.tar.gz: c43d207810694a318a13280bb917b8a295cb44310e05433a262639bee6b8778e
+  metadata.gz: b473c5e8dd9d01f5b4e75db5793f628b8d55f9c18ae639cebf8ee32e9d3b2121
+  data.tar.gz: f6d6ce71ebb98cddfa83dbae696c74daebe4a2d649b1346a2f6b27de36eb90e6
 SHA512:
-  metadata.gz: 80aad4d2179d46bc3332b631a1f4e4e90640d61b3cbd3bfa1894cd8e5710f20ecea86f8d71cada0811e9ac434a99c70cd31a7622c33df2434d82370b5f0a9157
-  data.tar.gz: 8a8562a4d3efced667089ca24567758a341255de55f885d1068c7722b301886d427f07943a03ae391d47a1b1d5b4ce279d7bb80a42d7e53042ed9b22ab71d4dc
+  metadata.gz: 6b7db376eaa03ebc0141d1f639f206e6950230836ddf01097f33c97f2aa725aea662070ee9c27599741c4ebf7faf14a8d1a06aaefa6b7263eebbc2b584e4df6e
+  data.tar.gz: e2bd227f75e56cec7a26049e106663e6cb18ff68fd14cc5157eb5da36554d09417a433f3ca25e56f132730ac41e2d5104dc530a28e6f2d8f42807428b71d7fa9

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -11,14 +11,12 @@ const htmlType = 'submit',
 
 test('passes type, text, and value props to button', () => {
   render(
-    <>
-      <Button
-          data={{ testid: 'primary-test' }}
-          htmlType={htmlType}
-          text={text}
-          value={value}
-      />
-    </>
+    <Button
+        data={{ testid: 'primary-test' }}
+        htmlType={htmlType}
+        text={text}
+        value={value}
+    />
   )
 
   const kit = screen.getByTestId('primary-test')

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -12,7 +12,7 @@ import Title from "../pb_title/_title";
 
 type PbDateProps = {
   alignment?: "left" | "center" | "right";
-  aria: { [key: string]: string };
+  aria?: { [key: string]: string };
   className?: string;
   data?: { [key: string]: string };
   id?: string;

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

@@ -42,12 +42,17 @@ type DatePickerProps = {
   pickerId?: String,
   placeholder?: String,
   plugins: Boolean,
+  position: String,
+  positionElement?: HTMLElement | null,
+  scrollContainer?: String,
   selectionType?: "month" | "week",
   showTimezone?: Boolean,
+  staticPosition: Boolean,
   timeFormat?: String,
   type?: String,
   yearRange?: Array,
 }
+
 const DatePicker = (props: DatePickerProps) => {
   if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
 
@@ -82,8 +87,12 @@ const DatePicker = (props: DatePickerProps) => {
     pickerId,
     placeholder = 'Select Date',
     plugins = false,
+    position,
+    positionElement,
+    scrollContainer,
     selectionType = '',
     showTimezone = false,
+    staticPosition = true,
     yearRange = [ 1900, 2100 ],
   } = props
 
@@ -113,10 +122,13 @@ const DatePicker = (props: DatePickerProps) => {
       onChange,
       pickerId,
       plugins,
+      position,
+      positionElement,
       selectionType,
       showTimezone,
+      staticPosition,
       yearRange,
-    })
+    }, scrollContainer)
   })
 
   const iconWrapperClass = () => {

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

@@ -12,34 +12,39 @@
   .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;
-      }
     }
+
+    @import "./sass_partials/calendar_input_icon";
   }
 
-  &:focus,:focus-within{
+  &:focus, :focus-within {
     div.cal_icon_wrapper, input.text_input{
       @include transition_default;
       border-color: $primary;
     }
   }
 }
+
+.flatpickr-calendar {
+  @import "./sass_partials/day_styles";
+  @import "./sass_partials/header_styles";
+  @import "./sass_partials/overrides";
+
+  .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
+  &:before,
+  &:after {
+    content: none;
+  }
+}

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

@@ -61,7 +61,7 @@
 
   <%= javascript_tag do %>
     window.addEventListener("DOMContentLoaded", () => {
-        datePickerHelper(<%= object.date_picker_config %>)
+        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
     })
   <% end %>
 <% end %>

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

@@ -46,11 +46,16 @@ module Playbook
       prop :plugins, type: Playbook::Props::Boolean,
                      default: false,
                      deprecated: true
+      prop :position, type: Playbook::Props::String
+      prop :position_element, type: Playbook::Props::String
+      prop :scroll_container, type: Playbook::Props::String
       prop :selection_type, type: Playbook::Props::Enum,
                             values: %w[week month none],
                             default: "none"
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: false
+      prop :static_position, type: Playbook::Props::Boolean,
+                             default: true
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :year_range, type: Playbook::Props::Array,
@@ -76,9 +81,12 @@ module Playbook
           mode: mode,
           pickerId: picker_id,
           plugins: plugins,
+          position: position,
+          positionElement: position_element,
           required: required,
           selectionType: selection_type,
           showTimezone: show_timezone,
+          staticPosition: static_position,
           yearRange: year_range,
         }.to_json.html_safe
       end

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -3,7 +3,11 @@ import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
 
-const datePickerHelper = (config) => {
+const getPositionElement = (element) => {
+  return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
+}
+
+const datePickerHelper = (config, scrollContainer) => {
   const {
     allowInput,
     defaultDate,
@@ -18,9 +22,12 @@ const datePickerHelper = (config) => {
     onChange = () => {},
     pickerId,
     plugins,
+    position = "auto",
+    positionElement,
     required,
     selectionType,
     showTimezone,
+    staticPosition = true,
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
     yearRange,
@@ -117,19 +124,23 @@ const datePickerHelper = (config) => {
     onOpen: [() => {
       calendarResizer()
       window.addEventListener('resize', calendarResizer)
+      if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
     }],
     onClose: [() => {
       window.removeEventListener('resize', calendarResizer)
+      if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer)
     }],
     onChange: [(selectedDates, dateStr) => {
-      onChange(dateStr, selectedDates) 
+      onChange(dateStr, selectedDates)
     }],
     onYearChange: [() => {
       yearChangeHook()
     }],
     plugins: setPlugins(),
+    position,
+    positionElement: getPositionElement(positionElement),
     prevArrow: '<i class="far fa-angle-left"></i>',
-    static: true,
+    static: staticPosition,
   })
 
   // ===========================================================
@@ -140,6 +151,17 @@ const datePickerHelper = (config) => {
   const picker = document.querySelector(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`
 
+  // Attach / detach to / from scroll events
+  const scrollEvent = () => {
+    picker._positionCalendar()
+  }
+  function attachToScroll(scrollParent) {
+    document.querySelectorAll(scrollParent)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
+  }
+  function detachFromScroll(scrollParent = document.body) {
+    document.querySelectorAll(scrollParent)[0]?.removeEventListener("scroll", scrollEvent)
+  }
+
   // replace year selector with dropdown
   picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
 

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

@@ -0,0 +1,44 @@
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens on the right)",
+      picker_id: "date-picker-positions1",
+      position: "auto right",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens on the left)",
+      picker_id: "date-picker-positions2",
+      position: "auto left",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens above on the left)",
+      picker_id: "date-picker-positions3",
+      position: "above left",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens below on the right)",
+      picker_id: "date-picker-positions4",
+      position: "below right",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import DatePicker from '../_date_picker'
+
+const DatePickerPositions = (props) => (
+  <React.Fragment>
+    <Flex>
+      <FlexItem fixedSize="50%">
+        <DatePicker
+            label="Datepicker (opens on the right)"
+            pickerId="date-picker-positions1"
+            position="auto right"
+            scrollContainer=".pb--page--content--main"
+            staticPosition={false}
+            {...props}
+        />
+      </FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem fixedSize="50%">
+        <DatePicker
+            label="Datepicker (opens on the left)"
+            pickerId="date-picker-positions2"
+            position="auto left"
+            scrollContainer=".pb--page--content--main"
+            staticPosition={false}
+            {...props}
+        />
+      </FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem fixedSize="50%">
+        <DatePicker
+            label="Datepicker (opens above on the left)"
+            pickerId="date-picker-positions3"
+            position="above left"
+            scrollContainer=".pb--page--content--main"
+            staticPosition={false}
+            {...props}
+        />
+      </FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem fixedSize="50%">
+        <DatePicker
+            label="Datepicker (opens below on the right)"
+            pickerId="date-picker-positions4"
+            position="below right"
+            scrollContainer=".pb--page--content--main"
+            staticPosition={false}
+            {...props}
+        />
+      </FlexItem>
+    </Flex>
+  </React.Fragment>
+)
+
+export default DatePickerPositions

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md

@@ -0,0 +1,9 @@
+Datepicker supports `position` options from [Flatpickr Options Documentation](https://flatpickr.js.org/options/). There are multiple positioning options to choose from.
+
+**Note:** In order for the above prop to work properly, you must also send `staticPosition={false}` to your Datepicker kit instance.
+
+#### Affix Datepicker Upon Scrolling
+
+Upon adding `static={false}` to the date picker, you will notice that the date picker detaches from the input field while scrolling. This is a known Flatpickr nuance. By adding the `scrollContainer` prop, you can tell the date picker which DOM container it should watch for scroll events. In this example, you can see that `scrollContainer=".pb--page--content--main"` is being passed in order to keep the date picker correctly positioned on page scroll.
+
+**Useage:** `scrollContainer: .validQuerySelectorHere`

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

@@ -0,0 +1,33 @@
+<%= pb_rails("card", props: {id: "position-element", margin_bottom: "md"}) do %>
+  <%= pb_rails("body") do %>👋 Datepicker will position from here based on ID.<% end %>
+<% end %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens on the right)",
+      picker_id: "date-picker-position-element",
+      position: "auto right",
+      position_element: "#position-element",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("card", props: {classname: "position-element", margin_bottom: "md"}) do %>
+  <%= pb_rails("body") do %>👋 Datepicker will position from here based on class name.<% end %>
+<% end %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens on the right)",
+      picker_id: "date-picker-position-element2",
+      position: "auto right",
+      position_element: ".position-element",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,67 @@
+import React, { useRef, useEffect, useState } from 'react'
+
+import Card from '../../pb_card/_card'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import DatePicker from '../_date_picker'
+
+const DatePickerPositionsElement = (props) => {
+  const cardRefTop = useRef(null),
+        cardRefBtm = useRef(null)
+
+  const [cardTop, setCardTop] = useState()
+  const [cardBtm, setCardBtm] = useState()
+
+  useEffect(() => {
+    setCardTop(cardRefTop.current)
+    setCardBtm(cardRefBtm.current)
+  }, [cardTop, cardBtm])
+
+  return (
+    <React.Fragment>
+      <div ref={cardRefTop}>
+        <Card
+            marginBottom="md"
+        >
+          {'👋 Datepicker will position from here based on ID.'}
+        </Card>
+      </div>
+      <Flex>
+        <FlexItem fixedSize="50%">
+          <DatePicker
+              label="Datepicker (opens on the right)"
+              pickerId="date-picker-position-element"
+              position="auto right"
+              positionElement={cardTop}
+              scrollContainer=".pb--page--content--main"
+              staticPosition={false}
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+
+      <div ref={cardRefBtm}>
+        <Card
+            marginBottom="md"
+        >
+            {'👋 Datepicker will position from here based on class name.'}
+        </Card>
+      </div>
+      <Flex>
+        <FlexItem fixedSize="50%">
+          <DatePicker
+              label="Datepicker (opens on the right)"
+              pickerId="date-picker-position-element2"
+              position="auto right"
+              positionElement={cardBtm}
+              scrollContainer=".pb--page--content--main"
+              staticPosition={false}
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+    </React.Fragment>
+  )
+}
+
+export default DatePickerPositionsElement

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -19,6 +19,8 @@ examples:
   - date_picker_month_and_year: Month & Year Only
   - date_picker_week: Week
   - date_picker_time: Time Selection
+  - date_picker_positions: Custom Positions
+  - date_picker_positions_element: Custom Position (based on element)
 
 
   react:
@@ -40,3 +42,5 @@ examples:
   - date_picker_month_and_year: Month & Year Only
   - date_picker_week: Week
   - date_picker_time: Time Selection
+  - date_picker_positions: Custom Positions
+  - date_picker_positions_element: Custom Position (based on element)

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

@@ -16,3 +16,5 @@ export { default as DatePickerInline } from './_date_picker_inline.jsx'
 export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'
 export { default as DatePickerTime } from './_date_picker_time.jsx'
 export { default as DatePickerWeek } from './_date_picker_week.jsx'
+export { default as DatePickerPositions } from './_date_picker_positions.jsx'
+export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'

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

@@ -1,15 +1,15 @@
 @media (min-width: 500px) {
   .flatpickr-calendar {
     padding: $space_xs;
-    width: 323.88px
+    // width: 323.88px;
   }
   .dayContainer {
     width: 315.88px
   }
   .flatpickr-months {
-    margin-left: -$space_xs;
-    margin-top: -$space_xs;
-    width: 323.88px;
+    margin-left: $space_xs / 4;
+    margin-top: $space_xs / 3;
+    // width: 323.88px;
   }
 }
 @media (max-width: 499px) {

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import classnames from "classnames";
+
+import { globalProps } from "../utilities/globalProps";
+import { buildCss, buildDataProps } from "../utilities/props";
+import DateTime from "../pb_kit/dateTime";
+
+import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
+import Icon from "../pb_icon/_icon";
+
+type DateRangeInlineProps = {
+  className?: string;
+  id?: string;
+  data?: string;
+  align?: "left" | "center" | "vertical";
+  size?: "sm" | "xs";
+  dark?: boolean;
+  icon?: boolean;
+  startDate?: Date;
+  endDate?: Date;
+};
+
+const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
+  const date = new DateTime({ value: dateValue });
+  if (includeYear) {
+    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
+  } else {
+    return `${date.toMonth()} ${date.toDay()}`;
+  }
+};
+
+const dateTimeIso = (dateValue: Date | string) => {
+  const date = new DateTime({ value: dateValue });
+  return date.toIso();
+};
+
+const DateRangeInline = (props: DateRangeInlineProps) => {
+  const {
+    icon = false,
+    dark = false,
+    size = "sm",
+    align = "left",
+    data = {},
+    startDate,
+    endDate,
+    className,
+  } = props;
+
+  const iconContent = () => {
+    return (
+      <>
+        {icon && (
+          <>
+            <Body color="light" key={Math.random()} tag="span">
+              <Icon
+                className="pb_date_range_inline_icon"
+                dark={dark}
+                fixedWidth
+                icon="calendar-alt"
+                size={size}
+                tag="span"
+              />
+            </Body>
+          </>
+        )}
+      </>
+    );
+  };
+
+  const dateInCurrentYear = () => {
+    const currentDate = new Date();
+    return (
+      startDate.getFullYear() == endDate.getFullYear() &&
+      startDate.getFullYear() == currentDate.getFullYear()
+    );
+  };
+
+  const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
+  const dataProps = buildDataProps(data)
+  const renderTime = (date: Date | string) => {
+    return (
+      <time dateTime={dateTimeIso(date)}>
+        {dateInCurrentYear() ? (
+          <>{` ${dateTimestamp(date, false)} `}</>
+        ) : (
+          <>{` ${dateTimestamp(date, true)} `}</>
+        )}
+      </time>
+    );
+  };
+
+  return (
+    <div
+    {...dataProps}
+      className={classnames(dateRangeClasses, globalProps(props), className)}
+    >
+      <div className="pb_date_range_inline_wrapper">
+        {size == "xs" && (
+          <>
+            {iconContent()}
+            <Caption dark={dark} tag="span">
+              {renderTime(startDate)}
+            </Caption>
+            <Caption dark={dark} tag="span">
+              <Icon
+                className="pb_date_range_inline_arrow"
+                fixedWidth
+                icon="long-arrow-right"
+              />
+            </Caption>
+            <Caption dark={dark} tag="span">
+              {renderTime(endDate)}
+            </Caption>
+          </>
+        )}
+
+        {size == "sm" && (
+          <>
+            {iconContent()}
+            <Body dark={dark} tag="span">
+              {renderTime(startDate)}
+            </Body>
+            <Body color="light" dark={dark} tag="span">
+              <Icon
+                className="pb_date_range_inline_arrow"
+                dark={dark}
+                fixedWidth
+                icon="long-arrow-right"
+              />
+            </Body>
+            <Body dark={dark} tag="span">
+              {renderTime(endDate)}
+            </Body>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default DateRangeInline;