playbook_ui 11.7.0.pre.alpha.table1 → 11.8.0

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

@@ -23,6 +23,11 @@ const LightboxCompoundComponent = (props) => {
     setSelectedPhoto(photo)
   }
 
+  const exampleStyles = {
+    width: "100%",
+    overflow: "auto"
+  }
+
   return (
     <>
       <div>
@@ -36,15 +41,18 @@ const LightboxCompoundComponent = (props) => {
               {...props}
           />
         ) : (
-          <div className="PhotoViewer">
+          <div className="PhotoViewer"
+              style={exampleStyles}
+          >
             <Flex>
               {photos.map((photo, index) => {
                 return (
                   <div
-                      key={photo[index]}
+                      key={index}
                       onClick={() => onPhotoClick(index)}
                   >
                     <Image
+                        cursor="pointer"
                         marginRight="xl"
                         rounded
                         size="lg"

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

@@ -1 +1 @@
-To get the title and description to appear pass in the `title` and `description` props.
+`title` and `description` are optional props that can be passed to the kit if needed. Each of these props can take a string OR a custom component. This example highlights what the kit will look like when only strings are passed as `title` and `description`.

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

@@ -27,11 +27,9 @@ const LightboxDefault = (props) => {
         {showLightbox ? (
           <Lightbox
               icon="times"
-              iconSize="2x"
               initialPhoto={selectedPhoto}
               onClose={handleCloseLightbox}
               photos={photos}
-              showCount={false}
               {...props}
           />
         ) : (
@@ -44,6 +42,7 @@ const LightboxDefault = (props) => {
                       onClick={() => onPhotoClick(index)}
                   >
                     <Image
+                        cursor="pointer"
                         marginRight="xl"
                         rounded
                         size="lg"

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

@@ -1 +1 @@
-Lightbox contains 7 props: `photos` (an array of urls), `initialPhoto` (a number), an `onClose` callback function, a `title` and `description` string, an `icon` prop that matches to our `Icon` kit, and an `iconSize` prop that also corresponds to our icon kit.
+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

@@ -52,8 +52,8 @@ const LightboxMultiple = (props) => {
       {light ? (
         <Lightbox
             icon="times"
-            iconSize="2x"
             initialPhoto={selectedPhoto}
+            onChange={(index) => console.log(`current photo index: ${index}`)}
             onClose={handleCloseLightbox}
             photos={photos}
             {...props}
@@ -67,10 +67,11 @@ const LightboxMultiple = (props) => {
             {photos.map((photo, index) => {
               return (
                 <div
-                    key={photos[index]}
+                    key={index}
                     onClick={() => onPhotoClick(index)}
                 >
                   <Image
+                      cursor="pointer"
                       marginRight="xl"
                       rounded
                       size="lg"

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

@@ -4,3 +4,4 @@ examples:
   - lightbox_default: Default
   - lightbox_multiple: Multiple
   - lightbox_compound_component: Compound Component
+  - lightbox_custom_header: Custom Header

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

@@ -1,3 +1,4 @@
 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'

data/app/pb_kits/playbook/pb_lightbox/lightbox.scss

@@ -17,8 +17,11 @@ $slides-margin: $space-md;
     align-items: center;
     transition: all .5s;
 
-    .close-icon {
-      color: white;
+    .nav-right-btn {
+      padding-left: $space_xs !important;
+    }
+    .custom-header {
+      text-align: center;
     }
   }
 }
@@ -81,6 +84,26 @@ $slides-margin: $space-md;
     }
   }
 
+  .carousel-arrow-left {
+    display: block;
+    position: absolute;
+    z-index: 4;
+    top: 50%;
+    @media only screen and (max-width: $screen-xs-max) {
+      display: none;
+    }
+  }
+
+  .carousel-arrow-right {
+    display: block;
+    position: absolute;
+    z-index: 4;
+    top: 50%;
+    right: 0;
+    @media only screen and (max-width: $screen-xs-max) {
+      display: none;
+    }
+  }
 }
 
 .Slide,
@@ -112,33 +135,6 @@ $slides-margin: $space-md;
   }
 }
 
-.BackBtn,
-.NextBtn {
-  z-index: 2;
-  color: black;
-  position: absolute;
-  width: 50px;
-  height: 50px;
-  top: calc(50vh - 5px);
-  border: none;
-  border-radius: 50%;
-  background-color: white;
-}
-
-.BackBtn::before,
-.NextBtn::before {
-  content: "▸";
-}
-
-.BackBtn {
-  left: 30px;
-  transform: rotate(180deg);
-}
-
-.NextBtn {
-  right: 30px;
-}
-
 .Thumbnails {
   display: flex;
   width: 100vw;

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -17,7 +17,6 @@ test('Kit renders', () => {
         className="customClass"
         data={{ testid: testId }}
         icon="close"
-        iconSize="3x"
         id="test1"
         initialPhoto={1}
         onClose={() => {}}
@@ -35,7 +34,6 @@ test('Shows selected images', () => {
     <Lightbox
         data={{ testid: testId }}
         icon="close"
-        iconSize="3x"
         id="test1"
         initialPhoto={1}
         onClose={() => {}}
@@ -78,7 +76,6 @@ test('Closes on escape key', async () => {
     <Lightbox
         data={{ testid: testId }}
         icon="close"
-        iconSize="3x"
         id="test1"
         initialPhoto={0}
         onClose={mockClose}
@@ -108,7 +105,6 @@ test('Closes on close button', async () => {
     <Lightbox
         data={{ testid: testId }}
         icon="close"
-        iconSize="3x"
         id="test1"
         initialPhoto={0}
         onClose={mockClose}
@@ -117,7 +113,7 @@ test('Closes on close button', async () => {
   )
 
   const kit = screen.getByTestId(testId)
-  const closeIcon = kit.getElementsByClassName('close-icon')[0]
+  const closeIcon = kit.getElementsByClassName('pb_button_kit_link_inline_enabled')[0]
 
   fireEvent(
     closeIcon,

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

@@ -2,6 +2,8 @@ Lists display a vertical set of related content.
 
  **Layout Prop**
  
- - Setting the `layout` prop to either `left` or `right` creates a 2 column layout on the the list/item kit. This is useful if you need 2 things on the same line in a list.
- - Using `layout:'left'` will make the first column shrink and the second column grow and align to the left.
- - Using `layout:'right'` will make the first column grow and push the second column to the right.
+ Setting the `layout` prop to either `left` or `right` creates a 2 column layout on the the list/item kit. This is useful if you need 2 things on the same line in a list.
+ 
+ Using `layout:'left'` will make the first column shrink and the second column grow and align to the left.
+ 
+ Using `layout:'right'` will make the first column grow and push the second column to the right.

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { useEffect, type Node } from 'react'
+import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -45,10 +45,8 @@ const Table = (props: TableProps) => {
   const dataProps = buildDataProps(data)
   const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
 
-  useEffect(() => {
-    const instance = new PbTable()
-    instance.connect()
-  }, [])
+  const instance = new PbTable()
+  instance.connect()
 
   return (
     <table

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

@@ -4,68 +4,75 @@ import Table from '../_table'
 
 const TableAlignmentShiftData = (props) => {
   return (
-    <Table
-        {...props}
-    >
-      <thead>
-        <tr>
-          <th>&nbsp;</th>
-          <th>{'Price'}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td shift="down">{'Total'}</td>
-          <td>
-            {'$12'}
-            <br />
-            {'$46'}
-            <br />
-            {'$25'}
-            <br />
-            {'-------'}
-            <br />
-            {'$83'}
-          </td>
-        </tr>
-      </tbody>
-      <thead>
-        <tr>
-          <th>{'Espresso Drinks'}</th>
-          <th>{'Ingredients'}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td shift="up">{'Cappuccino'}</td>
-          <td>
-            {'Espresso'}
-            <br />
-            {'Steamed Milk'}
-            <br />
-            {'Milk Foam'}
-          </td>
-        </tr>
-        <tr>
-          <td shift="up">{'Macchiato'}</td>
-          <td>
-            {'Espresso'}
-            <br />
-            {'Steamed Milk'}
-          </td>
-        </tr>
-        <tr>
-          <td shift="up">{'Mocha'}</td>
-          <td>
-            {'Espresso'}
-            <br />
-            {'Hot Chocolate'}
-            <br />
-            {'Steamed Milk'}
-          </td>
-        </tr>
-      </tbody>
-    </Table>
+    <div>
+      <Table
+          marginBottom="md"
+          {...props}
+      >
+        <thead>
+          <tr>
+            <th>&nbsp;</th>
+            <th>{'Price'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td shift="down">{'Total'}</td>
+            <td>
+              {'$12'}
+              <br />
+              {'$46'}
+              <br />
+              {'$25'}
+              <br />
+              {'-------'}
+              <br />
+              {'$83'}
+            </td>
+          </tr>
+        </tbody>
+      </Table>
+      <Table
+          {...props}
+      >
+        <thead>
+          <tr>
+            <th>{'Espresso Drinks'}</th>
+            <th>{'Ingredients'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td shift="up">{'Cappuccino'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Steamed Milk'}
+              <br />
+              {'Milk Foam'}
+            </td>
+          </tr>
+          <tr>
+            <td shift="up">{'Macchiato'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Steamed Milk'}
+            </td>
+          </tr>
+          <tr>
+            <td shift="up">{'Mocha'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Hot Chocolate'}
+              <br />
+              {'Steamed Milk'}
+            </td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb

@@ -15,7 +15,7 @@
       <td>Value 3</td>
       <td>Value 4</td>
       <td>
-        <%= pb_rails("flex") do %>
+        <%= pb_rails("flex", props: { justify: "end" }) do %>
             <%= pb_rails("body", props: {classname: "flex-item"}) do %>  
                 <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
             <% end %>
@@ -31,7 +31,7 @@
       <td>Value 3</td>
       <td>Value 4</td>
       <td>
-        <%= pb_rails("flex") do %>
+        <%= pb_rails("flex", props: { justify: "end" }) do %>
             <%= pb_rails("body", props: {classname: "flex-item"}) do %>  
                 <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
             <% end %>
@@ -46,8 +46,8 @@
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td>
-        <%= pb_rails("flex") do %>
+      <td align="right">
+        <%= pb_rails("flex", props: { justify: "end" }) do %>
             <%= pb_rails("body", props: {classname: "flex-item"}) do %>  
                 <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
             <% end %>

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

@@ -27,8 +27,11 @@ const TableIconButtons = (props) => {
           <td>{'Value 2'}</td>
           <td>{'Value 3'}</td>
           <td>{'Value 4'}</td>
-          <td>
-            <Flex orientation="row">
+          <td align="right">
+            <Flex
+                justifyContent="end"
+                orientation="row"
+            >
               <FlexItem>
                 <CircleIconButton
                     icon="trash-alt"
@@ -51,8 +54,11 @@ const TableIconButtons = (props) => {
           <td>{'Value 2'}</td>
           <td>{'Value 3'}</td>
           <td>{'Value 4'}</td>
-          <td>
-            <Flex orientation="row">
+          <td align="right">
+            <Flex 
+                justifyContent="end"
+                orientation="row"
+            >
               <FlexItem>
                 <CircleIconButton
                     icon="trash-alt"
@@ -74,9 +80,12 @@ const TableIconButtons = (props) => {
           <td>{'Value 1'}</td>
           <td>{'Value 2'}</td>
           <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td>
-            <Flex orientation="row">
+          <td>{'Value lk'}</td>
+          <td align="right">
+            <Flex 
+                justifyContent="end"
+                orientation="row"
+            >
               <FlexItem>
                 <CircleIconButton
                     icon="trash-alt"

data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb

@@ -14,21 +14,21 @@
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
     </tr>
     <tr>
       <td>Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
     </tr>
     <tr>
       <td>Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
     </tr>
   </tbody>
 <% end %>

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

@@ -24,7 +24,7 @@ const TableOneAction = (props) => {
           <td>{'Value 2'}</td>
           <td>{'Value 3'}</td>
           <td>{'Value 4'}</td>
-          <td>
+          <td align="right">
             {' '}
             <Button
                 onClick={() => alert('button clicked!')}
@@ -40,7 +40,7 @@ const TableOneAction = (props) => {
           <td>{'Value 2'}</td>
           <td>{'Value 3'}</td>
           <td>{'Value 4'}</td>
-          <td>
+          <td align="right">
             {' '}
             <Button
                 onClick={() => alert('button clicked!')}
@@ -56,7 +56,7 @@ const TableOneAction = (props) => {
           <td>{'Value 2'}</td>
           <td>{'Value 3'}</td>
           <td>{'Value 4'}</td>
-          <td>
+          <td align="right">
             {' '}
             <Button
                 onClick={() => alert('button clicked!')}

data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb

@@ -14,8 +14,8 @@
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td>
-      <%= pb_rails("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
+      <td align="right">
+      <%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %>
       <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
       </td>
     </tr>
@@ -24,8 +24,8 @@
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td>
-      <%= pb_rails("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
+      <td align="right">
+      <%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %>
       <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
       </td>
     </tr>
@@ -34,8 +34,8 @@
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td>
-      <%= pb_rails("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
+      <td align="right">
+      <%= pb_rails("button", props: { text: "Tertiary Action", variant: "link", padding_left: "none" }) %>
       <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
       </td>    
       </tr>