playbook_ui 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2

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

@@ -2,9 +2,7 @@ examples:
   rails:
   - default_nav: Default
   - with_icons_nav: With Icons
-  - with_img_nav: With Custom Icon
   - no_highlight_nav: No Highlight
-  - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
@@ -15,13 +13,10 @@ examples:
   react:
   - default_nav: Default
   - with_icons_nav: With Icons
-  - with_img_nav: With Custom Icon
   - no_highlight_nav: No Highlight
-  - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
   - horizontal_nav: Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
-

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

@@ -3,9 +3,7 @@ export { default as HorizontalNav } from './_horizontal_nav.jsx'
 export { default as BlockNav } from './_block_nav.jsx'
 export { default as BlockNoTitleNav } from './_block_no_title_nav.jsx'
 export { default as NoHighlightNav } from './_no_highlight_nav.jsx'
-export { default as BorderlessNav } from './_borderless_nav.jsx'
 export { default as SubtleNav } from './_subtle_nav.jsx'
 export { default as SubtleNoHighlightNav } from './_subtle_no_highlight_nav.jsx'
 export { default as WithIconsNav } from './_with_icons_nav.jsx'
 export { default as SubtleWithIconsNav } from './_subtle_with_icons_nav.jsx'
-export { default as WithImgNav } from './_with_img_nav.jsx'

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -12,7 +12,6 @@ module Playbook
       prop :text
       prop :icon_left
       prop :icon_right
-      prop :image_url
 
       def classname
         generate_classname("pb_nav_list_kit_item", active_class)

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -17,19 +17,14 @@ module Playbook
                      values: %w[normal subtle],
                      default: "normal"
       prop :highlight, type: Playbook::Props::Boolean, default: true
-      prop :borderless, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
+        generate_classname("pb_nav_list", variant, orientation, highlight_class)
       end
 
       def highlight_class
         highlight ? "highlight" : nil
       end
-
-      def borderless_class
-        borderless ? "borderless" : nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_person/_person.jsx

@@ -32,11 +32,7 @@ const Person = (props: PersonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_person_kit'),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_person_kit'), className, globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -43,11 +43,7 @@ const PersonContact = (props: PersonContactProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_person_contact_kit'),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_person_contact_kit'), className, globalProps(props))
 
   const wrongContacts = () => (
     contacts.filter((contactObject) => (
@@ -77,23 +73,22 @@ const PersonContact = (props: PersonContactProps) => {
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
-            key={`valid-contact-${index}`}
+            key={index}
         />
-      ))}
+            ))}
       {wrongContacts().map((contactObject, index) => (
-        <div key={`wrong-contact-caption-wrapper-${index}`}>
+        <>
           <Caption
               className="wrong_numbers"
-              key={`wrong-contact-caption-${index}`}
               text="wrong number"
           />
           <Contact
               contactType={contactObject.contactType}
               contactValue={contactObject.contactValue}
-              key={`wrong-contact-${index}`}
+              key={index}
           />
-        </div>
-      ))}
+        </>
+          ))}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -23,7 +23,6 @@ const PersonContactWithWrongNumbers = () => {
             },
           ]}
           firstName="Pauline"
-          key="person-contact-1"
           lastName="Smith"
       />
     </>

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -12,7 +12,6 @@ $pb_pill_height: 22px;
   padding: 0 $space-sm/1.8;
   height: $pb_pill_height;
   border-radius: $pb_pill_height/2;
