playbook_ui 6.2.1 → 6.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 82aa5cb0ff13fff767bf84b62c95679678adb923ab8498213d70f238d4686e4b
-  data.tar.gz: 749e9c758148f36c0db475664273a5bcedb99c45dd6d6929de155bfaeaa77ac1
+  metadata.gz: ea80542999ec742ea75a790d08063f434344edc4b3271924f885d8262da2e71e
+  data.tar.gz: '038fe977294f1ab1bba1b24f898ade044a7b01b973b9b1f45b2e0ffd1b65e687'
 SHA512:
-  metadata.gz: 506b370ea2fe837dfab73e153c44e1c5c7c5d1ee43c9af8093b85b9539427ef3f8667034bf6297ddfb3f1c49f02c87a960c976a3c51ed75b21696a7bacafb43e
-  data.tar.gz: a6491803f9cf6f725a63f3c0d71dfc77b5f22e7739db30fa90c90eacfadc116f89a9e81d17ad853d8bcca4bcd09c13c7f96a2e1688d8e108bc48cd77d563c5be
+  metadata.gz: eeb81eeae28752fa79ed22bdfc94b2e84edced942326ebaf091bf629c79beff2ab6b7f7bd4bae1fd0b28aa8aedd4a900de11a44ad1abd15fa251d73938a3c5dc
+  data.tar.gz: 9c1c7d3eec96485cec557a1a9f496212acd49cfb85444ad6dca3d2dfbb9490bd01dfa80799ad15433f3d9f60e3e221b6e10e12d529948d5fbb9d0a8a357996f2

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

@@ -10,7 +10,7 @@ type BodyProps = {
   aria?: object,
   className?: string,
   children?: array<React.ReactChild>,
-  color: 'dark' | 'default' | 'light' | 'lighter' | 'light_dark' | 'lighter_dark',
+  color?: 'default' | 'light' | 'lighter',
   dark?: boolean,
   data?: object,
   highlightedText?: array<string>,
@@ -26,12 +26,12 @@ const Body = (props: BodyProps) => {
     aria = {},
     className,
     children,
-    color = '',
+    color = 'default',
     data = {},
     highlightedText = [],
     highlighting = false,
     id,
-    status = '',
+    status,
     tag = 'div',
     text,
   } = props

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,22 +1,25 @@
 @import "./body_mixins";
 
-.pb_body_kit {
-  &.dark {
-    @include pb_body_dark;
-  }
-}
-
 [class^=pb_body_kit]{
-  @include pb_body;
-
   @each $color_name, $color_value in $pb_body_colors {
     &[class*=_#{$color_name}] {
       @include pb_body($color_value);
     }
+    @each $status_name, $status_value in $pb_body_status {
+      &[class*=_default_#{$status_name}] {
+        @include pb_body($status_value);
+      }
+    }
   }
 
+  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
+      @include pb_body($dark_color_value); 
+    }
+  }
+  
   @each $status_name, $status_value in $pb_body_status {
-    &[class*=_#{$status_name}] {
+    &[class*=_default_#{$status_name}][class*=dark] {
       @include pb_body($status_value);
     }
   }