playbook_ui 4.8.2 → 4.9.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f41335e55a92455ba28930fa6ed89497e3b54fb3fed16c22fb16f49b55f1c45
-  data.tar.gz: 6ff3cf889a066d1fc7f030206b7e66cee9d5b6c8888361b4656ebdf9356836cc
+  metadata.gz: 4bf167d5819d52fd311f42011552c99f5751162188c78d6e5b0323d31fe2b8b3
+  data.tar.gz: 8f3f6b3c81345d2eac3f089996e8c2d47eff1501dd51bf2b1f99c0efe7d5a2c1
 SHA512:
-  metadata.gz: a787d0ea25cfcf3ec2ae01ab16cba660b1e267d4ce69eea2f34f3d1ba8334c0d7dade17d5a81f3d520c694965582558d1e617274962be771f7c78dbdf1447abc
-  data.tar.gz: 530eb8478cd47f7ed0572617b2831bbc57e6b2c5cc9c7a4b885f3505fd6a8785ff95f7880ec83dd5f462ddc5141de8ab2d5d432717502f60462a037b8bfc3772
+  metadata.gz: 925331069d01cf6923aff7df667e20a6f58d87f556d95ba7ec5eaff283c9f76dda103c535c0cc837828b940ef2f8fc57ca7c622e606a257bf7cd2a53d0ee228a
+  data.tar.gz: 6cff5497adc01543477c14687c409d132957a8f27f2ec5f87214eb83cc4547977da2fd39094960019e96bfb12a03147d1af8536237ac39a5a940c0d719efb395

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_rails_kit_exists, only: %i[kit_show_rails]
     before_action :set_category, only: %i[kit_category_show_rails kit_category_show_react]
 
     def home; end
@@ -64,5 +65,12 @@ module Playbook
         redirect_to root_path, flash: { error: "That kit does not exist" }
       end
     end
+
+    def ensure_rails_kit_exists
+      # TODO: unsure why we cannot simply use the helpers that are included in ApplicationController - fix this
+      erbfiles = File.join("**", "*.erb")
+      kit_files = Dir.glob(erbfiles, base: "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit}/docs").present?
+      redirect_to action: "kit_show_react" unless kit_files.present?
+    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,6 +25,10 @@ module Playbook
       end
     end
 
+    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)

data/app/pb_kits/playbook/_playbook.scss

@@ -65,4 +65,5 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
+@import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';

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

@@ -17,6 +17,7 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - file_upload
     - form
     - form_pill
     - radio
@@ -74,3 +75,4 @@ kits:
     - title_detail
   - 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'
