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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.6.1.pre.alpha.rubocop.pre.performance1
+  version: 11.7.0.pre.alpha.table1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-09-15 00:00:00.000000000 Z
+date: 2022-10-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -348,6 +348,7 @@ files:
 - app/pb_kits/playbook/pb_badge/_badge.tsx
 - app/pb_kits/playbook/pb_badge/badge.html.erb
 - app/pb_kits/playbook/pb_badge/badge.rb
+- app/pb_kits/playbook/pb_badge/badge.test.js
 - app/pb_kits/playbook/pb_badge/docs/_badge_colors.html.erb
 - app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx
 - app/pb_kits/playbook/pb_badge/docs/_badge_default.html.erb
@@ -417,6 +418,7 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_block_content.md
 - app/pb_kits/playbook/pb_button/docs/_button_default.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_default.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_default.md
@@ -425,6 +427,9 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.md
+- app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb
+- app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_icon_options.md
 - app/pb_kits/playbook/pb_button/docs/_button_link.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_link.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb
@@ -648,12 +653,12 @@ files:
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
-- app/pb_kits/playbook/pb_date_picker/_date_picker.jsx
 - app/pb_kits/playbook/pb_date_picker/_date_picker.scss
+- app/pb_kits/playbook/pb_date_picker/_date_picker.tsx
 - app/pb_kits/playbook/pb_date_picker/date_picker.html.erb
 - app/pb_kits/playbook/pb_date_picker/date_picker.rb
 - app/pb_kits/playbook/pb_date_picker/date_picker.test.js
-- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
@@ -708,7 +713,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_description.md
 - app/pb_kits/playbook/pb_date_picker/docs/example.yml
 - app/pb_kits/playbook/pb_date_picker/docs/index.js
-- app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.js
+- app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
@@ -728,18 +733,20 @@ files:
 - app/pb_kits/playbook/pb_date_range_inline/docs/_description.md
 - app/pb_kits/playbook/pb_date_range_inline/docs/example.yml
 - app/pb_kits/playbook/pb_date_range_inline/docs/index.js
-- app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
 - app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.scss
+- app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx
 - app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb
 - app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.rb
+- app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js
 - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_range_stacked/docs/index.js
-- app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx
 - app/pb_kits/playbook/pb_date_stacked/_date_stacked.scss
+- app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx
 - app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb
 - app/pb_kits/playbook/pb_date_stacked/date_stacked.rb
+- app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
@@ -791,14 +798,14 @@ files:
 - app/pb_kits/playbook/pb_date_year_stacked/docs/_footer.md
 - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
-- app/pb_kits/playbook/pb_dialog/_close_icon.jsx
+- app/pb_kits/playbook/pb_dialog/_close_icon.tsx
 - app/pb_kits/playbook/pb_dialog/_dialog.html.erb
-- app/pb_kits/playbook/pb_dialog/_dialog.jsx
 - app/pb_kits/playbook/pb_dialog/_dialog.scss
-- app/pb_kits/playbook/pb_dialog/_dialog_context.jsx
-- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx
-- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx
-- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx
+- app/pb_kits/playbook/pb_dialog/_dialog.tsx
+- app/pb_kits/playbook/pb_dialog/_dialog_context.tsx
+- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx
+- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx
+- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx
 - app/pb_kits/playbook/pb_dialog/dialog.rb
 - app/pb_kits/playbook/pb_dialog/dialog.test.jsx
 - app/pb_kits/playbook/pb_dialog/dialog_header.rb
@@ -871,6 +878,9 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx
+- app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb
+- app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx
+- app/pb_kits/playbook/pb_filter/docs/_filter_placement.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx
 - app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb
@@ -879,6 +889,7 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/index.js
 - app/pb_kits/playbook/pb_filter/filter.html.erb
 - app/pb_kits/playbook/pb_filter/filter.rb
+- app/pb_kits/playbook/pb_filter/filter.test.js
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
@@ -992,6 +1003,9 @@ files:
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb
@@ -1039,8 +1053,8 @@ files:
 - app/pb_kits/playbook/pb_highlight/docs/index.js
 - app/pb_kits/playbook/pb_highlight/highlight.html.erb
 - app/pb_kits/playbook/pb_highlight/highlight.rb
