playbook_ui 2.7.2 → 2.8.1

data/app/pb_kits/playbook/pb_table/styles/_variables.scss

@@ -1,3 +1,6 @@
+@import "../../tokens/spacing";
+@import "../../tokens/typography";
+
 //--------- PADDING ---------//
 
 // Cell padding between cells

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

@@ -1,26 +1,31 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbTable
     class Table < Playbook::PbKit::Base
-      PROPS = [:configured_classname,
-          :configured_container,
-          :configured_dark,
-          :configured_data,
-          :configured_disable_hover,
-          :configured_id,
-          :configured_single_line,
-          :configured_size,
-          :configured_text,
-          :block].freeze
+      PROPS = %i[configured_aria
+                 configured_classname
+                 configured_container
+                 configured_dark
+                 configured_data
+                 configured_disable_hover
+                 configured_id
+                 configured_single_line
+                 configured_size
+                 configured_text
+                 block].freeze
 
-      def initialize(classname: default_configuration,
-                    container: default_configuration,
-                    dark: default_configuration,
-                    data: default_configuration,
-                    disable_hover: default_configuration,
-                    id: default_configuration,
-                    single_line: default_configuration,
-                    size: default_configuration,
-                    &block)
+      def initialize(aria: default_configuration,
+                     classname: default_configuration,
+                     container: default_configuration,
+                     dark: default_configuration,
+                     data: default_configuration,
+                     disable_hover: default_configuration,
+                     id: default_configuration,
+                     single_line: default_configuration,
+                     size: default_configuration,
+                     &block)
+        self.configured_aria = aria
         self.configured_classname = classname
         self.configured_container = container
         self.configured_dark = dark
@@ -32,46 +37,41 @@ module Playbook
         self.block = block_given? ? block : nil
       end
 
-      def single_line
-        if configured_single_line == default_configuration
-          ""
-        else
-          configured_single_line === true ? "single-line" : ""
-        end
+      def single_line_class
+        true_value(configured_single_line, "single-line", nil)
       end
 
       def size
-        size_options = %w(sm md lg)
-        size_default = "sm"
-        if configured_size == default_configuration
-          size_default
-        else
-          size_options.include?(configured_size) ? configured_size : size_default
-        end
+        size_options = %w[sm md lg]
+        one_of_value(configured_size, size_options, default_configuration)
+      end
+
+      def size_class
+        adjusted_value(configured_size, "table-#{size}", "table-md")
+      end
+
+      def dark_class
+        true_value(configured_dark, "table-dark", nil)
       end
 
-      def dark
-        if configured_dark == default_configuration
-          ""
-        else
-          configured_dark === true ? "table-dark" : ""
-        end
+      def disable_hover_class
+        true_value(configured_disable_hover, "no-hover", nil)
       end
 
-      def disable_hover
-        if configured_disable_hover == default_configuration
-          ""
-        else
-          configured_disable_hover === true ? "no-hover" : ""
-        end
+      def container_class
+        true_value(configured_container, "table-card", nil)
       end
 
-      def container
-        if configured_container == default_configuration
-          ""
-        else
-          configured_container === true ? "table-card" : ""
-        end
+      def kit_class
+        table_options = [
+          "pb_table",
+          size_class,
+          single_line_class,
+          dark_class,
+          disable_hover_class,
+          container_class,
+        ]
+        table_options.reject(&:nil?).join(" ")
       end
 
       def yield(context:)

data/app/pb_kits/playbook/pb_time/_time.html.erb

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

data/app/pb_kits/playbook/pb_time/_time.jsx

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

data/app/pb_kits/playbook/pb_time/_time.scss

