playbook_ui 11.0.0 → 11.1.1.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3801f19c66a84d1760c5731a046e20df793ba1a7f5f2d5df91f51422b521c065
-  data.tar.gz: 80abfc9506e8ea1de5d864356f946091a55073419aee8b900de11d2fbec5f7ac
+  metadata.gz: 187ac4ecc55b431fc4c30a316c1cf4b0e137b2c7a1956931636b66f79bfbce7e
+  data.tar.gz: ace3fd58252e59d2e97be20a23bc563b4fc243e6d9325cba616ada666d4b5942
 SHA512:
-  metadata.gz: 1a7cd6defa69aaaa7f3b4b7352f719e9dc7941ec1ae8a0dd272b69e6de3769d8f53bcfbf9b6f56bb40b69c713332b1c0f1336c769994f846c4a7b395c7feffae
-  data.tar.gz: 55e41eecece21925e7378faa6c7834369cccef09d0737eb0f8c7165e7db6fd3f5ed96fdd4721b218cdb54c44bb4b12ff2ebd908887108581f1843050590671fe
+  metadata.gz: 61c1344a4ca56732440d0b00fc2cc3a8783f828f331b9561ab7b679e9d6e48c7019b24aadeea31cc808a14be3cd079fa98af43a9852c7f431548c032dfa62a76
+  data.tar.gz: 7a57d012285cb509b304fa482b6b8d0db59fd9fa57a29c8464312eb2bb03be40ab49979a2efd9546cd9d6894c5fc8db98c1d81e157705ac53e560a67be03502e

data/app/pb_kits/playbook/pb_currency/_currency.jsx

