playbook_ui 7.13.0 → 7.16.0.pre.alpha1

data/app/pb_kits/playbook/pb_button/{_button.html.erb → button.html.erb}

@@ -1,5 +1,5 @@
 <%= content_tag(object.tag,
     object.tag == "button" ? object.options : object.link_options) do %>
     <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
-    <span class="pb_button_content"><%= !object.children.nil? ? capture(&object.children) : object.text %></span>
+    <span class="pb_button_content"><%= content.presence || object.text %></span>
 <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbButton
-    class Button
-      include Playbook::Props
-
-      partial "pb_button/button"
-
+    class Button < Playbook::KitBase
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :full_width, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_button_toolbar/{_button_toolbar.html.erb → button_toolbar.html.erb}

@@ -3,5 +3,5 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-      <%= !object.children.nil? ? capture(&object.children) : object.text %>
+      <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbButtonToolbar
-    class ButtonToolbar
-      include Playbook::Props
-
-      partial "pb_button_toolbar/button_toolbar"
-
+    class ButtonToolbar < Playbook::KitBase
       prop :connected, type: Playbook::Props::Boolean, default: false
 
       prop :orientation, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/{pb_body/_body.html.erb → pb_caption/caption.html.erb}

@@ -3,5 +3,5 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-  <%= object.children.present? ? capture(&object.children) : object.content %>
+  <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbCaption
-    class Caption
-      include Playbook::Props
-
-      partial "pb_caption/caption"
-
+    class Caption < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md base lg xl],
                   default: "md"

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.html.erb → card.html.erb}

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria,
     dark: object.dark) do %>
-  <% if object.children %>
-    <%= pb_rails("card/card_body", props: { padding: object.body_padding, children: object.children }) %>
-  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: object.body_padding }) do %>
+    <%= content %>
+  <% end if content.present? %>
 <% end %>

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbCard
-    class Card
-      include Playbook::Props
-
-      partial "pb_card/card"
-
+    class Card < Playbook::KitBase
       prop :selected, type: Playbook::Props::Boolean, default: false
       prop :shadow, type: Playbook::Props::Enum,
                     values: %w[none deep deeper deepest],
@@ -15,6 +11,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,12 +21,13 @@ module Playbook
                            shadow_class,
                            highlight_position_class,
                            highlight_color_class,
-                           border_class)
+                           border_class,
+                           border_radius_class)
       end
 
       def body_padding
         if padding.present?
-           ""
+          ""
         else
           "p_md"
         end
@@ -35,7 +35,6 @@ module Playbook
 
     private
 
-
       def selected_class
         selected ? "selected" : "deselected"
       end
@@ -55,6 +54,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/{child_kits/_card_header.html.erb → card_body.html.erb}

@@ -3,5 +3,5 @@
     data: object.data,
     class: object.classname,
     aria: object.aria) do %>
-  <%= capture(&object.children) %>
+  <%= content.presence %>
 <% end %>

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbCard
-    class CardBody
-      include Playbook::Props
-
-      partial "pb_card/child_kits/card_body"
-
+    class CardBody < Playbook::KitBase
       def classname
         generate_classname("pb_card_body_kit", padding, separator: " ")
       end

data/app/pb_kits/playbook/pb_card/{child_kits/_card_body.html.erb → card_header.html.erb}

@@ -3,5 +3,5 @@
     data: object.data,
     class: object.classname,
     aria: object.aria) do %>
-  <%= capture(&object.children) %>
+  <%= content.presence %>
 <% end %>

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

@@ -2,11 +2,7 @@
 
 module Playbook
     module PbCard
-      class CardHeader
-        include Playbook::Props
-  
-        partial "pb_card/child_kits/card_header"
-  
+      class CardHeader < Playbook::KitBase
         prop :header_color, type: Playbook::Props::String,
                             default: "category_1"
 
@@ -16,4 +12,3 @@ module Playbook
       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

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

@@ -0,0 +1 @@
+`border_radius_md` is the card kit default

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

@@ -0,0 +1 @@
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

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

@@ -9,6 +9,7 @@ examples:
   - card_content: Content Size
   - card_separator: Separator Card
   - card_border_none: No Border
+  - card_border_radius: Border Radius
   react:
   - card_light: Default
   - card_highlight: Highlight Cards
@@ -19,3 +20,4 @@ examples:
   - card_content: Content Size
   - card_separator: Separator Card
   - card_border_none: No Border
+  - card_border_radius: Border Radius

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 CardBorderNone } from './_card_border_none.jsx'
+export { default as CardBorderRadius } from './_card_border_radius.jsx'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -10,32 +10,34 @@ import { globalProps } from '../utilities/globalProps.js'
 type CheckboxProps = {
   aria?: object,
   checked?: boolean,
+  children: Node,
   className?: string,
   dark?: boolean,
   data?: object,
   error?: boolean,
   id?: string,
   name: string,
+  onChange: (boolean) => void,
+  tabIndex: number,
   text: string,
   value: string,
-  children: Node,
-  onChange: (boolean) => void,
 }
 
 const Checkbox = (props: CheckboxProps) => {
   const {
     aria = {},
     checked = false,
+    children = null,
     className,
     dark = false,
     data = {},
     error = false,
     id,
     name = '',
+    onChange = () => {},
+    tabIndex,
     text = '',
     value = '',
-    children = null,
-    onChange = () => {},
   } = props
 
   const dataProps = buildDataProps(data)
@@ -60,6 +62,7 @@ const Checkbox = (props: CheckboxProps) => {
             defaultChecked={checked}
             name={name}
             onChange={onChange}
+            tabIndex={tabIndex}
             type="checkbox"
             value={value}
         />

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -1,5 +1,6 @@
 @import "../tokens/colors";
 @import "../tokens/transition";
+@import "../tokens/positioning";
 $transition: $transition_cubic;
 
 [class^=pb_checkbox_kit] {
@@ -41,7 +42,10 @@ $transition: $transition_cubic;
     cursor: pointer;
     height: 0;
     width: 0;
-    display: none;
+    left: $offscreen;
+    &:focus ~ .pb_checkbox_checkmark {
+      border-color: $primary_action;
+    }
     &:checked ~ .pb_checkbox_checkmark {
       background-color: $primary_action;
       border-color: $primary_action;