playbook_ui 12.5.0.pre.alpha.datepicker1 → 12.5.0.pre.alpha.phonerails1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 327c132ebc8c159f50f33488ecef9d5cdaa9332dedfb1d100557c5c2e1f08aa9
-  data.tar.gz: 40b8ae76091ff0e087d4b3b2560d6aab6db9adde5686c65927cc863af69e78d0
+  metadata.gz: e827c4077969ef2258c6c650173ef5c8227d81aca0a0201c19ae0e136de1decb
+  data.tar.gz: aec0d42668e214f8a32b4220704c76af66a2b55a43fbeb0efb28eb6832c45d9a
 SHA512:
-  metadata.gz: 622a1cc9d58859cbc96dbd5682d928f910f1dd372591cbc8b1638edd1abf83b4489d32aa6cefa53766f8607f0048b0c6bf1d9f881f0f50e560c826ba49962acb
-  data.tar.gz: ad04ed9a79aef5146285899b45f4cc6e07b3a760ec52b7e4d31db2f3c3048f55d84e7fff7a2a592a53fc88aec7c81bc111711703871d054acbc8186a98920c81
+  metadata.gz: ed4ab9a7d46404031c54b2c4e22731d4260d00d2db11af3b280b03f92df607f1afd8a6f3b68d6b52aa6e8866605c5c7fa85c4598a4323b2dfbc6a9d5490ff196
+  data.tar.gz: 23d61876cc9d04ea7b378b9ecc896b5d4f0a8d04b336a2b3f0fbf81c24189cc8ac86cc2f0eb65b3760d2da51c9699798a8dbe38c20a98744c3076b6f450706ab

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -5,7 +5,8 @@
 @import "./sass_partials/inline_styles";
 @import "./sass_partials/month_and_year_styles";
 @import "./sass_partials/time_selection_styles";
