playbook_ui 2.9.0 → 2.9.1

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("checkbox", props: {text:"Checkbox Label" , icon:"check", dark: true}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("checkbox" , props:{ text:"Checkbox Label", value:"checkbox-value", icon:"check", name:"checkbox-name" }) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx

@@ -0,0 +1,17 @@
+import React from "react"
+import Checkbox from "../_checkbox.jsx"
+
+function CheckboxDefault() {
+  return (
+    <div>
+      <Checkbox
+
+          label='Checkbox label'
+          name="default name"
+          value="default value"
+      />
+    </div>
+  )
+}
+
+export default CheckboxDefault;

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

@@ -0,0 +1,8 @@
+examples:
+
+  rails:
+  - checkbox_default: Default
+  - checkbox_dark: Dark
+
+  react:
+    - checkbox_default: Default

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

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

data/app/pb_kits/playbook/pb_date/date.rb

@@ -8,6 +8,7 @@ module Playbook
 
       PROPS = %i[configured_classname
                  configured_data
+                 configured_date
                  configured_id
                  configured_size
                  configured_timestamp
@@ -15,12 +16,14 @@ module Playbook
 
       def initialize(classname: default_configuration,
                      data: default_configuration,
+                     date: default_configuration,
                      id: default_configuration,
                      size: default_configuration,
                      timestamp: default_configuration,
                      timezone: default_configuration)
         self.configured_classname = classname
         self.configured_data = data
+        self.configured_date = date
         self.configured_id = id
         self.configured_size = size
         self.configured_timestamp = timestamp
@@ -49,30 +52,18 @@ module Playbook
     private
 
       def timestamp
-        convert_to_timestamp(configured_timestamp)
-      end
-
-      def convert_to_timestamp(time)
-        time.is_a?(String) ? DateTime.parse(time) : time
-        time.in_time_zone(timezone_value)
+        if is_set? configured_date
+          date = configured_date
+        else
+          date = configured_timestamp
+        end
+        Playbook::PbKit::PbDateTime.new(date, 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 xs]
         one_of_value(configured_size, size_options, "sm")
@@ -85,27 +76,27 @@ module Playbook
 
       def text
         content_tag(:span) do
-          "#{day_of_week} · #{month} #{day}".html_safe
+          "#{timestamp.to_day_of_week.upcase} · #{timestamp.to_month.upcase} #{timestamp.to_day}".html_safe
         end
       end
 
       def display_value_xs
-        if is_set? configured_timestamp
+        if is_set?(configured_timestamp) || is_set?(configured_date)
           pb_value = Playbook::PbTitle::Title.new(size: 4, text: text)
           ApplicationController.renderer.render(partial: pb_value, as: :object)
         end
       end
 
       def display_value_sm
-        if is_set? configured_timestamp
+        if is_set?(configured_timestamp) || is_set?(configured_date)
           pb_value = Playbook::PbTitle::Title.new(size: 4, text: icon + text)
           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}")
+        if is_set?(configured_timestamp) || is_set?(configured_date)
+          pb_value_lg = Playbook::PbTitle::Title.new(size: 3, text: "#{timestamp.to_month.upcase} #{timestamp.to_day}")
           ApplicationController.renderer.render(partial: pb_value_lg, as: :object)
         end
       end

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

@@ -1,17 +1,17 @@
 <%= pb_rails("date", props: {
-  timestamp: "2012-08-02T15:49:29Z",
+  date: Date.today,
   size: "lg"
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  timestamp: "2012-08-02T15:49:29Z"
+  date: DateTime.now
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  timestamp: "2012-08-02T15:49:29Z",
+  date: "2012-08-02T15:49:29Z",
   size: "xs"
 }) %>

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb

@@ -0,0 +1,22 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname("pb_date_range_inline")) do %>
+
+    <%= pb_rails("body", props: { tag: "span", color: "light" }) do %>
+      <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+    <% end %>
+
+    <%= pb_rails("body", props: { tag: "span"}) do %>
+      <%= object.start_date %>
+    <% end %>
+
+    <%= pb_rails("body", props: { tag: "span", color: "light" }) do %>
+      <%= pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true }) %>
+    <% end %>
+
+    <%= pb_rails("body", props: { tag: "span"}) do %>
+      <%= object.end_date %>
+    <% end %>
+
+<% end %>

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx

@@ -0,0 +1,54 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+import DateTime from '../pb_kit/dateTime.js'
+
+import {
+  Body,
+  Icon,
+} from '../'
+
+
+type DateRangeInlineProps = {
+  className?: String,
+  data?: String,
+  endDate?: Date,
+  id?: String,
+  startDate?: Date
+}
+
+const dateTimestamp = (dateValue) => {
+  let date = new DateTime({ value: dateValue })
+  return `${date.toDay()} ${date.toMonth()} ${date.toYear()}`
+}
+
+const dateTimeIso = (dateValue) => {
+  let date = new DateTime({ value: dateValue })
+  return date.toIso()
+}
+
+const DateRangeInline = ({
+  className,
+  data,
+  endDate,
+  id,
+  startDate
+}: DateRangeInlineProps) => (
+  <div>
+    <Body tag="span" color="light">
+      <Icon icon="calendar-alt" fixedWidth="true" />
+    </Body>
+    <Body tag="span">
+      <time dateTime={dateTimeIso(startDate)} >{` ${dateTimestamp(startDate)} `}</time>
+    </Body>
+    <Body tag="span" color="light">
+      <Icon icon="long-arrow-right" fixedWidth="true" />
+    </Body>
+    <Body tag="span">
+      <time dateTime={dateTimeIso(endDate)} >{` ${dateTimestamp(endDate)} `}</time>
+    </Body>
+  </div>
+)
+
+export default DateRangeInline

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss

