playbook_ui 7.13.0.pre.alpha1 → 7.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dffed3e006461af113cc39ab74386183174482f0b3d8e09edcc4b949c902337c
-  data.tar.gz: 5649ab75ec8a4fcb3ac31bcb24b0704bd79ebbff7ad815c7311524b248486e94
+  metadata.gz: ba7ca0e1a8dbb832e4553d4ca3c0c8c328ead105c57d691a0181ca169197b53a
+  data.tar.gz: a8c51729b2dfcfb7dc54d448abc6a305cb89fb367933b4a01893a8a455dd0fcb
 SHA512:
-  metadata.gz: e97c430113baa7ac7abb804064f92a5a05711934c4dd2df9a0bde80ed2a2be2cc36ff97e1dcb8565a3198af3d692c5d347c74ac6584e9a3451d6378dcf876a20
-  data.tar.gz: 7e1acd754c7c84a69f706756b9b948e023685d90c9923be9f21e46f8ec9ca56cfb83b4194bf7ea1adf10a92209f40ee3bdf8444269815bff853a389d9ce18731
+  metadata.gz: e2ff1660024fbfc09a674433414caf39bc8b1c50220f51dc642c76d5de7d11f2b8056ae70ab924944c2828ee362f7b9986d1e5226672e9feda680606fc4ba7c2
+  data.tar.gz: 01b2ae4f1a7abed5972b1394f9a2b13ac31de8814050adef4f78ca81cab284c82fab7b966a88428b94c326f6319b72774443f00894c29e273773279d97388696

data/app/helpers/playbook/pb_sample_helper.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbSampleHelper
     def kits_used(sample)
       code = get_raw_code(sample, "rails")
-      kits_array = code.scan(/pb_rails\("(\w+)(?:"|\/)/)
+      kits_array = code.scan(%r{pb_rails\("(\w+)(?:"|/)})
       kits_array.uniq
     end
 

data/app/pb_kits/playbook/_playbook.scss

@@ -1,11 +1,11 @@
-@import 'tokens/fonts';
-@import 'pb_background/background';
-@import 'pb_body/body';
-@import 'pb_button/button';
+@import "tokens/fonts";
+@import "pb_background/background";
+@import "pb_body/body";
+@import "pb_button/button";
 @import 'pb_button_toolbar/button_toolbar';
-@import 'pb_caption/caption';
-@import 'pb_card/card';
-@import 'pb_title/title';
+@import "pb_caption/caption";
+@import "pb_card/card";
+@import "pb_title/title";
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_badge/badge';
@@ -13,7 +13,6 @@
 @import 'pb_checkbox/checkbox';
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
-@import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
@@ -90,3 +89,4 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
+@import './utilities/max_width';

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

@@ -8,7 +8,6 @@ kits:
     - circle_icon_button
   - card
   - checkbox
-  - collapsible
   - charts_and_graphs:
     - bar_graph
     - circle_chart

data/app/pb_kits/playbook/index.js

@@ -17,7 +17,6 @@ export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
 export CircleChart from './pb_circle_chart/_circle_chart.jsx'
 export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
-export Collapsible from './pb_collapsible/_collapsible.jsx'
 export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
@@ -109,7 +108,8 @@ 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'
+export PbTextarea from './pb_textarea'
 export PbTooltip from './pb_tooltip'
+export PbTypeahead from './pb_typeahead'

data/app/pb_kits/playbook/pb_avatar/_avatar.html.erb

@@ -3,10 +3,8 @@
     data: object.data.merge(initials: object.initials),
     class: object.classname,
     aria: object.aria) do %>