-@import "./sass_partials/input_styles";
+
+
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -19,10 +20,8 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
-  &:focus,
-  :focus-within {
-    div.cal_icon_wrapper,
-    input.date_picker_input {
+  &:focus, :focus-within {
+    div.cal_icon_wrapper, input.text_input{
       @include transition_default;
       border-color: $primary;
     }
@@ -34,20 +33,18 @@
   @import "./sass_partials/header_styles";
   @import "./sass_partials/overrides";
 
-  .date_picker_input.flatpickr-input {
+  .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.tsx

@@ -5,13 +5,13 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import datePickerHelper from './date_picker_helper'
+
 import Icon from '../pb_icon/_icon'
-import Caption from '../pb_caption/_caption'
-import Body from '../pb_body/_body'
+import TextInput from '../pb_text_input/_text_input'
 
 type DatePickerProps = {
   allowInput?: boolean,
-  aria?: { [key: string]: string },
+  aria?: {[key: string]: string},
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
@@ -27,15 +27,15 @@ type DatePickerProps = {
   hideLabel?: boolean,
   id?: string,
   inLine?: boolean,
-  inputAria?: { [key: string]: string },
-  inputData?: { [key: string]: string },
-  inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
+  inputAria?: {[key: string]: string},
+  inputData?: {[key: string]: string},
+  inputOnChange?: (arg: string) => void,
   inputValue?: any,
   label?: string,
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId?: string,
+  pickerId?: ArrayLike<Node> | Node | string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -51,7 +51,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
 
   const {
-    allowInput = true,
+    allowInput = false,
     aria = {},
     className,
     dark = false,
@@ -68,8 +68,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     hideLabel = false,
     id,
     inLine = false,
-    inputAria = {},
-    inputData = {},
+    inputAria,
+    inputData,
     inputOnChange,
     inputValue,
     label = 'Date Picker',
@@ -87,14 +87,11 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     selectionType = '',
     showTimezone = false,
     staticPosition = true,
-    yearRange = [1900, 2100],
+    yearRange = [ 1900, 2100 ],
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const inputAriaProps = buildAriaProps(inputAria)
-  const inputDataProps = buildDataProps(inputData)
-
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
     globalProps(props),
@@ -131,13 +128,13 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
-    if (dark) {
+    if (dark){
       base += ' dark'
     }
-    if (hideLabel) {
+    if (hideLabel){
       base += ' no_label_shift'
     }
-    if (error) {
+    if (error){
       base += ' error'
     }
     return base
@@ -145,75 +142,61 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
-      <div
-        {...inputAriaProps}
-        {...inputDataProps}
-        className="input_wrapper">
-
-        <Caption
-          className="pb_date_picker_kit_label"
-          text={hideLabel ? null : label}
-        />
-
-        <div className="date_picker_input_wrapper">
-          <input
+      <div className="input_wrapper">
+        <TextInput
+            aria={inputAria}
             autoComplete="off"
-            className="date_picker_input"
+            dark={dark}
+            data={inputData}
             disabled={disableInput}
+            error={error}
             id={pickerId}
+            label={hideLabel ? null : label}
             name={name}
             onChange={inputOnChange}
             placeholder={placeholder}
             value={inputValue}
-          />
-
-          {error && <Body
-            status="negative"
-            text={error}
-            variant={null}
-          />
-          }
-        </div>
+        />
 
-        {!hideIcon &&
+        { !hideIcon &&
           <div
-            className={iconWrapperClass()}
-            id={`cal-icon-${pickerId}`}
+              className={iconWrapperClass()}
+              id={`cal-icon-${pickerId}`}
           >
-            <Icon
+          <Icon
               className="cal_icon"
               icon="calendar-alt"
-            />
-          </div>
+          />
+        </div>
         }
 
-        {hideIcon && inLine ?
+        { hideIcon && inLine ? 
           <div>
             <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-icon-plus`}
+                className={iconWrapperClass()}
+                id={`${pickerId}-icon-plus`}
             >
               <Icon
-                className="date-picker-plus-icon"
-                icon="plus"
+                  className="date-picker-plus-icon"
+                  icon="plus"
               />
             </div>
             <div
-              className={iconWrapperClass()}
-              id={`${pickerId}-angle-down`}
+                className={iconWrapperClass()}
+                id={`${pickerId}-angle-down`}
             >
-              <Icon
-                className="angle_down_icon"
-                icon="angle-down"
-              />
+                <Icon
+                    className="angle_down_icon"
+                    icon="angle-down" 
+                />
             </div>
-          </div>
-          : null}
+          </div>  
+        : null }
       </div>
     </div>
   )

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

@@ -4,7 +4,7 @@ module Playbook
   module PbDatePicker
     class DatePicker < Playbook::KitBase
       prop :allow_input, type: Playbook::Props::Boolean,
-                         default: true
+                         default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :default_date, type: Playbook::Props::String,

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -112,7 +112,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // ===========================================================
 
   flatpickr(`#${pickerId}`, {
-    allowInput,
     closeOnSelect,
     disableMobile: true,
     dateFormat: getDateFormat(),

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -1,32 +1,32 @@
 /* @flow */
-import React, { useEffect, useRef, useState } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-import intlTelInput from 'intl-tel-input'
-import 'intl-tel-input/build/css/intlTelInput.css'
-import TextInput from '../pb_text_input/_text_input'
+import React, { useEffect, useRef, useState } from "react"
+import classnames from "classnames"
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { globalProps } from "../utilities/globalProps"
+import intlTelInput from "intl-tel-input"
+import "intl-tel-input/build/css/intlTelInput.css"
+import TextInput from "../pb_text_input/_text_input"
 
 declare global {
   interface Window {
-    intlTelInputGlobals: any,
+    intlTelInputGlobals: any
   }
 }
 
 type PhoneNumberInputProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  disabled?: boolean,
-  id?: string,
-  initialCountry?: string,
-  isValid?: (valid: boolean) => void,
-  label?: string,
-  name?: string,
-  onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  onlyCountries: string[],
-  preferredCountries?: string[],
-  value?: string,
+  aria?: { [key: string]: string }
+  className?: string
+  data?: { [key: string]: string }
+  disabled?: boolean
+  id?: string
+  initialCountry?: string
+  isValid?: (valid: boolean) => void
+  label?: string
+  name?: string
+  onChange?: (e: React.FormEvent<HTMLInputElement>) => void
+  onlyCountries: string[]
+  preferredCountries?: string[]
+  value?: string
 }
 
 enum ValidationError {
@@ -35,17 +35,20 @@ enum ValidationError {
 }
 
 const formatToGlobalCountryName = (countryName: string) => {
-  return countryName.split('(')[0].trim()
+  return countryName.split("(")[0].trim()
 }
 
 const formatAllCountries = () => {
   let countryData = window.intlTelInputGlobals.getCountryData()
+
   for (let i = 0; i < countryData.length; i++) {
     let country = countryData[i]
     country.name = formatToGlobalCountryName(country.name)
   }
 }
 
+formatAllCountries()
+
 const containOnlyNumbers = (value: string) => {
   return /^(\++)*(\d+)$/.test(value)
 }
@@ -56,25 +59,33 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     className,
     data = {},
     disabled = false,
-    id = '',
-    initialCountry = '',
-    isValid = () => {void 0 },
-    label = '',
-    name = '',
-    onChange = () => { void 0 },
+    id = "",
+    initialCountry = "",
+    isValid = () => {
+      void 0
+    },
+    label = "",
+    name = "",
+    onChange = () => {
+      void 0
+    },
     onlyCountries = [],
     preferredCountries = [],
-    value = '',
+    value = "",
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_phone_number_input'), globalProps(props), className)
+  const classes = classnames(
+    buildCss("pb_phone_number_input"),
+    globalProps(props),
+    className
+  )
 
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
-  const [error, setError] = useState('')
+  const [error, setError] = useState("")
 
   const validateTooLongNumber = (itiInit: any) => {
     const error = itiInit.getValidationError()
@@ -83,7 +94,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       const countryName = itiInit.getSelectedCountryData().name
       setError(`Invalid ${countryName} phone number (too long)`)
     } else {
-      setError('')
+      setError("")
     }
   }
 
@@ -98,7 +109,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   const validateOnlyNumbers = () => {
     if (inputValue && !containOnlyNumbers(inputValue)) {
-      setError('Invalid phone number. Enter numbers only.')
+      setError("Invalid phone number. Enter numbers only.")
     }
   }
 
@@ -114,29 +125,32 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     isValid(itiInit.isValidNumber())
   }
 
+  // Separating Concerns as React Docs Recommend
+  // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(() => {
     formatAllCountries()
+  }, [])
 
+  useEffect(() => {
     const telInputInit = new intlTelInput(inputRef.current, {
-        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js',
-        separateDialCode: true,
-        preferredCountries,
-        allowDropdown: !disabled,
-        initialCountry,
-        onlyCountries,
-      }
+      utilsScript:
+        "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js",
+      separateDialCode: true,
+      preferredCountries,
+      allowDropdown: !disabled,
+      initialCountry,
+      onlyCountries,
+    })
+
+    inputRef.current.addEventListener("countrychange", () =>
+      validateTooLongNumber(telInputInit)
     )
-    
-    inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
+
     setItiInit(telInputInit)
   }, [])
 
   return (
-    <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-    >
+    <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
         disabled={disabled}
         error={error}

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

@@ -7,4 +7,7 @@ examples:
   - phone_number_input_only_countries: Limited Countries
 
   rails:
-  - phone_number_input_default: Default
+  - phone_number_input_default: Default
+  - phone_number_input_preferred_countries: Preferred Countries
+  - phone_number_input_initial_country: Initial Country
+  - phone_number_input_only_countries: Limited Countries

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb

@@ -1,15 +1 @@
-<%= react_component("PhoneNumberInput", object.phone_number_input_options) %>
-
-<script>
-  const formatToGlobalCountryName = () => {
-    return countryName.split('(')[0].trim()
-  }
-  
-  const formatAllCountries = () => {
-    let countryData = window.intlTelInputGlobals.getCountryData()
-    for (let i = 0; i < countryData.length; i++) {
-      let country = countryData[i]
-      country.name = formatToGlobalCountryName(country.name)
-    }
-  }
-  </script>
+<%= react_component("PhoneNumberInput", object.phone_number_input_options) %>

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.5.0"
-  VERSION = "12.5.0.pre.alpha.datepicker1"
+  VERSION = "12.5.0.pre.alpha.phonerails1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.5.0.pre.alpha.datepicker1
+  version: 12.5.0.pre.alpha.phonerails1
 platform: ruby
 authors:
 - Power UX
@@ -332,15 +332,6 @@ files:
 - app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
 - app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
 - app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js
-- app/pb_kits/playbook/pb_awesome/_awesome.scss
-- app/pb_kits/playbook/pb_awesome/_awesome.tsx
-- app/pb_kits/playbook/pb_awesome/awesome.html.erb
-- app/pb_kits/playbook/pb_awesome/awesome.rb
-- app/pb_kits/playbook/pb_awesome/awesome.test.jsx
-- app/pb_kits/playbook/pb_awesome/docs/_awesome_default.html.erb
-- app/pb_kits/playbook/pb_awesome/docs/_awesome_default.jsx
-- app/pb_kits/playbook/pb_awesome/docs/example.yml
-- app/pb_kits/playbook/pb_awesome/docs/index.js
 - app/pb_kits/playbook/pb_background/_background.scss
 - app/pb_kits/playbook/pb_background/_background.tsx
 - app/pb_kits/playbook/pb_background/background.html.erb
@@ -644,24 +635,6 @@ 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_cool/_cool.scss
-- app/pb_kits/playbook/pb_cool/_cool.tsx
-- app/pb_kits/playbook/pb_cool/cool.html.erb
-- app/pb_kits/playbook/pb_cool/cool.rb
-- app/pb_kits/playbook/pb_cool/cool.test.jsx
-- app/pb_kits/playbook/pb_cool/docs/_cool_default.html.erb
-- app/pb_kits/playbook/pb_cool/docs/_cool_default.jsx
-- app/pb_kits/playbook/pb_cool/docs/example.yml
-- app/pb_kits/playbook/pb_cool/docs/index.js
-- app/pb_kits/playbook/pb_coolness/_coolness.scss
-- app/pb_kits/playbook/pb_coolness/_coolness.tsx
-- app/pb_kits/playbook/pb_coolness/coolness.html.erb
-- app/pb_kits/playbook/pb_coolness/coolness.rb
-- app/pb_kits/playbook/pb_coolness/coolness.test.jsx
-- app/pb_kits/playbook/pb_coolness/docs/_coolness_default.html.erb
-- app/pb_kits/playbook/pb_coolness/docs/_coolness_default.jsx
-- app/pb_kits/playbook/pb_coolness/docs/example.yml
-- app/pb_kits/playbook/pb_coolness/docs/index.js
 - 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
@@ -781,7 +754,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss
-- app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
@@ -1584,7 +1556,6 @@ files:
 - app/pb_kits/playbook/pb_person_contact/docs/index.js
 - app/pb_kits/playbook/pb_person_contact/person_contact.html.erb
 - app/pb_kits/playbook/pb_person_contact/person_contact.rb
-- app/pb_kits/playbook/pb_phone_number_input/PhoneNumberHelper.js
 - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
 - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
@@ -1988,15 +1959,6 @@ files:
 - app/pb_kits/playbook/pb_table/table.test.js
 - app/pb_kits/playbook/pb_table/table_row.html.erb
 - app/pb_kits/playbook/pb_table/table_row.rb
-- app/pb_kits/playbook/pb_test/_test.scss
-- app/pb_kits/playbook/pb_test/_test.tsx
-- app/pb_kits/playbook/pb_test/docs/_test_default.html.erb
-- app/pb_kits/playbook/pb_test/docs/_test_default.jsx
-- app/pb_kits/playbook/pb_test/docs/example.yml
-- app/pb_kits/playbook/pb_test/docs/index.js
-- app/pb_kits/playbook/pb_test/test.html.erb
-- app/pb_kits/playbook/pb_test/test.rb
-- app/pb_kits/playbook/pb_test/test.test.jsx
 - app/pb_kits/playbook/pb_text_input/_text_input.scss
 - app/pb_kits/playbook/pb_text_input/_text_input.tsx
 - app/pb_kits/playbook/pb_text_input/add_on.html.erb

data/app/pb_kits/playbook/pb_awesome/_awesome.scss

@@ -1,3 +0,0 @@
-.pb_awesome {
-
-}

data/app/pb_kits/playbook/pb_awesome/_awesome.tsx

@@ -1,41 +0,0 @@
-
-
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-type AwesomeProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-}
-
-const Awesome = (props: AwesomeProps) => {
-  const {
-    aria = {},
-  className,
-  data = {},
-  id,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_awesome'), globalProps(props), className)
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      {className}
-    </div>
-  )
-}
-
-export default Awesome

data/app/pb_kits/playbook/pb_awesome/awesome.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-  <span>AWESOME CONTENT</span>
-<% end %>

data/app/pb_kits/playbook/pb_awesome/awesome.rb

@@ -1,8 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbAwesome
-    class Awesome < ::Playbook::KitBase
-    end
-  end
-end

data/app/pb_kits/playbook/pb_awesome/awesome.test.jsx

@@ -1,17 +0,0 @@
-import { ensureAccessible, renderKit } from '../utilities/test-utils'
-
-import { Awesome } from '../'
-
-/* See these resources for more testing info:
-  - https://github.com/testing-library/jest-dom#usage for useage and examples
-  - https://jestjs.io/docs/en/using-matchers
-*/
-
-test('generated scaffold test - update me', () => {
-  const props = {
-    data: { testid: 'default' }
-  }
-
-  const kit = renderKit(Awesome , props)
-  expect(kit).toBeInTheDocument()
-})

data/app/pb_kits/playbook/pb_awesome/docs/_awesome_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("awesome") %>

data/app/pb_kits/playbook/pb_awesome/docs/_awesome_default.jsx

@@ -1,12 +0,0 @@
-import React from 'react'
-import Awesome from '../_Awesome'
-
-const AwesomeDefault = (props) => (
-  <div>
-    <Awesome
-      {...props}
-    />
-  </div>
-)
-
-export default AwesomeDefault

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

@@ -1,9 +0,0 @@
-examples:
-  
-  rails:
-  - awesome_default: Default
-  
-  
-  react:
-  - awesome_default: Default
-  

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

@@ -1 +0,0 @@
-export { default as AwesomeDefault } from './_awesome_default.jsx'

data/app/pb_kits/playbook/pb_cool/_cool.scss

@@ -1,3 +0,0 @@
-.pb_cool {
-
-}

data/app/pb_kits/playbook/pb_cool/_cool.tsx

@@ -1,41 +0,0 @@
-
-
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-type CoolProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-}
-
-const Cool = (props: CoolProps) => {
-  const {
-    aria = {},
-  className,
-  data = {},
-  id,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_cool'), globalProps(props), className)
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      {className}
-    </div>
-  )
-}
-
-export default Cool

data/app/pb_kits/playbook/pb_cool/cool.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-  <span>COOL CONTENT</span>
-<% end %>

data/app/pb_kits/playbook/pb_cool/cool.rb

@@ -1,8 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbCool
-    class Cool < ::Playbook::KitBase
-    end
-  end
-end

data/app/pb_kits/playbook/pb_cool/cool.test.jsx

@@ -1,17 +0,0 @@
-import { ensureAccessible, renderKit } from '../utilities/test-utils'
-
-import { Cool } from '../'
-
-/* See these resources for more testing info:
-  - https://github.com/testing-library/jest-dom#usage for useage and examples
-  - https://jestjs.io/docs/en/using-matchers
-*/
-
-test('generated scaffold test - update me', () => {
-  const props = {
-    data: { testid: 'default' }
-  }
-
-  const kit = renderKit(Cool , props)
-  expect(kit).toBeInTheDocument()
-})

data/app/pb_kits/playbook/pb_cool/docs/_cool_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("cool") %>

data/app/pb_kits/playbook/pb_cool/docs/_cool_default.jsx

@@ -1,12 +0,0 @@
-import React from 'react'
-import Cool from '../_Cool'
-
-const CoolDefault = (props) => (
-  <div>
-    <Cool
-      {...props}
-    />
-  </div>
-)
-
-export default CoolDefault

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

@@ -1,9 +0,0 @@
-examples:
-  
-  rails:
-  - cool_default: Default
-  
-  
-  react:
-  - cool_default: Default
-  

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

@@ -1 +0,0 @@
-export { default as CoolDefault } from './_cool_default.jsx'

data/app/pb_kits/playbook/pb_coolness/_coolness.scss

@@ -1,3 +0,0 @@
-.pb_coolness {
-
-}

data/app/pb_kits/playbook/pb_coolness/_coolness.tsx

@@ -1,41 +0,0 @@
-
-
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-type CoolnessProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-}
-
-const Coolness = (props: CoolnessProps) => {
-  const {
-    aria = {},
-  className,
-  data = {},
-  id,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_coolness'), globalProps(props), className)
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      {className}
-    </div>
-  )
-}
-
-export default Coolness

data/app/pb_kits/playbook/pb_coolness/coolness.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-  <span>COOLNESS CONTENT</span>
-<% end %>

data/app/pb_kits/playbook/pb_coolness/coolness.rb

@@ -1,8 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbCoolness
-    class Coolness < ::Playbook::KitBase
-    end
-  end
-end

data/app/pb_kits/playbook/pb_coolness/coolness.test.jsx

@@ -1,17 +0,0 @@
-import { ensureAccessible, renderKit } from '../utilities/test-utils'
-
-import { Coolness } from '../'
-
-/* See these resources for more testing info:
-  - https://github.com/testing-library/jest-dom#usage for useage and examples
-  - https://jestjs.io/docs/en/using-matchers
-*/
-
-test('generated scaffold test - update me', () => {
-  const props = {
-    data: { testid: 'default' }
-  }
-
-  const kit = renderKit(Coolness , props)
-  expect(kit).toBeInTheDocument()
-})

data/app/pb_kits/playbook/pb_coolness/docs/_coolness_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("coolness") %>

data/app/pb_kits/playbook/pb_coolness/docs/_coolness_default.jsx

@@ -1,12 +0,0 @@
-import React from 'react'
-import Coolness from '../_Coolness'
-
-const CoolnessDefault = (props) => (
-  <div>
-    <Coolness
-      {...props}
-    />
-  </div>
-)
-
-export default CoolnessDefault

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

@@ -1,9 +0,0 @@
-examples:
-  
-  rails:
-  - coolness_default: Default
-  
-  
-  react:
-  - coolness_default: Default
-  

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

@@ -1 +0,0 @@
-export { default as CoolnessDefault } from './_coolness_default.jsx'

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

@@ -1,68 +0,0 @@
-@import "../../pb_textarea/textarea_mixin";
-
-[class^=pb_date_picker_kit] {
-  margin-bottom: $space_sm;
-
-  .pb_date_picker_kit_label {
-    margin-bottom: $space_xs;
-    display: block;
-  }
-
-  .date_picker_input_wrapper {
-    display: block;
-
-    input::placeholder,
-    .date_picker_input .placeholder {
-      @include pb_body_light;
-    }
-
-    input,
-    .date_picker_input {
-      max-height: 45px;
-      @include pb_textarea_light;
-      overflow: hidden;
-    }
-
-    input:hover,
-    .date_picker_input:hover {
-      background-color: rgba($focus_input_light, $opacity_5);
-    }
-
-    input:focus,
-    .date_picker_input:focus,
-    input:-webkit-autofill:focus,
-    .date_picker_input:-webkit-autofill:focus {
-      @include pb_textarea_focus;
-      @include transition_default;
-      border-color: $primary;
-      background-color: rgba($focus_input_light, $opacity_5);
-    }
-  }
-
-  &.error {
-    .date_picker_input_wrapper {
-      [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
-      }
-
-      input,
-      .date_picker_input {
-        border-color: $error;
-      }
-    }
-  }
-
-  &.inline {
-    .date_picker_input_wrapper input::placeholder,
-    .date_picker_input_wrapper .date_picker_input .placeholder {
-      opacity: 1;
-    }
-
-    &:not(:hover) {
-      .date_picker_input_wrapper input:not(:focus) {
-        background-color: transparent;
-        border-color: transparent;
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_phone_number_input/PhoneNumberHelper.js

@@ -1,12 +0,0 @@
-
-const PhoneNumberHelper = () => {
-  // window.addEventListener('DOMContentLoaded', () => {
-    for (let i = 0; i < window.intlTelInputGlobals.getCountryData().length; i++) {
-      let country = window.intlTelInputGlobals.getCountryData()[i]
-      country.name = country.name.split("(")[0].trim()
-      console.log(country.name)
-    }
-  // })
-};
-
-export default PhoneNumberHelper;

data/app/pb_kits/playbook/pb_test/_test.scss

@@ -1,3 +0,0 @@
-.pb_test {
-
-}

data/app/pb_kits/playbook/pb_test/_test.tsx

@@ -1,41 +0,0 @@
-
-
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-type TestProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-}
-
-const Test = (props: TestProps) => {
-  const {
-    aria = {},
-  className,
-  data = {},
-  id,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_test'), globalProps(props), className)
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      {className}
-    </div>
-  )
-}
-
-export default Test

data/app/pb_kits/playbook/pb_test/docs/_test_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("test") %>

data/app/pb_kits/playbook/pb_test/docs/_test_default.jsx

@@ -1,12 +0,0 @@
-import React from 'react'
-import Test from '../_Test'
-
-const TestDefault = (props) => (
-  <div>
-    <Test
-      {...props}
-    />
-  </div>
-)
-
-export default TestDefault

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

@@ -1,9 +0,0 @@
-examples:
-  
-  rails:
-  - test_default: Default
-  
-  
-  react:
-  - test_default: Default
-  

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

@@ -1 +0,0 @@
-export { default as TestDefault } from './_test_default.jsx'

data/app/pb_kits/playbook/pb_test/test.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-  <span>TEST CONTENT</span>
-<% end %>

data/app/pb_kits/playbook/pb_test/test.rb

@@ -1,8 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbTest
-    class Test < ::Playbook::KitBase
-    end
-  end
-end

data/app/pb_kits/playbook/pb_test/test.test.jsx

@@ -1,17 +0,0 @@
-import { ensureAccessible, renderKit } from '../utilities/test-utils'
-
-import { Test } from '../'
-
-/* See these resources for more testing info:
-  - https://github.com/testing-library/jest-dom#usage for useage and examples
-  - https://jestjs.io/docs/en/using-matchers
-*/
-
-test('generated scaffold test - update me', () => {
-  const props = {
-    data: { testid: 'default' }
-  }
-
-  const kit = renderKit(Test , props)
-  expect(kit).toBeInTheDocument()
-})