playbook_ui 3.1.0 → 3.2.0

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

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

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

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

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

@@ -1,2 +1,2 @@
-export {default as MultipleUsersDefault} from './_multiple_users_default.jsx';
-export {default as MultipleUsersReverse} from './_multiple_users_reverse.jsx';
+export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
+export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.html.erb

@@ -0,0 +1,19 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item"}) ) %>
+
+  <% unless object.only_one %>
+    <% if object.more_than_two %>
+      <%= pb_rails("badge", props: {
+        text: "+#{object.users.count - object.display_count}",
+        variant: "primary",
+        rounded: true,
+        classname: "pb_multiple_users_stacked_item second_item" }) %>
+    <% else %>
+      <%= pb_rails("avatar", props: object.users[1].merge({size: "xs", classname: "pb_multiple_users_stacked_item second_item"}) ) %>
+    <% end %>
+  <% end %>
+
+<% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.jsx

@@ -0,0 +1,100 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  Avatar,
+  Badge,
+} from '../'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type MultipleUsersStackedProps = {
+  className?: String,
+  id?: String,
+  data?: object,
+  aria?: object,
+  users: Array<Object>,
+}
+
+const MultipleUsersStacked = ({
+  className,
+  id,
+  aria = {},
+  data = {},
+  users,
+}: MultipleUsersStackedProps) => {
+  const moreThanTwo = users.length > 2
+  const onlyOne = users.length == 1
+  const displayCount = () => {
+    return moreThanTwo ? 1 : users.length
+  }
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = buildCss({
+    'pb_multiple_users_stacked_kit': true,
+    'single': onlyOne,
+  })
+
+  const firstUser = () => {
+    return users.slice(0, 1).map((userObject, index) => {
+      return (
+        <Avatar
+            {...userObject}
+            className="pb_multiple_users_stacked_item"
+            key={index}
+            size="xs"
+        />
+      )
+    })
+  }
+
+  const secondUser = () => {
+    if (moreThanTwo === false) {
+      return users.slice(1, 2).map((userObject, index) => {
+        return (
+          <Avatar
+              {...userObject}
+              className="pb_multiple_users_stacked_item second_item"
+              key={index}
+              size="xs"
+          />
+        )
+      })
+    }
+  }
+
+  const plusUsers = () => {
+    if (moreThanTwo === true) {
+      return (
+        <Badge
+            className="pb_multiple_users_stacked_item second_item"
+            rounded
+            text={`+${users.length - displayCount()}`}
+            variant="primary"
+        />
+      )
+    }
+  }
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className)}
+        id={id}
+    >
+      {firstUser()}
+      {secondUser()}
+      {plusUsers()}
+    </div>
+  )
+}
+
+export default MultipleUsersStacked

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -0,0 +1,57 @@
+@import "../tokens/colors";
+@import "../tokens/border_radius";
+@import "../tokens/opacity";
+@import "../pb_avatar/avatar";
+
+[class^=pb_multiple_users_stacked_kit] {
+  $container_size: map-get($avatar-sizes, "xs");
+  $overlap: -15px;
+  $border_size: 1px;
+  $stacked_size: 18px;
+  $max_to_display: 1, 2;
+  display: inline-flex;
+  width: $container_size;
+  height: $container_size;
+  flex-basis: $container_size;
+  position: relative;
+  flex-shrink: 0;
+  flex-grow: 0;
+  .pb_multiple_users_stacked_item {
+    height: $stacked_size;
+    width: $stacked_size;
+    .avatar_wrapper {
+      border: $border_size solid $white;
+      height: $stacked_size;
+      width: $stacked_size;
+      img {
+        z-index: 0;
+      }
+    }
+  }
+  &[class*=_single] .pb_multiple_users_stacked_item {
+    width: $container_size;
+    height: $container_size;
+    .avatar_wrapper {
+      width: $container_size;
+      height: $container_size;
+    }
+  }
+  .second_item {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 2;
+    background: tint($primary, 90%);
+    border-radius: $border_rad_mega;
+    .avatar_wrapper {
+      border: $border_size solid $white;
+      height: $stacked_size;
+      width: $stacked_size;
+
+    }
+  }
+  .stacked_item .avatar_wrapper::before {
+    font-size: 0;
+    color: transparent;
+  }
+}

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.html.erb

@@ -0,0 +1,50 @@
+<%= pb_rails("multiple_users_stacked", props: {
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users_stacked", 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",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users_stacked", 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",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { MultipleUsersStacked } from '../../'
+
+const MultipleUsersStackedDefault = () => {
+  return (
+    <div>
+      <MultipleUsersStacked
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+      ]}
+      />
+      <br />
+      <br />
+      <MultipleUsersStacked
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+      ]}
+      />
+      <br />
+      <br />
+      <MultipleUsersStacked
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+        {
+          name: 'Beverly Reyes',
+          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+        },
+        {
+          name: 'Keith Craig',
+          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+        },
+        {
+          name: 'Alicia Cooper',
+          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+        },
+      ]}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersStackedDefault