playbook_ui 7.12.0 → 7.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2f0153766cfb54016c6c47a9ff05b6e8dfc9d2c13c4a993280933e76d9cd55ae
-  data.tar.gz: 42917389602507a9c1050e84c898ff760a784ea7c528e3cd88e729020b107a5d
+  metadata.gz: e9880537826f76dc7f18ff8b57b2172d82daafcb82f24919edfc485d47dc7883
+  data.tar.gz: 4d5f0958a3ff10a277ecc5502af44757ded31c7dd47765ede532f14b2deeef80
 SHA512:
-  metadata.gz: 1a15428526f2bd610955600f6fe4f5ec729bafce5c01c1b21dc6ee91358b3c2f1f9fa3c1a0cb63192d6950b1727a42c0c21c05c9fc1db9561e1140e44de14559
-  data.tar.gz: 3706963d4e763e1017ce528423ce2a3338a7ddbfb3c184b8700b44d872a5d2495e62d67ca73140150e846dbd9172e2e1aadeb6a864a1ca214191a0c37ba86101
+  metadata.gz: '036039217060cb4201c7fd673b9365738fe913cb9ca0863fd785ae3467d21b80dbf75124305179f7d8daef047fc4bd610339e200ef7962369be50049e082e961'
+  data.tar.gz: be21f0886b1254b9129b1777e95513925e7afbdad13a9654c414246b654465468e6accb23a1c4342c8ac5c930fcc030a59f7e0263326f725bd0bedb3e5b8e6a9

data/app/helpers/playbook/pb_doc_helper.rb

@@ -57,7 +57,8 @@ module Playbook
     end
 
     def get_kits
-      MENU["kits"]
+      menu = YAML.load_file("#{Playbook::Engine.root}/app/pb_kits/playbook/data/menu.yml")
+      menu["kits"]
     end
 
     def pb_category_kits(category_kits: [], type: "rails")

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

@@ -89,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/index.js

@@ -112,3 +112,4 @@ export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'
 export PbTooltip from './pb_tooltip'
+export PbTextarea from './pb_textarea'

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

@@ -3,6 +3,7 @@
 
 [class^=pb_card_kit] {
   @include pb_card;
+  overflow: auto;
 
   &[class*=_selected] {
     @include pb_card_selected;
@@ -26,7 +27,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 +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

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

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_date_range_stacked/docs/example.yml

@@ -2,10 +2,6 @@ examples:
   
   rails:
   - date_range_stacked_default: Default
-  - date_range_stacked_dark: Dark
-  
   
   react:
   - date_range_stacked_default: Default
-  - date_range_stacked_dark: Dark
-  

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

@@ -1,2 +1 @@
 export { default as DateRangeStackedDefault } from './_date_range_stacked_default.jsx'
-export { default as DateRangeStackedDark } from './_date_range_stacked_dark.jsx'

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

@@ -6,9 +6,6 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
-  - date_stacked_dark: Dark
-
-
 
   react:
   - date_stacked_default: Default
@@ -16,7 +13,3 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
-  - date_stacked_dark: Dark
-
-
-

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

@@ -3,5 +3,3 @@ export { default as DateStackedNotCurrentYear } from './_date_stacked_not_curren
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
 export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
 export { default as DateStackedAlign } from './_date_stacked_align.jsx'
-export { default as DateStackedDark } from './_date_stacked_dark.jsx'
-

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

@@ -2,10 +2,6 @@ examples:
 
   rails:
   - date_time_stacked_default: Default
-  - date_time_stacked_dark: Dark
-
 
   react:
   - date_time_stacked_default: Default
-  - date_time_stacked_dark: Dark
-

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

@@ -1,2 +1 @@
 export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
-export { default as DateTimeStackedDark } from './_date_time_stacked_dark.jsx'

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

@@ -2,8 +2,6 @@ examples:
 
   rails:
   - date_year_stacked_default: Default
-  - date_year_stacked_dark: Dark
 
   react:
   - date_year_stacked_default: Default
-  - date_year_stacked_dark: Dark

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

@@ -1,2 +1 @@
 export { default as DateYearStackedDefault } from './_date_year_stacked_default.jsx'
-export { default as DateYearStackedDark } from './_date_year_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx

@@ -6,6 +6,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type DistributionBarProps = {
   className?: string,
+  colors: array,
   data?: string,
   id?: string,
   size?: "lg" | "sm",
@@ -18,13 +19,13 @@ const normalizeCharacters = (widths) => {
   })
 }
 
-const barValues = (normalizedValues) => {
+const barValues = (normalizedValues, colors) => {
   const arrSum = (value) => value.reduce((a, b) => a + b, 0)
   const widthSum = arrSum(normalizedValues)
   return normalizedValues.map((value, i) => {
     return (
       <div
-          className="pb_distribution_width"
+          className={classnames('pb_distribution_width', colors[i] ? `color_${colors[i]}` : '')}
           key={i}
           style={{ width: `${(value * 100) / widthSum}%` }}
       />
@@ -33,12 +34,16 @@ const barValues = (normalizedValues) => {
 }
 
 const DistributionBar = (props: DistributionBarProps) => {
-  const { size = 'lg', widths = [1] } = props
+  const {
+    size = 'lg',
+    widths = [1],
+    colors = [],
+  } = props
   const normalizedValues = normalizeCharacters(widths)
 
   return (
     <div className={classnames(`pb_distribution_bar_${size}`, globalProps(props))}>
-      {barValues(normalizedValues)}
+      {barValues(normalizedValues, colors)}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss

@@ -5,21 +5,26 @@
   $small_bar: 8px;
   $large_bar: 36px;
   display: flex;
+  border-radius: $large_bar;
+  overflow: auto;
   .pb_distribution_width {
     height: 100%;
     display: inline-block;
-    @for $i from 1 through length($bar_colors) {
-      &:nth-child(#{length($bar_colors)}n+#{$i}) {
-        background-color: nth($bar_colors, $i);
+    @each $name, $color in $data_colors {
+      &:nth-child(#{length($data_colors)}n+#{index(($data_colors), ($name $color))}) {
+        background-color: $color;
+      }
+      &.color_#{$name} {
+        background-color: $color !important;
       }
     }
     &:first-child {
-      border-top-left-radius: 18px;
-      border-bottom-left-radius: 18px;
+      border-top-left-radius: $large_bar;
+      border-bottom-left-radius: $large_bar;
     }
     &:last-child {
-      border-top-right-radius: 18px;
-      border-bottom-right-radius: 18px;
+      border-top-right-radius: $large_bar;
+      border-bottom-right-radius: $large_bar;
     }
   }
   &[class*=_sm] {