playbook_ui_docs 13.28.0.pre.alpha.PBNTR296dropdownwithform2941 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f02e743e2bbecb16ca04bf79ae10a2586b38f6e04a132f65a230c423cb4a2910
-  data.tar.gz: 8e2257efd28225f8dcaf388aa3f2927e29f8e965db06178658647dd0e7f5293d
+  metadata.gz: 68319a6bec5bf342bcc43c82ea9f60eea9b3998bbc731ec509cc9045935afde3
+  data.tar.gz: 587805464e81282168cf9035f2100486356f4ceca8495879fcd10f0360d3df7e
 SHA512:
-  metadata.gz: 9fe0f38c9e9fd984301178933047053b5a74bd5f28f47416a442f5e19322b3b60cf0b6b7a4cb6be84dfa1050ad9ee75546cb5985a9be58ee6f5cab0fa5bc030a
-  data.tar.gz: 959a070dd6af81b899d5b026fe17b91f8d2058f620c4aa09791bdb6942cd425e4171a6067ee80c82388080a45a8e745a6bb8b0a466c63b27dfa9e1d34c25f8ae
+  metadata.gz: 76cedfd8ebd4cfb5cf29a38f03e646d52044cb058c486e26c82a0f8e84b30e051b5320591c86d605c14988719392e799cbff4c200580e8a063b85b074c12aaa4
+  data.tar.gz: dc466cd04903c60c0173f5e62ade2a93c92da6760c3f74da08d42adfcb07d677befe201b04435750b61688f6e82d80c57574c67e85d63d483417c46fdfc8cc51

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -0,0 +1,40 @@
+<% 
+  column_definitions = [
+    {
+      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",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+`subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
+
+`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

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

@@ -1,3 +1,3 @@
 `subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
 
-`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all', 'header" or "none". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'header' by default.
+`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

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

@@ -1,6 +1,7 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
+  - advanced_table_beta_subrow_headers: SubRow Headers
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -12,4 +13,3 @@ examples:
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: inline Row Loading
-

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

@@ -1 +1,2 @@
-See https://api.highcharts.com/highcharts/ for a comprehensive list of available options.
+The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.

data/app/pb_kits/playbook/pb_bar_graph/docs/{_bar_graph_custom.html.erb → _bar_graph_custom_rails.html.erb}

@@ -15,7 +15,7 @@
     data: [1111,677,3245,500,200]
 }] %>
 
-<% custom_options = {
+<% bar_graph_options = {
     customOptions: {
         subtitle: {
             text: "Overwritten subtitle",
@@ -45,5 +45,5 @@
     y_axis_min: 0,
     subtitle: 'Subtitle to replace',
     title: 'Bar Graph with Custom Overrides',
-    custom_options: custom_options
-}) %>
+    custom_options: bar_graph_options
+}) %>

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

@@ -0,0 +1,2 @@
+The `custom_options` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.

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

@@ -8,7 +8,7 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
-  - bar_graph_custom: Custom Overrides
+  - bar_graph_custom_rails: Custom Overrides
   - bar_graph_stacked: Stacked
   - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { SelectableList, Draggable, DraggableProvider } from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "1",
