playbook_ui 2.7.2 → 2.8.1

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

@@ -0,0 +1 @@
+export {default as TimestampDefault} from './_timestamp_default.jsx';

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimestamp
+    class Timestamp < Playbook::PbKit::Base
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_id
+                 configured_text
+                 block].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     text: default_configuration,
+                     &block)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_text = text
+        self.block = block_given? ? block : nil
+      end
+
+      def text
+        default_value(configured_text, "")
+      end
+
+      def yield(context:)
+        !block.nil? ? context.capture(&block) : text
+      end
+
+      def kit_class
+        "pb_timestamp"
+      end
+
+      def to_partial_path
+        "pb_timestamp/timestamp"
+      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_title/_title.html.erb

@@ -1 +1,4 @@
-<%= content_tag(:"#{object.tag}", object.text, class: "heading#{object.size}#{object.dark}") %>
+<%= content_tag(object.tag, object.text,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) %>

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,32 +1,23 @@
 @import "title_mixin";
 
-// FEEBACK: STYLING H1's & Strongs can have unxepected results
-// What happends if I do this <strong class="heading_1" or <h1 class="heading_3"
+[class^=pb_title]{
+  &[class*=_1] {
+    @include pb_title_1;
+  }
 
-.heading_1 {
-  @include heading_1;
-  &_dark {
-    @include heading_1_dark;
+  &[class*=_2] {
+    @include pb_title_2;
   }
-}
 
-.heading_2 {
-  @include heading_2;
-  &_dark {
-    @include heading_2_dark;
+  &[class*=_3] {
+    @include pb_title_3;
   }
-}
 
-.heading_3 {
-  @include heading_3;
-  &_dark {
-    @include heading_3_dark;
+  &[class*=_4] {
+    @include pb_title_4;
   }
-}
 
-.heading_4, strong {
-  @include heading_4;
-  &_dark {
-    @include heading_4_dark;
+  &[class*=_dark] {
+    @include pb_title_dark;
   }
 }

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -2,56 +2,34 @@
 @import "../tokens/typography";
 @import "../tokens/line_height";
 
-@mixin heading_1 {
-  font-size: $heading_1;
+@mixin pb_title(
+    $fontSize: $heading_1, 
+    $fontWeight: $lighter,
+    $lineHeight: $lh_tighter){
+  font-size: $fontSize;
   letter-spacing: $lspace_tight;
-  font-weight: $lighter;
-  color: $ink;
+  font-weight: $fontWeight;
+  color: $text_lt_default;
   margin: 0;
-  line-height: $lh_tighter;
+  line-height: $lineHeight;
 }
 
-@mixin heading_1_dark {
-  @include heading_1;
-  color: $white;
+@mixin pb_title_1 {
+  @include pb_title($heading_1);
 }
 
-@mixin heading_2 {
-  font-size: $heading_2;
-  font-weight: $lighter;
-  color: $ink;
-  margin: 0;
-  line-height: 0.96;
-}
-
-@mixin heading_2_dark {
-  @include heading_2;
-  color: $white;
-}
-
-@mixin heading_3 {
-  font-size: $heading_3;
-  font-weight: $lighter;
-  color: $ink;
-  margin: 0;
-  line-height: $lh_tighter;
+@mixin pb_title_2 {
+  @include pb_title($heading_2, $lighter, 0.96);
 }
 
-@mixin heading_3_dark {
-  @include heading_3;
-  color: $white;
+@mixin pb_title_3 {
+  @include pb_title($heading_3);
 }
 
-
-@mixin heading_4 {
-  font-size: $heading_4;
-  font-weight: $bolder;
-  color: $ink;
-  margin: 0;
-  line-height: $lh_tighter;
+@mixin pb_title_4 {
+  @include pb_title($heading_4, $bolder);
 }
 
-@mixin heading_4_dark {
-  @include heading_4;
-  color: $white;
+@mixin pb_title_dark {
+  color: $text_dk_default;
 }

data/app/pb_kits/playbook/pb_title/docs/_title_dark.html.erb

@@ -1,3 +1,7 @@
+<%= pb_rails("title", props: { text: "Default Title", dark: true }) %>
+
+<br/>
+
 <%= pb_rails("title", props: { text: "Title 1", tag: "h4", size: 4, dark: true }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h3", size: 3, dark: true }) %>
 <%= pb_rails("title", props: { text: "Title 3", tag: "h2", size: 2, dark: true }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb

@@ -1,3 +1,7 @@
+<%= pb_rails("title", props: { text: "Default Title" }) %>
+
+<br/>
+
 <%= pb_rails("title", props: { text: "Title 1", tag: "h4", size: 4 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h3", size: 3 }) %>
 <%= pb_rails("title", props: { text: "Title 3", tag: "h2", size: 2 }) %>

data/app/pb_kits/playbook/pb_title/title.rb

@@ -1,21 +1,26 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbTitle
     class Title < Playbook::PbKit::Base
-      PROPS = [:configured_classname,
-          :configured_dark,
-          :configured_data,
-          :configured_id,
-          :configured_size,
-          :configured_tag,
-          :configured_text].freeze
+      PROPS = %i[configured_aria
+                 configured_classname
+                 configured_dark
+                 configured_data
+                 configured_id
+                 configured_size
+                 configured_tag
+                 configured_text].freeze
 
-      def initialize(classname: default_configuration,
-                   dark: default_configuration,
-                   data: default_configuration,
-                   id: default_configuration,
-                   size: default_configuration,
-                   tag: default_configuration,
-                   text: default_configuration)
+      def initialize(aria: default_configuration,
+                     classname: default_configuration,
+                     dark: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     size: default_configuration,
+                     tag: default_configuration,
+                     text: default_configuration)
+        self.configured_aria = aria
         self.configured_classname = classname
         self.configured_dark = dark
         self.configured_data = data
@@ -26,37 +31,34 @@ module Playbook
       end
 
       def tag
-        if configured_tag == default_configuration
-          "h1"
-        else
-          configured_tag
-        end
+        tag_options = %w[h1 h2 h3 h4 h5 h6 p div span]
+        one_of_value(configured_tag, tag_options, "h3")
       end
 
       def text
-        if configured_text == default_configuration
-          "Hello World"
-        else
-          configured_text
-        end
+        default_value(configured_text, "Title text")
       end
 
       def size
-        if configured_size == default_configuration
-          "_1"
-        else
-          "_#{configured_size}"
-        end
+        size_options = [1, 2, 3, 4]
+        one_of_value(configured_size, size_options, 3)
+      end
+
+      def size_class
+        adjusted_value(size, size, nil)
+      end
+
+      def dark_class
+        true_value(configured_dark, "dark", nil)
       end
 
-      def dark
-        if configured_dark == default_configuration
-          ""
-        else
-          if (configured_dark == true)
-            "_dark"
-          end
-        end
+      def kit_class
+        title_options = [
+          "pb_title",
+          size_class,
+          dark_class,
+        ]
+        title_options.reject(&:nil?).join("_")
       end
 
       def to_partial_path

data/app/pb_kits/playbook/pb_title_count/_title_count.html.erb

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

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string
+};
+
+class TitleCount extends React.Component {
+  render() {
+    return (
+      <div className="pb_title_count">
+        <span>TITLE COUNT CONTENT</span>
+      </div>
+    )
+  }
+}
+
+TitleCount.propTypes = propTypes;
+
+export default TitleCount;

data/app/pb_kits/playbook/pb_title_count/_title_count.scss

@@ -0,0 +1,17 @@
+[class^=pb_title_count] {
+  display: flex;
+  justify-content: flex-start;
+  align-items: baseline;
+
+  & > [class^=pb_title] {
+    margin-right: $space-xs;
+  }
+
+  &[class*=_center] {
+    justify-content: center;
+  }
+
+  &[class*=_right] {
+    justify-content: flex-end;
+  }
+}

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("title_count", props: {
+  title: "Remodeling Consultants",
+  count: 527
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: "7,399"
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: 7399,
+  size: "lg"
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: -379503.3720,
+  size: "lg"
+}) %>

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import TitleCount from "../_title_count.jsx"
+
+function TitleCountDefault() {
+  return (
+    <div>
+      <TitleCount />
+    </div>
+  )
+}
+
+export default TitleCountDefault;

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

@@ -0,0 +1,9 @@
+examples:
+
+  rails:
+  - title_count_default: Default
+  - title_count_align: Align
+
+
+  react:
+  - title_count_default: Default

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

@@ -0,0 +1 @@
+export {default as TitleCountDefault} from './_title_count_default.jsx';

data/app/pb_kits/playbook/pb_title_count/title_count.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTitleCount
+    class TitleCount < Playbook::PbKit::Base
+      PROPS = %i[configured_align
+                 configured_classname
+                 configured_count
+                 configured_data
+                 configured_id
+                 configured_size
+                 configured_title].freeze
+
+      def initialize(align: default_configuration,
+                     classname: default_configuration,
+                     count: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     size: default_configuration,
+                     title: default_configuration)
+        self.configured_align = align
+        self.configured_classname = classname
+        self.configured_count = count
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_size = size
+        self.configured_title = title
+      end
+
+      def align
+        align_options = %w[left center right]
+        one_of_value(configured_align, align_options, "left")
+      end
+
+      def size
+        size_options = %w[lg sm]
+        one_of_value(configured_size, size_options, "sm")
+      end
+
+      def title_size
+        size == "lg" ? 3 : 4
+      end
+
+      def title
+        if is_set? configured_title
+          pb_title = Playbook::PbTitle::Title.new(size: title_size, text: configured_title)
+          ApplicationController.renderer.render(partial: pb_title, as: :object)
+        end
+      end
+
+      def count
+        if is_set? configured_count
+          value = configured_count.is_a?(Integer) || configured_count.is_a?(Float) ?
+            format_number(configured_count) : configured_count
+          pb_count = Playbook::PbBody::Body.new(color: "light") do
+            value.to_s
+          end
+          ApplicationController.renderer.render(partial: pb_count, as: :object)
+        end
+      end
+
+      def format_number(n)
+        n.to_s.gsub(/(\d)(?=\d{3}+(?:\.|$))(\d{3}\..*)?/, '\1,\2')
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_title_count",
+          align,
+        ]
+        kit_options.join("_")
+      end
+
+      def to_partial_path
+        "pb_title_count/title_count"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end