playbook_ui 4.15.0 → 4.15.1.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d06b43573e33c771eb3617100802fa3e8ad15bf58f7037c233725df32d4e447
-  data.tar.gz: 005256edb667970f313898e57ede8d2f50cbe9222fd99007a318808e075f3e23
+  metadata.gz: d1eaec88d82c53a274c0d92dd7d6a69e63ba22589107395a1cdc0935806ceef8
+  data.tar.gz: 68fede97efa40f94dee01360bd6f29f3121969d5e2190c9d80b51b3531951ef1
 SHA512:
-  metadata.gz: 33b0a8f35f696aed191bae44c33aa4686864ba89ac73473b88cd749e30d6cc792a7d4fedff7b413857b7ddd3c22959b68df5b34884c0ffe92e6ec319b0af8c2d
-  data.tar.gz: 1070e81eb6faefd83fe85fa725534a8d5ad2ee16f17fb1b9b920433d045a75e09040a85ac64f33c3789d89de1b4dbb332355950f0289914a9acd65a6b8dc19e7
+  metadata.gz: a0f5bf6be6bd1160d6fd1eeb54e806348aa3178470574ef4a18327826e40f145d7cc6af01937b2cf612fd5f5d26f3a7c0805ae896490ab1929c2ef581afba46e
+  data.tar.gz: 60a66f8d413244e10d2187c5f7c1465e5310154ddbeb82d630c2fd5b7614fb2a3fd3d4730b501a538f4ad18c26b0a599d2c262cb15410d67cbc712ed33d4e8c9

data/app/pb_kits/playbook/_playbook.scss

@@ -7,7 +7,6 @@
 @import 'pb_badge/badge';
 @import 'pb_bar_graph/bar_graph';
 @import 'pb_checkbox/checkbox';
-@import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
@@ -50,7 +49,6 @@
 @import 'pb_popover/popover';
 @import 'pb_progress_pills/progress_pills';
 @import 'pb_progress_simple/progress_simple';
-@import 'pb_progress_step/progress_step';
 @import 'pb_radio/radio';
 @import 'pb_section_separator/section_separator';
 @import 'pb_select/select';
@@ -68,7 +66,6 @@
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
-@import 'pb_tooltip/tooltip';
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';

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

@@ -1,6 +1,5 @@
 samples:
   - dashboards
-  - something
 kits:
   - avatar
   - badge
@@ -14,8 +13,6 @@ kits:
     - legend
     - line_graph
     - distribution_bar
-    - circle_chart
-
   - filter
   - fixed_confirmation_toast
   - flex
@@ -48,13 +45,11 @@ kits:
   - popover
   - progress_pills
   - progress_simple
-  - progress_step
   - section_separator
   - source
   - star_rating
   - stat_change
   - table
-  - tooltip
   - typography:
     - body
     - caption

data/app/pb_kits/playbook/index.js

@@ -52,7 +52,6 @@ export PersonContact from './pb_person_contact/_person_contact.jsx'
 export Pill from './pb_pill/_pill.jsx'
 export ProgressPills from './pb_progress_pills/_progress_pills.jsx'
 export ProgressSimple from './pb_progress_simple/_progress_simple.jsx'
-export ProgressStep from './pb_progress_step/_progress_step.jsx'
 export Radio from './pb_radio/_radio.jsx'
 export SectionSeparator from './pb_section_separator/_section_separator.jsx'
 export Select from './pb_select/_select.jsx'
@@ -67,11 +66,10 @@ export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
 export Time from './pb_time/_time.jsx'
 export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
-export Timestamp from './pb_timestamp/_timestamp.jsx'
+export TimeStamp from './pb_timestamp/_timestamp.jsx'
 export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
 export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
-export TitleDetail from './pb_title_detail/_title_detail.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
@@ -88,4 +86,3 @@ export pbChart from './plugins/pb_chart.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'
-export PbTooltip from './pb_tooltip'

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

@@ -63,7 +63,6 @@ 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 ProgressStep from 'pb_progress_step/docs'
 import * as Radio from 'pb_radio/docs'
 import * as SectionSeparator from 'pb_section_separator/docs'
 import * as Select from 'pb_select/docs'
