playbook_ui 7.0.1.pre.alpha8 → 7.0.1.pre.alpha14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce2015637d8e360f7684ad36c3d89e26d47c800eb36b5acb942fa41149bd50b4
-  data.tar.gz: 34b2b47b08eeeae4ac4233c5d0ffc9222b21d62e179e02c702346eec3332364a
+  metadata.gz: 16ea9d4af0ed12b03e2eca2770ae969f3fe3a80eac71e32ec2c718dce7347c7c
+  data.tar.gz: 0afbc57b75a606da56ce827592fc8bd3ac54f34f0040c2cf0c31d5238422b24c
 SHA512:
-  metadata.gz: ffd81c2753c14a07f8dfe0bb01c087ec651fc66629dc1fd5c8e474e162ef360335f75e974ab0d5068828c835898d4dd616bf7027f5833001b77c7511dd12bff1
-  data.tar.gz: df40336ca2e403f44796c9b91e37f1e0b0f9e5ca836d58cce5206cc03ab2f9cb9cfbecc99073483cb8d8ea95dd6c44d61b0c6efd52cac46db9cc31e63873d8e0
+  metadata.gz: c19ec8adfcfd42c65d5fc2987e715076dce6f3d9765b9b00e2e860414e8c471ecf38e4856caefb7363906cfaa94bdef22c4d64bef489093d1f601076fbf0d977
+  data.tar.gz: 21f2f4a836a8753d1dd9bb836e0867abedb74d098306d577d255fd87561488a896190ab343f8a978e5dfc48fdc6c1f8590799a5f2448e546975a739235eff9df

data/README.md

@@ -9,8 +9,7 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 
 ## Getting started
 
