playbook_ui 6.1.0 → 7.0.0.pre.alpha2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 24d77ce736432481783b53597f57c59453de3b20f97b7e7ae5120b9a1ef9dd14
-  data.tar.gz: e282c218ef0a9232cf0efe601ba674bf5e14d3456d0be20ae01c6a0d8fdeb03e
+  metadata.gz: 18b8f5fc62c6b255ffaba8a9f6f3f569a6affe337a541e60ea3c765bfb6c36b4
+  data.tar.gz: 2bd4dd6afc4b5006365f7b0cb2302ad69aa47124397a6c79d95cf1b1cd50ed14
 SHA512:
-  metadata.gz: 5c2983f8a5539e725e04b3b4cbf6b06259bfd2097695da37e939d0a626aa568857e09093d0f9e27f1e56724b00a418501f54f864d573c789c98e88d02e798b03
-  data.tar.gz: cdc566a16f731aabac512d56b4165102781a95acd0274af6f55612bcb284c5de17671b3d5f5d93b21790286e361af0eca254327dbdcfdcbf11d18bfce736a141
+  metadata.gz: 8bacb33860b5cf99cb2597d4cf7e011bfd465d86c752e3b58f17d4c1f72d906b80a2f6412194bcdc4acb71cfd0f373d871c14344facd2a5c60151210b7976749
+  data.tar.gz: 4bf21d0e6c3d90c833ce5afccd179542c534cb48dd02c1d4f0b89248bf2da421d26be6a625adcb51e1f1d5f5de5dbb0e93f21a03ec023ffcb086da1c28508dbb

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/_avatar.jsx

@@ -11,11 +11,11 @@ import { Image } from '../'
 
 type AvatarProps = {
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  imageUrl: String,
-  name: String,
+  id?: string,
+  imageUrl: string,
+  name: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs",
   status: "away" | "offline" | "online",
 }

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,42 +10,49 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
+import { globalProps } from '../utilities/globalProps.js'
+
 type AvatarActionButtonProps = {
-  action?: String,
+  action?: string,
   aria: Object,
-  className?: String,
+  className?: string,
+  dark?: boolean,
   data?: Object,
-  id?: String,
-  imageUrl?: String,
-  linkUrl?: String,
-  name?: String,
-  onClick?: String,
-  placement?: String,
-  size?: String,
+  id?: string,
+  imageUrl?: string,
+  linkUrl?: string,
+  name?: string,
+  onClick?: string,
+  placement?: string,
+  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

@@ -12,11 +12,11 @@ import {
 
 type BadgeProps = {
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  rounded?: Boolean,
-  text?: String,
+  id?: string,
+  rounded?: boolean,
+  text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 }
 const Badge = (props: BadgeProps) => {
@@ -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