-- app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx
 - app/pb_kits/playbook/pb_home_address_street/_home_address_street.scss
+- app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx
 - app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb
 - app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb
 - app/pb_kits/playbook/pb_home_address_street/docs/_description.md
@@ -1060,6 +1074,7 @@ files:
 - app/pb_kits/playbook/pb_home_address_street/docs/index.js
 - app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb
 - app/pb_kits/playbook/pb_home_address_street/home_address_street.rb
+- app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js
 - app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb
 - app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb
 - app/pb_kits/playbook/pb_icon/_icon.scss
@@ -1104,8 +1119,8 @@ files:
 - app/pb_kits/playbook/pb_icon_circle/docs/index.js
 - app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb
 - app/pb_kits/playbook/pb_icon_circle/icon_circle.rb
-- app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx
 - app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss
+- app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx
 - app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb
 - app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx
 - app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.html.erb
@@ -1118,8 +1133,9 @@ files:
 - app/pb_kits/playbook/pb_icon_stat_value/docs/index.js
 - app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb
 - app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb
-- app/pb_kits/playbook/pb_icon_value/_icon_value.jsx
+- app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js
 - app/pb_kits/playbook/pb_icon_value/_icon_value.scss
+- app/pb_kits/playbook/pb_icon_value/_icon_value.tsx
 - app/pb_kits/playbook/pb_icon_value/docs/_description.md
 - app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.html.erb
 - app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.jsx
@@ -1129,6 +1145,7 @@ files:
 - app/pb_kits/playbook/pb_icon_value/docs/index.js
 - app/pb_kits/playbook/pb_icon_value/icon_value.html.erb
 - app/pb_kits/playbook/pb_icon_value/icon_value.rb
+- app/pb_kits/playbook/pb_icon_value/icon_value.test.js
 - app/pb_kits/playbook/pb_image/_image.scss
 - app/pb_kits/playbook/pb_image/_image.tsx
 - app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
@@ -1159,8 +1176,8 @@ files:
 - app/pb_kits/playbook/pb_label_pill/docs/index.js
 - app/pb_kits/playbook/pb_label_pill/label_pill.html.erb
 - app/pb_kits/playbook/pb_label_pill/label_pill.rb
-- app/pb_kits/playbook/pb_label_value/_label_value.jsx
 - app/pb_kits/playbook/pb_label_value/_label_value.scss
+- app/pb_kits/playbook/pb_label_value/_label_value.tsx
 - app/pb_kits/playbook/pb_label_value/docs/_description.md
 - app/pb_kits/playbook/pb_label_value/docs/_footer.md
 - app/pb_kits/playbook/pb_label_value/docs/_label_value_default.html.erb
@@ -1175,6 +1192,7 @@ files:
 - app/pb_kits/playbook/pb_label_value/docs/index.js
 - app/pb_kits/playbook/pb_label_value/label_value.html.erb
 - app/pb_kits/playbook/pb_label_value/label_value.rb
+- app/pb_kits/playbook/pb_label_value/label_value.test.js
 - app/pb_kits/playbook/pb_layout/_layout.scss
 - app/pb_kits/playbook/pb_layout/_layout.tsx
 - app/pb_kits/playbook/pb_layout/_layout_mixin.scss
@@ -1235,10 +1253,10 @@ files:
 - app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
 - app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx
 - app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx
+- app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx
+- app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header_icon.tsx
 - app/pb_kits/playbook/pb_lightbox/_lightbox.tsx
 - app/pb_kits/playbook/pb_lightbox/_lightbox_context.tsx
-- app/pb_kits/playbook/pb_lightbox/_lightbox_header.tsx
-- app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.tsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.js

