playbook_ui 10.6.2.pre.alpha.dep → 10.9.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 361df619e970d5e3d935da11689effd50fda787b550e94a0b2ffa918d6d4e558
-  data.tar.gz: 725ccf3c38f4cb117bf8845bc7d5cdf852f1146b70e632e3cc2456a354d3301b
+  metadata.gz: 0f41755bbc837eb37df7584ecc4025c5dd255f89fdc3788ad314a820ebfb599b
+  data.tar.gz: 03cf4ef976924745af89a4f801e82e23842b9e7646ef108ccd52c8c86f9b5ff8
 SHA512:
-  metadata.gz: 00f7c8a62559d90263a71aaeba3f837c37448e170eff51eee848964321028a6fc7ac1e19a9341a98140d474adc7c9081ab40f8a004335058e6a3549602b4b3d1
-  data.tar.gz: 07d4883c55d61a9e8e2ced35c43d738995a4bb7fe3f8625e7d2b2744bbf0bac181846216676cf5f5e2e598a9496063ff0c476a1356e538b78e922803391b4120
+  metadata.gz: d7d35bbfb68a3bd769430e100dec90b7ccb942764965af94da821cb6d8a3ec2f9d81135e9480200598b8c868bd7369d56deaff5b864181711fa7b416b4fbbc39
+  data.tar.gz: 756c55c68d59f56ba7299812b6d113542fa3461a49ab5a3835fb23bbe925d311685108e4642a016b414399d360365fab3f4495f355b8517d223339a7e7bb11e7

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

