playbook_ui_docs 13.24.0 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e5efc79de663963e76ac9525d08ffb97afdc5a9ca0dcc4c4343d6402b02bcd5f
-  data.tar.gz: 2ae3fc3adba0255a543db54c2a7bba2b7f9bd4564667a70d8b3cd77bb1fd565d
+  metadata.gz: 133ebab77004aba4159126433c309713947db70bca683826c662c96a120aa070
+  data.tar.gz: bdd52471d072f9dceb69d08e32ac91ee869bad6d2980542a08a44cf4418ecb34
 SHA512:
-  metadata.gz: 315796eb5d147c63f7c9bb5277245aa2464295b8d04c37309b155beb237e604e238918c8d3f22b5508232bd0d9f91580256f7eaf1a8ad558aa86d3dd497f5b79
-  data.tar.gz: 973beef1e4087acded14520c8417efc695108010479896df48187d58ddc9bce8f36bf5aca6ac6d3b984f18adbd30c376abead0f5b16a8367e51745ccd11d9673
+  metadata.gz: 295d43d1813478690c1fd083359013a0207ae5fb2c79f2f702d139a3b781719eaa1b9d836940d478377971556325fa1d39560d417f61c6f5379e3d77640b531b
+  data.tar.gz: 76f1fa54e955307ed54c87ad0062f4fcb2698508da6b166c117d20e81ee883fa13bd5ceb0f6d8814b30e04d05c154d77c73486e12a0d01fbd5fd5b23093422d8

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb

@@ -0,0 +1,23 @@
+<% data = [{
+    name: 'Installation',
+    data: [-475, 400, -1000, 354, -856],
+    threshold: 0
+  }, {
+    name: 'Manufacturing',
+    data: [1475, 200, 1000, 654, -656],
+    threshold: 0
+  }, 
+  {
+    name: 'Sales & Distribution',
+    data: [1270, 100, -1200, 554, 756],
+    threshold: 0
+  }] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-default",
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Bar Graph with Negative Numbers',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Installation',
+  data: [-475, 400, -1000, 354, -856],
+  threshold: 0
+}, {
+  name: 'Manufacturing',
+  data: [1475, 200, 1000, 654, -656],
+  threshold: 0
+}, 
+{
+  name: 'Sales & Distribution',
+  data: [1270, 100, -1200, 554, 756],
+  threshold: 0
+}]
+
+
+const BarGraphStacked = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-default"
+        legend
+        title="Bar Graph with Negative Numbers"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphStacked

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}, {
+    type: 'spline',
+    name: 'Percentage',
+    data: [48, 70, 25, 55, 72],
+    color: '#F9BB00',
+    yAxis: 1
+}] %>
+
+<% axis_titles = [{name: "Number of Installations"}, {name: "Percentage"}] %>
+
+<% axis_formats = [{format: ""}, {format: "{value}%"}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_format: axis_formats,
+    axis_title: axis_titles,
+    chart_data: data,
+    id: "bar-spline",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    subtitle: 'Source: thesolarfoundation.com',
+    title: 'Bar Graph with Secondary Y-axis',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  type: 'spline',
+  name: 'Percentage',
+  data: [48, 70, 25, 55, 72],
+  color: '#F9BB00',
+  yAxis: 1
+}]
+
+const axisTitles = [ {name: "Number of Installations"}, {name: "Percentage"}]
+
+const axisFormats = [{format: ""}, {format: "{value}%"}]
+
+const BarGraphSecondaryYAxis= (props) => (
+  <div>
+    <BarGraph
+        axisFormat={axisFormats}
+        axisTitle={axisTitles}
+        chartData={chartData}
+        id="bar-spline"
+        legend
+        title="Bar Graph with Secondary Y-axis"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphSecondaryYAxis

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md

@@ -0,0 +1,3 @@
+Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing` yAxis: 1` to the second node of your `chartData` array. 
+
+To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb

@@ -0,0 +1,22 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475, 200, 3000, 654, 656],
+  }, 
+  {
+    name: 'Manufacturing',
+    data: [1270, 800, 200, 454, 956],
+  }, {
+    name: 'Sales & Distribution',
+    data: [975, 1600, 1500, 924, 500],
+  }] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-default",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    stacking: "normal",
+    title: 'Bar Graph with Stacked Columns',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, 
+{
+  name: 'Manufacturing',
+  data: [1270, 800, 200, 454, 956],
+}, {
+  name: 'Sales & Distribution',
+  data: [975, 1600, 1500, 924, 500],
+}]
+
+
+const BarGraphStacked = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number Of Employees"
+        chartData={chartData}
+        id="bar-default"
+        legend
+        stacking="normal"
+        title="Bar Graph with Stacked Columns"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphStacked

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md

@@ -0,0 +1 @@
+The `stacking` prop can be used for a stacked bar graph. The prop allows for `normal` or `percent` as options. 

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

@@ -9,6 +9,9 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
+  - bar_graph_stacked: Stacked
+  - bar_graph_negative_numbers: Negative Numbers
+  - bar_graph_secondary_y_axis: Secondary Y-Axis
 
 
   react:
@@ -20,3 +23,6 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
+  - bar_graph_stacked: Stacked
+  - bar_graph_negative_numbers: Negative Numbers
+  - bar_graph_secondary_y_axis: Secondary Y-Axis

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

@@ -6,3 +6,6 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
 export { default as BarGraphColors } from './_bar_graph_colors.jsx'
 export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
+export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
+export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
+export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'

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/docs/example.yml

@@ -27,5 +27,5 @@ examples:
   - dialog_default_swift: Simple
   - dialog_sizes_swift: Sizes
   - dialog_status_swift: Status
-  - dialog_props_table: ""
+  - dialog_props_swift: ""
   

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Dropdown } from '../../'
+
+const DropdownDefault = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownDefault

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

@@ -0,0 +1 @@
+The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb

@@ -0,0 +1,17 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger") %>
+    <%= pb_rails("dropdown/dropdown_container") do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Dropdown } from '../..'
+
+const DropdownSubcomponentStructure = (props) => {
+
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger/>
+      <Dropdown.Container>
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownSubcomponentStructure

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

@@ -0,0 +1,7 @@
+The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
+
+`Dropdown. Trigger` / `dropdown/dropdown_trigger`
+`Dropdown.Container`/ `dropdown/dropdown_container`
+`Dropdown.Option` / `dropdown/dropdown_option`
+
+See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props.