playbook_ui 7.0.0.pre.alpha7 → 7.0.0.pre.alpha12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ada98d5710f6ce4dfc4f8e011309b7c0f0773ce5cd1e1c4f12360d887d96f3dc
-  data.tar.gz: 9476f2792feaf28edb06ef070d68eab715205ecd6b3fe7a3ce0e83e33544d60d
+  metadata.gz: 94ac0232046d608bf8ae158596a7734d1b67f23fb91b1c64b30baede6f4ad758
+  data.tar.gz: eed40c32073db9ff048cb4c7b965dbef077058dacaff858e9a753da281fcf881
 SHA512:
-  metadata.gz: d0c8ed7c650778ab13b63cc701c2c1778635794bd670b989fe855e7eb02db5cbc02b6ebe6ce68364162c2c5f25823c4a5d7d0e1eb46a6bbaa334b518b2af7759
-  data.tar.gz: 54f414bd655b523af8f92890e73515af157ee01e7a90a8b54b3f7ead5cdacf5beffb95e01d6f9add94186edfcdd62ed70b9bd0d936d5faefbb5514ea0f381aae
+  metadata.gz: ea8f2b075e31b0bdc0cf3d9dea2b386912492c3d046095e86775e6b54e8368f3af077446962cb0cdf8ba06046ee5d7153cc354cf331f6dd8bc3308888dff529c
+  data.tar.gz: 771928c8397ce43f9f038b9d64c8e358e1380e7f41fa51770df2742ccef8aee5de38dbd9cf0ec139accf029be26d8d7db8baacda51b7efcb5fc1efaf7845537b

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

@@ -8,4 +8,6 @@ module Playbook
     helper Playbook::PbSampleHelper
     append_view_path Playbook::Engine.root + "app/pb_kits"
   end
+
+  
 end

data/app/helpers/playbook/application_helper.rb

@@ -13,5 +13,24 @@ module Playbook
     def current_webpacker_instance
       Playbook.webpacker
     end
+
+    def dark_mode
+      if cookies[:dark_mode] == "true"
+        true
+      else
+        false
+      end
+    end
+
+    def dark_mode_props(props)
+      if cookies[:dark_mode] == "true"
+        props.merge(dark: dark_mode)
+      elsif cookies[:dark_mode] == "false"
+        props.merge(dark: dark_mode)
+      else
+        props
+      end
+    end
+
   end
 end

data/app/helpers/playbook/pb_kit_helper.rb

@@ -6,21 +6,36 @@ require "webpacker/react/component"
 
 module Playbook
   module PbKitHelper
+
     def pb_rails(kit, props: {}, &block)
       previous = prefix_partial_path_with_controller_namespace
       self.prefix_partial_path_with_controller_namespace = false
-      kit = build_view_model(kit.to_s, props, &block)
+      kit = build_view_model(kit.to_s, rails_props(props), &block)
       render(partial: kit, as: :object)
     ensure
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
-    # deprecated
-    def pb_react(kit, props: {}, options: {})
+    def pb_react(kit, props:{dark: react_props}, options: {})
       ::Webpacker::React::Component.new(kit.camelize).render(props, options)
     end
 
   private
+    def rails_props(props)
+      if @playbook.nil?
+        props
+      else
+        dark_mode_props(props)
+      end
+    end  
+
+    def react_props
+      if @playbook.nil?
+        false
+      else
+        dark_mode
+      end
+    end 
 
     def is_subkit?(kit)
       kit.match(%r{[/\\]})

data/app/pb_kits/playbook/_playbook.scss

@@ -16,6 +16,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';

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

@@ -1,9 +1,9 @@
 <%if !@kit_examples[:examples].nil? %>
   <% @kit_examples[:examples].each do |kit_example| %>
     <% kit_example.each do |key, item| %>
-      <div class="pb--doc <%=key.include?('_dark') ? 'dark_ui' : 'light_ui'%>">
+    <%=pb_rails("card", props:{classname: "pb--doc", padding:"none"})do%>
         <%= render partial: "config/kit_ui", locals: { key: key, type: @type, item: item, show_code: @show_code } %>
-      </div>
+      <% end %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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">
+    <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">
@@ -30,6 +30,7 @@
       </ul>
     </div>
     <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
+      <%= pb_rails("section_separator")%>
       <a href="#" data-toggle="false" class="pb--close-toggle">Close</a>
       <% if type == "rails" %>
         <pre class="highlight"><%= raw rouge(contents, "erb") %></pre>

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

@@ -1,18 +1,16 @@
 <% if defined?(@kit_api) && @kit_api.present? %>
+
   <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
-    <table class="pb--propsTable--table">
-      <thead>
-        <tr>
-          <th>Available Props</th>
-        </tr>
-      </thead>
-      <tbody>
+  <%= pb_rails("title", props:{text: "Available Props", size:3, margin_bottom:"sm"}) %>
+    <%= pb_rails("card",props:{padding:"none"})do%>
+      <%= pb_rails("list",props: {xpadding:true})do%>
         <% @kit_api.each_with_index do |(key,value),index| %>
