playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -0,0 +1,121 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Flex, Image, Button, Body, FlexItem } from '../../'
+import Lightbox from '../_lightbox.tsx'
+
+const LightboxCurrentPhoto = (props) => {
+  const photos = [
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+  ]
+  const [light, toggleLight] = useState(false)
+  //Setting state with the index of the current slide exposed by the onChange prop
+  const [active, setActive] = useState(0)
+  //Setting state for the current photo to pass to the kit
+  const [currentPhoto, setCurrentPhoto] = useState(active)
+
+  const handleCloseLightbox = () => {
+    toggleLight(!light)
+  }
+
+  const onPhotoClick = () => {
+    toggleLight(!light)
+  }
+
+  const exampleStyles = {
+    width: "100%",
+    overflow: "auto"
+  }
+
+  return (
+    <div className="lightbox_doc_example_custom">
+      {light ? (
+        <>
+          <Flex alignItems="center" 
+              className='custom_lightbox_sidebar'
+              justifyContent="center"
+          >
+            <Flex margin='lg'
+                orientation='column'
+            >
+              <Body marginBottom='md'>
+                This UI is for demonstration purposes only to demonstrate how external buttons can be used to change the slides.
+              </Body>
+              <FlexItem alignSelf="center">
+                <Flex justifyContent="center">
+                  <Button 
+                      onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
+                  >
+                    Back
+                  </Button>
+                  <Button marginLeft='sm'
+                      onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
+                  >
+                    Next
+                  </Button>
+                </Flex>
+              </FlexItem>
+            </Flex>
+          </Flex>
+          <Lightbox
+              currentPhotoIndex={currentPhoto}
+              icon="times"
+              onChange={(index) => setActive(index)}
+              onClose={handleCloseLightbox}
+              photos={photos}
+              {...props}
+          />
+        </>
+      ) : (
+        <div
+            className="PhotoViewer"
+            style={exampleStyles}
+        >
+          <Flex>
+            {photos.map((photo, index) => {
+              return (
+                <div
+                    key={index}
+                    onClick={() => onPhotoClick(index)}
+                >
+                  <Image
+                      cursor="pointer"
+                      marginRight="xl"
+                      rounded
+                      size="lg"
+                      url={photo}
+                  />
+
+                  <div className="overlay" />
+                </div>
+              )
+            })}
+          </Flex>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LightboxCurrentPhoto

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md

@@ -0,0 +1 @@
+The `currentPhotoIndex` prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the `onChange` prop. 

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx

@@ -0,0 +1,95 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from "react";
+import { Flex, Image, Title, Pill } from "../../";
+import Lightbox from "../_lightbox.tsx";
+
+const LightboxCustomHeader = (props) => {
+  const photos = [
+    "https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80",
+    "https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80",
+    "https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,",
+  ];
+  const [selectedPhoto, setSelectedPhoto] = useState(0);
+  const [showLightbox, toggleShowLightbox] = useState(false);
+
+  const handleCloseLightbox = () => {
+    toggleShowLightbox(!showLightbox);
+    setSelectedPhoto(null);
+  };
+
+  const onPhotoClick = (photo) => {
+    toggleShowLightbox(!showLightbox);
+    setSelectedPhoto(photo);
+  };
+
+  const exampleStyles = {
+    width: "100%",
+    overflow: "auto",
+  };
+
+  const customTitle = (
+    <Title dark 
+        paddingBottom="xxs"
+        size={4}
+    >
+    My Custom Title
+    </Title>
+  );
+
+  const customDescription = (
+    <>
+      <Title dark 
+          size={4} 
+          text="Tags" 
+      />
+      <Pill text="3" 
+          variant="success" 
+      />
+    </>
+  );
+
+  return (
+    <>
+      <div>
+      {showLightbox ? (
+          <Lightbox
+              description={customDescription}
+              initialPhoto={selectedPhoto}
+              navRight="All Photos"
+              onClickRight={()=> alert("Clicked!")}
+              onClose={handleCloseLightbox}
+              photos={photos}
+              title={customTitle}
+              {...props}
+          />
+        ) : (
+          <div className="PhotoViewer" 
+              style={exampleStyles}
+          >
+            <Flex>
+              {photos.map((photo, index) => {
+                return (
+                  <div key={index} 
+                      onClick={() => onPhotoClick(index)}
+                  >
+                    <Image marginRight="xl" 
+                        rounded 
+                        size="lg" 
+                        url={photo} 
+                    />
+
+                    <div className="overlay" />
+                  </div>
+                );
+              })}
+            </Flex>
+          </div>
+        )
+      }
+      </div>
+    </>
+  );
+};
+
+export default LightboxCustomHeader;

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md

@@ -0,0 +1 @@
+`title` and `description` props also accept custom components if needed. The optional `navRight` prop only accepts a string that translates into a clickable button. `onClickRight` prop can be used to pass in click function for `navRight`.

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -0,0 +1,64 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Flex, Image } from '../../'
+import Lightbox from '../_lightbox.tsx'
+
+const LightboxDefault = (props) => {
+  const photos = [
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+  ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
+  const [showLightbox, toggleShowLightbox] = useState(false)
+
+  const handleCloseLightbox = () => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photoIndex) => {
+    toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photoIndex)
+  }
+
+  return (
+    <>
+      <div>
+        {showLightbox ? (
+          <Lightbox
+              icon="times"
+              initialPhoto={selectedPhoto}
+              onClose={handleCloseLightbox}
+              photos={photos}
+              {...props}
+          />
+        ) : (
+          <div className="PhotoViewer">
+            <Flex>
+              {photos.map((photo, index) => {
+                return (
+                  <div
+                      key={photo[index]}
+                      onClick={() => onPhotoClick(index)}
+                  >
+                    <Image
+                        cursor="pointer"
+                        marginRight="xl"
+                        rounded
+                        size="lg"
+                        url={photo}
+                    />
+
+                    <div className="overlay" />
+                  </div>
+                )
+              })}
+            </Flex>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default LightboxDefault

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md

@@ -0,0 +1 @@
+Lightbox contains several props: `photos` (an array of urls), `initialPhoto` (a number), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -0,0 +1,92 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Flex, Image } from '../../'
+import Lightbox from '../_lightbox.tsx'
+
+const LightboxMultiple = (props) => {
+  const photos = [
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+  ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
+  const [light, toggleLight] = useState(false)
+
+  const handleCloseLightbox = () => {
+    toggleLight(!light)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photo) => {
+    toggleLight(!light)
+    setSelectedPhoto(photo)
+  }
+
+  const exampleStyles = {
+    width: "100%",
+    overflow: "auto"
+  }
+
+  return (
+    <div>
+      {light ? (
+        <Lightbox
+            icon="times"
+            initialPhoto={selectedPhoto}
+            onChange={(index) => console.log(`current photo index: ${index}`)}
+            onClose={handleCloseLightbox}
+            photos={photos}
+            {...props}
+        />
+      ) : (
+        <div
+            className="PhotoViewer"
+            style={exampleStyles}
+        >
+          <Flex>
+            {photos.map((photo, index) => {
+              return (
+                <div
+                    key={index}
+                    onClick={() => onPhotoClick(index)}
+                >
+                  <Image
+                      cursor="pointer"
+                      marginRight="xl"
+                      rounded
+                      size="lg"
+                      url={photo}
+                  />
+
+                  <div className="overlay" />
+                </div>
+              )
+            })}
+          </Flex>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LightboxMultiple

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.md

@@ -0,0 +1,2 @@
+When multiple images are passed to the Lightbox kit, it will also display scrollable thumbnails at the bottom of the screen for easier access to all images. In addition to the scrollable thumbnails, larger screens provide arrow buttons on the left and right of the image itself for easier scrolling while on mobile devices the kit allows for swiping. 
+This example also highlights the use of the optional `onChange` prop which is an event handler prop that tracks the index of the image being viewed and exposes it for use by the developer. 

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

@@ -0,0 +1,8 @@
+examples:
+
+  react:
+  - lightbox_default: Default
+  - lightbox_multiple: Multiple
+  - lightbox_compound_component: Compound Component
+  - lightbox_custom_header: Custom Header
+  - lightbox_current_photo: Current Photo

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

@@ -0,0 +1,5 @@
+export { default as LightboxDefault } from './_lightbox_default.jsx'
+export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
+export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'
+export { default as LightboxCustomHeader } from './_lightbox_custom_header'
+export { default as LightboxCurrentPhoto } from './_lightbox_current_photo'

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

@@ -0,0 +1,3 @@
+Line graphs are used to show changes in data over time. The default height of line graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+
+For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}, {
+    name: 'Manufacturing',
+    data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434]
+}, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387]
+}, {
+    name: 'Project Development',
+    data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227]
+}, {
+    name: 'Other',
+    data: [nil, nil, nil, 3112, 4989, 5816, 15274, 18111]
+}] %>
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-colors", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Line Graph with Custom Data Colors', 
+    axis_title: 'Number of Employees',
+    colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
+}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import LineGraph from '../_line_graph'
+
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387],
+}, {
+  name: 'Project Development',
+  data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227],
+}, {
+  name: 'Other',
+  data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
+}]
+
+const LineGraphColors = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
+        id="line-colors"
+        title="Line Graph with Custom Data Colors"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default LineGraphColors

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.md

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements. 
+Pass the prop `colors` and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}, {
+    name: 'Manufacturing',
+    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+}, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+}, {
+    name: 'Project Development',
+    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
+}, {
+    name: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+}] %>
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-default", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Solar Employment Growth by Sector, 2010-2016', 
+    subtitle: 'Source: thesolarfoundation.com', 
+    axis_title: 'Number of Employees' 
+}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import LineGraph from '../_line_graph'
+
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+}, {
+  name: 'Project Development',
+  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+}, {
+  name: 'Other',
+  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+}]
+
+const LineGraphDefault = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-default"
+        subTitle="Source: thesolarfoundation.com"
+        title="Solar Employment Growth by Sector, 2010-2016"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default LineGraphDefault

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}] %>
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-fixed-height", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Fixed Height (300px)', 
+    axis_title: 'Number of Employees',
+    height: '300'
+}) %>
+
+<br /><br />
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-precentage-height", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Percentage Height (50%)', 
+    axis_title: 'Number of Employees',
+    height: '50%'
+}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import LineGraph from '../_line_graph'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const LineGraphDefault = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        height="300px"
+        id="line-fixed-height"
+        title="Fixed Height (300px)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        height="50%"
+        id="line-percentage-height"
+        title="Percentage Height (50%)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default LineGraphDefault

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.html.erb

@@ -0,0 +1,15 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}] %>
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-test-2", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
+    title: 'Line Graph with Legend', 
+    axis_title: 'Number of Employees',
+    legend: true
+}) %>
+

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { LineGraph } from '../..'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const LineGraphLegend = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-test-2"
+        legend
+        title="Line Graph with Legend"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default LineGraphLegend