-  white-space: nowrap;
 
   @each $color_name, $color_value in $status_color_text {
     &[class*=_#{$color_name}]  {

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -78,11 +78,7 @@ const Popover = (props: PbPopoverProps) => {
   }
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_popover_kit'),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_popover_kit'), className, globalProps(props))
 
   return (
     <Popper

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -31,14 +31,12 @@
 
 .pb_popover_tooltip {
   opacity: 0;
+  animation-name: fadeOut;
+  animation-duration: 150ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
   visibility: hidden;
   pointer-events: none;
-  &.hide {
-    animation-name: fadeOut;
-    animation-duration: 150ms;
-    animation-timing-function: linear;
-    animation-fill-mode: forwards;
-  }
   &.show {
     animation-name: fadeIn;
     animation-duration: 150ms;

data/app/pb_kits/playbook/pb_popover/index.js

@@ -37,7 +37,7 @@ export default class PbPopover extends PbEnhancedElement {
 
       setTimeout(() => {
         this.popper.update()
-        this.toggleTooltip()
+        this.tooltip.classList.toggle('show')
       }, 0)
     })
   }
@@ -71,12 +71,10 @@ export default class PbPopover extends PbEnhancedElement {
 
   hideTooltip() {
     this.tooltip.classList.remove('show')
-    this.tooltip.classList.add('hide')
   }
 
   toggleTooltip() {
     this.tooltip.classList.toggle('show')
-    this.tooltip.classList.toggle('hide')
   }
 
   get triggerElement() {

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx

@@ -41,14 +41,14 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
   }
 
   const wrapperClass = classnames(
+    className,
     buildCss('pb_progress_simple_wrapper', align, { dark: dark }),
-    globalProps(props),
-    className
+    globalProps(props)
   )
 
   const kitClass = classnames(
-    buildCss('pb_progress_simple_kit', { muted }, variantStyle, align),
-    className
+    className,
+    buildCss('pb_progress_simple_kit', { muted: muted }, variantStyle, align)
   )
 
   return (

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx

@@ -13,14 +13,12 @@ type ProgressStepProps = {
   orientation?: "horizontal" | "vertical",
   icon?: boolean,
   variant?: string,
-  color?: string,
 }
 
 const ProgressStep = (props: ProgressStepProps) => {
   const {
     className,
     children,
-    color,
     orientation = 'horizontal',
     icon = false,
     variant,
@@ -31,11 +29,10 @@ const ProgressStep = (props: ProgressStepProps) => {
     orientation,
     iconStyle,
     variant,
-    color,
   )
 
   return (
-    <ul className={classnames(progressStepCss, globalProps(props), className)}>
+    <ul className={classnames(progressStepCss, className, globalProps(props))}>
       {children}
     </ul>
   )

data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss

@@ -4,17 +4,18 @@
 @import "../tokens/opacity";
 @import "../tokens/typography";
 
-
-
 [class^=pb_progress_step_kit]{
     list-style:none;
     display: flex;
+
   [class*=pb_progress_step_item] {
     display:flex;
+    flex-basis:100%;
     flex-direction:column;
+    justify-content:space-between;
     position: relative;
-    flex-basis: 100%;
-
+    align-items: center;
+    
     .circle {
         height:14px;
         width:14px;
@@ -38,6 +39,7 @@
         height: 4px;
         position: absolute;
         top: 5px;
+        left: -50%;
         width:100%;
         background-color:$border_light;
     }
@@ -56,7 +58,7 @@
         .circle{
             background-color: $white;
             border: solid 2px $primary;
-            color: rgba( $primary, 0)
+            color: rgba($color: $primary, $alpha: 0)
         }
         &::before{
             background-color: $primary;
@@ -72,163 +74,18 @@
         }
     }
   }
-// Start of Horizontal
+
   &[class*=horizontal]{
     flex-direction: row;
-    [class*=pb_progress_step_item]{
-        align-items: flex-end;
-        &::before{
-            width: calc(100% + .04em);
-        }
-        [class*=box]{
-           display: flex;
-           flex-direction: column;
-           align-items: center;
-           .content{
-               top: 16px;
-               position: absolute;
-               width: fit-content;
-               min-width: max-content;
-           }
-        }
-        &:first-child {
-            position: relative;
-            align-items: flex-start;
-            flex-basis: 0;
-            .box{
-                align-items: flex-start;
-            }
-        }
-        &:last-child{
-            .box{
-                align-items: flex-end;
-            }
-    
-        }
-    }
-    // Start of Tracker
-    &[class*=tracker] {
-        background-color: $border_light;
-        border-radius: 1rem;
-        height:24px;
-        align-items: center;
-        [class*=box]{
-            .circle{
-                box-shadow: none;
-                height: 24px;
-                width: 24px;
-                border: $primary solid 4px;
-            }
-            .content{
-                top:-24px;
-                position: absolute;  
-            }
-        }
-        li[class*=pb_progress_step_item]{
-            &::before{
-                background-color: $border_light;
-                height: 24px;
-                border-radius: 1rem;
-                top: 0;
-                width: calc(100% + 1.5em);
-            }
-            .box{
-                align-items: center;
-            }
-            &:first-child{
-                position: relative;
-                .box{
-                    align-items: flex-start;
-                }
-            }
-            &:last-child{
-                .box{
-                    align-items: flex-end;
-                }
-            }
-        }
-        li[class*=_active]{
-            .circle{
-                height: 24px;
-                width: 24px;
-                border: $primary solid 6px;
-                background-color: rgba($white, $opacity_8);
-            }
-            &::before {
-                background-color: $primary;
-            }
-        }
-        li[class*=_inactive]{
-            &::before {
-                display: none;
-                background-color: $border_light;
-            }
-            .circle{
-                background-color: darken($border_light,10%);
-                border: $border_light solid 6px;
-            }
-            
-        }
-        li[class*=_complete]{
-            &::before {
-                background-color: $primary;
-            }
-            .circle{
-                background-color: darken($primary,25%);
-            }
-        }
-        li[class*=_hidden]{
-            &::before, .circle {
-                display: none;
-            }
-        }
-        li[class*=_hidden] ~ li[class*=_active],
-        li[class*=_hidden] ~ li[class*=_complete] {
-            &::before {
-                width: calc(200% + 1.5em);
-            }
-        }
-        &[class*=dark]{
-            background-color: tint($bg_dark,20%);
-            [class*=_inactive]{
-                .circle{
-                    border-color: tint($bg_dark,20%);
-                }
-            }
-        }
-        &[class*=info]{
-            li[class*=inactive] .circle{
-                border-color: $border_light;
-            }
-            .box .circle , li[class*=_active] .circle{
-                border-color: $teal;
-            }
-            li[class*=_complete],li[class*=_active]{
-                &::before {
-                    background-color: $teal;
-                }
-            }
-            li[class*=_complete] .circle{
-                background-color: darken($teal,25%);
-            }
-        }
-    }
-    //End of Tracker
-
   }
-// End of Horizontal
 
-// Start of Vertical
   &[class*=vertical]{
     flex-direction: column; 
     [class*=pb_progress_step_item]{
-        [class*=box]{
-        display:flex;
         flex-direction: row;
         align-items: flex-start;
         justify-content: flex-start;
         margin: 8px;
-        }
         &::before {
             display: flex;
             flex-direction: column;
@@ -236,7 +93,7 @@
             height: 100%;
             position: absolute;
             top:14px;
-            left: 21px;
+            left: 13px;
             width:4px;
             background-color:$border_light;
         }
@@ -248,39 +105,47 @@
         }
     }
   }
-//End of Vertical
 
   &[class*=icon] [class*=_complete] svg{
     opacity: 1;
   }
 
   &[class*=dark] {
-    [class*=progress_step_item]{
-        &::before{
-            background-color: tint($bg_dark,20%);
-        }
-    }
     .circle{
-        box-shadow: 0 0 0 2px tint($bg_dark,10%);
+        box-shadow: 0 0 0 2px $bg_dark;
     }
     [class*=active]{
         .circle{
-            background-color: tint($bg_dark,10%);
-        }
-        &::before{
-            background-color: $primary;
+            background-color: $bg_dark;
         }
     }
     [class*=inactive]{
         .circle, &::before{
-           background-color: tint($bg_dark,20%);
+           background-color: tint($bg_dark,10%);
         }
     }
-    [class*=complete]{
-        .circle, &::before{
-           background-color: $primary;
+  }
+  &[class*=tracker] {
+    .circle{
+        box-shadow: none;
+    }
+    li[class*=pb_progress_step_item]{
+        flex-direction: column-reverse;
+        &::before{
+            background-color: $border_light;
+            top:auto;
+            bottom: 5px;
+        }
+    }
+    li[class*=active] .circle,li[class*=inactive] .circle{
+        background-color: $border_light;
+        border:none;
+    }
+    li[class*=complete]{
+        .circle, &::before {
+            background-color: $teal;
         }
     }
   }
 
-}
+}