playbook_ui 2.8.4 → 2.8.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8103129ad1d322c76959bc5b98dbc4a3095e6ab93f8b6ce108c3397d99d3e7da
-  data.tar.gz: 39bfc2b2780273550f8ad5038e51f561d695fafecf2785a49631932c9ed06bb0
+  metadata.gz: 229984eb14913e37a64ee5c9ba4cdbbe3cdc6013d07bbb6011c645c5659812aa
+  data.tar.gz: b783ad17356bfd25bbf6723eb18d9c9201a0ffcd2df880dc6a8fe5723c2c2667
 SHA512:
-  metadata.gz: c1af634076f6e690736128754f66c197790f27a4db4b58f7afe0e8f3bb0e22e43b1c3f822fdbfb607466c47e7652a40c00319499146e6f6f06191e7029a30098
-  data.tar.gz: aee625c328eb90beec7784d2de3169da58c3ff6c73492e728a0bb605b06ba04a7e9eec1882468f19a7452723d8ad216a89d94baf5f01a0a5d51327a0846a731f
+  metadata.gz: 073c2fad169caeb9cabdc209596226c450e4574fb13ca6f02adedc63e80e3e7b47b6fcca2b376e5f2acd9ba01f0147e7c8ec2e676f7874ad647fc096f85eb675
+  data.tar.gz: 87b55dd06352b79ccc3a3a97d1a8b733732230ffe122b84b95d6c236a0a2731741fff4d36ad08596ae943d2dac530d247f048ec2f9f43964d8fe283678a9320d

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

@@ -96,6 +96,9 @@ WebpackerReact.setup (Timestamp);
 import * as OnlineStatus from "pb_online_status/docs";
 WebpackerReact.setup (OnlineStatus);
 
+import * as Source from "pb_source/docs";
+WebpackerReact.setup (Source);
+
 import * as LabelPill from "pb_label_pill/docs";
 WebpackerReact.setup (LabelPill);
 

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

@@ -27,6 +27,7 @@ import "./pb_label_value.js";
 import "./pb_message.js";
 import "./pb_timestamp.js";
 import "./pb_online_status.js";
+import "./pb_source.js";
 import "./pb_label_pill.js";
 import "./pb_phone.js";
 import "./pb_owner_phone.js";

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

@@ -0,0 +1,4 @@
+import Source from "pb_source/_source.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Source });

data/app/pb_kits/playbook/packs/site_styles/_kit_style_index.scss

@@ -29,6 +29,7 @@
 @import '../../pb_message/message';
 @import '../../pb_timestamp/timestamp';
 @import '../../pb_online_status/online_status';
+@import '../../pb_source/source';
 @import '../../pb_label_pill/label_pill';
 @import '../../pb_phone/phone';
 @import '../../pb_owner_phone/owner_phone';

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -42,6 +42,7 @@ class Avatar extends React.Component {
     } = this.props;
 
     const css = classnames([
+      `pb_avatar_kit`,
       `avatar_${size}`,
       className,
     ])

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -1,6 +1,8 @@
 @import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/typography";
