playbook_ui 11.4.0 → 11.5.0.pre.alpha.datepicker1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 638051af443b06b03b9de8a9092d21f8ce06f3806e60bd43cec8463ce428a69a
-  data.tar.gz: c43d207810694a318a13280bb917b8a295cb44310e05433a262639bee6b8778e
+  metadata.gz: 23dd757338e004c593559cfc4694eb98763f5ccd2e848fefa2887f8ccc0b46f6
+  data.tar.gz: 952a958a08a4ca5127e6981c21001757469ee0fc599a75dd076bc1dbd9d958ec
 SHA512:
-  metadata.gz: 80aad4d2179d46bc3332b631a1f4e4e90640d61b3cbd3bfa1894cd8e5710f20ecea86f8d71cada0811e9ac434a99c70cd31a7622c33df2434d82370b5f0a9157
-  data.tar.gz: 8a8562a4d3efced667089ca24567758a341255de55f885d1068c7722b301886d427f07943a03ae391d47a1b1d5b4ce279d7bb80a42d7e53042ed9b22ab71d4dc
+  metadata.gz: 007d11d01011984e0193310b17f2f3afc922281b9fb1fa0cc9dba28310fd258e4f08218d58ef80f10b8d370536b0e4c9534d26cad8861f41224ebca165938d03
+  data.tar.gz: 9161f9c2541a94573f547aaea38e81f299b6ab4c28a0242bb6bf528c0e2d0958434352f5a4d8dc463505e959b933a20b04140e81d0cdb0dbd4745cae367b77cf

data/app/pb_kits/playbook/data/menu.yml

@@ -104,16 +104,3 @@ kits:
     - title_detail
   - user_badge
   - walkthrough
