playbook_ui 6.8.2.pre.alpha1 → 7.0.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c741c41b034e5f6ee2c76ca8c5d4ae7e6aeed017fc75eafa99c104a67404d40e
-  data.tar.gz: bf3bf4865392190b6c9778979231cf4b9bd6d5ffbe1731bbf9106fadbb4cc490
+  metadata.gz: e51558a950c081ce44a82ac1efe7ca0e385df8c11635dc45ce0a40c1b7dd365b
+  data.tar.gz: e8444b9839735cd9c74c3bd9e49d8b6d43c216fadc93d5d3b7974d4ce508d721
 SHA512:
-  metadata.gz: 7cf3a912b48ced76c46cade9bdb30f383e259c3bf7ab94e08c480051c30a754feca89035dd120ca17819631b71a21d218ed57a031911520c8c852f343fc3f40c
-  data.tar.gz: 41c7bc0103ed5670cc9aec9ed3f274581ea6e30ec661019f9b11ce67d9447a3959cdad7bb2a1fd338184d507b15395865038dfa65b0cb1f783fe223a846cad7b
+  metadata.gz: a888fd3eb9135290f738810becc21b2ad5a98d9451ae8ff53ae431a21e2e0e87d81e1aba0e09d618f623d62c2b3622be4ba6a2b60524d2c831d93f7b811adbc8
+  data.tar.gz: a94ff922fe5a63be7a1e13f525a02aae3975979ea2483b91dd8f0e5ea56e8a382dd029121ff017c7dc2766b3c3b69631698c0fab457059a4ecc0d6eaa8903ad5

data/README.md

@@ -9,7 +9,8 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 
 ## Getting started
 
