playbook_ui 2.9.8 → 2.9.9

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_stacked", props: { date: DateTime.now, dark: true }) %>
+
+<br>
+
+<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", dark: true }) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx

@@ -0,0 +1,24 @@
+import React from "react"
+import DateStacked from "../_date_stacked.jsx"
+
+function DateStackedDark() {
+  return (
+    <div>
+      <DateStacked 
+        date={new Date()}
+        size='sm'
+        dark={true}
+      />
+
+      <br></br>
+
+      <DateStacked 
+        date={new Date()}
+        size='md'
+        dark={true}
+      />
+    </div>
+  )
+}
+
+export default DateStackedDark;

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_stacked", props: { date: DateTime.now}) %>
+
+<br>
+
+<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -0,0 +1,18 @@
+import React from "react"
+import DateStacked from "../_date_stacked.jsx"
+
+function DateStackedDefault() {
+  return (
+    <div>
+      
+      <DateStacked date={new Date()} align='left' size='sm'/>
+
+      <br/>
+
+      <DateStacked date={new Date()} size='md'/>
+
+    </div>
+  )
+}
+
+export default DateStackedDefault;

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20) }) %>
+
+<br>
+
+<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), size: "md"}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx

@@ -0,0 +1,18 @@
+import React from "react"
+import DateStacked from "../_date_stacked.jsx"
+
+function DateStackedNotCurrentYear() {
+  return (
+    <div>
+      
+      <DateStacked date={new Date('20 Mar 2018')} size='sm'/>
+
+      <br/>
+
+      <DateStacked date={new Date('20 Mar 2018')} size='md'/>
+
+    </div>
+  )
+}
+
+export default DateStackedNotCurrentYear;

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_stacked", props: { date: DateTime.now, reverse: true}) %>
+
+<br>
+
+<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", reverse: true}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx

@@ -0,0 +1,18 @@
+import React from "react"
+import DateStacked from "../_date_stacked.jsx"
+
+function DateStackedDefault() {
+  return (
+    <div>
+      
+      <DateStacked date={new Date()} align='left' size='sm' reverse={true}/>
+
+      <br/>
+
+      <DateStacked date={new Date()} size='md'reverse={true}/>
+
+    </div>
+  )
+}
+
+export default DateStackedDefault;

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "sm" }) %>
+
+<br>
+
+<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md" }) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import DateStacked from "../_date_stacked.jsx"
+
+function DateStackedSizes() {
+  return (
+    <div>
+      <DateStacked 
+        date={new Date()}
+        size='sm'
+      /><br></br>
+      <DateStacked 
+        date={new Date()}
+        size='md'
+      />
+    </div>
+  )
+}
+
+export default DateStackedSizes;

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

@@ -0,0 +1,22 @@
+examples:
+
+  rails:
+  - date_stacked_default: Default
+  - date_stacked_not_current_year: Not Current Year
+  - date_stacked_reverse: Day & Month Reverse
+  - date_stacked_sizes: Sizes
+  - date_stacked_align: Alignment
+  - date_stacked_dark: Dark
+
+
+
+  react:
+  - date_stacked_default: Default
+  - date_stacked_not_current_year: Not Current Year
+  - date_stacked_reverse: Day & Month Reverse
+  - date_stacked_sizes: Sizes
+  - date_stacked_align: Alignment
+  - date_stacked_dark: Dark
+
+
+

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

@@ -0,0 +1,7 @@
+export {default as DateStackedDefault} from './_date_stacked_default.jsx';
+export {default as DateStackedNotCurrentYear} from './_date_stacked_not_current_year.jsx';
+export {default as DateStackedReverse} from './_date_stacked_reverse.jsx';
+export {default as DateStackedSizes} from './_date_stacked_sizes.jsx';
+export {default as DateStackedAlign} from './_date_stacked_align.jsx';
+export {default as DateStackedDark} from './_date_stacked_dark.jsx';
+

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -12,7 +12,6 @@ module Playbook
                     default: "neutral"
       prop :text, type: Playbook::Props::String
 
-
       def show_text?
         text.present?
       end

data/app/pb_kits/playbook/pb_kit/pb_date_time.rb

@@ -1,10 +1,12 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbKit
     class PbDateTime
       attr_accessor :value, :zone
 
       def initialize(value, zone = "America/New_York")
-        @value = self.convert_to_timestamp_and_zone(value, zone)
+        @value = convert_to_timestamp_and_zone(value, zone)
       end
 
       def convert_to_timestamp_and_zone(value, zone)

data/app/pb_kits/playbook/pb_layout/layout.rb

@@ -22,7 +22,6 @@ module Playbook
 
       def classname
         first_class = generate_classname("pb_layout", size, position, dark_class, transparent_class)