@@ -27,6 +27,7 @@ type DatePickerProps = {
   hideIcon?: Boolean,
   hideLabel?: Boolean,
   id?: String,
+  inLine?: Boolean,
   inputAria?: object,
   inputData?: object,
   inputOnChange?: (String) => void,
@@ -59,6 +60,7 @@ const DatePicker = (props: DatePickerProps) => {
     hideIcon = false,
     hideLabel = false,
     id,
+    inLine = true,
     inputAria,
     inputData,
     inputOnChange,
@@ -92,6 +94,7 @@ const DatePicker = (props: DatePickerProps) => {
       disableWeekdays: disableWeekdays,
       format: format,
       hideIcon: hideIcon,
+      inLine: inLine,
       maxDate: maxDate,
       minDate: minDate,
       mode: mode,
@@ -137,6 +140,7 @@ const DatePicker = (props: DatePickerProps) => {
             placeholder={placeholder}
             value={inputValue}
         />
+
         <If condition={!hideIcon}>
           <div
               className={iconWrapperClass()}
@@ -148,6 +152,28 @@ const DatePicker = (props: DatePickerProps) => {
             />
           </div>
         </If>
+
+        <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`}
+          >
+            <Icon
+                className="angle_down_icon"
+                icon="angle-down"
+            />
+          </div>
+        </If>
+
       </div>
     </div>
   )

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

@@ -2,6 +2,7 @@
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/colors";
 @import "./sass_partials/flatpickr_styles";
+@import "./sass_partials/inline_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -36,5 +37,5 @@
       border-color: $primary;
     }
   }
-  
+
 }

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -32,6 +32,31 @@
         }) %>
       </div>
     <% end %>
+
+    <!-- Inline -->
+    <% if object.hide_icon && object.inline %>
+      <!-- Plus Icon -->
+      <div
+          class="<%= object.icon_wrapper_class %>"
+          id="<%= object.picker_id %>-icon-plus"
+      >
+        <%= pb_rails("icon", props: {
+          classname: "plus-icon",
+          icon: "plus"
+        }) %>
+      </div>
+
+      <!-- Angle Down Icon -->
+      <div
+          class="<%= object.icon_wrapper_class %>"
+          id="<%= object.picker_id %>-angle-down"
+      >
+        <%= pb_rails("icon", props: {
+          classname: "angle_down_icon",
+          icon: "angle-down"
+        }) %>
+      </div>
+    <% end %>
   </div>
 
   <%= javascript_tag do %>

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

@@ -24,6 +24,8 @@ module Playbook
                        default: false
       prop :hide_label, type: Playbook::Props::Boolean,
                         default: false
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
       prop :label, type: Playbook::Props::String,
                    default: "Date Picker"
       prop :input_aria, type: Playbook::Props::Hash,
@@ -57,6 +59,7 @@ module Playbook
           disableWeekdays: disable_weekdays,
           format: format,
           hideIcon: hide_icon,
+          inline: inline,
           maxDate: max_date,
           minDate: min_date,
           mode: mode,

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -0,0 +1,17 @@
+<%= pb_rails("date_picker", props: {
+  classname: "inline-date-picker",
+  hide_icon: true,
+  inline: true,
+  picker_id: "date-picker-inline"
+}) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", (event) => {
+    const fpInline = document.querySelector("#date-picker-inline")._flatpickr
+    <!-- Display the angle-down icon when a date has been selected -->
+    const showAngleDownHandler = () => {
+      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
+    }
+    fpInline.config.onChange.push(showAngleDownHandler)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerInline = (props) => {
+  const showAngleDownHandler = (dateSelected) => {
+    if (dateSelected) {
+      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
+    }
+  }
+
+  return (
+    <div>
+      <DatePicker
+          className="inline-date-picker"
+          hideIcon
+          inLine
+          onChange={showAngleDownHandler}
+          pickerId="date-picker-inline"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DatePickerInline

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

@@ -1,5 +1,5 @@
 examples:
-  
+
   rails:
   - date_picker_default: Default
   - date_picker_hide_icon: Hide Input Icon
@@ -15,8 +15,9 @@ examples:
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
   - date_picker_anti_patterns: Anti-Patterns
-  
-  
+  - date_picker_inline: Inline
+
+
   react:
   - date_picker_default: Default
   - date_picker_hide_icon: Hide Input Icon
@@ -32,3 +33,4 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_inline: Inline

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

@@ -12,3 +12,4 @@ export { default as DatePickerError } from './_date_picker_error.jsx'
 export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
 export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_methods.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
+export { default as DatePickerInline } from './_date_picker_inline.jsx'

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

@@ -0,0 +1,169 @@
+  /*
+    === Date Picker States ===
+    Default - No value in date picker - display grey Plus icon
+    Hover - No value in date picker - display blue Plus icon
+   - After Value in Date Picker -
+      Default - display grey caret icon
+      Hover - display blue caret icon
+  */
+[class^=pb_date_picker_kit] {
+  /*Default - No value in date picker*/
+  &.inline-date-picker {
+    &:not(:hover) {
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          color: $slate;
+          display: inline-block;
+        }
+      }
+    }
+    &:hover {
+      [class^="pb_text_input_kit"] .text_input_wrapper input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .text_input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+        color: $primary;
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: inline-block;
+          color: $primary;
+        }
+      }
+    }
+    &.show-angle-down-icon {
+      &:not(:hover) {
+        #date-picker-inline-angle-down {
+          svg {
+            display: inline-block;
+            color: $text_lt_light;
+          }
+        }
+        #date-picker-inline-icon-plus {
+          svg {
+            display: none;
+          }
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: inline-block;
+          color: $primary;
+        }
+      }
+    }
+    #date-picker-inline,
+    #date-picker-inline .active {
+      border: none;
+      padding: 5px 5px 5px 10px;
+      background-color: #FFF;
+      &:hover {
+        background: rgba(0,130,255,0.1);
+        transition: background-color 0.2s ease;
+        box-shadow: none;
+      }
+    }
+    #date-picker-inline-angle-down,
+    #date-picker-inline-icon-plus {
+      height: 33px;
+      border: none;
+    }
+  }
+}
+
+/*
+  DARK MODE
+*/
+[class^=pb_date_picker_kit].dark {
+  &.inline-date-picker {
+    &:not(:hover) {
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: inline-block;
+          color: $white;
+        }
+      }
+    }
+    &:hover {
+      [class^="pb_text_input_kit"] .text_input_wrapper input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .text_input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+        color: $white;
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: inline-block;
+          color: $white;
+        }
+      }
+    }
+    &.show-angle-down-icon {
+      &:not(:hover) {
+        #date-picker-inline-angle-down {
+          svg {
+            display: inline-block;
+            color: $white;
+          }
+        }
+        #date-picker-inline-icon-plus {
+          svg {
+            display: none;
+          }
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: inline-block;
+          color: $white;
+        }
+      }
+    }
+    #date-picker-inline,
+    #date-picker-inline .active {
+      background-color: rgba($white,.10);
+      border: none;
+      padding: 5px 5px 5px 10px;
+      &:hover {
+        background: rgba(0,130,255,0.1);
+        transition: background-color 0.2s ease;
+        box-shadow: none;
+      }
+    }
+    #date-picker-inline-angle-down,
+    #date-picker-inline-icon-plus {
+      height: 33px;
+      border: none;
+    }
+  }
+}

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

@@ -103,13 +103,13 @@ const Dialog = (props: DialogProps) => {
           {...ariaProps}
           {...dataProps}
           className={classes}
-          id={id}
       >
         <Modal
             ariaHideApp={false}
             className={dialogClassNames}
             closeTimeoutMS={200}
             contentLabel="Minimal Modal Example"
+            id={id}
             isOpen={modalIsOpened}
             onRequestClose={onClose}
             overlayClassName={overlayClassNames}

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -1,6 +1,10 @@
 import React from 'react'
 import { Button, Filter, Flex, Select, TextInput } from '../../'
 
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
+
 const FilterDefault = (props) => {
   const options = [
     { value: 'USA' },
@@ -18,6 +22,7 @@ const FilterDefault = (props) => {
             'Full Name': 'John Wick',
             'City': 'San Francisco',
           }}
+          onSortChange={SortingChangeCallback}
           results={1}
           sortOptions={{
             popularity: 'Popularity',
@@ -62,6 +67,7 @@ const FilterDefault = (props) => {
 
       <Filter
           double
+          onSortChange={SortingChangeCallback}
           results={1}
           sortOptions={{
             popularity: 'Popularity',

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -115,9 +115,10 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     const trixEditorContainer = clickedElement.closest('.pb_rich_text_editor_kit')
     if (!trixEditorContainer) return
 
-    if (clickedElement.nodeName === 'A' && clickedElement.hasAttribute('href')) {
-      window.open(clickedElement.href)
-    }
+    const anchorElement = clickedElement.closest('a')
+    if (!anchorElement) return
+
+    if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
   }
 
   const handleClick = (event) => {

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -20,6 +20,7 @@ type TextareaProps = {
   disabled?: boolean,
   error?: string,
   id?: string,
+  inline?: boolean,
   object?: string,
   method?: string,
   label?: string,
@@ -38,6 +39,7 @@ const Textarea = ({
   className,
   children,
   disabled,
+  inline = false,
   resize = 'none',
   error,
   label,
@@ -58,8 +60,9 @@ const Textarea = ({
   })
 
   const errorClass = error ? 'error' : null
+  const inlineClass = inline ? 'inline' : ''
   const resizeClass = `resize_${resize}`
-  const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)
+  const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
 
   const characterCounter = () => {
     return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : checkIfZero(characterCount)

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -67,6 +67,17 @@
     }
   }
 
+  &.inline {
+    textarea {
+      &:not(:hover) {
+        border-color: transparent;
+      }
+      &:focus {
+        border-color: $primary;
+      }
+    }
+  }
+
   .pb_caption_kit_xs {
     text-align: right;
   }

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("textarea", props: {
+  inline: true,
+  resize: "auto",
+  rows: 1,
+  value:"Try clicking into this text."
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaInline = (props) => {
+  const [value, setValue] = useState('Try clicking into this text.')
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+  return (
+    <div>
+      <Textarea
+          inline
+          onChange={(e) => handleChange(e)}
+          resize="auto"
+          rows={1}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaInline

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

@@ -6,6 +6,7 @@ examples:
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
+  - textarea_inline: Inline
 
   react:
   - textarea_default: Default
@@ -13,3 +14,4 @@ examples:
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
+  - textarea_inline: Inline

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

@@ -3,3 +3,4 @@ export { default as TextareaResize } from './_textarea_resize.jsx'
 export { default as TextareaCustom } from './_textarea_custom.jsx'
 export { default as TextareaError } from './_textarea_error.jsx'
 export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
+export { default as TextareaInline } from './_textarea_inline.jsx'

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbTextarea
     class Textarea < Playbook::KitBase
       prop :error
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
       prop :label
       prop :method
       prop :name
@@ -19,7 +21,7 @@ module Playbook
       prop :max_characters
 
       def classname
-        generate_classname("pb_textarea_kit") + error_class + resize_class
+        generate_classname("pb_textarea_kit") + error_class + resize_class + inline_class
       end
 
       def character_counter
@@ -32,6 +34,10 @@ module Playbook
         error ? " error" : ""
       end
 
+      def inline_class
+        inline ? " inline" : ""
+      end
+
       def resize_class
         " resize_#{resize}"
       end

data/dist/reset.css

@@ -1,61 +1,2 @@
-/* CLEAN UP AND REMOVE */
-/* Headings */
-/* Standard Font Weights */
-/* Non_Standard Font Weights */
-/*=====================================
-Base colors should not be documented.
-Only document color use.
-
-Colors -----------------------------*/
-/* Specialty Gradient -----------------*/
-/* Interface colors -------------------*/
-/* Main colors ------------------------*/
-/*=====================================
-
-Background colors ------------------*/
-/* Card colors ------------------*/
-/* Active colors ----------------------*/
-/* Hover colors -----------------------*/
-/* Focus colors -----------------------*/
-/* Border colors ----------------------*/
-/* Shadow colors ----------------------*/
-/* Text colors ------------------------*/
-/* Data colors ------------------------*/
-/* Status colors ----------------------*/
-/* Link colors ------------------------*/
-/* Product colors ---------------------*/
-/* Category colors ---------------------*/
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0; }
-  *:before, *:after {
-    box-sizing: border-box; }
-
-html {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  height: 100vh;
-  overflow-x: hidden; }
-
-body {
-  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
-  font-size: 16px;
-  line-height: 1.5;
-  background-color: #F3F7FB;
-  height: 100%;
-  letter-spacing: 0;
-  font-weight: 400;
-  font-style: normal;
-  text-rendering: optimizeLegibility;
-  -moz-font-feature-settings: "liga" on;
-  color: #242B42;
-  margin: 0 !important;
-  padding: 0 !important;
-  box-sizing: border-box;
-  min-height: 100vh;
-  padding: 50px; }
-
-a {
-  text-decoration: none;
-  color: #0056CF; }
+*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.5.0"
-  VERSION = "10.6.2.pre.alpha.dep"
+  PREVIOUS_VERSION = "10.8.0"
+  VERSION = "10.9.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.6.2.pre.alpha.dep
+  version: 10.9.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-26 00:00:00.000000000 Z
+date: 2021-09-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -169,20 +169,6 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 1.15.2
-- !ruby/object:Gem::Dependency
-  name: overcommit
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 0.49.0
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 0.49.0
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -301,7 +287,6 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- README.md
 - Rakefile
 - app/pb_kits/playbook/_playbook.scss
 - app/pb_kits/playbook/_reset.scss
@@ -661,6 +646,8 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md
@@ -683,6 +670,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
 - 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/_overrides.scss
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -1750,6 +1738,8 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
 - app/pb_kits/playbook/pb_textarea/docs/example.yml

data/README.md

@@ -1,73 +0,0 @@
-# Playbook Design System
-
-Playbook is the first design system built for both Rails & React interfaces. Inspired by [Velocity](https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit/), Playbook takes a modern design approach, and applies it in a way that makes it easy to support bleeding edge, or legacy systems. Playbook is built & maintained by the User Experience & Development teams at Power Home Remodeling, the largest home remodeler in the US.
-
-## Requirements
-
-- Docker 17.09 or later
-- Docker Compose 1.17.1 or later
-
-## Getting started
-
-1. Run `make it`
-1. Install overcommit hooks `bin/overcommit`
-1. open [http://localhost:8089](http://localhost:8089)
-
-To clean up this project from your local machine, run `make stop`, which will drop all containers and networks associated with this project. To purge all resources, do `make clean`, which also removes images and volumes for a blank slate.
-
-
-<details><summary>Making changes to the Gemfile:</summary>
-<p>
-
-* Stop the `make start` process
-* Run `make bundle` to (un-)install gems and update the `Gemfile.lock`
-* Re-start the server with `make start`
-
-To run the tests, do `bin/test`. To launch a shell in the container run `make shell`, or to launch a Rails console run `make console`
-
-</p>
-</details>
-
-## Additional resources
-
-### Upgrading between versions
-
-See [docs/upgrade-guide](./docs/upgrade-guide)
-
-### Releases
-
-* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
-
-### Development Environment
-
-* [Common Errors & Solutions](https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions)
-
-### Reset.css
-
-Playbook provides it's own `reset.css` boilerplate for optional use in your application. You can either:
-
-1. Import the `dist/reset.css` from the playbook_ui gem into your Rails view: `@import "reset.css"` (note: your path may vary depending on your application's asset paths)
-2. Import or include the file via the npm package: `import 'reset.css'` (note: your path may vary depending on your application's node-sass `includePaths`)
-
-This asset aims to provide a commonly styles base for supported browsers.
-
-### Building Playbook Kits
-
-* [Generating a Kit](https://github.com/powerhome/playbook/wiki/Generating-a-Kit)
-* [Rails Kit](https://github.com/powerhome/playbook/wiki/Rails-Kit)
-* [Rails Kit Helpers](https://github.com/powerhome/playbook/wiki/Rails-Kit-Helpers)
-* [Using a Kit within a Kit](https://github.com/powerhome/playbook/wiki/Using-a-Kit-within-a-Kit)
-* [Understanding Rails Kit HTML Wrapper](https://github.com/powerhome/playbook/wiki/Understanding-Rails-Kit-HTML-Wrapper)
-* [Kit Stylesheet](https://github.com/powerhome/playbook/wiki/Kit-Stylesheet)
-
-### Testing Playbook Kits Locally
-
-#### Testing React Kits locally
-1.  Inside of your Playbook repository, run `yarn link`. 
-2.  Inside of the directory you want to test with playbook, run `yarn link playbook-ui`.
-3.  Run `yarn hmr` in your directory you want to test with playbook, and hard refresh (command + shift + R) your browser.
-4.  Test all the things!
-5.  When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
-6.  Inside of your Playbook repository, run `yarn unlink`. 
-
-Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.