playbook_ui 4.15.0 → 4.15.1.alpha1

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 4.15.0
+  version: 4.15.1.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-05-22 00:00:00.000000000 Z
+date: 2020-05-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -451,7 +451,6 @@ files:
 - app/pb_kits/playbook/packs/kits/pb_popover.js
 - app/pb_kits/playbook/packs/kits/pb_progress_pills.js
 - app/pb_kits/playbook/packs/kits/pb_progress_simple.js
-- app/pb_kits/playbook/packs/kits/pb_progress_step.js
 - app/pb_kits/playbook/packs/kits/pb_radio.js
 - app/pb_kits/playbook/packs/kits/pb_section_separator.js
 - app/pb_kits/playbook/packs/kits/pb_select.js
@@ -626,15 +625,6 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
-- app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb
-- app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
-- app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/example.yml
 - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
@@ -779,14 +769,6 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
 - app/pb_kits/playbook/pb_file_upload/docs/index.js
 - app/pb_kits/playbook/pb_file_upload/file_upload.rb
-- app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx
-- app/pb_kits/playbook/pb_filter/Filter/ResultsCount.jsx
-- app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx
-- app/pb_kits/playbook/pb_filter/Filter/index.jsx
 - app/pb_kits/playbook/pb_filter/_filter.html.erb
 - app/pb_kits/playbook/pb_filter/_filter.jsx
 - app/pb_kits/playbook/pb_filter/_filter.scss
@@ -1007,21 +989,20 @@ files:
 - app/pb_kits/playbook/pb_label_value/docs/index.js
 - app/pb_kits/playbook/pb_label_value/label_value.rb
 - app/pb_kits/playbook/pb_layout/_body.html.erb
+- app/pb_kits/playbook/pb_layout/_body.jsx
 - app/pb_kits/playbook/pb_layout/_layout.html.erb
 - app/pb_kits/playbook/pb_layout/_layout.jsx
 - app/pb_kits/playbook/pb_layout/_layout.scss
 - app/pb_kits/playbook/pb_layout/_layout_mixin.scss
 - app/pb_kits/playbook/pb_layout/_sidebar.html.erb
+- app/pb_kits/playbook/pb_layout/_sidebar.jsx
 - app/pb_kits/playbook/pb_layout/body.rb
 - app/pb_kits/playbook/pb_layout/docs/_description.md
 - app/pb_kits/playbook/pb_layout/docs/_layout_colors.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_colors.jsx
+- app/pb_kits/playbook/pb_layout/docs/_layout_default.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_sizes.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_sizes.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_transparent.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_transparent.jsx
 - app/pb_kits/playbook/pb_layout/docs/example.yml
 - app/pb_kits/playbook/pb_layout/docs/index.js
 - app/pb_kits/playbook/pb_layout/layout.rb
@@ -1164,7 +1145,6 @@ files:
 - app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss
 - app/pb_kits/playbook/pb_online_status/docs/_description.md
 - app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb
-- app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx
 - app/pb_kits/playbook/pb_online_status/docs/example.yml
 - app/pb_kits/playbook/pb_online_status/docs/index.js
 - app/pb_kits/playbook/pb_online_status/online_status.rb
@@ -1217,6 +1197,8 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx
+- app/pb_kits/playbook/pb_popover/docs/_popover_portal.jsx
+- app/pb_kits/playbook/pb_popover/docs/_popover_with_button.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_with_button.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_with_circle.html.erb
 - app/pb_kits/playbook/pb_popover/docs/example.yml
@@ -1254,22 +1236,6 @@ files:
 - app/pb_kits/playbook/pb_progress_simple/docs/example.yml
 - app/pb_kits/playbook/pb_progress_simple/docs/index.js
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.rb
-- app/pb_kits/playbook/pb_progress_step/_progress_step.html.erb
-- app/pb_kits/playbook/pb_progress_step/_progress_step.jsx
-- app/pb_kits/playbook/pb_progress_step/_progress_step.scss
-- app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb
-- app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx
-- app/pb_kits/playbook/pb_progress_step/docs/_description.md
-- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.html.erb
-- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.jsx
-- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
-- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx
-- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb
-- app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx
-- app/pb_kits/playbook/pb_progress_step/docs/example.yml
-- app/pb_kits/playbook/pb_progress_step/docs/index.js
-- app/pb_kits/playbook/pb_progress_step/progress_step.rb
-- app/pb_kits/playbook/pb_progress_step/progress_step_item.rb
 - app/pb_kits/playbook/pb_radio/_radio.html.erb
 - app/pb_kits/playbook/pb_radio/_radio.jsx
 - app/pb_kits/playbook/pb_radio/_radio.scss
