playbook_ui 6.2.1 → 7.0.0.pre.alpha4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 82aa5cb0ff13fff767bf84b62c95679678adb923ab8498213d70f238d4686e4b
-  data.tar.gz: 749e9c758148f36c0db475664273a5bcedb99c45dd6d6929de155bfaeaa77ac1
+  metadata.gz: 96e0e3a29392c6e217a6ad111d23bf35fdd361b3b5349682c590a2cc5e798ddc
+  data.tar.gz: 114e55dc1214e3647af7f8e8ca036817a335665f2b16f287311dfafb6f820d7a
 SHA512:
-  metadata.gz: 506b370ea2fe837dfab73e153c44e1c5c7c5d1ee43c9af8093b85b9539427ef3f8667034bf6297ddfb3f1c49f02c87a960c976a3c51ed75b21696a7bacafb43e
-  data.tar.gz: a6491803f9cf6f725a63f3c0d71dfc77b5f22e7739db30fa90c90eacfadc116f89a9e81d17ad853d8bcca4bcd09c13c7f96a2e1688d8e108bc48cd77d563c5be
+  metadata.gz: 44eb10c35a56bb49b83cd5e981fb4096bfde3626dee79445cfe557abb366b0d35621d42ceaebf894d094f62292d224b76709bfd888e043026f20a4042e710831
+  data.tar.gz: 919ba635591e4b139da1b56afca551adc84484d3902ce2ad20b66db276cd6170982f99a08d3db025a0eb9ad7f0a0ba6178f7e47178aef336f92a17480df60c7b

data/app/controllers/playbook/application_controller.rb

@@ -2,8 +2,6 @@
 
 module Playbook
   class ApplicationController < ActionController::Base
-    protect_from_forgery with: :exception
-
     helper Webpacker::Helper
     helper Playbook::PbKitHelper
     helper Playbook::PbDocHelper

data/app/helpers/playbook/pb_kit_helper.rb

@@ -15,6 +15,7 @@ module Playbook
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
+    # deprecated
     def pb_react(kit, props: {}, options: {})
       ::Webpacker::React::Component.new(kit.camelize).render(props, options)
     end

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';

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

@@ -7,7 +7,6 @@ samples:
 kits:
   - avatar
   - avatar_action_button
-  - badge
   - buttons:
     - button
     - button_toolbar
@@ -39,7 +38,6 @@ kits:
     - typeahead
     - toggle
   - highlight
-  - hashtag
   - icon
   - icon_circle
   - icon_value
@@ -51,7 +49,10 @@ kits:
   - multiple_users_stacked
   - nav
   - online_status
-  - pill
+  - tags:
+    - badge
+    - hashtag
+    - 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'

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

@@ -19,15 +19,18 @@
     <%= 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">
-            <%= pb_rails("icon", props: {
-              icon: object.action_icons
-            }) %>
+        <div class="icon <%= object.dark ? 'dark' : '' %> ">
+          <%= pb_rails("icon", props: {
+            dark: object.dark,
+            icon: object.action_icons
+          }) %>
         </div>
+       
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx

@@ -10,10 +10,13 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
+import { globalProps } from '../utilities/globalProps.js'
+
 type AvatarActionButtonProps = {
   action?: string,
   aria: Object,
   className?: string,
+  dark?: boolean,
   data?: Object,
   id?: string,
   imageUrl?: string,
@@ -24,28 +27,32 @@ type AvatarActionButtonProps = {
   size?: string,
 }
 
-const AvatarActionButton = ({
-  action = 'add',
-  aria = {},
-  className,
-  data = {},
-  id,
-  imageUrl,
-  linkUrl,
-  name,
-  onClick,
-  placement = 'bottom left',
-  size = 'md',
-}: AvatarActionButtonProps) => {
+const AvatarActionButton = (props: AvatarActionButtonProps) => {
+  const {
+    action = 'add',
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    id,
+    imageUrl,
+    linkUrl,
+    name,
+    onClick,
+    placement = 'bottom left',
+    size = 'md',
+  } = props
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const css = buildCss({
-    'pb_avatar_action_button_kit': true,
-    [action]: true,
-    [placement]: true,
-    [size]: true,
-  })
+  const classes = classnames(buildCss(
+    'pb_avatar_action_button_kit',
+    [action],
+    [placement],
+    [size]),
+  globalProps(props),
+  className)
 
   const icons = {
     add: 'plus-circle',
@@ -56,7 +63,7 @@ const AvatarActionButton = ({
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className)}
+        className={classes}
         id={id}
     >
       <a
@@ -68,8 +75,9 @@ const AvatarActionButton = ({
             name={name}
             size={size}
         />
-        <div className="icon">
+        <div className={`icon ${dark ? 'dark' : ''}`}>
           <Icon
+              dark={dark}
               icon={icons[action]}
           />
         </div>

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss

@@ -15,6 +15,9 @@
   }
   
   @mixin icon-base {
+    &.dark{
+        background-color: $bg_dark
+    }
     width: $icon_size;
     height: $icon_size;
     position: absolute;

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions_dark.html.erb

@@ -0,0 +1,17 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      dark: true,
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "add",
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      dark: true,
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "remove",
+  }) %>
+
+</div>

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

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

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_dark.html.erb

@@ -0,0 +1,9 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      dark: true,
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg"
+  }) %>
+
+</div>

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

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

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click_dark.html.erb

@@ -0,0 +1,15 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      dark: true,
+      name: "Sophia Carden",
+      id: "clickable",
+      link_url: "http://www.google.com",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+  }) %>
+
+  <%= javascript_tag do %>
+    document.querySelector('#clickable').addEventListener('click', () => alert('clickable clicked!'))
+  <% end %>
+
+</div>

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

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

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement_dark.html.erb

@@ -0,0 +1,31 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      dark: true,
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_left"
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      dark: true,
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_right"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      dark: true,
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_left"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      dark: true,
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_right"
+  }) %>
+
+</div>

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

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

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip_dark.html.erb

@@ -0,0 +1,12 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      dark: true,
+      name: "Sophia Carden",
+      link_url: "http://www.google.com",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      tooltip_text: "Tooltip Text",
+      tooltip_id: "avatar_2",
+  }) %>
+
+</div>

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

@@ -4,13 +4,20 @@ examples:
   - avatar_action_button_default: Default
   - avatar_action_button_placement: Placement
   - avatar_action_button_actions: Actions
-  - avatar_action_button_tooltip: Tooltip
   - 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,3 +2,7 @@ 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'

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -32,12 +32,8 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    className,
-    buildCss('pb_badge_kit', variant, {
-      rounded: rounded,
-    }),
-    globalProps(props)
-  )
+    buildCss('pb_badge_kit', variant, { rounded: rounded }), className,
+    globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_badge/docs/_description.md

@@ -0,0 +1 @@
+Badges can be used for notification, tags, and status. They are used for count and numbers.

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb

@@ -1,12 +1 @@
-<%= content_tag(:div, "",
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
-  <% end %>
-<% end %>
+<%= react_component('BarGraph', object.chart_options) %>

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -44,7 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }.to_json.html_safe
+        }
       end
 
       def classname