playbook_ui 5.5.1.pre.alpha1 → 6.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa66f8cfafaeec93584b7752d2346a2254f856a2994681b09b50d11af8c3ec80
-  data.tar.gz: bd0dc3b635736355aa8a08e6d5dd27cca89a5cc550852d248eac2603684b58f2
+  metadata.gz: 9700bd77dc615c8c117f7244a03bc5ebed4afe8d0d548de5f3e1ec419128feb1
+  data.tar.gz: c062567218f3b82cc8f073b4ff33a125ca6c9e1d9c42e7dc5dd6561e4264eb04
 SHA512:
-  metadata.gz: 13b87a0f669639bb1921b01688146fcea0e13aa08f1b6c94b214a80d3448a9220081b8df7b9e6610f5820dc4a8e591728d789678caca7ac637f719a0a86b0766
-  data.tar.gz: 4f213af2da0881139ed2689d9cd384757e34fb8a7780963dd139fbcb1b9a5562ba2eeff4fdda10750a4d95eca7694936887fdcddff65a983b09171594df19ed5
+  metadata.gz: efea33e1f3ff87bad12881c940db6cfb32e36fb8892155449e993b816445df494f25f5af712b9710389301390ca42363ee76ecffe8602ac9ba23d0ab8bf72164
+  data.tar.gz: 386a4567b8677960ee19e95b18d7b968520336ac035a60865aba7ff88beb645390c63143fd7181a81b69a4a27519ae6c59cdfaec0159e8c97e2a6fa511658bd9

data/app/pb_kits/playbook/_playbook.scss

@@ -14,7 +14,6 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
-@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
@@ -34,7 +33,6 @@
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_value/icon_value';
 @import 'pb_image/image';
-@import 'pb_installer/installer';
 @import 'pb_label_pill/label_pill';
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
@@ -42,7 +40,6 @@
 @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';

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

@@ -24,7 +24,6 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
-    - date_picker
     - file_upload
     - form
     - form_pill
@@ -43,11 +42,9 @@ kits:
   - icon_circle
   - icon_value
   - image
-  - installer
   - layout
   - list
   - loading_inline
-  - logistic
   - multiple_users
   - multiple_users_stacked
   - nav

data/app/pb_kits/playbook/index.js

@@ -13,7 +13,6 @@ export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
-export DatePicker from 'pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -41,7 +40,6 @@ 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'
@@ -91,7 +89,6 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
-export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

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

@@ -27,7 +27,6 @@ import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
-import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -46,7 +45,6 @@ import * as Icon from 'pb_icon/docs'
 import * as IconCircle from 'pb_icon_circle/docs'
 import * as IconValue from 'pb_icon_value/docs'
 import * as Image from 'pb_image/docs'
-import * as Installer from 'pb_installer/docs'
 import * as LabelPill from 'pb_label_pill/docs'
 import * as LabelValue from 'pb_label_value/docs'
 import * as Layout from 'pb_layout/docs'
