playbook_ui 2.9.9 → 3.0.0

data/app/pb_kits/playbook/pb_layout/docs/_layout_default.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+
+import {
+  Layout,
+} from "../.."
+
+function LayoutDefault() {
+  return (
+    <div>
+      <h1>{`Coming Soon...`}</h1>
+    </div>
+  )
+}
+
+export default LayoutDefault;

data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes.html.erb

@@ -0,0 +1,32 @@
+<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "xs"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "sm"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "md", collapse: "sm"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "xl", collapse: "sm"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb

@@ -0,0 +1,32 @@
+<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "xs", variant: "dark"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "sm", variant: "dark"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "md", collapse: "sm", variant: "dark"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm", variant: "dark"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("layout", props: {position: "left", size: "xl", collapse: "sm", variant: "dark"}) do %>
+  <%= pb_rails("layout/sidebar") do %> Side <% end %>
+  <%= pb_rails("layout/body") do %> Body <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_transparent.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "sm", transparent: true}) do %>
+  <%= pb_rails("layout/sidebar") do %>
+    <%= pb_rails("body", props: { text: "Side" }) %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("body", props: { text: "Body" }) %>
+  <% end %>
+<% end %>

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

@@ -1,14 +1,8 @@
 examples:
   rails:
-  - layout_xs: Extra Small
-  - layout_sm: Small
-  - layout_md: Medium
-  - layout_lg: Large
-  - layout_xl: Extra Large
-  - layout_xs_dark: Extra Small Dark
-  - layout_sm_dark: Small Dark
-  - layout_md_dark: Medium Dark
-  - layout_lg_dark: Large Dark
-  - layout_xl_dark: Extra Large Dark
+  - layout_colors: Colors
+  - layout_transparent: Transparent
+  - layout_sizes: Sizes
+  - layout_sizes_dark: Sizes Dark
   react:
-  - layout_xs: Extra Small
+  - layout_default: Default

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

@@ -1 +1 @@
-export {default as LayoutXs} from './_layout_xs.jsx';
+export {default as LayoutDefault} from './_layout_default.jsx';

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

@@ -10,27 +10,25 @@ module Playbook
       prop :collapse, type: Playbook::Props::Enum,
                       values: %w[xs sm md lg xl],
                       default: "xs"
-      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :full, type: Playbook::Props::Boolean, default: false
       prop :position, type: Playbook::Props::Enum,
                       values: %w[left right],
                       default: "left"
-      prop :transparent, type: Playbook::Props::Boolean, default: false
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md lg xl],
                   default: "md"
+      prop :transparent, type: Playbook::Props::Boolean, default: false
+      prop :variant, type: Playbook::Props::Enum,
+                  values: %w[light dark gradient],
+                  default: "light"
 
       def classname
-        first_class = generate_classname("pb_layout", size, position, dark_class, transparent_class)
+        first_class = generate_classname("pb_layout_kit", "size_#{size}", position, variant, transparent_class)
         [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
       end
 
     private
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def full_class
         full ? "full" : ""
       end

data/app/pb_kits/playbook/pb_message/_message.jsx

@@ -1,21 +1,78 @@
 import React from 'react';
-import PropTypes from "prop-types";
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
-};
+import {
+  Body,
+  Caption,
+  Avatar,
+} from '../'
 
