playbook_ui_docs 14.9.0.pre.alpha.PBNTR746datepickerdefaultbug4901 → 14.9.0.pre.alpha.PLAY1660reactdropzone5020

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd75d3f5f2a60e1984e5192853fe049171ae79b146b00659460dcb00e7d004f2
-  data.tar.gz: 8f5126919ec06772dbbbaba01d7a0e37e637444c33841b125934710f0c7bbc01
+  metadata.gz: f8dfa6a2937faac121b415ba8e11a3fd0c886d847e9874aec71b29fb45eb613b
+  data.tar.gz: 6eb043a98853b3d746307c5b6c5704290961338ec052c62d19ef19c28c5dab55
 SHA512:
-  metadata.gz: f20e9f9fa824d7fb3a2a5527c3ff42252857f527a1e4c47cda899bcb94e184b07a345f076e1872b79765bff769c106f739350076925e1c4585bc22a21f3325e6
-  data.tar.gz: fd86f2b90dc29026c1e94713e3292c33c65a26368ec01db7d05177c1df2e1b6a8b970a519a7fb304276bf5c574e7b9e6e51638a086eaa8d032ce8d58a62fea5c
+  metadata.gz: e8e47e088ea84ac466dbf6f594b1a89037559fa8e13380bfa9aaaf6212443c324db7510e775eca56ef1ef087e2c2c0e2e87aa44c234f8fbbe244f5a6603dd536
+  data.tar.gz: 21fc7199e655b0ab040f8dde00109009c2518c189c59b1645781b635fc7f2334f69a7b5bb187f87d96c565c36dd08bd62129501cb8737f9acb4b3ab00504b414

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

@@ -1,66 +1,70 @@
 import React from 'react'
-
+import ReactDOMServer from 'react-dom/server'
 import BarGraph from '../_bar_graph'
+import Icon from '../../pb_icon/_icon'
+
+const chartData = [
+  {
+    name: 'Role',
+    data: [0, 200, 300, 654, 656],
+  },
+  {
+    name: 'Company',
+    data: [150, 524, 320, 440, 500],
+  },
+]
 
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  name: 'Manufacturing',
-  data: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
+const renderIcon = (iconName, color) => {
+  return ReactDOMServer.renderToStaticMarkup(
+  <Icon
+      color={color}
+      icon={iconName}
+  />)
+};
 
 const barGraphOptions = {
-  subtitle: {
-    text: "Overwritten subtitle",
-    style: {
-      color: "red"
-    }
+  yAxis: {
+    tickInterval: 5,
   },
   xAxis: {
-      labels: {
-          useHTML: true,
-          formatter: function() {
-              switch (this.value) {
-                  case 'Jan':
-                      return `<i class="far fa-apple-whole"></i> ${this.value}`
-                  case 'Feb':
-                      return `<i class="far fa-strawberry"></i> ${this.value}`
-                  case 'Mar':
-                      return `<i class="far fa-lemon"></i> ${this.value}`
-                  case 'Apr':
-                      return `<i class="far fa-pear"></i> ${this.value}`
-                  case 'May':
-                      return `<i class="far fa-peach"></i> ${this.value}`
-                  default:
-                      return ''
-              }
-          }
-      }
-  }
+    categories: ['1', '2', '3', '4', '5'],
+    labels: {
+      useHTML: true,
+      formatter: function () {
+        switch (this.value) {
+          case '1':
+            return `${renderIcon('frown', 'error')}`;
+          case '2':
+            return `${renderIcon('frown', 'warning')}`;
+          case '3':
+            return `${renderIcon('frown-open', 'neutral')}`;
+          case '4':
+            return `${renderIcon('smile', 'category_7')}`;
+          case '5':
+            return `${renderIcon('smile-beam', 'success')}`;
+          default:
+            return ''
+        }
+      },
+      style: {
+        fontSize: '1.4em',
+      },
+      y: 42,
+    },
+  },
+  legend: {
+    itemMarginTop: 62,
+  },
 }
 
