Update Success And Error Props (#1900)

* Converting title kit to ts (#1872) * Removed flow and Renamed file * Updated Types * Removed JSX file extentions from imports * Fix syntax error * Fix tests Co-authored-by: Erica Winne <erica.winne@powerhrg.com> * Converting caption to tsx (#1874) * Started Converting * Rename file to TSX and Updated types * Added/Joined & GlobalProps * Merge Master * Changed back default blank string Co-authored-by: Erica Winne <erica.winne@powerhrg.com> * [PLAY-142] Visual Guidelines - Switch to React - Examples Template (#1849) * Rendered rough example in browser * Section separator between props and values * Added pills and continued to change styling * Fixed width of cards * Fixed flexitem alignment * Added title and body kits * Fixed more styling * Changed out background kit to fix border radius * Fixed border radius * Fixed border radius on other templates * Updated caption card * Fixed title margins * Corrected camelcase in pills * Three templates for visual guidelines * Fixed syntax error * Fixed syntax again * Testing client-side code example colorization * Use Rouge to format code examples * Template Complete Co-authored-by: Stephen Marshall <smarshall1980@gmail.com> * Changed status props to success and error * Updated specs * Changed status props back, added error and success to color, updated specs * Uncommitted changes now adding back in * Merge master * Merged master * Deprecated status prop in rails * Deprecated status prop in react side * Add jest color prop coverage Co-authored-by: Stephen Marshall <smarshall1980@gmail.com> Co-authored-by: Erica Winne <erica.winne@powerhrg.com> Co-authored-by: Kurstyn Storms <84343098+KurstynStorms@users.noreply.github.com>
powerhome · Jun 6, 2022 · 778c08b · 778c08b
1 parent 0b5d184
commit 778c08b
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 34 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_body/_body.scss b/playbook/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 @@
       }
     }
   }
- 
+
 }
diff --git a/playbook/app/pb_kits/playbook/pb_body/_body.tsx b/playbook/app/pb_kits/playbook/pb_body/_body.tsx
@@ -2,27 +2,28 @@ 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'
 
 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',
 } & GlobalProps
 
 const Body = (props: BodyProps): React.ReactElement => {
+  if (props.variant) deprecatedProps("Body", ["status"]) //status prop is deprecated, use color instead please
   const {
     aria = {},
     children,

diff --git a/playbook/app/pb_kits/playbook/pb_body/_body_mixins.scss b/playbook/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);
-}
+}
diff --git a/playbook/app/pb_kits/playbook/pb_body/body.rb b/playbook/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"

diff --git a/playbook/app/pb_kits/playbook/pb_body/body.test.js b/playbook/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}`)
+  })
 })
diff --git a/playbook/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb b/playbook/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"
 }) %>
diff --git a/playbook/app/pb_kits/playbook/pb_body/docs/_body_light.jsx b/playbook/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>

diff --git a/playbook/app/pb_kits/playbook/pb_body/docs/_description.md b/playbook/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.
diff --git a/playbook/app/pb_kits/playbook/pb_body/docs/_footer.md b/playbook/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.
diff --git a/playbook/spec/pb_kits/playbook/kits/body_spec.rb b/playbook/spec/pb_kits/playbook/kits/body_spec.rb
@@ -8,7 +8,7 @@
   it {
     is_expected.to define_enum_prop(:color)
       .with_default("default")
-      .with_values("default", "light", "lighter", "link")
+      .with_values("default", "light", "lighter", "link", "success", "error")
   }
   it { is_expected.to define_boolean_prop(:dark).with_default(false) }
   it {