KIT: Date (#87)

* Add kit date

* Formatting update

* Add timestamp option

* Cleanup Kit Class

app/pb_kits/playbook/packs/examples.js

@@ -51,6 +51,9 @@ WebpackerReact.setup (Icon);
 import * as DashboardValue from "pb_dashboard_value/docs";
 WebpackerReact.setup (DashboardValue);
 
+import * as Date from "pb_date/docs";
+WebpackerReact.setup (Date);
+
 import * as TitleDetail from "pb_title_detail/docs";
 WebpackerReact.setup (TitleDetail);
 

app/pb_kits/playbook/packs/kits.js

@@ -12,6 +12,7 @@ import "./pb_input.js";
 import "./pb_bar_graph.js";
 import "./pb_icon.js";
 import "./pb_dashboard_value.js";
+import "./pb_date.js";
 import "./pb_title_detail.js";
 import "./pb_icon_circle.js";
 import "./pb_icon_value.js";

app/pb_kits/playbook/packs/pb_date.js

@@ -0,0 +1,4 @@
+import Date from "pb_date/_date.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Date });

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

@@ -14,6 +14,7 @@
 @import '../../pb_bar_graph/bar_graph';
 @import '../../pb_icon/icon';
 @import '../../pb_dashboard_value/dashboard_value';
+@import '../../pb_date/date';
 @import '../../pb_title_detail/title_detail';
 @import '../../pb_icon_circle/icon_circle';
 @import '../../pb_icon_value/icon_value';

app/pb_kits/playbook/pb_date/_date.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 %>

app/pb_kits/playbook/pb_date/_date.jsx

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

app/pb_kits/playbook/pb_date/_date.scss

@@ -0,0 +1,5 @@
+[class^=pb_date] {
+  [class^=pb_body] {
+    font-weight: $bold !important;
+  }
+}

app/pb_kits/playbook/pb_date/date.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDate
+    class Date < 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
+        "pb_date"
+      end
+
+      def to_partial_path
+        "pb_date/date"
+      end
+
+    private
+
+      def timestamp
+        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 timezone_value
+        default_value(configured_timezone, "America/New_York")
+      end
+
+      def day_of_week
+        timestamp.strftime("%a").upcase
+      end
+
+      def month
+        timestamp.strftime("%^b").upcase
+      end
+
+      def day
+        timestamp.strftime("%e")
+      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: "calendar", fixed_width: true)
+        ApplicationController.renderer.render(partial: pb_icon, as: :object)
+      end
+
+      def text
+        "<span>#{day_of_week} &middot; #{month} #{day}</span>".html_safe
+      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
+          pb_value_lg = Playbook::PbTitle::Title.new(size: 3, text: "#{month} #{day}")
+          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

app/pb_kits/playbook/pb_date/docs/_date_default.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("date", props: {
+  timestamp: "2012-08-02T15:49:29Z",
+  size: "lg"
+}) %>
+
+<br>
+
+<%= pb_rails("date", props: {
+  timestamp: "2012-08-02T15:49:29Z"
+}) %>

app/pb_kits/playbook/pb_date/docs/_date_default.jsx

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

app/pb_kits/playbook/pb_date/docs/example.yml

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

app/pb_kits/playbook/pb_date/docs/index.js

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

config/data/menu.yml

@@ -14,6 +14,7 @@ kits:
   - icon
   - table
   - dashboard_value
+  - date
   - title_detail
   - icon_circle
   - icon_value