playbook_ui 12.14.0 → 12.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a42d45fa9c0cb3563d9253c5c676edcd535e813873bca8f31162258372554bb9
-  data.tar.gz: 162a8abeed8d622e81d218e90c6a1d693a17d068d489234cbd0fb39f2c50ac7e
+  metadata.gz: '09b7fe35bd640bdcbba17570366775211743d1f85c44a5dcb00db8013936743a'
+  data.tar.gz: 1a1a2f1936efa02380ca89c963f98f6aff52288a929430ff67c7b1e71e2e61da
 SHA512:
-  metadata.gz: de1b0f03c8ca91aedae5581617fab0920bde4bfbaa034137021a0f3fe87932a6cb963231f9add0470a606046341d3c5a0b8d3819803ae7eb34af9415f4c340b6
-  data.tar.gz: e5f9702e6a3f812e3ae0080cc604406fbc7f115f2b1fcf7f83e2537e9502a833d93436abe3f3c9c0795d013791f62ba43631be32298891143a8fbf58728f2ef4
+  metadata.gz: 20f0ff15258af1f924fe0ca2233e296fa5b6ce1678c6151f3289daab6f0580b9bcd2b4647f98a1a926230f9ac6af6ec1e634f3e82a55ad5bf38e752074b193da
+  data.tar.gz: ac0008d312f15ddefaf2f012684a4bcd2f05a33c54c95f913421fe5784dbc85c6efaf2ba52b7b9b96259e1dc318e3f4482677cd900b3166d59d7b7d8a6fc73bf

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -67,7 +67,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
       >
         { canShowImage && (
           <Image
-              alt={imageAlt}
+              alt={imageAlt ? imageAlt : name}
               onError={handleError}
               url={imageUrl}
           />

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria) do %>
   <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
-    <%= pb_rails("image", props: { alt: object.image_alt, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+    <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
   <% end %>
   <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
 <% end %>

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -25,6 +25,10 @@ module Playbook
         { status: status, classname: "size_#{size}" }
       end
 
+      def alt_text
+        image_alt.present? ? image_alt : name
+      end
+
       def handle_img_error
         "this.style.display = 'none'"
       end

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -28,3 +28,17 @@ test('loads the given image url and name', () => {
   expect(image).toHaveAttribute('src', imageUrl)
   expect(image).toHaveAttribute('alt', imageAlt)
 })
+
+test('uses the name prop as the alt property if no imageAlt prop is passed in', () => {
+  render(
+    <Avatar
+        data={{ testid: testId }}
+        imageUrl={imageUrl}
+        name={name}
+    />
+  )
+
+  const image    = screen.getByAltText(name)
+
+  expect(image).toHaveAttribute('alt', name)
+})

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb

@@ -1,7 +1,6 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "xxs",
-    image_alt: "Terry Johnson Standing",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "away"
   }) %>

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -24,7 +24,7 @@ type BackgroundProps = {
   id?: string,
   imageUrl?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td',
   transition?: 'fade' | 'blur' | 'scale',
 } & GlobalProps
 

data/app/pb_kits/playbook/pb_background/background.rb

@@ -91,7 +91,7 @@ module Playbook
       prop :image_url
 
       prop :tag, type: Playbook::Props::Enum,
-                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
+                  values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td],
                   default: "div"
 
       prop :transition, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -43,6 +43,7 @@
     @each $color_name, $color_value in $status_colors {
       &[class*=_#{$color_name}]  {
         background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+        color: map-get($status_color_text_dark, $color_name);
       }
     }
   }

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -42,7 +42,7 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_badge_kit', variant, rounded ? 'rounded' : null),
+    buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -10,11 +10,15 @@ module Playbook
                      default: "neutral"
 
       def classname
-        generate_classname("pb_badge_kit", variant, rounded_class)
+        generate_classname("pb_badge_kit", variant_class, rounded_class)
       end
 
     private
 