@@ -1530,7 +1496,6 @@ files:
 - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
 - app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/example.yml
 - app/pb_kits/playbook/pb_timestamp/docs/index.js
 - app/pb_kits/playbook/pb_timestamp/timestamp.rb
@@ -1564,7 +1529,6 @@ files:
 - app/pb_kits/playbook/pb_title_detail/docs/_description.md
 - app/pb_kits/playbook/pb_title_detail/docs/_footer.md
 - app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.html.erb
-- app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx
 - app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.md
 - app/pb_kits/playbook/pb_title_detail/docs/example.yml
 - app/pb_kits/playbook/pb_title_detail/docs/index.js
@@ -1585,13 +1549,6 @@ files:
 - app/pb_kits/playbook/pb_toggle/docs/example.yml
 - app/pb_kits/playbook/pb_toggle/docs/index.js
 - app/pb_kits/playbook/pb_toggle/toggle.rb
-- app/pb_kits/playbook/pb_tooltip/_tooltip.html.erb
-- app/pb_kits/playbook/pb_tooltip/_tooltip.scss
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb
-- app/pb_kits/playbook/pb_tooltip/docs/example.yml
-- app/pb_kits/playbook/pb_tooltip/index.js
-- app/pb_kits/playbook/pb_tooltip/tooltip.rb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
 - app/pb_kits/playbook/pb_typeahead/docs/_description.md
@@ -1752,9 +1709,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.7.3

data/app/pb_kits/playbook/packs/kits/pb_progress_step.js

@@ -1,2 +0,0 @@
-import '../../pb_progress_step/_progress_step.jsx'
-

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

@@ -1,12 +0,0 @@
-<%= 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 %>)
-    })
-  <% end %>
-<% end %>

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

@@ -1,6 +0,0 @@
-@import "../pb_caption/caption";
-
-
-.pb_circle_chart {
-
-}

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

@@ -1,81 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbCircleChart
-    class CircleChart
-      include Playbook::Props
-
-      partial "pb_circle_chart/circle_chart"
-
-      prop :chart_data, type: Playbook::Props::Array,
-                        default: []
-      prop :style, type: Playbook::Props::Enum,
-                         values: %w[pie],
-                         default: "pie"
-
-      prop :data_labels, type: Playbook::Props::Boolean, default: false
-      prop :min_point_size, type: Playbook::Props::Numeric
-      prop :max_point_size, type: Playbook::Props::Numeric
-      prop :inner_size, type: Playbook::Props::Enum,
-                              values: %w[sm md lg none],
-                              default: "md"
-      prop :z_min, type: Playbook::Props::Numeric
-      prop :start_angle, type: Playbook::Props::Numeric
-      prop :header_format
-      prop :data_label_html, default: '<div>{point.name}</div>'
-      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span> 
-                                      {point.name}: ' + '<b>{point.y}
-                                    </b>'
-      prop :use_html, type: Playbook::Props::Boolean, default: false
-      prop :legend, type: Playbook::Props::Boolean, default: false
-      prop :title, default: ''
-
-      def chart_type
-        style == "variablepie" ? "variablepie" : "pie"
-      end
-
-      def chart_data_formatted
-        chart_data.map{ |hash| hash[:y] = hash.delete :value}
-        return chart_data
-      end
-
-      def inner_size_format
-        case inner_size
-        when "lg"
-          "85%"
-        when "sm"
-          "35%"
-        when "none"
-          "0%"
-        when "md"
-          "50%"
-        end
-
-      end
-
-      def chart_options
-        {
-          id: id,
-          chartData: chart_data_formatted,
-          title: title,
-          type: chart_type,
-          showInLegend: legend,
-          dataLabelHtml: data_label_html,
-          dataLabels: data_labels,
-          headerFormat: header_format,
-          tooltipHtml: tooltip_html,
-          useHTML: use_html,
-          minPointSize: min_point_size,
-          maxPointSize: max_point_size,
-          innerSize: inner_size_format,
-          zMin: z_min,
-          startAngle: start_angle,
-        }.to_json.html_safe
-      end
-
-      def classname
-        generate_classname("pb_circle_chart")
-      end
-    end
-  end
-end

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

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

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