-class Message extends React.Component {
-  render() {
+type MessageProps = {
+  avatarName?: String,
+  avatarStatus?: String,
+  avatarUrl?: String,
+  label?: String,
+  message: String,
+  timestamp?: String,
+}
+
+const print_label = (label) => {
+  if ( label != null ) {
     return (
-      <div className="pb_message">
-        <span>MESSAGE CONTENT</span>
-      </div>
+      <Caption>{`${label}`}</Caption>
+    )
+  }
+}
+
+const print_timestamp = (timestamp) => {
+  if ( timestamp != null ) {
+    return(
+      <Caption size='xs'>{`${timestamp}`}</Caption>
     )
   }
 }
 
-Message.propTypes = propTypes;
+const Message = (props: MessageProps) => {
+  const {
+    avatarName='',
+    avatarUrl='',
+    label='',
+    message='',
+    timestamp='',
+    avatarStatus=null
+  } = props
+  
+  const print_avatar = (avatarName, avatarUrl, avatarStatus) => {
+    if ( avatarUrl !== '' && avatarName !== '' ) {
+      return (
+        <Avatar name={avatarName} size='sm' imageUrl={avatarUrl} status={avatarStatus}/>
+      )
+    }
+    if ( avatarUrl === '' && avatarName !== '' ) {
+      return (
+        <Avatar name={avatarName} size='sm' status={avatarStatus}/>
+      )
+    }
+  }
+
+  const messageCSS = ( avatarUrl, avatarName ) => {
+    if (avatarUrl != '' || avatarName != '') {
+      return 'pb_message_kit_avatar'
+    }
+    else {
+      return 'pb_message_kit'
+    }
+  }
+
+  return (
+    <div className={messageCSS(avatarName, avatarUrl)}>
+      {print_avatar(avatarName, avatarUrl, avatarStatus)}
+      <div class="content_wrapper">
+        {print_label(label)}
+        <Body>{message}</Body>
+        {print_timestamp(timestamp)}
+      </div>
+    </div>
+  )
+}
 
 export default Message;

data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx

@@ -1,9 +1,66 @@
 import React from "react"
-import Message from "../../"
+import { Message } from "../../"
 
 function MessageDefault() {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <div>
+
+      <Message
+        label='Message'
+        avatarName='Mike Bishop'
+        message='How can we assist you today?'
+        timestamp='20 seconds ago'
+        avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
+        avatarStatus="online"
+      />
+
+      <br/><br/>
+
+      <Message
+        label='Support'
+        avatarName='Wade Winningham'
+        message='We will escalate this issue to a Senior Support agent.'
+        timestamp='9 minutes ago'
+        avatarUrl='https://randomuser.me/api/portraits/men/14.jpg'
+      />
+
+      <br/><br/>
+
+      <Message
+        avatarName='Lisa Thompson'
+        message='To processs your order, I will need your full name.'
+        timestamp='4 hours ago'
+        avatarUrl='https://randomuser.me/api/portraits/women/39.jpg'
+      />
+
+      <br/><br/>
+
+      <Message
+        avatarName='Becca Jacobs'
+        label='Application'
+        message='Application for Kate Smith is waiting for your approval'
+        timestamp='2 days ago'
+        avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
+      />
+
+      <br/><br/>
+
+      <Message
+        avatarName='Timothy Wenhold'
+        label='Complaint'
+        message='We are so sorry you had a bad experience!'
+        timestamp='2 days ago'
+      />
+
+      <br/><br/>
+
+      <Message
+        label='Support'
+        message='Please hold for one moment, I will check with my manager.'
+        timestamp='2 days ago'
+      />
+
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -1,21 +1,28 @@
-import React from 'react';
-import PropTypes from "prop-types";
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
+import Caption from '../pb_caption/_caption.jsx'
+
+type SectionSeparatorProps = {
+  className: String,
+  text: String,
+  variant?: 'card' | 'background'
 };
 
-class SectionSeparator extends React.Component {
-  render() {
-    return (
-      <div className="pb_section_separator">
-        <span>SECTION SEPARATOR CONTENT</span>
-      </div>
-    )
-  }
-}
+const SectionSeparator = ({
+  className,
+  text,
+  variant = 'card'
+}: SectionSeparatorProps) => {
 
-SectionSeparator.propTypes = propTypes;
+  const css = classnames([`pb_section_separator_kit_${variant}`, className])
+
+  return (<div className={css}>
+    <span>
+      <Caption text={text}/>
+    </span>
+  </div>)
+}
 
-export default SectionSeparator;
+export default SectionSeparator

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -2,18 +2,27 @@
 @import "../tokens/spacing";
 @import "../pb_caption/caption";
 
+$section_colors: (
+  background:   $bg_light,
+  card:   $card_light,
+);
+
 [class^=pb_section_separator_kit] {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
 
-  span {
-    display: inline-block;
-    padding: 0 $space_xs;
-    background: $bg_light;
-    position: relative;
-    z-index: 1;
+  @each $color_name, $color_value in $section_colors {
+    &[class*=_#{$color_name}] {
+      span {
+        display: inline-block;
+        padding: 0 $space_xs;
+        background: #{$color_value};
+        position: relative;
+        z-index: 1;
+      }
+    }
   }
 
   &::after {

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

@@ -0,0 +1,10 @@
+import React from "react"
+import {SectionSeparator} from "../../"
+
+function SectionSeparatorLine() {
+  return (
+    <SectionSeparator/>
+  )
+}
+
+export default SectionSeparatorLine

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -0,0 +1,10 @@
+import React from "react"
+import {SectionSeparator} from "../../"
+
+function SectionSeparatorText() {
+  return (
+    <SectionSeparator text="Title Separator"/>
+  )
+}
+
+export default SectionSeparatorText

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("section_separator", props: { text: "Title Separator", variant: "background"}) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import {SectionSeparator} from "../../"
+
+function SectionSeparatorTextBackground() {
+  return (
+    <SectionSeparator text="Title Separator"
+        variant="background"
+    />
+  )
+}
+
+export default SectionSeparatorTextBackground

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

@@ -3,7 +3,9 @@ examples:
   rails:
   - section_separator_text: Text Separator
   - section_separator_line: Line Separator
-
+  - section_separator_text_background: Background Variant
 
   react:
-  - section_separator_default: Default
+  - section_separator_text: Text Separator
+  - section_separator_line: Line Separator
+  - section_separator_text_background: Background Variant