playbook_ui_docs 13.28.0 → 13.29.0.pre.alpha.PBNTR329draggablev33059

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f364a8bd557be9abd38e709e55f56126ced42e98b45b148a4fcbdcc06079d80f
-  data.tar.gz: f5a6f2bc623fb625cb2a6fde77c25a40b425ba50a908c9d87e050ae3c72798c6
+  metadata.gz: 10c14d9c29cafc933037cf345a94d8c793de8a2c806240a9ac1fcb52c65ed3ff
+  data.tar.gz: ce6c43f50cd194c89827aab59a44a1214f8b1821f9a2bc8e0efe7e826897a336
 SHA512:
-  metadata.gz: 3775ee5187f6745895b9158828f8047ecd8215c782f6db38dc05012263ab9c4b6a757a392833fd2367a1725a1a0d0cc352de06ed1c0a9ff4d3305846896a2634
-  data.tar.gz: 72d0bbf9ca6fca782d48df2e40f870b1fa34248e533a5acfe454adb49a46338ad15a2c90f398e66bf5f0f8c21527a5c38994b7c4ee519a6a72acf44daa7df346
+  metadata.gz: 217751cb8fbd57472ce3c0f765e4f81c171084cbe4804cfdea13978918a60a6f90c1d42d0f45693e2499ab0c8316f296963028afbb881c6dce7629808acdc8bd
+  data.tar.gz: 072247251edc16e23358ddcf8cdf63cd0883c583b03d68aa311a08bbf6b1ee151cb40c79742295ce5a33a2908fd9979944ffd091ad4bc27e99019a9811d67314

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}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Draggable.Container {...props}>
+          <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>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableDefault;

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

@@ -0,0 +1,4 @@
+To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onReorder` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
+
+The `Draggable.Container` specifies the container within which items can be dropped.
+The `Draggable.Item` specifies the items that can be dragged and dropped. `Draggable.Item` requires `id` to be passed in as shown.

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

@@ -0,0 +1,158 @@
+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: "11",
+    container: "To Do",
+    title: "Task 1",
+    description: "Bug fixes",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "12",
+    container: "To Do",
+    title: "Task 2",
+    description: "Documentation",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "13",
+    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: "14",
+    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: "15",
+    container: "Done",
+    title: "Task 5",
+    description: "Alpha testing",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  },
+  {
+    id: "16",
+    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}
+        onReorder={(items) => setInitialState(items)}
+    >
+      <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>
+          ))}
+      </Flex>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableMultipleContainer;

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

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import {
+  Flex,
+  Badge,
+  Title,
+  Icon,
+  Draggable,
+  DraggableProvider,
+  Card,
+  Caption,
+} from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "21",
+    text: "Joe Black",
+  },
+  {
+    id: "22",
+    text: "Nancy White",
+  },
+  {
+    id: "23",
+    text: "Bill Green",
+  },
+];
+
+const DraggableWithCards = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <DraggableProvider
+        initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Draggable.Container  {...props}>
+          {initialState.map(({ id, text }) => (
+              <Card
+                  dragHandle
+                  draggableItem
+                  highlight={{ color: "primary", position: "side" }}
+                  id={id}
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+              >
+                <Flex alignItems="stretch" 
+                    flexDirection="column"
+                >
+                  <Flex gap="xs">
+                    <Title size={4} 
+                        text={text} 
+                    />
+                    <Badge 
+                        text="35-12345" 
+                        variant="primary" 
+                    />
+                  </Flex>
+                      <Caption 
+                          size="xs" 
+                          text="8:00A • Township Name • 90210" 
+                      />
+                  <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.Container>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableWithCards;

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

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { DraggableProvider, List, ListItem } from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "31",
+    text: "Philadelphia",
+  },
+  {
+    id: "32",
+    text: "New Jersey",
+  },
+  {
+    id: "33",
+    text: "Maryland",
+  },
+  {
+    id: "34",
+    text: "Connecticut",
+  },
+];
+
+const DraggableWithList = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <List draggable
+            {...props}
+        >
+            {initialState.map(({ id, text }) => (
+                <ListItem id={id}
+                    key={id}
+                >
+                    {text}
+                </ListItem>
+            ))}
+        </List>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableWithList;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md

@@ -0,0 +1 @@
+For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem.

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

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

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

@@ -0,0 +1,11 @@
+examples:
+  
+  
+  react:
+  - draggable_default: Default
+  - draggable_with_list: Draggable with List Kit
+  - draggable_with_selectable_list: Draggable with SelectableList Kit
+  - 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,5 @@
+export { default as DraggableDefault } from './_draggable_default.jsx'
+export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
+export { default as DraggableWithList } from './_draggable_with_list.jsx'
+export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

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

@@ -13,6 +13,15 @@
   ]
 %>
 
+<% 
+  example_dropdown_options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
@@ -23,6 +32,7 @@
   <%= form.password_field :example_password_field, props: { label: true } %>
   <%= form.url_field :example_url_field, props: { label: true } %>
   <%= form.text_area :example_text_area, props: { label: true } %>
+  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox,

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>
+
   )
 }