@@ -18,6 +18,7 @@ type CurrencyProps = {
   className?: string,
   dark?: boolean,
   data?: object,
+  decimals?: 'default' | 'matching',
   emphasized?: boolean,
   id?: string,
   label?: string,
@@ -40,6 +41,7 @@ const Currency = (props: CurrencyProps) => {
     aria = {},
     amount,
     data = {},
+    decimals = 'default',
     emphasized = true,
     id,
     unit,
@@ -85,9 +87,12 @@ const Currency = (props: CurrencyProps) => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : whole,
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
+    getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
+
+  const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
     getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
-    getDecimalValue = abbreviate ? '' : `.${decimal}`
+    getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
   return (
     <div

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

@@ -36,6 +36,10 @@ module Playbook
       prop :abbreviate, type: Playbook::Props::Boolean,
                         default: false
 
+      prop :decimals, type: Playbook::Props::Enum,
+                      values: %w[default matching],
+                      default: "default"
+
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -84,6 +88,8 @@ module Playbook
     private
 
       def whole_value
+        return amount if decimals == "matching"
+
         amount.split(".").first.to_s
       end
 
@@ -94,6 +100,8 @@ module Playbook
       end
 
       def units_element
+        return "" if decimals == "matching" && !abbreviate && !unit
+
         _, decimal_part = amount.split(".")
         if unit.nil? && abbreviate == false
           decimal_part.nil? ? ".00" : ".#{decimal_part}"

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

@@ -33,3 +33,31 @@ test('abbreviate prop returns proper abbreviated amount', () => {
   expect(screen.getByTestId('test-billions')).toHaveTextContent('$3.2B')
   expect(screen.getByTestId('test-trillions')).toHaveTextContent('$3.2T')
 })
+
+test('decimals matching prop returns decimals as title text', () => {
+  render(
+    <Currency
+        amount="320.20"
+        data={{ testid: 'test-decimals-matching' }}
+        decimals='matching'
+    />
+  )
+
+  const currencyKit = screen.getByTestId('test-decimals-matching')
+  expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320.20')
+  expect(currencyKit.querySelector('.unit')).toHaveTextContent('')
+})
+
+test('decimals default prop returns decimals as body text', () => {
+  render(
+    <Currency
+        amount="320.20"
+        data={{ testid: 'test-decimals-default' }}
+        decimals='default'
+    />
+  )
+
+  const currencyKit = screen.getByTestId('test-decimals-default')
+  expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320')
+  expect(currencyKit.querySelector('.unit')).toHaveTextContent('.20')
+})

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

@@ -0,0 +1,24 @@
+<%= pb_rails("currency", props: {
+  amount: "372.12",
+  decimals: "matching",
+  label: "Small",
+  margin_bottom: "md",
+  size: "sm",
+  unit: "/day",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "30,327.43",
+  decimals: "matching",
+  label: "Medium",
+  margin_bottom: "md",
+  size: "md",
+  symbol: "€",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "621,953.99",
+  decimals: "matching",
+  label: "Large",
+  size: "lg",
+}) %>

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

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import Currency from '../_currency'
+
+const CurrencyMatchingDecimals = (props) => {
+  return (
+    <>
+      <Currency
+          amount="372.12"
+          decimals="matching"
+          label="Small"
+          marginBottom="md"
+          size="sm"
+          unit="/day"
+          {...props}
+      />
+      <Currency
+          amount="30,327.43"
+          decimals="matching"
+          label="Medium"
+          marginBottom="md"
+          size="md"
+          symbol="€"
+          {...props}
+      />
+      <Currency
+          amount="621,953.99"
+          decimals="matching"
+          label="Large"
+          size="lg"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CurrencyMatchingDecimals
+

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

@@ -6,6 +6,7 @@ examples:
   - currency_alignment: Alignment
   - currency_no_symbol: No Symbol
   - currency_abbreviated: Abbreviate Larger Amounts
+  - currency_matching_decimals: Matching Decimals
 
   react:
   - currency_variants: Variants
@@ -13,3 +14,4 @@ examples:
   - currency_alignment: Alignment
   - currency_no_symbol: No Symbol
   - currency_abbreviated: Abbreviate Larger Amounts
+  - currency_matching_decimals: Matching Decimals

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

@@ -3,3 +3,4 @@ export { default as CurrencySize } from './_currency_size.jsx'
 export { default as CurrencyAlignment } from './_currency_alignment.jsx'
 export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
 export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
+export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'

data/app/pb_kits/playbook/pb_dialog/_dialog.jsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/jsx-handler-names */
-/* eslint-disable react/no-multi-comp */
 /* @flow */
 
 import React, { useState } from 'react'
@@ -9,18 +7,13 @@ import Modal from 'react-modal'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
-import Body from '../pb_body/_body'
 import Button from '../pb_button/_button'
 import DialogHeader  from './child_kits/_dialog_header'
 import DialogFooter from './child_kits/_dialog_footer'
 import DialogBody from './child_kits/_dialog_body'
-import Flex from '../pb_flex/_flex'
-import IconCircle from '../pb_icon_circle/_icon_circle'
-import Title from '../pb_title/_title'
 import { DialogContext } from './_dialog_context'
 
 type DialogProps = {
-  alertStyle?: "link" | "single" | "stacked" | "default",
   aria?: object,
   cancelButton?: string,
   children: array<React.ReactNode> | React.ReactNode | string,
@@ -38,7 +31,6 @@ type DialogProps = {
   portalClassName?: string,
   shouldCloseOnOverlayClick: boolean,
   size?: "sm" | "md" | "lg" | "content",
-  status?: "info" | "caution" | "delete" | "error" | "success",
   text?: string,
   title?: string,
   trigger?: string
@@ -46,7 +38,6 @@ type DialogProps = {
 
 const Dialog = (props: DialogProps) => {
   const {
-    alertStyle = "default",
     aria = {},
     cancelButton,
     confirmButton,
@@ -62,7 +53,6 @@ const Dialog = (props: DialogProps) => {
     onClose = () => {},
     portalClassName,
     shouldCloseOnOverlayClick = true,
-    status,
     text,
     title,
     trigger,
@@ -88,15 +78,15 @@ const Dialog = (props: DialogProps) => {
     className
   )
 
-  const [triggerOpened, setTriggerOpened] = useState(false),
-  modalIsOpened = trigger ? triggerOpened : opened
-
   const api = {
     onClose: trigger ? function(){
       setTriggerOpened(false)
     } : onClose,
   }
 
+  const [triggerOpened, setTriggerOpened] = useState(false),
+    modalIsOpened = trigger ? triggerOpened : opened
+
   if (trigger) {
     const modalTrigger = document.querySelector(trigger)
     modalTrigger.addEventListener('click', () => {
@@ -107,29 +97,6 @@ const Dialog = (props: DialogProps) => {
     }, { once: true })
   }
 
-  const sweetAlertStatus = {
-    info: {
-      icon: "exclamation-circle",
-      variant: "default",
-    },
-    caution: {
-      icon: "triangle-warning",
-      variant: "yellow",
-    },
-    delete: {
-      icon: "trash",
-      variant: "red",
-    },
-    error: {
-      icon: "times-circle",
-      variant: "red",
-    },
-    success: {
-      icon: "check-circle",
-      variant: "green",
-    },
-  }
-
   return (
     <DialogContext.Provider value={api}>
       <div
@@ -138,7 +105,6 @@ const Dialog = (props: DialogProps) => {
           className={classes}
       >
         <Modal
-            alertStyle={alertStyle}
             ariaHideApp={false}
             className={dialogClassNames}
             closeTimeoutMS={200}
@@ -149,28 +115,14 @@ const Dialog = (props: DialogProps) => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
-            status={status}
         >
-          <Dialog.Body>
-            <Flex align='center'
-                orientation='column'
-            >
-              <If condition = {sweetAlertStatus[status]}>
-                <IconCircle
-                    icon={sweetAlertStatus[status].icon}
-                    variant={sweetAlertStatus[status].variant}
-                />
-              </If>
-              <Title marginY='sm'
-                  size={3}
-              >
-                {title}
-              </Title>
-              <Body marginY='xs'
-                  text={text}
-              />
-            </Flex>
-          </Dialog.Body>
+          <If condition={title}>
+            <Dialog.Header>{title}</Dialog.Header>
+          </If>
+          <If condition={text}>
+            <Dialog.Body>{text}</Dialog.Body>
+          </If>
+
           <If condition={cancelButton && confirmButton}>
             <Dialog.Footer>
               <Button
@@ -179,14 +131,16 @@ const Dialog = (props: DialogProps) => {
               >
                 {confirmButton}
               </Button>
-              <Button id='cancel-button'
+              <Button
+                  id="cancel-button"
                   onClick={onCancel}
-                  variant='link'
+                  variant="link"
               >
                 {cancelButton}
               </Button>
             </Dialog.Footer>
           </If>
+
           {children}
         </Modal>
       </div>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -11,7 +11,7 @@ const DialogDefault = () => {
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
-          cancelButton="Cancel Button"
+          cancelButton="Cancel"
           className="wrapper"
           confirmButton="Okay"
           loading={isLoading}

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

@@ -8,5 +8,3 @@ examples:
   - dialog_sizes: Sizes
   - dialog_scrollable: Scrollable
   - dialog_should_close_on_overlay: Overlay Click
-  - dialog_status: Status Alert
-  - dialog_stacked_alert: Stacked Button Alert

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

@@ -4,5 +4,3 @@ export { default as DialogSizes } from './_dialog_sizes.jsx'
 export { default as DialogScrollable } from './_dialog_scrollable.jsx'
 export { default as DialogSeparators } from './_dialog_separators.jsx'
 export { default as DialogShouldCloseOnOverlay } from './_dialog_should_close_on_overlay.jsx'
-export { default as DialogStatus } from './_dialog_status.jsx'
-export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbHomeAddressStreet
+    class CityEmphasis < Playbook::KitBase
+      prop :address_house_style
+      prop :address_house_style2
+      prop :city_state
+      prop :home_id, type: Playbook::Props::Number
+      prop :home_url
+      prop :territory
+      prop :zip
+      prop :dark, type: Playbook::Props::Boolean, default: false
+    end
+  end
+end

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

@@ -5,8 +5,6 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
 
-
-
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -2,5 +2,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= render file: object.emphasis_partial, locals: { object: object } %>
-<% end %>
+  <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
+<% end %>
+

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -45,8 +45,29 @@ module Playbook
         house_style ? " \u00b7 " : ""
       end
 
-      def emphasis_partial
-        File.join(File.dirname(self.class.source_location), "_#{emphasis}_emphasis")
+      def city_emphasis_props
+        {
+          address_house_style: address_house_style,
+          address_house_style2: address_house_style2,
+          city_state: city_state,
+          dark: dark,
+          home_id: home_id,
+          home_url: home_url,
+          territory: territory,
+          zip: zip,
+        }
+      end
+
+      def street_emphasis_props
+        {
+          address_house_style: address_house_style,
+          address_house_style2: address_house_style2,
+          city_state_zip: city_state_zip,
+          dark: dark,
+          home_id: home_id,
+          home_url: home_url,
+          territory: territory,
+        }
       end
 
     private

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbHomeAddressStreet
+    class StreetEmphasis < Playbook::KitBase
+      prop :address_house_style
+      prop :address_house_style2
+      prop :city_state_zip
+      prop :home_id, type: Playbook::Props::Number
+      prop :home_url
+      prop :territory
+      prop :dark, type: Playbook::Props::Boolean, default: false
+    end
+  end
+end

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -0,0 +1,78 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React, { forwardRef } from 'react'
+import Body from '../pb_body/_body'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+type RadioProps = {
+  aria?: object,
+  alignment?: String,
+  checked?: Boolean,
+  children?: Node,
+  className?: String,
+  dark?: boolean,
+  data?: object,
+  error?: Boolean,
+  id?: String,
+  label: String,
+  name: String,
+  value: String,
+  text: String,
+  onChange: (Boolean)=>void,
+}
+
+const Radio = ({
+  aria = {},
+  alignment = '',
+  children,
+  className,
+  dark = false,
+  data = {},
+  error = false,
+  id,
+  label,
+  name = 'radio_name',
+  text = 'Radio Text',
+  value = 'radio_text',
+  onChange = () => {},
+  ...props
+}: RadioProps, ref) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), alignment, className)
+
+  return (
+    <label
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        htmlFor={id}
+    >
+      <If condition={children}>
+        {children}
+        <Else />
+        <input
+            {...props}
+            id={id}
+            name={name}
+            onChange={onChange}
+            ref={ref}
+            text={text}
+            type="radio"
+            value={value}
+        />
+      </If>
+      <span className="pb_radio_button" />
+      <Body
+          dark={dark}
+          status={error ? 'negative' : null}
+          text={label}
+      />
+    </label>
+  )
+}
+
+export default forwardRef(Radio)

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.md

@@ -1 +1 @@
-Use this as value for displaying number data at a high level. It’s primary function is to create hierarchy of data within a view. 
+Use this as value for displaying number data at a high level. It’s primary function is to create hierarchy of data within a view.

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_precision.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("stat_value", props: { value: 1529.00000, precision: 2 }) %>
+
+<%= pb_rails("stat_value", props: { value: 1529.13, precision: 4 }) %>

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_precision.md

@@ -0,0 +1,2 @@
+Use this to specify how many decimal places you want to show.
+In react, you can pass in a string or number, but for this rails kit, we only accept numeric values and rails will not show trailing zero's unless specified.

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - stat_value_default: Default
   - stat_value_unit: Unit Value
+  - stat_value_precision: Precision Value
 
 
   react:

data/app/pb_kits/playbook/pb_stat_value/stat_value.rb

@@ -5,9 +5,14 @@ module Playbook
     class StatValue < Playbook::KitBase
       prop :unit
       prop :value, type: Playbook::Props::Numeric
+      prop :precision, type: Playbook::Props::Numeric
 
       def formatted_value
-        number_with_delimiter(value, delimiter: ",", separator: ".")
+        if precision.nil?
+          number_with_delimiter(value, delimiter: ",", separator: ".")
+        else
+          number_with_precision(value, precision: precision, delimiter: ",", separator: ".")
+        end
       end
 
       def classname

data/lib/playbook/props.rb

@@ -24,7 +24,7 @@ module Playbook
     extend ActiveSupport::Concern
 
     attr_accessor :values
-    private :values, :values=
+    private :values=
 
     def initialize(prop_values = {}, &block)
       self.values = { children: block }.merge(Hash(prop_values))

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.26.0"
-  VERSION = "11.0.0"
+  PREVIOUS_VERSION = "11.1.0"
+  VERSION = "11.1.1.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.0.0
+  version: 11.1.1.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-06-08 00:00:00.000000000 Z
+date: 2022-07-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -604,6 +604,8 @@ files:
 - app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx
+- app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb
+- app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_size.html.erb
@@ -800,10 +802,6 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
-- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
-- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
-- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx
-- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md
 - app/pb_kits/playbook/pb_dialog/docs/example.yml
 - app/pb_kits/playbook/pb_dialog/docs/index.js
 - app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx
@@ -1021,10 +1019,10 @@ files:
 - app/pb_kits/playbook/pb_highlight/docs/index.js
 - app/pb_kits/playbook/pb_highlight/highlight.html.erb
 - app/pb_kits/playbook/pb_highlight/highlight.rb
-- app/pb_kits/playbook/pb_home_address_street/_city_emphasis.html.erb
 - app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx
 - app/pb_kits/playbook/pb_home_address_street/_home_address_street.scss
-- app/pb_kits/playbook/pb_home_address_street/_street_emphasis.html.erb
+- app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb
+- app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb
 - app/pb_kits/playbook/pb_home_address_street/docs/_description.md
 - app/pb_kits/playbook/pb_home_address_street/docs/_footer.md
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb
@@ -1039,6 +1037,8 @@ files:
 - app/pb_kits/playbook/pb_home_address_street/docs/index.js
 - app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb
 - app/pb_kits/playbook/pb_home_address_street/home_address_street.rb
+- app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb
+- app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb
 - app/pb_kits/playbook/pb_icon/_icon.scss
 - app/pb_kits/playbook/pb_icon/_icon.tsx
 - app/pb_kits/playbook/pb_icon/docs/_description.md
@@ -1491,8 +1491,8 @@ files:
 - app/pb_kits/playbook/pb_progress_step/progress_step.rb
 - app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb
 - app/pb_kits/playbook/pb_progress_step/progress_step_item.rb
+- app/pb_kits/playbook/pb_radio/_radio.jsx
 - app/pb_kits/playbook/pb_radio/_radio.scss
-- app/pb_kits/playbook/pb_radio/_radio.tsx
 - app/pb_kits/playbook/pb_radio/docs/_description.md
 - app/pb_kits/playbook/pb_radio/docs/_footer.md
 - app/pb_kits/playbook/pb_radio/docs/_radio_alignment.html.erb
@@ -1694,6 +1694,8 @@ files:
 - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb
 - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx
 - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.md
+- app/pb_kits/playbook/pb_stat_value/docs/_stat_value_precision.html.erb
+- app/pb_kits/playbook/pb_stat_value/docs/_stat_value_precision.md
 - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.html.erb
 - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx
 - app/pb_kits/playbook/pb_stat_value/docs/example.yml
@@ -2222,9 +2224,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -1,153 +0,0 @@
-/* eslint-disable react/jsx-handler-names */
-
-import React, { useState } from "react"
-import { Button, Dialog, Flex, FlexItem, SectionSeparator } from "../.."
-
-const useDialog = (visible = false) => {
-  const [opened, setOpened] = useState(visible)
-  const toggle = () => setOpened(!opened)
-  return [opened, toggle]
-}
-
-const DialogStackedAlert = () => {
-  const [singleButtonOpen, toggleSingleButtonOpen] = useDialog()
-  const [stackedButtonOpen, toggleStackedButtonOpen] = useDialog()
-  const [singleLinkButtonOpen, toggleSingleLinkButtonOpen] = useDialog()
-  const [twoLinkButtonOpen, toggleTwoLinkButtonOpen] = useDialog()
-
-
-  const dialogs = [
-    {
-      status: "info",
-      text: "Text explaining why there is an alert",
-      title: "Are you sure?",
-      toggle: toggleSingleButtonOpen,
-      visible: singleButtonOpen,
-      confirmedButton:"Ok, Thanks",
-    },
-    {
-      status: "error",
-      text: "Text explaining the error",
-      title: "Error Message",
-      confirmedButton:"Yes, Action",
-      cancelledButton: "Ok, Cancel",
-      toggle: toggleStackedButtonOpen,
-      visible: stackedButtonOpen,
-    },
-    {
-      status: "caution",
-      text: "This is the action you will be taking",
-      title: "Are you sure?",
-      toggle: toggleSingleLinkButtonOpen,
-      visible: singleLinkButtonOpen,
-      linkConfirmedButton:"Ok, Thanks!"
-    },
-    {
-      status: "success",
-      text: "Text explaining what is successful",
-      title: "Success",
-      toggle: toggleTwoLinkButtonOpen,
-      visible: twoLinkButtonOpen,
-      linkConfirmedButton:"Ok",
-      linkCancelledButton: "Cancel"
-    }
-  ]
-
-  return (
-    <div>
-    <Flex>
-      <Button
-          marginX="md"
-          onClick={toggleSingleButtonOpen}
-      >
-        {"1 Button Information Status"}
-      </Button>
-      <Button
-          marginX="md"
-          onClick={toggleStackedButtonOpen}
-      >
-        {"2 Button Error Status"}
-      </Button>
-      <Button
-          marginX="md"
-          onClick={toggleSingleLinkButtonOpen}
-      >
-        {"1 Link Button Caution"}
-      </Button>
-      <Button
-          marginX="md"
-          onClick={toggleTwoLinkButtonOpen}
-      >
-        {"2 Link Button Success"}
-      </Button>
-    </Flex>
-    <Flex>
-      {dialogs.map((dialog) => (
-        <Dialog
-            alertStyle={dialog.alertStyle}
-            key={dialog.status}
-            onClose={dialog.toggle}
-            opened={dialog.visible}
-            size="sm"
-            status={dialog.status}
-            text={dialog.text}
-            title={dialog.title}
-        >
-        <If condition={dialog.cancelledButton || dialog.confirmedButton}>
-          <Dialog.Footer>
-            <Button
-                fullWidth
-                onClick={dialog.toggle}
-            >
-              {dialog.confirmedButton}
-            </Button>
-          </Dialog.Footer>
-          <If condition={dialog.cancelledButton}>
-            <Dialog.Footer paddingTop="none">
-              <Button
-                  fullWidth
-                  onClick={dialog.toggle}
-                  variant="secondary"
-              >
-                {dialog.cancelledButton}
-              </Button>
-            </Dialog.Footer>
-          </If>
-          </If>
-          <If condition={dialog.linkCancelledButton || dialog.linkConfirmedButton} >
-            <SectionSeparator />
-            <Flex
-                inline="flex-container"
-                vertical="stretch"
-            >
-              <FlexItem flex={1} >
-                <Button
-                    fullWidth
-                    onClick={dialog.toggle}
-                    variant="link"
-                >
-                  {dialog.linkConfirmedButton}
-                </Button>
-              </FlexItem>
-              <If condition={dialog.linkCancelledButton}>
-                <SectionSeparator orientation="vertical"/>
-                <FlexItem flex={1}>
-                  <Button
-                      fullWidth
-                      onClick={dialog.toggle}
-                      variant="link"
-                  >
-                    {dialog.linkCancelledButton}
-                  </Button>
-                </FlexItem>
-              </If>
-            </Flex>
-          </If>
-        </Dialog>
-      ))}
-    </Flex>
-  </div>
-  )
-}
-
-export default DialogStackedAlert

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md

@@ -1 +0,0 @@
-This is designed to show you how the buttons can stack with different alert styles. It also has a link style for the buttons for the mobile views.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -1,130 +0,0 @@
-/* eslint-disable react/jsx-handler-names */
-/* @flow */
-
-import React, { useState } from "react"
-import { Button, Dialog, Flex } from "../.."
-
-const useDialog = (visible = false) => {
-  const [opened, setOpened] = useState(visible)
-  const toggle = () => setOpened(!opened)
-  return [opened, toggle]
-
-}
-
-const DialogStatus = () => {
-  const [infoAlertOpened, toggleInfoAlert] = useDialog()
-  const [cautionAlertOpened, toggleCautionAlert] = useDialog()
-  const [successAlertOpened, toggleSuccessAlert] = useDialog()
-  const [errorAlertOpened, toggleErrorAlert] = useDialog()
-  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
-
-  const dialogs = [
-    {
-      status: "info",
-      text: "Text explaining why there is an alert",
-      title: "Are you Sure?",
-      toggle: toggleInfoAlert,
-      visible: infoAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Yes, Action"
-    },
-    {
-      status: "caution",
-      text: "This is the action you will be taking",
-      title: "Are you Sure?",
-      toggle: toggleCautionAlert,
-      visible: cautionAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Yes, Action"
-    },
-    {
-      status: "delete",
-      text: "You are about to delete ...",
-      title: "Delete",
-      toggle: toggleDeleteAlert,
-      visible: deleteAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Yes, Delete"
-    },
-    {
-      status: "error",
-      text: "Text explaining the error",
-      title: "Error Message",
-      toggle: toggleErrorAlert,
-      visible: errorAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Ok, Thanks"
-    },
-    {
-      status: "success",
-      text: "Text explaining what is successful",
-      title: "Success!",
-      toggle: toggleSuccessAlert,
-      visible: successAlertOpened,
-      buttonOneText:"No, Cancel",
-      buttonTwoText: "Ok, Thanks"
-    },
-  ]
-
-  return (
-    <div>
-      <Flex>
-        <Button
-            marginX="md"
-            onClick={toggleInfoAlert}
-        >
-          {"Information Status"}
-        </Button>
-        <Button
-            marginX="md"
-            onClick={toggleCautionAlert}
-        >
-          {"Caution Status"}
-        </Button>
-        <Button
-            marginX="md"
-            onClick={toggleSuccessAlert}
-        >
-          {"Success Status"}
-        </Button>
-        <Button onClick={toggleErrorAlert}>
-          {"Error Status"}
-        </Button>
-        <Button
-            marginX="md"
-            onClick={toggleDeleteAlert}
-        >
-          {"Delete Status"}
-        </Button>
-      </Flex>
-      <Flex>
-        {dialogs.map((dialog) => (
-          <Dialog
-              key={dialog.status}
-              onClose={dialog.toggle}
-              opened={dialog.visible}
-              status={dialog.status}
-              text={dialog.text}
-              title={dialog.title}
-          >
-          <Dialog.Footer>
-            <Button
-                onClick={dialog.toggle}
-                variant="secondary"
-            >
-            {dialog.buttonOneText}
-            </Button>
-            <Button
-                onClick={dialog.toggle}
-            >
-            {dialog.buttonTwoText}
-            </Button>
-          </Dialog.Footer>
-          </Dialog>
-        ))}
-      </Flex>
-    </div>
-  )
-}
-
-export default DialogStatus

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md

@@ -1 +0,0 @@
-This shows the different alert statuses that can be used for dialog boxes. These all have two buttons which is a default

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -1,86 +0,0 @@
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
-
-import React, { forwardRef } from 'react'
-import Body from '../pb_body/_body'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
-
-type RadioProps = {
-  aria?: {[key: string]: string},
-  alignment?: string,
-  checked?: boolean,
-  children?: Node,
-  className?: string,
-  dark?: boolean,
-  data?: {[key: string]: string},
-  error?: boolean,
-  id?: string,
-  label: string,
-  name: string,
-  value: string,
-  text: string,
-  onChange: (event: React.FormEvent<HTMLInputElement>)=>void,
-} & GlobalProps
-
-const Radio = ({
-  aria = {},
-  alignment,
-  children,
-  className,
-  dark = false,
-  data = {},
-  error = false,
-  id,
-  label,
-  name = 'radio_name',
-  text = 'Radio Text',
-  value = 'radio_text',
-  onChange = () => {},
-  ...props
-}: RadioProps, ref: any) => {
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_radio_kit', alignment ),
-    dark ? 'dark': null, error ? 'error': null,
-    globalProps(props),
-    className)
-
-  const displayRadio = (props: RadioProps) => {
-    if (children)
-      return (children)
-    else 
-    return (
-    <input
-        id={id}
-        name={name}
-        onChange={onChange}
-        ref={ref}
-        text={text}
-        type="radio"
-        value={value}
-        {...props}
-    />
-  )}
-
-  return (
-    <label
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        htmlFor={id}
-    >
-    <>{displayRadio(null)}</>
-    <span className="pb_radio_button" />
-    <Body
-          dark={dark}
-          status={error ? 'negative' : null}
-          text={label}
-          variant={null}
-      />
-    </label>
-  )
-}
-
-export default forwardRef(Radio)