@@ -99,6 +100,7 @@ WebpackerReact.setup({
   ...DateStacked,
   ...DateYearStacked,
   ...DistributionBar,
+  ...FileUpload,
   ...Filter,
   ...FixedConfirmationToast,
   ...Flex,

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -60,6 +60,9 @@ $avatar-sizes: (
           top: 0;
           left: 0;
           z-index: 1;
+          border-radius: $border-rad-mega;
+          object-fit: cover;
+          display: block;
         }
       }
       [class^=pb_online_status] {

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

@@ -0,0 +1,60 @@
+/* @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 = {
+  acceptedFiles?: FileList,
+  className?: String,
+  onFilesAccepted: Callback,
+}
+
+const FileUpload = ({
+  acceptedFiles = [],
+  className,
+  onFilesAccepted = noop,
+}: FileUploadProps) => {
+  const onDrop = useCallback((files) => {
+    onFilesAccepted(files)
+  })
+
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+  } = useDropzone({ 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/_file_upload_default.jsx

@@ -0,0 +1,34 @@
+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
+          acceptedFiles={filesToUpload}
+          onFilesAccepted={handleOnFilesAccepted}
+      />
+    </div>
+  )
+}
+
+export default FileUploadDefault

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

@@ -0,0 +1,7 @@
+examples:
+
+  rails:
+  
+  react:
+  - file_upload_default: Default List of Files to Upload
+  

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

@@ -0,0 +1 @@
+export { default as FileUploadDefault } from './_file_upload_default.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_filter/docs/example.yml

@@ -6,5 +6,3 @@ examples:
   - filter_no_background: No Background
   
   react:
-  - filter_default: Default
-  

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

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

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_label_value/_label_value.jsx

@@ -1,21 +1,38 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { Body, Caption } from '../'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
+type LabelValueProps = {
+  className?: String,
+  label: String,
+  value: String,
+  dark?: Boolean
 }
 
-class LabelValue extends React.Component {
-  render() {
-    return (
-      <div className="pb_label_value">
-        <span>{'LABEL VALUE CONTENT'}</span>
-      </div>
-    )
-  }
-}
+const LabelValue = ({
+  className,
+  label,
+  value,
+  dark = false,
+}: LabelValueProps) => {
+  const themeStyle = dark === true ? '_dark' : ''
+  const css = classnames([
+    'pb_label_value_kit' + themeStyle,
+    className,
+  ])
 
-LabelValue.propTypes = propTypes
+  return (
+    <div className={css}>
+      <Caption
+          text={label}
+      />
+      <Body
+          text={value}
+      />
+    </div>
+  )
+}
 
 export default LabelValue

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -6,4 +6,12 @@
   [class^=pb_caption_kit]  {
     margin-bottom: $space-xs/1.5;
   }
+  &[class*=_dark]  {
+    [class^=pb_caption_kit] {
+      color: $text_dk_light;
+    }
+    [class^=pb_body_kit] {
+      color: $text_dk_default;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_dark.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("label_value", props: {
+  label: "Role",
+  value: "Administrator, Moderator",
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("label_value", props: {
+  label: "Email",
+  value: "anna.black@powerhrg.com",
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("label_value", props: {
+  label: "Bio",
+  value: "Proin pulvinar feugiat massa in luctus. Donec urna nulla,
+    elementum sit amet tincidunt nec, mattis nec urna. Cras viverra
+    lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae
+    orci vehicula condimentum.",
+  dark: true
+}) %>

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_dark.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { LabelValue } from '../../'
+
+const LabelValueDark = () => {
+  return (
+    <div>
+      <LabelValue
+          dark
+          label="Role"
+          value="Administrator, Moderator"
+      />
+
+      <br />
+
+      <LabelValue
+          dark
+          label="Email"
+          value="anna.black@powerhrg.com"
+      />
+
+      <br />
+
+      <LabelValue
+          dark
+          label="Bio"
+          value="Proin pulvinar feugiat massa in luctus. Donec urna nulla,
+            elementum sit amet tincidunt nec, mattis nec urna. Cras viverra
+            lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae
+            orci vehicula condimentum"
+      />
+    </div>
+  )
+}
+
+export default LabelValueDark

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx

@@ -1,8 +1,31 @@
 import React from 'react'
+import { LabelValue } from '../../'
 
 const LabelValueDefault = () => {
   return (
-    <h1>{'Coming Soon...'}</h1>
+    <div>
+      <LabelValue
+          label="Role"
+          value="Administrator, Moderator"
+      />
+
+      <br />
+
+      <LabelValue
+          label="Email"
+          value="anna.black@powerhrg.com"
+      />
+
+      <br />
+
+      <LabelValue
+          label="Bio"
+          value="Proin pulvinar feugiat massa in luctus. Donec urna nulla,
+            elementum sit amet tincidunt nec, mattis nec urna. Cras viverra
+            lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae
+            orci vehicula condimentum"
+      />
+    </div>
   )
 }
 

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

@@ -2,8 +2,9 @@ examples:
   
   rails:
   - label_value_default: Default
+  - label_value_dark: Dark
   
   
   react:
   - label_value_default: Default
-  
+  - label_value_dark: Dark

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

@@ -1 +1,2 @@
 export { default as LabelValueDefault } from './_label_value_default.jsx'
+export { default as LabelValueDark } from './_label_value_dark.jsx'

data/app/pb_kits/playbook/pb_label_value/label_value.rb

@@ -9,9 +9,16 @@ module Playbook
 
       prop :label, required: true
       prop :value, required: true
+      prop :dark, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_label_value_kit")
+        generate_classname("pb_label_value_kit", dark_class)
+      end
+
+    private
+
+      def dark_class
+        dark ? "dark" : nil
       end
     end
   end

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_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_table/_table.jsx

@@ -12,6 +12,7 @@ type TableProps = {
   // @deprecated disable_hover since version 3.2.0, please use `disableHover`
   disable_hover: boolean, // eslint-disable-line camelcase
   disableHover: boolean,
+  responsive: "collapse" | "scroll" | "none",
   // @deprecated single_line since version 3.2.0, please use `singleLine`
   single_line: boolean, // eslint-disable-line camelcase
   singleLine: boolean,
@@ -26,6 +27,7 @@ const Table = ({
   dataTable = false,
   disable_hover = false, // eslint-disable-line camelcase
   disableHover = false,
+  responsive = 'collapse',
   single_line = false, // eslint-disable-line camelcase
   singleLine = false,
   size = 'sm',
@@ -33,7 +35,7 @@ const Table = ({
   disableHover = disableHover || disable_hover // eslint-disable-line camelcase
   singleLine = singleLine || single_line // eslint-disable-line camelcase
 
-  const classes = classnames(className, 'pb_table', `table-${size}`, {
+  const classes = classnames(className, 'pb_table', `table-${size}`, `table-responsive-${responsive}`, {
     'table-card': container,
     'table-dark': dark,
     'data_table': dataTable,

data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb

@@ -0,0 +1,47 @@
+<%= pb_rails("title", props: { size: 4, text: "Default" }) %>
+
+<%= pb_rails("table", props: { responsive: "collapse" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>
+
+<br>
+
+<%= pb_rails("title", props: { size: 4, text: "Responsive Off" }) %>
+
+<%= pb_rails("table", props: { responsive: "none" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Table, Title } from '../../'
+
+const TableResponsiveTable = () => {
+  return (
+    <div>
+      <Title
+          size={4}
+          text="Default"
+      />
+      <Table>
+        <thead>
+          <tr>
+            <th>{'Column 1'}</th>
+            <th>{'Column 2'}</th>
+            <th>{'Column 3'}</th>
+            <th>{'Column 4'}</th>
+            <th>{'Column 5'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </tr>
+        </tbody>
+      </Table>
+      <br />
+      <br />
+      <Title
+          size={4}
+          text="Default"
+      />
+      <Table responsive="none">
+        <thead>
+          <tr>
+            <th>{'Column 1'}</th>
+            <th>{'Column 2'}</th>
+            <th>{'Column 3'}</th>
+            <th>{'Column 4'}</th>
+            <th>{'Column 5'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>{'Value 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  )
+}
+
+export default TableResponsiveTable

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

@@ -8,6 +8,7 @@ examples:
     - table_multiline: Multi-line
     - table_single_line: Force Single Line
     - table_data_table: Data Table
+    - table_responsive_table: Responsive Tables
     - table_dark: Table Dark
     - table_container_dark: Table Container Off Dark
   react:
@@ -19,5 +20,6 @@ examples:
     - table_multiline: Multi-line
     - table_single_line: Force Single Line
     - table_data_table: Data Table
+    - table_responsive_table: Responsive Tables
     - table_dark: Table Dark
     - table_container_dark: Table Container Off Dark

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

@@ -3,6 +3,7 @@ export { default as TableMd } from './_table_md.jsx'
 export { default as TableLg } from './_table_lg.jsx'
 export { default as TableContainer } from './_table_container.jsx'
 export { default as TableDataTable } from './_table_data_table.jsx'
+export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
 export { default as TableDark } from './_table_dark.jsx'
 export { default as TableContainerDark } from './_table_container_dark.jsx'
 export { default as TableDisableHover } from './_table_disable_hover.jsx'

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -3,9 +3,9 @@
 
 @media only screen and (max-width: $screen-xs-max) {
   [class^=pb_table] {
-    &.table-sm,
-    &.table-md,
-    &.table-lg {
+    &.table-sm.table-responsive-collapse,
+    &.table-md.table-responsive-collapse,
+    &.table-lg.table-responsive-collapse {
       width: 100%;
       background: none !important;
 
@@ -31,7 +31,6 @@
             border-bottom-width: 0 !important;
             border-color: $border_light !important;
             min-height: 2.2em;
-            // padding-left: 34%;
             position: relative;
             text-align:left;
             white-space: normal;
@@ -99,16 +98,16 @@
           }
         }
       }
-    }
-    // reset the first and last to normalize
-    @each $name, $value in $cell-pad-list {
-      &.#{$name} {
-        tbody {
-          tr {
-            td {
-              &:first-child,
-              &:last-child {
-                padding: $value $cell-gutter !important;
+      // reset the first and last to normalize
+      @each $name, $value in $cell-pad-list {
+        &.#{$name} {
+          tbody {
+            tr {
+              td {
+                &:first-child,
+                &:last-child {
+                  padding: $value $cell-gutter !important;
+                }
               }
             }
           }

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/tokens/_colors.scss

@@ -178,14 +178,14 @@ $windows:             $royal;
 $siding:              $yellow;
 $doors:               $red;
 $solar:               $green;
-$roofs:               $teal;
+$roofing:             $teal;
 $gutters:             $purple;
 $product_colors: (
   windows:            $windows,
   siding:             $siding,
   doors:              $doors,
   solar:              $solar,
-  roofs:              $roofs,
+  roofing:            $roofing,
   gutters:            $gutters
 );
 

data/app/views/layouts/playbook/application.html.slim

@@ -5,6 +5,7 @@ html
     = csrf_meta_tags
     = csp_meta_tag
     = stylesheet_pack_tag 'main'
+    meta content="user-scalable=0, initial-scale=1.0, minimum-scale=1" name="viewport"
 
   body
     = render 'layouts/playbook/nav'

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

@@ -84,5 +84,5 @@ br
         {name: "Siding", variable: "siding"},
         {name: "Doors", variable: "doors"},
         {name: "Solar", variable: "solar"},
-        {name: "Roofs", variable: "roofs"},
+        {name: "Roofing", variable: "roofing"},
         {name: "Gutters", variable: "gutters"}]}

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "4.8.2"
+  VERSION = "4.9.0-alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 4.8.2
+  version: 4.9.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-03-24 00:00:00.000000000 Z
+date: 2020-04-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -175,14 +175,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 4.0.7
+        version: 4.2.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 4.0.7
+        version: 4.2.2
 - !ruby/object:Gem::Dependency
   name: webpacker-react
   requirement: !ruby/object:Gem::Requirement
@@ -757,11 +757,16 @@ 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/_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
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
-- app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
 - app/pb_kits/playbook/pb_filter/docs/example.yml
@@ -952,7 +957,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
@@ -962,6 +966,8 @@ files:
 - app/pb_kits/playbook/pb_label_value/_label_value.scss
 - app/pb_kits/playbook/pb_label_value/docs/_description.md
 - app/pb_kits/playbook/pb_label_value/docs/_footer.md
+- app/pb_kits/playbook/pb_label_value/docs/_label_value_dark.html.erb
+- app/pb_kits/playbook/pb_label_value/docs/_label_value_dark.jsx
 - app/pb_kits/playbook/pb_label_value/docs/_label_value_default.html.erb
 - app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx
 - app/pb_kits/playbook/pb_label_value/docs/_label_value_default.md
@@ -1116,7 +1122,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
@@ -1294,7 +1299,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
@@ -1305,7 +1309,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
@@ -1354,6 +1357,8 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_md.md
 - app/pb_kits/playbook/pb_table/docs/_table_multiline.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_multiline.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_single_line.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_single_line.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sm.html.erb
@@ -1423,7 +1428,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
@@ -1437,7 +1441,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
@@ -1471,7 +1474,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
@@ -1638,9 +1640,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.7.3

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

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

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