RubyGems - playbook_ui - Versions diffs - 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2 - Mend

playbook_ui 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2

Files changed (352) hide show

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb CHANGED

@@ -19,14 +19,13 @@
     name: tag(:slot, name: "name"),
     orientation: "horizontal",
     align: "left",
-    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
-    avatar: true
+    avatar_url: "placeholder"
     }) %>
 </template>
 <%= javascript_tag defer: "defer" do %>
   document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
+    if (!event.target.dataset.typeaheadExample) return;
     fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
       .then(response => response.json())
@@ -36,7 +35,7 @@
         event.detail.setResults((result.items || []).map((user) => {
           const wrapper = resultOptionTemplate.content.cloneNode(true)
           wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
-          wrapper.querySelector('img').dataset.src = user.avatar_url
+          wrapper.querySelector('img').setAttribute("src", user.avatar_url)
           return wrapper
         }))
       })

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb CHANGED

@@ -18,7 +18,7 @@
 <%= javascript_tag defer: "defer" do %>
   document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return;
+    if (!event.target.dataset.typeaheadExample2) return;
     const fuzzyMatch = function(string, term) {
       const ratio = 0.5;

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx CHANGED

@@ -10,9 +10,12 @@ const options = [
   { label: 'Roofs', value: '#0000FF' },
 ]
+import TypeaheadWithPillsSummary from './_typeahead_with_pills_summary'
 const TypeaheadWithPills = () => {
   return (
     <>
+      <TypeaheadWithPillsSummary />
       <Typeahead
           isMulti
           label="Colors"

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx ADDED

@@ -0,0 +1,45 @@
+/* @flow */
+import React from 'react'
+import { Body, Flex, FlexItem, Icon } from '../..'
+const TypeaheadWithPillsAsyncSummary = () => {
+  return (
+    <>
+      <Flex
+          marginBottom="lg"
+          vertical="center"
+      >
+        <FlexItem>
+          <Body
+              color="light"
+          >
+            <Icon
+                icon="info-circle"
+                marginRight="xs"
+            />
+          </Body>
+        </FlexItem>
+        <FlexItem>
+          <Body
+              color="light"
+          >
+            {'If the data field '}
+            <code>{'imageUrl'}</code>
+            {' is present, '}
+            <code>{'FormPill'}</code>
+            {' will receive that field as a prop and display the image. '}
+            <br />
+            {'Additionally, you can also leverage the callback prop: '}
+            <code>{'onMultiValueClick'}</code>
+            {' to perform custom work when a '}
+            <code>{'MultiValue'}</code>
+            {' item is clicked.'}
+          </Body>
+        </FlexItem>
+      </Flex>
+    </>
+  )
+}
+export default TypeaheadWithPillsAsyncSummary

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx CHANGED

@@ -8,6 +8,8 @@ import {
   User,
 } from '../..'
+import TypeaheadWithPillsAsyncSummary from './_typeahead_with_pills_async_summary'
 /**
  *
  * @const filterResults
@@ -63,6 +65,7 @@ const TypeaheadWithPillsAsyncUsers = () => {
   return (
     <>
+      <TypeaheadWithPillsAsyncSummary />
       <If condition={users && users.length > 0}>
         <Caption
             marginBottom="xs"

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx ADDED

@@ -0,0 +1,27 @@
+// @flow
+import React from 'react'
+import { Body, Icon } from '../..'
+const TypeaheadWithPillsSummary = () => {
+  return (
+    <>
+      <Body
+          color="light"
+          marginBottom="lg"
+      >
+        <Icon
+            icon="info-circle"
+            marginRight="xs"
+        />
+        {'Typeahead kit is data-driven. The minimum default fields are '}
+        <code>{'label'}</code>
+        {' and '}
+        <code>{'value'}</code>
+        {'.'}
+      </Body>
+    </>
+  )
+}
+export default TypeaheadWithPillsSummary

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

@@ -2,9 +2,6 @@ examples:
   rails:
     - typeahead_default: Default
     - typeahead_with_context_dark: With Context
-    - typeahead_with_pills: With Pills
-    - typeahead_with_pills_async: With Pills (Async Data)
-    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
   react:
     - typeahead_default: Default

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

@@ -5,19 +5,12 @@ module Playbook
     class Typeahead
       include Playbook::Props
-      prop :async, type: Playbook::Props::Boolean,
-                    default: false
       prop :label
-      prop :load_options
       prop :name
-      prop :options, type: Playbook::Props::HashArray, default: []
-      prop :pills, type: Playbook::Props::Boolean,
-                    default: false
+      prop :value
       prop :placeholder
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
-      prop :value
       partial "pb_typeahead/typeahead"
@@ -32,22 +25,6 @@ module Playbook
           pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
         )
       end
-      def typeahead_with_pills_options
-        base_options = {
-          isMulti: true,
-          label: label,
-          options: options,
-          placeholder: placeholder
-        }
-        base_options.merge!({
-          async: true,
-          loadOptions: load_options,
-        }) if async
-        base_options
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx CHANGED

@@ -26,11 +26,8 @@ const UserBadge = (props: UserBadgeProps) => {
   const image = require(`./badges/_${badge}.svg`)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_user_badge_kit', size),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_user_badge_kit', size), globalProps(props),
+    className)
   return (
     <div

data/app/pb_kits/playbook/props.rb CHANGED

@@ -124,7 +124,7 @@ module Playbook
       def prop(name, type: Playbook::Props::String, **options)
         @props ||= {}
-        @props[name] = type.new(options.merge(name: name, kit: self))
+        @props[name] = type.new(**options)
         define_method(name) { prop(name) }
       end

data/app/pb_kits/playbook/props/base.rb CHANGED

@@ -5,13 +5,11 @@ module Playbook
     class Error < StandardError; end
     class Base
-      attr_reader :default, :required, :name, :kit
+      attr_reader :default, :required
-      def initialize(default: nil, required: false, name:, kit:)
+      def initialize(default: nil, required: false)
         @default = default
         @required = required
-        @name = name
-        @kit = kit
       end
       def value(value)
@@ -19,10 +17,10 @@ module Playbook
       end
       def validate!(input_value)
-        raise(Playbook::Props::Error, "#{kit} prop '#{name}' of type #{inspect.class} is required and needs a value") if required && input_value.nil?
+        raise(Playbook::Props::Error, "#{inspect} is a required prop and needs to be provided a value") if required && input_value.nil?
         validate(value(input_value)) ||
-          raise(Playbook::Props::Error, "#{kit} has invalid value of '#{input_value.inspect}' for prop '#{name}' of type #{inspect.class}")
+          raise(Playbook::Props::Error, "Invalid value (#{input_value.inspect}) for prop (#{inspect})")
       end
       def validate(_value)

data/app/pb_kits/playbook/tokens/_colors.scss CHANGED

@@ -1,10 +1,10 @@
 @import "./opacity";
-/*=====================================
-Base colors should not be documented.
-Only document color use.
+//=====================================
+// Base colors should not be documented.
+// Only document color use.
-Colors -----------------------------*/
+// Colors -----------------------------
 $royal:               #0056CF;
 $purple:              #9E64E9;
 $teal:                #00C4D7;
@@ -22,11 +22,11 @@ $colors: (
   orange:             $orange
 );
-/* Specialty Gradient -----------------*/
+// Specialty Gradient -----------------
 $gradient_start:      #1C75F2;
 $gradient_end:        $royal;
-/* Interface colors -------------------*/
+// Interface colors -------------------
 $white:               #FFFFFF;
 $silver:              #F3F7FB;
 $slate:               #C1CDD6;
@@ -42,7 +42,7 @@ $interface_colors: (
 );
-/* Main colors ------------------------*/
+// Main colors ------------------------
 $primary:             $royal;
 $secondary:           $yellow;
 $tertiary:            $purple;
@@ -51,9 +51,9 @@ $main_colors: (
   secondary:          $secondary,
   tertiary:           $tertiary
 );
-/*=====================================
+//=====================================
-Background colors ------------------*/
+// Background colors ------------------
 $bg_light:            $silver;
 $bg_dark:             #0a0527;
 $background_colors: (
@@ -61,7 +61,7 @@ $background_colors: (
   bg_dark:            $bg_dark
 );
-/* Card colors ------------------*/
+// Card colors ------------------
 $card_light:          $white;
 $card_dark:           rgba($white, $opacity_1);
 $card_colors: (
@@ -74,15 +74,15 @@ $action_colors: (
   primary_action:            $primary-action
 );
-/* Active colors ----------------------*/
+// Active colors ----------------------
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #0082ff;
+$active_dark:         #0082ff;
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
 );
-/* Hover colors -----------------------*/
+// Hover colors -----------------------
 $hover_light:         darken($silver, 5%);
 $hover_dark:          rgba($white, $opacity_2);
 $hover_colors: (
@@ -90,7 +90,7 @@ $hover_colors: (
   hover_dark:         $hover_dark
 );
-/* Focus colors -----------------------*/
+// Focus colors -----------------------
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
@@ -98,7 +98,7 @@ $focus_input_colors: (
   focus_input_dark:         $focus_input_dark
 );
-/* Border colors ----------------------*/
+// Border colors ----------------------
 $border_light:        #E4E8F0;
 $border_dark:         rgba($white, $opacity_1);
 $border_colors: (
@@ -106,13 +106,13 @@ $border_colors: (
   border_dark:        $border_dark
 );
-/* Shadow colors ----------------------*/
+// Shadow colors ----------------------
 $shadow:        rgba(#3C6AAC, $opacity_2);
 $shadow_colors: (
   shadow:       $shadow,
 );
-/* Text colors ------------------------*/
+// Text colors ------------------------
 $text_lt_default:     $charcoal;
 $text_lt_light:       #919EAB;
 $text_lt_lighter:     $slate;
@@ -128,7 +128,7 @@ $text_colors: (
   text_dk_lighter:    $text_dk_lighter
 );
-/* Data colors ------------------------*/
+// Data colors ------------------------
 $data_1:              $royal;
 $data_2:              $yellow;
 $data_3:              $purple;
@@ -148,7 +148,7 @@ $data_colors: (
   data_8:             $data_8
 );
-/* Status colors ----------------------*/
+// Status colors ----------------------
 $success:             $green;
 $warning:             $yellow;
 $error:               $red;
@@ -174,10 +174,10 @@ $status_color_text: (
   primary:            $primary
 );
-/* Link colors ------------------------*/
+// Link colors ------------------------
 $primary_action:      $primary;
-/* Product colors ---------------------*/
+// Product colors ---------------------
 $windows:             $royal;
 $siding:              $yellow;
 $doors:               $teal;
@@ -195,7 +195,7 @@ $product_colors: (
   insulation:         $insulation
 );
-/* Category colors ---------------------*/
+// Category colors ---------------------
 $category_1:   $royal;
 $category_2:   #0CD2E5;
 $category_3:   $yellow;
@@ -252,6 +252,7 @@ $transparent: transparent;
 }
 :export {
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
       #{$name}: $color;

data/app/pb_kits/playbook/tokens/_typography.scss CHANGED

@@ -2,7 +2,7 @@
 $font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
-/* CLEAN UP AND REMOVE */
+// CLEAN UP AND REMOVE
 $font_jumbo:        36px;
 $font_largest:      32px;
 $font_larger:       28px;
@@ -29,7 +29,7 @@ $text_smaller:      $font_smaller;
 $text_smallest:     $font_smallest;
-/* Headings */
+// Headings
 $heading_1: 48px;
 $heading_2: 34px;
 $heading_3: $font_larger;
@@ -52,11 +52,11 @@ $lspace_super_loosest:    .2em;
-/* Standard Font Weights */
+// Standard Font Weights
 $bold:          600;
 $regular:       400;
-/* Non_Standard Font Weights */
+// Non_Standard Font Weights
 $extrabold:     900;
 $boldest:       800;
 $bolder:        700;

data/app/pb_kits/playbook/vendor.js CHANGED

@@ -12,15 +12,15 @@ window.datePickerHelper = datePickerHelper
 // Lazy image loading
 import 'lazysizes'
+import PbCollapsible from './pb_collapsible'
+PbCollapsible.start()
 import PbPopover from './pb_popover'
 PbPopover.start()
 import PbTooltip from './pb_tooltip'
 PbTooltip.start()
-import PbFixedConfirmationToast from './pb_fixed_confirmation_toast'
-PbFixedConfirmationToast.start()
 import PbTypeahead from './pb_typeahead'
 PbTypeahead.start()
@@ -28,8 +28,3 @@ import PbTable from './pb_table'
 PbTable.start()
 import 'flatpickr'
-// React-Rendered Rails Kits =====
-import WebpackerReact from 'webpacker-react'
-import * as ReactRailsPBKits from './react_rails_kits.js'
-WebpackerReact.setup({ ...ReactRailsPBKits })