playbook_ui 11.0.0.pre.alpha.2 → 11.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6d28e27927e8602f94b1e7899dc68b885a4d6e1c16d68a1fe9193f1906ac4612
-  data.tar.gz: d4e34b7ed0c56ef0115540018aa793a9916d1c7289262b7100e3096bb0c0b8ec
+  metadata.gz: 3801f19c66a84d1760c5731a046e20df793ba1a7f5f2d5df91f51422b521c065
+  data.tar.gz: 80abfc9506e8ea1de5d864356f946091a55073419aee8b900de11d2fbec5f7ac
 SHA512:
-  metadata.gz: c3e96e40585f37e05faecc618cff08a9c073c3e296aafe6044bbecf647c7011d6042008714d412f8844232a1b68d256060c7ab82a869c1553cb143ac8dfbef4c
-  data.tar.gz: 2b4b0344dcc62a9e841c41c88a7a8a027d6c442720d2ada777118ae1470fd1eb81e54ec458f3ff19cedb3877df52382ce8c87c03ed1cd926a8720ff46cc87c8b
+  metadata.gz: 1a7cd6defa69aaaa7f3b4b7352f719e9dc7941ec1ae8a0dd272b69e6de3769d8f53bcfbf9b6f56bb40b69c713332b1c0f1336c769994f846c4a7b395c7feffae
+  data.tar.gz: 55e41eecece21925e7378faa6c7834369cccef09d0737eb0f8c7165e7db6fd3f5ed96fdd4721b218cdb54c44bb4b12ff2ebd908887108581f1843050590671fe

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

@@ -5,11 +5,18 @@ $additional_colors: (
   "dark": $bg_dark,
   "light": $bg_light,
   "white": $white,
+  "primary": $primary_action,
+  "shadow": $shadow,
 );
 
 $merge_kits1: map-merge($status_colors, $category_colors);
 $merge_kits2: map-merge($merge_kits1, $product_colors);
