playbook_ui 7.11.1 → 7.14.0.pre.alpha1

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

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

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

@@ -1,23 +1,21 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexHorizontal = () => {
+const FlexJustify = (props) => {
   return (
     <>
+
+      <Title
+          size={4}
+          text="Row"
+          {...props}
+      />
+      <br />
       <div className="flex-doc-example">
-        <Title
-            size={3}
-            text="Row"
-        />
-        <br />
-        <Title
-            size={4}
-            text="Left"
-        />
-        <br />
         <Flex
-            horizontal="left"
+            justify="start"
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -32,17 +30,13 @@ const FlexHorizontal = () => {
             {'4'}
           </FlexItem>
         </Flex>
-
-        <br />
-
-        <Title
-            size={4}
-            text="Center"
-        />
-        <br />
+      </div>
+      <br />
+      <div className="flex-doc-example">
         <Flex
-            horizontal="center"
+            justify="center"
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -57,17 +51,14 @@ const FlexHorizontal = () => {
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
 
-        <br />
-
-        <Title
-            size={4}
-            text="Right"
-        />
-        <br />
+      <br />
+      <div className="flex-doc-example">
         <Flex
-            horizontal="right"
+            justify="end"
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -82,47 +73,22 @@ const FlexHorizontal = () => {
             {'4'}
           </FlexItem>
         </Flex>
+      </div>
+      <br />
 
-        <br />
-
-        <Title
-            size={3}
-            text="Column"
-        />
-        <br />
-        <Title
-            size={4}
-            text="Left"
-        />
-        <br />
-        <Flex
-            orientation="column"
-            vertical="left"
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem>
-            {'3'}
-          </FlexItem>
-          <FlexItem>
-            {'4'}
-          </FlexItem>
-        </Flex>
-
-        <br />
-
-        <Title
-            size={4}
-            text="Center"
-        />
-        <br />
+      <Title
+          size={4}
+          text="Column"
+          {...props}
+      />
+      <br />
+      <div className="flex-doc-example tall">
         <Flex
+            align="start"
+            className="bg_light tall"
+            justify="start"
             orientation="column"
-            vertical="center"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -137,17 +103,15 @@ const FlexHorizontal = () => {
             {'4'}
           </FlexItem>
         </Flex>
-
-        <br />
-
-        <Title
-            size={4}
-            text="Right"
-        />
-        <br />
+      </div>
+      <br />
+      <div className="flex-doc-example tall">
         <Flex
+            align="start"
+            className="bg_light tall"
+            justify="center"
             orientation="column"
-            vertical="right"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -162,17 +126,15 @@ const FlexHorizontal = () => {
             {'4'}
           </FlexItem>
         </Flex>
-
-        <br />
-
-        <Title
-            size={4}
-            text="Stretch"
-        />
-        <br />
+      </div>
+      <br />
+      <div className="flex-doc-example tall">
         <Flex
+            align="start"
+            className="bg_light tall"
+            justify="end"
             orientation="column"
-            vertical="stretch"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -192,4 +154,4 @@ const FlexHorizontal = () => {
   )
 }
 
-export default FlexHorizontal
+export default FlexJustify

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

@@ -0,0 +1,7 @@
+##### Prop
+
+*ATTENTION* - the horizontal prop will be deprecated & renamed in the future. 
+
+* **Deprecated Prop**: `horizontal` | **Type**: String | **Values**: left | center | right | stretch | none
+
+* **New Prop**: `justify` | **Type**: String | **Values**: start | center | end | | none

data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.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", props: {reverse: true}) do %>
+  <%= pb_rails("flex",props:{reverse: true}) 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/>
+<br/><br/>
 
-  <%= pb_rails("flex", props: {orientation: "column", reverse: true}) do %>
+<%= pb_rails("title", props: {size: 4, text: "Column"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: {orientation: "column" , reverse: true}) 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_reverse.jsx

@@ -1,20 +1,22 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexReverse = () => {
+const FlexReverse = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={4}
             text="Row"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
-            horizontal="left"
+            justify="start"
             orientation="row"
             reverse
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -34,13 +36,15 @@ const FlexReverse = () => {
         <Title
             size={4}
             text="Column"
+            {...props}
         />
         <br />
         <Flex
+            align="start"
             className="bg_light"
             orientation="column"
             reverse
-            vertical="left"
+            {...props}
         >
           <FlexItem>
             {'1'}

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

@@ -0,0 +1,5 @@
+##### Prop
+
+* `reverse` | **Type**: Boolean 
+
+- When set to `true` this prop will reverse the order of items in the flex container.

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

@@ -1,37 +1,52 @@
-<div class="flex-doc-example">
-
-  <%= pb_rails("title", props: {size: 4, text: "None"}) %><br/>
 
-  <%= pb_rails("flex", props: {classname: "flex-container"}) do %>
+<%= pb_rails("title", props: {size: 4, text: "None"}) %><br/>
+<div class="flex-doc-example">
+  <%= 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 %>
   <% end %>
+</div>
 
   <br/><br/>
 
   <%= pb_rails("title", props: {size: 4, text: "Around"}) %><br/>
 
-  <%= pb_rails("flex", props: {classname: "flex-container", spacing: "around"}) do %>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props:{justify: "around" }) 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: "Evenly"}) %><br/>
 
-  <%= pb_rails("flex", props: {classname: "flex-container", spacing: "evenly"}) do %>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props:{justify: "evenly" }) 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: "Between"}) %><br/>
-
-  <%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props:{justify: "between" }) 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>
+
+
 
 </div>

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

@@ -1,18 +1,20 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexSpacing = () => {
+const FlexSpacing = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={4}
             text="None"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
-            spacing="none"
+            justify="none"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -33,11 +35,13 @@ const FlexSpacing = () => {
         <Title
             size={4}
             text="Around"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
-            spacing="around"
+            justify="around"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -58,11 +62,13 @@ const FlexSpacing = () => {
         <Title
             size={4}
             text="Between"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
-            spacing="between"
+            justify="between"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -83,11 +89,13 @@ const FlexSpacing = () => {
         <Title
             size={4}
             text="Evenly"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
-            spacing="evenly"
+            justify="evenly"
+            {...props}
         >
           <FlexItem>
             {'1'}