playbook_ui 2.7.2 → 2.8.1

data/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 %>

data/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;

data/app/pb_kits/playbook/pb_date/_date.scss

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

data/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

data/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"
+}) %>

data/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;

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

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

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

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

data/app/pb_kits/playbook/pb_icon/_icon.html.erb

@@ -0,0 +1,7 @@
+<% if !object.icon_class.nil? %>
+  <%= content_tag(:i, nil,
+      id: object.id,
+      data: object.data,
+      class: object.classname(object.kit_class),
+      aria: object.aria) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/_icon.jsx

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

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -0,0 +1,3 @@
+[class^=pb_icon]{
+
+}

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb

@@ -0,0 +1,3 @@
+<p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
+<br/>
+<p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>

data/app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "user", border: true, fixed_width: true, size: "2x" }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

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

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_flip.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "horizontal", size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "vertical", size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "both", size: "2x" }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_pull.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("icon", props: { icon: "arrow-left", pull: "left", fixed_width: true, size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "arrow-right", pull: "right", fixed_width: true, size: "2x" }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 90, size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 180, size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 270, size: "2x" }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes.html.erb

@@ -0,0 +1,16 @@
+<p><%= pb_rails("icon", props: { icon: "user", size: "lg" }) %> <span>Large</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "sm" }) %> <span>Small</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "xs" }) %> <span>XSmall</span></p>
+
+<br/><br/>
+
+<p><%= pb_rails("icon", props: { icon: "user", size: "1x" }) %> <span>1x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "2x" }) %> <span>2x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "3x" }) %> <span>3x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "4x" }) %> <span>4x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "5x" }) %> <span>5x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "6x" }) %> <span>6x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "7x" }) %> <span>7x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "8x" }) %> <span>8x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "9x" }) %> <span>9x</span></p>
+<p><%= pb_rails("icon", props: { icon: "user", size: "10x" }) %> <span>10x</span></p>

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

@@ -0,0 +1,12 @@
+examples:
+  rails:
+  - icon_default: Icon Default
+  - icon_rotate: Icon Rotate
+  - icon_flip: Icon Flip
+  - icon_animate: Icon Animation
+  - icon_pull: Icon Pull
+  - icon_border: Icon Border
+  - icon_sizes: Icon Sizes
+  - icon_default_dark: Icon Default Dark
+  react:
+  - icon_default: Default

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

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

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -0,0 +1,160 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbIcon
+    class Icon < Playbook::PbKit::Base
+      PROPS = %i[configured_aria
+                 configured_border
+                 configured_classname
+                 configured_data
+                 configured_fixed_width
+                 configured_flip
+                 configured_icon
+                 configured_id
+                 configured_inverse
+                 configured_list_item
+                 configured_pull
+                 configured_pulse
+                 configured_rotation
+                 configured_size
+                 configured_spin].freeze
+
+      def initialize(aria: default_configuration,
+                     border: default_configuration,
+                     classname: default_configuration,
+                     data: default_configuration,
+                     fixed_width: default_configuration,
+                     flip: default_configuration,
+                     icon: default_configuration,
+                     id: default_configuration,
+                     inverse: default_configuration,
+                     list_item: default_configuration,
+                     pull: default_configuration,
+                     pulse: default_configuration,
+                     rotation: default_configuration,
+                     size: default_configuration,
+                     spin: default_configuration)
+        self.configured_aria = aria
+        self.configured_border = border
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_fixed_width = fixed_width
+        self.configured_flip = flip
+        self.configured_icon = icon
+        self.configured_id = id
+        self.configured_inverse = inverse
+        self.configured_list_item = list_item
+        self.configured_pull = pull
+        self.configured_pulse = pulse
+        self.configured_rotation = rotation
+        self.configured_size = size
+        self.configured_spin = spin
+      end
+
+      def border_class
+        true_value(configured_border, "fa-border", nil)
+      end
+
+      def fixed_width_class
+        true_value(configured_fixed_width, "fa-fw", nil)
+      end
+
+      def flip
+        flip_options = %w[horizontal vertical both]
+        one_of_value(configured_flip, flip_options, nil)
+      end
+
+      def flip_class
+        h_class = "fa-flip-horizontal"
+        v_class = "fa-flip-vertical"
+        case flip
+        when "horizontal"
+          h_class
+        when "vertical"
+          v_class
+        when "both"
+          [h_class, v_class].join(" ")
+        end
+      end
+
+      def icon_class
+        adjusted_value(configured_icon, "fa-#{configured_icon}", nil)
+      end
+
+      def inverse_class
+        true_value(configured_inverse, "fa-inverse", nil)
+      end
+
+      def list_item_class
+        true_value(configured_list_item, "fa-li", nil)
+      end
+
+      def pull
+        pull_options = %w[left right]
+        one_of_value(configured_pull, pull_options, default_configuration)
+      end
+
+      def pull_class
+        adjusted_value(pull, "fa-pull-#{pull}", nil)
+      end
+
+      def pulse_class
+        true_value(configured_pulse, "fa-pulse", nil)
+      end
+
+      def rotation
+        rotation_options = [90, 180, 270]
+        one_of_value(configured_rotation, rotation_options, default_configuration)
+      end
+
+      def rotation_class
+        adjusted_value(rotation, "fa-rotate-#{rotation}", nil)
+      end
+
+      def size
+        size_options = %w[lg xs sm 1x 2x 3x 4x 5x 6x 7x 8x 9x 10x]
+        one_of_value(configured_size, size_options, default_configuration)
+      end
+
+      def size_class
+        adjusted_value(size, "fa-#{size}", nil)
+      end
+
+      def spin_class
+        true_value(configured_spin, "fa-spin", nil)
+      end
+
+      def kit_class
+        icon_options = [
+          "pb_icon",
+          "far",
+          icon_class,
+          border_class,
+          fixed_width_class,
+          flip_class,
+          inverse_class,
+          list_item_class,
+          pull_class,
+          pulse_class,
+          rotation_class,
+          size_class,
+          spin_class,
+        ]
+        icon_options.reject(&:nil?).join(" ")
+      end
+
+      def to_partial_path
+        "pb_icon/icon"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end