+    text: "Task 1",
+  },
+  {
+    id: "2",
+    text: "Task 2",
+  },
+  {
+    id: "3",
+    text: "Task 3",
+  },
+  {
+    id: "4",
+    text: "Task 4",
+  },
+];
+
+const DraggableDefault = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <DraggableProvider initialItems={data}
+        onChange={(items) => setInitialState(items)}
+    >
+      <Draggable
+          {...props}
+      >
+        <Draggable.Container>
+          <SelectableList variant="checkbox">
+            {initialState.map(({ id, text }) => (
+              <Draggable.Item id={id} 
+                  key={id}
+              >
+                <SelectableList.Item label={text} 
+                    name={id} 
+                    value={id} 
+                />
+              </Draggable.Item>
+            ))}
+          </SelectableList>
+        </Draggable.Container>
+      </Draggable>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableDefault;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+import {
+  Flex,
+  Caption,
+  Card,
+  FlexItem,
+  Badge,
+  Avatar,
+  Title,
+  Body,
+  Draggable,
+  DraggableProvider,
+} from "../../";
+
+// Initial groups to drag between
+const containers = ["To Do", "In Progress", "Done"];
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "1",
+    container: "To Do",
+    title: "Task 1",
+    description: "Bug fixes",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "2",
+    container: "To Do",
+    title: "Task 2",
+    description: "Documentation",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "3",
+    container: "In Progress",
+    title: "Task 3",
+    description: "Add a variant",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "4",
+    container: "To Do",
+    title: "Task 4",
+    description: "Add jest tests",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "5",
+    container: "Done",
+    title: "Task 5",
+    description: "Alpha testing",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  },
+  {
+    id: "6",
+    container: "In Progress",
+    title: "Task 6",
+    description: "Release",
+    assignee_name: "Sally Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
+  },
+];
+
+const DraggableMultipleContainer = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  const badgeProperties = (container) => {
+    switch (container) {
+      case "To Do":
+        return { text: "queue", color: "warning" };
+      case "In Progress":
+        return { text: "progress", color: "primary" };
+      default:
+        return { text: "done", color: "success" };
+    }
+  };
+
+  return (
+    <DraggableProvider initialItems={data}
+        onChange={(items) => setInitialState(items)}
+    >
+      <Draggable
+          display="flex"
+          justifyContent="center"
+          {...props}
+      >
+          {containers?.map((container) => (
+            <Draggable.Container 
+                container={container}
+                key={container} 
+                padding="sm"
+            >
+                <Caption textAlign="center">{container}</Caption>
+                <Flex 
+                    alignItems="stretch"
+                    orientation="column" 
+                >
+                  {initialState
+                    .filter((item) => item.container === container)
+                    .map(
+                      ({
+                        assignee_img,
+                        assignee_name,
+                        description,
+                        id,
+                        title,
+                      }) => (
+                        <Draggable.Item 
+                            container={container}
+                            id={id} 
+                            key={id}
+                        >
+                          <Card
+                              marginBottom="sm"
+                              padding="sm"
+                          >
+                            <Flex justify="between">
+                              <FlexItem>
+                                <Flex>
+                                  <Avatar
+                                      imageUrl={assignee_img}
+                                      name={assignee_name}
+                                      size="xxs"
+                                  />
+                                  <Title paddingLeft="xs" 
+                                      size={4}
+                                      text={title}
+                                  />
+                                </Flex>
+                              </FlexItem>
+                              <Badge
+                                  marginLeft="sm"
+                                  rounded
+                                  text={badgeProperties(container).text}
+                                  variant={badgeProperties(container).color}
+                              />
+                            </Flex>
+                            <Body paddingTop="xs"
+                                text={description} 
+                            />
+                          </Card>
+                        </Draggable.Item>
+                      )
+                    )}
+                </Flex>
+            </Draggable.Container>
+          ))}
+      </Draggable>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableMultipleContainer;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx

@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+import {
+  Flex,
+  Badge,
+  Title,
+  Icon,
+  Draggable,
+  DraggableProvider,
+  Card,
+  Caption,
+} from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "1",
+    text: "Joe Black",
+  },
+  {
+    id: "2",
+    text: "Nancy White",
+  },
+  {
+    id: "3",
+    text: "Bill Green",
+  },
+];
+
+const DraggableWithCards = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <DraggableProvider
+        initialItems={data}
+        onChange={(items) => setInitialState(items)}
+    >
+      <Draggable {...props}>
+        <Draggable.Container>
+          {initialState.map(({ id, text }) => (
+            <Draggable.Item id={id} 
+                key={id}
+			>
+              <Card
+                  highlight={{ position: "side", color: "primary" }}
+                  marginBottom="xs"
+              >
+                <Flex alignItems="stretch" 
+                    flexDirection="column"
+				>
+                  <Flex gap="xs">
+                    <Title size={4} 
+                        text={text} 
+					/>
+                    <Badge 
+                        text="35-12345" 
+                        variant="primary" 
+					/>
+                  </Flex>
+
+                  <Flex 
+                      gap="sm" 
+                      spacing="between"
+                  >
+                    <Caption 
+                        size="xs" 
+                        text="8:00A" 
+					/>
+                    <Flex gap="xxs">
+                      <Caption 
+                          size="xs" 
+                          text="Township Name" 
+                      />
+                      <Caption size="xs" 
+                          text="•" 
+                      />
+                      <Caption size="xs" 
+                          text="90210" 
+                      />
+                    </Flex>
+                  </Flex>
+
+                  <Flex gap="xxs" 
+                      spacing="between"
+                  >
+                    <Flex gap="xxs">
+                      <Caption color="error" 
+                          size="xs"
+                      >
+                        <Icon icon="house-circle-exclamation" />
+                      </Caption>
+                      <Caption color="success" 
+                          size="xs">
+                        <Icon icon="file-circle-check" />
+                      </Caption>
+                    </Flex>
+                    <Flex>
+                      <Badge rounded 
+                          text="Schedule QA" 
+                          variant="warning" 
+                       />
+                      <Badge rounded 
+                          text="Flex" 
+                          variant="primary" 
+                      />
+                      <Badge rounded 
+                          text="R99" 
+                          variant="primary" 
+                      />
+                    </Flex>
+                  </Flex>
+                </Flex>
+              </Card>
+            </Draggable.Item>
+          ))}
+        </Draggable.Container>
+      </Draggable>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableWithCards;

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

