playbook_ui_docs 14.0.0 → 14.1.0.pre.alpha.PA1477timestampkit3536

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 100ded5640f86b97412add22ed482400333157a24bc4a22ffe2b8c42a965a458
-  data.tar.gz: 94779c01b98f026171ac020ce2bb5c7e201ce434e2e6f3fd42c2a70395c4d633
+  metadata.gz: a9a56199c55751b0622186a61c0072d89817f864fecd9cf1181b13d2555c84bf
+  data.tar.gz: c88fde11c878878b9b14e115b9fcbfcdb63bea5d5f2c296aa422b1aa09164221
 SHA512:
-  metadata.gz: 05173a2c815b226c74ad40b8006293eec9c2c451c642dac0b86e24ad138805bb807aae8ffc60d605c89e22310a0ff663966b2752a5bc8422c1b1766abea85c9c
-  data.tar.gz: 7fede7cdd21bd27a82b1839f4ac6d3972bb5d172a1783058c0e3aafead1d5071d089dbb882d05a695e0cc96a99541304c52d09429249265abd7bfb89ca85350b
+  metadata.gz: feb420d2480a3dfe7acc94e307ac4f98c613fa20957af19d990dc40d770c46aadcac3799c9cb30000c05d21bae6c4253f619868150ef0fcab35a4f7c5eb6b348
+  data.tar.gz: 98f2d9232423d8d2ff37a4607123f8caa31e7ae3b5d951707c100e48fc60defad52497a0e063de1ca0689be93f8d0796c40fbc4362d1e15f199ee5d071224ad4

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

@@ -6,6 +6,7 @@ examples:
     - star_rating_hide: Layout Options
     - star_rating_number_config: Number Config
     - star_rating_size_options: Size Options
+    - star_rating_interactive: Interactive
 
   react:
     - star_rating_default: Default
@@ -13,4 +14,5 @@ examples:
     - star_rating_background_options: Background Options
     - star_rating_hide: Layout Options
     - star_rating_number_config: Number Config
-    - star_rating_size_options: Size Options
+    - star_rating_size_options: Size Options
+    - star_rating_interactive: Interactive

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
 import Title from '../../pb_title/_title'
 
 const TextInputDefault = (props) => {
+  const [firstName, setFirstName] = useState('')
   const handleOnChangeFirstName = ({ target }) => {
     setFirstName(target.value)
   }
   const ref = React.createRef()
 
-  const [firstName, setFirstName] = useState('')
   const [formFields, setFormFields] = useState({
     firstName: 'Jane',
     lastName: 'Doe',

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

@@ -31,5 +31,5 @@
   options: expressionists,
   label: "Small Pills",
   multi_kit: "smallPill",
-  pills: true,
+  pills: true
 }) %>