@@ -54,7 +52,6 @@ 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'
@@ -108,7 +105,6 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
-  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,
@@ -127,7 +123,6 @@ WebpackerReact.setup({
   ...IconCircle,
   ...IconValue,
   ...Image,
-  ...Installer,
   ...LabelPill,
   ...LabelValue,
   ...Layout,
@@ -135,7 +130,6 @@ WebpackerReact.setup({
   ...LineGraph,
   ...List,
   ...LoadingInline,
-  ...Logistic,
   ...Message,
   ...MultipleUsers,
   ...MultipleUsersStacked,

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb

@@ -1,12 +1,22 @@
-<%= content_tag(:div, "",
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
+<div id="wrapper-circle-chart-<%= object.id %>">
+  <%= content_tag(:div, "",
+      aria: object.aria,
+      id: object.id,
+      data: object.data,
+      class: object.classname) do %>
+    <% content_for :pb_js do %>
+      <%= javascript_tag do %>
+        window.addEventListener('DOMContentLoaded', function() {
+          new pbChart('.selector', <%= object.chart_options %>)
+      
+        });
+      <% end %>
+    <% end %>
   <% end %>
-<% end %>
+
+  <% if object.children %>
+    <div class="pb_circle_chart_block">
+      <%= capture(&object.children) %>
+    </div>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss

@@ -4,3 +4,13 @@
 .pb_circle_chart {
 
 }
+
+.pb_circle_chart_block {
+    position:absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+    text-align: center;
+    pointer-events: none;
+}

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -29,6 +29,10 @@ module Playbook
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
       prop :title, default: ''
+      prop :rounded, type: Playbook::Props::Boolean, default: false
+      prop :colors, type: Playbook::Props::Array,
+                    default: []
+
 
       def chart_type
         style == "variablepie" ? "variablepie" : "pie"
@@ -50,12 +54,22 @@ module Playbook
         when "md"
           "50%"
         end
+      end
+
+      def rounded_border_width
+        rounded ? 20 : nil
+      end
 
+      def rounded_border_color
+        rounded == true ? 'null' : nil
       end
 
       def chart_options
         {
           id: id,
+          colors: colors,
+          borderColor: rounded_border_color,
+          borderWidth: rounded_border_width,
           chartData: chart_data_formatted,
           title: title,
           type: chart_type,

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb

@@ -0,0 +1,26 @@
+<% data_51 = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+<br><br>
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data_51,
+    id: "with-a-block-2",
+    rounded: true,
+}) do %> 
+    <%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
+<% end %>
+
+
+

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb

@@ -0,0 +1,20 @@
+<% data_set = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data_set,
+    id: "default-test-colors",
+    colors: ['data-6', 'data-4', 'data-2']
+}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb

@@ -0,0 +1,22 @@
+<% data_rounded = [{
+    name: 'Waiting for Calls',
+    value: 20,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data_rounded,
+    id: "default-test-rounded",
+    inner_size: "lg",
+    rounded: true,
+
+}) %>

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

@@ -2,8 +2,12 @@ examples:
 
   rails:
   - circle_chart_default: Default Style
+  - circle_chart_rounded: Rounded Corners
+  - circle_chart_block: Accepts Any Block
+  - circle_chart_colors: Color Overrides
   - circle_chart_with_labels: Data Labels
   - circle_chart_with_legend_kit: Legend
   - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options
+  - circle_chart_inner_sizes: Inner Circle Size Options  
+
 

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

@@ -30,7 +30,6 @@
   <%= 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.date_picker :example_date_picker %>
 
     <%= 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 },}%>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -24,7 +24,6 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-  <%= form.date_picker :example_date_picker, props: { picker_id: 'date-picker', default_date: 'blank' } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -13,8 +13,7 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field,
-    :example_date_picker
+    :example_collection_select_field
 
 
     def self.model_name
@@ -50,7 +49,6 @@
   <%= form.input :example_text_area, as: :text %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
-  <%= form.date_picker :example_date_picker, props: { picker_id: 'date-picker', default_date: 'blank' } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/form_builder.rb

@@ -17,7 +17,6 @@ module Playbook
         prepend(TypeaheadField)
         prepend(SelectField)
         prepend(CollectionSelectField)
-        prepend(DatePickerField)
 
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

data/app/pb_kits/playbook/pb_image/_image.html.erb

@@ -3,4 +3,5 @@
     data: object.data.merge(src: object.url),
     class: object.classname,
     aria: object.aria,
-    alt: object.alt) %>
+    src: object.url,
+    alt: object.alt) %>

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -2,21 +2,44 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
 type ImageProps = {
-  url: string,
-  alt?: string,
+  alt?: String,
+  aria?: object,
+  className?: String,
+  data?: object,
+  id?: String,
+  url: String,
 }
 
 const Image = (props: ImageProps) => {
-  const { alt = '', url = '' } = props
+  const {
+    alt = '',
+    aria = {},
+    className,
+    data = {},
+    id,
+    url = '',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, spacing(props))
+  const dataProps = buildDataProps(data)
+
   return (
-    <img
-        alt={alt}
-        className={classnames('pb_image_kit lazyload blur_up', spacing(props))}
-        data-src={url}
-    />
+    <div>
+      <img
+          {...ariaProps}
+          {...dataProps}
+          alt={alt}
+          className={classes}
+          data-src={url}
+          id={id}
+          src={url}
+      />
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx

@@ -3,9 +3,9 @@ import { Image } from '../../'
 
 const DefaultImage = () => {
   return (
-    <div>
-      <Image url="https://unsplash.it/500/400/?image=634" />
-    </div>
+    <Image
+        url="https://unsplash.it/500/400/?image=634"
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb

@@ -3,6 +3,24 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= pb_rails("caption", props: { text: object.label }) %>
-  <%= pb_rails("body", props: { text: object.value }) %>
+    <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
+    <% if object.variant == "details" %>
+        <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>
+            <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
+                <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true, margin_right: "xs", }) if object.icon.present? %>
+            <% end %>
+            <%= pb_rails("body", props: { text: object.description, color: "light", margin_right: "xs", dark: object.dark }) if object.description.present? %>
+            <% if object.active %>
+                <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>
+                    <%= pb_rails("title", props: { text: object.title, tag: "h4", size: 4, variant: "link", dark: object.dark }) if object.title.present? %> 
+                    <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, margin_left: "xs", variant: "link", dark: object.dark }) if object.date.present? %>
+                <% end %>
+            <% else %>
+                <%= pb_rails("title", props: { text: object.title, tag: "h4", size: 4, dark: object.dark }) if object.title.present? %> 
+                <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, margin_left: "xs", dark: object.dark }) if object.date.present? %>
+            <% end %>
+        <% end %>
+    <% else %>
+        <%= pb_rails("body", props: { text: object.value, dark: object.dark }) if object.value.present? %>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx

