playbook_ui 6.1.0.pre.alpha4 → 6.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 935fd3d3a764d02be6807cbc6f3271f6771865a0d1c4e33bfc4dd078e3dc93af
-  data.tar.gz: 6cb1089a51ef34a15ea142fb23b8e9c705c647a811bb1f945acfbc47e139228a
+  metadata.gz: ea80542999ec742ea75a790d08063f434344edc4b3271924f885d8262da2e71e
+  data.tar.gz: '038fe977294f1ab1bba1b24f898ade044a7b01b973b9b1f45b2e0ffd1b65e687'
 SHA512:
-  metadata.gz: 721dab5867c8db09f78c40ea8b7bc3ed070437e9a3241299b9a1a46195a443546eb4526a12807a290b67df2e19bf703dd2b617f11b5be5796ad452f929bc09e6
-  data.tar.gz: 27d738f1736e7f516cb7a4f23d95189d6448628c68cee6ba29f230b656b7058ded78f603fd7d64ee4563bd733163e4165e4197206d72c7b85c4485e4de77e57d
+  metadata.gz: eeb81eeae28752fa79ed22bdfc94b2e84edced942326ebaf091bf629c79beff2ab6b7f7bd4bae1fd0b28aa8aedd4a900de11a44ad1abd15fa251d73938a3c5dc
+  data.tar.gz: 9c1c7d3eec96485cec557a1a9f496212acd49cfb85444ad6dca3d2dfbb9490bd01dfa80799ad15433f3d9f60e3e221b6e10e12d529948d5fbb9d0a8a357996f2

data/app/pb_kits/playbook/_playbook.scss

@@ -15,7 +15,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/data/menu.yml

@@ -7,7 +7,6 @@ samples:
 kits:
   - avatar
   - avatar_action_button
-  - badge
   - buttons:
     - button
     - button_toolbar
@@ -26,7 +25,6 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
-    - date_picker
     - file_upload
     - form
     - form_pill
@@ -40,7 +38,6 @@ kits:
     - typeahead
     - toggle
   - highlight
-  - hashtag
   - icon
   - icon_circle
   - icon_value
@@ -52,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

@@ -14,7 +14,6 @@ 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'
@@ -92,7 +91,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/packs/examples.js

@@ -28,7 +28,6 @@ import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
-import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -109,7 +108,6 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
-  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,

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'