playbook_ui 13.25.0 → 13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb

@@ -0,0 +1,71 @@
+<%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "top-left"
+    },
+    name: "Terry Johnson",
+    size: "xxs",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "top-right"
+    },
+    name: "Terry Johnson",
+    size: "xs",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "bottom-right"
+    },
+    name: "Terry Johnson",
+    size: "sm",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "bottom-left"
+    },
+    name: "Terry Johnson",
+    size: "md",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "top-left"
+    },
+    name: "Terry Johnson",
+    size: "lg",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        placement: "top-right"
+    },
+    name: "Terry Johnson",
+    size: "xl",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Avatar } from '../..'
+
+const AvatarCircleIconComponentOverlay = () => {
+    return (
+        <div>
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-left"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="xxs"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-right"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="xs"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "bottom-right",
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="sm"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "bottom-left"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="md"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-left"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="lg"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-right"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="xl"
+            />
+
+        </div>
+    )
+}
+
+export default AvatarCircleIconComponentOverlay

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -57,6 +57,26 @@ const AvatarDefault = (props) => {
           status="offline"
           {...props}
       />
+      <br/>
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
+          size="lg"
+          status="offline"
+          {...props}
+      />
+      <br/>
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
+          size="xl"
+          status="offline"
+          {...props}
+      />
     </div>
   )
 }

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

@@ -4,11 +4,15 @@ examples:
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
+    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
+    - avatar_badge_component_overlay: Badge Component Overlay
   react:
     - avatar_default: Default
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
+    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
+    - avatar_badge_component_overlay: Badge Component Overlay
   swift:
     - avatar_default_swift: Default
     - avatar_monogram_swift: Monogram

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

@@ -2,3 +2,5 @@ export { default as AvatarDefault } from './_avatar_default.jsx'
 export { default as AvatarMonogram } from './_avatar_monogram.jsx'
 export { default as AvatarStatus } from './_avatar_status.jsx'
 export { default as AvatarNoImage } from './_avatar_no_image.jsx'