-1. Run `make install`
-1. Run `make start`
+1. Run `make it`
 1. Install overcommit hooks `bin/overcommit`
 1. open [http://localhost:8089](http://localhost:8089)
 
@@ -35,10 +34,9 @@ To run the tests, do `bin/test`. To launch a shell in the container run `make sh
 
 See [docs/upgrade-guide](./docs/upgrade-guide)
 
-### Nitro & Releases
+### Releases
 
-* [Integrating Playbook Kits into Nitro Components](https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components)
-* [Creating Releases](https://github.com/powerhome/playbook/wiki/Releasing-a-New-Version)
+* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
 
 ### Development Environment
 
@@ -63,4 +61,4 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
 5.  When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
 6.  Inside of your Playbook repository, run `yarn unlink`. 
 
-Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.
+Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.

data/app/controllers/playbook/application_controller.rb

@@ -3,7 +3,7 @@
 module Playbook
   class ApplicationController < ActionController::Base
     protect_from_forgery with: :exception
-
+ 
     helper Webpacker::Helper
     helper Playbook::PbKitHelper
     helper Playbook::PbDocHelper
@@ -11,5 +11,5 @@ module Playbook
     append_view_path Playbook::Engine.root + "app/pb_kits"
   end
 
-  ENV["dark_mode"] = "false"
+  
 end

data/app/controllers/playbook/pages_controller.rb

@@ -8,14 +8,23 @@ module Playbook
     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]
+    before_action :set_playbook
+    
+    def set_playbook
+      @playbook = true
+    end  
 
     def enable_dark_mode
-      ENV["dark_mode"] = "true"
+      cookies[:dark_mode] = {
+        value: "true"
+      }
       redirect_back(fallback_location: root_path)
     end
 
     def disable_dark_mode
-      ENV["dark_mode"] = "false"
+       cookies[:dark_mode] = {
+        value: "false"
+      }
       redirect_back(fallback_location: root_path)
     end
 

data/app/helpers/playbook/application_helper.rb

@@ -15,7 +15,7 @@ module Playbook
     end
 
     def dark_mode
-      if ENV["dark_mode"] == "true"
+      if cookies[:dark_mode] == "true"
         true
       else
         false
@@ -23,9 +23,9 @@ module Playbook
     end
 
     def dark_mode_props(props)
-      if ENV["dark_mode"] == "true"
+      if cookies[:dark_mode] == "true"
         props.merge(dark: dark_mode)
-      elsif ENV["dark_mode"] == "false"
+      elsif cookies[:dark_mode] == "false"
         props.merge(dark: dark_mode)
       else
         props

data/app/helpers/playbook/pb_doc_helper.rb

@@ -45,7 +45,6 @@ module Playbook
     end
 
     def pb_kit(kit: "", type: "rails", show_code: true)
-      # @dark = ENV["dark_mode"]
       @type = type
       @kit_examples = get_kit_examples(kit, type)
       @show_code = show_code

data/app/helpers/playbook/pb_kit_helper.rb

@@ -22,23 +22,21 @@ module Playbook
 
   private
     def rails_props(props)
-      if ENV["dark_mode"].nil?
+      if @playbook.nil?
         props
       else
-        dark_mode_props
+        dark_mode_props(props)
       end
     end  
 
     def react_props
-      if ENV["dark_mode"].nil?
+      if @playbook.nil?
         false
       else
         dark_mode
       end
     end 
 
-    
-
     def is_subkit?(kit)
       kit.match(%r{[/\\]})
     end

data/app/pb_kits/playbook/_playbook.scss

@@ -15,6 +15,7 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
+@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
@@ -81,3 +82,4 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
+

data/app/pb_kits/playbook/config/_kit_ui.html.erb

@@ -19,7 +19,7 @@
 </div>
 
   <% if @show_code%>
-    <div class="markdown pb--kit-example-markdown <%=ENV["dark_mode"] == "true" ? "dark" : "" %>">
+    <div class="markdown pb--kit-example-markdown <%= cookies[:dark_mode] == "true" ? "dark" : "" %>">
       <%= markdown(get_per_sample_descriptions(@kit_examples[:kit], key)) %>
     </div>
     <div class="pb--codeControls">

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

@@ -7,6 +7,7 @@ samples:
 kits:
   - avatar
   - avatar_action_button
+  - background
   - buttons:
     - button
     - button_toolbar
@@ -20,11 +21,11 @@ kits:
     - gauge
     - legend
     - line_graph
-
   - filter
   - fixed_confirmation_toast
   - flex
   - forms:
+    - date_picker
     - file_upload
     - form
     - form_pill

data/app/pb_kits/playbook/index.js

@@ -1,6 +1,7 @@
 // React Component JSX Imports from the React Kits
 export Avatar from './pb_avatar/_avatar.jsx'
 export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
+export Background from 'pb_background/_background.jsx'
 export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'
@@ -9,11 +10,13 @@ export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
 export Caption from './pb_caption/_caption.jsx'
 export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
+export CircleChart from './pb_circle_chart/_circle_chart.jsx'
 export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
 export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
+export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -79,6 +82,7 @@ export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
+export Typeahead from './pb_typeahead/_typeahead.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
 export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.jsx'
@@ -91,6 +95,7 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
+export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

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

@@ -15,6 +15,7 @@ import WebpackerReact from 'webpacker-react'
 import '../pb_form/pb_form_validation'
 import * as Avatar from 'pb_avatar/docs'
 import * as AvatarActionButton from 'pb_avatar_action_button/docs'
+import * as Background from 'pb_background/docs'
 import * as Badge from 'pb_badge/docs'
 import * as BarGraph from 'pb_bar_graph/docs'
 import * as Body from 'pb_body/docs'
@@ -23,11 +24,13 @@ import * as ButtonToolbar from 'pb_button_toolbar/docs'
 import * as Caption from 'pb_caption/docs'
 import * as Card from 'pb_card/docs'
 import * as Checkbox from 'pb_checkbox/docs'
+import * as CircleChart from 'pb_circle_chart/docs'
 import * as CircleIconButton from 'pb_circle_icon_button/docs'
 import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
+import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -87,6 +90,7 @@ import * as TimeRangeInline from 'pb_time_range_inline/docs'
 import * as Title from 'pb_title/docs'
 import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
+import * as Typeahead from 'pb_typeahead/docs'
 import * as Toggle from 'pb_toggle/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
@@ -95,6 +99,7 @@ import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 WebpackerReact.setup({
   ...Avatar,
   ...AvatarActionButton,
+  ...Background,
   ...Badge,
   ...BarGraph,
   ...Body,
@@ -103,11 +108,13 @@ WebpackerReact.setup({
   ...Caption,
   ...Card,
   ...Checkbox,
+  ...CircleChart,
   ...CircleIconButton,
   ...Contact,
   ...Currency,
   ...DashboardValue,
   ...Date,
+  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,
@@ -167,9 +174,9 @@ WebpackerReact.setup({
   ...Title,
   ...TitleCount,
   ...TitleDetail,
+  ...Typeahead,
   ...Toggle,
   ...User,
   ...UserBadge,
   ...WeekdayStacked,
 })
-

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss

@@ -36,9 +36,9 @@
   }
 
   .pb--kit-example, .pb--kit-example-markdown {
-    &.dark{
+    &.dark {
       color: $text_dk_light;
-      a{
+      a {
         color: $teal;
       }
     }
@@ -47,6 +47,27 @@
 
   .pb--kit-example {
     position: relative;
+
+    // &::after {
+    //   content: '';
+    //   width: 100%;
+    //   height: 4px;
+    //   background: $border-light;
+    //   position: absolute;
+    //   top: 0;
+    //   left: 0;
+    // }
+    // &.dark{
+    //   &::after {
+    //     display: none;
+    //   }
+    // }
+
+    code {
+      background-color: rgba($text_lt_lighter, 0.35);
+      border-radius: 5px;
+      padding: 2px;
+    }
   }
 
   .pb--codeControls {
@@ -101,18 +122,12 @@
     display: none;
     overflow-x: auto;
     border-radius: 0 0 6px 6px;
+    background:tint($bg_dark,10);
   }
 
   &.dark_ui {
     background: none;
 
-    .pb--kit-example {
-      color: $white;
-
-      &::after {
-        background: $border-dark;
-      }
-    }
     .pb--codeCopy {
       border-color: $border-dark;
     }
@@ -128,6 +143,6 @@
   }
 }
 
-pre.highlight{
-  padding:$space_xl;
+pre.highlight {
+  padding: $space_xl;
 }

data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss

@@ -81,7 +81,7 @@
   }
   &.dark {
     color: $text_dk_light ;
-    h1,h2,h3,h4,h5,h6{
+    h1,h2,h3,h4,h5,h6 {
      color: $text_dk_light; 
     }
   }

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

@@ -30,7 +30,11 @@ const Avatar = (props: AvatarProps) => {
   const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null, dark = false } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_avatar_kit', size), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_avatar_kit', size),
+    globalProps(props),
+    className
+  )
 
   const initials = name && firstTwoInitials(name)
   dataProps['data-initials'] = initials

data/app/pb_kits/playbook/pb_background/_background.html.erb

@@ -0,0 +1,14 @@
+<%= content_tag(object.tag,
+    aria: object.aria,
+    data: object.data,
+    id: object.id) do %>
+    <% if object.image_url.present? %>
+      <div class="<%= object.classname %>" style="background-image: url(<%= object.image_url %>); background-size: cover">
+        <%= capture(&object.children) %>
+      </div>
+    <% else %>
+      <div class="<%= object.classname %>">
+        <%= capture(&object.children) %>
+      </div>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_background/_background.jsx

@@ -0,0 +1,64 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+
+type BackgroundProps = {
+  aria?: object,
+  backgroundColor?: 'gradient' | 'dark' | 'light' | 'white',
+  children?: array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  data?: object,
+  id?: string,
+  imageUrl?: string,
+  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+}
+
+const Background = (props: BackgroundProps) => {
+  const {
+    aria = {},
+    backgroundColor = 'light',
+    children,
+    className,
+    data = {},
+    id,
+    imageUrl = '',
+    padding = 'md',
+    tag = 'div',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_background_kit'), className, globalProps(props, { padding }))
+  const Tag = `${tag}`
+  const backgroundStyle = {
+    backgroundImage: `url(${imageUrl})`,
+    backgroundSize: 'cover',
+  }
+
+  return (
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        id={id}
+    >
+      <If condition={imageUrl}>
+        <div
+            className={classes + 'lazyload blur_up'}
+            style={backgroundStyle}
+        >
+          { children }
+        </div>
+        <Else />
+        <div className={classes + `bg_${backgroundColor}`}>
+          { children }
+        </div>
+      </If>
+    </Tag>
+  )
+}
+
+export default Background