playbook_ui 2.7.2 → 2.8.1

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

@@ -0,0 +1,57 @@
+// React Component JSX Imports from the React Kits
+import Avatar from "../pb_avatar/_avatar";
+import BarGraph from "../pb_bar_graph/_bar_graph";
+import Body from "../pb_body/_body";
+import Button from "../pb_button/_button";
+import Caption from "../pb_caption/_caption";
+import Card from "../pb_card/_card";
+import DashboardValue from "../pb_dashboard_value/_dashboard_value";
+import Icon from "../pb_icon/_icon";
+import Image from "../pb_image/_image";
+import Input from "../pb_input/_input";
+import LabelValue from "../pb_label_value/_label_value";
+import Layout from "../pb_layout/_layout";
+import LineGraph from "../pb_line_graph/_line_graph";
+import List from "../pb_list/_list";
+import Message from "../pb_message/_message";
+import OnlineStatus from "../pb_online_status/_online_status";
+import Table from "../pb_table/_table";
+import TimeStamp from "../pb_timestamp/_timestamp";
+import Title from "../pb_title/_title";
+import User from "../pb_user/_user";
+import VerticalNav from "../pb_vertical_nav/_vertical_nav";
+
+// Dashboard Settings
+import commonSettings from "../pb_dashboard/commonSettings";
+import lineGraphSettings from "../pb_line_graph/lineGraphSettings";
+import barGraphSettings from "../pb_bar_graph/barGraphSettings";
+import dashboardValueSettings from "../pb_dashboard_value/dashboardValueSettings";
+
+// All Exports for Consumption in Nitro
+export {
+  Avatar,
+  BarGraph,
+  Body,
+  Button,
+  Caption,
+  Card,
+  DashboardValue,
+  Icon,
+  Image,
+  Input,
+  LabelValue,
+  Layout,
+  LineGraph,
+  List,
+  Message,
+  OnlineStatus,
+  Table,
+  TimeStamp,
+  Title,
+  User,
+  VerticalNav,
+  commonSettings,
+  lineGraphSettings,
+  barGraphSettings,
+  dashboardValueSettings
+};

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

@@ -9,3 +9,21 @@ import "./pb_image.js";
 import "./pb_table.js";
 import "./pb_avatar.js";
 import "./pb_input.js";
+import "./pb_bar_graph.js";
+import "./pb_icon.js";
+import "./pb_dashboard_value.js";
+import "./pb_time.js";
+import "./pb_pill.js";
+import "./pb_user_badge.js";
+import "./pb_date.js";
+import "./pb_title_detail.js";
+import "./pb_icon_circle.js";
+import "./pb_icon_value.js";
+import "./pb_star_rating.js";
+import "./pb_progress_simple.js";
+import "./pb_title_count.js";
+import "./pb_user.js";
+import "./pb_label_value.js";
+import "./pb_message.js";
+import "./pb_timestamp.js";
+import "./pb_online_status.js";

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

@@ -0,0 +1,4 @@
+import BarGraph from "pb_bar_graph/_bar_graph.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ BarGraph });

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

@@ -0,0 +1,4 @@
+import DashboardValue from "pb_dashboard_value/_dashboard_value.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ DashboardValue });

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

@@ -0,0 +1,4 @@
+import Date from "pb_date/_date.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Date });

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

@@ -0,0 +1,4 @@
+import Icon from "pb_icon/_icon.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Icon });

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

@@ -0,0 +1,4 @@
+import IconCircle from "pb_icon_circle/_icon_circle.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ IconCircle });

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

@@ -0,0 +1,4 @@
+import IconValue from "pb_icon_value/_icon_value.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ IconValue });

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

@@ -0,0 +1,4 @@
+import LabelValue from "pb_label_value/_label_value.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ LabelValue });

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

@@ -0,0 +1,4 @@
+import LineGraph from "pb_line_graph/_line_graph.jsx";
+import WebpackerReact from "webpacker-react";
+
+WebpackerReact.setup({ LineGraph });

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

@@ -0,0 +1,4 @@
+import Message from "pb_message/_message.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Message });

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

@@ -0,0 +1,4 @@
+import OnlineStatus from "pb_online_status/_online_status.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ OnlineStatus });

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

@@ -0,0 +1,4 @@
+import Pill from "pb_pill/_pill.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Pill });

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

@@ -0,0 +1,4 @@
+import ProgressSimple from "pb_progress_simple/_progress_simple.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ ProgressSimple });

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

@@ -0,0 +1,4 @@
+import StarRating from "pb_star_rating/_star_rating.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ StarRating });

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

@@ -0,0 +1,4 @@
+import Time from "pb_time/_time.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Time });

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

