playbook_ui 3.3.0 → 3.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0624588df3f0146bc99a772eea3c4c8efc06b3a5299aea28ec1cdf3ad4320071'
-  data.tar.gz: 76e97087be0d0b643a645e48d0ba6c020f5dbfb3c153ca7ff8f5004c45372e7e
+  metadata.gz: d3de5d9a00cdc38a2ec90eb57ad2be970b276298515313d3a6261a5f47a3c0a2
+  data.tar.gz: 91ee6b3c0ed79222fff3e11fc50875422a7c489b55a7ae467843791343b5af6c
 SHA512:
-  metadata.gz: 343f4902e4562ca958b73ac21a3c2b8fb5549a9133d6d9ae134b0ad0194eb2f1be9df329563454af7be4dd792a35d956a30cb9a19d441bc6bbfb449ac2f2451a
-  data.tar.gz: bbd5040560708a09b452103e13ddbbaa9ca6d4e669f06d3fdb129978034bdb5c68ce605c6d9897c3ba07311ca4957ec0d55315bfb78ff0042d610be57ebe2548
+  metadata.gz: f4c3280e29552ec18e6ede2d5f9428e8f4b81f47966d8d00ba9f606a0c3e840d2396dd4cb227db8a3a9b640dff07e730a9ca62fa96d4eda5f9dec6286b523a12
+  data.tar.gz: d746f05ed24a4322458f4f7989efa9ecd6a1021bf050efa3bc98d18e617f5e4cebafabee0052bf7d5152a97a1d94e17253726f86c2315a5dfcba4080b4893336

data/app/pb_kits/playbook/_playbook.scss

@@ -27,6 +27,7 @@
 @import 'pb_label_pill/label_pill';
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
+@import 'pb_legend/legend';
 @import 'pb_line_graph/line_graph';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';

data/app/pb_kits/playbook/index.js

@@ -26,6 +26,7 @@ export Image from './pb_image/_image.jsx'
 export LabelPill from './pb_label_pill/_label_pill.jsx'
 export LabelValue from './pb_label_value/_label_value.jsx'
 export Layout from './pb_layout/_layout.jsx'
+export Legend from './pb_legend/_legend.jsx'
 export LineGraph from './pb_line_graph/_line_graph.jsx'
 export List from './pb_list/_list.jsx'
 export ListItem from './pb_list/_list_item.jsx'

data/app/pb_kits/playbook/kits/pb_legend.js

@@ -0,0 +1,4 @@
+import Legend from '../pb_legend/_legend.jsx'
+
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Legend })

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

@@ -39,6 +39,7 @@ import * as image from 'pb_image/docs'
 import * as LabelPill from 'pb_label_pill/docs'
 import * as LabelValue from 'pb_label_value/docs'
 import * as layout from 'pb_layout/docs'
+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'
@@ -99,6 +100,7 @@ WebpackerReact.setup(image)
 WebpackerReact.setup(LabelPill)
 WebpackerReact.setup(LabelValue)
 WebpackerReact.setup(layout)
+WebpackerReact.setup(Legend)
 WebpackerReact.setup(LineGraph)
 WebpackerReact.setup(list)
 WebpackerReact.setup(LoadingInline)

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

@@ -25,6 +25,7 @@ import '../kits/pb_image.js'
 import '../kits/pb_label_pill.js'
 import '../kits/pb_label_value.js'
 import '../kits/pb_layout.js'
+import '../kits/pb_legend.js'
 import '../kits/pb_line_graph.js'
 import '../kits/pb_loading_inline.js'
 import '../kits/pb_message.js'

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

@@ -1,5 +1,10 @@
 # frozen_string_literal: true
 
+# DEPRECATION NOTICE - DO NOT USE Shadow Shallow and Shadow Default!
+# Shadow Options: Shallow and Default targed to be removed in release v4.0.0.
+# [https://github.com/powerhome/playbook/issues/550]
+# END DEPRECATION NOTICE
+
 module Playbook
   module PbCard
     class Card

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

@@ -4,18 +4,6 @@
 
 <br>
 
-<%= pb_rails("card", props: {shadow: "shallow"}) do %>
-  Card content
-<% end %>
-
-<br>
-
-<%= pb_rails("card", props: {shadow: "default"}) do %>
-  Card content
-<% end %>
-
-<br>
-
 <%= pb_rails("card", props: {shadow: "deep"}) do %>
   Card content
 <% end %>

