playbook_ui 4.11.0.pre.alpha.pre.2 → 4.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b6b9cf54a4629dc09514c2a7949f4eeb596b9b0f31578c1f2560abda3decc86
-  data.tar.gz: 9a76e680af942ceefda7969f0f891e9df4e8e93cf05299ebc6681df0c4f9f4ac
+  metadata.gz: 5724cfc73bfc520ae0f5bbb89002649cc2c28eb1161692f1e3b45de3bc417abc
+  data.tar.gz: d93b64cd6811f91f8eff71df0acdbed3d32da9e756e78003ce4f578f6822d1d5
 SHA512:
-  metadata.gz: f7b1f0963931ad0ec683bb2492cf25164e149814d2d3363f0c53709ed08fea768b4c29adf3c6460be1ccdadf253180849797a71e764e09ac86f6986e1d446293
-  data.tar.gz: dbe31146f0908aa1be40b0d7f140d1a2adf647d607daf5def0cb36adf722592fe9c90a0353c60f241fd7fe2575142c50db02dabe5ffc6c1243c081dadd6a2cb7
+  metadata.gz: 978b10162d35e872ca37c0c4572668c3286908fc03b0929a7604ea08a457eb268de8401213192aa96158e4463a1bab032fdaee3f7dbf786b831fcdc846670e7f
+  data.tar.gz: 61b4a2ee3e61c9f223fccb8623272fd74f5864b8facafb04672c50a4b8b9f17ba31c6db702852c2527e90f07129af62d95c0f34c4530059dff3c2b5d3bc1b859

data/app/controllers/playbook/pages_controller.rb

@@ -15,7 +15,7 @@ module Playbook
     def tokens; end
 
     def kits
-      params[:type] ||= "rails"
+      params[:type] ||= "react"
       @type = params[:type]
     end
 

data/app/helpers/playbook/pb_doc_helper.rb

@@ -23,7 +23,7 @@ module Playbook
       end
     end
 
-    def get_kit_description(kit)
+    def get_kit_description(_kit)
       filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit}/docs/_description.md"
       read_file(filename)
     end
@@ -47,7 +47,7 @@ module Playbook
 
     def pb_kits(type: "rails")
       display_kits = []
-      kits = get_kits()
+      kits = get_kits
       kits.each do |kit|
         if kit.is_a?(Hash)
           nav_hash_array(kit).each do |sub_kit|
@@ -62,7 +62,7 @@ module Playbook
 
     def get_kits
       menu = YAML.load_file("#{Playbook::Engine.root}/app/pb_kits/playbook/data/menu.yml")
-      return menu['kits']
+      menu["kits"]
     end
 
     def pb_category_kits(category_kits: [], type: "rails")
@@ -74,7 +74,7 @@ module Playbook
     end
 
     def render_pb_doc_kit(kit, type, code = true)
