playbook_ui 4.12.0 → 4.13.0

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md

@@ -0,0 +1 @@
+Side highlight can pass status and product colors.

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

@@ -3,6 +3,7 @@ examples:
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
+    - table_side_highlight: Side Highlight
     - table_container: Table Container Off
     - table_disable_hover: Disable Hover
     - table_multiline: Multi-line
@@ -15,6 +16,7 @@ examples:
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
+    - table_side_highlight: Side Highlight
     - table_container: Table Container Off
     - table_disable_hover: Disable Hover
     - table_multiline: Multi-line

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

@@ -1,6 +1,7 @@
 export { default as TableSm } from './_table_sm.jsx'
 export { default as TableMd } from './_table_md.jsx'
 export { default as TableLg } from './_table_lg.jsx'
+export { default as TableSideHighlight } from './_table_side_highlight.jsx'
 export { default as TableContainer } from './_table_container.jsx'
 export { default as TableDataTable } from './_table_data_table.jsx'
 export { default as TableResponsiveTable } from './_table_responsive_table.jsx'

data/app/pb_kits/playbook/pb_table/table_row.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableRow
+      include Playbook::Props
+
+      partial "pb_table/table_row"
+
+      prop :side_highlight_color, type: Playbook::Props::String,
+                                  default: "none"
+
+      def classname
+        generate_classname("pb_table_row_kit", side_highlight_class)
+      end
+
+      def side_highlight_class
+        side_highlight_color.present? ? "side_highlight_#{side_highlight_color}" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+
+    <div class="pb_time_stacked">
+      <%= pb_rails(object.tag, props: { text: object.format_time_string, color: "light", classname: object.tag_classnames }) %>
+      <%= pb_rails(object.tag, props: { text: object.format_timezone, color: "light" }) %>
+    </div>
+
+<% end %>

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx

