playbook_ui 11.3.0 → 11.4.0

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb

@@ -0,0 +1,37 @@
+<%
+  options = [
+    { label: 'Windows', value: '#FFA500' },
+    { label: 'Siding', value: '#FF0000' },
+    { label: 'Doors', value: '#00FF00' },
+    { label: 'Roofs', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-pills-example1",
+    placeholder: "All Colors",
+    options: options, 
+    label: "Colors",
+    name: :foo,
+    is_multi: false
+  })
+%>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
+    console.log('Option removed')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
+    console.log('All options cleared')
+  })
+
+  document.querySelector('#clear-pills').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md

@@ -0,0 +1 @@
+Passing `is_multi: false` will allow the user to only select one option from the drop down. Note: this will disable `pills` prop.

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

@@ -3,6 +3,7 @@ examples:
     - typeahead_default: Default
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
+    - typeahead_without_pills: Without Pills (Single Select)
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_inline: Inline

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -1,5 +1,5 @@
-<% if object.pills %>
-  <%= react_component('Typeahead', object.typeahead_with_pills_options) %>
+<% if object.is_react? %>
+  <%= react_component('Typeahead', object.typeahead_react_options) %>
 <% else %>
   <%= content_tag(:div,
                 id: object.id,

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -19,6 +19,10 @@ module Playbook
                      default: []
       prop :input_options, type: Playbook::Props::Hash,
                            default: {}
+
+      prop :is_multi, type: Playbook::Props::Boolean,
+                      default: true
+
       prop :pills, type: Playbook::Props::Boolean,
                    default: false
 
@@ -45,13 +49,17 @@ module Playbook
         )
       end
 
