playbook_ui 4.11.0.pre.alpha.pre.2 → 4.11.0

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -11,20 +11,28 @@ module Playbook
       prop :placeholder
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
 
       partial "pb_typeahead/typeahead"
 
       def classname
-        generate_classname("pb_typeahead_kit")
+        generate_classname("pb_typeahead_kit", dark_class)
       end
 
       def data
         Hash(values[:data]).merge(
           pb_typeahead_kit: true,
           pb_typeahead_kit_search_term_minimum_length: search_term_minimum_length,
-          pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout,
+          pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout
         )
       end
+
+    private
+
+      def dark_class
+        dark ? "dark" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%= pb_rails("caption", props: {dark: object.dark, text: object.day_of_week}) %>
+    <%= pb_rails("title", props: {dark: object.dark, size: 4, tag: "span", text: object.formatted_month_and_day}) %>
+<% end %>

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -0,0 +1,66 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  buildCss,
+} from '../utilities/props'
+
+import {
+  Caption,
+  Title,
+} from '../'
+
+import DateTime from '../pb_kit/dateTime.js'
+
+type WeekdayStackedProps = {
+  align?: 'left' | 'center' | 'right',
+  className?: String,
+  compact?: Boolean,
+  dark?: Boolean,
+  date: Date,
+  dayOnly?: Boolean,
+  id?: String,
+}
+
+const getDayOfWeek = (date, compact) => {
+  const dateTime = new DateTime({ value: date })
+  if (compact) {
+    return dateTime.toDayAbbr()
+  } else {
+    return dateTime.toWeekday()
+  }
+}
+
+const getFormattedDate = (date, dayOnly) => {
+  const dateTime = new DateTime({ value: date })
+  if (dayOnly) {
+    return dateTime.toDay()
+  } else {
+    return `${dateTime.toMonthNum()}/${dateTime.toDay()}`
+  }
+}
+
+const WeekdayStacked = ({
+  align = 'left',
+  className,
+  compact = false,
+  dark = false,
+  date = new Date(),
+  dayOnly = false,
+}: WeekdayStackedProps) => (
+  <div
+      className={classnames(buildCss('pb_weekday_stacked_kit', align), className)}
+  >
+    <Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>
+    <Title
+        dark={dark}
+        size={4}
+        tag="span"
+        text={getFormattedDate(date, dayOnly)}
+    />
+  </div>
+)
+
+export default WeekdayStacked

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss

@@ -0,0 +1,11 @@
+[class^='pb_weekday_stacked'] {
+  &[class*='_left'] {
+    text-align: left;
+  }
+  &[class*='_center'] {
+    text-align: center;
+  }
+  &[class*='_right'] {
+    text-align: right;
+  }
+}

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("flex", props: {spacing: "evenly"}) do %>
+  <%= pb_rails("weekday_stacked", props: {compact: true, date: Date.parse("2019/11/4")}) %>
+  <%= pb_rails("weekday_stacked", props: {compact: true, date: Date.parse("2019/11/5")}) %>
+  <%= pb_rails("weekday_stacked", props: {compact: true, date: Date.parse("2019/11/6")}) %>
+  <%= pb_rails("weekday_stacked", props: {compact: true, date: Date.parse("2019/11/7")}) %>
+  <%= pb_rails("weekday_stacked", props: {compact: true, date: Date.parse("2019/11/8")}) %>
+  <%= pb_rails("weekday_stacked", props: {compact: true, date: Date.parse("2019/11/9")}) %>
+  <%= pb_rails("weekday_stacked", props: {compact: true, date: Date.parse("2019/11/10")}) %>
+<% end %>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import {
+  Flex,
+  // FlexItem,
+  WeekdayStacked,
+} from '../..'
+
+const WeekdayStackedCompact = () => (
+  <Flex spacing="evenly">
+    <WeekdayStacked
+        compact
+        date={new Date('2019/11/4')}
+        dayOnly
+    />
+    <WeekdayStacked
+        compact
+        date={new Date('2019/11/5')}
+        dayOnly
+    />
+    <WeekdayStacked
+        compact
+        date={new Date('2019/11/6')}
+        dayOnly
+    />
+    <WeekdayStacked
+        compact
+        date={new Date('2019/11/7')}
+        dayOnly
+    />
+    <WeekdayStacked
+        compact
+        date={new Date('2019/11/8')}
+        dayOnly
+    />
+    <WeekdayStacked
+        compact
+        date={new Date('2019/11/9')}
+        dayOnly
+    />
+    <WeekdayStacked
+        compact
+        date={new Date('2019/11/10')}
+        dayOnly
+    />
+  </Flex>
+)
+
+export default WeekdayStackedCompact

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_dark.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("weekday_stacked", props: {dark: true}) %>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_dark.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {
+  WeekdayStacked,
+} from '../../'
+
+const WeekdayStackedDark = () => (
+  <div>
+    <WeekdayStacked
+        dark
+    />
+  </div>
+)
+
+export default WeekdayStackedDark

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_day_only.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("weekday_stacked", props: {day_only: true}) %>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_day_only.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {
+  WeekdayStacked,
+} from '../..'
+
+const WeekdayStackedDayOnly = () => (
+  <div>
+    <WeekdayStacked
+        dayOnly
+    />
+  </div>
+)
+
+export default WeekdayStackedDayOnly

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("weekday_stacked") %>
+<%= pb_rails("weekday_stacked", props: {align: 'center'}) %>
+<%= pb_rails("weekday_stacked", props: {align: 'right'}) %>

