playbook_ui 7.14.0.pre.alpha1 → 7.14.0

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { FixedConfirmationToast } from '../../'
+
+const FixedConfirmationToastMultiLineDark = (props) => {
+  return (
+    <div>
+      <FixedConfirmationToast
+          dark
+          status="tip"
+          text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FixedConfirmationToastMultiLineDark

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

@@ -4,8 +4,13 @@ examples:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
+  - fixed_confirmation_toast_dark: Dark
+  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
   
   react:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
+  - fixed_confirmation_toast_dark: Dark
+  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
+  

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

@@ -1,3 +1,5 @@
 export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
 export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
 export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
+export { default as FixedConfirmationToastDark } from './_fixed_confirmation_toast_dark.jsx'
+export { default as FixedConfirmationToastMultiLineDark } from './_fixed_confirmation_toast_multi_line_dark.jsx'

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -7,48 +7,35 @@ import { globalProps } from '../utilities/globalProps.js'
 type FlexProps = {
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
-  horizontal?: "left" | "center" | "right" | "stretch" | "none",
-  justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
+  horizontal?: "left" | "center" | "right" | "stretch",
   id?: string,
   inline?: boolean,
   orientation?: "row" | "column",
   spacing?: "around" | "between" | "evenly" | "none",
   reverse?: boolean,
-  vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
-  align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
-  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
-  rowGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
-  columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
+  vertical?: "top" | "center" | "bottom" | "stretch" | "baseline",
   wrap?: boolean,
 }
 
 const Flex = (props: FlexProps) => {
   const {
-    align = 'none',
     children,
     className,
     inline = false,
     horizontal = 'left',
-    justify = 'none',
     orientation = 'row',
     spacing = 'none',
-    gap = 'none',
-    rowGap = 'none',
-    columnGap = 'none',
     reverse = false,
     vertical = 'top',
     wrap = false,
   } = props
   const orientationClass =
     orientation !== undefined ? `orientation_${orientation}` : ''
-  const justifyClass =
-    justify !== 'none' ? `justify_content_${justify}` : `justify_content_${horizontal}`
-  const alignClass = align !== 'none' ? `align_items_${align}` : `align_items_${vertical}`
+  const horizontalClass =
+    horizontal !== undefined ? `justify_content_${horizontal}` : ''
+  const verticalClass = vertical !== undefined ? `align_items_${vertical}` : ''
   const inlineClass = inline === true ? 'inline' : ''
   const spacingClass = spacing !== undefined ? `spacing_${spacing}` : ''
-  const gapClass = gap !== 'none' ? `gap_${gap}` : ''
-  const rowGapClass = rowGap !== 'none' ? `rowGap_${rowGap}` : ''
-  const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
   return (
@@ -57,15 +44,12 @@ const Flex = (props: FlexProps) => {
         buildCss(
           'pb_flex_kit',
           orientationClass,
-          justifyClass,
-          alignClass,
+          horizontalClass,
+          verticalClass,
           inlineClass,
-          reverseClass,
-          wrapClass,
           spacingClass,
-          gapClass,
-          rowGapClass,
-          columnGapClass
+          reverseClass,
+          wrapClass
         ),
         globalProps(props),
         className

data/app/pb_kits/playbook/pb_flex/_flex.scss

@@ -1,19 +1,4 @@
 @import "flex_item";
-@import "../tokens/spacing";
-
-$gapSpaces:(
-  xs:   $space_xs,
-  sm:   $space_sm,
-  md:   $space_md,
-  lg:   $space_lg,
-  xl:   $space_xl
-);
-
-$gapTypes: (
-  gap: gap, 
-  columnGap: column-gap, 
-  rowGap: row-gap
-  );
 
 [class^=pb_flex_kit] {
   display: flex;
@@ -48,8 +33,7 @@ $gapTypes: (
 
   // Alignment: Justify Content
   &[class*=justify_content_left],
-  &[class*=justify_content_top],
-  &[class*=justify_content_start] {
+  &[class*=justify_content_top] {
     justify-content: flex-start;
     &[class*=_reverse] {
       justify-content: flex-end;
@@ -57,8 +41,7 @@ $gapTypes: (
   }
 
   &[class*=justify_content_right],
-  &[class*=justify_content_bottom],
-  &[class*=justify_content_end] {
+  &[class*=justify_content_bottom] {
     justify-content: flex-end;
      &[class*=_reverse] {
       justify-content: flex-start;
@@ -71,14 +54,12 @@ $gapTypes: (
 
   // Alignment: Align Items
   &[class*=align_items_left],
-  &[class*=align_items_top],
-  &[class*=align_items_start] {
+  &[class*=align_items_top] {
     align-items: flex-start;
   }
 
   &[class*=align_items_right],
-  &[class*=align_items_bottom],
-  &[class*=align_items_end] {
+  &[class*=align_items_bottom] {
     align-items: flex-end;
   }
 
@@ -95,29 +76,15 @@ $gapTypes: (
   }
 
   // Spacing
-  &[class*=spacing_around],
-  &[class*=justify_content_around] {
+  &[class*=spacing_around] {
     justify-content: space-around;
   }
 
-  &[class*=spacing_between],
-  &[class*=justify_content_between] {
+  &[class*=spacing_between] {
     justify-content: space-between;
   }
 
-  &[class*=spacing_evenly],
-  &[class*=justify_content_evenly] {
+  &[class*=spacing_evenly] {
     justify-content: space-evenly;
   }
-
-  //Gap
-  @each $gapType, $gapValue in $gapTypes{
-    @each $sizeName, $sizeValue in $gapSpaces {
-      &[class*=_#{$gapType}_#{$sizeName}]{
-        #{$gapValue}: $sizeValue;
-      }
-    }
-  }
-
-
 }

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -7,22 +7,18 @@ type FlexItemPropTypes = {
   children: array<React.ReactNode> | React.ReactNode,
   fixedSize: string,
   grow: boolean,
-  shrink: boolean,
-  flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
   className: string,
 }
 
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, shrink, flex } = props
+  const { children, className, fixedSize, grow } = props
   const growClass = grow === true ? 'grow' : ''
-  const flexClass = flex !== 'none' ? `flex_${flex}` : ''
-  const shrinkClass = shrink === true ? 'shrink' : ''
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), globalProps(props), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.scss

@@ -7,14 +7,4 @@
   &[class*=_grow] {
     flex-grow: 1;
   }
-
-  &[class*=_shrink] {
-    flex-shrink: 1;
-  }
-
-  @for $i from 0 through 12 {
-    &[class*=_flex_#{$i}]{
-      flex: $i;
-    }
-  }
 }

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

@@ -1,7 +1 @@
 This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
-
-##### !!!Attention these props will be deprecated in the future please use new props in their place
-
-* `horizontal` - Will be replaced with `justify` 
-* `vertical` - Will be replaced with `align` 
-* `spacing` - Will be removed. Use `justify` 

data/app/pb_kits/playbook/pb_flex/docs/_flex_default.html.erb

@@ -1,23 +1,23 @@
-<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
-<br/>
 <div class="flex-doc-example">
+  
+  <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
+
   <%= pb_rails("flex") do %>
-    <%= pb_rails("flex/flex_item") do %>1<% end %>
-    <%= pb_rails("flex/flex_item") do %>2<% end %>
-    <%= pb_rails("flex/flex_item") do %>3<% end %>
-    <%= pb_rails("flex/flex_item") do %>4<% end %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
   <% end %>
-</div>
 
-<br/><br/>
+  <br/><br/>
+
+  <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
 
-<%= pb_rails("title", props: {size: 4, text: "Column"}) %>
-<br/>
-<div class="flex-doc-example">
   <%= pb_rails("flex", props: {orientation: "column"}) do %>
-    <%= pb_rails("flex/flex_item") do %>1<% end %>
-    <%= pb_rails("flex/flex_item") do %>2<% end %>
-    <%= pb_rails("flex/flex_item") do %>3<% end %>
-    <%= pb_rails("flex/flex_item") do %>4<% end %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>1<% end %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>2<% end %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>3<% end %>
+    <%= pb_rails("body", props: {classname: "flex-item"}) do %>4<% end %>
   <% end %>
+
 </div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx

@@ -4,14 +4,13 @@ import { Flex, FlexItem, Title } from  '../../'
 const FlexDefault = (props) => {
   return (
     <>
-
-      <Title
-          size={4}
-          text="Row"
-          {...props}
-      />
-      <br />
       <div className="flex-doc-example">
+        <Title
+            size={4}
+            text="Row"
+            {...props}
+        />
+        <br />
         <Flex
             orientation="row"
             {...props}
@@ -29,18 +28,17 @@ const FlexDefault = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
-      <br />
-      <Title
-          size={4}
-          text="Column"
-          {...props}
-      />
-      <br />
-      <div className="flex-doc-example">
+
+        <br />
+        <Title
+            size={4}
+            text="Column"
+            {...props}
+        />
+        <br />
         <Flex
-            align="start"
             orientation="column"
+            vertical="left"
             {...props}
         >
           <FlexItem>

data/app/pb_kits/playbook/pb_flex/docs/_flex_default.md

@@ -1,3 +1 @@
-##### Prop
-
-* `orientation` | **Type**: String | **Values**: row | column 
+Display: block

data/app/pb_kits/playbook/pb_flex/docs/{_flex_justify.html.erb → _flex_horizontal.html.erb}

@@ -1,66 +1,68 @@
-
-<%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
 <div class="flex-doc-example">
-  <%= pb_rails("flex", props:{justify: "start" }) do %>
+    
+  <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
+
+  <%= pb_rails("flex", props: {horizontal: "left"}) do %>
     <%= pb_rails("flex/flex_item") do %>1<% end %>
     <%= pb_rails("flex/flex_item") do %>2<% end %>
     <%= pb_rails("flex/flex_item") do %>3<% end %>
     <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
-</div>
 
   <br/><br/>
 
-<div class="flex-doc-example">
-  <%= pb_rails("flex", props:{justify: "center" }) do %>
+  <%= pb_rails("flex", props: {horizontal: "center"}) do %>
     <%= pb_rails("flex/flex_item") do %>1<% end %>
     <%= pb_rails("flex/flex_item") do %>2<% end %>
     <%= pb_rails("flex/flex_item") do %>3<% end %>
     <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
-</div>
 
   <br/><br/>
 
-<div class="flex-doc-example">
-  <%= pb_rails("flex", props:{justify: "end" }) do %>
+  <%= pb_rails("flex", props: {horizontal: "right"}) do %>
     <%= pb_rails("flex/flex_item") do %>1<% end %>
     <%= pb_rails("flex/flex_item") do %>2<% end %>
     <%= pb_rails("flex/flex_item") do %>3<% end %>
     <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
-</div>
 
   <br/><br/>
 
-    <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
- <div class="flex-doc-example tall">
-  <%= pb_rails("flex", props:{ justify: "start", orientation: "column" }) do %>
+  <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
+
+  <%= pb_rails("flex", props: {orientation: "column", horizontal: "left"}) do %>
     <%= pb_rails("flex/flex_item") do %>1<% end %>
     <%= pb_rails("flex/flex_item") do %>2<% end %>
     <%= pb_rails("flex/flex_item") do %>3<% end %>
     <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
-</div>
 
   <br/><br/>
 
-  <div class="flex-doc-example tall">
-  <%= pb_rails("flex", props:{justify: "center", orientation: "column" }) do %>
+  <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
     <%= pb_rails("flex/flex_item") do %>1<% end %>
     <%= pb_rails("flex/flex_item") do %>2<% end %>
     <%= pb_rails("flex/flex_item") do %>3<% end %>
     <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
-</div>
 
   <br/><br/>
 
-<div class="flex-doc-example tall">
-  <%= pb_rails("flex", props:{ justify: "end", orientation: "column" }) do %>
+  <%= pb_rails("flex", props: {orientation: "column", horizontal: "right"}) do %>
     <%= pb_rails("flex/flex_item") do %>1<% end %>
     <%= pb_rails("flex/flex_item") do %>2<% end %>
     <%= pb_rails("flex/flex_item") do %>3<% end %>
     <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
+
+  <br/><br/>
+
+  <%= pb_rails("flex", props: {orientation: "column", horizontal: "stretch"}) do %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item") do %>2<% end %>
+    <%= pb_rails("flex/flex_item") do %>3<% end %>
+    <%= pb_rails("flex/flex_item") do %>4<% end %>
+  <% end %>
+
 </div>

data/app/pb_kits/playbook/pb_flex/docs/{_flex_align.jsx → _flex_horizontal.jsx}

@@ -1,42 +1,25 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexAlign = (props) => {
+const FlexHorizontal = (props) => {
   return (
     <>
-
-      <Title
-          size={4}
-          text="Row"
-          {...props}
-      />
-      <br />
-
-      <div className="flex-doc-example ">
-        <Flex
-            align="start"
+      <div className="flex-doc-example">
+        <Title
+            size={3}
+            text="Row"
             {...props}
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem padding="xl">
-            {'3'}
-          </FlexItem>
-          <FlexItem padding="md">
-            {'4'}
-          </FlexItem>
-        </Flex>
-      </div>
-
-      <br />
-
-      <div className="flex-doc-example ">
+        />
+        <br />
+        <Title
+            size={4}
+            text="Left"
+            {...props}
+        />
+        <br />
         <Flex
-            align="center"
+            horizontal="left"
+            orientation="row"
             {...props}
         >
           <FlexItem>
@@ -45,20 +28,25 @@ const FlexAlign = (props) => {
           <FlexItem>
             {'2'}
           </FlexItem>
-          <FlexItem padding="xl">
+          <FlexItem>
             {'3'}
           </FlexItem>
-          <FlexItem padding="md">
+          <FlexItem>
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
 
-      <br />
+        <br />
 
-      <div className="flex-doc-example ">
+        <Title
+            size={4}
+            text="Center"
+            {...props}
+        />
+        <br />
         <Flex
-            align="end"
+            horizontal="center"
+            orientation="row"
             {...props}
         >
           <FlexItem>
@@ -67,20 +55,24 @@ const FlexAlign = (props) => {
           <FlexItem>
             {'2'}
           </FlexItem>
-          <FlexItem padding="xl">
+          <FlexItem>
             {'3'}
           </FlexItem>
-          <FlexItem padding="md">
+          <FlexItem>
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
 
-      <br />
+        <br />
 
-      <div className="flex-doc-example ">
+        <Title
+            size={4}
+            text="Right"
+            {...props}
+        />
+        <br />
         <Flex
-            align="stretch"
+            horizontal="right"
             orientation="row"
             {...props}
         >
@@ -90,28 +82,31 @@ const FlexAlign = (props) => {
           <FlexItem>
             {'2'}
           </FlexItem>
-          <FlexItem padding="xl">
+          <FlexItem>
             {'3'}
           </FlexItem>
-          <FlexItem padding="md">
+          <FlexItem>
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
 
-      <br />
+        <br />
 
-      <Title
-          size={4}
-          text="Column"
-          {...props}
-      />
-      <br />
-
-      <div className="flex-doc-example ">
+        <Title
+            size={3}
+            text="Column"
+            {...props}
+        />
+        <br />
+        <Title
+            size={4}
+            text="Left"
+            {...props}
+        />
+        <br />
         <Flex
-            align="start"
             orientation="column"
+            vertical="left"
             {...props}
         >
           <FlexItem>
@@ -127,14 +122,18 @@ const FlexAlign = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
 
-      <br />
+        <br />
 
-      <div className="flex-doc-example ">
+        <Title
+            size={4}
+            text="Center"
+            {...props}
+        />
+        <br />
         <Flex
-            align="center"
             orientation="column"
+            vertical="center"
             {...props}
         >
           <FlexItem>
@@ -150,14 +149,18 @@ const FlexAlign = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
 
-      <br />
+        <br />
 
-      <div className="flex-doc-example ">
+        <Title
+            size={4}
+            text="Right"
+            {...props}
+        />
+        <br />
         <Flex
-            align="end"
             orientation="column"
+            vertical="right"
             {...props}
         >
           <FlexItem>
@@ -173,14 +176,18 @@ const FlexAlign = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
 
-      <br />
+        <br />
 
-      <div className="flex-doc-example ">
+        <Title
+            size={4}
+            text="Stretch"
+            {...props}
+        />
+        <br />
         <Flex
-            align="stretch"
             orientation="column"
+            vertical="stretch"
             {...props}
         >
           <FlexItem>
@@ -197,9 +204,8 @@ const FlexAlign = (props) => {
           </FlexItem>
         </Flex>
       </div>
-
     </>
   )
 }
 
-export default FlexAlign
+export default FlexHorizontal