@@ -0,0 +1,58 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import DateTime from '../pb_kit/dateTime.js'
+import { buildCss } from '../utilities/props'
+import { Body, Caption } from '../'
+
+const Components = {
+  body: Body,
+  caption: Caption,
+}
+
+type TimeStackedProps = {
+  className?: String | Array<String>,
+  dark?: Boolean,
+  data?: String,
+  date: String,
+  id?: String,
+  align?: 'left' | 'center' | 'right',
+  tag?: 'body' | 'caption',
+}
+
+const TimeStacked = ({
+  className,
+  dark = false,
+  date,
+  tag = 'body',
+}: TimeStackedProps) => {
+  const classes = classnames(className, buildCss('pb_time_stacked_kit', {
+    'dark': dark,
+  }))
+
+  const tagClasses = classnames(buildCss('pb_time_stacked_kit', tag))
+
+  const dateTimestamp = new DateTime({ value: date })
+
+  const Tag = Components[tag]
+
+  return (
+    <div className={classes}>
+      <div className="pb_time_stacked_day_month">
+        <Tag
+            className={tagClasses}
+            color="light"
+            text={dateTimestamp.toTimeWithMeridian()}
+        />
+        <Tag
+            color="light"
+            text={dateTimestamp.toTimezone()}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default TimeStacked

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss

@@ -0,0 +1,20 @@
+@import "../pb_title/title";
+@import "../pb_caption/caption";
+@import "../tokens/colors";
+
+
+[class^=pb_time_stacked_kit]{
+  &[class*=_dark] {
+    & > * [class^=pb_title_kit] {
+      color: $text_dk_default;
+    }
+    & > * [class^=pb_caption_kit] {
+      color: $text_dk_light;
+    }
+  }
+}
+
+[class*=pb_time_stacked_kit_caption] {
+  padding-bottom: 2px;
+  text-transform: lowercase;
+}

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("time_stacked", props: { date: DateTime.now, tag: "caption" }) %>
+

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import TimeStacked from '../_time_stacked.jsx'
+
+const TimeStackedCaption = () => {
+  return (
+    <div>
+      <TimeStacked
+          date={new Date()}
+          tag="caption"
+      />
+    </div>
+  )
+}
+
+export default TimeStackedCaption

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_dark.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("time_stacked", props: { date: DateTime.now, dark: true }) %>

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_dark.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import TimeStacked from '../_time_stacked.jsx'
+
+const TimeStackedDark = () => {
+  return (
+    <div>
+      <TimeStacked
+          dark
+          date={new Date()}
+      />
+    </div>
+  )
+}
+
+export default TimeStackedDark

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("time_stacked", props: { date: DateTime.now }) %>
+

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import TimeStacked from '../_time_stacked.jsx'
+
+const TimeStackedDefault = () => {
+  return (
+    <div>
+      <TimeStacked
+          date={new Date()}
+      />
+    </div>
+  )
+}
+
+export default TimeStackedDefault

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

@@ -0,0 +1,13 @@
+examples:
+
+  rails:
+  - time_stacked_default: Default
+  - time_stacked_caption: With Caption
+  - time_stacked_dark: Dark
+
+
+  react:
+  - time_stacked_default: Default
+  - time_stacked_caption: With Caption
+  - time_stacked_dark: Dark
+

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

@@ -0,0 +1,3 @@
+export { default as TimeStackedDefault } from './_time_stacked_default.jsx'
+export { default as TimeStackedDark } from './_time_stacked_dark.jsx'
+export { default as TimeStackedCaption } from './_time_stacked_caption.jsx'

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimeStacked
+    class TimeStacked
+      include ActionView::Helpers::TagHelper
+      include ActionView::Context
+      include Playbook::Props
+      include Playbook::Props
+
+      partial "pb_time_stacked/time_stacked"
+
+      prop :date, type: Playbook::Props::Date, required: true
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :classnames, type: Playbook::Props::String,
+                        default: nil
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[body caption],
+                 default: "body"
+
+      def classname
+        generate_classname("pb_time_stacked_kit", dark_class, classnames)
+      end
+
+      def day
+        day = Playbook::PbKit::PbDateTime.new(date)
+        content_tag(:time, datetime: day.to_iso) do
+          day.to_day.to_s
+        end
+      end
+
+      def month
+        month = Playbook::PbKit::PbDateTime.new(date)
+        content_tag(:time, datetime: month.to_iso) do
+          month.to_month.to_s
+        end
+      end
+
+      def format_time_string
+        "#{pb_date_time.to_full_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian}"
+      end
+
+      def format_timezone
+        pb_date_time.to_timezone
+      end
+
+      def tag_classnames
+        "pb_time_stacked_kit_#{tag}"
+      end
+
+    private
+
+      def dark_class
+        dark ? "dark" : nil
+      end
+
+      def pb_date_time
+        Playbook::PbKit::PbDateTime.new(date)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -191,6 +191,52 @@ $product_colors: (
   insulation:         $insulation
 );
 
+// Category colors ---------------------
+$category_1:   $royal;
+$category_2:   #0CD2E5;
+$category_3:   $yellow;
+$category_4:   #14D595;
+$category_5:   #A057FF;
+$category_6:   #FF7034;
+$category_7:   #97DA22;
+$category_8:   #EA599F;
+$category_9:   #0091FF;
+$category_10:  #5027E4;
+$category_11:  $red;
+$category_12:  #109922;
+$category_13:  #058F9D;
+$category_14:  #A33E6F;
+$category_15:  #B2171C;
+$category_16:  #0A5C49;
+$category_17:  #325B91;
+$category_18:  #BE4714;
+$category_19:  #000080;
+$category_20:  #5C0E0A;
+$category_21:  #040830;
+$category_colors: (
+  category_1:   $category_1,
+  category_2:   $category_2,
+  category_3:   $category_3,
+  category_4:   $category_4,
+  category_5:   $category_5,
+  category_6:   $category_6,
+  category_7:   $category_7,
+  category_8:   $category_8,
+  category_9:   $category_9,
+  category_10:  $category_10,
+  category_11:  $category_11,
+  category_12:  $category_12,
+  category_13:  $category_13,
+  category_14:  $category_14,
+  category_15:  $category_15,
+  category_16:  $category_16,
+  category_17:  $category_17,
+  category_18:  $category_18,
+  category_19:  $category_19,
+  category_20:  $category_20,
+  category_21:  $category_21
+);
+
 $transparent: transparent;
 
 @mixin gradient($start: $gradient_start, $end: $gradient_end) {
@@ -222,6 +268,7 @@ $transparent: transparent;
   @include export-colors($hover_colors);
   @include export-colors($border_colors);
   @include export-colors($text_colors);
+  @include export-colors($category_colors);
   gradient_start: $gradient_start;
   gradient_end: $gradient_end;
 }

data/app/pb_kits/playbook/tokens/_spacing.scss

@@ -1,14 +1,14 @@
-$space_xs: 8px;
-$space_sm: 16px;
-$space_md: 24px;
-$space_lg: 32px;
-$space_xl: 40px;
+$space_xs:    8px;
+$space_sm:    16px;
+$space_md:    24px;
+$space_lg:    32px;
+$space_xl:    40px;
 $spaces:(
-  space_xs: $space_xs,
-  space_sm: $space_sm,
-  space_md: $space_md,
-  space_lg: $space_lg,
-  space_xl: $space_xl,
+  space_xs:   $space_xs,
+  space_sm:   $space_sm,
+  space_md:   $space_md,
+  space_lg:   $space_lg,
+  space_xl:   $space_xl,
 );
 
 

data/app/views/playbook/pages/utilities.html.slim

@@ -87,3 +87,30 @@ br
         {name: "Roofing", variable: "roofing"},
         {name: "Gutters", variable: "gutters"},
         {name: "Attic Insulation", variable: "insulation"}]}
