playbook_ui 4.5.2 → 4.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a53bc5cf2fb66a8c1b132d7584987bfe63d6ce15bdfaacbc6f914e512c8c8477
-  data.tar.gz: 9b3343faba44b81ca90b967c0bf9295651e13dd06d220b76e745a2c6480280f0
+  metadata.gz: cc46ba8ce92d2263208d00079341a83b7c74688f5078f3ae16751187489a1056
+  data.tar.gz: 1ee7762ae7364ef5e102733535f79ffbe28f1200e28222cd12a3b785695eba31
 SHA512:
-  metadata.gz: 28b60ef7b98e29fcc3d6f1b34ca63d3728ee6faf9145555ec59f1460d28c4c859412c04b073639c40925399ca1a5cacee192f223dc9c96c350271cc1d4b4f4a5
-  data.tar.gz: db56dae47542092eebe7de48433ad3a639f3dbf67e3ff1e99debbfff71dca5c35d25be1687c70093676310e16e61bb58c753942c589fe88621974e93f7e4fcf9
+  metadata.gz: f0086b227a030c6fd5a462ec47793d6e01d3de679795f1a86668a4792281cc854127c1f3f9b4fc6f625b5879f24a15066fcda570685db9a88a62ddcc87f0e843
+  data.tar.gz: 7cb45ba37ca83179c4f343fff59f81ce42ec926ace562d42e483bcd065a740e4ed56766a3ed1ce5127dee06fc34c567a7adad833ab18b3e047325291918dbb48

data/app/helpers/playbook/pb_sample_helper.rb

@@ -15,5 +15,42 @@ module Playbook
       @type = type
       @sample = sample
     end
+
+    def read_file(filename)
+      if File.file?(filename)
+        File.read(filename)
+      else
+        ""
+      end
+    end
+
+    def get_raw_code(sample, type)
+      if type == "rails"
+        ext = "html.erb"
+      elsif type == "react"
+        ext = "jsx"
+      end
+      filename = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.#{ext}"
+      contents = read_file(filename)
+      contents
+    end
+
+    def get_sample_code_content(sample, type)
+      if type == "rails"
+        rouge_type = "erb"
+      elsif type == "react"
+        rouge_type = "react"
+      end
+      code = get_raw_code(sample, type)
+      raw rouge(code, rouge_type)
+    end
+
+    def render_sample_ui(sample, type)
+      if type == "rails"
+        render template: "playbook/samples/#{sample}/index.html.erb"
+      elsif type == "react"
+        react_component(sample.titleize.to_s)
+      end
+    end
   end
 end

data/app/pb_kits/playbook/_playbook.scss

@@ -64,3 +64,4 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
+@import 'pb_filter/filter';

data/app/pb_kits/playbook/config/_kit_ui.html.erb

@@ -13,7 +13,7 @@
   <% if type == "rails" %>
     <%= render partial: "pb_#{@kit_examples[:kit]}/docs/#{key}" %>
   <% elsif type == "react" %>
-    <%= pb_react(key.camelize) %> 
+    <%= pb_react(key.camelize) %>
   <% end %>
   <br>
 </div>
@@ -29,12 +29,12 @@
         </li>
       </ul>
     </div>
-    <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example">
+    <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
       <a href="#" data-toggle="false" class="pb--close-toggle">Close</a>
       <% if type == "rails" %>
         <pre class="highlight"><%= raw rouge(contents, "erb") %></pre>
       <% elsif type == "react" %>
         <pre class="highlight"><%= raw rouge(contents, "react")%></pre>
       <% end %>
-    </div>  
+    </div>
   <% end %>

data/app/pb_kits/playbook/data/menu.yml

@@ -13,6 +13,7 @@ kits:
     - legend
     - line_graph
     - distribution_bar
+  - filter
   - fixed_confirmation_toast
   - flex
   - forms:
@@ -72,4 +73,3 @@ kits:
     - title_detail
   - user
   - user_badge
-  - editor

data/app/pb_kits/playbook/index.js

@@ -17,6 +17,7 @@ export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
 export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
 export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
+export Filter from './pb_filter/_filter.jsx'
 export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
 export Flex from './pb_flex/_flex.jsx'
 export FlexItem from './pb_flex/_flex_item.jsx'