-visual_guidelines:
-  - colors
-  - max_width
-  - number_spacing
-  - positioning
-  - line_height
-  - spacing
-  - border_radius
-  - typography
-  - shadows
-  - display
-  - cursor
-  - flex_box

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -0,0 +1,80 @@
+import React from 'react'
+import { cleanup, render, screen } from '../utilities/test-utils'
+
+import Badge from './_badge'
+
+const testId = "badge"
+
+test('default class name', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        text="+1"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  expect(kit).toHaveClass('pb_badge_kit_neutral')
+})
+
+test('primary class name', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        text="+1"
+        variant="primary"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  expect(kit).toHaveClass('pb_badge_kit_primary')
+})
+
+test('displays text content', () => {
+  render(
+    <Badge
+        text="+1"
+        variant="primary"
+    />
+  )
+
+  const text = screen.getByText("+1")
+  expect(text).toBeInTheDocument()
+})
+
+test('displays rounded corners', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        rounded
+        text="+1"
+        variant="primary"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('pb_badge_kit_primary_rounded')
+})
+
+test('displays color variants', () => {
+  [
+    "success",
+    "warning",
+    "error",
+    "info"
+  ].forEach((colorVariant) => {
+    render(
+      <Badge
+          data={{ testid: testId }}
+          text={colorVariant}
+          variant={colorVariant}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_badge_kit_${colorVariant}`)
+
+    cleanup()
+  })
+})

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -17,6 +17,7 @@ type ButtonPropTypes = {
   form?: string,
   fullWidth?: boolean,
   icon?: string,
+  iconRight?: boolean,
   id?: string,
   link?: string,
   loading?: boolean,
@@ -61,6 +62,7 @@ const Button = (props: ButtonPropTypes) => {
     data = {},
     disabled,
     icon = null,
+    iconRight = false,
     id,
     loading = false,
     onClick,
@@ -91,10 +93,13 @@ const Button = (props: ButtonPropTypes) => {
 
   const content = (
     <span className="pb_button_content">
-      {icon && (
-        <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
+      {icon && !iconRight && (
+        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon`} />
       )}
       <span>{text || children}</span>
+      {icon && iconRight && (
+        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon_right`} />
+      )}
     </span>
   )
 

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -55,6 +55,13 @@ $pb_button_border_width: 0px;
     visibility: visible;
   }
 
+  .button_with_icon {
+    margin-right: $space_xs;
+  }
+  .button_with_icon_right {
+    margin-left: $space_xs;
+  }
+
   &:hover, &:focus {
     outline: none;
     

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,5 +1,16 @@
 <%= content_tag(object.tag,
     object.tag == "button" ? object.options : object.link_options) do %>
+    <% if object.icon && !object.icon_right %>
+        <span>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
+        </span>
+    <% end %>
     <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
+    <% if object.icon && object.icon_right %>
+        <span>
+            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
+        </span>
+    <% end %>
+
 <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -7,6 +7,9 @@ module Playbook
                       default: false
       prop :full_width, type: Playbook::Props::Boolean,
                         default: false
+      prop :icon
+      prop :icon_right, type: Playbook::Props::Boolean,
+                        default: false
       prop :link
       prop :loading, type: Playbook::Props::Boolean,
                      default: false

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_button/docs/_button_block_content.html.erb

@@ -1,4 +1,4 @@
 <%= pb_rails("button") do %>
-  <%= pb_rails("icon", props: { icon: "users", fixed_width: true }) %>
+  <%= pb_rails("pill", props: { text:"5", fixed_width: true, margin_right: "xs", variant:"info" }) %>
   <span>Button with Block Content</span>
 <% end %>

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx

@@ -1,15 +1,18 @@
-import React from 'react'
-import { Button } from '../../'
+import React from "react";
+import { Button, Pill } from "../../";
 
 const ButtonBlockContent = (props) => (
   <div>
-    <Button
-        fixedWidth
-        icon="users"
-        text="Button with Block Content"
+    <Button fixedWidth 
         {...props}
-    />
+    >
+      <Pill marginRight="xs"
+          text="5"
+          variant="info"
+      />
+      <span>Button with Block Content</span>
+    </Button>
   </div>
-)
+);
 
-export default ButtonBlockContent
+export default ButtonBlockContent;

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md

@@ -0,0 +1 @@
+Used when the user wants to display custom content within a button instead of passing in text or props to the kit itself. In this example the button is using the Pill kit and a `<span>` element inside the button.

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left" }) %>
+<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Button } from '../../'
+
+const ButtonIconOptions = (props) => (
+    <div>
+      <Button
+          fixedWidth
+          icon='plus'
+          text="Icon on Left"
+          {...props}
+      />
+      {' '}
+      <Button
+          fixedWidth
+          icon='chevron-right'
+          iconRight
+          text="Icon on Right"
+          {...props}
+      />
+    </div>
+  )
+  
+  export default ButtonIconOptions

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md

@@ -0,0 +1 @@
+Icons can also be added to a button if needed. By default, the icon will be displayed on the left of the text. To display the icon on the right, use the optional prop of `iconRight` in react or `icon_right` in rails.

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

@@ -5,6 +5,7 @@ examples:
   - button_link: Button Links
   - button_loading: Button Loading
   - button_block_content: Button Block Content
+  - button_icon_options: Button Icon Options
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
   - button_size: Button Size
@@ -15,6 +16,7 @@ examples:
   - button_link: Button Links
   - button_loading: Button Loading
   - button_block_content: Button Block Content
+  - button_icon_options: Button Icon Options
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
   - button_size: Button Size

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

@@ -3,6 +3,7 @@ export { default as ButtonFullWidth } from './_button_full_width.jsx'
 export { default as ButtonLink } from './_button_link.jsx'
 export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
+export { default as ButtonIconOptions } from './_button_icon_options.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'

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,17 @@ module Playbook
       prop :plugins, type: Playbook::Props::Boolean,
                      default: false,
                      deprecated: true
+      prop :position, type: Playbook::Props::String,
+                      default: "auto"
+      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 +82,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`