data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {
+  WeekdayStacked,
+} from '../../'
+
+const WeekdayStackedDefault = () => (
+  <div>
+    <WeekdayStacked className="test" />
+    <WeekdayStacked align="center" />
+    <WeekdayStacked align="right" />
+  </div>
+)
+
+export default WeekdayStackedDefault

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

@@ -0,0 +1,15 @@
+examples:
+  
+  rails:
+  - weekday_stacked_default: Default
+  - weekday_stacked_day_only: Day Only
+  - weekday_stacked_compact: Day Only - Compact
+  - weekday_stacked_dark: Dark
+  
+  
+  react:
+  - weekday_stacked_default: Default
+  - weekday_stacked_day_only: Day Only
+  - weekday_stacked_compact: Day Only - Compact
+  - weekday_stacked_dark: Dark
+  

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

@@ -0,0 +1,4 @@
+export { default as WeekdayStackedDefault } from './_weekday_stacked_default.jsx'
+export { default as WeekdayStackedDayOnly } from './_weekday_stacked_day_only.jsx'
+export { default as WeekdayStackedCompact } from './_weekday_stacked_compact.jsx'
+export { default as WeekdayStackedDark } from './_weekday_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbWeekdayStacked
+    class WeekdayStacked
+      include ActionView::Helpers::TagHelper
+      include ActionView::Context
+      include Playbook::Props
+
+      partial "pb_weekday_stacked/weekday_stacked"
+
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left center right],
+                   default: "left"
+
+      prop :compact, type: Playbook::Props::Boolean,
+                     default: false
+
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+
+      prop :date, type: Playbook::Props::Date,
+                  default: ::Date.current
+
+      prop :day_only, type: Playbook::Props::Boolean,
+                      default: false
+
+      def classname
+        generate_classname("pb_weekday_stacked_kit", align)
+      end
+
+      def day_of_week
+        day = Playbook::PbKit::PbDateTime.new(date)
+        formatted_day = compact ? day.to_day_of_week_compact : day.to_day_of_week
+        content_tag(:time, datetime: day.to_iso) do
+          formatted_day
+        end
+      end
+
+      def formatted_month_and_day
+        compact || day_only ? day : month_and_day
+      end
+
+    private
+
+      def month_and_day
+        month_and_day = Playbook::PbKit::PbDateTime.new(date)
+        content_tag(:time, datetime: month_and_day.to_iso) do
+          "#{month_and_day.to_unpadded_month_number}/#{month_and_day.to_unpadded_day}"
+        end
+      end
+
+      def day
+        day = Playbook::PbKit::PbDateTime.new(date)
+        content_tag(:time, datetime: day.to_iso) do
+          day.to_unpadded_day
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -87,8 +87,8 @@ $hover_colors: (
 );
 
 // Focus colors -----------------------