-        classname = first_class + full_class + collapse_class
         [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
       end
 

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -5,12 +5,12 @@ module Playbook
     class LoadingInline
       include Playbook::Props
 
-       partial "pb_loading_inline/loading_inline"
+      partial "pb_loading_inline/loading_inline"
 
-       prop :align, type: Playbook::Props::Enum,
-                    values: %w[left center right],
-                    default: "left"
-       prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left center right],
+                   default: "left"
+      prop :dark, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_loading_inline_kit", align)

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.html.erb

@@ -0,0 +1,14 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <% object.users.take(object.display_count).each do |user| %>
+      <%= pb_rails("avatar", props: user.merge({size: "xs", classname: "pb_multiple_users_item"}) ) %>
+    <% end %>
+
+    <% if object.more_than_four %>
+      <div class="pb_multiple_users_item multiple_users_badge">
+        <%= "+#{object.users.count - object.display_count}" %>
+      </div>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -0,0 +1,69 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  Avatar
+} from '../'
+
+type MultipleUsersProps = {
+  className?: String,
+  id?: String,
+  reverse?: Boolean,
+  users: Array<Object>,
+}
+
+const MultipleUsers = ({
+    className,
+    id,
+    reverse=false,
+    users
+  }: MultipleUsersProps) => {
+
+  const multipleUsersCss = () => {
+    let css = 'pb_multiple_users_kit'
+    css += reverse === true ? '_reverse' : ''
+    return css
+  }
+
+  const moreThanFour = () => {
+    return users.length > 4
+  }
+
+  const displayCount = () => {
+    return moreThanFour() ? 3 : users.length
+  }
+
+  const multipleUsers = () => {
+    return users.slice(0, displayCount()).map((userObject, index) => {
+      return (
+        <Avatar
+          {...userObject}
+          key={index}
+          size="xs"
+          className="pb_multiple_users_item" />
+      )
+    })
+  }
+
+  const plusUsers = () => {
+    if( moreThanFour() === true ) {
+      return (
+        <div className="pb_multiple_users_item multiple_users_badge">
+          {`+${users.length - displayCount()}`}
+        </div>
+      )
+    }
+  }
+
+  return (
+    <div id={id} className={classnames(multipleUsersCss(), className)}>
+      {multipleUsers()}
+      {plusUsers()}
+    </div>
+  )
+}
+
+export default MultipleUsers

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -0,0 +1,50 @@
+@import "../tokens/colors";
+@import "../utilities/colors";
+@import "../tokens/opacity";
+@import "../pb_avatar/avatar";
+
+$pb_multiple_users_overlap: -9px;
+$pb_multiple_users_border_size: 1px;
+$pb_multiple_users_size: map-get($avatar-sizes, "xs");
+
+[class^=pb_multiple_users_kit] {
+  display: inline-flex;
+
+  .multiple_users_badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $pb_multiple_users_size;
+    height: $pb_multiple_users_size;
+    border-radius: ($pb_multiple_users_size/2) + 2;
+    background: tint($primary, 90%);
+    border: $pb_multiple_users_border_size solid $white;
+    color: $primary;
+    font-weight: $bold;
+    font-size: $font_smallest - 1;
+  }
+
+  .pb_multiple_users_item {
+    margin-left: $pb_multiple_users_overlap;
+    margin-right: 0;
+
+    .avatar_wrapper {
+      border: $pb_multiple_users_border_size solid $white;
+    }
+
+    @each $item in [1, 2, 3, 4, 5] {
+      &:nth-child(#{$item}) {
+        z-index: #{$item - 1};
+      }
+    }
+  }
+
+  &[class*=_reverse] {
+    flex-direction: row-reverse;
+
+    .pb_multiple_users_item {
+      margin-left: 0;
+      margin-right: $pb_multiple_users_overlap;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("multiple_users", props: {
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users", props: {
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx

@@ -0,0 +1,46 @@
+import React from "react"
+import {MultipleUsers} from "../../"
+
+function MultipleUsersDefault() {
+  return (
+    <div>
+      <MultipleUsers users={[
+        {
+          name: "Patrick Welch",
+          image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+        },
+        {
+          name: "Lucille Sanchez",
+          image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+        },
+        {
+          name: "Beverly Reyes",
+          image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+        },
+        {
+          name: "Keith Craig",
+          image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+        },
+        {
+          name: "Alicia Cooper",
+          image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+        }
+      ]} />
+
+      <br/><br/>
+
+      <MultipleUsers users={[
+        {
+          name: "Shawn Palmer",
+          image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+        },
+        {
+          name: "Andrew Murray",
+          image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+        }
+      ]} />
+    </div>
+  )
+}
+
+export default MultipleUsersDefault