@@ -138,7 +137,6 @@ WebpackerReact.setup({
   ...Pill,
   ...ProgressPills,
   ...ProgressSimple,
-  ...ProgressStep,
   ...Radio,
   ...SectionSeparator,
   ...Select,

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -3,8 +3,6 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import Icon from '../pb_icon/_icon.jsx'
-
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
   aria?: {
@@ -85,13 +83,7 @@ const Button = (props: ButtonPropTypes) => {
   const buttonAria = buttonAriaProps(props)
   const css = classnames(buttonClassName(props), className)
   const loadingIcon = (
-    <div className="loading-icon">
-      <Icon
-          fixedWidth
-          icon="spinner"
-          pulse
-      />
-    </div>
+    <i className="pb_icon_kit far fa-spinner fa-fw fa-pulse loading-icon" />
   )
 
   const content = (

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -9,7 +9,6 @@ const contactTypeMap = {
   'cell': 'mobile',
   'home': 'phone',
   'work': 'phone-office',
-  'work-cell': 'phone-laptop',
   'email': 'envelope',
   'wrong number': 'slash-phone',
 }

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -28,8 +28,6 @@ module Playbook
           "phone-office"
         when "email"
           "envelope"
-        when "work-cell"
-          "phone-laptop"
         when "wrong-phone"
           "phone-slash"
         else # "unknown" || "other"

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb

@@ -16,8 +16,3 @@
   contact_type: "wrong number",
   contact_value: "3245627482",
 }) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "work-cell",
-  contact_value: "349-185-9988",
-}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -19,10 +19,6 @@ const ContactDefault = () => {
           contactType="work"
           contactValue="3245627482"
       />
-      <Contact
-          contactType="work-cell"
-          contactValue="3245627482"
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb

@@ -14,9 +14,3 @@
   contact_value: "3245627482",
   contact_detail: "Work",
 }) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "work-cell",
-  contact_value: "3245627482",
-  contact_detail: "Work-Cell",
-}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -18,11 +18,6 @@ const ContactDefault = () => {
           contactType="work"
           contactValue="3245627482"
       />
-      <Contact
-          contactDetail="Work-Cell"
-          contactType="work-cell"
-          contactValue="3245627482"
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js

@@ -4,9 +4,6 @@ import typography from '../tokens/_typography.scss'
 import Highcharts from 'highcharts'
 
 const highchartsTheme = {
-  lang: {
-    thousandsSep: ',',
-  },
   colors: [
     colors.data_1,
     colors.data_2,
@@ -22,6 +19,7 @@ const highchartsTheme = {
     plotBackgroundColor: null,
     plotShadow: false,
     plotBorderWidth: 0,
+
   },
   title: {
     style: {
@@ -143,29 +141,6 @@ const highchartsTheme = {
       },
       threshold: null,
     },
-
-    // PIE STYLES
-    pie: {
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-      ],
-      dataLabels: {
-        style: {
-          fontFamily: typography.font_family_base,
-          fontSize: typography.text_smaller,
-          color: colors.text_lt_light,
-          fontWeight: typography.regular,
-        },
-      },
-    },
-
-    // LINE CHART STYLES
     line: {
       dataLabels: {
         color: '#CCC',

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx

@@ -12,7 +12,7 @@ import {
 } from '../'
 
 type DateYearStackedProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: 'center' | 'right',
   className?: String | Array<String>,
   dark?: Boolean,
   data?: String,
@@ -21,7 +21,7 @@ type DateYearStackedProps = {
 }
 
 const DateYearStacked = ({
-  align = 'left',
+  align,
   className,
   dark = false,
   date,

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

@@ -1,3 +1,224 @@
 /* @flow */
 
-export { default } from './Filter'
+import React, { useState } from 'react'
+import {
+  Button,
+  Caption,
+  Card,
+  CircleIconButton,
+  Flex,
+  Icon,
+  List,
+  ListItem,
+  PbReactPopover,
+  SectionSeparator,
+  Title,
+  TitleCount,
+} from '../'
+
+type FilterProps = {
+  background?: Boolean,
+  className?: String,
+  data?: String,
+  id?: String,
+  children?: React.Node,
+  filters?: Array<Hash>,
+  results?: Number,
+  sortMenu?: Array<Hash>,
+  template?: 'default' | 'filter_only' | 'sort_only' | 'single'
+}
+
+const Filter = ({
+  background = true,
+  className = 'pb_filter_kit',
+  data,
+  filters = [{}],
+  id,
+  children,
+  results,
+  sortMenu = null,
+  template = 'default',
+}: FilterProps) => {
+  const [showFilterOptions, setShowFilterOptions] = useState(false)
+  const [showSortOptions, setShowSortOptions] = useState(false)
+  const handleToggleFilters = () => {
+    setShowFilterOptions(!showFilterOptions)
+  }
+  const handleToggleSort = () => {
+    setShowSortOptions(!showSortOptions)
+  }
+
+  const filterButton = (
+    <CircleIconButton
+        icon="filter"
+        id="filter"
+        onClick={handleToggleFilters}
+        text="filter"
+        variant="secondary"
+    />
+  )
+
+  const Filters = () => (
+    <If condition={template != 'sort_only' && filters != null}>
+      <PbReactPopover
+          closeOnClick="outside"
+          offset
+          placement="bottom"
+          reference={filterButton}
+          show={showFilterOptions}
+      >
+        <div className="pb-form">
+          {children}
+        </div>
+
+      </PbReactPopover>
+      <div className="maskContainer">
+        <div className="filters">
+          <div className="left_gradient" />
+          { filters.map((item, index) => (
+            <div
+                className="filter"
+                key={index}
+            >
+              <Caption text={item.name} />
+              <Title
+                  size={4}
+                  tag="h4"
+                  text={item.value}
+              />
+            </div>
+          ))}
+          <div className="right_gradient" />
+        </div>
+      </div>
+    </If>
+  )
+
+  const activeSort = () => {
+    return (
+      sortMenu.map((item) => (
+        item.active ? item.item : null
+      ))
+    )
+  }
+
+  const activeDirection = () => {
+    let direction
+    sortMenu.map((item) => {
+      item.active ? direction = item.direction : null
+    })
+    const icon = direction == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
+    return icon
+  }
+
+  const sortButton = (
+    <If condition={sortMenu != null}>
+      <Button
+          id="sort-button"
+          onClick={handleToggleSort}
+          variant="link"
+      >
+        {activeSort()}
+        <Icon
+            fixedWidth
+            icon={`${activeDirection()}`}
+        />
+      </Button>
+    </If>
+  )
+  const Results = () => {
+    const resultsText = results > 1 ? 'Results' : 'Result'
+    return (
+      <If condition={results != undefined}>
+        <If condition={template != 'default'}>
+          <Caption
+              className="filter-results"
+              size="xs"
+              text={`${results} ${resultsText}`}
+          />
+          <Else />
+          <TitleCount
+              align="center"
+              count={results}
+              title={`${resultsText}:`}
+          />
+        </If>
+      </If>
+    )
+  }
+  const Sort = () => (
+    <If condition={template != 'filter_only'}>
+      <Flex
+          orientation="row"
+          vertical="center"
+      >
+        <If condition={template == 'default'}>
+          <Caption text="sort by:" />
+        </If>
+        <PbReactPopover
+            closeOnClick="outside"
+            offset
+            placement="bottom"
+            reference={sortButton}
+            show={showSortOptions}
+        >
+          <List>
+            {sortMenu ? sortMenu.map((item) => (
+              <ListItem key={item.item}>
+                <Button
+                    link={item.link}
+                    text={item.item}
+                    variant="link"
+                />
+              </ListItem>
+          )) : null}
+
+          </List>
+        </PbReactPopover>
+      </Flex>
+    </If>
+  )
+  const Core = () => (
+    <>
+      <Flex
+          orientation="row"
+          vertical="center"
+      >
+        <Filters />
+        <If condition={template != 'default'}>
+          <Results />
+          <Sort />
+        </If>
+      </Flex>
+      <If condition={template == 'default'}>
+        <SectionSeparator />
+        <Flex
+            className="filter-bottom"
+            orientation="row"
+            spacing="between"
+            vertical="center"
+        >
+          <Results />
+          <Sort />
+        </Flex>
+      </If>
+    </>
+  )
+  return (
+    <div
+        className={className}
+        data={data}
+        id={id}
+    >
+      <If condition={background}>
+        <Card padding="none">
+          <Core />
+        </Card>
+        <Else />
+        <Core />
+      </If>
+    </div>
+  )
+}
+
+export default Filter

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

@@ -1,30 +1,27 @@
 @import "../tokens/spacing";
 @import "../tokens/colors";
 
-.pb_filter_sort_menu {
-  li {
-    padding: 0 $space_sm !important;
-  }
-  [class^=pb_button_kit][class*=_link]{
-    flex-shrink:0;
-    padding: 0 $space_xs !important;
-    [id^="sort"]{
-      margin-left: $space_xs !important;
-    }
-  }
-  [class^=pb_card_body_kit][class*=_md]{
-    padding: 0 !important;
-  }
-}
-
 [class^=pb_filter_kit] {
   [class^=pb_circle_icon_button_kit]{
     padding-left: $space_sm !important;
     padding-top: $space_sm !important;
     padding-bottom: $space_sm !important;
   }
+  [class^=pb_card_body_kit][class*=_md]{
+    padding: 0 !important;
+  }
+  [class^=pb_list_kit] li{
+    padding: 0 $space_sm !important;
+  }
   [class^=pb-form]{
     padding: $space_sm ;
+  }
+  [class^=pb_button_kit][class*=_link]{
+    flex-shrink:0;
+    padding: 0 $space_xs !important;
+    [id^="sort"]{
+      margin-left: $space_xs !important;
+    }
   }
    .sort-by{
     flex-shrink:0;

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -1,39 +1,46 @@
-<%=
-  pb_rails("filter", props: {
-    id: "1",
-    filters: [
-      { name: "name", value: "John Wick" }
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+<% 5.times do%>
+<br>
+<%end%>
+
+<%= pb_rails("filter", props: {
+  id: "1",
+  filters: [
+    {name: "name", value: "John Wick"}
     ],
-    template: "default",
-    results: 546,
-  }) do
+  sort_menu: [
+    {item:"Popularity", link:"#", active: true, direction:"desc"},
+    {item:"Title", link:"#", active: false},
+    {item:"Name", link:"#", active: false},
+  ],
+  template:"default",
+  results: 546,
+  }) do%>
+<%
+  example_collection = [
+    OpenStruct.new(name: "Alabama", value: 1),
+    OpenStruct.new(name: "Alaska", value: 2),
+    OpenStruct.new(name: "Arizona", value: 3),
+    OpenStruct.new(name: "Arkansas", value: 4),
+    OpenStruct.new(name: "California", value: 5),
+    OpenStruct.new(name: "Colorado", value: 6),
+    OpenStruct.new(name: "Connecticut", value: 7),
+    OpenStruct.new(name: "Delaware", value: 8),
+    OpenStruct.new(name: "Florida", value: 9),
+    OpenStruct.new(name: "Georgia", value: 10),
+  ]
 %>
-  <%
-    example_collection = [
-      OpenStruct.new(name: "Alabama", value: 1),
-      OpenStruct.new(name: "Alaska", value: 2),
-      OpenStruct.new(name: "Arizona", value: 3),
-      OpenStruct.new(name: "Arkansas", value: 4),
-      OpenStruct.new(name: "California", value: 5),
-      OpenStruct.new(name: "Colorado", value: 6),
-      OpenStruct.new(name: "Connecticut", value: 7),
-      OpenStruct.new(name: "Delaware", value: 8),
-      OpenStruct.new(name: "Florida", value: 9),
-      OpenStruct.new(name: "Georgia", value: 10),
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
-    <%= form.actions do |action| %>
-      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
+<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+  <%= form.text_field :example_text_field, props: { label: true } %>
+  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+    <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
   <% end %>
 <% end %>
+
+<% end %>
+<% 5.times do%>
+<br>
+<%end%>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -11,20 +11,16 @@ const FilterDefault = () => {
   ]
   return (
     <Filter
-        double
-        filters={{
-          'Full Name': 'John Wick',
-          'Territory': 'San Francisco',
-        }}
+        filters={[
+        { name: 'Full Name', value: 'John Wick' },
+        { name: 'Territory', value: 'San Francisco' },
+      ]}
         results={256}
-        sortOptions={{
-          popularity: 'Popularity',
-          // eslint-disable-next-line
-          manager_title: 'Manager\'s Title',
-          // eslint-disable-next-line
-          manager_name: 'Manager\'s Name',
-        }}
-        sortValue={[{ name: 'popularity', dir: 'asc' }]}
+        sortMenu={[
+      { item: 'Popularity', link: '#', active: true, direction: 'desc' },
+      { item: 'Title', link: '#', active: false },
+      { item: 'Name', link: '#', active: false },
+    ]}
     >
       <TextInput
           label="Full Name"