@@ -61,6 +62,7 @@ export TextInput from './pb_text_input/_text_input.jsx'
 export Time from './pb_time/_time.jsx'
 export TimeStamp from './pb_timestamp/_timestamp.jsx'
 export Title from './pb_title/_title.jsx'
+export TitleCount from './pb_title_count/_title_count.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'

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

@@ -1,5 +1,5 @@
-import '../../../../fonts/fontawesome.min.js'
-import '../../../../fonts/regular.min.js'
+import '../../../../fonts/fontawesome-min.js'
+import '../../../../fonts/regular-min.js'
 import './main.scss'
 import '../vendor.js'
 
@@ -10,6 +10,46 @@ window.$(document).on('click', '[data-toggle]', function(e) {
   var kitContainer = window.$(this).closest('.pb--doc')
   var toggleTarget = window.$(this).data('toggle')
 
-  window.$(kitContainer).find('[data-action="toggle"]').hide()
-  window.$(kitContainer).find('[data-togglable="' + toggleTarget + '"]').show()
+  window
+    .$(kitContainer)
+    .find('[data-action="toggle"]')
+    .hide()
+  window
+    .$(kitContainer)
+    .find('[data-togglable="' + toggleTarget + '"]')
+    .show()
+})
+
+window.$(document).ready(() => {
+  $('.compress').hide()
+
+  window.$(document).on('click', '.toggle-button', (e) => {
+    e.preventDefault()
+    $('.pb--codeCopy').toggleClass('close')
+  })
+
+  $('.expand').click(() => {
+    $('.sample-nav').hide()
+    $('.compress').show()
+  })
+
+  $('.compress').click(() => {
+    $('.sample-nav').show()
+    $('.compress').hide()
+  })
+
+  const setClipboard = (value) => {
+    var tempInput = document.createElement('textarea')
+    tempInput.style = 'position: absolute; left: -1000px; top: -1000px'
+    tempInput.value = value
+    document.body.appendChild(tempInput)
+    tempInput.select()
+    document.execCommand('copy')
+    document.body.removeChild(tempInput)
+  }
+
+  $('.copy-clipboard').click(() => {
+    var copyText = document.querySelector('.hiddenCodeforCopy').textContent
+    setClipboard(copyText)
+  })
 })

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

@@ -31,6 +31,7 @@ import * as DateRangeStacked from 'pb_date_range_stacked/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 Filter from 'pb_filter/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
 import * as Flex from 'pb_flex/docs'
 import * as Hashtag from 'pb_hashtag/docs'
@@ -78,12 +79,6 @@ import * as Toggle from 'pb_toggle/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
 
