playbook_ui 4.5.2 → 4.6.0

data/app/pb_kits/playbook/pb_label_value/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things to Avoid
+Try not to use this kit without padding as it will make text illegible if placed right next to the same kit or other kits.

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.md

@@ -0,0 +1 @@
+Use this kit to display a label and value text for almost every data entry.

data/app/pb_kits/playbook/pb_label_value/docs/index.html.erb

@@ -0,0 +1,25 @@
+<div class="container-fluid mt-5">
+  <%= render partial: 'partials/filter-search' %>
+  <%= pb_rails("table", props: { size: "md"} ) do %>
+  <div class="mt-5">
+    <thead>
+      <tr>
+        <th>Backlog Item</th>
+        <th>Deployment</th>
+        <th>Assignees</th>
+        <th class="text-nowrap">Ready for Review</th>
+        <th>Review Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <%= render partial: 'partials/item1' %>
+      <%= render partial: 'partials/item2' %>
+      <%= render partial: 'partials/item3' %>
+
+    </tbody>
+  </div>
+  <% end %>
+</div>
+
+
+<%= render partial: 'partials/modal' %>

data/app/pb_kits/playbook/pb_layout/docs/_description.md

@@ -0,0 +1 @@
+Layouts used for positioning content inside of pages, cards, or containers.

data/app/pb_kits/playbook/pb_legend/docs/_description.md

@@ -0,0 +1 @@
+A key used to compare the variables and their value in any given graph.

data/app/pb_kits/playbook/pb_legend/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use as bullet points in a list.

data/app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb

@@ -1,5 +1,5 @@
 <% labels = %W[Windows Doors Roofing Siding Solar Gutters Insulation Other] %>
 
 <% (1..7).each do |n, i| %>
-   <%= pb_rails("legend", props: { color: "data_#{n}", text: "#{labels[n]}" }) %> 
+   <%= pb_rails("legend", props: { color: "data_#{n}", text: "#{labels[n]}" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_line_graph/docs/_description.md

@@ -0,0 +1 @@
+Line graphs are used to show changes in data over time.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb

@@ -16,6 +16,3 @@
 }] %>
 
 <%= pb_rails("line_graph", props: { id: "line-test", gradient: false, chart_data: data, point_start: 1, title: 'Solar Employment Growth by Sector, 2010-2016', subtitle: 'Source: thesolarfoundation.com', axis_title: 'Number of Employees' }  ) %>
-
-
-

data/app/pb_kits/playbook/pb_list/docs/_description.md

@@ -0,0 +1 @@
+Lists display a vertical set of related content.

data/app/pb_kits/playbook/pb_loading_inline/docs/_description.md

@@ -0,0 +1 @@
+The loading kit is used to indicate to users that a page is still loading, or an action is still being processed.

data/app/pb_kits/playbook/pb_message/docs/_description.md

@@ -0,0 +1 @@
+This multi kit consist of a an avatar, a status, a caption, a body text, and a time stamp. All which can be optional.

data/app/pb_kits/playbook/pb_message/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things To Avoid
+Avoid changing the format of this kit. Keep the layout true to its original design.

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

@@ -0,0 +1 @@
+Use this kit when displaying a message or a sort of communication with either a user or a bot. Use it in history displays, chat rooms, discussion threads or comments section.

data/app/pb_kits/playbook/pb_multiple_users/docs/_description.md

@@ -0,0 +1 @@
+The multiple users kit is used to show that more than one user is associated to an action or item.

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_description.md

@@ -0,0 +1 @@
+Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.

data/app/pb_kits/playbook/pb_nav/docs/_description.md

@@ -0,0 +1 @@
+The nav is a grouped set of links that take the user to another page, or tab through parts of a page. It comes in horizontal or vertical with several different variants.

data/app/pb_kits/playbook/pb_online_status/docs/_description.md

@@ -0,0 +1 @@
+Online Status is a small indicator that lets the user know the status of a person or item.

data/app/pb_kits/playbook/pb_person/docs/_description.md

@@ -0,0 +1 @@
+This kit is broken down into a first name last name format with normal and bold weighted text.

data/app/pb_kits/playbook/pb_person/docs/_footer.md

@@ -0,0 +1,3 @@
+## Things To Avoid
+• Avoid using this kit just for it’s design, it should only be used for displaying people names ONLY.
+• Do not change the style and format. Keep the colors true to the original kit.