-          <tr>
-            <td><%= key %></td>
-          </tr>
+            <%= pb_rails("list/item") do %>
+              <%= key %>
+            <% end %>
         <% end %>
-      </tbody>
-    </table>
+      <% end %>
+    <% end %>
   </div>
+  
 <% end %>

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

@@ -25,6 +25,7 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - date_picker
     - file_upload
     - form
     - form_pill

data/app/pb_kits/playbook/index.js

@@ -13,11 +13,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'
@@ -83,6 +85,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'
@@ -95,6 +98,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/pb_avatar/_avatar.jsx

@@ -7,12 +7,13 @@ import { map } from 'lodash'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
-import { Image } from '../'
+import { Image, OnlineStatus } from '../'
 
 type AvatarProps = {
   aria?: object,
   className?: string,
   data?: object,
+  dark?: boolean,
   id?: string,
   imageUrl: string,
   name: string,
@@ -26,10 +27,14 @@ const firstTwoInitials = (name) =>
     .substring(0, 2)
 
 const Avatar = (props: AvatarProps) => {
-  const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null } = props
+  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
@@ -53,7 +58,11 @@ const Avatar = (props: AvatarProps) => {
         </If>
       </div>
       <If condition={status}>
-        <div className={`pb_online_status_kit_${status} size_${size}`} />
+        <OnlineStatus
+            className={`size_${size}`}
+            dark={dark}
+            status={status}
+        />
       </If>
     </div>
   )

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Avatar } from '../../'
 
-const AvatarDefault = () => {
+const AvatarDefault = (props) => {
   return (
     <div>
       <Avatar
@@ -9,6 +9,7 @@ const AvatarDefault = () => {
           name="Terry Johnson"
           size="xs"
           status="online"
+          {...props}
       />
       <br />
       <Avatar
@@ -16,6 +17,7 @@ const AvatarDefault = () => {
           name="Terry Johnson"
           size="sm"
           status="online"
+          {...props}
       />
       <br />
       <Avatar
@@ -23,6 +25,7 @@ const AvatarDefault = () => {
           name="Terry Johnson"
           size="md"
           status="away"
+          {...props}
       />
       <br />
       <Avatar
@@ -30,6 +33,7 @@ const AvatarDefault = () => {
           name="Terry Johnson"
           size="lg"
           status="offline"
+          {...props}
       />
       <br />
       <Avatar
@@ -37,6 +41,7 @@ const AvatarDefault = () => {
           name="Terry Johnson"
           size="xl"
           status="offline"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx

@@ -1,28 +1,33 @@
 import React from 'react'
 import { Avatar } from '../../'
 
-const AvatarDefault = () => {
+const AvatarDefault = (props) => {
   return (
     <div>
       <Avatar
           name="Terry Johnson"
           size="xs"
+          {...props}
       />
       <Avatar
           name="Terry Johnson"
           size="sm"
+          {...props}
       />
       <Avatar
           name="Terry Johnson"
           size="md"
+          {...props}
       />
       <Avatar
           name="Terry Johnson"
           size="lg"
+          {...props}
       />
       <Avatar
           name="Terry Johnson"
           size="xl"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Avatar } from '../../'
 
-const AvatarStatus = () => {
+const AvatarStatus = (props) => {
   return (
     <>
       <Avatar
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
+          {...props}
       />
 
       <br />
@@ -17,6 +18,7 @@ const AvatarStatus = () => {
           name="Terry Johnson"
           size="sm"
           status="online"
+          {...props}
       />
 
       <br />
@@ -26,6 +28,7 @@ const AvatarStatus = () => {
           name="Terry Johnson"
           size="sm"
           status="away"
+          {...props}
       />
 
       <br />
@@ -35,6 +38,7 @@ const AvatarStatus = () => {
           name="Terry Johnson"
           size="sm"
           status="offline"
+          {...props}
       />
 
       <br />

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx

@@ -1,17 +1,19 @@
 import React from 'react'
 import { AvatarActionButton } from '../../'
 
-const AvatarActionButtonActions = () => (
+const AvatarActionButtonActions = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
         action="add"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
+        {...props}
     />
     <AvatarActionButton
         action="remove"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { AvatarActionButton } from '../../'
 
-const AvatarActionButtonDefault = () => (
+const AvatarActionButtonDefault = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
+        {...props}
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
     />

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { AvatarActionButton } from '../../'
 
-const AvatarActionButtonOnClick = () => (
+const AvatarActionButtonOnClick = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         linkUrl="https://www.google.com"
         name="Sophia Carden"
         onClick={() => alert('clicked!')}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx

@@ -1,27 +1,31 @@
 import React from 'react'
 import { AvatarActionButton } from '../../'
 
-const AvatarActionButtonPlacement = () => (
+const AvatarActionButtonPlacement = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
         placement="bottom_left"
+        {...props}
     />
     <AvatarActionButton
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
         placement="bottom_right"
+        {...props}
     />
     <AvatarActionButton
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
         placement="top_left"
+        {...props}
     />
     <AvatarActionButton
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
         placement="top_right"
+        {...props}
     />
   </div>
 )