@@ -1,137 +0,0 @@
-export const getTimezoneText = (inputDate) => {
-  const tzAbbr = inputDate.toLocaleDateString('en-US', {
-    day: '2-digit',
-    timeZoneName: 'short',
-  }).slice(4)
-  const tzText = inputDate.toLocaleDateString('en-US', {
-    day: '2-digit',
-    timeZoneName: 'long',
-  }).slice(4)
-  return `${tzAbbr} (${tzText})`
-}
-
-function timeSelectPlugin(props) {
-  return function(fp) {
-
-    const generateMeridiemCard = (text) => {
-      const selectableCard = document.createElement('div')
-      selectableCard.className = 'pb_selectable_card_kit_enabled'
-
-      const cardInput = document.createElement('input'),
-          cardInputId = `datePicker${text}`
-
-      cardInput.id = cardInputId
-      cardInput.name = 'datepicker-ampm'
-      cardInput.type = 'radio'
-      cardInput.value = text
-
-      const cardLabel = document.createElement('label'),
-      cardLabelBuffer = document.createElement('div')
-      cardLabel.className = `label-${text.toLowerCase()}`
-      cardLabel.setAttribute('for', cardInputId)
-      cardLabelBuffer.className = 'buffer'
-      cardLabelBuffer.innerHTML = text
-
-      cardLabel.append(cardLabelBuffer)
-      selectableCard.prepend(cardInput)
-      selectableCard.append(cardLabel)
-
-      return selectableCard
-    }
-
-    const generateMeridiemToggle = () => {
-      fp.amPM.style.display = 'none'
-      const formGroupKit = document.createElement('div')
-      formGroupKit.className = 'pb_form_group_kit'
-
-      const amCard = generateMeridiemCard('AM')
-      amCard.addEventListener('click', () => {
-        fp.selectedDates[0].setHours((fp.selectedDates[0].getHours() % 12) + 12 * 0)
-        fp.setDate(fp.selectedDates[0], true)
-      })
-
-      const pmCard = generateMeridiemCard('PM')
-      pmCard.addEventListener('click', () => {
-        fp.selectedDates[0].setHours((fp.selectedDates[0].getHours() % 12) + 12 * 1)
-        fp.setDate(fp.selectedDates[0], true)
-      })
-
-      formGroupKit.prepend(amCard)
-      formGroupKit.append(pmCard)
-
-      const meridiemContainer = document.createElement('div')
-      meridiemContainer.className = 'meridiem'
-      meridiemContainer.append(formGroupKit)
-      document.querySelector('.pb_time_selection').append(meridiemContainer)
-    }
-
-    const getMeridiem = (dateObj) => {
-      return dateObj[0].getHours() < 12 ? 'AM' : 'PM'
-    }
-
-    const updateMeridiemToggle = (forceClick) => {
-      if (!fp.selectedDates.length) return
-
-      const uncheckedClass = 'pb_selectable_card_kit_enabled',
-        checkedClass = 'pb_selectable_card_kit_checked_enabled',
-        pickerAM = document.getElementById('datePickerAM'),
-        pickerPM = document.getElementById('datePickerPM'),
-        meridiem = getMeridiem(fp.selectedDates)
-
-      if (forceClick) {
-        pickerAM.checked = false
-        pickerPM.checked = false
-        pickerPM.checked = meridiem === 'PM'
-        pickerAM.checked = meridiem === 'AM'
-      }
-
-      if (meridiem === 'PM') {
-        pickerPM.parentElement.className = checkedClass
-        pickerAM.parentElement.className = uncheckedClass
-      } else if (meridiem === 'AM') {
-        pickerAM.parentElement.className = checkedClass
-        pickerPM.parentElement.className = uncheckedClass
-      }
-    }
-
-    return {
-      onValueUpdate() {
-        updateMeridiemToggle()
-      },
-      onReady() {
-        const id = fp.input.id
-
-        if (!id || !fp?.timeContainer) return
-
-        fp.timeContainer.classList.add('pb_time_selection')
-
-        // allow single minutes
-        fp.minuteElement.step = '1'
-
-        // add caption text
-        if (props.caption) {
-          const captionContainer = document.createElement('div')
-          captionContainer.className = 'pb_caption_kit_md'
-          captionContainer.innerHTML = props?.caption
-          fp.timeContainer.prepend(captionContainer)
-        }
-
-        // add meridiem toggle
-        generateMeridiemToggle()
-        updateMeridiemToggle(true)
-
-        // add timezone text
-        if (props.showTimezone) {
-          const subcaptionContainer = document.createElement('div')
-          subcaptionContainer.className = 'pb_caption_kit_xs'
-          subcaptionContainer.innerHTML = getTimezoneText(fp._initialDate)
-          fp.timeContainer.append(subcaptionContainer)
-        }
-
-        fp.loadedPlugins.push("timeSelectPlugin")
-      }
-    }
-  }
-}
-
-export default timeSelectPlugin

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -1,103 +0,0 @@
-/* @flow */
-
-import React from 'react'
-
-import classnames from 'classnames'
-
-import DateTime from '../pb_kit/dateTime'
-import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Caption from '../pb_caption/_caption'
-import Title from '../pb_title/_title'
-
-type DateStackedProps = {
-  align?: "left" | "center" | "right",
-  bold?: boolean,
-  className?: string | array<string>,
-  dark?: boolean,
-  data?: string,
-  date: string,
-  size?: "sm" | "md",
-  id?: string,
-  reverse?: boolean,
-}
-
-const sizes = {
-  sm: 4,
-  md: 3,
-}
-
-const DateStacked = (props: DateStackedProps) => {
-  const {
-    align = 'left',
-    bold = false,
-    reverse = false,
-    className,
-    dark = false,
-    date,
-    size = 'sm',
-  } = props
-  const classes = classnames(
-    buildCss('pb_date_stacked_kit', align, size, {
-      dark: dark,
-      reverse: reverse,
-    }),
-    globalProps(props),
-    className
-  )
-
-  const currentYear = new Date().getFullYear().toString()
-  const dateTimestamp = new DateTime({ value: date })
-  const inputYear = dateTimestamp.toYear().toString()
-
-  return (
-
-    <div>
-      <If condition={bold == false}>
-
-        <div className={classes}>
-          <div className="pb_date_stacked_day_month">
-            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
-            <Title
-                dark={dark}
-                size={sizes[size]}
-                text={dateTimestamp.toDay()}
-            />
-          </div>
-          <If condition={currentYear != inputYear}>
-            <Caption size="xs">{inputYear}</Caption>
-          </If>
-        </div>
-        <Else />
-        <>
-          <div className={classes}>
-            <div className="pb_date_stacked_day_month">
-
-              <Title
-                  bold
-                  dark={dark}
-                  size="4"
-                  text={dateTimestamp.toMonth()}
-              />
-              <Title
-                  bold
-                  dark={dark}
-                  size="4"
-                  text={dateTimestamp.toDay()}
-              />
-              <If condition={currentYear != inputYear}>
-                <Title size="4">{inputYear}</Title>
-              </If>
-            </div>
-
-          </div>
-
-        </>
-      </If>
-    </div>
-
-  )
-}
-
-export default DateStacked

