playbook_ui 4.11.0 → 4.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5724cfc73bfc520ae0f5bbb89002649cc2c28eb1161692f1e3b45de3bc417abc
-  data.tar.gz: d93b64cd6811f91f8eff71df0acdbed3d32da9e756e78003ce4f578f6822d1d5
+  metadata.gz: 23fd2a60198feffc9e13f9a1d57e3213d42a5dae6b6a62b32a751bbab4cf26b0
+  data.tar.gz: 9cbbf0ef694ee540ecc9bc97ef295b1498a41e43eca2648f5a371c99579d189e
 SHA512:
-  metadata.gz: 978b10162d35e872ca37c0c4572668c3286908fc03b0929a7604ea08a457eb268de8401213192aa96158e4463a1bab032fdaee3f7dbf786b831fcdc846670e7f
-  data.tar.gz: 61b4a2ee3e61c9f223fccb8623272fd74f5864b8facafb04672c50a4b8b9f17ba31c6db702852c2527e90f07129af62d95c0f34c4530059dff3c2b5d3bc1b859
+  metadata.gz: '079d706a4214c56dd4814f22983c54beec8a2389914c1b29fbb885377e7d2edcd3d05ac0ef692c1bd18df5219743c0ff4fee0b8183cd73727cbc6c06fc138af5'
+  data.tar.gz: ad397e8e2528f13331a0f61c4c694ea9c5f33acdb2eee917d51c8510a912eecc7e37b28532c532e1725009188c91c248c3d6818a86126c7fc7fa304dff5952ec

data/app/controllers/playbook/pages_controller.rb

@@ -6,6 +6,7 @@ require "yaml"
 module Playbook
   class PagesController < ApplicationController
     before_action :set_kit, only: %i[kit_show_rails kit_show_react]
+    before_action :ensure_kit_type_exists, only: %i[kit_show_rails kit_show_react]
     before_action :set_category, only: %i[kit_category_show_rails kit_category_show_react]
 
     def home; end
@@ -64,5 +65,15 @@ module Playbook
         redirect_to root_path, flash: { error: "That kit does not exist" }
       end
     end
+
+    def ensure_kit_type_exists
+      # TODO: unsure why we cannot simply use the helpers that are included in ApplicationController - fix this
+      is_rails_kit = action_name == "kit_show_rails"
+      files = is_rails_kit ? File.join("**", "*.erb") : File.join("**", "*.jsx")
+      kit_files = Dir.glob(files, base: "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit}/docs").present?
+      if !kit_files.present?
+        redirect_to action: is_rails_kit ? "kit_show_react" : "kit_show_rails"
+      end
+    end
   end
 end

data/app/helpers/playbook/pb_doc_helper.rb

@@ -9,9 +9,11 @@ module Playbook
     def has_kit_type?(kit, type)
       type ||= "rails"
       if type == "rails"
-        Dir["playbook/pb_#{kit}/*.html.erb"].empty?
+        erbfiles = File.join("**", "*.erb")
+        Dir.glob(erbfiles, base: "#{kit_path(kit)}/docs").present?
       elsif type == "react"
-        Dir["playbook/pb_#{kit}/*.jsx"].empty?
+        jsxfiles = File.join("**", "*.jsx")
+        Dir.glob(jsxfiles, base: "#{kit_path(kit)}/docs").present?
       end
     end
 
@@ -23,8 +25,12 @@ module Playbook
       end
     end
 
-    def get_kit_description(_kit)
-      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit}/docs/_description.md"
+    def kit_path(kit)
+      "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}"
+    end
+
+    def get_kit_description(kit)
+      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_description.md"
       read_file(filename)
     end
 

data/app/pb_kits/playbook/_playbook.scss

@@ -17,6 +17,7 @@
 @import 'pb_date_stacked/date_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
 @import 'pb_distribution_bar/distribution_bar';
+@import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
 @import 'pb_form/form';