@@ -1,136 +0,0 @@
-<% data_1 = [{
-      name: 'Bugs',
-      value: 8,
-
-    },
-    {
-      name: 'Chores',
-      value: 1,
-
-    },
-    {
-      name: 'Stories',
-      value: 12,
-
-    }
-  ] %>
-
-  <% data_2 = [{
-      name: 'Queued',
-      value: 7,
-
-    },
-    {
-      name: 'In Progress',
-      value: 6,
-
-    },
-    {
-      name: 'Validation',
-      value: 3,
-    },
-    {
-      name: 'Done',
-      value: 6,
-    },
-    
-  ] %>
-
-<% data_3 = [{
-      name: '1 Point Tickets',
-      value: 2,
-    },
-    {
-      name: '3 Point Tickets',
-      value: 5,
-    },
-    {
-      name: '5 Point Tickets',
-      value: 6,
-
-    },
-    {
-      name: '8 Point Tickets',
-      value: 3,
-    },
-    {
-      name: '13 Point Tickets',
-      value: 1,
-    },
-    
-  ] %>
-  <% data_4 = [{
-      name: 'Facebook',
-      value: 2498,
-    },
-    {
-      name: 'YouTube',
-      value: 2000,
-    },
-    {
-      name: 'WhatsApp',
-      value: 2000,
-
-    },
-    {
-      name: 'Facebook Messenger',
-      value: 1300,
-    },
-    {
-      name: 'WeChat',
-      value: 1165,
-    },
-    {
-      name: 'Instagram',
-      value: 1000,
-    },
-    {
-      name: 'Tik Tok',
-      value: 800,
-    },
-  ] %>
-
-
-    <%= pb_rails("circle_chart", props: {
-        chart_data: data_1,
-        id: "size-test-1",
-        min_point_size: 2,
-        max_point_size: 200,
-        inner_size: "sm",
-        z_min: 0,
-        start_angle: 0,
-        header_format: '',
-    }) %>
-
-    <%= pb_rails("circle_chart", props: {
-        chart_data: data_2,
-        id: "size-test-2",
-        min_point_size: 2,
-        max_point_size: 200,
-        inner_size: "md",
-        z_min: 0,
-        start_angle: 0,
-        header_format: '',
-    }) %>
-
-    <%= pb_rails("circle_chart", props: {
-        chart_data: data_3,
-        id: "size-test-3",
-        min_point_size: 2,
-        max_point_size: 200,
-        inner_size: "lg",
-        z_min: 0,
-        start_angle: 0,
-        header_format: '',
-    }) %>
-
-    <%= pb_rails("circle_chart", props: {
-        chart_data: data_4,
-        id: "size-test-4",
-        min_point_size: 2,
-        max_point_size: 200,
-        inner_size: "none",
-        z_min: 0,
-        start_angle: 0,
-        header_format: '',
-    }) %>

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

@@ -1,37 +0,0 @@
- <% data = [{
-      name: 'Facebook',
-      value: 2498,
-    },
-    {
-      name: 'YouTube',
-      value: 2000,
-    },
-    {
-      name: 'WhatsApp',
-      value: 2000,
-
-    },
-    {
-      name: 'Facebook Messenger',
-      value: 1300,
-    },
-    {
-      name: 'WeChat',
-      value: 1165,
-    },
-    {
-      name: 'Instagram',
-      value: 1000,
-    },
-    {
-      name: 'Tik Tok',
-      value: 800,
-    },
-  ] %>
-
-<%= pb_rails("circle_chart", props: {
-    style: "pie",
-    chart_data: data,
-    id: "with-labels-example",
-    data_labels: true
-}) %>

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

@@ -1,22 +0,0 @@
-<% data_1 = [{
-      name: 'Bugs',
-      value: 8,
-
-    },
-    {
-      name: 'Chores',
-      value: 1,
-
-    },
-    {
-      name: 'Stories',
-      value: 12,
-    }
-  ] %>
-
-<%= pb_rails("circle_chart", props: {
-    style: "pie",
-    chart_data: data_1,
-    legend: true,
-    id: "with-legend-example",
-}) %>

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

