playbook_ui 14.22.0.pre.alpha.testdialog8898 → 14.22.0.pre.rc.0

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md

@@ -1,5 +0,0 @@
-The optional `customSort` prop can be used to add a sort button within a subrow header. The button will only appear if that subrowheader has more than one subrow nested within it. This button comes with a callback function called `onCustomSortClick`.
-
-The `onCustomSortClick` provides as an argument an array of all the subrows nested within that level of the table. 
-
-__NOTE__: `customSort` must be used in conjunction with the `subRowHeaders` prop. The `customSort` DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.md

@@ -1,3 +0,0 @@
-The `virtualizedRows` boolean prop enables the rendering of a virtualized table using [Tanstack's Virtualizer Library](https://tanstack.com/virtual/v3/docs/api/virtualizer) with infinite scroll capabilities for large data sets.
-
-**Note:** Not all Advanced Table props work perfectly with the Virtualized Table - for complex table configurations with many added features or controls consider using the [Pagination](https://playbook.powerapp.cloud/kits/advanced_table/react#pagination) version instead. Additionally, it is a known issue that due to the use of absolute positioning for the virtualized header, it does not render in Safari.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx

@@ -1,64 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-import { colors } from "playbook-ui"
-
-const AdvancedTableRowStyling = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ]
-
-const rowStyling = [
-  {
-    rowId: "1",
-    backgroundColor: colors.warning,
-  },
-  {
-    rowId: "8",
-    backgroundColor: colors.category_1,
-    fontColor: colors.white,
-    expandButtonColor: colors.white,
-  },
-];
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          rowStyling={rowStyling}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableRowStyling

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md

@@ -1,7 +0,0 @@
-The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `rowStyling` gives you 3 optional controls:
-
-- `backgroundColor` : use this to control the background color of the row
-- `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.
-- `expandButtonColor`: use this to control the color of the expand icon if needed, for example if using a darker background color.
-
-**NOTE:** Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx

@@ -1,69 +0,0 @@
-import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import Icon from "../../pb_icon/_icon"
-import Flex from "../../pb_flex/_flex"
-import Caption from "../../pb_caption/_caption"
-import Tooltip from "../../pb_tooltip/_tooltip"
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-const AdvancedTableWithCustomHeader = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      header: () => (
-        <Flex alignItems="center" 
-            justifyContent="center"
-        >
-          <Caption marginRight="xs">New Enrollments</Caption>
-          <Tooltip placement="top" 
-              text="Whoa. I'm a Tooltip" 
-              zIndex={10}
-          >
-            <Icon cursor="pointer" 
-                icon="info"
-                size="xs" 
-            />
-          </Tooltip>
-        </Flex>
-      ),
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    },
-  ];
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableWithCustomHeader

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md

@@ -1 +0,0 @@
-The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well. 

data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts

@@ -1,106 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const barGraphTheme = {
-    title: {
-        text: "",
-        style: {
-            color: colors.text_lt_default,
-            fontFamily: typography.font_family_base,
-            fontWeight: typography.bold,
-            fontSize: typography.heading_3,
-        },
-    },
-    subtitle: {
-        text: "",
-        style: {
-            fontFamily: typography.font_family_base,
-            color: colors.text_lt_light,
-            fontWeight: typography.regular,
-            fontSize: typography.text_base,
-        },
-    },
-    chart: {
-        type: "column",
-    },
-    tooltip: {
-        backgroundColor: {
-            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-            stops: [
-                [0, colors.bg_dark],
-                [1, colors.bg_dark],
-            ],
-        },
-        style: {
-            fontFamily: typography.font_family_base,
-            color: colors.text_dk_default,
-            fontWeight: typography.regular,
-            fontSize: typography.text_smaller,
-        },
-    },
-    colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-    ],
-    credits: { enabled: false },
-    legend: { 
-        enabled: false, 
-        itemStyle: {
-            color: colors.text_lt_light,
-            fill: colors.text_lt_light,
-            fontSize: typography.text_smaller,
-        },
-     },
-    xAxis: {
-        gridLineWidth: 0,
-        lineColor: colors.border_light,
-        tickColor: colors.border_light,
-        labels: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-        title: {
-            style: {
-                color: colors.text_lt_default,
-                fontFamily: typography.font_family_base,
-                fontWeight: typography.regular,
-                fontSize: typography.heading_4,
-            },
-        },
-    },
-    yAxis: {
-        alternateGridColor: undefined as string | undefined,
-        minorTickInterval: null as number | null,
-        gridLineColor: colors.border_light,
-        minorGridLineColor: colors.border_light,
-        lineWidth: 0,
-        tickWidth: 0,
-        labels: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-        title: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-    },
-}
-
-export default barGraphTheme;

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

@@ -1,3 +0,0 @@
-By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
-
-Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md

@@ -1,4 +0,0 @@
-##### Prop
-`truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
-
-The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements. 
-Import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.

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

@@ -1 +0,0 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

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

@@ -1,52 +0,0 @@
-<%
-  options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" }
-  ]
-%>
-
-<%= pb_rails("dropdown", props: { label: "Multiple Icons", 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 }) do %>
-        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
-          <%= pb_rails("flex") do %>
-            <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
-            <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-          <% end %>
-          <%= pb_rails("icon", props: { icon: "check" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<%= pb_rails("dropdown", props: { label: "Icon on Left", options: options, padding_y: "md" }) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container") do %>
-    <% options.each do |option| %>
-      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
-        <%= pb_rails("flex", props: { align: "center" }) do %>
-          <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
-          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<%= pb_rails("dropdown", props: { label: "Icon on Right", 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 }) do %>
-        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
-          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-          <%= pb_rails("icon", props: { icon: "check" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

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

@@ -1,99 +0,0 @@
-import React from 'react'
-import Dropdown from '../_dropdown'
-
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import Icon from '../../pb_icon/_icon'
-
-const DropdownCustomIconOptions = (props) => {
-
-  const options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" },
-  ]
-
-
-  return (
-  <div>
-      <Dropdown label="Multiple Icons"
-          options={options}
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          >
-            <Flex align="center" 
-                justify="between"
-            >
-                <Flex align="center">
-                  <Icon icon="calendar" 
-                      paddingRight="xs"
-                      {...props}    
-                  />
-                  <Body color="default" 
-                      text={option.label}
-                      {...props}
-                  />
-                </Flex>
-                <Icon icon="check" 
-                    {...props}    
-                />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-
-      <Dropdown label="Icon on Left"
-          options={options} 
-          paddingY="md"
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id}
-              option={option}
-          >
-            <Flex align="center">
-              <Icon icon="calendar" 
-                  paddingRight="xs"
-                  {...props}
-              />
-              <Body color="default" 
-                  text={option.label}
-                  {...props}
-              />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-
-      <Dropdown label="Icon on Right"
-          options={options}
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id}
-              option={option}
-          >
-            <Flex align="center"
-                justify="between"
-            >
-              <Flex align="center">
-                <Body color="default" 
-                    text={option.label}
-                    {...props}
-                />
-              </Flex>
-              <Icon icon="check"
-                  {...props}
-              />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownCustomIconOptions

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

@@ -1 +0,0 @@
-Use the `dropdown/dropdown_option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.

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

@@ -1 +0,0 @@
-Use the `Dropdown.Option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.

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

@@ -1,28 +0,0 @@
-<%
-  options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" }
-  ]
-
-  selected_value = params[:selected_value]
-%>
-
-<%= pb_rails("dropdown", props: { label: "Choose Item", options: options }) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container") do %>
-    <% options.each do |option| %>
-      <% checked = (option[:value] == selected_value) %>
-      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
-        <%= pb_rails("flex", props: { align: "center" }) do %>
-          <%= pb_rails("radio", props: {
-            text: option[:label],
-            name: "dropdown_radio",
-            value: option[:value],
-            checked: checked,
-          }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

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

@@ -1,47 +0,0 @@
-import React, { useState } from 'react'
-import Dropdown from '../_dropdown'
-
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import Radio from '../../pb_radio/_radio'
-
-const DropdownCustomRadioOptions = (props) => {
-  const [selectedValue, setSelectedValue] = useState(null)
-
-  const options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" },
-  ]
-
-
-  return (
-  <div>
-      <Dropdown
-          label="Select Item"
-          onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
-          options={options}
-          {...props}
-      >
-        {options.map((option) => {
-          return (
-            <Dropdown.Option key={option.id}
-                option={option}
-            >
-              <Flex align="center">
-                <Radio
-                    checked={selectedValue === option.value}
-                    name="dropdown_radio"
-                    value={option.value}
-                />
-                <Body text={option.label} />
-              </Flex>
-            </Dropdown.Option>
-          )
-        })}
-      </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownCustomRadioOptions

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

@@ -1 +0,0 @@
-Radio inputs can be used inside `dropdown/dropdown_option` for a custom layout that mimics form-like selection within a dropdown.

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

@@ -1 +0,0 @@
-Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.

data/app/pb_kits/playbook/pb_filter/Filter/FilterSection.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-
-import Collapsible from '../../pb_collapsible/_collapsible'
-import Caption from '../../pb_caption/_caption'
-import Body from '../../pb_body/_body'
-
-type FilterSectionProps = {
-  children?: React.ReactChild[] | React.ReactChild,
-  collapsible?: boolean,
-  collapsed?: boolean,
-  headerText?: string,
-}
-const FilterSection = ({ children, collapsible = false, collapsed = true, headerText, }: FilterSectionProps): React.ReactElement => {
-  if (collapsible) {
-    return (
-      <Collapsible
-          collapsed={collapsed}
-          padding="none"
-      >
-        <Collapsible.Main
-            paddingX="sm"
-            paddingY="xs"
-        >
-            <Caption>{ headerText }</Caption>
-        </Collapsible.Main>
-        <Collapsible.Content
-            className="filter_section_collapsible"
-            paddingX="sm"
-        >
-          { children }
-        </Collapsible.Content>
-      </Collapsible>
-    )
-  }
-  
-  return (
-    <Body
-        paddingTop="xs"
-        paddingX="sm"
-    >
-      <>
-        {headerText && <Caption marginBottom="sm">{ headerText }</Caption>}
-        { children }
-      </>
-    </Body>
-  )
-}
-
-export default FilterSection

data/app/pb_kits/playbook/pb_filter/Filter/FilterSidebar.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-
-import { FilterDescription } from './CurrentFilters'
-import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
-import ResultsCount from './ResultsCount'
-
-import Flex from '../../pb_flex/_flex'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-
-export type FilterSidebarProps = {
-  children?: React.ReactChild[] | React.ReactChild,
-  filters?: FilterDescription,
-  results?: number,
-} & FilterBackgroundProps
-
-const FilterSidebar = ({
-  onCollapse,
-  onSortChange,
-  sortOptions,
-  sortValue,
-  filters,
-  results,
-  children,
-  dark,
-  isCollapsed,
-  maxHeight,
-  minWidth,
-  placement,
-  popoverProps,
-  ...bgProps
-}: FilterSidebarProps): React.ReactElement => (
-  <FilterBackground
-      dark={dark}
-      {...bgProps}
-  >
-    <Card.Body
-        paddingX="sm"
-        paddingY="xs"
-    >
-      <Flex
-          align="center"
-          justify="between"
-          orientation="row"
-      >
-        <ResultsCount
-            dark={dark}
-            results={results}
-            title
-        />
-        <div onClick={onCollapse}>
-          <Caption
-              color="link"
-              cursor="pointer"
-              size="xs"
-              text={isCollapsed ? "Expand All" : "Collapse All"}
-          />
-        </div>
-      </Flex>
-    </Card.Body>
-    <SectionSeparator dark={dark} />
-    <>
-      { children }
-    </>
-  </FilterBackground>
-)
-
-export default FilterSidebar