RubyGems - playbook_ui - Versions diffs - 7.11.1 → 7.14.0 - Mend

playbook_ui 7.11.1 → 7.14.0

Files changed (343) hide show

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx CHANGED

@@ -6,7 +6,7 @@ const chartData = [{
   data: [1475, 200, 3000, 654, 656],
 }]
-const BarGraphLegendNonClickable = () => (
+const BarGraphLegendNonClickable = (props) => (
   <div>
     <BarGraph
         axisTitle="Number of Employees"
@@ -17,6 +17,7 @@ const BarGraphLegendNonClickable = () => (
         toggleLegendClick={false}
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
         yAxisMin={0}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx CHANGED

@@ -5,28 +5,28 @@ const BodyLight = (props) => {
   return (
     <div>
       <Body
-          {...props}
           text="I am a body kit (Default)"
+          {...props}
       />
       <Body
-          {...props}
           color="light"
           text="I am a body kit (Light)"
+          {...props}
       />
       <Body
-          {...props}
           color="lighter"
           text="I am a body kit (Lighter)"
+          {...props}
       />
       <Body
-          {...props}
           status="negative"
           text="I am a body kit (Status: negative)"
+          {...props}
       />
       <Body
-          {...props}
           status="positive"
           text="I am a body kit (Status: positive)"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx CHANGED

@@ -4,11 +4,11 @@ import { Button } from '../../'
 const ButtonAccessibility = (props) => (
   <div>
     <Button
-        {...props}
         aria={{ label: 'button' }}
         link="https://google.com"
         tag="a"
         text="Button with ARIA"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx CHANGED

@@ -4,10 +4,10 @@ import { Button } from '../../'
 const ButtonBlockContent = (props) => (
   <div>
     <Button
-        {...props}
         fixedWidth
         icon="users"
         text="Button with Block Content"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx CHANGED

@@ -4,10 +4,10 @@ import { Button } from '../../'
 const ButtonDefault = (props) => (
   <div>
     <Button
-        {...props}
         marginRight="xl"
         onClick={() => alert('button clicked!')}
         text="Button Primary"
+        {...props}
     />
     {' '}
     <Button

data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx CHANGED

@@ -4,9 +4,9 @@ import { Button } from '../../'
 const ButtonFullWidth = (props) => (
   <div>
     <Button
-        {...props}
         fullWidth
         text="Button Full Width"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx CHANGED

@@ -4,23 +4,23 @@ import { Button } from '../../'
 const ButtonLink = (props) => (
   <div>
     <Button
-        {...props}
         link="https://google.com"
         text="A Tag Button"
+        {...props}
     />
     {' '}
     <Button
-        {...props}
         link="https://google.com"
         newWindow
         text="Open in New Window"
+        {...props}
     />
     {' '}
     <Button
-        {...props}
         disabled
         link="https://google.com"
         text="A Tag Button Disabled"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx CHANGED

@@ -4,23 +4,23 @@ import { Button } from '../../'
 const ButtonLoading = (props) => (
   <div>
     <Button
-        {...props}
         loading
         text="Button Primary"
+        {...props}
     />
     {' '}
     <Button
-        {...props}
         loading
         text="Button Secondary"
         variant="secondary"
+        {...props}
     />
     {' '}
     <Button
-        {...props}
         loading
         text="A Tag Button Disabled"
         variant="link"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_button/docs/_button_options.jsx CHANGED

@@ -4,11 +4,11 @@ import Button from '../_button.jsx'
 const ButtonOptions = (props) => (
   <div>
     <Button
-        {...props}
         htmlType="submit"
         onClick={() => alert('Click!')}
         text="Button with options"
         value="1234"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx CHANGED

@@ -4,46 +4,46 @@ import { Button, ButtonToolbar } from '../..'
 const ButtonToolbarDefault = (props) => (
   <div className="pb--doc-demo-row">
     <ButtonToolbar
-        {...props}
         orientation="vertical"
+        {...props}
     >
       <Button
-          {...props}
           text="Create"
+          {...props}
       />
       <Button
-          {...props}
           text="Edit"
+          {...props}
       />
       <Button
-          {...props}
           text="Copy"
+          {...props}
       />
       <Button
-          {...props}
           text="Cut"
+          {...props}
       />
     </ButtonToolbar>
     <ButtonToolbar
-        {...props}
         orientation="horizontal"
+        {...props}
     >
       <Button
-          {...props}
           text="Create"
+          {...props}
       />
       <Button
-          {...props}
           text="Edit"
+          {...props}
       />
       <Button
-          {...props}
           text="Copy"
+          {...props}
       />
       <Button
-          {...props}
           text="Cut"
+          {...props}
       />
     </ButtonToolbar>
   </div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx CHANGED

@@ -4,56 +4,56 @@ import { Button, ButtonToolbar } from '../..'
 const ButtonToolbarSecondary = (props) => (
   <div className="pb--doc-demo-row">
     <ButtonToolbar
-        {...props}
         orientation="vertical"
         variant="secondary"
+        {...props}
     >
       <Button
-          {...props}
           text="Create"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Edit"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Copy"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Cut"
           variant="secondary"
+          {...props}
       />
     </ButtonToolbar>
     <ButtonToolbar
-        {...props}
         orientation="horizontal"
         variant="secondary"
+        {...props}
     >
       <Button
-          {...props}
           text="Create"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Edit"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Copy"
           variant="secondary"
+          {...props}
       />
       <Button
-          {...props}
           text="Cut"
           variant="secondary"
+          {...props}
       />
     </ButtonToolbar>
   </div>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx CHANGED

@@ -9,15 +9,15 @@ const CaptionBlock = (props) => {
       </Caption>
       <Caption
-          {...props}
           size="lg"
+          {...props}
       >
         {'Large Block'}
       </Caption>
       <Caption
-          {...props}
           size="xs"
+          {...props}
       >
         {'Subcaption Block'}
       </Caption>

data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx CHANGED

@@ -5,18 +5,18 @@ const CaptionLight = (props) => {
   return (
     <div>
       <Caption
-          {...props}
           text="Caption"
+          {...props}
       />
       <Caption
-          {...props}
           size="lg"
           text="Caption Large"
+          {...props}
       />
       <Caption
-          {...props}
           size="xs"
           text="Subcaption"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx CHANGED

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Caption } from '../../'
-const CaptionVariants = () => {
+const CaptionVariants = (props) => {
   return (
     <div>
       <Caption
           size="xs"
           text="Subcaption (link)"
           variant="link"
+          {...props}
       />
     </div>
   )

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

@@ -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 CHANGED

@@ -3,6 +3,7 @@
 [class^=pb_card_kit] {
   @include pb_card;
+  overflow: auto;
   &[class*=_selected] {
     @include pb_card_selected;
@@ -26,12 +27,15 @@
     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);
       }
     }
+    &[class*=_white] {
+      border-bottom: 1px solid $border_light;
+    }
   }
   [class^=pb_card_body_kit] {
@@ -41,7 +45,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 CHANGED

@@ -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 CHANGED

@@ -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