data/app/pb_kits/playbook/data/menu.yml

@@ -17,6 +17,7 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - file_upload
     - form
     - form_pill
     - radio
@@ -77,3 +78,4 @@ kits:
     - weekday_stacked
   - user
   - user_badge
+

data/app/pb_kits/playbook/index.js

@@ -17,6 +17,7 @@ export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
 export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
 export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
+export FileUpload from './pb_file_upload/_file_upload.jsx'
 export Filter from './pb_filter/_filter.jsx'
 export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
 export Flex from './pb_flex/_flex.jsx'

data/app/pb_kits/playbook/packs/examples.js

@@ -31,6 +31,7 @@ import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
 import * as DateYearStacked from 'pb_date_year_stacked/docs'
 import * as DistributionBar from 'pb_distribution_bar/docs'
+import * as FileUpload from 'pb_file_upload/docs'
 import * as Filter from 'pb_filter/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
 import * as Flex from 'pb_flex/docs'
@@ -102,6 +103,7 @@ WebpackerReact.setup({
   ...DateStacked,
   ...DateYearStacked,
   ...DistributionBar,
+  ...FileUpload,
   ...Filter,
   ...FixedConfirmationToast,
   ...Flex,

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -0,0 +1,63 @@
+/* @flow */
+
+import React, { useCallback } from 'react'
+import { useDropzone } from 'react-dropzone'
+
+import {
+  buildCss,
+  noop,
+} from '../utilities/props'
+
+import type { Callback } from '../types.js'
+
+import {
+  Body,
+  Card,
+} from '..'
+
+type FileUploadProps = {
+  accept?: Array<String>,
+  className?: String,
+  onFilesAccepted: Callback,
+}
+
+const FileUpload = ({
+  accept = ['image/png', 'image/jpg', 'image/jpeg', 'image/svg+xml'],
+  className,
+  onFilesAccepted = noop,
+}: FileUploadProps) => {
+  const onDrop = useCallback((files) => {
+    onFilesAccepted(files)
+  })
+
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+  } = useDropzone({
+    accept,
+    onDrop,
+  })
+
+  return (
+    <div
+        className={buildCss('pb_file_upload_kit', className)}
+        {...getRootProps()}
+    >
+      <Card>
+        <input {...getInputProps()} />
+        <Body
+            color="light"
+        >
+          <If condition={isDragActive}>
+            <p>{'Drop the files here ...'}</p>
+            <Else />
+            <p>{'Drag & drop some files here, or click to select files'}</p>
+          </If>
+        </Body>
+      </Card>
+    </div>
+  )
+}
+
+export default FileUpload

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -0,0 +1,6 @@
+[class^='pb_file_upload_kit'] {
+  [class^='pb_card_kit'] {
+    border: 1px #ccc dashed;
+    text-align: center;
+  }
+}

data/app/pb_kits/playbook/pb_file_upload/docs/_description.md

@@ -0,0 +1,8 @@
+This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone). 
+
+### Props
+
+`accept: [String]` Use this prop to set the list of valid file types
+`onFilesAccepted: Function` The callback function, providing the list of dropped files
+
+

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -0,0 +1,36 @@
+/* @flow */
+
+import React, { useState } from 'react'
+import {
+  FileUpload,
+  List,
+  ListItem,
+} from '../..'
+
+const AcceptedFilesList = ({ files }: FileList) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}>{file.name}</ListItem>
+    ))}
+  </List>
+)
+
+const FileUploadAccept = () => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+
+  return (
+    <div>
+      <AcceptedFilesList files={filesToUpload} />
+      <FileUpload
+          accept={['image/svg+xml']}
+          onFilesAccepted={handleOnFilesAccepted}
+      />
+    </div>
+  )
+}
+
+export default FileUploadAccept

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx

@@ -0,0 +1,35 @@
+/* @flow */
+
+import React, { useState } from 'react'
+import {
+  FileUpload,
+  List,
+  ListItem,
+} from '../..'
+
+const AcceptedFilesList = ({ files }: FileList) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}>{file.name}</ListItem>
+    ))}
+  </List>
+)
+
+const FileUploadDefault = () => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+
+  return (
+    <div>
+      <AcceptedFilesList files={filesToUpload} />
+      <FileUpload
+          onFilesAccepted={handleOnFilesAccepted}
+      />
+    </div>
+  )
+}
+
+export default FileUploadDefault

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

@@ -0,0 +1,8 @@
+examples:
+
+  rails:
+  
+  react:
+  - file_upload_default: Default List of files to upload
+  - file_upload_accept: Accept only certain types of files
+  

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

@@ -0,0 +1,2 @@
+export { default as FileUploadDefault } from './_file_upload_default.jsx'
+export { default as FileUploadAccept } from './_file_upload_accept.jsx'

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbFileUpload
+    class FileUpload
+      include Playbook::Props
+
+      partial "pb_file_upload/file_upload"
+    end
+  end
+end

data/app/pb_kits/playbook/pb_kit/dateTime.js

@@ -25,6 +25,10 @@ export default class DateTime {
     return this.value.strftime('%Z')
   }
 
+  toCustomFormat(format = '%-m/%-d') {
+    return this.value.strftime(format)
+  }
+
   toYear() {
     return this.value.strftime('%Y')
   }

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

@@ -5,5 +5,3 @@ examples:
   
   
   react:
-  - label_pill_default: Default
-  

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

@@ -1 +0,0 @@
-export { default as LabelPillDefault } from './_label_pill_default.jsx'

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

@@ -3,7 +3,5 @@ examples:
   rails:
   - online_status_default: Default
   
-  
   react:
-  - online_status_default: Default
-  
+  

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

@@ -1 +0,0 @@
-export { default as OnlineStatusDefault } from './_online_status_default.jsx'

data/app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb

@@ -2,5 +2,11 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
- <span><%= pb_rails("caption", props: { text: object.text }) %></span>
+    <% if object.orientation === 'horizontal' %>
+        <span><%= pb_rails("caption", props: { text: object.text }) %></span>
+    <% end %>
+    <% if object.orientation === 'vertical' %>
+        <%= pb_rails("flex", props: { orientation: "column"}) do %>
+        <% end %>    
+    <%end%>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -1,21 +1,27 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-
 import Caption from '../pb_caption/_caption.jsx'
 
 type SectionSeparatorProps = {
   className: String,
   text: String,
+  orientation?: 'horizontal' | 'vertical',
   variant?: 'card' | 'background',
+  dark?: Boolean
 }
 
 const SectionSeparator = ({
   className,
   text,
+  orientation = 'horizontal',
   variant = 'card',
+  dark = false,
 }: SectionSeparatorProps) => {
-  const css = classnames([`pb_section_separator_kit_${variant}`, className])
+  const themeStyle = dark === true ? '_dark' : ''
+  const css = classnames([
+    `pb_section_separator_kit_${variant}_${orientation}` + themeStyle,
+    className])
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -24,7 +24,7 @@ $section_colors: (
       }
     }
   }
