playbook_ui 14.9.0.pre.alpha.play17004992 → 14.9.0.pre.rc.0

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -77,12 +77,6 @@ $pb_button_sizes: (
   &[class*=_loading]  {
     @include pb_button_loading(true);
   }
-
-  // Danger ===================
-  &[class*=_danger] {
-    @include pb_button_danger;
-  }
-
   // Dark Variants =============
   &.dark  {
     &[class*=_primary]  {

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -37,7 +37,7 @@ type ButtonPropTypes = {
   type?: 'inline' | null,
   htmlType?: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
-  variant?: 'primary' | 'secondary' | 'link'| 'danger' | 'reaction',
+  variant?: 'primary' | 'secondary' | 'link'| 'reaction',
   wrapperClass?: string,
 } & GlobalProps
 
@@ -206,6 +206,8 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
               <Icon icon={icon ? icon : "face-smile-plus"} />
             )
           }
+
+        
         </button>
       );
     } else {

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -167,21 +167,6 @@ $pb_button_border_width: 0px;
   }
 }
 
-// Danger ======================
-@mixin pb_button_danger {
-  @include pb_button_variant($error, $text_dk_default, transparent);
-
-  @media (hover:hover) {
-    &:hover {
-      @include pb_button_hover($bg: darken($error, $pb_button_hover_darken));
-    }
-    &:active {
-      transition: none;
-      @include pb_button_variant($error);
-    }
-  }
-}
-
 // Dark Primary =================
 @mixin pb_button_primary_dark{
   @include pb_button_variant($primary_action);

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

@@ -16,7 +16,7 @@ module Playbook
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[primary secondary link danger reaction],
+                     values: %w[primary secondary link reaction],
                      default: "primary"
       prop :count, type: Playbook::Props::Number
       prop :highlight, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb

@@ -2,5 +2,4 @@
 <%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", margin_right: "lg" }) %>
 <%= pb_rails("button", props: { text: "Button Link", variant: "link", margin_right: "lg" }) %>
 <%= pb_rails("button", props: { text: "Button Disabled", disabled: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "Button Danger", variant: "danger", margin_right: "lg" }) %>
 

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -34,14 +34,6 @@ const ButtonDefault = (props) => (
         text='Button Disabled'
         {...props}
     />
-    <Button
-        marginRight='lg'
-        onClick={() => alert("button clicked!")}
-        tabIndex={0}
-        text='Button Danger'
-        variant='danger'
-        {...props}
-    />
   </div>
 )
 

data/app/pb_kits/playbook/pb_button/docs/_button_default.md

@@ -1 +1 @@
-The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button. Danger buttons are used to indicate destructive actions such as deleting.
+The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button.

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

@@ -13,10 +13,9 @@ $pb_caption_colors: (
 $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
-  lighter:        $text_dk_lighter,
   link:           $active_dark,
   success:        $text_dk_success_sm,
-  error:          $error_dark,
+  error:          $error,
 );
 
 

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

@@ -32,7 +32,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
 }
 
 @mixin pb_card_selected_dark {
-  @include pb_card_selected($primary_action_dark);
+  @include pb_card_selected($primary_action);
 }
 
 @mixin pb_card($background: $card_light, $border_color: $border_light) {

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -6,12 +6,12 @@
                 ) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
-    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
+    <span class="pb_checkbox_indeterminate">
       <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
       <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
     </span>
   <% else %>
-    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
+    <span class="pb_checkbox_checkmark">
       <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
       <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
     </span>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -18,6 +18,10 @@ module Playbook
       prop :form_spacing, type: Playbook::Props::Boolean,
                           default: false
 
+      def checked_html
+        checked ? "checked='true'" : nil
+      end
+
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
       end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -1,84 +1,7 @@