-import PbTypeahead from 'pb_typeahead'
-PbTypeahead.start()
-
-import PbPopover from 'pb_popover'
-PbPopover.start()
-
 WebpackerReact.setup({
   ...Avatar,
   ...Badge,
@@ -103,6 +98,7 @@ WebpackerReact.setup({
   ...DateStacked,
   ...DateYearStacked,
   ...DistributionBar,
+  ...Filter,
   ...FixedConfirmationToast,
   ...Flex,
   ...Hashtag,

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

@@ -10,41 +10,6 @@ import WebpackerReact from 'webpacker-react'
 // ===========================================
 // Generated file from kit generator.
 
-import Dashboards from '../../../views/playbook/samples/dashboards/dashboards.jsx'
+import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
 
 WebpackerReact.setup({ Dashboards })
-
-$(document).ready(() => {
-  $('.pb--codeCopy').show()
-  $('.compress').hide()
-
-  window.$(document).on('click', '.toggle-button', (e) => {
-    e.preventDefault()
-    $('.pb--codeCopy').toggleClass('close')
-  })
-
-  $('.expand').click(() => {
-    $('.sample-nav').hide()
-    $('.compress').show()
-  })
-
-  $('.compress').click(() => {
-    $('.sample-nav').show()
-    $('.compress').hide()
-  })
-
-  const setClipboard = (value) => {
-    var tempInput = document.createElement('textarea')
-    tempInput.style = 'position: absolute; left: -1000px; top: -1000px'
-    tempInput.value = value
-    document.body.appendChild(tempInput)
-    tempInput.select()
-    document.execCommand('copy')
-    document.body.removeChild(tempInput)
-  }
-
-  $('.copy-clipboard').click(() => {
-    var copyText = document.querySelector('.hiddenCodeforCopy').textContent
-    setClipboard(copyText)
-  })
-})

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

@@ -14,7 +14,7 @@
       }
     }
   }
-  
+
   .sample-nav {
     padding: 0 25px;
     background: #172257;
@@ -23,7 +23,7 @@
     flex-basis: 200px;
 
   }
-  
+
   .sample-actions {
     display: flex;
     align-items: center;
@@ -51,6 +51,7 @@
     bottom: 0;
     left: 0;
     transition: all .4s;
+    border-radius: 0 0 6px 6px;
   }
 
   .pb--codeCopy.close {

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

@@ -3,10 +3,9 @@
 .pb--doc {
   margin-bottom: 20px;
   border: 1px solid $border-light;
-  border-radius: 4px;
+  border-radius: 6px;
   box-shadow: 0 4px 10px $shadow;
   background: $white;
-  overflow: hidden;
 
   &-demo-row {
     width: 100%;
@@ -36,7 +35,7 @@
     font-weight: 600;
     z-index: 100;
   }
-  
+
   .pb--kit-example, .pb--kit-example-markdown {
     padding: calc(2rem + 4px) 2rem 1rem;
   }
@@ -108,6 +107,7 @@
     border-top: 1px solid $border-light;
     display: none;
     overflow-x: auto;
+    border-radius: 0 0 6px 6px;
   }
 
   &.dark_ui {

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.md

@@ -0,0 +1,2 @@
+
+This is used when there is no avatar for a particular user.

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.md

@@ -0,0 +1,2 @@
+
+The Status prop is used to display a user's online status like popular chat apps.

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

@@ -0,0 +1,2 @@
+Avatar displays a user's picture. This helps aid easy recognition of the user. This kit is normally not used by itself, but rather used within other kits.
+The only time Avatar should be used instead of the User kit is when you are not going to display the user's name.

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

@@ -0,0 +1,3 @@
+### Things to Avoid
+
+Avoid using Avatar with the user's name right next to it or under it. Use User kit instead. Do not use this kit for images that are not profile pictures.

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb

@@ -23,5 +23,3 @@
     subtitle: 'Source: thesolarfoundation.com',
     title: 'Solar Employment Growth by Sector, 2010-2016'
 }) %>
-
-

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

@@ -0,0 +1 @@
+Bar graphs are used to show data. Bar graphs are not typically used to show percentages.

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

@@ -0,0 +1,2 @@
+Default text style for paragraphs. Follow hiearchy when using "light" or "lighter" variants to deemphasize text — default style should be followed by "light" followed by "lighter".  
+Use "positive" and "negative" for status. View footer notes for things to avoid.

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

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use positive and negative variants with each other. Use <a href="https://playbook.powerapp.cloud/kits/pill">Pill Kit</a> to show status if the text is short. Otherwise, use positive and negative variants and use them sparingly. 

data/app/pb_kits/playbook/pb_button/docs/_button_default.md

@@ -0,0 +1 @@
+The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button.

data/app/pb_kits/playbook/pb_button/docs/_button_full_width.md

@@ -0,0 +1 @@
+This button is used many times for mobile or other things like cards and sidebars.

data/app/pb_kits/playbook/pb_button/docs/_button_loading.md

@@ -0,0 +1 @@
+Used when a button will take a little while to load. The spinner lets the user know that the button has worked and it is in the process of loading. 

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

@@ -0,0 +1,2 @@
+### Things to Avoid
+Never use more than one primary button on a page at any given time.

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

@@ -0,0 +1 @@
+Use to provide supplementary context. Default size is best when providing supplementary context to a small section (i.e. label for a text input, label for a paragraph). Use large caption when supplementary text covers more content.

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

@@ -0,0 +1,2 @@
+### Things to Avoid
+If the text gets very long when using default or large size, use a different typography style.

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

@@ -0,0 +1 @@
+Checkbox is used for a list of selections that are meant to have one or more options checked.

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb

@@ -22,4 +22,4 @@
 <%= pb_rails("circle_icon_button", props: {
   variant: "link",
   icon: "user"
-}) %>
+}) %>

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