data/app/pb_kits/playbook/pb_person/docs/_person_default.md

@@ -0,0 +1 @@
+Use this kit to display users, homeowners, or person of contact.

data/app/pb_kits/playbook/pb_person_contact/docs/_description.md

@@ -0,0 +1 @@
+This kit can be used to display a person contact information. It includes multiples kits like: Person,  contact and caption kit. Use this kit for both Nitro users and Homeowners.

data/app/pb_kits/playbook/pb_person_contact/docs/_footer.md

@@ -0,0 +1,3 @@
+## Thing To Avoid
+• Don’t unstack the contacts: email & phone.
+• Keep the fonts exact in size and weight, don’t change the color variations.

data/app/pb_kits/playbook/pb_pill/docs/_description.md

@@ -0,0 +1 @@
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color here: https://playbook.powerapp.cloud/utilities

data/app/pb_kits/playbook/pb_popover/docs/_description.md

@@ -0,0 +1 @@
+A popover is a way to toggle content on top of other content. It can be used for small texts, small forms, or even dropdowns.

data/app/pb_kits/playbook/pb_progress_pills/docs/_description.md

@@ -0,0 +1 @@
+Progress pills indicate a specific point in time of a series of sequential steps. They are used to track progress of something over time.

data/app/pb_kits/playbook/pb_progress_simple/docs/_description.md

@@ -0,0 +1 @@
+Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.

data/app/pb_kits/playbook/pb_progress_simple/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use as turbolinks bar.

data/app/pb_kits/playbook/pb_radio/docs/_description.md

@@ -0,0 +1 @@
+Radio is a control that allows the user to only choose one predefined option.

data/app/pb_kits/playbook/pb_radio/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Try to avoid using if you have nested options.

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md

@@ -0,0 +1 @@
+Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_section_separator/docs/_description.md

@@ -1,3 +1 @@
-Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
-
-
+Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds. This should only be used on light backgrounds (with our variable `$bg_light`).

data/app/pb_kits/playbook/pb_section_separator/docs/_footer.md

@@ -1,2 +1,2 @@
 ### Things to Avoid
-Do not use section separators to handle lists. Use List Kit. 
+Do not use section separators to handle list; instead, use <a href="https://playbook.powerapp.cloud/kits/list">List Kit</a>. 

data/app/pb_kits/playbook/pb_select/docs/_description.md

@@ -0,0 +1 @@
+Select displays multiple options for a user to pick from in a dropdown menu. User selects one option.

data/app/pb_kits/playbook/pb_select/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Try to avoid using select when there are limited options to choose from (ie either or questions, yes/no questions, etc).

data/app/pb_kits/playbook/pb_select/docs/_select_error.md

@@ -0,0 +1 @@
+Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_selectable_card/docs/_description.md

@@ -0,0 +1 @@
+Cards for information/content that can be selected. There is design for unselected and selected states. Typically used as a form element.

data/app/pb_kits/playbook/pb_selectable_card/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use Forms, Charts & Graphs, Text Input, Textarea, etc inside of selectable card.

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_block.md

@@ -0,0 +1 @@
+Selectable Cards can pass text or block content.

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.md

@@ -0,0 +1 @@
+Default Selectable Cards are multi select by default.

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.md

@@ -0,0 +1,2 @@
+ Single Select allows only one selectable card in the set to be selected.
+ 

data/app/pb_kits/playbook/pb_source/docs/_description.md

@@ -0,0 +1 @@
+General use is to describe the discovery of businesses, customers, etc. This kit can also be used for other purposes as well.

data/app/pb_kits/playbook/pb_star_rating/docs/_description.md

@@ -0,0 +1 @@
+A component to view other people’s opinions and experiences. Use when you want to show evaluation or a quick quantitative rating. Most effective when paired with reviews.

data/app/pb_kits/playbook/pb_stat_change/docs/_description.md

@@ -0,0 +1 @@
+Displays the increase, decrease, or neutral change in data. Use when you want the user to see changes in statistical data. User understanding is increased when paired with label or textual context (i.e. <a href="https://playbook.powerapp.cloud/kits/dashboard_value">Dashboard Value</a>).

data/app/pb_kits/playbook/pb_stat_value/docs/_description.md

@@ -0,0 +1 @@
+This kit was cerated for the main use as a dashboard display for numbers. A  large label is an optional part if it needs more clarity.