-      def typeahead_with_pills_options
+      def is_react?
+        pills || !is_multi
+      end
+
+      def typeahead_react_options
         base_options = {
           dark: dark,
           defaultValue: default_options,
           id: id,
           inline: inline,
-          isMulti: true,
+          isMulti: is_multi,
           label: label,
           multiKit: multi_kit,
           name: name,

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -8,7 +8,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
 
-import DateTime from '../pb_kit/dateTime.js'
+import DateTime from '../pb_kit/dateTime'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/playbook-doc.js

@@ -92,6 +92,7 @@ import * as Title from 'pb_title/docs'
 import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
 import * as Toggle from 'pb_toggle/docs'
+import * as Tooltip from 'pb_tooltip/docs'
 import * as TreemapChart from 'pb_treemap_chart/docs'
 import * as Typeahead from 'pb_typeahead/docs'
 import * as User from 'pb_user/docs'
@@ -188,6 +189,7 @@ WebpackerReact.setup({
   ...TitleCount,
   ...TitleDetail,
   ...Toggle,
+  ...Tooltip,
   ...TreemapChart,
   ...Typeahead,
   ...User,

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.2.7"
-  VERSION = "11.3.0"
+  PREVIOUS_VERSION = "11.3.0"
+  VERSION = "11.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.3.0
+  version: 11.4.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-19 00:00:00.000000000 Z
+date: 2022-08-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -553,8 +553,8 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
 - app/pb_kits/playbook/pb_circle_chart/docs/index.js
-- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
+- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx
 - app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb
 - app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js
@@ -597,8 +597,8 @@ files:
 - app/pb_kits/playbook/pb_contact/docs/_description.md
 - app/pb_kits/playbook/pb_contact/docs/example.yml
 - app/pb_kits/playbook/pb_contact/docs/index.js
-- app/pb_kits/playbook/pb_currency/_currency.jsx
 - app/pb_kits/playbook/pb_currency/_currency.scss
+- app/pb_kits/playbook/pb_currency/_currency.tsx
 - app/pb_kits/playbook/pb_currency/currency.html.erb
 - app/pb_kits/playbook/pb_currency/currency.rb
 - app/pb_kits/playbook/pb_currency/currency.test.js
@@ -633,8 +633,8 @@ files:
 - app/pb_kits/playbook/pb_dashboard_value/docs/_description.md
 - app/pb_kits/playbook/pb_dashboard_value/docs/example.yml
 - app/pb_kits/playbook/pb_dashboard_value/docs/index.js
-- app/pb_kits/playbook/pb_date/_date.jsx
 - app/pb_kits/playbook/pb_date/_date.scss
+- app/pb_kits/playbook/pb_date/_date.tsx
 - app/pb_kits/playbook/pb_date/date.html.erb
 - app/pb_kits/playbook/pb_date/date.rb
 - app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
@@ -871,8 +871,8 @@ 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_fixed_confirmation_toast/_fixed_confirmation_toast.jsx
 - 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
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
@@ -1073,8 +1073,8 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/index.js
 - app/pb_kits/playbook/pb_icon/icon.html.erb
 - app/pb_kits/playbook/pb_icon/icon.rb
-- app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
+- app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx
 - app/pb_kits/playbook/pb_icon_circle/docs/_description.md
 - app/pb_kits/playbook/pb_icon_circle/docs/_footer.md
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb
@@ -1130,10 +1130,10 @@ files:
 - app/pb_kits/playbook/pb_image/image.html.erb
 - app/pb_kits/playbook/pb_image/image.rb
 - app/pb_kits/playbook/pb_image/image.test.js
-- app/pb_kits/playbook/pb_kit/dateTime.js
+- app/pb_kits/playbook/pb_kit/dateTime.ts
 - app/pb_kits/playbook/pb_kit/pb_date_time.rb
-- app/pb_kits/playbook/pb_label_pill/_label_pill.jsx
 - app/pb_kits/playbook/pb_label_pill/_label_pill.scss
+- app/pb_kits/playbook/pb_label_pill/_label_pill.tsx
 - app/pb_kits/playbook/pb_label_pill/docs/_description.md
 - app/pb_kits/playbook/pb_label_pill/docs/_footer.md
 - app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.html.erb
@@ -1567,8 +1567,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
 - app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js
 - app/pb_kits/playbook/pb_rich_text_editor/useFocus.js
-- app/pb_kits/playbook/pb_section_separator/_section_separator.jsx
 - app/pb_kits/playbook/pb_section_separator/_section_separator.scss
+- app/pb_kits/playbook/pb_section_separator/_section_separator.tsx
 - app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss
 - app/pb_kits/playbook/pb_section_separator/docs/_description.md
 - app/pb_kits/playbook/pb_section_separator/docs/_footer.md
@@ -1860,8 +1860,8 @@ files:
 - app/pb_kits/playbook/pb_textarea/index.js
 - app/pb_kits/playbook/pb_textarea/textarea.html.erb
 - app/pb_kits/playbook/pb_textarea/textarea.rb
-- app/pb_kits/playbook/pb_time/_time.jsx
 - app/pb_kits/playbook/pb_time/_time.scss
+- app/pb_kits/playbook/pb_time/_time.tsx
 - app/pb_kits/playbook/pb_time/docs/_description.md
 - app/pb_kits/playbook/pb_time/docs/_footer.md
 - app/pb_kits/playbook/pb_time/docs/_time_align.html.erb
@@ -1990,15 +1990,27 @@ files:
 - app/pb_kits/playbook/pb_toggle/toggle.html.erb
 - app/pb_kits/playbook/pb_toggle/toggle.rb
 - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
+- app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/example.yml
+- app/pb_kits/playbook/pb_tooltip/docs/index.js
 - app/pb_kits/playbook/pb_tooltip/index.js
 - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
+- app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
 - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
 - app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
 - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
@@ -2052,6 +2064,8 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md
 - app/pb_kits/playbook/pb_typeahead/docs/example.yml
 - app/pb_kits/playbook/pb_typeahead/docs/index.js
 - app/pb_kits/playbook/pb_typeahead/index.js

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

@@ -1,138 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import DateTime from '../pb_kit/dateTime'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
-import Title from '../pb_title/_title'
-
-type PbDateProps = {
-  alignment?: "left" | "center" | "right",
-  aria: Object,
-  className?: string,
-  data?: Object,
-  id?: string,
-  showDayOfWeek?: boolean,
-  showIcon?: boolean,
-  size?: string,
-  value: string | date,
-}
-
-const PbDate = (props: PbDateProps) => {
-  const {
-    aria = {},
-    alignment = 'left',
-    className,
-    data = {},
-    id,
-    showDayOfWeek = false,
-    showIcon = false,
-    size = 'md',
-    value,
-  } = props
-
-  const dateTimestamp = new DateTime({ value: value })
-  const weekday = dateTimestamp.toWeekday()
-  const month = dateTimestamp.toMonth()
-  const day = dateTimestamp.toDay()
-  const year = dateTimestamp.toYear()
-  const currentYear = new Date().getFullYear().toString()
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-
-  const classes = classnames(
-    buildCss('pb_date_kit', alignment),
-    globalProps(props),
-    className
-  )
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <If condition={size == 'md' || size == 'lg'}>
-
-        <Title
-            size={4}
-            tag="h4"
-        >
-          <If condition={showIcon}>
-            <Body
-                className="pb_icon_kit_container"
-                color="light"
-                tag="span"
-            >
-              <Icon
-                  fixedWidth
-                  icon="calendar-alt"
-              />
-            </Body>
-          </If>
-          <If condition={showDayOfWeek}>
-            {weekday}
-            <Body
-                color="light"
-                tag="span"
-                text=" • "
-            />
-          </If>
-          <span>
-            {month}
-            {' '}
-            {day}
-          </span>
-          <If condition={currentYear != year}>
-            <span>
-              {`, ${year}`}
-            </span>
-          </If>
-        </Title>
-        <Else />
-        <>
-          <If condition={showIcon}>
-            <Caption
-                className="pb_icon_kit_container"
-                tag="span"
-            >
-              <Icon
-                  fixedWidth
-                  icon="calendar-alt"
-                  size="sm"
-              />
-            </Caption>
-          </If>
-          <If condition={showDayOfWeek}>
-            <Caption tag="div">
-              {weekday}
-            </Caption>
-            <Caption
-                color="light"
-                tag="div"
-                text=" • "
-            />
-          </If>
-          <Caption tag="span">
-            {month}
-            {' '}
-            {day}
-            <If condition={currentYear != year}>
-              {`, ${year}`}
-            </If>
-          </Caption>
-        </>
-      </If>
-    </div>
-  )
-}
-
-export default PbDate

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -1,93 +0,0 @@
-/* @flow */
-
-import React, { useEffect, useState } from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-
-import Icon from '../pb_icon/_icon'
-import Title from '../pb_title/_title'
-
-const iconMap = {
-  success: 'check',
-  error: 'exclamation-triangle',
-  neutral: 'info-circle',
-  tip: 'info-circle',
-}
-
-type FixedConfirmationToastProps = {
-  className?: string,
-  closeable?: boolean,
-  data?: string,
-  horizontal?: 'right' | 'left' | 'center',
-  id?: string,
-  multiLine?: boolean,
-  onClose?: () => void,
-  open?: boolean,
-  status?: 'success' | 'error' | 'neutral' | 'tip',
-  text: string,
-  vertical?: 'top' | 'bottom',
-}
-
-const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
-  const [showToast, toggleToast] = useState(true)
-  const {
-    className,
-    closeable = false,
-    horizontal,
-    multiLine = false,
-    onClose = () => {},
-    open = true,
-    status = 'neutral',
-    text,
-    vertical,
-  } = props
-  const css = classnames(
-    `pb_fixed_confirmation_toast_kit_${status}`,
-    { '_multi_line': multiLine },
-    { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
-    globalProps(props),
-    className
-  )
-  const icon = iconMap[status]
-
-  useEffect(() => {
-    toggleToast(open)
-  }, [open])
-
-  const handleClick = () => {
-    toggleToast(!closeable)
-    onClose()
-  }
-
-  return (
-    <If condition={showToast}>
-      <div
-          className={css}
-          onClick={handleClick}
-      >
-        <If condition={icon}>
-          <Icon
-              className="pb_icon"
-              fixedWidth
-              icon={icon}
-          />
-        </If>
-        <Title
-            className="pb_fixed_confirmation_toast_text"
-            size={4}
-            text={text}
-        />
-        <If condition={closeable}>
-          <Icon
-              className="pb_icon"
-              fixedWidth={false}
-              icon="times"
-          />
-        </If>
-      </div>
-    </If>
-  )
-}
-
-export default FixedConfirmationToast

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -1,90 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import DateTime from '../pb_kit/dateTime.js'
-import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
-
-type TimeProps = {
-  align?: 'left' | 'center' | 'right',
-  className?: string | array<string>,
-  data?: string,
-  date: string,
-  dark?: boolean,
-  id?: string,
-  showIcon?: boolean,
-  size?: 'md' | 'sm',
-  showTimezone?: boolean,
-  timeZone?: string,
-}
-
-const Time = (props: TimeProps) => {
-  const { align, className, date, showIcon, size, timeZone, showTimezone = true } = props
-  const classes = classnames(
-    buildCss('pb_time_kit', align, size),
-    globalProps(props),
-    className
-  )
-
-  const dateTimestamp = new DateTime({ value: date, zone: timeZone })
-
-  return (
-    <div className={classes}>
-      <If condition={showIcon}>
-        <Body
-            color="light"
-            tag="span"
-        >
-          <Icon
-              fixedWidth
-              icon="clock"
-              size={size === 'md' ? '' : 'sm'}
-          />
-        </Body>
-        {' '}
-      </If>
-
-      <time dateTime={date}>
-        <span>
-          <If condition={size === 'md'}>
-            <Body
-                className="pb_time"
-                tag="span"
-                text={dateTimestamp.toTimeWithMeridian()}
-            />
-            {' '}
-            <If condition={showTimezone}>
-              <Body
-                  color="light"
-                  tag="span"
-                  text={dateTimestamp.toTimezone()}
-              />
-            </If>
-            <Else />
-            <Caption
-                color="light"
-                tag="span"
-                text={dateTimestamp.toTimeWithMeridian()}
-            />
-            {' '}
-            <If condition={showTimezone}>
-              <Caption
-                  color="light"
-                  tag="span"
-                  text={dateTimestamp.toTimezone()}
-              />
-            </If>
-          </If>
-        </span>
-      </time>
-    </div>
-  )
-}
-
-export default Time