playbook_ui 7.13.0 → 7.14.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 339e7eb831a191f85cd95d143b88818216f350a78ec38992e50a90ab1b50be2b
-  data.tar.gz: 8af38244f70df603708855cb9d470e0fa1643c0f9a0f3bfdfb25adc3fcd8add9
+  metadata.gz: a51b6024a6b3ca509d82f298e232022e404c173b21cd22f22d54cd448f2626ac
+  data.tar.gz: fc0ff76f76764102390ddf0c71b5b54f4e0419fc79e183f919ac09b790221a5e
 SHA512:
-  metadata.gz: 07e97af69c7e47fcd4bb457134be6f8f61cae1705924542ce55ea0f897224b48d48cd799b6fff456771e43c4abedeb5653a20842373dc2e83d40d7ecab3a1805
-  data.tar.gz: 842d3bbbdd41bee99ccf142a5b4f64e8f3004cf303a1c5ad20b192570434f73258dc6a95c67f4a981fc0d701a7e9cf9923660cbc603a32f9a9e58628bda75c59
+  metadata.gz: 7df24634215015e6133ec2da8704cb0920a2f39cb3d6cf6d2dd131cf243f56f05a61a20249f0d11a4044e9d2fb69da2504c39dce9d992cb33e06429b5b4c9445
+  data.tar.gz: fbbd607ba23335bf90d5cfdbf0221dcbfce2fbc6ee9a1d2ee07c0796a84a84c4280fdb0d1b5bf7e9999d0de5737db02be32da25c97f11b806f192b2e5265ba9c

data/app/helpers/playbook/application_helper.rb

@@ -5,6 +5,10 @@ module Playbook
     include ::Webpacker::React::Helpers
     include ::Playbook::PbKitHelper
 
+    def current_webpacker_instance
+      Playbook.webpacker
+    end
+
     def pb_rails(kit, props: {}, &block)
       super kit, props: dark_mode_props(props), &block
     end

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/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_checkbox/_checkbox.html.erb

@@ -9,6 +9,7 @@
   <% end %>
     <span class="pb_checkbox_checkmark">
       <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: "minus" , id: "indeterminate_icon", classname: "indeterminate_icon hidden", fixed_width: true}) %>
     </span>
     <span class="pb_checkbox_label">
       <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import Body from '../pb_body/_body.jsx'
 import Icon from '../pb_icon/_icon.jsx'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -15,6 +15,7 @@ type CheckboxProps = {
   data?: object,
   error?: boolean,
   id?: string,
+  indeterminate?: boolean,
   name: string,
   text: string,
   value: string,
@@ -31,6 +32,7 @@ const Checkbox = (props: CheckboxProps) => {
     data = {},
     error = false,
     id,
+    indeterminate = false,
     name = '',
     text = '',
     value = '',
@@ -41,11 +43,22 @@ const Checkbox = (props: CheckboxProps) => {
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_checkbox_kit', { checked, error }),
+    buildCss('pb_checkbox_kit', { checked, error, indeterminate }),
     globalProps(props),
     className
   )
 
+  const [ isChecked, toggleCheck ] = useState(checked)
+
+  useEffect(() => {
+    toggleCheck(checked)
+  }, [checked])
+
+  const handleClick = () => {
+    toggleCheck(!isChecked)
+    onChange(!isChecked)
+  }
+
   return (
     <label
         {...ariaProps}
@@ -57,21 +70,34 @@ const Checkbox = (props: CheckboxProps) => {
         {children}
         <Else />
         <input
-            defaultChecked={checked}
+            checked={isChecked}
             name={name}
             onChange={onChange}
+            onClick={handleClick}
             type="checkbox"
             value={value}
         />
       </If>
+      <If condition={!indeterminate}>
+        <span className="pb_checkbox_checkmark">
+          <Icon
+              className="check_icon"
+              fixedWidth
+              icon="check"
+          />
+        </span>
+      </If>
+
+      <If condition={indeterminate && checked}>
+        <span className="pb_checkbox_indeterminate">
+          <Icon
+              className="indeterminate_icon"
+              fixedWidth
+              icon="minus"
+          />
+        </span>
+      </If>
 
-      <span className="pb_checkbox_checkmark">
-        <Icon
-            className="check_icon"
-            fixedWidth
-            icon="check"
-        />
-      </span>
       <Body
           className="pb_checkbox_label"
           dark={dark}

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

@@ -3,7 +3,7 @@
 $transition: $transition_cubic;
 
 [class^=pb_checkbox_kit] {
-  display: inline-flex;
+  display: flex;
   cursor: pointer;
   .pb_checkbox_label {
     padding-left: $space_xs;
@@ -11,24 +11,30 @@ $transition: $transition_cubic;
     font-size: $text_lt_default;
     user-select: none;
   }
-  .pb_checkbox_checkmark {
-    position: relative;
-    height: 22px;
-    width: 22px;
+
+  .pb_checkbox_checkmark, .pb_checkbox_indeterminate {
+    align-items: center;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
+    height: 22px;
+    position: relative;
     transition: background $transition_default ease, border-color $transition_default ease;
-    .check_icon {
-      opacity: 0;
-      position: relative;
-      top: -2px;
-      left: 1px;
-      height: 16px;
-      width:16px;
+    width: 22px;
+    .check_icon,
+    .indeterminate_icon {
       color: $white;
-
+      height: 16px;
+      left: 1px;
+      position: relative;
+      display: flex;
+      opacity: 0;
+      width: 16px;
+      &.hidden {
+        display: none;
+      }
     }
   }
+
   @media (hover:hover) {
     &:hover input ~ .pb_checkbox_checkmark {
       border-color: $primary_action;
@@ -36,26 +42,26 @@ $transition: $transition_cubic;
   }
 
   input {
-    position: relative;
-    opacity: 0;
     cursor: pointer;
+    display: flex;
     height: 0;
+    opacity: 0;
+    position: relative;
     width: 0;
-    display: none;
-    &:checked ~ .pb_checkbox_checkmark {
+    &:checked ~ .pb_checkbox_checkmark,
+    &:checked ~ .pb_checkbox_indeterminate {
       background-color: $primary_action;
       border-color: $primary_action;
     }
     &:checked ~ .pb_checkbox_checkmark {
       display: inline-block;
-      .check_icon{
+      .check_icon,
+      .indeterminate_icon {
         opacity: $opacity_10;
       }
     }
   }
 
-
-
   &[class*=_dark] {
     input:checked ~ .pb_checkbox_checkmark {
       background-color: $primary_action;