@@ -0,0 +1,4 @@
+import Timestamp from "pb_timestamp/_timestamp.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Timestamp });

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

@@ -0,0 +1,4 @@
+import TitleCount from "pb_title_count/_title_count.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ TitleCount });

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

@@ -0,0 +1,4 @@
+import TitleDetail from "pb_title_detail/_title_detail.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ TitleDetail });

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

@@ -0,0 +1,4 @@
+import User from "pb_user/_user.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ User });

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

@@ -0,0 +1,4 @@
+import UserBadge from "pb_user_badge/_user_badge.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ UserBadge });

data/app/pb_kits/playbook/packs/site_styles/_kit_style_index.scss

@@ -4,10 +4,28 @@
 @import "../../pb_title/title";
 @import "../../pb_body/body";
 @import "../../pb_caption/caption";
-@import "../../pb_caption/caption_lg";
 @import '../../pb_layout/layout';
 @import '../../pb_image/image';
 @import '../../pb_list/list';
 @import '../../pb_table/table';
 @import '../../pb_avatar/avatar';
 @import '../../pb_input/input';
+@import '../../pb_line_graph/line_graph';
+@import '../../pb_bar_graph/bar_graph';
+@import '../../pb_icon/icon';
+@import '../../pb_dashboard_value/dashboard_value';
+@import '../../pb_time/time';
+@import '../../pb_pill/pill';
+@import '../../pb_user_badge/user_badge';
+@import '../../pb_date/date';
+@import '../../pb_title_detail/title_detail';
+@import '../../pb_icon_circle/icon_circle';
+@import '../../pb_icon_value/icon_value';
+@import '../../pb_star_rating/star_rating';
+@import '../../pb_progress_simple/progress_simple';
+@import '../../pb_title_count/title_count';
+@import '../../pb_user/user';
+@import '../../pb_label_value/label_value';
+@import '../../pb_message/message';
+@import '../../pb_timestamp/timestamp';
+@import '../../pb_online_status/online_status';

data/app/pb_kits/playbook/packs/site_styles/_scaffold.scss

@@ -39,5 +39,5 @@ body {
 
 a {
   text-decoration: none;
-  color: $power_royal;
+  color: $primary;
 }

data/app/pb_kits/playbook/packs/site_styles/_site-style.scss

@@ -8,7 +8,7 @@
 
   &--topNav {
     flex: 0 0;
-    border-bottom: 1px solid $sky;
+    border-bottom: 1px solid $border_light;
     padding: 20px 30px;
     background: $white;
   }
@@ -22,7 +22,7 @@
       flex: 0 0 250px;
       padding: 0;
       background: $white;
-      border-right: 1px solid $sky;
+      border-right: 1px solid $border_light;
       max-width: 250px;
       min-height: calc(100vh - 89px);
     }
@@ -39,7 +39,7 @@
 .pb--kit-type-nav {
   margin: 20px 0 30px;
   line-height: 34px;
-  border-bottom: 2px solid rgba($sky, 0.6);
+  border-bottom: 2px solid rgba($border_light, 0.6);
 
   a {
     padding: 0 10px;
@@ -65,7 +65,7 @@
       font-weight: 600;
 
       &::after {
-        background: $power_royal;
+        background: $primary;
       }
     }
   }

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

@@ -8,6 +8,19 @@
   background: $white;
   overflow: hidden;
 