@@ -0,0 +1,25 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+
+[class^=pb_time] {
+  [class^=pb_body] {
+    font-weight: $bold !important;
+  }
+
+  [class^=pb__time_timezone] {
+    font-size: $font-small;
+    font-weight: $regular;
+    color: $text-lt-light;
+
+    &::before {
+      content: " ";
+    }
+  }
+
+  &[class*=_lg] {
+    [class^=pb__time_timezone] {
+      font-size: $font-large !important;
+      color: $text-lt-light;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("time", props: {
+  timestamp: "2012-08-02T15:49:29Z",
+  size: "lg"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  timestamp: "2012-08-02T15:49:29Z"
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  timestamp: DateTime.now
+}) %>
+
+<br>
+
+<%= pb_rails("time", props: {
+  timestamp: DateTime.now,
+  timezone: "America/Chicago"
+}) %>

data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx

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

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - time_default: Default
+  
+  
+  react:
+  - time_default: Default
+  

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

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

data/app/pb_kits/playbook/pb_time/time.rb

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+include ActionView::Helpers::TagHelper
+include ActionView::Context
+
+module Playbook
+  module PbTime
+    class Time < Playbook::PbKit::Base
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_id
+                 configured_size
+                 configured_timestamp
+                 configured_timezone].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     size: default_configuration,
+                     timestamp: default_configuration,
+                     timezone: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_size = size
+        self.configured_timestamp = timestamp
+        self.configured_timezone = timezone
+      end
+
+      def display_value
+        size == "lg" ? display_value_lg : display_value_sm
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_time",
+          size,
+        ]
+        kit_options.join("_")
+      end
+
+      def to_partial_path
+        "pb_time/time"
+      end
+
+    private
+
+      def timestamp
+        convert_to_timestamp(configured_timestamp)
+      end
+
+      def convert_to_timestamp(ts)
+        ts.is_a?(String) ? DateTime.parse(ts) : ts
+        ts.in_time_zone(timezone_value)
+      end
+
+      def format_time_string
+        format_time = "#{hour}:#{minutes}#{meridian}" if is_set? configured_timestamp
+      end
+
+      def hour
+        timestamp.strftime("%l")
+      end
+
+      def minutes
+        timestamp.strftime("%M")
+      end
+
+      def meridian
+        timestamp.strftime("%P")[0, 1]
+      end
+
+      def timezone_value
+        default_value(configured_timezone, "America/New_York")
+      end
+
+      def timezone_abbr
+        timestamp.strftime("%Z").upcase
+      end
+
+      def timezone
+        content_tag(:span, class: "pb__time_timezone") do
+          timezone_abbr
+        end
+      end
+
+      def size
+        size_options = %w[lg sm]
+        one_of_value(configured_size, size_options, "sm")
+      end
+
+      def icon
+        pb_icon = Playbook::PbIcon::Icon.new(icon: "clock", fixed_width: true)
+        ApplicationController.renderer.render(partial: pb_icon, as: :object)
+      end
+
+      def text
+        content_tag(:time, datetime: timestamp.iso8601) do
+          content_tag(:span) do
+            format_time_string
+          end +
+            timezone
+        end
+      end
+
+      def display_value_sm
+        if is_set? configured_timestamp
+          pb_value = Playbook::PbBody::Body.new(color: "default") do
+            icon +
+              text
+          end
+          ApplicationController.renderer.render(partial: pb_value, as: :object)
+        end
+      end
+
+      def display_value_lg
+        if is_set? configured_timestamp
+          title_props = {
+            size: 3,
+            text: text,
+          }
+          pb_value_lg = Playbook::PbTitle::Title.new(title_props)
+          ApplicationController.renderer.render(partial: pb_value_lg, as: :object)
+        end
+      end
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_timestamp/_timestamp-mixins.scss

@@ -0,0 +1,10 @@
+@import "../tokens/colors";
+@import "../tokens/line_height";
+@import "../tokens/typography";
+
+@mixin pb_timestamp {
+  margin: 0;
+  line-height: $lh_tight;
+  color: $text_lt_lighter;
+  font-size: $text_smaller;
+}

data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb

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

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

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

data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss

@@ -0,0 +1,5 @@
+@import "timestamp-mixins";
+
+[class^=pb_timestamp] {
+  @include pb_timestamp;
+}

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("timestamp", props: { text: "20 seconds ago" }) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx

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

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - timestamp_default: Default
+  
+  
+  react:
+  - timestamp_default: Default
+