+
+// Category ------------------------
+= render :partial => "playbook/pages/utilities/pb_doc_color",
+    locals:{ title: "Category Colors",
+    usage: "Used for categorization",
+    colors: [{name: "Category 1", variable: "category_1"},
+        {name: "Category 2", variable: "category_2"},
+        {name: "Category 3", variable: "category_3"},
+        {name: "Category 4", variable: "category_4"},
+        {name: "Category 5", variable: "category_5"},
+        {name: "Category 6", variable: "category_6"},
+        {name: "Category 7", variable: "category_7"},
+        {name: "Category 8", variable: "category_8"},
+        {name: "Category 9", variable: "category_9"},
+        {name: "Category 10", variable: "category_10"},
+        {name: "Category 11", variable: "category_11"},
+        {name: "Category 12", variable: "category_12"},
+        {name: "Category 13", variable: "category_13"},
+        {name: "Category 14", variable: "category_14"},
+        {name: "Category 15", variable: "category_15"},
+        {name: "Category 16", variable: "category_16"},
+        {name: "Category 17", variable: "category_17"},
+        {name: "Category 18", variable: "category_18"},
+        {name: "Category 19", variable: "category_19"},
+        {name: "Category 20", variable: "category_20"},
+        {name: "Category 21", variable: "category_21"}]}
+        

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "4.12.0"
+  VERSION = "4.13.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 4.12.0
+  version: 4.13.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-04-17 00:00:00.000000000 Z
+date: 2020-04-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -582,14 +582,19 @@ files:
 - app/pb_kits/playbook/pb_card/_card.scss
 - app/pb_kits/playbook/pb_card/card.rb
 - app/pb_kits/playbook/pb_card/card_body.rb
+- app/pb_kits/playbook/pb_card/card_header.rb
 - app/pb_kits/playbook/pb_card/child_kits/_card_body.html.erb
-- app/pb_kits/playbook/pb_card/child_kits/_card_body.scss
+- app/pb_kits/playbook/pb_card/child_kits/_card_header.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_content.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_content.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_dark.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_dark.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_header.html.erb
+- app/pb_kits/playbook/pb_card/docs/_card_header.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_header.md
 - app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_highlight.md
 - app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_light.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_padding.html.erb
@@ -722,6 +727,16 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/docs/_footer.md
 - app/pb_kits/playbook/pb_date_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_stacked/docs/index.js
+- app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.html.erb
+- app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx
+- app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
+- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb
+- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.html.erb
+- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx
+- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb
+- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
+- app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
+- app/pb_kits/playbook/pb_date_time_stacked/docs/index.js
 - app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.html.erb
 - app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx
 - app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.scss
@@ -1350,6 +1365,8 @@ files:
 - app/pb_kits/playbook/pb_table/_table.html.erb
 - app/pb_kits/playbook/pb_table/_table.jsx
 - app/pb_kits/playbook/pb_table/_table.scss
+- app/pb_kits/playbook/pb_table/_table_row.html.erb
+- app/pb_kits/playbook/pb_table/_table_row.jsx
 - app/pb_kits/playbook/pb_table/docs/_description.md
 - app/pb_kits/playbook/pb_table/docs/_table_container.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_container.jsx
@@ -1371,6 +1388,9 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_multiline.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md
 - app/pb_kits/playbook/pb_table/docs/_table_single_line.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_single_line.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sm.html.erb
@@ -1393,6 +1413,7 @@ files:
 - app/pb_kits/playbook/pb_table/styles/_table-dark.scss
 - app/pb_kits/playbook/pb_table/styles/_variables.scss
 - app/pb_kits/playbook/pb_table/table.rb
+- app/pb_kits/playbook/pb_table/table_row.rb
 - app/pb_kits/playbook/pb_text_input/_text_input.html.erb
 - app/pb_kits/playbook/pb_text_input/_text_input.jsx
 - app/pb_kits/playbook/pb_text_input/_text_input.scss
@@ -1455,6 +1476,18 @@ files:
 - app/pb_kits/playbook/pb_time_range_inline/docs/example.yml
 - app/pb_kits/playbook/pb_time_range_inline/docs/index.js
 - app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb
+- app/pb_kits/playbook/pb_time_stacked/_time_stacked.html.erb
+- app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
+- app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss
+- app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.html.erb
+- app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.jsx
+- app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_dark.html.erb
+- app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_dark.jsx
+- app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb
+- app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx
+- app/pb_kits/playbook/pb_time_stacked/docs/example.yml
+- app/pb_kits/playbook/pb_time_stacked/docs/index.js
+- app/pb_kits/playbook/pb_time_stacked/time_stacked.rb
 - app/pb_kits/playbook/pb_timestamp/_timestamp-mixins.scss
 - app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb
 - app/pb_kits/playbook/pb_timestamp/_timestamp.jsx
@@ -1680,8 +1713,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.3
+rubygems_version: 3.1.2
 signing_key: 
 specification_version: 4
 summary: Playbook Design System