+  &-demo-row {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin: 50px 0;
+    flex-wrap: wrap;
+
+    & > div {
+      margin: 20px 0;
+    }
+  }
+
   .pb--close-toggle {
     position: absolute;
     right: 10px;
@@ -121,7 +134,7 @@
 .pb--propsTable {
   position: relative;
   margin: 40px 0 0;
-  background: $sky-lighter;
+  background: $card_light;
   color: #faf6e4;
   padding: 10px 30px 10px 30px;
   border: 1px solid $border-light;
@@ -137,7 +150,7 @@
       th {
         text-align: left;
         padding: 10px 10px 5px 10px;
-        color: $ink_lighter;
+        color: $text_lt_light;
         opacity: 0.7;
         font-size: 12px;
         text-transform: uppercase;
@@ -147,7 +160,7 @@
         border-bottom: 1px solid $border-light;
         padding: 5px 10px;
         font-size: 14px;
-        color: $ink;
+        color: $text_lt_light;
         font-weight: 600;
       }
 

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

@@ -3,21 +3,21 @@
 
 .markdown {
   h1 {
-    @include heading-1;
+    @include pb_title_1;
     margin: 1rem 0;
   }
 
   h2 {
-    @include heading-2;
+    @include pb_title_2;
     margin: 1rem 0;
   }
 
   h3 {
-    @include heading-3;
+    @include pb_title_3;
     margin: 1rem 0;
   }
   h4 {
-    @include heading-4;
+    @include pb_title_4;
     margin: 1rem 0;
   }
   h5 {
@@ -38,7 +38,7 @@
     color: #faf6e4;
     padding: 0.5rem 1.5rem;
     margin: 1rem 0;
-    box-shadow: 0 2px 10px rgba($ink,0.2);
+    box-shadow: 0 2px 10px $shadow_light;
     border-radius: 0.25rem;
     overflow: hidden;
     font-size: 1rem;
@@ -62,13 +62,13 @@
       width: 20px;
       flex: 0 0 20px;
       text-align: left;
-      color: $ink-lightest;
+      color: $text_lt_default;
       font-weight: $bold;
       margin-right: $space-sm;
     }
   }
   li {
-    border-bottom: 1px solid $sky;
+    border-bottom: 1px solid $border_light;
     padding: $space-sm 0;
     display: flex;
     align-items: left;

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

@@ -65,8 +65,8 @@ ul {
 
 @each $name, $value in $spaces{
   div.pb--spacing_#{$name}{
-    width: #{$value} ;
+    width: #{$value};
     height: 78px;
-    background: $p_red_opacity_2 ;
+    background: $shadow_light;
   }
 }

data/app/pb_kits/playbook/pb_avatar/_avatar.html.erb

@@ -1,8 +1,12 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data(initials: object.initials),
-    class: object.classname("avatar_#{object.size}")) do %>
-  <% if object.url.present? %>
-    <%= pb_rails("image", props: { url: object.url, alt: object.name }) %>
+    class: object.classname(object.kit_class),
+    aria: object.aria) do %>
+  <%= content_tag(:div,
+      data: { initials: object.initials },
+      class: "avatar_wrapper") do %>
+    <%= object.image %>
   <% end %>
+  <%= object.status %>
 <% end %>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from "prop-types";
 import classnames from 'classnames';
-import { map } from 'lodash'
+import { map } from 'lodash';
 import Image from "../pb_image/_image.jsx";
 
 const propTypes = {

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

@@ -2,47 +2,90 @@
 @import "../tokens/colors";
 @import "../tokens/typography";
 
-.avatar {
-  $avatar-sizes: (
-    "xs":   28px,
-    "sm":   38px,
-    "md":   60px,
-    "base": 60px,
-    "lg":   80px,
-    "xl":   100px,
-  );
+$avatar-sizes: (
+  "xs":   28px,
+  "sm":   38px,
+  "md":   60px,
+  "base": 60px,
+  "lg":   80px,
+  "xl":   100px,
+);
+
+[class^=pb_avatar] {
+  position: relative;
 
   @each $name, $size in $avatar-sizes {
-    &_#{$name}, &_#{$name}_thumb {
+    &[class*=_#{$name}],
+    &[class*=_#{$name}_thumb] {
       width: $size;
       height: $size;
       object-fit: cover;
-      border-radius: $border-rad-mega;
-      background: $slate;
-      overflow: hidden;
       position: relative;
+      flex-shrink: 0;
+      flex-grow: 0;
+      flex-basis: $size;
 
-      &::before {
-        content: attr(data-initials);
-        width: 100%;
-        height: 100%;
-        display: block;
-        color: $white;
-        text-align: center;
-        font-size: $size * 0.38;
-        line-height: $size;
-        text-transform: uppercase;
+      .avatar_wrapper {
+        width: $size;
+        height: $size;
+        object-fit: cover;
+        border-radius: $border-rad-mega;
+        background: $slate;
+        overflow: hidden;
         position: relative;
-        z-index: 0;
-      }
+        flex-shrink: 0;
+        flex-grow: 0;
+        flex-basis: $size;
 
-      img {
-        width: 100%;
-        height: 100%;
+        &::before {
+          content: attr(data-initials);
+          width: 100%;
+          height: 100%;
+          display: block;
+          color: $white;
+          text-align: center;
+          font-size: $size * 0.38;
+          line-height: $size;
+          text-transform: uppercase;
+          position: relative;
+          z-index: 0;
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 1;
+        }
+      }
+      [class^=pb_online_status] {
         position: absolute;
+        right: 0;
         top: 0;
-        left: 0;
-        z-index: 1;
+        bottom: auto;
+        left: auto;
+        z-index: 500;
+
+        &.size_xs {
+          right: -4px;
+        }
+
+        &.size_md {
+          top: auto;
+          bottom: 6px;
+        }
+
+        &.size_lg {
+          top: auto;
+          bottom: 14px;
+        }
+
+        &.size_xl {
+          top: auto;
+          bottom: 22px;
+        }
       }
     }
   }