playbook_ui 5.2.0 → 5.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bb8840e61c52b773111c22632a90f9543ff610609017855691c9cd4e1999315e
-  data.tar.gz: 4abd95023a74be43d334f19bcd57160edbd76f51a3be26733e0e22463413109c
+  metadata.gz: bd87d19dffeb68dba4372b1282cf12fcb1cace3acda84f7119a902fc205e7e1f
+  data.tar.gz: e5f41cf298f15483eb5299b27837c83cac6e74e265b446fe6ff819742ff18b48
 SHA512:
-  metadata.gz: d2c02a383c9fa07b0892c1ead36815a66cfcf699d5deecee13d109e664affc7e173ddda17b6301f1160cc1cc59c8a01854129f30d14dd12edc16d0c60f032861
-  data.tar.gz: ce596c4e96e0665b56f4c9a4622ca004600c3c613c87329ed0321ebf315fd16fffd1b6220b74bff7fdb23df9f129e4cf65602af1e7880cf70c06080c678cbd61
+  metadata.gz: e7a8e97e476695635a7ca42bbbd831a20b9ff5e48665a7246b723ef2eacdd418864ba2dcec08b602e7fa35362fccf15685e56d91371442a3149ae2eef6d30615
+  data.tar.gz: 6d58ee0d87a24bdf4912e774c4f0ea33480be6007ba5ffd8cd6f2145bd4b27bbbf233a5288f691a3635f445944eccd0f4196c098cfd6e24e7396ed0580999ecc

data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss

@@ -2,6 +2,7 @@
 @import "flex_examples";
 @import "code_snippet";
 @import "kit_doc";
+@import "bg_light_doc_example";
 
 @import "color_utilities";
 @import "spacing_tokens";

data/app/pb_kits/playbook/packs/site_styles/docs/_bg_light_doc_example.scss

@@ -0,0 +1,7 @@
+@import "../../../tokens/colors";
+@import "../../../tokens/spacing";
+
+.bg-light-doc-example {
+    background: $bg_light;
+    padding: $space_lg;
+}

data/app/pb_kits/playbook/pb_badge/_badge.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

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

@@ -2,26 +2,37 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
 type BadgeProps = {
+  aria?: object,
   className?: String,
   dark?: Boolean,
+  data?: object,
   id?: String,
-  text?: String,
-  variant?: "success" | "warning" | "error" | "info" | "neutral",
   rounded?: Boolean,
+  text?: String,
+  variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 }
 const Badge = (props: BadgeProps) => {
   const {
+    aria = {},
     className,
     dark = false,
+    data = {},
     id,
+    rounded = false,
     text,
     variant = 'neutral',
-    rounded = false,
   } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const css = classnames(
     className,
     buildCss('pb_badge_kit', variant, {
@@ -33,6 +44,8 @@ const Badge = (props: BadgeProps) => {
 
   return (
     <div
+        {...ariaProps}
+        {...dataProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -16,6 +16,7 @@ type CardPropTypes = {
   selected?: Boolean,
   shadow?: "none" | "deep" | "deeper" | "deepest",
   dark?: Boolean,
+  borderNone?: Boolean,
 }
 
 type CardHeaderProps = {
@@ -62,9 +63,11 @@ const Card = (props: CardPropTypes) => {
     highlight = {},
     selected = false,
     shadow = 'none',
+    borderNone = false,
   } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, {
+  const borderCSS = borderNone == true ? 'border_none' : ''
+  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, {
     dark: dark,
     selected,
     deselected: !selected,

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -16,6 +16,10 @@
     }
   }
 
+  &[class*=_border_none] {
+    border-width: 0px;
+  }
+
   [class^=pb_card_header_kit] {
     flex-grow: 0;
     flex-shrink: 0;

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,6 +15,8 @@ module Playbook
                        default: {}
       prop :dark, type: Playbook::Props::Boolean,
                  default: false
+      prop :border_none, type: Playbook::Props::Boolean,
+                         default: false
 
       def classname
         generate_classname("pb_card_kit",
@@ -22,7 +24,8 @@ module Playbook
                            shadow_class,
                            highlight_position_class,
                            highlight_color_class,
-                           dark_class)
+                           dark_class,
+                           border_class)
       end
 
       def body_padding
@@ -55,6 +58,10 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
+
+      def border_class
+        border_none == true ? "border_none" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb

@@ -0,0 +1,7 @@
+<div class="bg-light-doc-example">
+
+    <%= pb_rails("card", props: { border_none: true })  do %>
+        Card content
+    <% end %>
+    
+</div>

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+const CardBorderNone = () => {
+  return (
+    <div className="bg-light-doc-example">
+
+      <Card borderNone>{'Card content'}</Card>
+
+    </div>
+  )
+}
+
+export default CardBorderNone

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.md

@@ -0,0 +1 @@
+Remove card border <b>only</b> for dashboard cards.

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

@@ -9,6 +9,7 @@ examples:
   - card_shadow: Shadow Size
   - card_content: Content Size
   - card_separator: Separator Card
+  - card_border_none: No Border
   react:
   - card_light: Default
   - card_dark: Dark Cards
@@ -19,3 +20,4 @@ examples:
   - card_shadow: Shadow Size
   - card_content: Content Size
   - card_separator: Separator Card
+  - card_border_none: No Border

data/app/pb_kits/playbook/pb_card/docs/index.js

@@ -7,3 +7,4 @@ export { default as CardShadow } from './_card_shadow.jsx'
 export { default as CardContent } from './_card_content.jsx'
 export { default as CardSeparator } from './_card_separator.jsx'
 export { default as CardDark } from './_card_dark.jsx'
+export { default as CardBorderNone } from './_card_border_none.jsx'

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "5.2.0"
+  VERSION = "5.3.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 5.2.0
+  version: 5.3.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-07-02 00:00:00.000000000 Z
+date: 2020-07-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -411,6 +411,7 @@ files:
 - app/pb_kits/playbook/packs/site_styles/_scaffold.scss
 - app/pb_kits/playbook/packs/site_styles/_site-style.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_all.scss
+- app/pb_kits/playbook/packs/site_styles/docs/_bg_light_doc_example.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss
 - app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss
@@ -543,6 +544,9 @@ files:
 - app/pb_kits/playbook/pb_card/card_header.rb
 - app/pb_kits/playbook/pb_card/child_kits/_card_body.html.erb
 - app/pb_kits/playbook/pb_card/child_kits/_card_header.html.erb
+- app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb
+- app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_border_none.md
 - app/pb_kits/playbook/pb_card/docs/_card_content.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_content.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_dark.html.erb
@@ -1813,7 +1817,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubyforge_project: 
+rubygems_version: 2.7.3
 signing_key: 
 specification_version: 4
 summary: Playbook Design System