playbook_ui_docs 14.9.0.pre.alpha.PLAY16264818 → 14.9.0.pre.alpha.PLAY16264952

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5db0c76bd6ac888d211e3b5213e5f6926669edaf064d364c236c52e8286e4326
-  data.tar.gz: 7b63bdcb87aaaf41211b0bd254350da776161d453504ac3e82e55ee79243b0bb
+  metadata.gz: b467fbcae42be9e319abfbe8598c7faac4e81b90c8b0e9e917f2e10cc80e88a3
+  data.tar.gz: 509c4072db236dfab4715bcab6a0b781b01bd72521366a0f57389fa847d9df32
 SHA512:
-  metadata.gz: 6042b450ad6db13c1206d7e42babf09c7989db65b91048e1e12c9b9eb1a5c0e3b33044107ac903a69b61490695cc3891a1bfaff578773f5a034b980ff06b5f50
-  data.tar.gz: b4c8cd83fc92a4f9b016be33e6606396202f4ed3941ee16ee60726b63d1599d96c1cddcc766a47b746d47d302858a246144760376ce2291067b25861418a3ecc
+  metadata.gz: b0b6b3151f01ea063e24f2bad4c8358fcdb9e9f7b2339bed8dc8767c15bfdccbe37c8fd5607e2dc64aa7fadfa8d5438e598efb0b582e2b84525521a13c04edc8
+  data.tar.gz: a1798e5a109c940e7133ac624b9a22bf3a93267d4fead3b7647ab9849c3b97327d510c4f1664b1b31683e288ada514679bb506c1dfff047854d0bb8ee360094a

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

@@ -1,66 +1,70 @@
 import React from 'react'
-
+import ReactDOMServer from 'react-dom/server'
 import BarGraph from '../_bar_graph'
+import Icon from '../../pb_icon/_icon'
+
+const chartData = [
+  {
+    name: 'Role',
+    data: [0, 200, 300, 654, 656],
+  },
+  {
+    name: 'Company',
+    data: [150, 524, 320, 440, 500],
+  },
+]
 
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  name: 'Manufacturing',
-  data: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
+const renderIcon = (iconName, color) => {
+  return ReactDOMServer.renderToStaticMarkup(
+  <Icon
+      color={color}
+      icon={iconName}
+  />)
+};
 
 const barGraphOptions = {
-  subtitle: {
-    text: "Overwritten subtitle",
-    style: {
-      color: "red"
-    }
+  yAxis: {
+    tickInterval: 5,
   },
   xAxis: {
-      labels: {
-          useHTML: true,
-          formatter: function() {
-              switch (this.value) {
-                  case 'Jan':
-                      return `<i class="far fa-apple-whole"></i> ${this.value}`
-                  case 'Feb':
-                      return `<i class="far fa-strawberry"></i> ${this.value}`
-                  case 'Mar':
-                      return `<i class="far fa-lemon"></i> ${this.value}`
-                  case 'Apr':
-                      return `<i class="far fa-pear"></i> ${this.value}`
-                  case 'May':
-                      return `<i class="far fa-peach"></i> ${this.value}`
-                  default:
-                      return ''
-              }
-          }
-      }
-  }
+    categories: ['1', '2', '3', '4', '5'],
+    labels: {
+      useHTML: true,
+      formatter: function () {
+        switch (this.value) {
+          case '1':
+            return `${renderIcon('frown', 'error')}`;
+          case '2':
+            return `${renderIcon('frown', 'warning')}`;
+          case '3':
+            return `${renderIcon('frown-open', 'neutral')}`;
+          case '4':
+            return `${renderIcon('smile', 'category_7')}`;
+          case '5':
+            return `${renderIcon('smile-beam', 'success')}`;
+          default:
+            return ''
+        }
+      },
+      style: {
+        fontSize: '1.4em',
+      },
+      y: 42,
+    },
+  },
+  legend: {
+    itemMarginTop: 62,
+  },
 }
 
