playbook_ui 2.9.8 → 2.9.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 886c7c99d455f10b2f169cfea7e6857d12ac0244e48243fbd5f6b7e16733af35
-  data.tar.gz: eb575a0deb1435b1ff816112502ca54eeedd103103a31897e0cb33158ca842eb
+  metadata.gz: ce4e8884441a2a18b3dfb1d5e6ad3d39c1d62445cc103a084bd7963038763b47
+  data.tar.gz: 69d4ddeba0f3cabd308908ef4eee403fe705291f144ccf8238e78cb0e24aa29a
 SHA512:
-  metadata.gz: eae3b21bc2932fd555f5a5368a4a01a49c9ea6ecf301d6c42dfdea4c93acedc00d8928513b3522dd995c0717c092b1109c5e8f69ae2169c142cc2d98eff0bdd0
-  data.tar.gz: 167da2b15af3a4d20a5dbb4723520fca0ca393cad64ba6f57695633bb999f61ac0b6c6fe8738d5d8fab69f5a571ad3975fab8774743d8f878102144a6364d984
+  metadata.gz: cfe8e4dcc247ea4c4934ea29297a0c4daa3bebf2a456d2d064dee847f1028a10e262b6ccbeafcd986c5d9a1ac75550de632165c9ab53dfecf215fe90dccea9ad
+  data.tar.gz: 3bdad6a98ef95b44e8985100f9c9530a56e60dab89bc530a31b0db80e641631e93c7528787a57ef6ac3dfc44208b6a753fd05caaa7cfc2e55638f9786eb1c243

data/app/pb_kits/playbook/_playbook.scss

@@ -11,6 +11,7 @@
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
 @import 'pb_date_range_inline/date_range_inline';
+@import 'pb_date_stacked/date_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
@@ -27,11 +28,13 @@
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
 @import 'pb_message/message';
+@import 'pb_multiple_users/multiple_users';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
 @import 'pb_pill/pill';
+@import 'pb_progress_pills/progress_pills';
 @import 'pb_progress_simple/progress_simple';
 @import 'pb_section_separator/section_separator';
 @import 'pb_source/source';

data/app/pb_kits/playbook/index.js

@@ -28,11 +28,13 @@ import List from "./pb_list/_list.jsx"
 import ListItem from "./pb_list/_list_item.jsx"
 import LoadingInline from "./pb_loading_inline/_loading_inline.jsx"
 import Message from "./pb_message/_message.jsx"
+import MultipleUsers from "./pb_multiple_users/_multiple_users.jsx"
 import Nav from "./pb_nav/_nav.jsx"
 import OnlineStatus from "./pb_online_status/_online_status.jsx"
 import Person from "./pb_person/_person.jsx"
 import PersonContact from "./pb_person_contact/_person_contact.jsx"
 import Pill from "./pb_pill/_pill.jsx"
+import ProgressPills from "./pb_progress_pills/_progress_pills.jsx"
 import ProgressSimple from "./pb_progress_simple/_progress_simple.jsx"
 import SectionSeparator from "./pb_section_separator/_section_separator.jsx"
 import Source from "./pb_source/_source.jsx"