@@ -0,0 +1 @@
+When using Icon Circle Button, the icon must be clear a clear indication of what the button does because there is no text. Icon Circle Buttons take up less space on the page compared to normal buttons. The link variant is used for times you only want to have an icon for a button without having a background.

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

@@ -0,0 +1,2 @@
+### Things to Avoid
+Never use more than one primary button on a page at any given time.

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

@@ -0,0 +1 @@
+Use to display customer's or user's contact information.

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

@@ -0,0 +1,2 @@
+Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels. 
+Cents is automatically ".00" unless other wise overwritten (i.e. unit prop).

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

@@ -0,0 +1 @@
+Use in dashboards to give the viewer a quick overview of important metrics. If want to show currency, use <a href="https://playbook.powerapp.cloud/kits/currency">Currency Kit</a>.

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

@@ -0,0 +1 @@
+Use to display the date. Year will not display if it is the current year.

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

@@ -0,0 +1 @@
+Use to display a date range. Year will not show if it is the current year.

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

@@ -0,0 +1 @@
+Use to display the date, stacking month and day. Year will not show if it is the current year.

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

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use in data tables where data density is a priority.

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.md

@@ -0,0 +1 @@
+Use this kits on table displays or column headers to display a single date format.

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

@@ -0,0 +1 @@
+This kit is a simple option for displaying dates in a month, day and the year format.

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

@@ -0,0 +1,4 @@
+### Things to Avoid
+• Avoid using this to display dashboard data which can get lost when used in large format.
+
+• Avoid using it as a date range display, instead use the date range kit.

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

@@ -0,0 +1 @@
+Can be used in the same way a pie chart can be used. By default, Distribution Bar comparatively represents data without numbers. To add numbers to this chart, you can use the Legend kit with prefix text.

data/app/pb_kits/playbook/{pb_editor/_editor.html.erb → pb_filter/_filter.html.erb}

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <span>EDITOR CONTENT</span>
+    <%= render partial: "pb_filter/templates/#{object.template}", locals: {object: object}%>
 <% end %>

data/app/pb_kits/playbook/pb_filter/_filter.jsx

@@ -0,0 +1,88 @@
+/* @flow */
+
+import React from 'react'
+import { Button, Caption, Card, CircleIconButton, Flex, Icon, PbReactPopover, SectionSeparator, Title, TitleCount } from '../'
+
+type FilterProps = {
+  className?: String,
+  data?: String,
+  id?: String,
+  children?: React.Node,
+  filters?: Array<Hash>,
+  sortMenu?: Array<Hash>
+}
+
+const Filter = ({
+  className = 'pb_filter_kit',
+  data,
+  id,
+  children,
+  sortMenu,
+  filters,
+}: FilterProps) => {
+  return (
+    <div
+        className={className}
+        data={data}
+        id={id}
+    >
+      <Card padding="none">
+        <Flex
+            orientation="row"
+            vertical="center"
+        >
+          <CircleIconButton
+              icon="filter"
+              id="filter"
+              variant="secondary"
+          />
+          <div className="maskContainer">
+            <div className="filters">
+              <div className="left_gradient" />
+              <div className="filter">
+                <Caption text={`${filters[0].name}`} />
+                <Title
+                    size={4}
+                    tag="h4"
+                    text="name"
+                />
+              </div>
+              <div className="right_gradient" />
+            </div>
+          </div>
+        </Flex>
+        <SectionSeparator />
+        <Flex
+            className="filter-bottom"
+            orientation="row"
+            spacing="between"
+            vertical="center"
+        >
+          <TitleCount
+              align="center"
+              count={25}
+              title="Results"
+          />
+          <Flex
+              orientation="row"
+              vertical="center"
+          >
+            <Caption text="sort by:" />
+            <Button
+                id="sort-button"
+                text={`${sortMenu[0].item}`}
+                variant="link"
+            >
+              <Icon />
+            </Button>
+          </Flex>
+        </Flex>
+      </Card>
+      <PbReactPopover>
+        {children}
+      </PbReactPopover>
+    </div>
+  )
+}
+
+export default Filter