playbook_ui_docs 13.28.0.pre.alpha.play829selectablecardalignment2978 → 13.29.0.pre.alpha.testingcollapsibleissue3052

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f58670d450fdd2397e459f39e55cbe6e4022e97416c9adee7c469e4d02474f99
-  data.tar.gz: c7f35ac44f741a7f1b6e7d91527b45e8132c08106384f5bdc802327deff63e13
+  metadata.gz: 3989a7998287dbfdeb6f70a5350de16e07f58a24a708d7960d90509bde13d460
+  data.tar.gz: 26d31983c514bea9c5c4556ea867235c422ed3c62f12d084a993f8eaff6f3a7e
 SHA512:
-  metadata.gz: 12237f5e82cb5f5ed686a1bb48d7ce512ea5b9d32869cfa76a6c692e475b4774b5fb6b4b51a87779a96682cf2268be46d329d5c1c0ca1d7054d7c7dd977fbf77
-  data.tar.gz: 8f49c3c1c13c6714bb6dadfee21a4264b6547de8ee9adf8991bde83abbf1317483fa34409b26a3c2718817a7b3621b70f1d03a4a68711c7755141ab8e99f805a
+  metadata.gz: 3d3bddef7c00879f999a9daf00eb7f60122c7cb41ba786457c2c3221a316ce8114990b03f31d9f92554a85d48f44b07eb6434fdc95bf45dae536f69966c1cf8d
+  data.tar.gz: 1eef88d2153999d0601102f50ec09771a16b395f4f10a552643a410fabfd7070cb24ce1bd02a9525d37dad36371613f978dfdc1075bb31a58173a9f6338eb9dc

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.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 `onChange` 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: "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)}
+    >
+      <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,119 @@
+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.Container  {...props}>
+          {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>
+    </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: "1",
+    text: "Philadelphia",
+  },
+  {
+    id: "2",
+    text: "New Jersey",
+  },
+  {
+    id: "3",
+    text: "Maryland",
+  },
+  {
+    id: "4",
+    text: "Connecticut",
+  },
+];
+
+const DraggableWithList = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onChange={(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 fro the List kit, use the DraggableProvider to wrap the List 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: "1",
+    text: "Task 1",
+  },
+  {
+    id: "2",
+    text: "Task 2",
+  },
+  {
+    id: "3",
+    text: "Task 3",
+  },
+  {
+    id: "4",
+    text: "Task 4",
+  },
+];
+
+const DraggableWithSelectableList = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onChange={(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_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.