playbook_ui_docs 14.0.0 → 14.1.0.pre.alpha.PA1477timestampkit3601

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 100ded5640f86b97412add22ed482400333157a24bc4a22ffe2b8c42a965a458
-  data.tar.gz: 94779c01b98f026171ac020ce2bb5c7e201ce434e2e6f3fd42c2a70395c4d633
+  metadata.gz: f4fffe3685bd39602858926aaabda9ad24f5aae62ae94e95c93e2ad64caa607e
+  data.tar.gz: 256e0c7c0eb8d622c5e62457c1a0f687a0970d542edcb2e27c418f0852e341bd
 SHA512:
-  metadata.gz: 05173a2c815b226c74ad40b8006293eec9c2c451c642dac0b86e24ad138805bb807aae8ffc60d605c89e22310a0ff663966b2752a5bc8422c1b1766abea85c9c
-  data.tar.gz: 7fede7cdd21bd27a82b1839f4ac6d3972bb5d172a1783058c0e3aafead1d5071d089dbb882d05a695e0cc96a99541304c52d09429249265abd7bfb89ca85350b
+  metadata.gz: c16cc5610ee2b7eca6e606c4121562c6b38a947f431e03b83ba4c54c10c330b5503fd1418ab63e6311d2647c20b52f37eaa61a937fa115ca86f300bcb16cc0b0
+  data.tar.gz: 4ab33015f8e2d087f8ee6e2223c17a9a6658bcd4799e74ee7085943e4090357a75d483b02d55306705434c4ddaa5d0ce90eef9af5de594a639f29291d69bfa1d

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

@@ -0,0 +1,67 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import Title from '../../pb_title/_title'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableResponsive = (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",
+    },
+  ]
+
+  return (
+    <div>
+      <Title
+          size={4}
+          text="Not Responsive"
+          {...props}
+      />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          responsive="none"
+          tableData={MOCK_DATA}
+          {...props}
+      />
+      <Title
+          paddingTop="sm"
+          size={4}
+          text="Responsive as Default"
+          {...props}
+      />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableResponsive

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

@@ -0,0 +1 @@
+The `responsive` prop can be set to "scroll" or "none", and is set to "scroll" by default to make Advanced Tables responsive. To disable, set `responsive="none"`.

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

@@ -14,3 +14,4 @@ examples:
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
+  - advanced_table_responsive: Responsive Tables

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

@@ -7,4 +7,5 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
 export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
 export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
-export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
+export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
+export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb

@@ -10,3 +10,16 @@
     variant: "notification"
   }) %>
 </div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "1",
+    variant: "notification_error",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "4",
+    variant: "notification_error"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx

@@ -4,20 +4,39 @@ import Badge from '../_badge'
 const BadgeNotification = (props) => {
   return (
     <>
-      <Badge
-          rounded
-          text="1"
-          variant="notification"
-          {...props}
-      />
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notification"
+            {...props}
+        />
 
-      &nbsp;
+        &nbsp;
 
-      <Badge
-          text="4"
-          variant="notification"
-          {...props}
-      />
+        <Badge
+            text="4"
+            variant="notification"
+            {...props}
+        />
+      </div>
+
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notificationError"
+            {...props}
+        />
+
+        &nbsp;
+
+        <Badge
+            text="4"
+            variant="notificationError"
+            {...props}
+        />
+      </div>
     </>
   )
 }

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

@@ -6,4 +6,6 @@ Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a
 
 To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
 
-The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.
+The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.
+
+The Date Picker expects a date format of `MM/DD/YYYY` by default. If a different date format (e.g. `DD/MM/YYYY`, `m/d/y`, etc.) is used, the component will not know how to handle it and use a default date instead. To change the date format used, read more [here](#format).

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -5,21 +5,17 @@ const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)
   const close = () => setIsOpen(false)
   const open = () => setIsOpen(true)
-  const [isLoading, setIsLoading] = useState(false)
 
   return (
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
           cancelButton="Cancel Button"
-          className="wrapper"
           confirmButton="Okay"
-          loading={isLoading}
           onCancel={close}
           onClose={close}
-          onConfirm={() => setIsLoading(!isLoading)}
+          onConfirm={close}
           opened={isOpen}
-          portalClassName="portal"
           size="sm"
           text="Hello Body Text, Nice to meet ya."
           title="Header Title is the Title Prop"

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Button, Dialog } from 'playbook-ui'
+
+const DialogLoading = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => {
+    if (!isLoading) {
+      setIsOpen(false)
+    }
+  }
+  const open = () => setIsOpen(true)
+  const [isLoading, setIsLoading] = useState(false)
+  const submit = async () => {
+    setIsLoading(true)
+
+    try {
+      await new Promise((r) => setTimeout(r, 3000))
+      setIsOpen(false)
+    } catch (error) {
+      console.error("An error occurred.")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog'}</Button>
+      <Dialog
+          cancelButton="Cancel"
+          className="wrapper"
+          confirmButton="Okay"
+          loading={isLoading}
+          onCancel={close}
+          onClose={close}
+          onConfirm={submit}
+          opened={isOpen}
+          size="sm"
+          text="Make a 3 second request?"
+          title="Loading Example"
+      />
+    </>
+  )
+}
+
+export default DialogLoading

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