data/app/pb_kits/playbook/pb_stat_value/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things To Avoid
+Don’t use this as a replacement for titles on a page. 

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.md

@@ -0,0 +1 @@
+Use this as value for displaying number data at a high level. It’s primary function is to create hierarchy of data within a view. 

data/app/pb_kits/playbook/pb_table/docs/_description.md

@@ -0,0 +1 @@
+Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. Good data tables allows the user to scan, analyze, compare, filter, and sort information to derive insights and commit actions.

data/app/pb_kits/playbook/pb_table/docs/_table_lg.md

@@ -0,0 +1 @@
+Use table size `"lg"` to add padding around each row to maximize reading comfortability. 

data/app/pb_kits/playbook/pb_table/docs/_table_md.md

@@ -0,0 +1 @@
+Use table size `"md"` to add padding around each row to increase reading comfortability. 

data/app/pb_kits/playbook/pb_table/docs/_table_sm.md

@@ -0,0 +1 @@
+Use table size `"sm"` when data density is a priority. Smaller row height enables the user to view more data without the need for scrolling.

data/app/pb_kits/playbook/pb_text_input/docs/_description.md

@@ -0,0 +1 @@
+Area where user can enter small amount of text. Commonly used in forms.

data/app/pb_kits/playbook/pb_text_input/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use for large amounts of text (use <a href="https://playbook.powerapp.cloud/kits/textarea">Textarea</a> instead). Avoid using a text input without validation if input is required and using  with  validation if not required.

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md

@@ -0,0 +1 @@
+Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_textarea/docs/_description.md

@@ -0,0 +1 @@
+Area where user can enter larger amounts of text. Commonly used in forms.

data/app/pb_kits/playbook/pb_textarea/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use for small text amounts (use <a href="https://playbook.powerapp.cloud/kits/text_input">Text Input</a> instead). Avoid using textarea without validation if it is required and using  with  validation if not required.

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md

@@ -0,0 +1 @@
+Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_time/docs/_description.md

@@ -0,0 +1 @@
+This kit consist of large display and table display format. It includes and icon, and a time zone.

data/app/pb_kits/playbook/pb_time/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things To Avoid
+Try to not use this as a small time stamp to display a status update.

data/app/pb_kits/playbook/pb_time/docs/_time_default.md

@@ -0,0 +1 @@
+Use this anywhere needed to display a certain timestamp 

data/app/pb_kits/playbook/pb_timestamp/docs/_description.md

@@ -0,0 +1 @@
+This kit is a small indicator for the user to know s timestamp

data/app/pb_kits/playbook/pb_timestamp/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things To Avoid
+ Leave the text style as is. Don’t use timestamps to display important or sensitive time information.

data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md

@@ -0,0 +1 @@
+Use these only to display status updates in areas that has a lot of data.

data/app/pb_kits/playbook/pb_title/docs/_description.md