-const BarGraphCustom = (props) => (
+const BarGraphCustom = () => (
   <div>
     <BarGraph
-        axisTitle="Number of Employees"
         chartData={chartData}
         customOptions={barGraphOptions}
-        id="bar-custom"
-        subTitle="Subtitle to replace"
+        id="happiness-dashboard"
+        legend
         title="Bar Graph with Custom Overrides"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
     />
   </div>
 )

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

@@ -1,49 +1,42 @@
 <% data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
+  name: 'Role',
+  data: [0, 200, 300, 654, 656],
 }, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
+  name: 'Company',
+  data: [150, 524, 320, 440, 500],
 }] %>
 
 <% bar_graph_options = {
-    customOptions: {
-        subtitle: {
-            text: "Overwritten subtitle",
-            style: {
-                color: "red"
-            }
+  customOptions: {
+    yAxis: {
+      tickInterval: 5,
+    },
+    xAxis: {
+      categories: [
+        raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
+      ],
+      labels: {
+        useHTML: true,
+        sytle: {
+          fontSize: '1.4em',
         },
-        xAxis: {
-            categories: [
-                '<i class="far fa-apple-whole"></i> Jan',
-                '<i class="far fa-strawberry"></i> Feb',
-                '<i class="far fa-lemon"></i> Mar',
-                '<i class="far fa-pear"></i> Apr',
-                '<i class="far fa-peach"></i> May'
-            ],
-            labels: {
-                useHTML: true,
-            }
-        }
-    }
+        y: 42,
+      },
+    },
+    legend: {
+      itemMarginTop: 62,
+    },
+  } 
 } %>
 
 <%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
     chart_data: data,
     id: "bar-default",
-    y_axis_min: 0,
-    subtitle: 'Subtitle to replace',
+    legend: true,
     title: 'Bar Graph with Custom Overrides',
     custom_options: bar_graph_options
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -13,6 +13,7 @@ const BreadCrumbsDefault = (props) => {
       <Icon
           icon="home"
           size="1x"
+          {...props}
       />
       <BreadCrumbItem
           {...props}
@@ -22,11 +23,13 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Home"
+            {...props}
         />
       </BreadCrumbItem>
       <Icon
           icon="users"
           size="1x"
+          {...props}
       />
       <Link
           {...props}
@@ -36,17 +39,20 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Users"
+            {...props}
         />
       </Link>
       <Icon
           icon="user"
           size="1x"
+          {...props}
       />
       <Link {...props}>
         <Title
             size="4"
             tag="span"
             text="User"
+            {...props}
         />
       </Link>
     </BreadCrumbs>

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

@@ -0,0 +1,138 @@
+import React from "react"
+import { useForm } from "react-hook-form"
+import { Checkbox, Card, Body, Button } from "playbook-ui"
+
+const CheckboxForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm({
+    defaultValues: {
+      termsAccepted: false,
+      newsletter: false,
+      interests: [],
+      preferences: {
+        emailUpdates: false,
+        smsUpdates: false,
+        pushNotifications: false,
+      },
+    },
+  })
+
+  const onSubmit = (data) => {
+    console.log("Form submitted:", data)
+  }
+
+  const formValues = watch()
+
+  return (
+    <div>
+      <Card padding='md'>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div>
+            <Body marginBottom='xs'
+                text='Terms and Conditions'
+            />
+            <Checkbox
+                error={errors.termsAccepted?.message}
+                name='termsAccepted'
+                register={register}
+                rules={{
+                required: "You must accept the terms and conditions",
+              }}
+                text='I accept the terms and conditions'
+            />
+          </div>
+          <div className='mt-4'>
+            <Body marginBottom='xs'
+                text='Newsletter Subscription'
+            />
+            <Checkbox
+                name='newsletter'
+                register={register}
+                text='Subscribe to our newsletter'
+            />
+          </div>
+          <div className='mt-4'>
+            <Body marginBottom='xs'
+                text='Your Interests'
+            />
+            <Checkbox
+                error={errors.interests?.message}
+                name='interests'
+                register={register}
+                rules={{
+                validate: (value) => {
+                  const selectedInterests = Object.values(value).filter(Boolean)
+                  return (
+                    selectedInterests.length >= 1 ||
+                    "Please select at least one interest"
+                  )
+                },
+              }}
+                text='Technology'
+                value='technology'
+            />
+            <Checkbox
+                name='interests'
+                register={register}
+                text='Design'
+                value='design'
+            />
+            <Checkbox
+                name='interests'
+                register={register}
+                text='Business'
+                value='business'
+            />
+            <Checkbox
+                name='interests'
+                register={register}
+                text='Marketing'
+                value='marketing'
+            />
+          </div>
+          <div className='mt-4'>
+            <Body marginBottom='xs'
+                text='Communication Preferences'
+            />
+            <Checkbox
+                name='preferences.emailUpdates'
+                register={register}
+                text='Email Updates'
+            />
+            <Checkbox
+                name='preferences.smsUpdates'
+                register={register}
+                text='SMS Updates'
+            />
+            <Checkbox
+                name='preferences.pushNotifications'
+                register={register}
+                text='Push Notifications'
+            />
+          </div>
+          <Button
+              htmlType="submit"
+              marginTop='lg'
+              text='Submit'
+              type='submit'
+              variant='primary'
+          />
+        </form>
+        <Card marginTop='lg'>
+          <Body text='Current Form Values:'
+              variant='bold'
+          />
+          <pre style={{ marginTop: "8px", color: "white" }}>
+            {JSON.stringify(formValues, null, 2)}
+          </pre>
+        </Card>
+      </Card>
+    </div>
+  )
+}
+
+export default CheckboxForm

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

@@ -9,12 +9,13 @@ examples:
     - checkbox_disabled: Disabled Checkbox
 
   react:
-  - checkbox_default: Default
-  - checkbox_checked: Load as checked
-  - checkbox_custom: Custom Checkbox
-  - checkbox_error: Default w/ Error
-  - checkbox_indeterminate: Indeterminate Checkbox
-  - checkbox_disabled: Disabled Checkbox
+    - checkbox_default: Default
+    - checkbox_checked: Load as checked
+    - checkbox_custom: Custom Checkbox
+    - checkbox_error: Default w/ Error
+    - checkbox_indeterminate: Indeterminate Checkbox
+    - checkbox_disabled: Disabled Checkbox
+    - checkbox_form: Checkbox Form
 
   swift:
     - checkbox_default_swift: Default

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

@@ -4,3 +4,4 @@ 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'
+export { default as CheckboxForm } from './_checkbox_form.jsx'

data/app/pb_kits/playbook/pb_select/docs/_select_form.jsx

@@ -81,6 +81,7 @@ const SelectForm = (props) => {
           />
 
           <Button
+              htmlType="submit"
               marginTop="lg"
               text="Submit"
               type="submit"

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb

@@ -0,0 +1,95 @@
+<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
+  <thead>
+    <tr>
+      <th id="1">Column 1</th>
+      <th id="2">Column 2</th>
+      <th id="3">Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+      <th>Column 9</th>
+      <th>Column 10</th>
+      <th>Column 11</th>
+      <th>Column 12</th>
+      <th>Column 13</th>
+      <th>Column 14</th>
+      <th>Column 15</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+
+    </tr>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+
+    </tr>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+
+    </tr>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Table, Icon, Body, Card } from 'playbook-ui'
+
+const TableWithCollapsible = (props) => {
+
+  const Content = () => {
+    return (
+      <Card 
+          borderNone
+          borderRadius="none"
+          padding="md"
+          {...props}
+      >
+        <Body {...props}>Nested content inside a Table Row</Body>
+      </Card>
+    );
+  };
+
+return (
+      <Table
+          size="sm"
+          {...props}
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{'Column 1'}</Table.Header>
+            <Table.Header>{'Column 2'}</Table.Header>
+            <Table.Header>{'Column 3'}</Table.Header>
+            <Table.Header>{'Column 4'}</Table.Header>
+            <Table.Header>{'Column 5'}</Table.Header>
+            <Table.Header>{''}</Table.Header>
+          </Table.Row>
+
+        </Table.Head>
+        <Table.Body>
+          <Table.Row collapsible 
+              collapsibleContent={<Content/>}
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell textAlign="right">{ 
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />}
+            </Table.Cell>
+
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+  )
+}
+
+export default TableWithCollapsible

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md

@@ -0,0 +1 @@
+The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.