playbook_ui 4.7.1 → 4.8.1

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { ProgressSimple } from '../..'
+
+const ProgressSimpleAlign = () => {
+  return (
+    <div>
+      <ProgressSimple
+          align="left"
+          percent={45}
+          width="100px"
+      />
+      <br />
+      <ProgressSimple
+          align="center"
+          percent={45}
+          width="100px"
+      />
+      <br />
+      <ProgressSimple
+          align="right"
+          percent={45}
+          width="100px"
+      />
+    </div>
+  )
+}
+
+export default ProgressSimpleAlign

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx

@@ -1,8 +1,11 @@
 import React from 'react'
+import { ProgressSimple } from '../..'
 
 const ProgressSimpleDefault = () => {
   return (
-    <h1>{'Coming Soon...'}</h1>
+    <div>
+      <ProgressSimple percent={45} />
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { ProgressSimple } from '../..'
+
+const ProgressSimpleMuted = () => {
+  return (
+    <div>
+      <ProgressSimple
+          muted
+          percent={68}
+      />
+    </div>
+  )
+}
+
+export default ProgressSimpleMuted

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ProgressSimple } from '../..'
+
+const ProgressSimpleValue = () => {
+  return (
+    <div>
+      <ProgressSimple
+          align="left"
+          percent={68}
+      />
+      <br />
+      <ProgressSimple
+          max="10"
+          value="2"
+      />
+    </div>
+  )
+}
+
+export default ProgressSimpleValue

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { ProgressSimple } from '../..'
+
+const ProgressSimpleValue = () => {
+  return (
+    <div>
+      <ProgressSimple
+          percent={40}
+          width="100px"
+      />
+    </div>
+  )
+}
+
+export default ProgressSimpleValue

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

@@ -10,3 +10,9 @@ examples:
 
   react:
   - progress_simple_default: Default
+  - progress_simple_value: Setting Values
+  - progress_simple_width: Progress Bar Width
+  - progress_simple_muted: Muted
+  - progress_simple_align: Align
+
+

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

@@ -1 +1,5 @@
+export { default as ProgressSimpleAlign } from './_progress_simple_align.jsx'
 export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx'
+export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
+export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
+export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'

data/app/pb_kits/playbook/pb_select/_select.html.erb

@@ -1,5 +1,4 @@
 <%= content_tag(:div,
-  id: object.id,
   data: object.data,
   aria: object.aria,
   class: object.classname) do %>
@@ -20,6 +19,7 @@
           selected: object.selected,
           disabled: object.disabled_options,
         ),