-1. Run `make it`
+1. Run `make install`
+1. Run `make start`
 1. Install overcommit hooks `bin/overcommit`
 1. open [http://localhost:8089](http://localhost:8089)
 
@@ -34,9 +35,10 @@ To run the tests, do `bin/test`. To launch a shell in the container run `make sh
 
 See [docs/upgrade-guide](./docs/upgrade-guide)
 
-### Releases
+### Nitro & Releases
 
-* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-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)
 
 ### Development Environment
 
@@ -61,4 +63,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

@@ -2,14 +2,10 @@
 
 module Playbook
   class ApplicationController < ActionController::Base
-    protect_from_forgery with: :exception
- 
     helper Webpacker::Helper
     helper Playbook::PbKitHelper
     helper Playbook::PbDocHelper
     helper Playbook::PbSampleHelper
     append_view_path Playbook::Engine.root + "app/pb_kits"
   end
-
-  
 end

data/app/helpers/playbook/application_helper.rb

@@ -13,24 +13,5 @@ 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,36 +6,21 @@ 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, rails_props(props), &block)
+      kit = build_view_model(kit.to_s, props, &block)
       render(partial: kit, as: :object)
     ensure
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
-    def pb_react(kit, props:{dark: react_props}, options: {})
+    # deprecated
+    def pb_react(kit, 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

@@ -1,3 +1,4 @@
+@import "tokens/fonts";
 @import "pb_body/body";
 @import "pb_button/button";
 @import 'pb_button_toolbar/button_toolbar';
@@ -15,7 +16,6 @@
 @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| %>
-    <%=pb_rails("card", props:{classname: "pb--doc", padding:"none"})do%>
+      <div class="pb--doc <%=key.include?('_dark') ? 'dark_ui' : 'light_ui'%>">
         <%= render partial: "config/kit_ui", locals: { key: key, type: @type, item: item, show_code: @show_code } %>
-      <% end %>
+      </div>
     <% 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 <%= cookies[:dark_mode] == "true" ? "dark" : "" %>">
+    <div class="markdown pb--kit-example-markdown">
       <%= markdown(get_per_sample_descriptions(@kit_examples[:kit], key)) %>
     </div>
     <div class="pb--codeControls">
@@ -30,7 +30,6 @@
       </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,16 +1,18 @@
 <% if defined?(@kit_api) && @kit_api.present? %>
-
   <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
-  <%= 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%>
+    <table class="pb--propsTable--table">
+      <thead>
+        <tr>
+          <th>Available Props</th>
+        </tr>
+      </thead>
+      <tbody>
         <% @kit_api.each_with_index do |(key,value),index| %>
-            <%= pb_rails("list/item") do %>
-              <%= key %>
-            <% end %>
+          <tr>
+            <td><%= key %></td>
+          </tr>
         <% end %>
-      <% end %>
-    <% end %>
+      </tbody>
+    </table>
   </div>
-  
 <% end %>

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

@@ -7,6 +7,7 @@ samples:
 kits:
   - avatar
   - avatar_action_button
+  - badge
   - buttons:
     - button
     - button_toolbar
@@ -25,7 +26,6 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
-    - date_picker
     - file_upload
     - form
     - form_pill
@@ -39,6 +39,7 @@ kits:
     - typeahead
     - toggle
   - highlight
+  - hashtag
   - icon
   - icon_circle
   - icon_value
@@ -50,10 +51,7 @@ kits:
   - multiple_users_stacked
   - nav
   - online_status
-  - tags:
-    - badge
-    - hashtag
-    - pill
+  - pill
   - popover
   - progress_pills
   - progress_simple

data/app/pb_kits/playbook/index.js

@@ -1,3 +1,7 @@
+import './_playbook.scss'
+import 'lazysizes/plugins/attrchange/ls.attrchange'
+import 'lazysizes'
+
 // 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'
@@ -9,13 +13,11 @@ 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'
@@ -81,7 +83,6 @@ 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'
@@ -94,7 +95,6 @@ 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,13 +7,12 @@ import { map } from 'lodash'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
-import { Image, OnlineStatus } from '../'
+import { Image } from '../'
 
 type AvatarProps = {
   aria?: object,
   className?: string,
   data?: object,
-  dark?: boolean,
   id?: string,
   imageUrl: string,
   name: string,
@@ -27,14 +26,10 @@ const firstTwoInitials = (name) =>
     .substring(0, 2)
 
 const Avatar = (props: AvatarProps) => {
-  const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null, dark = false } = props
+  const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(
-    buildCss('pb_avatar_kit', size),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_avatar_kit', size), className, globalProps(props))
 
   const initials = name && firstTwoInitials(name)
   dataProps['data-initials'] = initials
@@ -58,11 +53,7 @@ const Avatar = (props: AvatarProps) => {
         </If>
       </div>
       <If condition={status}>
-        <OnlineStatus
-            className={`size_${size}`}
-            dark={dark}
-            status={status}
-        />
+        <div className={`pb_online_status_kit_${status} size_${size}`} />
       </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 = (props) => {
+const AvatarDefault = () => {
   return (
     <div>
       <Avatar
@@ -9,7 +9,6 @@ const AvatarDefault = (props) => {
           name="Terry Johnson"
           size="xs"
           status="online"
-          {...props}
       />
       <br />
       <Avatar
@@ -17,7 +16,6 @@ const AvatarDefault = (props) => {
           name="Terry Johnson"
           size="sm"
           status="online"
-          {...props}
       />
       <br />
       <Avatar
@@ -25,7 +23,6 @@ const AvatarDefault = (props) => {
           name="Terry Johnson"
           size="md"
           status="away"
-          {...props}
       />
       <br />
       <Avatar
@@ -33,7 +30,6 @@ const AvatarDefault = (props) => {
           name="Terry Johnson"
           size="lg"
           status="offline"
-          {...props}
       />
       <br />
       <Avatar
@@ -41,7 +37,6 @@ const AvatarDefault = (props) => {
           name="Terry Johnson"
           size="xl"
           status="offline"
-          {...props}
       />
     </div>
   )

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

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

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.html.erb

@@ -19,18 +19,15 @@
     <%= link_to object.link_url, id: object.tooltip_id do %>
 
       <%= pb_rails("avatar", props: {
-        dark: object.dark,
         name: object.name,
         size: object.size,
         image_url: object.image_url,
         class: "avatar_action"
       }) %>
-        <div class="icon <%= object.dark ? 'dark' : '' %> ">
-          <%= pb_rails("icon", props: {
-            dark: object.dark,
-            icon: object.action_icons
-          }) %>
+        <div class="icon">
+            <%= pb_rails("icon", props: {
+              icon: object.action_icons
+            }) %>
         </div>
-       
     <% end %>
 <% end %>