-      title = render_clickable_title(kit)
+      title = render_clickable_title(kit, type)
       ui = raw("<div class='pb--docItem-ui'>
           #{pb_kit(kit: kit, type: type, show_code: code)}</div>")
       title + ui
@@ -98,6 +98,50 @@ module Playbook
       link.first.last
     end
 
+    def all_link(type)
+      type == "react" ? kits_path("", type: "react") : kits_path
+    end
+
+    def category_link(type, link)
+      if type == "react"
+        kit_category_show_path(nav_hash_category(link), type: "react")
+      else
+        kit_category_show_path(nav_hash_category(link), type: "rails")
+      end
+    end
+
+    def sub_category_link(type, link)
+      if type == "react"
+        kit_show_reacts_path(link)
+      else
+        kit_show_path(link)
+      end
+    end
+
+    def kit_link(type, link)
+      if type == "react"
+        kit_show_reacts_path(link)
+      else
+        kit_show_path(link)
+      end
+    end
+
+    def all_active(controller_name, action_name)
+      (controller_name == "pages" && action_name == "kits")
+    end
+
+    def category_active(category, link)
+      (!category.nil? && category == nav_hash_category(link))
+    end
+
+    def kit_active(kit, link)
+      (!kit.nil? && kit == link)
+    end
+
+    def sub_category_active(kit, link)
+      (!kit.nil? && @kit == link)
+    end
+
   private
 
     def get_kit_examples(kit, type)
@@ -118,14 +162,18 @@ module Playbook
       "Playbook::Pb#{folder.camelize}::#{item.camelize}".safe_constantize
     end
 
-    def render_clickable_title(kit)
+    def render_clickable_title(kit, type)
       url = "#"
       begin
-        url = kit_show_path(kit)
+        url = if type == "react"
+                kit_show_reacts_path(kit)
+              else
+                kit_show_path(kit)
+              end
       rescue
         puts "Kit Path Not Avaliable"
       end
-        render inline: "<a href='#{url}'>#{ pb_rails(:title, props: { text: pb_kit_title(kit), tag: 'h3', size: 2 })}</a>"
+      render inline: "<a href='#{url}'>#{pb_rails(:title, props: { text: pb_kit_title(kit), tag: 'h3', size: 2 })}</a>"
     end
   end
 end

data/app/pb_kits/playbook/_playbook.scss

@@ -17,6 +17,7 @@
 @import 'pb_date_stacked/date_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
 @import 'pb_distribution_bar/distribution_bar';
+@import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
 @import 'pb_form/form';
 @import 'pb_form_pill/form_pill';
@@ -35,6 +36,7 @@
 @import 'pb_line_graph/line_graph';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
+@import 'pb_logistic/logistic';
 @import 'pb_message/message';
 @import 'pb_multiple_users/multiple_users';
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
@@ -58,6 +60,7 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
+@import 'pb_time_range_inline/time_range_inline';
 @import 'pb_timestamp/timestamp';
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
@@ -65,4 +68,4 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
-@import 'pb_filter/filter';
+@import 'pb_weekday_stacked/weekday_stacked';

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

@@ -35,6 +35,7 @@ kits:
   - layout
   - list
   - loading_inline
+  - logistic
   - multiple_users
   - multiple_users_stacked
   - nav
@@ -70,7 +71,9 @@ kits:
     - stat_value
     - time
     - timestamp
+    - time_range_inline
     - title_count
     - title_detail
+    - weekday_stacked
   - user
   - user_badge

data/app/pb_kits/playbook/index.js

@@ -37,6 +37,7 @@ export LineGraph from './pb_line_graph/_line_graph.jsx'
 export List from './pb_list/_list.jsx'
 export ListItem from './pb_list/_list_item.jsx'
 export LoadingInline from './pb_loading_inline/_loading_inline.jsx'
+export Logistic from './pb_logistic/_logistic.jsx'
 export Message from './pb_message/_message.jsx'
 export MultipleUsers from './pb_multiple_users/_multiple_users.jsx'
 export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_stacked.jsx'
@@ -62,11 +63,13 @@ export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
 export Time from './pb_time/_time.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 Toggle from './pb_toggle/_toggle.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
+export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.jsx'
 
 // Dashboard Settings
 export { commonSettings, dataColors } from './pb_dashboard/commonSettings'

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

@@ -49,6 +49,7 @@ import * as Legend from 'pb_legend/docs'
 import * as LineGraph from 'pb_line_graph/docs'
 import * as List from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
+import * as Logistic from 'pb_logistic/docs'
 import * as Message from 'pb_message/docs'
 import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
@@ -73,12 +74,14 @@ import * as Textarea from 'pb_textarea/docs'
 import * as TextInput from 'pb_text_input/docs'
 import * as Time from 'pb_time/docs'
 import * as Timestamp from 'pb_timestamp/docs'
+import * as TimeRangeInline from 'pb_time_range_inline/docs'
 import * as Title from 'pb_title/docs'
 import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
 import * as Toggle from 'pb_toggle/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
+import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 
 WebpackerReact.setup({
   ...Avatar,
@@ -117,6 +120,7 @@ WebpackerReact.setup({
   ...LineGraph,
   ...List,
   ...LoadingInline,
+  ...Logistic,
   ...Message,
   ...MultipleUsers,
   ...MultipleUsersStacked,
@@ -141,10 +145,12 @@ WebpackerReact.setup({
   ...TextInput,
   ...Time,
   ...Timestamp,
+  ...TimeRangeInline,
   ...Title,
   ...TitleCount,
   ...TitleDetail,
   ...Toggle,
   ...User,
   ...UserBadge,
+  ...WeekdayStacked,
 })

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

@@ -1,12 +1,15 @@
-.pb--kit-show.flex-kit {
-  [class^=pb_flex_kit] { background: #F3F7FB; }
-
+.flex-doc-example {
+  overflow: auto;
+  [class^=pb_flex_kit] {
+    background: #F3F7FB;
+  }
   .flex-item, [class^=pb_flex_item_kit] {
     background: #E4E8F0;
     min-width: 30px;
     min-height: 30px;
     color: #242B42;
   }
-
-  .tall { min-height: 200px; }
+  .tall {
+    min-height: 200px;
+  }
 }

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -37,6 +37,7 @@ $pb_button_border_width: 1px;
   justify-content: center;
   flex-basis: auto;
   width: fit-content;
+  font-family: $font_family_base;
 
   .loading-icon {
     position: absolute;

data/app/pb_kits/playbook/pb_card/_card.html.erb

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data,
     class: object.classname,
-    aria: object.aria) do %>
+    aria: object.aria,
+    dark: object.dark) do %>
   <% if object.children %>
     <%= pb_rails("card/card_body", props: { padding: object.padding, children: object.children }) %>
   <% end %>

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -15,11 +15,13 @@ type CardPropTypes = {
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   selected?: Boolean,
   shadow?: 'none' | 'shallow' | 'default' | 'deep' | 'deeper' | 'deepest',
+  dark?: Boolean,
 }
 
 const Card = ({
   children,
   className,
+  dark = false,
   highlight = {},
   padding = 'md',
   selected = false,
@@ -27,6 +29,7 @@ const Card = ({
 }: CardPropTypes) => {
   const bodyCSS = buildCss('pb_card_body_kit', padding)
   const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, {
+    'dark': dark,
     selected,
     deselected: !selected,
     [`highlight_${highlight.position}`]: highlight.position,

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -65,6 +65,8 @@ $pb_card_highlight_size: 4px;
     @include pb_card_selected;
   }
   &[class*=_dark] {
+    @include pb_card_dark;
+        
     &[class*=_selected] {
       @include pb_card_selected_dark;
     }

data/app/pb_kits/playbook/pb_card/card.rb

@@ -16,13 +16,16 @@ module Playbook
                     default: "none"
       prop :highlight, type: Playbook::Props::Hash,
                        default: {}
+      prop :dark, type: Playbook::Props::Boolean,
+                 default: false
 
       def classname
         generate_classname("pb_card_kit",
                            selected_class,
                            shadow_class,
                            highlight_position_class,
-                           highlight_color_class)
+                           highlight_color_class,
+                           dark_class)
       end
 
     private
@@ -42,6 +45,10 @@ module Playbook
       def highlight_color_class
         highlight[:color].present? ? "highlight_#{highlight[:color]}" : nil
       end
+
+      def dark_class
+        dark ? "dark" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_card/docs/_card_content.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("card") do %>
-  Card content
+  Card Content
 <% end %>
 
 <br>

data/app/pb_kits/playbook/pb_card/docs/_card_dark.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("card", props: { dark: true }) do %>
+  Dark Card content
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_dark.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+const CardDark = () => {
+  return (
+    <div>
+      <Card dark>{'Card content'}</Card>
+    </div>
+  )
+}
+
+export default CardDark

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

@@ -1,6 +1,7 @@
 examples:
   rails:
   - card_light: Default
+  - card_dark: Dark Cards
   - card_highlight: Highlight Cards
   - card_selected: Selected
   - card_padding: Padding Size
@@ -9,6 +10,7 @@ examples:
   - card_separator: Separator Card
   react:
   - card_light: Default
+  - card_dark: Dark Cards
   - card_highlight: Highlight Cards
   - card_selected: Selected
   - card_padding: Padding Size

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

@@ -5,3 +5,4 @@ export { default as CardPadding } from './_card_padding.jsx'
 export { default as CardShadow } from './_card_shadow.jsx'
 export { default as CardContent } from './_card_content.jsx'
 export { default as CardSeparator } from './_card_separator.jsx'
+export { default as CardDark } from './_card_dark.jsx'

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

@@ -1,56 +1,196 @@
 /* @flow */
 
-import React from 'react'
-import { Button, Caption, Card, CircleIconButton, Flex, Icon, PbReactPopover, SectionSeparator, Title, TitleCount } from '../'
+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>,
-  sortMenu?: 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,
-  sortMenu,
-  filters,
+  results,
+  sortMenu = null,
+  template = 'default',
 }: FilterProps) => {
-  return (
-    <div
-        className={className}
-        data={data}
-        id={id}
-    >
-      <Card padding="none">
-        <Flex
-            orientation="row"
-            vertical="center"
-        >
-          <CircleIconButton
-              icon="filter"
-              id="filter"
-              variant="secondary"
+  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}:`}
           />
-          <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"
+        </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"
                 />
-              </div>
-              <div className="right_gradient" />
-            </div>
-          </div>
-        </Flex>
+              </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"
@@ -58,29 +198,25 @@ const Filter = ({
             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>
+          <Results />
+          <Sort />
         </Flex>
-      </Card>
-      <PbReactPopover>
-        {children}
-      </PbReactPopover>
+      </If>
+    </>
+  )
+  return (
+    <div
+        className={className}
+        data={data}
+        id={id}
+    >
+      <If condition={background}>
+        <Card padding="none">
+          <Core />
+        </Card>
+        <Else />
+        <Core />
+      </If>
     </div>
   )
 }