+        id: object.id,
         prompt: object.blank_selection,
         disabled: object.disabled,
         required: object.required,

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -1,11 +1,13 @@
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
+@import "../pb_title/title_mixin";
 @import "../tokens/colors";
 
 [class^=pb_select] {
   margin-bottom: $space_sm;
   select {
     @include pb_textarea_light;
+    @include pb_title_4;
     appearance: none;
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
@@ -54,6 +56,8 @@
   &[class*=_dark] {
     select {
       @include pb_textarea_dark;
+      @include pb_title_4;
+      @include pb_title_dark;
       background: $focus_input_dark;
       box-shadow: inset 0 -11px 20px rgba($white, 0.05);
       &:hover, &:active, &:focus {
@@ -74,5 +78,5 @@
       }
     }
   }
-  
+
 }

data/app/pb_kits/playbook/pb_table/styles/_reset.scss

@@ -9,7 +9,7 @@
     thead {
       tr {
         th {
-          text-align: inherit;
+          text-align: left;
         }
       }
     }

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -1,5 +1,5 @@
 @import "../pb_textarea/textarea_mixin";
-@import "../pb_body/body_mixins";
+@import "../pb_title/title_mixin";
 
 [class^=pb_text_input_kit] {
   .pb_text_input_kit_label {
@@ -17,6 +17,7 @@
 
     > input:first-child {
       @include pb_textarea_light;
+      @include pb_title_4;
       overflow: hidden;
     }
 
@@ -35,6 +36,8 @@
 
       > input:first-child {
         @include pb_textarea_dark;
+        @include pb_title_4;
+        @include pb_title_dark;
         overflow: hidden;
       }
 

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

@@ -19,6 +19,7 @@ type TextareaProps = {
   name?: String,
   rows?: Number,
   dark?: Boolean,
+  resize: 'none' | 'both' | 'horizontal' | 'vertical',
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
 
@@ -26,6 +27,7 @@ const Textarea = ({
   className,
   children,
   dark = false,
+  resize = 'none',
   error,
   label,
   name,
@@ -36,9 +38,10 @@ const Textarea = ({
 }: TextareaProps) => {
   const textareaClass = `pb_textarea_kit${dark ? '_dark' : ''}`
   const errorClass = error ? 'error' : null
+  const resizeClass = ` resize_${resize}`
 
   return (
-    <div className={classnames(textareaClass, className, errorClass)}>
+    <div className={classnames(textareaClass, className, errorClass, resizeClass)}>
       <Caption
           dark={dark}
           text={label}

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

@@ -1,5 +1,6 @@
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
+@import "../pb_title/title_mixin";
 
 [class^=pb_textarea_kit] {
   margin-bottom: $space_sm;
@@ -25,6 +26,20 @@
       border-color: $error;
     }
   }
+  &.resize_both > textarea {
+    resize: both;
+    overflow: auto;
+  }
+  &.resize_horizontal > textarea {
+    resize: horizontal;
+    overflow: auto;
+  }
+  &.resize_vertical > textarea {
+    resize: vertical;
+    overflow: auto;
+  }
+
+
 
   &[class*=_dark] {
     textarea::placeholder {

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

@@ -2,10 +2,10 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/animation-curves";
-@import "../pb_title/title_mixin";
+@import "../pb_body/body_mixins";
 
 @mixin pb_textarea($border_color, $background_color, $text_color) {
-  @include pb_title_4;
+  @include pb_body_dark;
   border: 1px solid $border_color;
   border-radius: $border_rad_heavier;
   display: block;
@@ -28,8 +28,8 @@
     -moz-appearance:textfield;
     &::-webkit-inner-spin-button,
     &::-webkit-outer-spin-button {
-      -webkit-appearance: none; 
-      margin: 0; 
+      -webkit-appearance: none;
+      margin: 0;
     }
   }
   &:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active {

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

@@ -0,0 +1,13 @@
+
+
+
+
+<%= pb_rails("textarea", props: { label: "vertical", placeholder: "Resize Vertical", resize: "vertical" }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { label: "both", placeholder: "Resize Both", resize: "both" }) %>
+
+<br/>
+
+<%= pb_rails("textarea", props: { label: "horizontal", placeholder: "Resize Horizontal", resize: "horizontal" }) %>

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

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Textarea } from '../../'
+
+const TextareaResize = () => {
+  return (
+    <div>
+      <Textarea
+          label="vertical"
+          placeholder="Resize Vertical"
+          resize="vertical"
+      />
+
+      <br />
+
+      <Textarea
+          label="both"
+          placeholder="Resize Both"
+          resize="both"
+      />
+
+      <br />
+
+      <Textarea
+          label="horizontal"
+          placeholder="Resize Horizontal"
+          resize="horizontal"
+      />
+
+    </div>
+  )
+}
+
+export default TextareaResize

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

@@ -1,19 +1,19 @@
 examples:
-  
+
   rails:
   - textarea_default: Default
   - textarea_custom: Custom Textarea Input
   - textarea_dark: Dark
+  - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
   - textarea_dark_error: Textarea w/ Error
 
-  
-  
+
+
   react:
   - textarea_default: Default
   - textarea_custom: Custom Textarea Input
   - textarea_dark: Dark
+  - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
   - textarea_dark_error: Textarea w/ Error
-
-  

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

@@ -1,4 +1,5 @@
 export { default as TextareaDefault } from './_textarea_default.jsx'
+export { default as TextareaResize } from './_textarea_resize.jsx'
 export { default as TextareaCustom } from './_textarea_custom.jsx'
 export { default as TextareaDark } from './_textarea_dark.jsx'
 export { default as TextareaError } from './_textarea_error.jsx'

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

@@ -15,12 +15,15 @@ module Playbook
       prop :method
       prop :name
       prop :placeholder
+      prop :resize, type: Playbook::Props::Enum,
+            values: %w[none both horizontal vertical],
+            default: "none"
       prop :rows, type: Playbook::Props::Number,
             default: 4
       prop :value
 
       def classname
-        generate_classname("pb_textarea_kit", dark_class) + error_class
+        generate_classname("pb_textarea_kit", dark_class) + error_class + resize_class
       end
 
     private
@@ -32,6 +35,11 @@ module Playbook
       def error_class
         error ? " error" : ""
       end
+
+      def resize_class
+        " resize_#{resize}"
+      end
+
     end
   end
 end

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -43,10 +43,15 @@ class pbChart {
         text: this.defaults.subtitle,
       },
       yAxis: {
+        min: this.defaults.yAxisMin,
+        max: this.defaults.yAxisMax,
         title: {
           text: this.defaults.axisTitle,
         },
       },
+      xAxis: {
+        categories: this.defaults.xAxisCategories,
+      },
       plotOptions: {
         series: {
           pointStart: this.defaults.pointStart,

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "4.7.1"
+  VERSION = "4.8.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 4.7.1
+  version: 4.8.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-03-13 00:00:00.000000000 Z
+date: 2020-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -659,10 +659,14 @@ files:
 - app/pb_kits/playbook/pb_currency/_currency.jsx
 - app/pb_kits/playbook/pb_currency/_currency.scss
 - app/pb_kits/playbook/pb_currency/currency.rb
-- app/pb_kits/playbook/pb_currency/docs/_currency_default.jsx
+- app/pb_kits/playbook/pb_currency/docs/_currency_dark.html.erb
+- app/pb_kits/playbook/pb_currency/docs/_currency_dark.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_large.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_large.jsx
+- app/pb_kits/playbook/pb_currency/docs/_currency_medium.html.erb
+- app/pb_kits/playbook/pb_currency/docs/_currency_medium.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_small.html.erb
+- app/pb_kits/playbook/pb_currency/docs/_currency_small.jsx
 - app/pb_kits/playbook/pb_currency/docs/_description.md
 - app/pb_kits/playbook/pb_currency/docs/example.yml
 - app/pb_kits/playbook/pb_currency/docs/index.js
@@ -758,12 +762,13 @@ files:
 - app/pb_kits/playbook/pb_filter/_filter.scss
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
+- app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
 - app/pb_kits/playbook/pb_filter/docs/example.yml
 - app/pb_kits/playbook/pb_filter/docs/index.js
 - app/pb_kits/playbook/pb_filter/filter.rb
+- app/pb_kits/playbook/pb_filter/templates/_core.html.erb
 - app/pb_kits/playbook/pb_filter/templates/_default.html.erb
-- app/pb_kits/playbook/pb_filter/templates/_single.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
@@ -1191,11 +1196,15 @@ files:
 - app/pb_kits/playbook/pb_progress_simple/docs/_description.md
 - app/pb_kits/playbook/pb_progress_simple/docs/_footer.md
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.html.erb
+- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.html.erb
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.html.erb
+- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.html.erb
+- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.html.erb
+- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx
 - app/pb_kits/playbook/pb_progress_simple/docs/example.yml
 - app/pb_kits/playbook/pb_progress_simple/docs/index.js
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.rb
@@ -1402,6 +1411,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_resize.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
 - app/pb_kits/playbook/pb_textarea/docs/example.yml
 - app/pb_kits/playbook/pb_textarea/docs/index.js
 - app/pb_kits/playbook/pb_textarea/textarea.rb