+@import "../pb_online_status/online_status";
+@import "../pb_image/image";
 
 $avatar-sizes: (
   "xs":   28px,
@@ -11,7 +13,7 @@ $avatar-sizes: (
   "xl":   100px,
 );
 
-[class^=pb_avatar] {
+[class^=pb_avatar_kit] {
   position: relative;
 
   @each $name, $size in $avatar-sizes {

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -56,7 +56,7 @@ module Playbook
 
       def kit_class
         avatar_options = [
-          "pb_avatar",
+          "pb_avatar_kit",
           size,
         ]
         avatar_options.join("_")

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,6 +1,6 @@
 @import "./body_mixins";
 
-[class^=pb_body]{
+[class^=pb_body_kit]{
   @include pb_body;
 
   @each $color_name, $color_value in $pb_body_colors {

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -1,5 +1,6 @@
 @import "../tokens/colors";
 @import "../tokens/line_height";
+@import "../tokens/typography";
 
 $pb_body_colors: (
   default:        $text_lt_default,
@@ -17,9 +18,9 @@ $pb_body_status: (
 );
 
 @mixin pb_body($color: $text_lt_default) {
-  margin: 0;
   line-height: $lh_tight;
   color: $color;
+  font-size: $text_default;
 }
 
 // Colors ======================

data/app/pb_kits/playbook/pb_body/body.rb

@@ -61,7 +61,7 @@ module Playbook
       end
 
       def tag
-        default_value(configured_tag, "p")
+        default_value(configured_tag, "div")
       end
 
       def text
@@ -74,7 +74,7 @@ module Playbook
 
       def kit_class
         body_options = [
-          "pb_body",
+          "pb_body_kit",
           color_class,
           dark_class,
           status_class,

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

@@ -1,6 +1,7 @@
 @import "./button_mixins";
+@import "../pb_icon/icon";
 
-[class^=pb_button]{
+[class^=pb_button_kit]{
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/button.rb

@@ -105,7 +105,7 @@ module Playbook
 
       def kit_class
         kit_options = [
-          "pb_button",
+          "pb_button_kit",
           variant,
           full_width_class,
           disabled_class,

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -1,6 +1,6 @@
 @import "caption_mixin";
 
-[class^=pb_caption] {
+[class^=pb_caption_kit] {
   @include caption;
 
   &[class*=_lg]  {

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -49,7 +49,7 @@ module Playbook
 
       def kit_class
         caption_options = [
-          "pb_caption",
+          "pb_caption_kit",
           large_class,
           dark_class,
         ]

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

@@ -3,5 +3,5 @@
     data: object.data,
     class: object.classname(object.kit_class),
     aria: object.aria) do %>
-  <div><%= object.yield(context: self) %></div>
+  <%= object.yield(context: self) %>
 <% end %>

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

@@ -1,33 +1,32 @@
 @import "../tokens/shadows";
+@import "../tokens/border_radius";
+@import "../tokens/shadows";
+@import "../tokens/colors";
+@import "child_kits/card_body";
+
+$pb_card_border_width: 1px;
+$pb_card_border_radius: $border_rad_heavier;
 
-.pb_card {
-  width: 300px;
-  height: 200px;
-  background: white;
-  border: 1px solid #dedede;
-  padding: 20px;
-  margin: 20px 0;
+[class^=pb_card_kit] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: $card_light;
+  background-clip: border-box;
+  border: $pb_card_border_width solid $border_light;
+  border-radius: $pb_card_border_radius;
+  transition: all 0.3s ease;
 
-  h1 {
-    font-weight: normal;
-    font-size: 28px;
+  &[class*=_selected] {
+    border-color: $primary;
+    border-width: $pb_card_border_width * 2;
   }
 
-  &.shadow {
-    &_shallow {
-      box-shadow: $shadow_shallow;
-    }
-    &_default {
-      box-shadow: $shadow_default;
-    }
-    &_deep {
-      box-shadow: $shadow_deep;
-    }
-    &_deeper {
-      box-shadow: $shadow_deeper;
-    }
-    &_deepest {
-      box-shadow: $shadow_deepest;
+  @each $name, $shadow in $box_shadows {
+    &[class*=_#{$name}] {
+      box-shadow: $shadow;
     }
   }
 }

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

@@ -7,6 +7,8 @@ module Playbook
                  configured_classname
                  configured_data
                  configured_id
+                 configured_padding
+                 configured_selected
                  configured_shadow
                  block].freeze
 
@@ -14,19 +16,27 @@ module Playbook
                      classname: default_configuration,
                      data: default_configuration,
                      id: default_configuration,
+                     padding: default_configuration,
+                     selected: default_configuration,
                      shadow: default_configuration,
                      &block)
         self.configured_aria = aria
         self.configured_classname = classname
         self.configured_data = data
         self.configured_id = id
+        self.configured_padding = padding
+        self.configured_selected = selected
         self.configured_shadow = shadow
         self.block = block_given? ? block : nil
       end
 
+      def selected_class
+        true_value(configured_selected, "selected", "deselected")
+      end
+
       def shadow
-        shadow_options = %w[shallow default deep deeper deepest]
-        one_of_value(configured_shadow, shadow_options, "")
+        shadow_options = %w[none shallow default deep deeper deepest]
+        one_of_value(configured_shadow, shadow_options, "none")
       end
 
       def shadow_class
@@ -34,15 +44,21 @@ module Playbook
       end
 
       def yield(context:)
-        context.capture(&block)
+        if !block.nil?
+          pb_card_body = Playbook::PbCard::CardBody.new(padding: configured_padding) do
+            context.capture(&block)
+          end
+          ApplicationController.renderer.render(partial: pb_card_body, as: :object)
+        end
       end
 
       def kit_class
         card_options = [
-          "pb_card",
+          "pb_card_kit",
+          selected_class,
           shadow_class,
         ]
-        card_options.reject(&:nil?).join(" ")
+        card_options.reject(&:nil?).join("_")
       end
 
       def to_partial_path

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

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCard
+    class CardBody < Playbook::PbKit::Base
+      PROPS = %i[configured_aria
+                 configured_classname
+                 configured_data
+                 configured_id
+                 configured_padding
+                 block].freeze
+
+      def initialize(aria: default_configuration,
+                     classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     padding: default_configuration,
+                     &block)
+        self.configured_aria = aria
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_padding = padding
+        self.block = block_given? ? block : nil
+      end
+
+      def padding_class
+        padding_options = %w[none xs sm md lg xl]
+        one_of_value(configured_padding.to_s, padding_options, "md")
+      end
+
+      def yield(context:)
+        context.capture(&block)
+      end
+
+      def kit_class
+        card_body_options = [
+          "pb_card_body_kit",
+          padding_class,
+        ]
+        card_body_options.join("_")
+      end
+
+      def to_partial_path
+        "pb_card/child_kits/card_body"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_card/child_kits/_card_body.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class),
+    aria: object.aria) do %>
+  <%= object.yield(context: self) %>
+<% end %>

data/app/pb_kits/playbook/pb_card/child_kits/_card_body.scss

@@ -0,0 +1,24 @@
+@import "../../tokens/spacing";
+
+$pb_card_body_padding:(
+  none: 0,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
+
+[class^=pb_card_body_kit] {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  min-height: 1px;
+  border: 0;
+
+  @each $name, $padding_size in $pb_card_body_padding {
+    &[class*=_#{$name}] {
+      padding: $padding_size;
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+<%= pb_rails("card") do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card") do %>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
+<br><br>
+Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+<% end %>

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

@@ -1,3 +1,3 @@
-<%= pb_rails("card", props: {shadow: "deepest"}) do %>
+<%= pb_rails("card") do %>
   Card content
 <% end %>

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

@@ -0,0 +1,27 @@
+<%= pb_rails("card", props: {padding: "none"}) do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {padding: "xs"}) do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {padding: "md"}) do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {padding: "lg"}) do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {padding: "xl"}) do %>
+  Card content
+<% end %>