@@ -94,12 +96,14 @@ export {
   ListItem,
   LoadingInline,
   Message,
+  MultipleUsers,
   Nav,
   OnlineStatus,
   pbChart,
   Person,
   PersonContact,
   Pill,
+  ProgressPills,
   ProgressSimple,
   SectionSeparator,
   Source,

data/app/pb_kits/playbook/kits/pb_date_stacked.js

@@ -0,0 +1,4 @@
+import DateStacked from "../pb_date_stacked/_date_stacked.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ DateStacked });

data/app/pb_kits/playbook/kits/pb_multiple_users.js

@@ -0,0 +1,4 @@
+import MultipleUsers from "../pb_multiple_users/_multiple_users.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ MultipleUsers });

data/app/pb_kits/playbook/kits/pb_progress_pills.js

@@ -0,0 +1,4 @@
+import ProgressPills from "../pb_progress_pills/_progress_pills.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ ProgressPills });

data/app/pb_kits/playbook/packs/examples.js

@@ -25,6 +25,7 @@ import * as Currency from "pb_currency/docs";
 import * as DashboardValue from "pb_dashboard_value/docs";
 import * as Date from "pb_date/docs";
 import * as DateRangeInline from "pb_date_range_inline/docs";
+import * as DateStacked from "pb_date_stacked/docs";
 import * as DateYearStacked from "pb_date_year_stacked/docs";
 import * as DistributionBar from "pb_distribution_bar/docs";
 import * as FixedConfirmationToast from "pb_fixed_confirmation_toast/docs";
@@ -41,11 +42,13 @@ import * as LineGraph from "pb_line_graph/docs";
 import * as list from "pb_list/docs";
 import * as LoadingInline from "pb_loading_inline/docs";
 import * as Message from "pb_message/docs";
+import * as MultipleUsers from "pb_multiple_users/docs";
 import * as Nav from "pb_nav/docs";
 import * as OnlineStatus from "pb_online_status/docs";
 import * as Person from "pb_person/docs";
 import * as PersonContact from "pb_person_contact/docs";
 import * as Pill from "pb_pill/docs";
+import * as ProgressPills from "pb_progress_pills/docs";
 import * as ProgressSimple from "pb_progress_simple/docs";
 import * as SectionSeparator from "pb_section_separator/docs";
 import * as Source from "pb_source/docs";
@@ -76,6 +79,7 @@ WebpackerReact.setup (Currency);
 WebpackerReact.setup (DashboardValue);
 WebpackerReact.setup (Date);
 WebpackerReact.setup (DateRangeInline);
+WebpackerReact.setup (DateStacked);
 WebpackerReact.setup (DateYearStacked);
 WebpackerReact.setup (DistributionBar);
 WebpackerReact.setup (FixedConfirmationToast);
@@ -92,11 +96,13 @@ WebpackerReact.setup (LineGraph);
 WebpackerReact.setup (list);
 WebpackerReact.setup (LoadingInline);
 WebpackerReact.setup (Message);
+WebpackerReact.setup (MultipleUsers);
 WebpackerReact.setup (Nav);
 WebpackerReact.setup (OnlineStatus);
 WebpackerReact.setup (Person);
 WebpackerReact.setup (PersonContact);
 WebpackerReact.setup (Pill);
+WebpackerReact.setup (ProgressPills);
 WebpackerReact.setup (ProgressSimple);
 WebpackerReact.setup (SectionSeparator);
 WebpackerReact.setup (Source);

data/app/pb_kits/playbook/packs/kits.js

@@ -11,6 +11,7 @@ import "../kits/pb_currency.js";
 import "../kits/pb_dashboard_value.js";
 import "../kits/pb_date.js";
 import "../kits/pb_date_range_inline.js";
+import "../kits/pb_date_stacked.js";
 import "../kits/pb_date_year_stacked.js";
 import "../kits/pb_distribution_bar.js";
 import "../kits/pb_fixed_confirmation_toast.js";
@@ -26,11 +27,13 @@ import "../kits/pb_layout.js";
 import "../kits/pb_line_graph.js";
 import "../kits/pb_loading_inline.js";
 import "../kits/pb_message.js";
+import "../kits/pb_multiple_users.js";
 import "../kits/pb_nav.js";
 import "../kits/pb_online_status.js";
 import "../kits/pb_person.js";
 import "../kits/pb_person_contact.js";
 import "../kits/pb_pill.js";
+import "../kits/pb_progress_pills.js";
 import "../kits/pb_progress_simple.js";
 import "../kits/pb_section_separator.js";
 import "../kits/pb_source.js";
@@ -47,3 +50,5 @@ import "../kits/pb_title_detail.js";
 import "../kits/pb_toggle.js";
 import "../kits/pb_user.js";
 import "../kits/pb_user_badge.js";
+
+

data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss

@@ -15,6 +15,7 @@
 @include doc-color($background_colors);
 @include doc-color($card_colors);
 @include doc-color($active_colors);
+@include doc-color($action_colors);
 @include doc-color($hover_colors);
 @include doc-color($border_colors);
 @include doc-color($shadow_colors);

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -10,9 +10,9 @@ import { Image } from "../"
 type AvatarProps = {
   className?: String,
   name: String,
+  imageUrl: String,
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   status: 'online' | 'away',
-  url: String,
 }
 
 const initials = function(name) {
@@ -21,11 +21,11 @@ const initials = function(name) {
   }
 }
 
-const image = function(url, name) {
-  if (url) {
+const image = function(imageUrl, name) {
+  if (imageUrl) {
     return (
       <Image alt={name}
-          url={url}
+          url={imageUrl}
       />
     )
   }
@@ -38,10 +38,22 @@ const PbStatus = ({ size, status } : { size: String, status: String }) => (
 const Avatar = ({
   className,
   name=null,
+  imageUrl,
   size='md',
-  status,
-  url
+  status=null
 }: AvatarProps) => {
+
+  const statusDisplay = () => {
+    if(status !== null){
+      return (
+        <PbStatus
+            size={size}
+            status={status}
+        />
+      );
+    }
+  }
+
   const css = classnames([
     `pb_avatar_kit`,
     `avatar_${size}`,
@@ -52,16 +64,13 @@ const Avatar = ({
     <div className={css}
         data-initials={initials(name)}
     >
-      <div 
+      <div
           className="avatar_wrapper"
           data-initials={initials(name)}
       >
-        {image(url, name)}
+        {image(imageUrl, name)}
       </div>
-      <PbStatus 
-          size={size}
-          status={status}
-      />
+      {statusDisplay()}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -5,38 +5,38 @@ function AvatarDefault() {
   return (
     <div>
       <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="xs"
           status="online"
-          url="https://randomuser.me/api/portraits/men/44.jpg"
       />
       <br/>
       <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
           status="online"
-          url="https://randomuser.me/api/portraits/men/44.jpg"
       />
       <br/>
       <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="md"
           status="away"
-          url="https://randomuser.me/api/portraits/men/44.jpg"
       />
       <br/>
       <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="lg"
           status="offline"
-          url="https://randomuser.me/api/portraits/men/44.jpg"
       />
       <br/>
       <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="xl"
           status="offline"
-          url="https://randomuser.me/api/portraits/men/44.jpg"
       />
     </div>
   )

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -28,7 +28,7 @@ module Playbook
           title: title,
           subtitle: subtitle,
           axisTitle: axis_title,
-          pointStart: point_start
+          pointStart: point_start,
         }.to_json.html_safe
       end
 

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -22,7 +22,6 @@ module Playbook
 
     private
 
-
       def dark_class
         dark ? "dark" : nil
       end

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -1,36 +1,48 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
 
 type CardPropTypes = {
   children: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
+  highlight?: {
+    position?: String,
+    color?: String
+  },
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   selected?: Boolean,
   shadow?: 'none' | 'shallow' | 'default' | 'deep' | 'deeper' | 'deepest',
 }
 
 const cardCSS = ({
+  highlight={},
   selected=false,
-  shadow='none',
+  shadow='none'
 }: CardPropTypes) => {
-  let css = ''
+  let css = 'pb_card_kit'
+  css += highlight.position ? `_highlight_${highlight.position}` : null
+  css += highlight.color ? `_highlight_${highlight.color}` : null
   css += selected ? '_selected' : '_deselected'
   css += `_shadow_${shadow}`
   return css
 }
 
 const bodyCSS = ({padding='md'}: CardPropTypes) => {
-  let css = ''
+  let css = 'pb_card_body_kit'
   css += `_${padding}`
   return css
 }
 
 const Card = (props: CardPropTypes) => {
-  const {children} = props
+  const {
+    children,
+    className
+  } = props
 
   return (
-    <div className={`pb_card_kit${cardCSS(props)}`}>
-      <div className={`pb_card_body_kit${bodyCSS(props)}`}>
+    <div className={classnames(cardCSS(props), className)}>
+      <div className={bodyCSS(props)}>
         { children }
       </div>
     </div>

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -6,6 +6,8 @@
 
 $pb_card_border_width: 1px;
 $pb_card_border_radius: $border_rad_heavier;
+$pb_card_highlight_colors: map-merge($status_colors, $product_colors);
+$pb_card_highlight_size: 4px;
 
 [class^=pb_card_kit] {
   position: relative;
@@ -29,4 +31,35 @@ $pb_card_border_radius: $border_rad_heavier;
       box-shadow: $shadow;
     }
   }
+
+  @mixin pb_card_highlight($width, $height, $background){
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $width;
+    height: $height;
+    background: $background;
+    z-index: 10;
+  }
+
+  &[class*=_highlight] {
+    overflow: hidden;
+  }
+
+  &[class*=_highlight_side] {
+    @each $color_name, $color_value in $pb_card_highlight_colors {
+      &[class*=_highlight_#{$color_name}]::before {
+        @include pb_card_highlight(100%, $pb_card_highlight_size, $color_value);
+      }
+    }
+  }
+
+  &[class*=_highlight_top] {
+    @each $color_name, $color_value in $pb_card_highlight_colors {
+      &[class*=_highlight_#{$color_name}]::before {
+        @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_card/card.rb

@@ -14,9 +14,15 @@ module Playbook
       prop :shadow, type: Playbook::Props::Enum,
                     values: %w[none shallow default deep deeper deepest],
                     default: "none"
+      prop :highlight, type: Playbook::Props::Hash,
+                       default: {}
 
       def classname
-        generate_classname("pb_card_kit", selected_class, shadow_class)
+        generate_classname("pb_card_kit",
+                           selected_class,
+                           shadow_class,
+                           highlight_position_class,
+                           highlight_color_class)
       end
 
     private
@@ -28,6 +34,14 @@ module Playbook
       def shadow_class
         shadow != "none" ? "shadow_#{shadow}" : nil
       end
+
+      def highlight_position_class
+        highlight[:position].present? ? "highlight_#{highlight[:position]}" : nil
+      end
+
+      def highlight_color_class
+        highlight[:color].present? ? "highlight_#{highlight[:color]}" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}}) do %>
+  Card content
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import {Card} from '../../'
+
+function CardHighlight() {
+  return (
+    <div>
+      <Card highlight={{position: "side", color: "windows"}}>
+        {`Card content`}
+      </Card>
+
+      <br/>
+
+      <Card highlight={{position: "top", color: "warning"}}>
+        {`Card content`}
+      </Card>
+    </div>
+  )
+}
+
+export default CardHighlight