@@ -0,0 +1,3 @@
+.pb_date_range_inline {
+
+}

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDateRangeInline
+    class DateRangeInline < Playbook::PbKit::Base
+      include ActionView::Helpers::TagHelper
+      include ActionView::Context
+
+      PROPS = %i[configured_classname
+                 configured_data
+                 configured_end_date
+                 configured_id
+                 configured_start_date].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     end_date: default_configuration,
+                     id: default_configuration,
+                     start_date: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_end_date = end_date
+        self.configured_start_date = start_date
+      end
+
+      def end_date
+        date_time = Playbook::PbKit::PbDateTime.new(default_value(configured_end_date, ""))
+        content_tag(:time, datetime: date_time.to_iso) do
+          "#{date_time.to_day} #{date_time.to_month_downcase} #{date_time.to_year}"
+        end
+      end
+
+      def start_date
+        date_time = Playbook::PbKit::PbDateTime.new(default_value(configured_start_date, ""))
+        content_tag(:time, datetime: date_time.to_iso) do
+          "#{date_time.to_day} #{date_time.to_month_downcase} #{date_time.to_year}"
+        end
+      end
+
+      def to_partial_path
+        "pb_date_range_inline/date_range_inline"
+      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_date_range_inline/docs/_date_range_inline_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import DateRangeInline from "../_date_range_inline.jsx"
+
+function DateRangeInlineDefault() {
+  return (
+    <div>
+      <DateRangeInline startDate={new Date('18 Jun 2019')} endDate={new Date('20 Mar 2020')} />
+    </div>
+  )
+}
+
+export default DateRangeInlineDefault;

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

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

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

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

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.html.erb

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

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx

@@ -0,0 +1,51 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import DateTime from '../pb_kit/dateTime.js'
+
+import {
+  Body,
+  Title,
+} from '../'
+
+type DateYearStackedProps = {
+  align?: 'center' | 'right',
+  className?: String | Array<String>,
+  dark?: Boolean,
+  data?: String,
+  date: String,
+  id?: String,
+}
+
+const kitClasses = ({align='left'}: DateYearStackedProps) => {
+  let classname = 'pb_date_year_stacked'
+  classname += `_${align}`
+  return classname
+}
+
+const DateYearStacked = ({
+  align,
+  className,
+  dark=false,
+  date,
+}: DateYearStackedProps) => {
+
+  const dateTimestamp = new DateTime({ value: date })
+  const css = classnames(kitClasses({align}), className)
+
+  return (
+    <div className={css}>
+      <Title
+        dark={dark}
+        size={4}
+        text={`${dateTimestamp.toDay()} ${dateTimestamp.toMonth().toUpperCase()}`}
+      />
+      <Body color="light">{ dateTimestamp.toYear() }</Body>
+    </div>
+  )
+}
+
+export default DateYearStacked

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.scss

@@ -0,0 +1,17 @@
+[class^=pb_date_year_stacked] {
+  &[class*=_left] {
+    & > [class^=pb_title], & > [class^=pb_body] {
+      text-align: left;
+    }
+  }
+  &[class*=_center] {
+    & > [class^=pb_title], & > [class^=pb_body] {
+      text-align: center;
+    }
+  }
+  &[class*=_right]  {
+    & > [class^=pb_title], & > [class^=pb_body] {
+      text-align: right;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDateYearStacked
+    class DateYearStacked < Playbook::PbKit::Base
+      PROPS = %i[configured_align
+                 configured_classname
+                 configured_dark
+                 configured_data
+                 configured_date
+                 configured_id].freeze
+
+      def initialize(align: default_configuration,
+                     classname: default_configuration,
+                     dark: default_configuration,
+                     data: default_configuration,
+                     date: default_configuration,
+                     id: default_configuration)
+        self.configured_align = align
+        self.configured_classname = classname
+        self.configured_dark = dark
+        self.configured_data = data
+        self.configured_date = date
+        self.configured_id = id
+      end
+
+      def align
+        align_options = %w[left center right]
+        one_of_value(configured_align, align_options, "left")
+      end
+
+      def dark
+        is_true? configured_dark
+      end
+
+      def date
+        Playbook::PbKit::PbDateTime.new(configured_date)
+      end
+
+      def year
+        year = date.to_year
+        pb_body = Playbook::PbBody::Body.new(text: year, color: "light", dark: dark)
+        ApplicationController.renderer.render(partial: pb_body, as: :object)
+      end
+
+      def day_month
+        day_month = "#{date.to_day} #{date.to_month}"
+        pb_title = Playbook::PbTitle::Title.new(text: day_month, size: 4, dark: dark)
+        ApplicationController.renderer.render(partial: pb_title, as: :object)
+      end
+
+      def to_partial_path
+        "pb_date_year_stacked/date_year_stacked"
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_date_year_stacked",
+          align,
+
+        ]
+        kit_options.join("_")
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end