@@ -0,0 +1,2 @@
+Typically used as headers. Follow semantic hierarchy — Title 1s should be followed by Title 2s followed by Title 3s and so on, without skipping any levels.
+Tags can be changed using the tag prop. However, be sure follow markdown semantics (h1's are followed by h2's followed by h3's and so on).

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -1,21 +1,39 @@
+/* @flow */
 import React from 'react'
-import PropTypes from 'prop-types'
+import { Body, Title } from '../'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
+type TitleCountProps = {
+  className?: String,
+  data?: String,
+  id?: String,
+  title?: String,
+  count?: Number,
+  size?: String
 }
 
-class TitleCount extends React.Component {
-  render() {
-    return (
-      <div className="pb_title_count">
-        <span>{'TITLE COUNT CONTENT'}</span>
-      </div>
-    )
-  }
-}
-
-TitleCount.propTypes = propTypes
+const TitleCount = ({
+  className = 'pb_title_count_kit',
+  data,
+  count,
+  id,
+  title,
+  size,
+}: TitleCountProps) => (
+  <div
+      className={className}
+      data={data}
+      id={id}
+  >
+    <Title
+        className="pb_title_count_text"
+        size={size == 'lg' ? 3 : 4}
+        text={title}
+    />
+    <Body
+        color="light"
+        text={`${count}`}
+    />
+  </div>
+)
 
 export default TitleCount

data/app/pb_kits/playbook/pb_title_count/docs/_description.md

@@ -0,0 +1 @@
+This kits consists of title kit and body text. It is used to display a title and a count (numbers). It has a base size and a large formation for dashboard use.

data/app/pb_kits/playbook/pb_title_count/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things To Avoid
+Keep the format. Don’t replace the colors for any text in this kit. 

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx

@@ -1,8 +1,19 @@
 import React from 'react'
+import { TitleCount } from '../../'
 
 const TitleCountDefault = () => {
   return (
-    <h1>{'Coming Soon...'}</h1>
+    <>
+      <TitleCount
+          count={35}
+          title="Appointments"
+      />
+      <TitleCount
+          count={35}
+          size="lg"
+          title="Appointments"
+      />
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.md

@@ -0,0 +1 @@
+Use this kit as a form of label value only for a numeric value.

data/app/pb_kits/playbook/pb_title_detail/docs/_description.md

@@ -0,0 +1 @@
+This kit can be used in many versatile ways. It consist of a title 4 and light body text kit.

data/app/pb_kits/playbook/pb_title_detail/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things To Avoid
+Don’t use as replacement for label_value kit. This kit is to be used for small amount of text in the details. 

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.md

@@ -0,0 +1 @@
+Use this kit in tables and cards to display data that doesn’t have a caption assigned.

data/app/pb_kits/playbook/pb_toggle/docs/_description.md

@@ -0,0 +1 @@
+Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state.

data/app/pb_kits/playbook/pb_toggle/docs/_footer.md

@@ -0,0 +1,3 @@
+### Things to Avoid
+Avoid using if there is a selection with no action/execution that follows or if actions need to be confirmed before being applied.
+Avoid using for opposing options (ie having an option on each side of toggle and the side that it is flipped to is the option that is selected).

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -3,9 +3,9 @@
     position: relative;
 
     .pb_typeahead_loading_indicator {
-      position: relative;
+      position: absolute;
       width: min-content;
-      top: 3.8em;
+      bottom: 0.6em;
       left: 1em;
       visibility: hidden;
     }

data/app/pb_kits/playbook/pb_typeahead/docs/_description.md

@@ -0,0 +1 @@
+Typeahead is auto suggestion or completion based on what the user is starting to type, gets refined as the user types more.

data/app/pb_kits/playbook/pb_typeahead/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Avoid using on questionaires, surverys, text input and textarea when users answers/inputs will be individualized.

data/app/pb_kits/playbook/pb_user/docs/_description.md

@@ -0,0 +1 @@
+This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.

data/app/pb_kits/playbook/pb_user_badge/docs/_description.md

@@ -0,0 +1 @@
+This kit was created to display employee icons related to a Nitro user. Currently there is the PVI logo and the Million Dollar Rep Icon.

data/app/pb_kits/playbook/pb_user_badge/docs/_footer.md

@@ -0,0 +1,2 @@
+## Things To Avoid
+Don’t use this to replace icon kit.

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.md

@@ -0,0 +1 @@
+Use these to represent what affiliation an employee has.

data/app/pb_kits/playbook/vendor.js

@@ -10,3 +10,6 @@ import 'lazysizes'
 
 import PbPopover from './pb_popover'
 PbPopover.start()
+
+import PbTypeahead from './pb_typeahead'
+PbTypeahead.start()

data/app/views/layouts/playbook/samples.html.erb

@@ -9,23 +9,6 @@
     <body>
         <div class="sample-layout">
             <%= yield %>
-        
-            <% if @type == "rails" %> 
-                <% contents = File.read("#{Playbook::Engine.root}/app/views/playbook/samples/dashboards/dashboards.html.erb") %>
-                <%= render template: "playbook/samples/dashboards/dashboards.html.erb", locals: { type: @type } %>
-            <% elsif @type == "react" %>
-                <% contents = File.read("#{Playbook::Engine.root}/app/views/playbook/samples/dashboards/dashboards.jsx") %>
-            <% end %>
-            <%= react_component("Dashboards") %>
-            <div class="pb--kit-show">
-                <div class="pb--doc light_ui">
-                    <div class="pb--codeCopy close" >
-                        <a class="pb--close-toggle copy-clipboard" href="#">Copy to Clipboard</a>
-                        <div class="hiddenCodeforCopy"><%= contents %></div>
-                        <%= raw rouge(contents, "erb") %>
-                    </div>
-                </div>
-            </div>
         </div>
     </body>