-
+ 
   &::after {
     content: "";
     height: 1px;
@@ -35,4 +35,54 @@ $section_colors: (
     left: 0;
     z-index: 0;
   }
+
+  &[class*=_horizontal] {
+    justify-content: center;
+  }
+  &[class*=_vertical] {
+    &::after {
+      content: "";
+      height: 100%;
+      width: 1px;
+      margin-left: $space_xs;
+      margin-right: $space_xs;
+      background: $border_light;
+      position: initial;
+      z-index: 0;
+    }
+  }
+  
+  &[class*=_dark] {
+    &::after {
+      content: "";
+      height: 1px;
+      width: 100%;
+      background: $border_dark;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      z-index: 0;
+    }
+    &[class*=_background] {
+      span {
+        display: inline-block;
+        padding: 0 $space_xs;
+        background: $bg_dark;
+        position: relative;
+        z-index: 1;
+      }
+    }
+    &[class*=_vertical] {
+      &::after {
+        content: "";
+        height: 100%;
+        width: 1px;
+        margin-left: $space_xs;
+        margin-right: $space_xs;
+        background: $border_dark;
+        position: initial;
+        z-index: 0;
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dark.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("section_separator", props: { text: "Title Separator", variant: "background", dark: true }) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dark.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { SectionSeparator } from '../../'
+
+const SectionSeparatorDark = () => {
+  return (
+    <SectionSeparator
+        dark
+        text="Title Separator"
+        variant="background"
+    />
+  )
+}
+
+export default SectionSeparatorDark

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    <% end %>
+    <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    <% end %>
+    <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Flex, FlexItem, SectionSeparator } from '../../'
+
+const SectionSeparatorVertical = () => {
+  return (
+    <Flex
+        inline="flex-container"
+        vertical="stretch"
+    >
+      <FlexItem>
+        {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
+      </FlexItem>
+      <SectionSeparator orientation="vertical" />
+      <FlexItem>
+        {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
+      </FlexItem>
+      <SectionSeparator orientation="vertical" />
+      <FlexItem>
+        {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
+      </FlexItem>
+    </Flex>
+  )
+}
+
+export default SectionSeparatorVertical

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

@@ -4,8 +4,12 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_line: Line Separator
   - section_separator_text_background: Background Variant
+  - section_separator_vertical: Vertical
+  - section_separator_dark: Dark
 
   react:
   - section_separator_text: Text Separator
   - section_separator_line: Line Separator
   - section_separator_text_background: Background Variant
+  - section_separator_vertical: Vertical
+  - section_separator_dark: Dark

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

@@ -1,3 +1,5 @@
 export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
 export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorTextBackground } from './_section_separator_text_background.jsx'
+export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
+export { default as SectionSeparatorDark } from './_section_separator_dark.jsx'

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -9,11 +9,22 @@ module Playbook
 
       prop :text
       prop :variant, type: Playbook::Props::Enum,
-                 values: %w[card background],
-                 default: "card"
+                     values: %w[card background],
+                     default: "card"
+      prop :orientation, type: Playbook::Props::Enum,
+                         values: %w[horizontal vertical],
+                         default: "horizontal"
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
 
       def classname
-        generate_classname("pb_section_separator_kit",variant)
+        generate_classname("pb_section_separator_kit", variant, orientation, dark_class)
+      end
+
+    private
+
+      def dark_class
+        dark ? "dark" : nil
       end
     end
   end

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

@@ -7,4 +7,3 @@ examples:
 
 
   react:
-  - source_default: Default

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

@@ -1 +0,0 @@
-export { default as SourceDefault } from './_source_default.jsx'

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

@@ -6,4 +6,3 @@ examples:
 
 
   react:
-  - star_rating_default: Default

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

@@ -1 +0,0 @@
-export { default as StarRatingDefault } from './_star_rating_default.jsx'

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

@@ -5,4 +5,3 @@ examples:
   - time_timestamp: Timestamp Values
 
   react:
-  - time_default: Default

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

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

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

@@ -5,5 +5,3 @@ examples:
   
   
   react:
-  - timestamp_default: Default
-  

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

@@ -1 +0,0 @@
-export { default as TimestampDefault } from './_timestamp_default.jsx'

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

@@ -5,5 +5,3 @@ examples:
   
   
   react:
-  - title_detail_default: Default
-  

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

@@ -1 +0,0 @@
-export { default as TitleDetailDefault } from './_title_detail_default.jsx'

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

@@ -17,10 +17,10 @@ import DateTime from '../pb_kit/dateTime.js'
 type WeekdayStackedProps = {
   align?: 'left' | 'center' | 'right',
   className?: String,
-  compact?: Boolean,
   dark?: Boolean,
   date: Date,
-  dayOnly?: Boolean,
+  variant?: 'day_only' | 'month_day' | 'expanded',
+  compact?: Boolean,
   id?: String,
 }
 
@@ -33,22 +33,23 @@ const getDayOfWeek = (date, compact) => {
   }
 }
 
-const getFormattedDate = (date, dayOnly) => {
+const getFormattedDate = (date, variant) => {
   const dateTime = new DateTime({ value: date })
-  if (dayOnly) {
+  if (variant === 'day_only') {
     return dateTime.toDay()
   } else {
-    return `${dateTime.toMonthNum()}/${dateTime.toDay()}`
+    const format = variant === 'expanded' ? '%b %-d' : '%-m/%-d'
+    return dateTime.toCustomFormat(format)
   }
 }
 
 const WeekdayStacked = ({
   align = 'left',
   className,
-  compact = false,
   dark = false,
   date = new Date(),
-  dayOnly = false,
+  variant = 'month_day',
+  compact = false,
 }: WeekdayStackedProps) => (
   <div
       className={classnames(buildCss('pb_weekday_stacked_kit', align), className)}
@@ -58,7 +59,7 @@ const WeekdayStacked = ({
         dark={dark}
         size={4}
         tag="span"
-        text={getFormattedDate(date, dayOnly)}
+        text={getFormattedDate(date, variant)}
     />
   </div>
 )

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

@@ -1,9 +1,3 @@
-<%= 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 %>
+<%= pb_rails("weekday_stacked", props: {variant: "expanded", compact: true}) %>
+<%= pb_rails("weekday_stacked", props: { variant: "day_only" , compact: true, align: "center"}) %>
+<%= pb_rails("weekday_stacked", props: { variant: "month_day", compact: true, align: "right" }) %>

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

@@ -1,48 +1,25 @@
 import React from 'react'
 import {
-  Flex,
-  // FlexItem,
   WeekdayStacked,
-} from '../..'
+} from '../../'
 
 const WeekdayStackedCompact = () => (
-  <Flex spacing="evenly">
+  <div>
     <WeekdayStacked
         compact
-        date={new Date('2019/11/4')}
-        dayOnly
+        variant="day_only"
     />
     <WeekdayStacked
+        align="center"
         compact
-        date={new Date('2019/11/5')}
-        dayOnly
+        variant="month_day"
     />
     <WeekdayStacked
+        align="right"
         compact
-        date={new Date('2019/11/6')}
-        dayOnly
+        variant="expanded"
     />
-    <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>
+  </div>
 )
 
 export default WeekdayStackedCompact

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

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

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import {
+  WeekdayStacked,
+} from '../../'
+
+const WeekdayStackedVariant = () => (
+  <div>
+    <WeekdayStacked
+        variant="day_only"
+    />
+    <WeekdayStacked
+        align="center"
+        variant="month_day"
+    />
+    <WeekdayStacked
+        align="right"
+        variant="expanded"
+    />
+  </div>
+)
+
+export default WeekdayStackedVariant

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

@@ -2,14 +2,14 @@ examples:
   
   rails:
   - weekday_stacked_default: Default
-  - weekday_stacked_day_only: Day Only
-  - weekday_stacked_compact: Day Only - Compact
   - weekday_stacked_dark: Dark
+  - weekday_stacked_compact: Compact
+  - weekday_stacked_variant: Variant
   
   
   react:
   - weekday_stacked_default: Default
-  - weekday_stacked_day_only: Day Only
-  - weekday_stacked_compact: Day Only - Compact
   - weekday_stacked_dark: Dark
+  - weekday_stacked_compact: Compact
+  - weekday_stacked_variant: Variant
   

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

@@ -1,4 +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'
+export { default as WeekdayStackedVariant } from './_weekday_stacked_variant.jsx'
+export { default as WeekdayStackedCompact } from './_weekday_stacked_compact.jsx'

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

@@ -13,17 +13,18 @@ module Playbook
                    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 :compact, type: Playbook::Props::Boolean,
+                     default: false
 
-      prop :day_only, type: Playbook::Props::Boolean,
-                      default: false
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[day_only expanded month_day],
+                     default: "month_day"
 
       def classname
         generate_classname("pb_weekday_stacked_kit", align)
@@ -38,15 +39,19 @@ module Playbook
       end
 
       def formatted_month_and_day
-        compact || day_only ? day : month_and_day
+        case variant
+        when "day_only" then day
+        when "expanded" then month_and_day(format: "%b %-d")
+        else month_and_day
+        end
       end
 
     private
 
-      def month_and_day
+      def month_and_day(format: "%-m/%-d")
         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}"
+          date.strftime(format)
         end
       end
 

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

@@ -176,17 +176,19 @@ $primary_action:      $primary;
 // Product colors ---------------------
 $windows:             $royal;
 $siding:              $yellow;
-$doors:               $red;
+$doors:               $teal;
 $solar:               $green;
-$roofing:             $teal;
+$roofing:             $slate;
 $gutters:             $purple;
+$insulation:          $red;
 $product_colors: (
   windows:            $windows,
   siding:             $siding,
   doors:              $doors,
   solar:              $solar,
   roofing:            $roofing,
-  gutters:            $gutters
+  gutters:            $gutters,
+  insulation:         $insulation
 );
 
 $transparent: transparent;

data/app/views/playbook/pages/utilities.html.slim

@@ -85,4 +85,5 @@ br
         {name: "Doors", variable: "doors"},
         {name: "Solar", variable: "solar"},
         {name: "Roofing", variable: "roofing"},
-        {name: "Gutters", variable: "gutters"}]}
+        {name: "Gutters", variable: "gutters"},
+        {name: "Attic Insulation", variable: "insulation"}]}

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "4.11.0"
+  VERSION = "4.12.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 4.11.0
+  version: 4.12.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-04-10 00:00:00.000000000 Z
+date: 2020-04-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -746,6 +746,14 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
 - app/pb_kits/playbook/pb_enhanced_element/element_observer.js
 - app/pb_kits/playbook/pb_enhanced_element/index.js
+- app/pb_kits/playbook/pb_file_upload/_file_upload.jsx
+- app/pb_kits/playbook/pb_file_upload/_file_upload.scss
+- app/pb_kits/playbook/pb_file_upload/docs/_description.md
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/example.yml
+- app/pb_kits/playbook/pb_file_upload/docs/index.js
+- app/pb_kits/playbook/pb_file_upload/file_upload.rb
 - app/pb_kits/playbook/pb_filter/_filter.html.erb
 - app/pb_kits/playbook/pb_filter/_filter.jsx
 - app/pb_kits/playbook/pb_filter/_filter.scss
@@ -947,7 +955,6 @@ files:
 - app/pb_kits/playbook/pb_label_pill/docs/_description.md
 - app/pb_kits/playbook/pb_label_pill/docs/_footer.md
 - app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.html.erb
-- app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx
 - app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.md
 - app/pb_kits/playbook/pb_label_pill/docs/example.yml
 - app/pb_kits/playbook/pb_label_pill/docs/index.js
@@ -1123,7 +1130,6 @@ files:
 - app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss
 - app/pb_kits/playbook/pb_online_status/docs/_description.md
 - app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb
-- app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx
 - app/pb_kits/playbook/pb_online_status/docs/example.yml
 - app/pb_kits/playbook/pb_online_status/docs/index.js
 - app/pb_kits/playbook/pb_online_status/online_status.rb
@@ -1239,12 +1245,16 @@ files:
 - app/pb_kits/playbook/pb_section_separator/_section_separator.scss
 - app/pb_kits/playbook/pb_section_separator/docs/_description.md
 - app/pb_kits/playbook/pb_section_separator/docs/_footer.md
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dark.html.erb
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dark.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.html.erb
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.html.erb
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/example.yml
 - app/pb_kits/playbook/pb_section_separator/docs/index.js
 - app/pb_kits/playbook/pb_section_separator/section_separator.rb
@@ -1301,7 +1311,6 @@ files:
 - app/pb_kits/playbook/pb_source/_source.scss
 - app/pb_kits/playbook/pb_source/docs/_description.md
 - app/pb_kits/playbook/pb_source/docs/_source_default.html.erb
-- app/pb_kits/playbook/pb_source/docs/_source_default.jsx
 - app/pb_kits/playbook/pb_source/docs/_source_noicon.html.erb
 - app/pb_kits/playbook/pb_source/docs/_source_types.html.erb
 - app/pb_kits/playbook/pb_source/docs/example.yml
@@ -1312,7 +1321,6 @@ files:
 - app/pb_kits/playbook/pb_star_rating/_star_rating.scss
 - app/pb_kits/playbook/pb_star_rating/docs/_description.md
 - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb
-- app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx
 - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb
 - app/pb_kits/playbook/pb_star_rating/docs/example.yml
 - app/pb_kits/playbook/pb_star_rating/docs/index.js
@@ -1432,7 +1440,6 @@ files:
 - app/pb_kits/playbook/pb_time/docs/_description.md
 - app/pb_kits/playbook/pb_time/docs/_footer.md
 - app/pb_kits/playbook/pb_time/docs/_time_default.html.erb
-- app/pb_kits/playbook/pb_time/docs/_time_default.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_default.md
 - app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb
 - app/pb_kits/playbook/pb_time/docs/example.yml
@@ -1456,7 +1463,6 @@ files:
 - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
 - app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/example.yml
 - app/pb_kits/playbook/pb_timestamp/docs/index.js
 - app/pb_kits/playbook/pb_timestamp/timestamp.rb
@@ -1490,7 +1496,6 @@ files:
 - app/pb_kits/playbook/pb_title_detail/docs/_description.md
 - app/pb_kits/playbook/pb_title_detail/docs/_footer.md
 - app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.html.erb
-- app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx
 - app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.md
 - app/pb_kits/playbook/pb_title_detail/docs/example.yml
 - app/pb_kits/playbook/pb_title_detail/docs/index.js
@@ -1562,10 +1567,10 @@ files:
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_dark.html.erb
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_dark.jsx
-- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_day_only.html.erb
-- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_day_only.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.html.erb
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.jsx
+- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.html.erb
+- app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_weekday_stacked/docs/index.js
 - app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const LabelPillDefault = () => {
-  return (
-    <h1>{'Coming Soon...'}</h1>
-  )
-}
-
-export default LabelPillDefault

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const OnlineStatusDefault = () => {
-  return (
-    <h1>{'Coming Soon...'}</h1>
-  )
-}
-
-export default OnlineStatusDefault

data/app/pb_kits/playbook/pb_source/docs/_source_default.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const SourceDefault = () => {
-  return (
-    <h1>{'Coming Soon...'}</h1>
-  )
-}
-
-export default SourceDefault

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const StarRatingDefault = () => {
-  return (
-    <h1>{'Coming Soon...'}</h1>
-  )
-}
-
-export default StarRatingDefault

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

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const TimeDefault = () => {
-  return (
-    <h1>{'Coming Soon...'}</h1>
-  )
-}
-
-export default TimeDefault

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

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const TimestampDefault = () => {
-  return (
-    <h1>{'Coming Soon...'}</h1>
-  )
-}
-
-export default TimestampDefault

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const TitleDetailDefault = () => {
-  return (
-    <h1>{'Coming Soon...'}</h1>
-  )
-}
-
-export default TitleDetailDefault

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

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

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

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