playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc9298eefc98f72a96a7a168d2d7019c6ff57c01ca45f5fda0e98ebf7e4f3ed6
-  data.tar.gz: 48a26c0f5191e612e55b74bbf206efa53a454175f2b018273db0c7a83bbd7bdd
+  metadata.gz: 50c4e2402a8a42486e55758e888f2aa3d0b68c8b00c64537bcf86572c0d39a3b
+  data.tar.gz: 7cbb4822db32acc06087d381c025c8f1e11ef0685e33e8bc2b66bb90e80eeeed
 SHA512:
-  metadata.gz: cf1a60bc28926ebf17b04bd3fb3a3080f3d6476baefda231915328a341398e66b8723cc5d6000de1ff1d068a4cfbd7e14fc94812c4deebcf9cc147c7bea018ce
-  data.tar.gz: a4990d58ca5b07fd0bd0c79a61e364e166d4fa81c12497411145a596e996945f204dc08df7d4f67a98c23f14916fb71f2cddab88ecab5a09a104fff037e7bbba
+  metadata.gz: 1e645568ecb8d1ae319c94bc7038f9e7c1dac964fdcca0c256430142813efc4bec63ba172f7522e96766458530ed382499899a6e4e54ee66093d189dbb60b7ab
+  data.tar.gz: c1d7f6db9c77ea3fc3ec9f402f89675caccd4320fb7490ee26df0ab61a43e6dd6ad29a1b9209ac23a33ed6a2239092974949c1689fe2f9931ce899110b9fb30d

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/index.js

@@ -115,7 +115,7 @@ export { default as dashboardValueSettings } from './pb_dashboard_value/dashboar
 
 // Other JS/Plugins
 export { default as pbChart } from './plugins/pb_chart.js'
-export { default as datePickerHelper } from './pb_date_picker/date_picker_helper.js'
+export { default as datePickerHelper } from './pb_date_picker/date_picker_helper'
 export { default as PbPopover } from './pb_popover'
 export { default as PbTable } from './pb_table'
 export { default as PbTextarea } from './pb_textarea'

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/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_picker/{_date_picker.jsx → _date_picker.tsx}

@@ -1,10 +1,8 @@
-/* @flow */
-
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import datePickerHelper from './date_picker_helper'
 
@@ -12,46 +10,42 @@ import Icon from '../pb_icon/_icon'
 import TextInput from '../pb_text_input/_text_input'
 
 type DatePickerProps = {
-  allowInput?: Boolean,
-  aria?: object,
-  className?: String,
-  dark?: Boolean,
+  allowInput?: boolean,
+  aria?: {[key: string]: string},
+  className?: string,
+  dark?: boolean,
   data?: object,
-  defaultDate?: String,
-  disableDate?: Array,
-  disableInput?: Boolean,
-  disableRange?: Array,
-  disableWeekdays?: Array,
-  enableTime?: Boolean,
-  error?: String,
-  format?: String,
-  hideIcon?: Boolean,
-  hideLabel?: Boolean,
-  id?: String,
-  inLine?: Boolean,
+  defaultDate?: string,
+  disableDate?: number[],
+  disableInput?: boolean,
+  disableRange?: number[],
+  disableWeekdays?: number[],
+  enableTime?: boolean,
+  error?: string,
+  format?: string,
+  hideIcon?: boolean,
+  hideLabel?: boolean,
+  id?: string,
+  inLine?: boolean,
   inputAria?: object,
   inputData?: object,
-  inputOnChange?: (String) => void,
+  inputOnChange?: (arg: string) => void,
   inputValue?: any,
-  label?: String,
-  maxDate: String,
-  minDate: String,
-  mode?: String,
-  name: String,
-  onChange: (String) => void,
-  pickerId?: String,
-  placeholder?: String,
-  plugins: Boolean,
-  position: String,
+  label?: string,
+  maxDate: string,
+  minDate: string,
+  name: string,
+  pickerId?: ArrayLike<Node> | Node | string,
+  placeholder?: string,
   positionElement?: HTMLElement | null,
-  scrollContainer?: String,
+  scrollContainer?: string,
   selectionType?: "month" | "week",
-  showTimezone?: Boolean,
-  staticPosition: Boolean,
-  timeFormat?: String,
-  type?: String,
-  yearRange?: Array,
-}
+  showTimezone?: boolean,
+  staticPosition: boolean,
+  timeFormat?: string,
+  type?: string,
+  yearRange?: number[],
+} & GlobalProps
 
 const DatePicker = (props: DatePickerProps) => {
   if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
@@ -128,6 +122,7 @@ const DatePicker = (props: DatePickerProps) => {
       showTimezone,
       staticPosition,
       yearRange,
+      required: false,
     }, scrollContainer)
   })
 