@@ -1,38 +0,0 @@
- <% data_5 = [{
-      name: 'Facebook',
-      value: 2498,
-    },
-    {
-      name: 'YouTube',
-      value: 2000,
-    },
-    {
-      name: 'WhatsApp',
-      value: 2000,
-
-    },
-    {
-      name: 'Facebook Messenger',
-      value: 1300,
-    },
-    {
-      name: 'WeChat',
-      value: 1165,
-    },
-    {
-      name: 'Instagram',
-      value: 1000,
-    },
-    {
-      name: 'Tik Tok',
-      value: 800,
-    },
-  ] %>
-
-
-<%= pb_rails("circle_chart", props: {
-    style: "pie",
-    title: "Active Users on Social Media",
-    chart_data: data_5,
-    id: "with-caption-example",
-}) %>

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

@@ -1,9 +0,0 @@
-examples:
-
-  rails:
-  - circle_chart_default: Default Style
-  - 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
-

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx

@@ -1,56 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { isEmpty, map, omitBy } from 'lodash'
-import { Caption, Title } from '../../'
-
-export type FilterDescription = {
-  [key: string]: ?string | boolean,
-}
-
-export type CurrentFiltersProps = {
-  filters: FilterDescription,
-}
-
-const hiddenFilters = (value) => isEmpty(value) && value !== true
-
-const CurrentFilters = ({ filters }: CurrentFiltersProps) => {
-  const displayableFilters = omitBy(filters, hiddenFilters)
-
-  return (
-    <div className="maskContainer">
-      <If condition={!isEmpty(filters)}>
-        <div className="filters">
-          <div className="left_gradient" />
-          {map(displayableFilters, (value, name) => (
-            <div
-                className="filter"
-                key={`filter-${name}`}
-            >
-              <Choose>
-                <When condition={value === true}>
-                  <Title
-                      size={4}
-                      tag="h4"
-                      text={name}
-                  />
-                </When>
-                <Otherwise>
-                  <Caption text={name} />
-                  <Title
-                      size={4}
-                      tag="h4"
-                      text={value}
-                  />
-                </Otherwise>
-              </Choose>
-            </div>
-          ))}
-          <div className="right_gradient" />
-        </div>
-      </If>
-    </div>
-  )
-}
-
-export default CurrentFilters

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx

@@ -1,26 +0,0 @@
-/* @flow */
-
-import React, { Node } from 'react'
-import { Card } from '../../'
-
-type FilterBackgroundProps = {
-  background: boolean,
-  className: string,
-  children: Node,
-}
-const FilterBackground = ({ background = true, className, children }: FilterBackgroundProps) => (
-  <div className={`pb_filter_kit ${className}`}>
-    <Choose>
-      <When condition={background}>
-        <Card padding="none">
-          {children}
-        </Card>
-      </When>
-      <Otherwise>
-        {children}
-      </Otherwise>
-    </Choose>
-  </div>
-)
-
-export default FilterBackground

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx

@@ -1,58 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { Caption, Flex, SectionSeparator } from '../../'
-
-import CurrentFilters, { FilterDescription } from './CurrentFilters'
-import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
-import FiltersPopover from './FiltersPopover'
-import ResultsCount from './ResultsCount'
-import SortMenu, { SortingChangeCallback, SortOptions, SortValue } from './SortMenu'
-
-export type FilterDoubleProps = {
-  children: Node,
-  filters?: FilterDescription,
-  onSortChange: SortingChangeCallback,
-  results?: number,
-  sortOptions: SortOptions,
-  sortValue?: SortValue,
-} & FilterBackgroundProps
-
-const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results, children, ...bgProps }: FilterDoubleProps) => (
-  <FilterBackground {...bgProps}>
-    <Flex
-        orientation="row"
-        vertical="center"
-    >
-      <FiltersPopover>
-        {children}
-      </FiltersPopover>
-      <CurrentFilters filters={filters} />
-    </Flex>
-    <SectionSeparator />
-    <Flex
-        className="filter-bottom"
-        orientation="row"
-        spacing="between"
-        vertical="center"
-    >
-      <ResultsCount
-          results={results}
-          title
-      />
-      <Flex
-          orientation="row"
-          vertical="center"
-      >
-        <Caption text="sort by:" />
-        <SortMenu
-            onChange={onSortChange}
-            options={sortOptions}
-            value={sortValue}
-        />
-      </Flex>
-    </Flex>
-  </FilterBackground>
-)
-
-export default FilterDouble