-const BarGraphCustom = (props) => (
+const BarGraphCustom = () => (
   <div>
     <BarGraph
-        axisTitle="Number of Employees"
         chartData={chartData}
         customOptions={barGraphOptions}
-        id="bar-custom"
-        subTitle="Subtitle to replace"
+        id="happiness-dashboard"
+        legend
         title="Bar Graph with Custom Overrides"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb

@@ -1,49 +1,42 @@
 <% data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
+  name: 'Role',
+  data: [0, 200, 300, 654, 656],
 }, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
+  name: 'Company',
+  data: [150, 524, 320, 440, 500],
 }] %>
 
 <% bar_graph_options = {
-    customOptions: {
-        subtitle: {
-            text: "Overwritten subtitle",
-            style: {
-                color: "red"
-            }
+  customOptions: {
+    yAxis: {
+      tickInterval: 5,
+    },
+    xAxis: {
+      categories: [
+        raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
+      ],
+      labels: {
+        useHTML: true,
+        sytle: {
+          fontSize: '1.4em',
         },
-        xAxis: {
-            categories: [
-                '<i class="far fa-apple-whole"></i> Jan',
-                '<i class="far fa-strawberry"></i> Feb',
-                '<i class="far fa-lemon"></i> Mar',
-                '<i class="far fa-pear"></i> Apr',
-                '<i class="far fa-peach"></i> May'
-            ],
-            labels: {
-                useHTML: true,
-            }
-        }
-    }
+        y: 42,
+      },
+    },
+    legend: {
+      itemMarginTop: 62,
+    },
+  } 
 } %>
 
 <%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
     chart_data: data,
     id: "bar-default",
-    y_axis_min: 0,
-    subtitle: 'Subtitle to replace',
+    legend: true,
     title: 'Bar Graph with Custom Overrides',
     custom_options: bar_graph_options
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -28,7 +28,9 @@ const FileUploadAccept = (props) => {
           {...props}
       />
       <FileUpload
-          accept={['image/svg+xml']}
+          accept={{
+            "image/svg+xml": [".svg", ".xml"],
+          }}
           onFilesAccepted={handleOnFilesAccepted}
           {...props}
       />

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -25,7 +25,10 @@ const FileUploadCustomDescription = (props) => {
           {...props}
       />
       <FileUpload
-          accept={['application/pdf','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
+          accept={{
+            "application/pdf": [".pdf"],
+            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+          }}
           acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
           onFilesAccepted={handleOnFilesAccepted}
           {...props}

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx

@@ -18,7 +18,7 @@ const AcceptedFilesList = ({ files }) => (
 const RejectedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
-      <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
+      <ListItem key={file.file.name}><Body color="error">{`${file.file.name} (file too large)`}</Body></ListItem>
     ))}
   </List>
 )

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
+
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
+
+const SkeletonLoadingFilter = (props) => {
+  const isLoading = true
+
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far away...' },
+  ]
+
+  return (
+    <div>
+      <div>
+        {isLoading ? (
+          <Card 
+              marginBottom="lg" 
+              {...props}
+          >
+              <Flex 
+                  alignItems="center" 
+                  justify="between"
+                  orientation="row"
+              >
+                  <Flex 
+                      alignItems="center" 
+                      justify="start"
+                      orientation="row"
+                  >
+                      <SkeletonLoading
+                          borderRadius="rounded"
+                          height="40px"
+                          marginRight="sm"
+                          width="40px"
+                          {...props}
+                      />
+                      <SkeletonLoading 
+                          height="16px" 
+                          marginRight="md"
+                          width="80px"
+                          {...props}
+                      />
+                  </Flex>
+                  <Flex 
+                      alignItems="center" 
+                      justify="end"
+                      orientation="row"
+                  >
+                      <SkeletonLoading 
+                          height="18px" 
+                          width="120px"
+                          {...props}
+                      />
+                  </Flex>
+              </Flex>
+          </Card>
+        ) : (
+          <Filter
+              filters={{ 'Full Name': 'John Wick' }}
+              marginBottom="lg" 
+              minWidth="375px"
+              results={546}
+              sortOptions={{
+                popularity: 'Popularity',
+                // eslint-disable-next-line
+                manager_title: 'Manager\'s Title',
+                // eslint-disable-next-line
+                manager_name: 'Manager\'s Name',
+              }}
+              sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          >
+            {({ closePopover }) => (
+              <form>
+                <TextInput 
+                    label="Example Text Field" 
+                    placeholder="Enter Text"
+                />
+                <Select
+                    blankSelection="Select One..."
+                    label="Example Collection Select"
+                    name="Collection Select"
+                    options={options}
+                />
+                <Flex spacing="between">
+                    <Button 
+                        onClick={closePopover} 
+                        text="Filter"
+                    />
+                    <Button 
+                        text="Defaults" 
+                        variant="secondary"
+                    />
+                </Flex>
+              </form>
+            )}
+          </Filter>
+        )}
+      </div>
+      <div>
+        {isLoading ? (
+          <SkeletonLoading 
+              height="127px" 
+              marginBottom="lg"
+              width="100%"
+              {...props}
+          />
+        ) : (
+          <Filter
+              double
+              filters={{
+                'Full Name': 'John Wick',
+                'City': 'San Francisco',
+              }}
+              marginBottom="xl"
+              minWidth="375px"
+              onSortChange={SortingChangeCallback}
+              results={1}
+              sortOptions={{
+                popularity: 'Popularity',
+                // eslint-disable-next-line
+                manager_title: 'Manager\'s Title',
+                // eslint-disable-next-line
+                manager_name: 'Manager\'s Name',
+              }}
+              sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          >
+            {({ closePopover }) => (
+              <form>
+                <TextInput 
+                    label="Full Name" 
+                    placeholder="Enter name"
+                />
+                <Select
+                    blankSelection="Select One..."
+                    label="Territory"
+                    maxWidth="sm"
+                    name="location"
+                    options={options}
+                />
+                <Flex spacing="between">
+                    <Button 
+                        onClick={closePopover}
+                        text="Filter" 
+                    />
+                    <Button 
+                        text="Defaults"
+                        variant="secondary"
+                    />
+                </Flex>
+              </form>
+            )}
+          </Filter>
+        )}
+      </div>      
+    </div>
+  )
+}
+
+export default SkeletonLoadingFilter;

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -20,6 +20,7 @@ const SkeletonLoadingHeightWidth = (props) => (
     <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         marginBottom="md"
         padding="none" 
+        {...props}
     >
       <SkeletonLoading
           borderRadius="md"
@@ -31,6 +32,7 @@ const SkeletonLoadingHeightWidth = (props) => (
     </Card>
     <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         padding="none"
+        {...props}
     >
       <SkeletonLoading
           borderRadius="md"

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Flex, SkeletonLoading, User } from "playbook-ui";
+
+const SkeletonLoadingUser = (props) => {
+  const isLoading = true
+
+  return (
+    <div>
+      <div>
+        {isLoading ? (
+          <Flex alignItems="center">
+              <SkeletonLoading 
+                  borderRadius="rounded" 
+                  height="38px" 
+                  paddingRight="sm"
+                  width="38px" 
+                  {...props} 
+              />
+                <SkeletonLoading 
+                    gap="xxs"
+                    height="18px" 
+                    stack="2"
+                    width="161px"
+                    {...props}
+                />
+          </Flex>
+        ) : (
+          <User
+              align="left"
+              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              name="Anna Black"
+              orientation="horizontal"
+              title="Remodeling Consultant"
+              {...props}
+          />
+        )}
+      </div>
+      <div>
+        {isLoading ? (
+          <Flex 
+              alignItems="start"
+              paddingTop="md"
+          >
+              <Flex 
+                  alignItems="center" 
+                  flexDirection="column"
+              >
+                  <SkeletonLoading 
+                      borderRadius="rounded" 
+                      height="80px" 
+                      paddingBottom="xs" 
+                      width="80px" 
+                      {...props}
+                  />
+                  <SkeletonLoading 
+                      height="32px" 
+                      paddingBottom="xxs" 
+                      width="144px" 
+                      {...props} 
+                  />
+                  <SkeletonLoading 
+                      height="21px" 
+                      width="164px" 
+                      {...props}
+                  />
+              </Flex>
+          </Flex>
+        ) : (
+          <Flex
+              alignItems="start" 
+              paddingTop="md"
+          >
+              <User
+                  align="center"
+                  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+                  name="Anna Black"
+                  orientation="vertical"
+                  size="lg"
+                  title="Remodeling Consultant"
+                  {...props}
+              />
+          </Flex>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonLoadingUser;

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

@@ -10,4 +10,5 @@ examples:
   - skeleton_loading_layout: Layout
   - skeleton_loading_border_radius: Border Radius
   - skeleton_loading_height_width: Height & Width
-  
+  - skeleton_loading_user: User Component Example
+  - skeleton_loading_filter: Filter Component Example

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

@@ -3,3 +3,5 @@ export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
 export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
 export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
 export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
+export { default as SkeletonLoadingUser } from './_skeleton_loading_user.jsx'
+export { default as SkeletonLoadingFilter } from './_skeleton_loading_filter.jsx'

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

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Table, Icon, Body, Card } from 'playbook-ui'
+
+const TableWithCollapsible = (props) => {
+
+  const Content = () => {
+    return (
+      <Card 
+          borderNone
+          borderRadius="none"
+          padding="md"
+          {...props}
+      >
+        <Body {...props}>Nested content inside a Table Row</Body>
+      </Card>
+    );
+  };
+
+return (
+      <Table
+          size="sm"
+          {...props}
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{'Column 1'}</Table.Header>
+            <Table.Header>{'Column 2'}</Table.Header>
+            <Table.Header>{'Column 3'}</Table.Header>
+            <Table.Header>{'Column 4'}</Table.Header>
+            <Table.Header>{'Column 5'}</Table.Header>
+            <Table.Header>{''}</Table.Header>
+          </Table.Row>
+
+        </Table.Head>
+        <Table.Body>
+          <Table.Row collapsible 
+              collapsibleContent={<Content/>}
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell textAlign="right">{ 
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />}
+            </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>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</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>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+  )
+}
+
+export default TableWithCollapsible

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

@@ -0,0 +1 @@
+The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.