playbook_ui 7.0.0.pre.alpha10 → 7.0.0.pre.alpha11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 194c10ec06ce124dbe76ef242188655e8858047a6390fbf32471f54aabdd9c10
-  data.tar.gz: f17c05ef7b24bf389b1d646559faaa89862d684b0ff3bb6c81fd6f7e81e1c43f
+  metadata.gz: e23c8fdddf3856d91cd2669f81dfeb607eb5cdd8eb78036ee8d25f369789cd86
+  data.tar.gz: 644b79c7f3e469781e44390f426f889919ac950aa21cf441d477bd2302d1898c
 SHA512:
-  metadata.gz: b5eb92a1873b2e77da0083aa018dada538cd2642ec23135a4b299ed75d21a0fee7d76f41954862a214c9b201c62cce3da9c9f4dac567b8d3671e55a47e16a64e
-  data.tar.gz: fcd1e7d53968d610fff6919e56341621d3286b331181861bc286e6483e1580d0732ece53915ce0ecd1f2a5818f813aacd59f8a5d370de8e66d4802ee153708d5
+  metadata.gz: 73a27538028125d8e714c9c7e61536a190f9dbcf84178b405d7b47d44d20f3656b6cf5f0024fcc6b13794293f4704883bccd6f34838d814780f9449929ffa99d
+  data.tar.gz: d2058ae5504a9ce734f94fccd9ae69096dbb1683f4096e4db14416aa7bfb207c9700002d748d4f8ffba72492e35e280e5787cbe7f04f0c92a027c2b69f8b28e7

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)
 

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/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/index.js

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

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>
 )

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

@@ -6,18 +6,10 @@ examples:
   - avatar_action_button_actions: Actions
   - avatar_action_button_onclick: On Click
   - avatar_action_button_tooltip: Tooltip
-  - avatar_action_button_dark: Dark
-  - avatar_action_button_placement_dark: Placement Dark
-  - avatar_action_button_actions_dark: Actions Dark
-  - avatar_action_button_on_click_dark: On Click Dark
-  - avatar_action_button_tooltip_dark: Tooltip Dark
+
   
   react:
   - avatar_action_button_default: Default
   - avatar_action_button_placement: Placement
   - avatar_action_button_actions: Actions
   - avatar_action_button_on_click: On Click
-  - avatar_action_button_dark: Dark
-  - avatar_action_button_placement_dark: Placement Dark
-  - avatar_action_button_actions_dark: Actions Dark
-  - avatar_action_button_on_click_dark: On Click Dark

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

@@ -2,7 +2,3 @@ export { default as AvatarActionButtonDefault } from './_avatar_action_button_de
 export { default as AvatarActionButtonPlacement } from './_avatar_action_button_placement.jsx'
 export { default as AvatarActionButtonActions } from './_avatar_action_button_actions.jsx'
 export { default as AvatarActionButtonOnClick } from './_avatar_action_button_on_click.jsx'
-export { default as AvatarActionButtonDark } from './_avatar_action_button_dark.jsx'
-export { default as AvatarActionButtonPlacementDark } from './_avatar_action_button_placement_dark.jsx'
-export { default as AvatarActionButtonOnClickDark } from './_avatar_action_button_on_click_dark.jsx'
-export { default as AvatarActionButtonActionsDark } from './_avatar_action_button_actions_dark.jsx'