-<% checkboxes = [
-  { name: 'Coffee', id: 'coffee', checked: false },
-  { name: 'Ice Cream', id: 'ice-cream', checked: false },
-  { name: 'Chocolate', id: 'chocolate', checked: true }
-] %>
-
-<%= pb_rails("table", props: { container: false, size: "md" }) do %>
-  <thead>
-    <tr>
-      <th>
-        <%= pb_rails("checkbox", props: {
-          checked: true,
-          text: "Uncheck All",
-          value: "checkbox-value",
-          name: "main-checkbox",
-          indeterminate: true,
-          id: "indeterminate-checkbox"
-        }) %>
-      </th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <% checkboxes.each do |checkbox| %>
-      <tr>
-        <td>
-          <%= pb_rails("checkbox", props: {
-            checked: checkbox[:checked],
-            text: checkbox[:name],
-            value: checkbox[:id],
-            name: "#{checkbox[:id]}-indeterminate-checkbox",
-            id: "#{checkbox[:id]}-indeterminate-checkbox",
-          }) %>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-<% end %>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
-    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
-    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
-
-    const updateMainCheckbox = () => {
-      // Count the number of checked child checkboxes
-      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
-      // Determine if the main checkbox should be in an indeterminate state
-      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
-      
-      // Set the main checkbox states
-      mainCheckbox.indeterminate = indeterminate;
-      mainCheckbox.checked = checkedCount > 0;
-
-      // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
-
-      // Determine the icon class to add and remove based on the number of checked checkboxes
-      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
-
-      // Update main checkbox label
-      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
-      
-      // Add and remove the icon class to the main checkbox wrapper
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
-      
-      // Toggle the visibility of the checkbox icon based on the indeterminate state
-      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
-      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
-    };
-
-    mainCheckbox.addEventListener('change', function() {
-      childCheckboxes.forEach(cb => cb.checked = this.checked);
-      updateMainCheckbox();
-    });
-
-    childCheckboxes.forEach(cb => {
-      cb.addEventListener('change', updateMainCheckbox);
-    });
-  });
-</script>
+<%= pb_rails("checkbox" , props: {
+  text: "Select ",
+  value: "checkbox-value",
+  name: "main",
+  indeterminate: true,
+  id: "test-indeterminate-js"
+}) %>

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
-import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -32,7 +32,6 @@ type CollapsibleProps = {
   onClick?: ()=> void,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
 }
 
 const Collapsible = ({
@@ -48,9 +47,8 @@ const Collapsible = ({
   onIconClick,
   onClick,
   id,
-  tag = 'div',
   ...props
-}: CollapsibleProps & GlobalProps): React.ReactElement => {
+}: CollapsibleProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
 
   useEffect(()=> {
@@ -77,19 +75,14 @@ const Collapsible = ({
     globalProps(props),
     className
   )
-  const dynamicInlineProps = globalInlineProps(props)
-
-  const Tag: React.ReactElement | any = `${tag}`;
-
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
-      <Tag
+      <div
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
           className={classes}
           id={id}
-          style={dynamicInlineProps}
       >
         {Main ? (
           <CollapsibleMain {...mainProps}>
@@ -101,7 +94,7 @@ const Collapsible = ({
           <CollapsibleContent {...contentProps}>
             {contentChildren}
           </CollapsibleContent>
-      </Tag>
+      </div>
     </CollapsibleContext.Provider>
   )
 }

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { useContext, useRef, useEffect } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps, GlobalProps } from '../../utilities/globalProps'
+import { globalProps } from '../../utilities/globalProps'
 import { hideElement, showElement } from '../_helper_functions'
 
 import CollapsibleContext from '../context'
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps & GlobalProps): React.ReactElement => {
+}: CollapsibleContentProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -3,7 +3,7 @@
 import classnames from 'classnames'
 import React, { useContext } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps, GlobalProps } from '../../utilities/globalProps'
+import { globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
   className,
   cursor = 'pointer',
   ...props
-}: CollapsibleMainProps & GlobalProps): React.ReactElement=> {
+}: CollapsibleMainProps): React.ReactElement=> {
   const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })

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

@@ -101,11 +101,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
-  const swapNegative = size === "sm" && symbol !== ""
-  const handleNegative = amount.startsWith("-") && swapNegative ? "-" : ""
-  const getAbsoluteAmount = (amountString: string) => amountString.replace(/^-/,'')
-  const getAbbrOrFormatAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
-  const getAmount = swapNegative ? getAbsoluteAmount(getAbbrOrFormatAmount) : getAbbrOrFormatAmount
+  const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
   const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
   const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
@@ -122,7 +118,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
           <>
-            <div>{handleNegative}{symbol}</div>
+            <div>{symbol}</div>
             <div>{getAmount}</div>
             <div>
               {getAbbreviation}
@@ -136,7 +132,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
                 color="light"
                 dark={dark}
             >
-              {handleNegative}{symbol}
+              {symbol}
             </Body>
 
             <Title

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -3,12 +3,12 @@
 
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <% if object.unstyled %>
-      <div><%= object.negative_sign %><%= object.symbol %></div>
+      <div><%= object.symbol %></div>
       <div><%= object.title_props[:text] %></div>
       <div><%= object.body_props[:text] %></div>
     <% else %>
       <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-        <%= object.negative_sign %><%= object.symbol %>
+        <%= object.symbol %>
       <% end %>
       <%= pb_rails("title", props: object.title_props) %>
       <%= pb_rails("body", props: object.body_props) %>

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

@@ -68,20 +68,12 @@ module Playbook
       def title_props
         {
           size: size_value,
-          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
+          text: abbreviate ? abbreviated_value : formatted_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
       end
 
-      def abbr_or_format_amount
-        abbreviate ? abbreviated_value : formatted_amount
-      end
-
-      def negative_sign
-        amount.starts_with?("-") && swap_negative ? "-" : ""
-      end
-
       def body_props
         {
           text: units_element,
@@ -167,14 +159,6 @@ module Playbook
           whole_value
         end
       end
-
-      def absolute_amount(amount_string)
-        amount_string.sub(/^-/, "")
-      end
-
-      def swap_negative
-        size == "sm" && symbol != ""
-      end
     end
   end
 end

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

@@ -65,7 +65,7 @@ test('decimals default prop returns decimals as body text', () => {
 
 test('commaSeparator prop returns comma separated amount', () => {
   render(
-    <Currency
+    <Currency 
         amount="1234567890"
         commaSeparator
         data={{ testid: 'comma-test' }}
@@ -76,7 +76,7 @@ test('commaSeparator prop returns comma separated amount', () => {
 
 test('commaSeparator prop returns comma separated amount with decimals', () => {
   render(
-    <Currency
+    <Currency 
         amount="1234567890.12"
         commaSeparator
         data={{ testid: 'comma-test-decimals' }}
@@ -87,7 +87,7 @@ test('commaSeparator prop returns comma separated amount with decimals', () => {
 
 test('commaSeparator prop returns comma separated amount with decimals="matching"', () => {
   render(
-    <Currency
+    <Currency 
         amount="1234567890.12"
         commaSeparator
         data={{ testid: 'comma-test-decimals-matching' }}
@@ -96,40 +96,3 @@ test('commaSeparator prop returns comma separated amount with decimals="matching
   )
   expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12')
 })
-
-test('handles negative amounts correctly', () => {
-  render(
-    <>
-      <Currency
-          amount="-320"
-          data={{ testid: 'test-negative-default' }}
-      />
-      <Currency
-          abbreviate
-          amount="-3200000"
-          data={{ testid: 'test-negative-millions' }}
-      />
-      <Currency
-          amount="-123456.78"
-          commaSeparator
-          data={{ testid: 'test-negative-comma-decimals' }}
-      />
-      <Currency
-          amount="-400.50"
-          data={{ testid: 'test-negative-no-symbol' }}
-          symbol=""
-      />
-      <Currency
-          amount="-500.55"
-          data={{ testid: 'test-negative-medium-size' }}
-          size="md"
-      />
-    </>
-  )
-
-  expect(screen.getByTestId('test-negative-default')).toHaveTextContent('-$320')
-  expect(screen.getByTestId('test-negative-millions')).toHaveTextContent('-$3.2M')
-  expect(screen.getByTestId('test-negative-comma-decimals')).toHaveTextContent('-$123,456.78')
-  expect(screen.getByTestId('test-negative-no-symbol')).toHaveTextContent('-400.50')
-  expect(screen.getByTestId('test-negative-medium-size')).toHaveTextContent('$-500.55')
-})

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

@@ -9,7 +9,6 @@ examples:
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
-  - currency_negative: Negative
   
   react:
   - currency_variants: Variants
@@ -20,7 +19,6 @@ examples:
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
-  - currency_negative: Negative
 
   swift:
   - currency_size_swift: Size

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

@@ -6,4 +6,3 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
-export { default as CurrencyNegative } from './_currency_negative.jsx'

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -88,7 +88,6 @@ body.PBDrawer__Body--close {
 }
 
 .pb_drawer.pb_drawer_after_open {
-  pointer-events: auto;
   transform: translate3d(0, 0, 0);
 }