data/app/pb_kits/playbook/pb_legend/_legend.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:div, object.text,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= pb_rails("body", props: {color: object.body_color}) do %>
+    <span class="pb_legend_indicator_circle"></span>
+    <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>
+    <%= object.text %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -0,0 +1,47 @@
+/* @flow */
+
+import React from 'react'
+import { buildCss } from '../utilities/props'
+
+import {
+  Body,
+  Title,
+} from '../'
+
+type LegendProps = {
+  color?: 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7',
+  dark?: Boolean,
+  prefixText?: String,
+  text: String,
+}
+
+const Legend = ({
+  color = 'data_1',
+  dark = false,
+  prefixText,
+  text,
+}: LegendProps) => {
+  const darkClass = dark ? 'dark' : 'light'
+  const bodyCSS = buildCss('pb_legend_kit', color, darkClass)
+
+  return (
+    <div className={bodyCSS}>
+      <Body
+          color={dark ? 'lighter' : 'light'}
+      >
+        <span className="pb_legend_indicator_circle" />
+        <If condition={prefixText}>
+          <Title
+              dark={dark}
+              size={4}
+              tag="span"
+              text={` ${prefixText} `}
+          />
+        </If>
+        {` ${text} `}
+      </Body>
+    </div>
+  )
+}
+
+export default Legend

data/app/pb_kits/playbook/pb_legend/_legend.scss

@@ -0,0 +1,24 @@
+@import "../tokens/colors";
+@import "../pb_body/body";
+
+@mixin pb_button($color: $primary) {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background: $color;
+}
+
+@mixin indicator-colors($colors-list) {
+  @each $name, $color in $colors-list {
+    &[class*=#{$name}] {
+      .pb_legend_indicator_circle {
+        @include pb_button($color);
+      }
+    }
+  }
+}
+
+[class^=pb_legend_kit] {
+  @include indicator-colors($data_colors)
+}

data/app/pb_kits/playbook/pb_legend/docs/_legend_dark.html.erb

@@ -0,0 +1,5 @@
+<% labels = %W[Windows Doors Roofing Siding Solar Gutters Insulation Other] %>
+
+<% (1..7).each do |n| %>
+   <%= pb_rails("legend", props: { color: "data_#{n}", dark: true, text: "#{labels[n]}" }) %> 
+<% end %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_dark.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Legend } from '../../'
+
+const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar Gutters', 'Insulation', 'Other']
+
+const LegendDark = () => (
+  <div>
+    {
+      products.map((product, i) => (
+        <Legend
+            color={`data_${i + 1}`}
+            dark
+            key={`legend_${i + 1}`}
+            text={product}
+        />
+      ))
+    }
+  </div>
+)
+
+export default LegendDark

data/app/pb_kits/playbook/pb_legend/docs/_legend_dark_prefix.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("legend", props: { dark: true, color: "data_3", prefix_text: "10", text: "Windows" }) %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_dark_prefix.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Legend } from '../..'
+
+const LegendDarkPrefix = () => (
+  <div>
+    <Legend
+        color="data_3"
+        dark
+        prefixText="10"
+        text="Windows"
+    />
+  </div>
+)
+
+export default LegendDarkPrefix

data/app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb

@@ -0,0 +1,5 @@
+<% labels = %W[Windows Doors Roofing Siding Solar Gutters Insulation Other] %>
+
+<% (1..7).each do |n, i| %>
+   <%= pb_rails("legend", props: { color: "data_#{n}", text: "#{labels[n]}" }) %> 
+<% end %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Legend } from '../../'
+
+const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar Gutters', 'Insulation', 'Other']
+
+const LegendDefault = () => (
+  <div>
+    {
+      products.map((product, i) => (
+        <Legend
+            color={`data_${i + 1}`}
+            key={`legend_${i + 1}`}
+            text={product}
+        />
+      ))
+    }
+  </div>
+)
+
+export default LegendDefault

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("legend", props: { color: "data_3", prefix_text: "10", text: "Windows" }) %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Legend } from '../..'
+
+const LegendPrefix = () => (
+  <div>
+    <Legend
+        color="data_3"
+        prefixText="10"
+        text="Windows"
+    />
+  </div>
+)
+
+export default LegendPrefix

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

