playbook_ui 7.12.1 → 7.15.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76db663b65350ec3f036853f672a99eb7e62addc7f28184b1053376bbde92e1f
-  data.tar.gz: 5c41351c08585e60804c594c118eca69121a696a36ed5d4dfe42b0e7f71a9baf
+  metadata.gz: 314da7ed0bc2cb7982bfaf10af7826efbb8822ad5ab5030433daf1bde9267398
+  data.tar.gz: 4ee326fa35a415359b0633ce7138526ce1c1346a0991ad079fb3307f350c432f
 SHA512:
-  metadata.gz: 4a32adf1b5e466f16d27c5f3ef87c85e77b5222b1c2876961f8bfeefd9293c97935c4765ea69fca85a49c66016dd9272726a64cf76e478eda7f3170393b01f15
-  data.tar.gz: 1e1e8952f87a4eb7ac560cb98131ec96acd340296bfd504ac539cf1ab6681b4dc55b64a7fedb241fbba4474ed541b33627d2444a31463b9343c94e2f2f73f80f
+  metadata.gz: 25a9b84de3294b16d92378e48d5192ba6b444623a5161f3e64d0a68b52637cbef1949334d6cc72852dd4f85e414e827b413857afea83a0d1092c6331d79928ee
+  data.tar.gz: c565fd03afa4505e9e0126a868d1acd67baa86fe293f9c84db4248ebd417b8da4c3ab8042092d6130ed9353343f79c87ef59066ce5a699807624dce1c129bd93

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

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

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] {