data/app/pb_kits/playbook/pb_dialog/_dialog.jsx

@@ -1,223 +0,0 @@
-/* eslint-disable react/jsx-handler-names */
-/* eslint-disable react/no-multi-comp */
-/* @flow */
-
-import React, { useState } from 'react'
-import classnames from 'classnames'
-import Modal from 'react-modal'
-
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Button from '../pb_button/_button'
-import DialogHeader  from './child_kits/_dialog_header'
-import DialogFooter from './child_kits/_dialog_footer'
-import DialogBody from './child_kits/_dialog_body'
-import Flex from '../pb_flex/_flex'
-import IconCircle from '../pb_icon_circle/_icon_circle'
-import Title from '../pb_title/_title'
-import { DialogContext } from './_dialog_context'
-
-type DialogProps = {
-  alertStyle?: "link" | "single" | "stacked" | "default",
-  aria?: object,
-  cancelButton?: string,
-  children: array<React.ReactNode> | React.ReactNode | string,
-  className?: string,
-  closeable: boolean,
-  confirmButton?: string,
-  data?: object,
-  id?: string,
-  loading?: boolean,
-  onCancel?: () => void,
-  onChange?: () => void,
-  onClose?: () => void,
-  onConfirm?: () => void,
-  opened: boolean,
-  portalClassName?: string,
-  shouldCloseOnOverlayClick: boolean,
-  size?: "sm" | "md" | "lg" | "status_size" | "content",
-  status?: "info" | "caution" | "delete" | "error" | "success",
-  text?: string,
-  title?: string,
-  trigger?: string
-}
-
-const Dialog = (props: DialogProps) => {
-  const {
-    alertStyle = "default",
-    aria = {},
-    cancelButton,
-    confirmButton,
-    className,
-    data = {},
-    id,
-    size = "md",
-    children,
-    loading = false,
-    opened,
-    onCancel = () => {},
-    onConfirm = () => {},
-    onClose = () => {},
-    portalClassName,
-    shouldCloseOnOverlayClick = true,
-    status,
-    text,
-    title,
-    trigger,
-  } = props
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const dialogClassNames = {
-    base: classnames('pb_dialog', buildCss('pb_dialog', size)),
-    afterOpen: 'pb_dialog_after_open',
-    beforeClose: 'pb_dialog_before_close',
-  }
-
-  const overlayClassNames = {
-    base: 'pb_dialog_overlay',
-    afterOpen: 'pb_dialog_overlay_after_open',
-    beforeClose: 'pb_dialog_overlay_before_close',
-  }
-
-  const classes = classnames(
-    buildCss('pb_dialog_wrapper'),
-    globalProps(props),
-    className
-  )
-
-  const [triggerOpened, setTriggerOpened] = useState(false),
-  modalIsOpened = trigger ? triggerOpened : opened
-
-  const api = {
-    onClose: trigger ? function(){
-      setTriggerOpened(false)
-    } : onClose,
-  }
-
-  if (trigger) {
-    const modalTrigger = document.querySelector(trigger)
-    modalTrigger.addEventListener('click', () => {
-      setTriggerOpened(true)
-      document.querySelector('#cancel-button').addEventListener('click', () => {
-        setTriggerOpened(false)
-      })
-    }, { once: true })
-  }
-
-  const sweetAlertStatus = {
-    default: {
-      icon: "exclamation-circle",
-      variant: "default",
-      size: "lg"
-    },
-    info: {
-      icon: "info-circle",
-      variant: "default",
-      size: "lg"
-    },
-    caution: {
-      icon: "exclamation-triangle",
-      variant: "yellow",
-      size: "lg"
-    },
-    delete: {
-      icon: "trash-alt",
-      variant: "red",
-      size: "lg"
-    },
-    error: {
-      icon: "times-circle",
-      variant: "red",
-      size: "lg"
-    },
-    success: {
-      icon: "check-circle",
-      variant: "green",
-      size: "lg"
-    },
-  }
-
-  return (
-    <DialogContext.Provider value={api}>
-      <div
-          {...ariaProps}
-          {...dataProps}
-          className={classes}
-      >
-        <Modal
-            alertStyle={alertStyle}
-            ariaHideApp={false}
-            className={dialogClassNames}
-            closeTimeoutMS={200}
-            contentLabel="Minimal Modal Example"
-            id={id}
-            isOpen={modalIsOpened}
-            onRequestClose={onClose}
-            overlayClassName={overlayClassNames}
-            portalClassName={portalClassName}
-            shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
-            status={status}
-        >
-          <If condition={title && !status}>
-            <Dialog.Header>{title}</Dialog.Header>
-          </If>
-          <If condition={!status && text}>
-            <Dialog.Body>
-                {text}
-              </Dialog.Body>
-          </If>
-          <If condition={status}>
-            <Dialog.Body
-                padding="md"
-            >
-              <Flex
-                  align="center"
-                  orientation="column"
-              >
-                <IconCircle
-                    icon={sweetAlertStatus[status].icon}
-                    size={sweetAlertStatus[status].size}
-                    variant={sweetAlertStatus[status].variant}
-                />
-                <Title
-                    marginTop="sm"
-                    size={3}
-                >
-                  {title}
-                </Title>
-                <Body
-                    marginTop="xs"
-                    text={text}
-                />
-              </Flex>
-            </Dialog.Body>
-          </If>
-          <If condition={cancelButton && confirmButton}>
-            <Dialog.Footer>
-              <Button
-                  loading={loading}
-                  onClick={onConfirm}
-              >
-                {confirmButton}
-              </Button>
-              <Button id="cancel-button"
-                  onClick={onCancel}
-                  variant="link"
-              >
-                {cancelButton}
-              </Button>
-            </Dialog.Footer>
-          </If>
-          {children}
-        </Modal>
-      </div>
-    </DialogContext.Provider>
-  )
-}
-Dialog.Header = DialogHeader
-Dialog.Body = DialogBody
-Dialog.Footer = DialogFooter
-
-export default Dialog

data/app/pb_kits/playbook/pb_dialog/_dialog_context.jsx

@@ -1,3 +0,0 @@
-import React from 'react'
-
-export const DialogContext = React.createContext()