@@ -22,6 +22,7 @@ examples:
   - dialog_stacked_alert: Stacked Button Alert
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
+  - dialog_loading: Loading
 
   swift:
   - dialog_default_swift: Simple

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

@@ -8,3 +8,4 @@ export { default as DialogStatus } from './_dialog_status.jsx'
 export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
+export { default as DialogLoading } from './_dialog_loading.jsx'

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -45,6 +45,7 @@
     class: "checkbox-class"
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -35,6 +35,7 @@
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -5,11 +5,11 @@ examples:
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-  # - form_pill_icon: Form Pill Icon
+  - form_pill_icon: Form Pill Icon
 
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-  # - form_pill_icon: Form Pill Icon
+  - form_pill_icon: Form Pill Icon

data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { GanttChart } from "playbook-ui";
+
+const mockOptions = {
+  title: {
+    text: "Simple Gantt Chart",
+  },
+
+  xAxis: [
+    {
+      min: Date.UTC(2014, 10, 17),
+      max: Date.UTC(2014, 10, 30),
+    },
+  ],
+
+  series: [
+    {
+      name: "Project 1",
+      data: [
+        {
+          name: "Start prototype",
+          start: Date.UTC(2014, 10, 18),
+          end: Date.UTC(2014, 10, 25),
+        },
+        {
+          name: "Develop",
+          start: Date.UTC(2014, 10, 20),
+          end: Date.UTC(2014, 10, 25),
+        },
+        {
+          name: "Run acceptance tests",
+          start: Date.UTC(2014, 10, 23),
+          end: Date.UTC(2014, 10, 26),
+        },
+        {
+          name: "Test prototype",
+          start: Date.UTC(2014, 10, 27),
+          end: Date.UTC(2014, 10, 29),
+        },
+      ],
+    },
+  ],
+};
+
+const GanttChartDefault = (props) => (
+  <div>
+    <GanttChart customOptions={mockOptions} 
+        {...props} 
+    />
+  </div>
+);
+
+export default GanttChartDefault;

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

@@ -0,0 +1,7 @@
+examples:
+  
+  
+  react:
+  - gantt_chart_default: Default
+  
+  

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

@@ -0,0 +1 @@
+export { default as GanttChartDefault } from './_gantt_chart_default.jsx'

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb

@@ -47,6 +47,7 @@
                                           value: 19.18,
                                           variant:"green"
  }) %>