-$focus_input_light:   rgba($active_light, $opacity_2);
-$focus_input_dark:    rgba($active_dark, $opacity_2);
+$focus_input_light:   rgba($active_light, $opacity_5);
+$focus_input_dark:    rgba($active_dark, $opacity_5);
 $focus_input_colors: (
   focus_input_light:        $focus_input_light,
   focus_input_dark:         $focus_input_dark

data/app/views/layouts/playbook/_sidebar.html.erb

@@ -1,25 +1,41 @@
 <br>
-<%= pb_rails("nav", props: {title: "Kits", link: kits_path, variant: "subtle"}) do %>
-  <% all_active = (controller_name == 'pages' && action_name == 'kits') ? true : false %>
-  <% pb_rails("nav/item", props: { text: "All", link: kits_path, active: all_active }) %>
-
+<%= pb_rails("nav", props: {
+  title: "Kits",
+  link: all_link(@type),
+  variant: "subtle"
+}) do %>
+  <% pb_rails("nav/item", props: {
+    text: "All",
+    link: all_link(@type),
+    active: all_active(controller_name, action_name)
+  }) %>
   <% MENU["kits"].each do |link| %>
-    <% active = !@kit.nil? && @kit == link ? true : false %>
     <% if link.is_a?(Hash) %>
       <div class="category_section">
-        <% active = !@category.nil? && @category == nav_hash_category(link) ? true : false %>
-        <%= pb_rails("nav/item", props: { active: active, classname: "category", icon_right: "angle-down", link: kit_category_show_path(nav_hash_category(link)) }) do %>
+        <%= pb_rails("nav/item", props: {
+          active: category_active(@category, link),
+          classname: "category",
+          icon_right: "angle-down",
+          link: category_link(@type, link)
+        }) do %>
           <%= pb_kit_title(nav_hash_category(link)) %>
         <% end %>
         <%= pb_rails("nav", props: { variant: "subtle", classname: "sub_category"}) do %>
           <% nav_hash_array(link).each do |sub_link| %>
-            <% sub_active = !@kit.nil? && @kit == sub_link ? true : false %>
-            <%= pb_rails("nav/item", props: { text: pb_kit_title(sub_link), link: kit_show_path(sub_link), active: sub_active }) %>
+            <%= pb_rails("nav/item", props: {
+              text: pb_kit_title(sub_link),
+              link: sub_category_link(@type, sub_link),
+              active: sub_category_active(@kit, sub_link)
+            }) %>
           <% end %>
         <% end %>
       </div>
     <% else %>
-      <%= pb_rails("nav/item", props: { text: pb_kit_title(link), link: kit_show_path(link), active: active }) %>
+      <%= pb_rails("nav/item", props: {
+        text: pb_kit_title(link),
+        link: kit_link(@type, link),
+        active: kit_active(@kit, link)
+      }) %>
     <% end %>
   <% end %>
 <% end %>

data/app/views/playbook/pages/kit_category_show.html.erb

@@ -0,0 +1,14 @@
+<div class="pb--kits">
+  <%= pb_rails("title", props: { text: pb_kit_title(@category), tag: "h1", size: 1 }) %>
+  <br>
+  <div class="pb--kit-type-nav">
+    <%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
+      <%= pb_rails("nav/item", props: { text: "Rails", link: kit_category_show_path(@category, type: 'rails'), active: @type == 'rails' }) %>
+      <%= pb_rails("nav/item", props: { text: "React", link: kit_category_show_path(@category, type: 'react'), active: @type == 'react' }) %>
+    <% end %>
+    <%= pb_rails("section_separator") %>
+  </div>
+  <br>
+  <br>
+  <%= pb_category_kits(category_kits: @category_kits, type: @type) %>
+</div>

data/app/views/playbook/pages/kit_show.html.erb

@@ -0,0 +1,33 @@
+<div class="pb--kit-show #{@kit}-kit">
+  <%= pb_rails("title", props: { text: pb_kit_title(@kit), tag: "h1", size: 1 }) %>
+  <div class="markdown">
+    <%= markdown(get_kit_description(@kit)) %>
+  </div>
+</div>
+<div>
+  <div class="pb--kit-type-nav">
+    <%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
+      <% if has_kit_type?(@kit, "rails") %>
+        <%= pb_rails("nav/item", props: { text: "Rails", link: kit_show_rails_path(@kit), active: action_name == 'kit_show_rails' }) %>
+      <% end %>
+      <% if has_kit_type?(@kit, "react") %>
+        <%= pb_rails("nav/item", props: { text: "React", link: kit_show_reacts_path(@kit), active: action_name == 'kit_show_react' }) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("section_separator") %>
+  </div>
+  <% if (action_name == "kit_show_rails") %>
+    <%= pb_kit(kit: @kit) %>
+    <div class="markdown">
+      <br>
+      <%= markdown(get_kit_footer(@kit)) %>
+    </div>
+    <%= pb_kit_api(@kit) %>
+  <% else %>
+    <%= pb_kit(kit: @kit, type: "react") %>
+    <div class="markdown">
+      <br>
+      <%= markdown(get_kit_footer(@kit)) %>
+    </div>
+  <% end %>
+</div>

data/app/views/playbook/pages/kits.html.erb

@@ -0,0 +1,12 @@
+<div class="pb--kits">
+  <%= pb_rails("title", props: { text: "Kits", tag: "h1", size: 1 }) %>
+  <br>
+  <%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Rails", link: kits_path('', type: 'rails'), active: @type == 'rails' }) %>
+    <%= pb_rails("nav/item", props: { text: "React", link: kits_path('', type: 'react'), active: @type == 'react' }) %>
+  <% end %>
+  <%= pb_rails("section_separator") %>
+  <br>
+  <br>
+  <%= pb_kits(type: @type) %>
+</div>