@@ -168,38 +163,35 @@ const DatePicker = (props: DatePickerProps) => {
             value={inputValue}
         />
 
-        <If condition={!hideIcon}>
+        {!hideIcon &&
           <div
-              className={iconWrapperClass()}
-              id={`cal-icon-${pickerId}`}
-          >
-            <Icon
-                className="cal_icon"
-                icon="calendar-alt"
-            />
-          </div>
-        </If>
+          className={iconWrapperClass()}
+          id={`cal-icon-${pickerId}`}
+      >
+        <Icon
+            className="cal_icon"
+            icon="calendar-alt"
+        />
+      </div>
+        }
+          
 
-        <If condition={hideIcon && inLine}>
-          <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-icon-plus`}
-          >
-            <Icon
-                className="date-picker-plus-icon"
-                icon="plus"
-            />
-          </div>
-          <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-angle-down`}
-          >
+        { hideIcon && inLine ? <><div
+          className={iconWrapperClass()}
+          id={`${pickerId}-icon-plus`}
+        >
+          <Icon
+            className="date-picker-plus-icon"
+            icon="plus" />
+        </div><div
+          className={iconWrapperClass()}
+          id={`${pickerId}-angle-down`}
+        >
             <Icon
-                className="angle_down_icon"
-                icon="angle-down"
-            />
-          </div>
-        </If>
+              className="angle_down_icon"
+              icon="angle-down" />
+          </div></> : null}
+          
 
       </div>
     </div>

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

@@ -46,7 +46,8 @@ module Playbook
       prop :plugins, type: Playbook::Props::Boolean,
                      default: false,
                      deprecated: true
-      prop :position, type: Playbook::Props::String
+      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,

data/app/pb_kits/playbook/pb_date_picker/{date_picker_helper.js → date_picker_helper.ts}

@@ -1,13 +1,32 @@
 import flatpickr from 'flatpickr'
+import { BaseOptions } from 'flatpickr/dist/types/options'
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
 
-const getPositionElement = (element) => {
+const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
 }
 
-const datePickerHelper = (config, scrollContainer) => {
+type DatePickerConfig = {
+  disableDate?: number[],
+  disableRange?: number[],
+  disableWeekdays?: number[],
+  format?: string,
+  pickerId?: ArrayLike<Node> | Node | string,
+  required: boolean,
+  hideIcon?: boolean;
+  inLine?: boolean,
+  onChange: (dateStr: string, selectedDates: Date[]) => void,
+  selectionType?: "month" | "week" | "",
+  showTimezone?: boolean,
+  staticPosition: boolean,
+  timeCaption?: string,
+  timeFormat?: string,
+  yearRange: number[]
+} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
+
+const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
   const {
     allowInput,
     defaultDate,
@@ -54,9 +73,9 @@ const datePickerHelper = (config, scrollContainer) => {
     }
   }
   const calendarResizer = () => {
-    const cal = document.querySelector(`#cal-${pickerId}.open`)
+    const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
     const parentInput = cal.parentElement
-    if (cal.getBoundingClientRect().right > window.innerWidth) {
+    if (cal?.getBoundingClientRect().right > window.innerWidth) {
       parentInput.style.display = 'flex'
       parentInput.style.justifyContent = 'center'
     }
@@ -70,10 +89,10 @@ const datePickerHelper = (config, scrollContainer) => {
     let pluginList = []
 
     // month and week selection
-    if (selectionType === "month" || plugins === true) {
+    if (selectionType === "month" || plugins.length > 0) {
       pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
     } else if ( selectionType === "week") {
-      pluginList.push(weekSelect({}))
+      pluginList.push(weekSelect())
     }
 
     // time selection
@@ -96,7 +115,9 @@ const datePickerHelper = (config, scrollContainer) => {
     defaultDate: defaultDateGetter(),
     disable: disableWeekdays && disableWeekdays.length > 0 ? [
       (date) => {
-        const weekdayObj = {
+        const weekdayObj: {
+          [day: string]: number
+        } = {
           Sunday: 0,
           Monday: 1,
           Tuesday: 2,
@@ -128,7 +149,7 @@ const datePickerHelper = (config, scrollContainer) => {
     }],
     onClose: [() => {
       window.removeEventListener('resize', calendarResizer)
-      if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer)
+      if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
     }],
     onChange: [(selectedDates, dateStr) => {
       onChange(dateStr, selectedDates)
@@ -148,18 +169,18 @@ const datePickerHelper = (config, scrollContainer) => {
   // ===========================================================
 
   // Assign dynamically sourced flatpickr instance to variable
-  const picker = document.querySelector(`#${pickerId}`)._flatpickr
+  const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${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 attachToScroll(scrollParent: string | HTMLElement) {
+    document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
   }
-  function detachFromScroll(scrollParent = document.body) {
-    document.querySelectorAll(scrollParent)[0]?.removeEventListener("scroll", scrollEvent)
+  function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
+    document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
   }
 
   // replace year selector with dropdown
@@ -172,14 +193,14 @@ const datePickerHelper = (config, scrollContainer) => {
   }
 
   // variablize each dropdown selector
-  const dropdown = document.querySelector(`#year-${pickerId}`)
+  const dropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
 
   // inject year options into dropdown and assign it the flatpickr's current year value
   dropdown.innerHTML = years
   dropdown.value = picker.currentYear
 
   // whenever a new year is selected from dropdown update flatpickr's current year value
-  dropdown.addEventListener('input', (e) => {
+  dropdown.addEventListener('input', (e: Event & { target: { value: string}}) => {
     picker.changeYear(Number(e.target.value))
   })
 
@@ -219,7 +240,7 @@ const datePickerHelper = (config, scrollContainer) => {
   }
   if (required){
     picker.input.removeAttribute('readonly')
-    picker.input.addEventListener('keydown', (e) => e.preventDefault())
+    picker.input.addEventListener('keydown', (e: Event) => e.preventDefault())
     picker.input.style.caretColor = 'transparent'
     picker.input.style.cursor = 'pointer'
   }