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

data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx

@@ -1,224 +0,0 @@
-import React, { useState } from 'react'
-
-import Filter from '../../pb_filter/_filter'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Checkbox from '../../pb_checkbox/_checkbox'
-import Flex from '../../pb_flex/_flex'
-import Table from '../../pb_table/_table'
-import Caption from '../../pb_caption/_caption'
-import Icon from '../../pb_icon/_icon'
-
-const people = [
-  { name: 'Hera Syndulla', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
-  { name: 'Kanan Jarrus', territory: 'USA', products: ['Siding', 'Roofing', 'Gutters'] },
-  { name: 'C1-10P', territory: 'USA', products: ['Roofing'] },
-  { name: 'Anakin Skywalker', territory: 'A galaxy far far away, like really far away...', products: ['Doors', 'Windows', 'Solar'] },
-  { name: 'Leia Organa', territory: 'Canada', products: ['Windows', 'Doors'] },
-  { name: 'Luke Skywalker', territory: 'Brazil', products: ['Solar', 'Roofing'] },
-  { name: 'Padmé Amidala', territory: 'Philippines', products: ['Siding', 'Gutters'] },
-  { name: 'Obi-Wan Kenobi', territory: 'USA', products: ['Windows', 'Siding'] },
-  { name: 'Ahsoka Tano', territory: 'Canada', products: ['Insulation', 'Solar'] },
-  { name: 'Boba Fett', territory: 'Brazil', products: ['Roofing', 'Gutters'] },
-  { name: 'Mace Windu', territory: 'Philippines', products: ['Doors', 'Siding'] },
-  { name: 'Grogu', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
-  { name: 'Sabine Wren', territory: 'Canada', products: ['Solar', 'Doors'] },
-  { name: 'C-3PO', territory: 'Brazil', products: ['Windows'] },
-  { name: 'R2-D2', territory: 'Philippines', products: ['Doors', 'Gutters'] },
-]
-
-const FilterSidebar = (props) => {
-  const [name, setName] = useState('')
-  const [ territory, setTerritory ] = useState('')
-  const [ products, setProducts ] = useState({})
-  const handleUpdateName = ({ target }) => {
-    setName(target.value)
-  }
-  const handleUpdateTerritory = ({ target }) => {
-    setTerritory(target.value)
-  }
-  const handleCheckboxChange = ({ target }) => {
-    setProducts(prev => ({
-      ...prev,
-      [target.name]: !prev[target.name],
-    }))
-  }
-  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
-  const [isProductsCollapsed, setIsProductsCollapsed] = useCollapsible(true)
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
-  ]
-
-  const filteredPeople = people.filter((person) => {
-    const matchesName = person.name.toLowerCase().includes(name.toLowerCase())
-
-    const matchesTerritory = territory === '' ? true : person.territory === territory
-
-    const matchesProducts = Object.values(products).every((product) => !product) ? true : person.products.some(product => products[product])
-
-    return matchesName && matchesTerritory && matchesProducts
-  })
-
-  return (
-    <>
-      <Flex>
-        <Filter
-            isCollapsed={isCollapsed}
-            marginRight="xs"
-            onCollapse={() => setIsCollapsed(!isCollapsed)}
-            results={filteredPeople.length}
-            sortOptions={{
-              popularity: 'Popularity',
-              // eslint-disable-next-line
-              manager_title: 'Manager\'s Title',
-              // eslint-disable-next-line
-              manager_name: 'Manager\'s Name',
-            }}
-            sortValue={[{ name: 'popularity', dir: 'desc' }]}
-            variant="sidebar"
-            width="xs"
-            {...props}
-        >
-          <Filter.Section
-              collapsed={isCollapsed}
-              headerText="Full Name"
-          >
-            <TextInput
-                onChange={handleUpdateName}
-                placeholder="Enter name"
-                value={name}
-                {...props}
-            />
-          </Filter.Section>
-          <SectionSeparator />
-          <Filter.Section
-              collapsed={isCollapsed}
-              collapsible
-              headerText="Territory"
-          >
-            <Select
-                blankSelection="Select One..."
-                name="location"
-                onChange={handleUpdateTerritory}
-                options={options}
-                {...props}
-            />
-          </Filter.Section>
-          <SectionSeparator />
-          <Filter.Section
-              collapsed={isCollapsed}
-              collapsible
-              headerText="Products"
-          >
-            <div>
-              <Checkbox
-                  marginBottom="sm"
-                  name="Doors"
-                  onChange={handleCheckboxChange}
-                  text="Doors"
-              />
-            </div>
-            <div>
-              <Checkbox
-                  marginBottom="sm"
-                  name="Windows"
-                  onChange={handleCheckboxChange}
-                  text="Windows"
-              />
-            </div>
-            <div>
-              <Checkbox
-                  marginBottom="sm"
-                  name="Siding"
-                  onChange={handleCheckboxChange}
-                  text="Siding"
-              />
-            </div>
-            {!isProductsCollapsed &&
-              <>
-                <div>
-                  <Checkbox
-                      checked={products["Roofing"]}
-                      marginBottom="sm"
-                      name="Roofing"
-                      onChange={handleCheckboxChange}
-                      text="Roofing"
-                  />
-                </div>
-                <div>
-                  <Checkbox
-                      checked={products["Gutters"]}
-                      marginBottom="sm"
-                      name="Gutters"
-                      onChange={handleCheckboxChange}
-                      text="Gutters"
-                  />
-                </div>
-                <div>
-                  <Checkbox
-                      checked={products["Solar"]}
-                      marginBottom="sm"
-                      name="Solar"
-                      onChange={handleCheckboxChange}
-                      text="Solar"
-                  />
-                </div>
-                <div>
-                  <Checkbox
-                      checked={products["Insulation"]}
-                      marginBottom="sm"
-                      name="Insulation"
-                      onChange={handleCheckboxChange}
-                      text="Insulation"
-                  />
-                </div>
-              </>
-            }
-            <div onClick={() => setIsProductsCollapsed(!isProductsCollapsed)}>
-              <Flex
-                  cursor="pointer"
-                  marginBottom="sm"
-              >
-                <Caption
-                    color="link"
-                    marginRight="xxs"
-                    size="xs"
-                    text={isProductsCollapsed ? "Show More" : "Show Less"}
-                />
-                <Icon
-                    icon={isProductsCollapsed ? "chevron-down" : "chevron-up"}
-                />
-              </Flex>
-            </div>
-          </Filter.Section>
-        </Filter>
-        <Table
-            size="sm"
-        >
-          <thead>
-            <tr>
-              <th>{'Name'}</th>
-              <th>{'Territory'}</th>
-              <th>{'Products'}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {filteredPeople.map((person) => (<tr key={person.name}>
-              <td>{ person.name }</td>
-              <td>{ person.territory }</td>
-              <td>{ person.products.join(", ") }</td>
-            </tr>))}
-          </tbody>
-        </Table>
-      </Flex>
-    </>
-  )
-}
-
-export default FilterSidebar

data/app/pb_kits/playbook/pb_title/docs/_title_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_tooltip/docs/_tooltip_click_open.html.erb

@@ -1,14 +0,0 @@
-<%= pb_rails("button", props: { 
-  text: "Click to Open",
-  id: "click-tooltip-trigger-1",
-  variant: "primary"
-}) %>
-
-<%= pb_rails("tooltip", props: {
-  trigger_element_selector: "#click-tooltip-trigger-1",
-  tooltip_id: "click-tooltip-1",
-  position: "top",
-  use_click_to_open: true
-}) do %>
-  Tooltip opened by click! Click trigger again to close.
-<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import Button from '../../pb_button/_button'
-import Tooltip from '../_tooltip'
-import Flex from '../../pb_flex/_flex'
-
-const TooltipClickOpen = (props) => {
-  return (
-    <Flex flexDirection='row'
-        gap='md'
-        wrap
-    >
-      <Tooltip
-          placement='top'
-          text='Tooltip Opened'
-          useClickToOpen
-          zIndex={10}
-          {...props}
-      >
-        <Button text='Click to Open' />
-      </Tooltip>
-    </Flex>
-  )
-}
-
-export default TooltipClickOpen

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md

@@ -1 +0,0 @@
-Set the prop `use_click_to_open` as `true` so that the tooltip will only appear when an item is clicked rather than hovered over.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md

@@ -1 +0,0 @@
-Set the prop `useClickToOpen` so that the tooltip will only appear when an item is clicked rather than hovered over.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb

@@ -1,18 +0,0 @@
-<%
-  options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-preserve-search-input",
-    is_multi: false,
-    label: "Colors",
-    options: options,
-    placeholder: "Select...",
-    preserve_search_input: true,
-  })
-%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md

@@ -1 +0,0 @@
-By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserve_search_input` prop in order to prevent text from being cleared when the field loses focus

data/dist/chunks/_circle_chart-CE1dVeaK.js

@@ -1 +0,0 @@
-import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,m as mapColors,H as HighchartsReact,d as Highcharts,e as classnames,g as globalProps,f as HighchartsMore}from"./_typeahead-CEZhT0Qr.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-CP6s-TZS.js";const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors!==void 0&&colors.length>0?mapColors(colors):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors.length>0?mapColors(colors):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};export{BarGraph as B,CircleChart as C};