+export { default as AvatarCircleIconComponentOverlay } from './_avatar_circle_icon_component_overlay.jsx'
+export { default as AvatarBadgeComponentOverlay } from './_avatar_badge_component_overlay.jsx'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -102,7 +102,7 @@ const BarGraph = ({
       max: yAxisMax,
       opposite: false,
       title: {
-        text: typeof axisTitle === 'string' ? axisTitle : axisTitle[0].name,
+        text: Array.isArray(axisTitle) ? (axisTitle.length > 0 ? axisTitle[0].name : null) : axisTitle,
       },
       plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
         value: 0,

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

@@ -15,7 +15,7 @@ type BodyProps = {
   data?: {[key: string]: string},
   highlightedText?: string[],
   highlighting?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void)},
   id?: string,
   status?: 'neutral' | 'negative' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',

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

@@ -17,7 +17,7 @@ $pb_button_sizes: (
   @each $name, $size in $pb_button_sizes {
     &[class*=size_#{$name}] {
       font-size: $size;
-      padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
+      padding: calc(#{$size} / 2) calc(#{$size} * 2.42);
       @if $name == "sm" {
         min-height: 0;
       }

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -74,6 +74,31 @@ $transition: $transition_cubic;
         opacity: $opacity_10;
       }
     }
+
+    &:disabled ~ .pb_checkbox_checkmark {
+      cursor: not-allowed;
+      background-color: mix($charcoal, $white, 5%);
+      border-color: $border_light;
+
+      & ~ .pb_checkbox_label {
+        cursor: not-allowed;
+        color: $text_lt_light;
+      }
+      & ~ .pb_checkbox_label .pb_body_kit {
+        cursor: not-allowed;
+        color: $text_lt_light;
+      }
+    }
+
+    &:disabled:checked ~ .pb_checkbox_checkmark {
+      background-color: $neutral;
+      border-color: $neutral;
+    }
+
+    &:disabled:checked:hover ~ .pb_checkbox_checkmark {
+      background-color: $neutral;
+      border-color: $neutral;
+    }
   }
 
   &.dark {
@@ -81,6 +106,30 @@ $transition: $transition_cubic;
       &:focus ~ .pb_checkbox_checkmark {
         box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;      
       }
+
+      &:disabled ~ .pb_checkbox_checkmark {
+        cursor: not-allowed;
+        background-color: mix($charcoal, $white, 80%);
+        border: 2px solid $border_dark;
+
+        & ~ .pb_checkbox_label {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
+        & ~ .pb_checkbox_label .pb_body_kit {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
+      }
+
+      &:disabled:checked ~ .pb_checkbox_checkmark {
+        background-color: $border_dark;
+      }
+
+      &:disabled:checked:hover ~ .pb_checkbox_checkmark {
+        background-color: $border_dark;
+        border-color: $border_dark;
+      }
     }
     
     @media (hover:hover) {

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -12,6 +12,7 @@ type CheckboxProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
+  disabled?: boolean,
   error?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -31,6 +32,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
     className,
     dark = false,
     data = {},
+    disabled = false,
     error = false,
     htmlOptions = {},
     id,
@@ -67,6 +69,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
     return (
     <input
         defaultChecked={checked}
+        disabled={disabled}
         name={name}
         onChange={onChange}
         ref={checkRef}

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

@@ -9,6 +9,7 @@ module Playbook
       prop :text
       prop :value
       prop :name
+      prop :disabled, type: Playbook::Props::Boolean, default: false
 
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
@@ -26,7 +27,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked, input_options)
+        check_box_tag(name, value, checked, input_options.merge(disabled: disabled))
       end
 
       def checkbox_label_status

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -92,3 +92,17 @@ test('has checked attribute', () => {
   const kit = screen.getByTestId(testId)
   expect(kit.getElementsByTagName('input')[0]).toHaveAttribute('checked')
 })
+
+test('has disabled attribute', () => {
+  render(
+    <Checkbox
+        data={{ testid: testId }}
+        disabled
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />)
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('input')
+  expect(input).toHaveAttribute('disabled')
+}) 

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

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("checkbox" , props: {
+            input_options: { tabindex: 0 },
+            margin_bottom: "xs",
+            text: "Disabled unchecked",
+            value: "checkbox-value",
+            disabled: true,
+            name: "checkbox-name"
+        }) %>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("checkbox" , props: {
+            input_options: { tabindex: 0 },
+            text: "Disabled checked",
+            value: "checkbox-value",
+            disabled: true,
+            checked: true,
+            name: "checkbox-name"
+        }) %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import Checkbox from '../_checkbox'
+
+const CheckboxDisabled = (props) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <Checkbox
+          disabled
+          marginBottom="xs"
+          name="default name"
+          tabIndex={0}
+          text="Disabled unchecked"
+          value="default value"
+          {...props}
+      />
+      <Checkbox
+          checked
+          disabled
+          name="checkbox-name"
+          text="Disabled checked"
+          value="check-box value"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default CheckboxDisabled

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

@@ -6,6 +6,7 @@ examples:
     - checkbox_error: Default w/ Error
     - checkbox_options: Checkbox w/ Options
     - checkbox_indeterminate: Indeterminate Checkbox
+    - checkbox_disabled: Disabled Checkbox
 
   react:
   - checkbox_default: Default
@@ -13,6 +14,7 @@ examples:
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
+  - checkbox_disabled: Disabled Checkbox
 
   swift:
     - checkbox_default_swift: Default

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

@@ -3,3 +3,4 @@ export { default as CheckboxCustom } from './_checkbox_custom.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
+export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'

data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md

@@ -0,0 +1,43 @@
+[!Currency-Alignment](https://github.com/powerhome/playbook-swift/assets/112719604/d74a9c5a-c606-4cd0-bf70-20e9297ec246)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  HStack {
+    PBCurrency(
+      amount: "2,000",
+      decimalAmount: ".50",
+      label: "left",
+      size: .title4,
+      symbol: "en_US",
+      isEmphasized: true,
+      alignment: .leading
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .leading)
+  HStack {
+    PBCurrency(
+      amount: "342",
+      decimalAmount: ".00",
+      label: "center",
+      size: .title4,
+      symbol: "en_EU",
+      isEmphasized: true,
+      alignment: .center
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .center)
+  HStack {
+    PBCurrency(
+      amount: "45",
+      label: "right",
+      size: .title4,
+      symbol: "en_US",
+      unit: "/mo",
+      isEmphasized: true,
+      hasUnit: true,
+      alignment: .trailing
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .trailing)
+}
+```

data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md

@@ -0,0 +1,12 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **amount** | `String` | Allows user to enter a currency amount | |  |
+| **decimalAmount** | `String` | Allows user to enter a decimal amount |  | |
+| **label** | `String` | Allows user to a descriptive label value |  | |
+| **size** | `PBFont` | Allows user to choose the size of the amount that is being displayed | `.title4` | `title4` `title3` `title4` |
+| **symbol** | `String` | A string value used to produce the desired currency symbol |  | |
+| **unit** | `String` | Allows user to add a unit of measure instead of a decimal amount |  | |
+| **alignment** | `Alignment` | Sets alignment of content | `.leading` | `leading` `center` `trailing` |
+| **isEmphasized** | `Bool` | Determines whether or not the currency that is being displayed is emphasized | `false` | `true` `false` |
+| **hasUnit** | `Bool` | Determines whether or not the currency has a decimal value or a unit of measure | `false` | `true` `false` |

data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md

@@ -0,0 +1,31 @@
+![Currency-Default](https://github.com/powerhome/playbook-swift/assets/54749071/bf3810f9-6dd2-4bdd-b32a-14109f3a0b9a)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBCurrency(
+    amount: "2,000",
+    decimalAmount: ".50",
+    label: "small",
+    size: .title4,
+    symbol: "en_US",
+    isEmphasized: true
+  )
+  PBCurrency(
+    amount: "342",
+    decimalAmount: ".00",
+    label: "medium",
+    size: .title3,
+    symbol: "en_EU",
+    isEmphasized: true
+  )
+  PBCurrency(
+    amount: "45",
+    label: "large",
+    size: .title1,
+    symbol: "en_US",
+    unit: "/mo",
+    isEmphasized: true,
+    hasUnit: true
+  )
+}
+```

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

@@ -17,3 +17,8 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
+
+  swift:
+  - currency_size_swift: Size
+  - currency_alignment_swift: Alignment
+  - currency_props_swift: ""

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md

@@ -1,3 +1,5 @@
 Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
 
-The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+
+NOTE: On Change does not account for manual input by users, so if your date picker sets `allowInput`, you should use the `onClose` method instead.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md

@@ -1,3 +1,5 @@
 The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
 
-The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
+
+NOTE: `onClose` is the ideal handler function to use when `allowInput` is enabled.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md

@@ -1 +1 @@
-Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.
+Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md

@@ -0,0 +1,14 @@
+![Date-Range-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/ccb85e5d-0f6d-4ced-8154-aa9dfa72a131)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateRangeStacked(
+    startDate: Date().makeDate(year: 2019, month: 6, day: 18),
+    endDate: Date().makeDate(year: 2020, month: 3, day: 20),
+    startAlignment: .trailing,
+    endAlignment: .leading,
+    startVariant: .short(showIcon: false),
+    endVariant: .short(showIcon: false)
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md

@@ -0,0 +1,9 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **startDate** | `Date()` | Takes a string value to set the starting date range value | `Date()` |  |
+| **endDate** | `Date()` | Takes a string value to set the ending date range value |  `Date()` |  |
+| **startAlignment** | `Alignment` | Changes the alignment of the starting date | `.leading` | `.leading` `.trailing` |
+| **endAlignment** | `Alignment` | Changes the alignment of the ending date | `.leading` | `.leading` `.trailing` |
+| **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
+| **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |

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

@@ -5,3 +5,7 @@ examples:
   
   react:
   - date_range_stacked_default: Default
+
+  swift:
+  - date_range_stacked_default_swift: Default
+  - date_range_stacked_props_swift: ""

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

@@ -235,11 +235,11 @@
           height: $space_xl * 2;
         }
         .dialog_footer {
-          position:fixed;
+          position: fixed;
           bottom: 0;
           background-color: $white;
+          max-width: 100%;
         }
-
         &[class*="_sm"] {
           width: $medium;
           .dialog_footer {
@@ -319,6 +319,7 @@
         position:fixed;
         bottom: 0;
         background-color: $white;
+        max-width: 100%;
       }
       &[class*="_sm"] {
         width: $medium;
@@ -372,3 +373,4 @@
     cursor: pointer;
   }
 }
+