@@ -2,8 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import DateTime from '../pb_kit/dateTime.js'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { Body, Caption } from '../'
+import { Body, Caption, Flex, Icon, Title } from '../'
 import { spacing } from '../utilities/spacing.js'
 
 type LabelValueProps = {
@@ -13,21 +14,42 @@ type LabelValueProps = {
   data?: object,
   id?: String,
   label: String,
-  value: String,
+  value?: String,
+  variant?: "default" | "details",
+  icon?: String,
+  description?: String,
+  title?: String,
+  date?: Date,
+  active?: Boolean
+}
+
+const dateString = (value: DateTime) => {
+  const month = value.toMonthNum()
+  const day = value.toDay()
+
+  return ` · ${month}/${day}`
 }
 
 const LabelValue = (props: LabelValueProps) => {
   const {
+    active = false,
     aria = {},
     className,
     dark = false,
     data = {},
+    date,
+    description,
+    icon,
     id,
     label,
-    value } = props
+    title,
+    value,
+    variant = 'default',
+  } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const formattedDate = new DateTime({ value: date })
   const themeStyle = dark === true ? '_dark' : ''
   const css = classnames(
     ['pb_label_value_kit' + themeStyle, className],
@@ -39,10 +61,92 @@ const LabelValue = (props: LabelValueProps) => {
         {...ariaProps}
         {...dataProps}
         className={css}
+        dark={dark}
+        description={description}
+        icon={icon}
         id={id}
+        title={title}
     >
-      <Caption text={label} />
-      <Body text={value} />
+      <Caption
+          dark={dark}
+          text={label}
+      />
+      <If condition={variant === 'details'}>
+        <Flex
+            inline
+            vertical="center"
+        >
+          <If condition={icon}>
+            <Body
+                color="light"
+                dark={dark}
+                marginRight="xs"
+            >
+              <Icon
+                  dark={dark}
+                  fixedWidth
+                  icon={icon}
+              />
+            </Body>
+          </If>
+          <If condition={description}>
+            <Body
+                color="light"
+                dark={dark}
+                marginRight="xs"
+                text={description}
+            />
+          </If>
+          <Choose>
+            <When condition={active === true}>
+              <Flex
+                  inline
+                  vertical="center"
+              >
+                <If condition={title}>
+                  <Title
+                      dark={dark}
+                      size={4}
+                      text={title}
+                      variant="link"
+                  />
+                </If>
+                <If condition={date}>
+                  <Title
+                      dark={dark}
+                      marginLeft="xs"
+                      size={4}
+                      text={' ' + dateString(formattedDate)}
+                      variant="link"
+                  />
+                </If>
+              </Flex>
+            </When>
+            <Otherwise>
+              <If condition={title}>
+                <Title
+                    dark={dark}
+                    size={4}
+                    text={title}
+                />
+              </If>
+              <If condition={date}>
+                <Title
+                    dark={dark}
+                    marginLeft="xs"
+                    size={4}
+                    text={' ' + dateString(formattedDate)}
+                />
+              </If>
+            </Otherwise>
+          </Choose>
+        </Flex>
+        <Else />
+        <Body
+            dark={dark}
+            text={value}
+        />
+      </If>
     </div>
   )
 }