-$background_colors: map-merge($additional_colors, $merge_kits2);
+$merge_kits3: map-merge($merge_kits2, $text_colors);
+$merge_kits4: map-merge($merge_kits3, $card_colors);
+$merge_kits5: map-merge($merge_kits4, $status_colors);
+$merge_kits6: map-merge($merge_kits5, $data_colors);
+$merge_kits7: map-merge($merge_kits6, $border_colors);
+$background_colors: map-merge($additional_colors, $merge_kits7);
 
 [class^=pb_background_kit] {
   max-width: 100%;

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

@@ -6,7 +6,15 @@ import { GlobalProps, globalProps } from '../utilities/globalProps'
 type BackgroundProps = {
   alt?: string,
   aria?: {[key: string]: string},
-  backgroundColor?: 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' | 'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' | 'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21',
+  backgroundColor?: 'gradient' |
+  'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
+  'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' |
+  'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' |
+  'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21' |
+  'text_lt_default' | 'text_lt_light' | 'text_lt_lighter' | 'text_dk_default' | 'text_dk_light' | 'text_dk_lighter' |
+  'card_light' | 'card_dark' | 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7' | 'data_8' |
+  'border_light' | 'border_dark' | 'success_secondary' | 'error_secondary' | 'info_secondary' | 'warning_secondary' |
+  'neutral_secondary' | 'primary_secondary',
   backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
   backgroundSize?: 'auto' | 'cover' | 'contain',
   children?: React.ReactChild[] | React.ReactNode,

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

@@ -1,34 +1,93 @@
 # frozen_string_literal: true
 
+# rubocop:disable Layout/HashAlignment
+
 module Playbook
   module PbBackground
     class Background < Playbook::KitBase
       prop :background_color, type: Playbook::Props::Enum,
-                              values: %w[gradient dark light white success warning error info neutral primary category_1 category_2 category_3 category_4 category_5 category_6 category_7 category_8 category_9 category_10 category_11 category_12 category_13 category_14 category_15 category_16 category_17 category_18 category_19 category_20 category_21],
+                              values: %w[
+                                gradient
+                                dark
+                                light
+                                white
+                                success
+                                warning
+                                error
+                                info
+                                neutral
+                                primary
+                                shadow
+                                category_1
+                                category_2
+                                category_3
+                                category_4
+                                category_5
+                                category_6
+                                category_7
+                                category_8
+                                category_9
+                                category_10
+                                category_11
+                                category_12
+                                category_13
+                                category_14
+                                category_15
+                                category_16
+                                category_17
+                                category_18
+                                category_19
+                                category_20
+                                category_21
+                                success_secondary
+                                error_secondary
+                                info_secondary
+                                warning_secondary
+                                neutral_secondary
+                                primary_secondary
+                                text_lt_default
+                                text_lt_light
+                                text_lt_lighter
+                                text_dk_default
+                                text_dk_light
+                                text_dk_lighter
+                                card_light
+                                card_dark
+                                data_1
+                                data_2
+                                data_3
+                                data_4
+                                data_5
+                                data_6
+                                data_7
+                                data_8
+                                border_light
+                                border_dark
+                              ],
                               default: "light"
 
       prop :background_repeat, type: Playbook::Props::Enum,
-                               values: %w[
-                                 repeat
-                                 repeat-x
-                                 repeat-y
-                                 no-repeat
-                                 space
-                                 round
-                                 initial
-                                 inherit
-                               ],
-                               default: "initial"
+                                values: %w[
+                                  repeat
+                                  repeat-x
+                                  repeat-y
+                                  no-repeat
+                                  space
+                                  round
+                                  initial
+                                  inherit
+                                ],
+                                default: "initial"
 
       prop :background_size, type: Playbook::Props::Enum,
-                             values: %w[contain cover auto],
-                             default: "cover"
+                              values: %w[contain cover auto],
+                              default: "cover"
 
       prop :image_url
 
       prop :tag, type: Playbook::Props::Enum,
-                 values: %w[h1 h2 h3 h4 h5 h6 p div span],
-                 default: "div"
+                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
+                  default: "div"
 
       prop :transition, type: Playbook::Props::Enum,
                         values: ["blur", "fade", "scale", nil],
@@ -55,3 +114,4 @@ module Playbook
     end
   end
 end
+# rubocop:enable Layout/HashAlignment

data/app/pb_kits/playbook/pb_background/docs/_background_status.html.erb

@@ -1,13 +1,25 @@
-<div class="pb--doc-demo-row">
+<%= pb_rails("flex", props: {gap: "md", justify: "center", wrap: true}) do %>
   <%= pb_rails("background", props: { background_color: "success", padding: "xl" }) do %> <% end %>
   <br>
+  <%= pb_rails("background", props: { background_color: "success_secondary", padding: "xl" }) do %> <% end %>
+  <br>
   <%= pb_rails("background", props: { background_color: "warning", padding: "xl" }) do %> <% end %>
+  <br>
+   <%= pb_rails("background", props: { background_color: "warning_secondary", padding: "xl" }) do %> <% end %>
   <br>
   <%= pb_rails("background", props: { background_color: "error", padding: "xl" }) do %> <% end %>
   <br>
+  <%= pb_rails("background", props: { background_color: "error_secondary", padding: "xl" }) do %> <% end %>
+  <br>
   <%= pb_rails("background", props: { background_color: "info", padding: "xl" }) do %> <% end %>
+  <br>
+    <%= pb_rails("background", props: { background_color: "info_secondary", padding: "xl" }) do %> <% end %>
   <br>
   <%= pb_rails("background", props: { background_color: "neutral", padding: "xl" }) do %> <% end %>
   <br>
+  <%= pb_rails("background", props: { background_color: "neutral_secondary", padding: "xl" }) do %> <% end %>
+  <br>
   <%= pb_rails("background", props: { background_color: "primary", padding: "xl" }) do %> <% end %>
-</div>
+  <br>
+  <%= pb_rails("background", props: { background_color: "primary_secondary", padding: "xl" }) do %> <% end %>
+<%end%>

data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx

@@ -1,44 +1,85 @@
 import React from 'react'
 import { Background } from '../..'
+import { Flex } from '../..'
 
 const BackgroundStatus = (props) => (
-  <div className="pb--doc-demo-row">
+<Flex
+    gap="md"
+    justify="center"
+    wrap
+>
     <Background
         backgroundColor="success"
         padding="xl"
         {...props}
     />
     <br />
+    <Background
+        backgroundColor="success_secondary"
+        padding="xl"
+        {...props}
+    />
+     <br />
     <Background
         backgroundColor="warning"
         padding="xl"
         {...props}
     />
     <br />
+    <Background
+        backgroundColor="warning_secondary"
+        padding="xl"
+        {...props}
+    />
+    <br />
     <Background
         backgroundColor="error"
         padding="xl"
         {...props}
     />
     <br />
+    <Background
+        backgroundColor="error_secondary"
+        padding="xl"
+        {...props}
+    />
+    <br />
     <Background
         backgroundColor="info"
         padding="xl"
         {...props}
     />
     <br />
+    <Background
+        backgroundColor="info_secondary"
+        padding="xl"
+        {...props}
+    />
+    <br />
     <Background
         backgroundColor="neutral"
         padding="xl"
         {...props}
     />
     <br />
+    <Background
+        backgroundColor="neutral_secondary"
+        padding="xl"
+        {...props}
+    />
+    <br />
     <Background
         backgroundColor="primary"
         padding="xl"
         {...props}
     />
-  </div>
+    <br />
+    <Background
+        backgroundColor="primary_secondary"
+        padding="xl"
+        {...props}
+    />
+  </Flex>
 )
 
 export default BackgroundStatus

data/app/pb_kits/playbook/pb_background/docs/_background_status.md

@@ -1 +1 @@
-Status colors can be passed into the background kit. `success`, `warning`, `error`, `info`, `neutral`, and `primary`
+Status colors can be passed into the background kit. `success`, `success_secondary`, `warning`, `warning_secondary`, `error`, `error_secondary`, `info`, `info_secondary`, `neutral`, `neutral_secondary`, `primary`, and `primary_secondary`

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import {
   buildAriaProps,
   buildCss,
@@ -26,7 +26,6 @@ type BadgeProps = {
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 } & GlobalProps
-
 const Badge = (props: BadgeProps) => {
   const {
     aria = {},

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

@@ -15,10 +15,10 @@
 
   @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
     &[class*=_#{$dark_color_name}][class*=dark]{
-      @include pb_body($dark_color_value); 
+      @include pb_body($dark_color_value);
     }
   }
-  
+
   @each $status_name, $status_value in $pb_body_status {
     &[class*=#{$status_name}] {
       @include pb_body($status_value);
@@ -29,7 +29,7 @@
     @include pb_body_dark();
     @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
       &[class*=_#{$dark_color_name}][class*=dark]{
-        @include pb_body($dark_color_value); 
+        @include pb_body($dark_color_value);
       }
     }
     @each $status_name, $status_value in $pb_body_status {
@@ -38,5 +38,5 @@
       }
     }
   }
- 
+
 }

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Highlight from '../pb_highlight/_highlight'
 
@@ -10,19 +10,20 @@ type BodyProps = {
   aria?: {[key: string]: string},
   className?: string,
   children?: React.ReactChild[] | React.ReactChild,
-  color?: 'default' | 'light' | 'lighter' | 'link',
+  color?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
   dark?: boolean,
   data?: {[key: string]: string},
   highlightedText?: string[],
   highlighting?: boolean,
   id?: string,
-  status?: 'negative' | 'neutral' | 'positive',
+  status?: 'neutral' | 'negative' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
-  variant: null | 'link',
+  variant?: null | 'link',
 } & GlobalProps
 
 const Body = (props: BodyProps): React.ReactElement => {
+  if (props.variant) deprecatedProps("Body", ["status"]) //status prop is deprecated, use color instead please
   const {
     aria = {},
     children,

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

@@ -7,19 +7,23 @@ $pb_body_colors: (
   light:          $text_lt_light,
   lighter:        $text_lt_lighter,
   link:           $primary,
+  error:          $error,
+  success:        $success,
 );
 
 $pb_dark_body_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
   lighter:        $text_dk_lighter,
+  error:          $error,
+  success:        $success,
 );
 
 // Order is important here!
 $pb_body_status: (
   default:        $text_lt_default,
   negative:       $error,
-  dark_negative:  $error_dark_body,
+  dark_error:     $error_dark_body,
   positive:       $success,
 );
 
@@ -58,10 +62,10 @@ $pb_body_status: (
   @include pb_body($error);
 }
 
-@mixin pb_body_dark_negative {
+@mixin pb_body_dark_error {
   @include pb_body($error_dark_body);
 }
 
 @mixin pb_body_positive {
   @include pb_body($success);
-}
+}

data/app/pb_kits/playbook/pb_body/body.rb

@@ -4,11 +4,12 @@ module Playbook
   module PbBody
     class Body < Playbook::KitBase
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[default light lighter link],
+                   values: %w[default light lighter link success error],
                    default: "default"
       prop :status, type: Playbook::Props::Enum,
-                    values: %w[neutral negative positive],
-                    default: "neutral"
+                    values: %w[neutral positive negative],
+                    default: "neutral",
+                    deprecated: true
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[h1 h2 h3 h4 h5 h6 p span div],
                  default: "div"

data/app/pb_kits/playbook/pb_body/body.test.js

@@ -16,14 +16,17 @@ test('returns namespaced class name', () => {
 })
 
 test('with colors', () => {
-  render(
-    <Body
-        color="success"
-        data={{ testid: 'primary-test' }}
-        text="Test colors"
-    />
-  )
+  ['light', 'lighter', 'link', 'success', 'error'].forEach((color) => {
+    const testId = `colors-test-${color}`
+    render(
+      <Body
+          color={color}
+          data={{ testid: testId }}
+          text="Test colors"
+      />
+    )
 
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_body_kit_success')
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_body_kit_${color}`)
+  })
 })

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb

@@ -18,11 +18,11 @@
 }) %>
 
 <%= pb_rails("body", props: {
-  text: "I am a body kit (Status: negative)",
-  status: "negative"
+  text: "I am a body kit (Error)",
+  color: "error"
 }) %>
 
 <%= pb_rails("body", props: {
-  text: "I am a body kit (Status: positive)",
-  status: "positive"
+  text: "I am a body kit (Success)",
+  color: "success"
 }) %>

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -24,13 +24,13 @@ const BodyLight = (props) => {
           {...props}
       />
       <Body
-          status="negative"
-          text="I am a body kit (Status: negative)"
+          color="error"
+          text="I am a body kit (Error)"
           {...props}
       />
       <Body
-          status="positive"
-          text="I am a body kit (Status: positive)"
+          color="success"
+          text="I am a body kit (Success)"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_body/docs/_description.md

@@ -1,2 +1,2 @@
-Default text style for paragraphs. Follow hiearchy when using "light" or "lighter" variants to deemphasize text — default style should be followed by "light" followed by "lighter".  
-Use "positive" and "negative" for status. View footer notes for things to avoid.
+Default text style for paragraphs. Follow hiearchy when using "light" or "lighter" variants to deemphasize text — default style should be followed by "light" followed by "lighter".
+Use "success" and "error" for status. View footer notes for things to avoid.

data/app/pb_kits/playbook/pb_body/docs/_footer.md

@@ -1,2 +1,2 @@
 ### Things to Avoid
-Do not use positive and negative variants with each other. Use <a href="https://playbook.powerapp.cloud/kits/pill">Pill Kit</a> to show status if the text is short. Otherwise, use positive and negative variants and use them sparingly. 
+Do not use positive and negative variants with each other. Use <a href="https://playbook.powerapp.cloud/kits/pill">Pill Kit</a> to show status if the text is short. Otherwise, use positive and negative variants and use them sparingly.

data/app/pb_kits/playbook/pb_button/button.rb

@@ -38,11 +38,11 @@ module Playbook
       end
 
       def link_options
-        options.merge(
-          href: link,
-          role: "link",
-          target: new_window ? "_blank" : "_self"
-        )
+        options.tap do |option|
+          option[:href] = link
+          option[:role] = "link"
+          option[:target] = "_blank" if new_window
+        end
       end
 
       def tag

data/app/pb_kits/playbook/pb_caption/_caption.tsx

@@ -5,7 +5,7 @@ import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalPr
 
 type CaptionProps = {
   aria?: {[key: string]: string},
-  children: React.ReactChild[],
+  children?: React.ReactChild[],
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},

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

@@ -14,6 +14,8 @@ $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
   link:           $primary,
+  success:        $success,
+  error:          $error,
 );
 
 
@@ -48,4 +50,4 @@ $pb_dark_caption_colors: (
       color: $color
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb

@@ -1,3 +1,4 @@
 <%= pb_rails("caption", props: { text: "Test colors" }) %>
 <%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
-<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "error" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

@@ -13,6 +13,11 @@ const CaptionColors = (props) => {
           text="Test colors"
           {...props}
       />
+      <Caption
+          color="error"
+          text="Test colors"
+          {...props}
+      />
       <Caption
           color="link"
           text="Test colors"

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

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
-import type { ProductColors, CategoryColors, BackgroundColors } from '../types'
+import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
 type CardPropTypes = {
   aria?: {[key: string]: string},
@@ -83,10 +83,10 @@ const Card = (props: CardPropTypes) => {
   const borderCSS = borderNone == true ? 'border_none' : ''
   const selectedCSS = selected == true ? 'selected' : 'deselected'
   const backgroundCSS = background == 'none' ? '' : `background_${background}`
-  const cardCss = buildCss('pb_card_kit', selectedCSS, borderCSS, `border_radius_${borderRadius}`, backgroundCSS,
-    `highlight_${highlight.position}`,
-    `highlight_${highlight.color}`,
-  )
+  const cardCss = buildCss('pb_card_kit', selectedCSS, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
+    [`highlight_${highlight.position}`]: highlight.position,
+    [`highlight_${highlight.color}`]: highlight.color,
+  })
   const ariaProps: {[key: string]: string} = buildAriaProps(aria)
   const dataProps: {[key: string]: string} = buildDataProps(data)