playbook_ui 15.3.0.pre.alpha.play262912095 → 15.3.0.pre.rc.0

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -12,7 +12,6 @@ const BreadCrumbsDefault = (props) => {
         {...props}
     >
       <Icon
-          color="link"
           icon="home"
           size="1x"
           {...props}
@@ -22,7 +21,6 @@ const BreadCrumbsDefault = (props) => {
           href="/home"
       >
         <Title
-            color="link"
             size="4"
             tag="span"
             text="Home"
@@ -30,7 +28,6 @@ const BreadCrumbsDefault = (props) => {
         />
       </BreadCrumbItem>
       <Icon
-          color="link"
           icon="users"
           size="1x"
           {...props}
@@ -40,7 +37,6 @@ const BreadCrumbsDefault = (props) => {
           href="/users"
       >
         <Title
-            color="link"
             size="4"
             tag="span"
             text="Users"

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -1 +1 @@
-Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.

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

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>  
+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_currency/_currency.tsx

@@ -11,7 +11,7 @@ import Title from '../pb_title/_title'
 type CurrencyProps = {
   abbreviate?: boolean,
   align?: 'center' | 'left' | 'right',
-  amount: string | number,
+  amount: string,
   aria?: {[key:string]:string},
   className?: string,
   dark?: boolean,
@@ -59,19 +59,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
-  // Convert numeric input to string format
-  const convertAmount = (input: string | number): string => {
-    if (typeof input === 'number') {
-      if (input === 0 && !nullDisplay) {
-        return ""
-      }
-      return input.toFixed(2)
-    }
-    return input
-  }
-
-  const currencyAmount = convertAmount(amount)
-
   const emphasizedClass = emphasized ? '' : '_deemphasized'
 
   let variantClass
@@ -81,7 +68,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [whole, decimal = '00'] = currencyAmount.split('.')
+  const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -105,19 +92,19 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? currencyAmount : whole
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
   const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
   const formatAmount = (amount: string) => {
     if (!commaSeparator) return amount;
-
+    
     const [wholePart, decimalPart] = amount.split('.');
     const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
   const swapNegative = size === "sm" && symbol !== ""
-  const handleNegative = currencyAmount.startsWith("-") && swapNegative ? "-" : ""
+  const handleNegative = amount.startsWith("-") && swapNegative ? "-" : ""
   const getAbsoluteAmount = (amountString: string) => amountString.replace(/^-/,'')
   const getAbbrOrFormatAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
   const getAmount = swapNegative ? getAbsoluteAmount(getAbbrOrFormatAmount) : getAbbrOrFormatAmount
@@ -165,7 +152,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {handleNegative}{symbol}
               </Body>
-
+      
               <Title
                   className="pb_currency_value"
                   dark={dark}
@@ -173,7 +160,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {getAmount}
               </Title>
-
+      
               <Body
                   className="unit"
                   color="light"

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -17,7 +17,8 @@ module Playbook
       prop :symbol, type: Playbook::Props::String,
                     default: "$"
 
-      prop :amount, required: true
+      prop :amount, type: Playbook::Props::String,
+                    required: true
 
       prop :unit, type: Playbook::Props::String,
                   required: false
@@ -91,7 +92,7 @@ module Playbook
       end
 
       def negative_sign
-        currency_amount.starts_with?("-") && swap_negative ? "-" : ""
+        amount.starts_with?("-") && swap_negative ? "-" : ""
       end
 
       def body_props
@@ -116,32 +117,10 @@ module Playbook
         end
       end
 
-      def currency_amount
-        @currency_amount ||= convert_amount(amount)
-      end
-
     private
 
-      # Convert numeric input to string format
-      def convert_amount(input)
-        if input.is_a?(Numeric)
-          if input.zero? && null_display.nil?
-            ""
-          else
-            format("%.2f", input)
-          end
-        # Handle string representations of zero
-        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
-          ""
-        else
-          input.to_s
-        end
-      end
-
       def whole_value
-        return "" if currency_amount.blank?
-
-        value = currency_amount.split(".").first
+        value = amount.split(".").first
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -150,9 +129,7 @@ module Playbook
       end
 
       def decimal_value
-        return "00" if currency_amount.blank?
-
-        currency_amount.split(".")[1] || "00"
+        amount.split(".")[1] || "00"
       end
 
       def units_element
@@ -170,9 +147,7 @@ module Playbook
       end
 
       def abbreviated_value(index = 0..-2)
-        return "" if currency_amount.blank?
-
-        value = currency_amount.split(".").first.gsub(",", "").to_i
+        value = amount.split(".").first.gsub(",", "").to_i
         abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
         abbreviated_num[index]
       end
@@ -199,11 +174,9 @@ module Playbook
 
         if decimals == "matching"
           if comma_separator
-            return "" if currency_amount.blank?
-
-            number_with_delimiter(currency_amount.gsub(",", ""))
+            number_with_delimiter(amount.gsub(",", ""))
           else
-            currency_amount
+            amount
           end
         else
           whole_value

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -133,50 +133,3 @@ test('handles negative amounts correctly', () => {
   expect(screen.getByTestId('test-negative-no-symbol')).toHaveTextContent('-400.50')
   expect(screen.getByTestId('test-negative-medium-size')).toHaveTextContent('$-500.55')
 })
-
-test('handles numeric amounts correctly', () => {
-  render(
-    <>
-      <Currency
-          amount={320}
-          data={{ testid: 'test-numeric-default' }}
-      />
-      <Currency
-          abbreviate
-          amount={3200000}
-          data={{ testid: 'test-numeric-millions' }}
-      />
-      <Currency
-          amount={123456.78}
-          commaSeparator
-          data={{ testid: 'test-numeric-comma-decimals' }}
-      />
-      <Currency
-          amount={400.50}
-          data={{ testid: 'test-numeric-no-symbol' }}
-          symbol=""
-      />
-      <Currency
-          amount={500.55}
-          data={{ testid: 'test-numeric-medium-size' }}
-          size="md"
-      />
-      <Currency
-          amount={-600.70}
-          data={{ testid: 'test-numeric-negative' }}
-      />
-      <Currency
-          amount={0.00}
-          data={{ testid: 'test-numeric-null' }}
-      />
-    </>
-  )
-
-  expect(screen.getByTestId('test-numeric-default')).toHaveTextContent('$320')
-  expect(screen.getByTestId('test-numeric-millions')).toHaveTextContent('$3.2M')
-  expect(screen.getByTestId('test-numeric-comma-decimals')).toHaveTextContent('$123,456.78')
-  expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
-  expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
-  expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
-  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
-})

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -7,7 +7,7 @@
 }) %>
 
 <%= pb_rails("currency", props: {
-  amount: 342,
+  amount: "342",
   label: "Light",
   margin_bottom: "md",
   size: "sm",

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -14,7 +14,7 @@ const CurrencyVariants = (props) => {
           {...props}
       />
       <Currency
-          amount={342}
+          amount="342"
           label="Light"
           marginBottom="md"
           size="sm"

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -85,8 +85,6 @@ module Playbook
                              default: ""
       prop :sync_end_with, type: Playbook::Props::String,
                            default: ""
-      prop :cursor, type: Playbook::Props::String,
-                    default: "pointer"
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx

@@ -23,7 +23,7 @@ const DatePickerRangePattern = (props) => {
 
       <DatePicker
           pickerId="end-date-picker"
-          placeholder="Select an End Date"
+          placeholder="Select a End Date"
           syncEndWith="quickpick-for-range"
           {...props}
       />

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss

@@ -9,20 +9,29 @@ $pb_card_border_radius: $border_rad_heavier;
 
 // used to display dropdown on the left of the calender
 .quick-pick-drop-down {
-  width: 100%;
+  width: auto;
+  display: grid;
 }
 
 .quick-pick-ul {
+  padding: $space_xs 0px;
   margin: 0;
   list-style: none;
 }
 
 .nav-item {
   list-style: none;
+  border-radius: 6px;
+  border-bottom: 0;
+  margin: $space_xs $space_sm;
 }
 
 .nav-item-link {
   text-decoration: none;
+  border-width: $pb_card_border_width;
+  border-style: solid;
+  border-color: $border_light;
+  border-radius: $pb_card_border_radius;
   padding: $space_xs 14px;
   transition-property: color, background-color;
   transition-duration: 0.15s;
@@ -31,21 +40,15 @@ $pb_card_border_radius: $border_rad_heavier;
   color: $charcoal;
   font-size: $font_default;
   font-weight: $regular;
-  text-align: left;
-  border-bottom: 1px solid $border_light;
   &.active {
-    color: $white;
-    background-color: $primary;
-    &:hover {
-      background-color: $product_1_background;
-      color: $white;
-    }
+    border-width: 2px;
+    border-color: $primary;
   }
   @media (hover:hover) {
     &:hover {
       cursor: pointer;
-      background-color: $bg_light;
-      color: $primary;
+      box-shadow: $shadow-deep;
+      border-color: $slate;
     }
   }
 }
@@ -54,3 +57,19 @@ $pb_card_border_radius: $border_rad_heavier;
 .quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
   display: none;
 }
+
+@media only screen and (max-width: 767px) {
+  .quick-pick-ul {
+    padding: $space_xs $space_xs;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .nav-item {
+    margin: $space_xxs $space_xs;
+  }
+
+  .nav-item-link {
+    padding: $space_xs $space_xxs;
+  }
+}

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/token/colors) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md

@@ -1,4 +1,4 @@
 The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
 
 `backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
-`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/global_props/colors) | **Default**: (no selection) is white
+`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.md

@@ -1 +1 @@
-Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>
+Filter 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_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -40,6 +40,7 @@ $confirmation_toast_colors: (
 
   &.positioned_toast {
     position: fixed;
+    z-index: $z_10 !important;
     display: flex;
     justify-content: space-around;
     max-width: max-content;

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import classnames from "classnames";
 
-import { globalProps, GlobalProps } from "../utilities/globalProps";
+import { globalProps } from "../utilities/globalProps";
 import { buildHtmlProps } from "../utilities/props";
 import { VoidCallback } from "../types";
 
@@ -31,8 +31,7 @@ type FixedConfirmationToastProps = {
   status?: "success" | "error" | "neutral" | "tip";
   text?: string;
   vertical?: "top" | "bottom";
-  zIndex?: number | string;
-} & GlobalProps
+};
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
@@ -51,7 +50,6 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     status = "neutral",
     text,
     vertical,
-    zIndex = 'max',
   } = props;
 
   const returnedIcon = icon || iconMap[status]
@@ -61,7 +59,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     `pb_fixed_confirmation_toast_kit_${status}${multiLine ? '_multi_line' : ''}`,
     { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
     `${iconClass}`,
-    globalProps(props, { zIndex }),
+    globalProps(props),
     className
   );
 

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

@@ -1,4 +1,2 @@
 
 Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.
-
-**NOTE**: z index for Fixed Confirmation Toast is set to 'max' by default which has the value of `999999`. the z Index global prop can be used to override this if you want to set it to a different value.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -60,10 +60,7 @@ module Playbook
       end
 
       def classname
-        default_z_index = z_index.present? ? "" : " z_index_max"
-        # IMPORTANT: the AutoClose class must be the last class in the string for JS to read it correctly
-        # Changing the order will break the auto_close functionality
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class + icon_class
       end
     end
   end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -75,14 +75,4 @@ test('renders position when provided', () => {
         />
     );
     expect(container.querySelector('.positioned_toast')).toBeInTheDocument();
-});
-
-test('renders max zIndex by default', () => {
-    const { container } = render(<FixedConfirmationToast />);
-    expect(container.querySelector('.z_index_max')).toBeInTheDocument();
-});
-
-test('applies custom zIndex when provided', () => {
-    const { container } = render(<FixedConfirmationToast zIndex={10} />);
-    expect(container.querySelector('.z_index_10')).toBeInTheDocument();
 });

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb

@@ -18,7 +18,7 @@
 
             if (submitButton) {
                 let currentClass = submitButton.className;
-                let newClass = currentClass.replace("pb_button_disabled pb_button_loading", "pb_button_enabled");
+                let newClass = currentClass.replace("_disabled_loading", "_enabled");
 
                 let cancelClass = cancelButton ? cancelButton.className : "";
                 let newCancelClass = cancelClass.replace("_disabled", "_enabled");

data/app/pb_kits/playbook/pb_form/formHelper.js

@@ -7,7 +7,7 @@ const formHelper = () => {
 
             if (submitButton) {
                 let currentClass = submitButton.className;
-                let newClass = currentClass.replace("pb_button_enabled", "pb_button_disabled pb_button_loading");
+                let newClass = currentClass.replace("_enabled", "_disabled_loading");
 
                 let cancelClass = cancelButton ? cancelButton.className : "";
                 let newCancelClass = cancelClass.replace("_enabled", "_disabled");

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md

@@ -1,3 +1,3 @@
-For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
 
 __NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md

@@ -1 +1 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md

@@ -1 +1 @@
-Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 
+Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md

@@ -1 +1 @@
-Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `orange` `purple` `teal` `red` `yellow` `green`
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb

@@ -3,41 +3,48 @@
                                           text: "Mercury",
                                           unit: "AU",
                                           value: 0.39,
-                                          variant:"royal"
+                                          variant:"blue"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-ringed",
                                           text: "Venus",
                                           unit: "AU",
                                           value: 0.723,
-                                          variant:"purple"
+                                          variant:"royal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "planet-moon",
                                           text: "Earth",
                                           unit: "AU",
                                           value: 1.0,
-                                          variant:"teal"
+                                          variant:"purple"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "solar-system",
                                           text: "Mars",
                                           unit: "AU",
                                           value: 1.524,
-                                          variant:"red"
+                                          variant:"teal"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-americas",
-                                          text: "Jupiter",
+                                          text: "Jupitar",
                                           unit: "AU",
                                           value: 5.203,
-                                          variant:"yellow"
+                                          variant:"red"
  }) %>
  <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe-africa",
                                           text: "Saturn",
                                           unit: "AU",
                                           value: 9.539,
+                                          variant:"yellow"
+ }) %>
+ <br>
+ <%= pb_rails("icon_stat_value", props: { icon: "globe",
+                                          text: "Uranus",
+                                          unit: "AU",
+                                          value: 19.18,
                                           variant:"green"
  }) %>
  <br>
@@ -46,4 +53,4 @@
                                           unit: "AU",
                                           value: 19.18,
                                           variant:"orange"
- }) %>
+ }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

@@ -9,7 +9,7 @@ const IconStatValueColor = (props) => {
           text="Mercury"
           unit="AU"
           value={0.39}
-          variant="royal"
+          variant="blue"
           {...props}
       />
       <br />
@@ -18,7 +18,7 @@ const IconStatValueColor = (props) => {
           text="Venus"
           unit="AU"
           value={0.723}
-          variant="purple"
+          variant="royal"
           {...props}
       />
       <br />
@@ -27,7 +27,7 @@ const IconStatValueColor = (props) => {
           text="Earth"
           unit="AU"
           value={1.0}
-          variant="teal"
+          variant="purple"
           {...props}
       />
       <br />
@@ -36,16 +36,16 @@ const IconStatValueColor = (props) => {
           text="Mars"
           unit="AU"
           value={1.524}
-          variant="red"
+          variant="teal"
           {...props}
       />
       <br />
       <IconStatValue
           icon="globe-americas"
-          text="Jupiter"
+          text="Jupitar"
           unit="AU"
           value={5.203}
-          variant="yellow"
+          variant="red"
           {...props}
       />
       <br />
@@ -54,6 +54,15 @@ const IconStatValueColor = (props) => {
           text="Saturn"
           unit="AU"
           value={9.539}
+          variant="yellow"
+          {...props}
+      />
+      <br />
+      <IconStatValue
+          icon="globe"
+          text="Uranus"
+          unit="AU"
+          value={19.18}
           variant="green"
           {...props}
       />

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md

@@ -1 +1 @@
-Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/global_props/max_width" target="_blank">visual guidelines.</a>
+Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>