@@ -0,0 +1,15 @@
+examples:
+  
+  rails:
+  - legend_default: Default
+  - legend_prefix: With Prefix Text
+  - legend_dark: Dark Mode
+  - legend_dark_prefix: Dark Mode with Prefix Text
+  
+  
+  react:
+  - legend_default: Default
+  - legend_prefix: With Prefix Text
+  - legend_dark: Dark Mode
+  - legend_dark_prefix: Dark Mode with Prefix Text
+  

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

@@ -0,0 +1,4 @@
+export { default as LegendDefault } from './_legend_default.jsx'
+export { default as LegendPrefix } from './_legend_prefix.jsx'
+export { default as LegendDark } from './_legend_dark.jsx'
+export { default as LegendDarkPrefix } from './_legend_dark_prefix.jsx'

data/app/pb_kits/playbook/pb_legend/legend.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbLegend
+    class Legend
+      include Playbook::Props
+
+      partial "pb_legend/legend"
+
+      prop :color, type: Playbook::Props::Enum,
+                   values: (1..7).map { |n| "data_#{n}" },
+                   default: "data_1"
+
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+
+      prop :prefix_text
+
+      prop :text, required: true
+
+      def body_color
+        dark ? "lighter" : "light"
+      end
+
+      def classname
+        generate_classname("pb_legend_kit", color, dark ? "dark" : "light")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -42,8 +42,8 @@ const Radio = (props: RadioProps) => {
         {children}
         <Else />
         <input
+            checked={checked}
             data={data}
-            defaultChecked={checked}
             name={name}
             onChange={onChange}
             text={text}

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom.html.erb

@@ -1,27 +1,21 @@
 <%= pb_rails("radio", props: {
-  text: "Power",
-  name: "group 1",
-  value: "Power"
+  text: "Power"
 }) do %>
-  <input type="radio" text="power" name="group 1" value="power">
+  <input type="radio" name="group 3" value="power" >
 <% end %>
 
 <br>
 
 <%= pb_rails("radio", props: {
-  text: "Nitro",
-  name: "group 1",
-  value: "Power"
+  text: "Nitro"
 }) do %>
-  <input type="radio" text="nitro" name="group 1" value="nitro">
+  <input type="radio"  name="group 3" value="nitro" checked>
 <% end %>
 
 <br>
 
 <%= pb_rails("radio", props: {
-  text: "Google",
-  name: "group 1",
-  value: "Google"
+  text: "Google"
 }) do %>
-  <input type="radio" text="google" name="group 1" value="google">
+  <input type="radio"name="group 3" value="google">
 <% end %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx

@@ -9,7 +9,6 @@ const RadioCustom = () => {
           label="Custom Power"
       >
         <input
-            defaultChecked
             name="custom"
             type="radio"
             value="power"
@@ -21,6 +20,7 @@ const RadioCustom = () => {
           label="Custom Nitro"
       >
         <input
+            checked
             name="custom"
             type="radio"
             value="nitro"

data/app/pb_kits/playbook/pb_radio/docs/_radio_dark.jsx

@@ -12,6 +12,7 @@ const RadioDark = () => {
       />
       <br />
       <Radio
+          checked
           dark
           label="Nitro"
           name="Group1"

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx

@@ -11,6 +11,7 @@ const RadioDefault = () => {
       />
       <br />
       <Radio
+          checked
           label="Nitro"
           name="Group2"
           value="Nitro"

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -16,6 +16,11 @@
     &:disabled ~ .pb_select_kit_caret {
       opacity: 0.5;
     }
+    color: transparent !important;
+    text-shadow: 0 0 0 $text_lt_default !important;
+  }
+  option {
+    color: $text_lt_default;
   }
   .pb_select_kit_label {
     margin-bottom: $space_xs;
@@ -33,6 +38,7 @@
     color: $text_lt_default;
     font-size: ($font_large + 3);
     transform: translateY(-50%);
+    pointer-events: none;
   }
   &[class*=_dark] {
     select {

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

@@ -103,8 +103,17 @@ $border_colors: (
 );
 
 // Shadow colors ----------------------
-$shadow_light:        rgba($royal, $opacity_1);
-$shadow_dark:         rgba($slate, $opacity_1);
+$shadow_light:        rgba(#3C6AAC, $opacity_2);
+
+/*
+DEPRECATED - DO NOT USE! 
+This targed to be removed in release v4.0.0.
+[https://github.com/powerhome/playbook/issues/550]
+*/
+$shadow_dark:         rgba(#3C6AAC, $opacity_2);
+
+/* END DEPRECATION */
+
 $shadow_colors: (
   shadow_light:       $shadow_light,
   shadow_dark:        $shadow_dark

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

@@ -2,11 +2,19 @@
 @import "opacity";
 
 $shadow_none: 0 0 0 0 transparent;
+
+/*
+DEPRECATED - DO NOT USE! 
+This targed to be removed in release v4.0.0.
+[https://github.com/powerhome/playbook/issues/550]
+*/
 $shadow_shallow: 0 1px 1px 0 $shadow_light;
 $shadow_default: 0 1px 5px 0 $shadow_light;
-$shadow_deep: 0 2px 10px 0 $shadow_light;
-$shadow_deeper: 0 7px 18px 0 $shadow_light;
-$shadow_deepest: 0 31px 41px 0 rgba($shadow_light, $opacity_1), 0 2px 16px 0 rgba($shadow_light, 0.08);
+/* END DEPRECATED */
+
+$shadow_deep: 0 4px 10px 0 rgba($shadow_light, 0.16);
+$shadow_deeper: 0 12px 28px 0 rgba($shadow_light, 0.18);
+$shadow_deepest: 0 30px 38px 4px $shadow_light, 0 2px 14px 4px rgba($shadow_light, 0.1);
 $box_shadows: (
   shadow_none: $shadow_none,
   shadow_shallow: $shadow_shallow,

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

@@ -74,8 +74,7 @@ br
 // Shadow --------------------------
 = render :partial => "playbook/pages/utilities/pb_doc_color",
     locals:{ title: "Shadow",
-    colors: [{name: "Shadow Light", variable: "shadow_light"},
-        {name: "Shadow Dark", variable: "shadow_dark", dark: true}]}
+    colors: [{name: "Shadow Light", variable: "shadow_light"}]}
 
 // Products ------------------------
 = render :partial => "playbook/pages/utilities/pb_doc_color",

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 3.3.0
+  version: 3.4.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-01-02 00:00:00.000000000 Z
+date: 2020-01-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -426,6 +426,7 @@ files:
 - app/pb_kits/playbook/kits/pb_label_pill.js
 - app/pb_kits/playbook/kits/pb_label_value.js
 - app/pb_kits/playbook/kits/pb_layout.js
+- app/pb_kits/playbook/kits/pb_legend.js
 - app/pb_kits/playbook/kits/pb_line_graph.js
 - app/pb_kits/playbook/kits/pb_list.js
 - app/pb_kits/playbook/kits/pb_loading_inline.js
@@ -820,6 +821,20 @@ files:
 - app/pb_kits/playbook/pb_layout/docs/index.js
 - app/pb_kits/playbook/pb_layout/layout.rb
 - app/pb_kits/playbook/pb_layout/sidebar.rb
+- app/pb_kits/playbook/pb_legend/_legend.html.erb
+- app/pb_kits/playbook/pb_legend/_legend.jsx
+- app/pb_kits/playbook/pb_legend/_legend.scss
+- app/pb_kits/playbook/pb_legend/docs/_legend_dark.html.erb
+- app/pb_kits/playbook/pb_legend/docs/_legend_dark.jsx
+- app/pb_kits/playbook/pb_legend/docs/_legend_dark_prefix.html.erb
+- app/pb_kits/playbook/pb_legend/docs/_legend_dark_prefix.jsx
+- app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb
+- app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx
+- app/pb_kits/playbook/pb_legend/docs/_legend_prefix.html.erb
+- app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx
+- app/pb_kits/playbook/pb_legend/docs/example.yml
+- app/pb_kits/playbook/pb_legend/docs/index.js
+- app/pb_kits/playbook/pb_legend/legend.rb
 - app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb
 - app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
 - app/pb_kits/playbook/pb_line_graph/_line_graph.scss