+      def variant_class
+        variant === "success" ? "success_sm" : variant
+      end
+
       def rounded_class
         rounded ? "rounded" : nil
       end

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -60,7 +60,6 @@ test('displays rounded corners', () => {
 
 test('displays color variants', () => {
   [
-    "success",
     "warning",
     "error",
     "info"
@@ -78,3 +77,19 @@ test('displays color variants', () => {
     cleanup()
   })
 })
+
+test('displays success variant', () => {
+    render(
+      <Badge
+          data={{ testid: testId }}
+          text={"success"}
+          variant={"success"}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_badge_kit_success_sm
+    `)
+
+    cleanup()
+
+})

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -8,7 +8,7 @@ $pb_body_colors: (
   lighter:        $text_lt_lighter,
   link:           $primary,
   error:          $error,
-  success:        $success,
+  success:        $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
@@ -16,7 +16,7 @@ $pb_dark_body_colors: (
   light:          $text_dk_light,
   lighter:        $text_dk_lighter,
   error:          $error,
-  success:        $success,
+  success:        $text_dk_success_sm,
 );
 
 // Order is important here!
@@ -24,7 +24,7 @@ $pb_body_status: (
   default:        $text_lt_default,
   negative:       $error,
   dark_error:     $error_dark_body,
-  positive:       $success,
+  positive:       $text_lt_success_sm,
 );
 
 @mixin pb_body($color: $text_lt_default) {

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -6,7 +6,7 @@ $pb_caption_colors: (
   light:          $text_lt_light,
   link:           $primary,
   lighter:        $text_lt_lighter,
-  success:        $success,
+  success:        $text_lt_success_sm,
   error:          $error,
 );
 
@@ -14,7 +14,7 @@ $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
   link:           $primary,
-  success:        $success,
+  success:        $text_dk_success_sm,
   error:          $error,
 );
 

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -33,6 +33,19 @@
         color: lightenText($color_value);
       }
     }
+    @each $color_name, $color_value in $pb_card_header_colors {
+      &[class*=_#{$color_name}_striped] {
+        @if ((type-of($color_value) == color)) {
+          background: repeating-linear-gradient(
+            45deg,
+            $color_value,
+            $color_value 10px,
+            lighten( $color_value, 5% ) 10px,
+            lighten( $color_value, 5% ) 20px
+          );
+        }
+      }
+    }
     &[class*=_white] {
       border-bottom: 1px solid $border_light;
     }

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -28,6 +28,7 @@ type CardPropTypes = {
 
 type CardHeaderProps = {
   headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
+  headerColorStriped?: boolean,
   children: React.ReactChild[] | React.ReactChild,
   className?: string,
   padding?: string,
@@ -41,8 +42,8 @@ type CardBodyProps = {
 
 // Header component
 const Header = (props: CardHeaderProps) => {
-  const { children, className, headerColor = 'category_1', padding = 'sm' } = props
-  const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`)
+  const { children, className, headerColor = 'category_1', headerColorStriped = false, padding = 'sm' } = props
+  const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`, headerColorStriped ? 'striped' : '')
 
   const headerSpacing = globalProps(props, { padding })
 

data/app/pb_kits/playbook/pb_card/card_header.rb

@@ -5,9 +5,17 @@ module Playbook
     class CardHeader < Playbook::KitBase
       prop :header_color, type: Playbook::Props::String,
                           default: "category_1"
+      prop :header_color_striped, type: Playbook::Props::Boolean,
+                                  default: false
 
       def classname
-        generate_classname("pb_card_header_kit", header_color)
+        generate_classname("pb_card_header_kit", header_color, color_striped_classname)
+      end
+
+    private
+
+      def color_striped_classname
+        header_color_striped ? "striped" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -57,3 +57,14 @@
     Body
   <% end %>
 <% end %>
+
+<%= pb_rails("title", props: { text: "Striped Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_1", header_color_striped: true }) do %>
+    <%= pb_rails("body", props: { text: "Striped Category 1", dark: true }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
+    Body
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -1,158 +1,188 @@
 import React from 'react'
-
 import Card from '../_card'
 import Title from '../../pb_title/_title'
 import Body from '../../pb_body/_body'
 
 const CardHeader = (props) => {
-  return (
-    <div>
-      <Title
-          {...props}
-          marginBottom='sm'
-          size={4}
-          tag="h4"
-          text="Category Colors"
-      />
+    return (
+        <>
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Category Colors"
+            />
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header headerColor="category_1" >
+                    <Body
+                        dark
+                        text="Category 1"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="category_3"
+                >
+                    <Body text="Category 3" />
+                </Card.Header>
+                <Card.Body
+                    padding="md"
+                >
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
 
-      <Card
-          {...props}
-          marginBottom='sm'
-          padding="none"
-      >
-        <Card.Header headerColor="category_1" >
-          <Body
-              dark
-              text="Category 1"
-          />
-        </Card.Header>
-        <Card.Body>
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
 
-      <Card
-          {...props}
-          marginBottom='sm'
-          padding="none"
-      >
-        <Card.Header
-            headerColor="category_3"
-        >
-          <Body text="Category 3" />
-        </Card.Header>
-        <Card.Body
-            padding="md"
-        >
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Product Colors"
+            />
 
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="product_2_background"
+                >
+                    <Body
+                        {...props}
+                        dark
+                        text="Product 2 Background"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
 
-      <Title
-          {...props}
-          marginBottom='sm'
-          size={4}
-          tag="h4"
-          text="Product Colors"
-      />
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header headerColor="product_6_background" >
+                    <Body
+                        {...props}
+                        dark
+                        text="Product 6 Background"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
 
-      <Card
-          {...props}
-          marginBottom='sm'
-          padding="none"
-      >
-        <Card.Header
-            headerColor="product_2_background"
-        >
-          <Body
-              {...props}
-              dark
-              text="Product 2 Background"
-          />
-        </Card.Header>
-        <Card.Body>
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
 
-      <Card
-          {...props}
-          marginBottom='sm'
-          padding="none"
-      >
-        <Card.Header headerColor="product_6_background" >
-          <Body
-              {...props}
-              dark
-              text="Product 6 Background"
-          />
-        </Card.Header>
-        <Card.Body>
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Background Colors"
+            />
 
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="white"
+                >
+                    <Body text="White" />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
 
-      <Title
-          {...props}
-          marginBottom='sm'
-          size={4}
-          tag="h4"
-          text="Background Colors"
-      />
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="dark"
+                >
+                    <Body
+                        dark
+                        text="Dark"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
 
-      <Card
-          {...props}
-          marginBottom='sm'
-          padding="none"
-      >
-        <Card.Header
-            headerColor="white"
-        >
-          <Body text="White" />
-        </Card.Header>
-        <Card.Body>
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Striped Colors"
+            />
 
-      <Card
-          {...props}
-          padding="none"
-      >
-        <Card.Header
-            headerColor="dark"
-        >
-          <Body
-              dark
-              text="Dark"
-          />
-        </Card.Header>
-        <Card.Body>
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
-    </div>
-  )
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="category_1"
+                    headerColorStriped
+                >
+                    <Body
+                        dark
+                        text="Striped Category 1"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+        </>
+    )
 }
 
 export default CardHeader

data/app/pb_kits/playbook/pb_enhanced_element/index.ts

@@ -7,7 +7,7 @@ export default class PbEnhancedElement {
   static _observer: ElementObserver
   element: Element
 
-  constructor(element: Element) {
+  constructor(element?: Element) {
     this.element = element
   }
 

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -94,13 +94,13 @@ const IconStatValue = (props: IconStatValueProps) => {
 
       <div>
         <Flex
-            vertical="bottom"
+            align="baseline"
         >
-          {titleSize(size)}
+            {titleSize(size)}
           &nbsp;
-          <Body
-              text={unit}
-          />
+            <Body
+                text={unit}
+            />
         </Flex>
         <Caption text={text} />
       </div>

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -10,7 +10,7 @@
       variant: object.variant } %>
 
       <div>
-        <%= pb_rails("flex", props: { vertical: "bottom" }) do %>
+        <%= pb_rails("flex", props: { align: "baseline" }) do %>
             <%= pb_rails "title", props: {
                 tag: "span",
                 text: object.value_string,

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,7 +1,6 @@
 @import "../tokens/colors";
 
 $transform-rotate-deg: 135deg;
-$input-max-width: 284px;
 $dropdown-min-width: 340px;
 $flag-min-resolution: 192dpi;
 
@@ -10,10 +9,6 @@ $flag-min-resolution: 192dpi;
     color: $focus_input_light;
   }
 
-  .text_input {
-    max-width: $input-max-width;
-  }
-
   .dropdown_open {
     .text_input {
       border-color: $primary !important;