@@ -0,0 +1,9 @@
+examples:
+  
+  
+  react:
+  - draggable_default: Default
+  - draggable_with_cards: Draggable with Cards
+  - draggable_multiple_containers: Dragging Across Multiple Containers
+  
+  

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

@@ -0,0 +1,3 @@
+export { default as DraggableDefault } from './_draggable_default.jsx'
+export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+    Overlay,
+    Table,
+} from '../..'
+
+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 OverlayDefault = () => (
+    <>
+        <Overlay>
+            <TableExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayDefault

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

@@ -0,0 +1,7 @@
+Overlays require a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent.
+
+The optional `layout` prop accepts a `position` and a `size` as a key:value pair object.
+
+The `position` prop sets the side where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
+
+The `size` prop accepts a percentage value as a string and literally translates to how much of the container is covered by the overlay. By default, `size` is set to `100%` so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from '../..'
+
+const InlineCardsExample = () => {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            overflowX="auto"
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+}
+
+const OverlayMultiDirectional = () => (
+    <>
+        <Overlay
+            color="white"
+            layout={{"left-right": "10%"}}
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayMultiDirectional

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

@@ -0,0 +1,5 @@
+Optionally, you can pass multi-directional options (`left-right` or `top-bottom`) to the `position` prop, which create multiple overlays. 
+
+Your `color` is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the `size` percentage you set. 
+
+NOTE: Multi-directional overlays share the available container space, so passing a size greater than "50%" to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a size of 25% when using multi-directional overlays.

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

@@ -0,0 +1,4 @@
+examples:
+  react:
+  - overlay_default: Default
+  - overlay_multi_directional: Multi-directional

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

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

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

@@ -1 +1 @@
-A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color here: https://playbook.powerapp.cloud/utilities
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

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

@@ -7,39 +7,40 @@ const TableAlignmentColumn = (props) => {
     <Table
         {...props}
     >
-      <thead>
-        <tr>
-          <th>{'Column 1'}</th>
-          <th>{'Column 2'}</th>
-          <th>{'Column 3'}</th>
-          <th align="center">{'Rating'}</th>
-          <th align="right">{'Money'}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td align="center">{'3'}</td>
-          <td align="right">{'$57.32'}</td>
-        </tr>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td align="center">{'2'}</td>
-          <td align="right">{'$5,657.08'}</td>
-        </tr>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td align="center">{'4'}</td>
-          <td align="right">{'$358.77'}</td>
-        </tr>
-      </tbody>
+        <Table.Head>
+            <Table.Row>
+                <Table.Header>{'Column 1'}</Table.Header>
+                <Table.Header>{'Column 2'}</Table.Header>
+                <Table.Header>{'Column 3'}</Table.Header>
+                <Table.Header textAlign="center">{'Rating'}</Table.Header>
+                <Table.Header textAlign="right">{'Money'}</Table.Header>
+            </Table.Row>
+        </Table.Head>
+        <Table.Body>
+            <Table.Row>
+                <Table.Cell>{'Value 1'}</Table.Cell>
+                <Table.Cell>{'Value 2'}</Table.Cell>
+                <Table.Cell>{'Value 3'}</Table.Cell>
+                <Table.Cell textAlign="center">{'3'}</Table.Cell>
+                <Table.Cell textAlign="right">{'$57.32'}</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 textAlign="center">{'2'}</Table.Cell>
+                <Table.Cell textAlign="right">{'$5,657.08'}</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 textAlign="center">{'4'}</Table.Cell>
+                <Table.Cell textAlign="right">{'$358.77'}</Table.Cell>
+            </Table.Row>
+        </Table.Body>
     </Table>
+
   )
 }
 

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

@@ -1,2 +1,2 @@
-You can individually align a piece of table data, but a more practical use would be applied to align a column.
+Pass our `textAlign` global prop to any `table.cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
 In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

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

@@ -0,0 +1,2 @@
+Pass our `text_align` global prop to any `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
+In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.