+ <br>
  <%= pb_rails("icon_stat_value", props: { icon: "globe",
                                           text: "Uranus",
                                           unit: "AU",

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("online_status", props: { no_border: true }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import OnlineStatus from '../_online_status'
+
+const OnlineStatusNoBorder = (props) => (
+  <>
+    <OnlineStatus
+        noBorder
+        {...props}
+    />
+  </>
+)
+
+export default OnlineStatusNoBorder

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("online_status", props: { size: "sm", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { size: "md", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { size: "lg", margin_y: "xs" }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import OnlineStatus from '../_online_status'
+
+const OnlineStatusSize = (props) => (
+  <>
+    <OnlineStatus
+        marginY="xs"
+        size="sm"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        size="md"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        size="lg"
+        {...props}
+    />
+  </>
+)
+
+export default OnlineStatusSize

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

@@ -1,8 +1,12 @@
 examples:
 
   rails:
-  - online_status_default: Default
+  - online_status_default: Colors
+  - online_status_size: Size
+  - online_status_no_border: No Border
 
 
   react:
-  - online_status_default: Default
+  - online_status_default: Colors
+  - online_status_size: Size
+  - online_status_no_border: No Border

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

@@ -1 +1,3 @@
 export { default as OnlineStatusDefault } from './_online_status_default.jsx'
+export { default as OnlineStatusSize } from './_online_status_size.jsx'
+export { default as OnlineStatusNoBorder } from './_online_status_no_border.jsx'

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb

@@ -0,0 +1,61 @@
+<div id="outer-container">
+    <%= pb_rails("overlay", props: { id: "overlay-container", overflow: "hidden" }) do %>
+        <div id="underlying-table">
+            <%= pb_rails("table", props: { size: "sm" }) do %>
+                <thead>
+                    <tr>
+                        <th>Column 1</th>
+                        <th>Column 2</th>
+                        <th>Column 3</th>
+                        <th>Column 4</th>
+                        <th>Column 5</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <% 7.times do %>
+                        <tr>
+                            <td>Value 1</td>
+                            <td>Value 2</td>
+                            <td>Value 3</td>
+                            <td>Value 4</td>
+                            <td>Value 5</td>
+                        </tr>
+                    <% end %>   
+                </tbody>
+            <% end %>
+        </div>
+    <% end %>
+    <%= pb_rails("button", props: { text: "Show More", id: "show-more-button", variant: "link", full_width: true, icon: "chevron-down", icon_right: true }) %>
+    <%= pb_rails("button", props: { text: "Show Less", id: "show-less-button", variant: "link", full_width: true, icon: "chevron-up", icon_right: true }) %>
+</div>
+
+<script type="text/javascript">
+document.addEventListener("DOMContentLoaded", () => {
+  const showMoreButton = document.getElementById("show-more-button");
+  const showLessButton = document.getElementById("show-less-button");
+  const overlayContainer = document.getElementById("overlay-container");
+  const underlyingTable = document.getElementById("underlying-table");
+  const outerContainer = document.getElementById("outer-container");
+
+  showLessButton.style.display = "none";
+  underlyingTable.style.height = "200px";
+
+  const showMore = () => {
+    outerContainer.appendChild(underlyingTable);
+    outerContainer.appendChild(showLessButton);
+    showMoreButton.style.display = "none";
+    showLessButton.style.display = "flex";
+    underlyingTable.style.height = "auto";
+  };
+
+  const showLess = () => {
+    overlayContainer.appendChild(underlyingTable);
+    showMoreButton.style.display = "flex";
+    showLessButton.style.display = "none";
+    underlyingTable.style.height = "200px";
+  };
+
+  showMoreButton.addEventListener("click", showMore);
+  showLessButton.addEventListener("click", showLess);
+});
+</script>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx

@@ -0,0 +1,70 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from "react";
+import { Overlay, Table, Button } from "playbook-ui";
+
+const TableExample = () => {
+    return (
+        <Table size="sm">
+            <thead>
+                <tr>
+                    <th>{"Column 1"}</th>
+                    <th>{"Column 2"}</th>
+                    <th>{"Column 3"}</th>
+                    <th>{"Column 4"}</th>
+                    <th>{"Column 5"}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 7 }, (_, index) => (
+                    <tr key={index}>
+                        {Array.from({ length: 5 }, (_, columnIndex) => (
+                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    );
+};
+
+const OverlayToggle = () => {
+    const [showOverlay, setShowOverlay] = useState(true);
+
+    return (
+        <>
+            {showOverlay ? (
+                <>
+                    <Overlay overflow="hidden">
+                        <div style={{ height: 200 }}>
+                            <TableExample />
+                        </div>
+                    </Overlay>
+                    <Button
+                        fullWidth
+                        icon="chevron-down"
+                        iconRight
+                        key="chevron-down"
+                        onClick={() => setShowOverlay(false)}
+                        text="Show More"
+                        variant="link"
+                    />
+                </>
+            ) : (
+                <>
+                    <TableExample />
+                    <Button
+                        fullWidth
+                        icon="chevron-up"
+                        iconRight
+                        key="chevron-up"
+                        onClick={() => setShowOverlay(true)}
+                        text="Show Less"
+                        variant="link"
+                    />
+                </>
+            )}
+        </>
+    );
+};
+
+export default OverlayToggle;

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md

@@ -0,0 +1 @@
+To toggle an overlay, add a button with an event handler. Remove the overlay container to reveal the underlying content. Re-wrap the overlay container to add the overlay back.

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

@@ -2,7 +2,9 @@ examples:
   react:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+  - overlay_toggle: Toggle
 
   rails:
-    - overlay_default: Default
-    - overlay_multi_directional: Multi-directional
+  - overlay_default: Default
+  - overlay_multi_directional: Multi-directional
+  - overlay_toggle: Toggle

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

@@ -1,2 +1,3 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
+export { default as OverlayToggle } from './_overlay_toggle.jsx'

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Pagination from '../_pagination'
+
+const PaginationDefault = (props) => {
+
+    return (
+      <>
+        <Pagination
+            current={1}
+            range={5}
+            total={10}
+            {...props}
+          />
+      </>
+    )
+}
+
+export default PaginationDefault

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md

@@ -0,0 +1 @@
+The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.