playbook_ui 3.1.0 → 3.2.0

data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx

@@ -1,52 +1,52 @@
-import React from "react"
-import {User} from "../../"
+import React from 'react'
+import { User } from '../../'
 
-function UserWithTerritory() {
+const UserWithTerritory = () => {
   return (
-    <div class="pb--doc-demo-row">
+    <div className="pb--doc-demo-row">
 
       <div>
         <User
-          name='Anna Black'
-          territory='PHL'
-          title='Remodeling Consultant'
-          orientation="vertical"
-          align="center"
-          size='lg'
-          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            align="center"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="vertical"
+            size="lg"
+            territory="PHL"
+            title="Remodeling Consultant"
         />
       </div>
 
       <div>
         <User
-          name='Anna Black'
-          territory='PHL'
-          title='Remodeling Consultant'
-          orientation="horizontal"
-          align="left"
-          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
+            territory="PHL"
+            title="Remodeling Consultant"
         />
       </div>
 
       <div>
         <User
-          name='Anna Black'
-          territory='PHL'
-          title='Remodeling Consultant'
-          orientation='horizontal'
-          align='center'
-          size='sm'
+            align="center"
+            name="Anna Black"
+            orientation="horizontal"
+            size="sm"
+            territory="PHL"
+            title="Remodeling Consultant"
         />
 
-        <br/>
+        <br />
 
         <User
-          name='Anna Black'
-          territory='PHL'
-          title='Remodeling Consultant'
-          orientation='horizontal'
-          align='left'
-          size='lg'
+            align="left"
+            name="Anna Black"
+            orientation="horizontal"
+            size="lg"
+            territory="PHL"
+            title="Remodeling Consultant"
         />
       </div>
 
@@ -54,4 +54,4 @@ function UserWithTerritory() {
   )
 }
 
-export default UserWithTerritory;
+export default UserWithTerritory

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

@@ -1,6 +1,6 @@
-export {default as UserDefault} from './_user_default.jsx';
-export {default as UserWithTerritory} from './_user_with_territory.jsx';
-export {default as UserTextOnly} from './_user_text_only.jsx';
-export {default as UserSize} from './_user_size.jsx';
-export {default as UserVerticalSize} from './_user_vertical_size.jsx';
+export { default as UserDefault } from './_user_default.jsx'
+export { default as UserWithTerritory } from './_user_with_territory.jsx'
+export { default as UserTextOnly } from './_user_text_only.jsx'
+export { default as UserSize } from './_user_size.jsx'
+export { default as UserVerticalSize } from './_user_vertical_size.jsx'
 

data/app/pb_kits/playbook/pb_user/user.rb

@@ -23,6 +23,7 @@ module Playbook
       prop :title
       prop :dark, type: Playbook::Props::Boolean,
                           default: false
+      prop :territory
 
       def classname
         generate_classname("pb_user_kit", align, orientation, size, dark_class)
@@ -43,7 +44,6 @@ module Playbook
         dark ? "dark" : nil
       end
 
-
       def title_size
         size == "lg" ? 3 : 4
       end

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

@@ -1,21 +1,21 @@
-import React from 'react';
-import PropTypes from "prop-types";
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const propTypes = {
   className: PropTypes.string,
-  id: PropTypes.string
-};
+  id: PropTypes.string,
+}
 
 class UserBadge extends React.Component {
   render() {
     return (
       <div className="pb_user_badge">
-        <span>USER BADGE CONTENT</span>
+        <span>{'USER BADGE CONTENT'}</span>
       </div>
     )
   }
 }
 
-UserBadge.propTypes = propTypes;
+UserBadge.propTypes = propTypes
 
-export default UserBadge;
+export default UserBadge

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.jsx

@@ -1,10 +1,9 @@
-import React from "react"
-import {UserBadge} from "../../"
+import React from 'react'
 
-function UserBadgeDefault() {
+const UserBadgeDefault = () => {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <h1>{'Coming Soon...'}</h1>
   )
 }
 
-export default UserBadgeDefault;
+export default UserBadgeDefault

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

@@ -1 +1 @@
-export {default as UserBadgeDefault} from './_user_badge_default.jsx';
+export { default as UserBadgeDefault } from './_user_badge_default.jsx'

data/app/pb_kits/playbook/tokens/_border_radius.scss

@@ -19,15 +19,12 @@ $border_radius: (
   heaviest: $border_rad_heaviest
 );
 
-// Bootstrap
-$border_radius_base:      $border_rad_light;
-$border_radius_large:     $border_rad_heavy;
-$border_radius_small:     $border_rad_lighter;
-$border_radius:           $border_rad_light;
-$border_radius_lg:        $border_rad_heavy;
-$border_radius_sm:        $border_rad_lighter;
 
-$panel_border_radius:     $border_rad_light;
-
-// Change to borders
-$border_color: $border_light;
+:export {
+  @mixin export_border_radius($border_radius_list) {
+    @each $name, $size in $border_radius_list {
+      #{$name}: $size;
+    }
+  }
+  @include export_border_radius($border_radius);
+}

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

@@ -23,8 +23,8 @@ $colors: (
 );
 
 // Specialty Gradient -----------------
-$gradient_start:      #0083FF;
-$gradient_end:        #0B43D6;
+$gradient_start:      #1C75F2;
+$gradient_end:        $royal;
 
 // Interface colors -------------------
 $white:               #FFFFFF;

data/app/pb_kits/playbook/tokens/_line_height.scss

@@ -14,3 +14,12 @@ $line_height: (
   looser: $lh_looser,
   loosest: $lh_loosest
 );
+
+:export {
+  @mixin export_line_height($line_height_list) {
+    @each $name, $settings in $line_height_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_line_height($line_height);
+}

data/app/pb_kits/playbook/tokens/_opacity.scss

@@ -19,3 +19,12 @@ $opacity: (
   opacity_8: $opacity_8,
   opacity_9: $opacity_9,
 );
+
+:export {
+  @mixin export_opacity($opacity_list) {
+    @each $name, $settings in $opacity_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_opacity($opacity);
+}

data/app/pb_kits/playbook/tokens/_positioning.scss

@@ -30,6 +30,14 @@ $z_layers: (
   @if not map-has-key($z_layers, $layer) {
     @error "No layer found for `#{$layer}` in $z_layers map.";
   }
-
   @return map-get($z_layers, $layer);
 }
+
+:export {
+  @mixin export_z_index($z_index_list) {
+    @each $name, $settings in $z_index_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_z_index($z_index);
+}

data/app/pb_kits/playbook/tokens/_screen_sizes.scss

@@ -28,3 +28,12 @@ $breakpoints: (
     @content;
   }
 }
+
+:export {
+  @mixin export_breakpoints($breakpoints_list) {
+    @each $name, $settings in $breakpoints_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_breakpoints($breakpoints);
+}

data/app/pb_kits/playbook/tokens/_shadows.scss

@@ -15,3 +15,12 @@ $box_shadows: (
   shadow_deeper: $shadow_deeper,
   shadow_deepest: $shadow_deepest
 );
+
+:export {
+  @mixin export_shadows($shadows_list) {
+    @each $name, $settings in $shadows_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_shadows($box_shadows);
+}

data/app/pb_kits/playbook/tokens/_spacing.scss

@@ -1,6 +1,3 @@
-// TODO: Convert to em's or rem
-// Base on 1290 desktop
-
 $space_xs: 8px;
 $space_sm: 16px;
 $space_md: 24px;
@@ -15,12 +12,11 @@ $spaces:(
 );
 
 
-// $space_smallest:            2px
-// $space_smaller:             5px
-// $space_small:               7px
-// $space_base:                10px
-// $space_large:               16px
-// $space_larger:              24px
-// $space_largest:             30px
-// $space_jumbo:               40px
-// $space_mega:                60px
+:export {
+  @mixin export_spacing($spacing_list) {
+    @each $name, $size in $spacing_list {
+      #{$name}: $size;
+    }
+  }
+  @include export_spacing($spaces);
+}

data/app/pb_kits/playbook/utilities/props.js

@@ -45,4 +45,4 @@ export const buildDataProps = (data) => buildPrefixedProps('data', data)
  * @param {Object} rules a 'classnames' compliant rules object, used to derive the root className.
  * @returns {String} the derived root className value.
  */
-export const buildCss = (rules, delimiter = '_') => classnames(rules).replace(/\s/g, delimiter)
+export const buildCss = (...rules) => classnames(rules).replace(/\s/g, '_')

data/app/pb_kits/playbook/utilities/text.js

@@ -1,9 +1,15 @@
-import { isEmpty } from 'lodash'
+import { filter, isEmpty } from 'lodash'
 
 const titleizedWord = (string) => (
   string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
 )
 
-export const titleize = (sentence) => {
+export const titleize = (sentence) => (
   isEmpty(sentence) ? sentence : sentence.split(' ').map(titleizedWord).join(' ')
-}
+)
+
+const notEmpty = (value) => !isEmpty(value)
+
+export const joinPresent = (array, separator) => (
+  filter(array, notEmpty).join(separator)
+)

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 3.1.0
+  version: 3.2.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-12-12 00:00:00.000000000 Z
+date: 2019-12-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -431,6 +431,7 @@ files:
 - app/pb_kits/playbook/kits/pb_loading_inline.js
 - app/pb_kits/playbook/kits/pb_message.js
 - app/pb_kits/playbook/kits/pb_multiple_users.js
+- app/pb_kits/playbook/kits/pb_multiple_users_stacked.js
 - app/pb_kits/playbook/kits/pb_nav.js
 - app/pb_kits/playbook/kits/pb_online_status.js
 - app/pb_kits/playbook/kits/pb_person.js
@@ -685,6 +686,8 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb
@@ -699,8 +702,10 @@ files:
 - app/pb_kits/playbook/pb_form/form/simple_form_form.rb
 - app/pb_kits/playbook/pb_form/form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/action_area.rb
+- app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
+- app/pb_kits/playbook/pb_form/form_builder/select_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/simple_form_builder.rb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.jsx
@@ -829,6 +834,7 @@ files:
 - app/pb_kits/playbook/pb_list/_list_mixin.scss
 - app/pb_kits/playbook/pb_list/docs/_list_borderless.html.erb
 - app/pb_kits/playbook/pb_list/docs/_list_dark.html.erb
+- app/pb_kits/playbook/pb_list/docs/_list_dark.jsx
 - app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.html.erb
 - app/pb_kits/playbook/pb_list/docs/_list_dark_lg.html.erb
 - app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.html.erb
@@ -871,6 +877,14 @@ files:
 - app/pb_kits/playbook/pb_multiple_users/docs/example.yml
 - app/pb_kits/playbook/pb_multiple_users/docs/index.js
 - app/pb_kits/playbook/pb_multiple_users/multiple_users.rb
+- app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.html.erb
+- app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.jsx
+- app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss
+- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.html.erb
+- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
+- app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
+- app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js
+- app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb
 - app/pb_kits/playbook/pb_nav/_horizontal_nav.scss
 - app/pb_kits/playbook/pb_nav/_item.html.erb
 - app/pb_kits/playbook/pb_nav/_item.jsx
@@ -1047,6 +1061,8 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_container_dark.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_dark.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_dark.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_data_table.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_data_table.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_lg.html.erb