-  <%= content_tag(:div,
-      data: { initials: object.initials },
-      class: "avatar_wrapper") do %>
-       <%= pb_rails("image", props: { url: object.image_url }) if object.image_url.present? %>
-      <% end %>
-       <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
+  <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
+    <%= pb_rails("image", props: { url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+  <% end %>
+  <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
 <% end %>

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react'
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { map } from 'lodash'
 
@@ -39,6 +39,9 @@ const Avatar = (props: AvatarProps) => {
   const initials = name && firstTwoInitials(name)
   dataProps['data-initials'] = initials
 
+  const [error, setError] = useState(false)
+  const handleError = () => setError(true)
+
   return (
     <div
         {...ariaProps}
@@ -50,9 +53,10 @@ const Avatar = (props: AvatarProps) => {
           className="avatar_wrapper"
           data-initials={initials}
       >
-        <If condition={imageUrl}>
+        <If condition={imageUrl && !error}>
           <Image
               alt={name}
+              onError={handleError}
               url={imageUrl}
           />
         </If>

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -25,6 +25,10 @@ module Playbook
       def online_status_props
         { status: status, classname: "size_#{size}" }
       end
+
+      def handle_img_error
+        "this.style.display = 'none'"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("avatar", props: { image_url: true, name: "Terry Johnson", size: "xs" }) %>
+<%= pb_rails("avatar", props: { image_url: 4, name: "Terry Johnson", size: "sm" }) %>
+<%= pb_rails("avatar", props: { image_url: "https://google.com", name: "Terry Johnson", size: "md" }) %>
+<%= pb_rails("avatar", props: { image_url: "", name: "Terry Johnson", size: "lg" }) %>
+<%= pb_rails("avatar", props: { image_url: "https://randomuser.me/api/portraits/men/notapicture.jpg", name: "Terry Johnson", size: "xl" }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Avatar } from '../../'
+
+const AvatarNoImage = (props) => {
+  return (
+    <div>
+      <Avatar
+          imageUrl="Just some text here"
+          name="Terry Johnson"
+          size="xs"
+          {...props}
+      />
+      <Avatar
+          imageUrl={4}
+          name="Terry Johnson"
+          size="sm"
+          {...props}
+      />
+      <Avatar
+          imageUrl="https://google.com"
+          name="Terry Johnson"
+          size="md"
+          {...props}
+      />
+      <Avatar
+          imageUrl=""
+          name="Terry Johnson"
+          size="lg"
+          {...props}
+      />
+      <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/notapicture.jpg"
+          name="Terry Johnson"
+          size="xl"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AvatarNoImage

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.md

@@ -0,0 +1,2 @@
+
+A monagram is used as a fallback when an invalid or missing image url is provided.

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

@@ -2,8 +2,10 @@ examples:
   rails:
     - avatar_default: Default
     - avatar_monogram: Monogram
+    - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
   react:
     - avatar_default: Default
     - avatar_monogram: Monogram
+    - avatar_no_image: "Bad Image Link"
     - avatar_status: Status

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

@@ -1,3 +1,4 @@
 export { default as AvatarDefault } from './_avatar_default.jsx'
 export { default as AvatarMonogram } from './_avatar_monogram.jsx'
 export { default as AvatarStatus } from './_avatar_status.jsx'
+export { default as AvatarNoImage } from './_avatar_no_image.jsx'

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

@@ -3,13 +3,11 @@ examples:
   rails:
   - background_light: Light
   - background_white: White
-  - background_dark: Dark
   - background_gradient: Gradient
   - background_image: Image
 
   react:
   - background_light: Light
   - background_white: White
-  - background_dark: Dark
   - background_gradient: Gradient
   - background_image: Image

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

@@ -1,6 +1,5 @@
 export { default as BackgroundLight } from './_background_light.jsx'
 export { default as BackgroundWhite } from './_background_white.jsx'
-export { default as BackgroundDark } from './_background_dark.jsx'
 export { default as BackgroundGradient } from './_background_gradient.jsx'
 export { default as BackgroundImage } from './_background_image.jsx'
 

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

@@ -8,6 +8,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CardPropTypes = {
   borderNone?: boolean,
+  borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded",
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
   highlight?: {
@@ -62,6 +63,7 @@ const Body = (props: CardBodyProps) => {
 const Card = (props: CardPropTypes) => {
   const {
     borderNone = false,
+    borderRadius = 'md',
     children,
     className,
     highlight = {},
@@ -70,7 +72,7 @@ const Card = (props: CardPropTypes) => {
     padding = 'md',
   } = props
   const borderCSS = borderNone == true ? 'border_none' : ''
-  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, {
+  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, `border_radius_${borderRadius}`, {
     selected,
     deselected: !selected,
     [`highlight_${highlight.position}`]: highlight.position,

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

@@ -26,7 +26,7 @@
     flex-basis: auto;
     min-height: 1px;
     border: 0;
-    border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;  
+    border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
     @each $color_name, $color_value in $pb_card_header_colors {
       &[class*=_#{$color_name}] {
         @include pb_card_header_color($color_value);
@@ -44,7 +44,7 @@
     min-height: 1px;
     border: 0;
   }
-  
+
   @each $name, $shadow in $box_shadows {
     &[class*=_#{$name}] {
       box-shadow: $shadow;

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

@@ -50,6 +50,12 @@ $pb_card_padding:(
       box-shadow: $shadow;
     }
   }
+
+  @each $name, $radius in $border_radius {
+    &[class*=_#{$name}] {
+      border-radius: $radius;
+    }
+  }
 }
 
 @mixin pb_card_dark {

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

@@ -15,6 +15,9 @@ module Playbook
                        default: {}
       prop :border_none, type: Playbook::Props::Boolean,
                          default: false
+      prop :border_radius, type: Playbook::Props::Enum,
+                           values: %w[xs sm md lg xl none rounded],
+                           default: "md"
 
       def classname
         generate_classname("pb_card_kit",
@@ -22,7 +25,8 @@ module Playbook
                            shadow_class,
                            highlight_position_class,
                            highlight_color_class,
-                           border_class)
+                           border_class,
+                           border_radius_class)
       end
 
       def body_padding
@@ -55,6 +59,10 @@ module Playbook
       def border_class
         border_none == true ? "border_none" : nil
       end
+
+      def border_radius_class
+        border_radius != "md" ? "border_radius_#{border_radius}" : nil
+      end
     end
   end
 end

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

@@ -0,0 +1,53 @@
+<%= pb_rails("card", props: {
+  border_radius: "rounded"
+})  do %>
+  Rounded (1000px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "xl"
+})  do %>
+  Extra large (16px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "lg"
+})  do %>
+  Large (8px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "md"
+})  do %>
+  Medium (6px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "sm"
+})  do %>
+  Small (4px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "xs"
+})  do %>
+  Extra small (4px)
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {
+  border_radius: "none"
+})  do %>
+  None
+<% end %>

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

@@ -0,0 +1,71 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+const CardLight = (props) => {
+  return (
+    <div>
+      <Card
+          borderRadius="rounded"
+          {...props}
+      >
+        {'Rounded (1000px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="xl"
+          {...props}
+      >
+        {'Extra large (16px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="lg"
+          {...props}
+      >
+        {'Large (8px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="md"
+          {...props}
+      >
+        {'Medium (6px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="sm"
+          {...props}
+      >
+        {'Small (4px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="xs"
+          {...props}
+      >
+        {'Extra small (4px)'}
+      </Card>
+
+      <br />
+
+      <Card
+          borderRadius="none"
+          {...props}
+      >
+        {'None'}
+      </Card>
+    </div>
+  )
+}
+
+export default CardLight