playbook_ui 7.14.0.pre.alpha1 → 7.14.0

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

@@ -1,5 +1 @@
-##### Prop
-
-* `inline` | **Type**: Boolean 
-
-- By default this prop is `false` which sets the flex container to take up the full width of its  parent container. When the prop is set to `true` the flex container sets its width to be the same size as the containing items.
+Display: inline

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("flex",props:{reverse: true}) do %>
+    
+  <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
+
+  <%= 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/>
+  <br/><br/>
 
-<%= 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("title", props: {size: 4, text: "Column"}) %><br/>
+
+  <%= 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

@@ -13,7 +13,7 @@ const FlexReverse = (props) => {
         <br />
         <Flex
             className="bg_light"
-            justify="start"
+            horizontal="left"
             orientation="row"
             reverse
             {...props}
@@ -40,10 +40,10 @@ const FlexReverse = (props) => {
         />
         <br />
         <Flex
-            align="start"
             className="bg_light"
             orientation="column"
             reverse
+            vertical="left"
             {...props}
         >
           <FlexItem>

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

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

@@ -13,7 +13,7 @@ const FlexSpacing = (props) => {
         <br />
         <Flex
             className="bg_light"
-            justify="none"
+            spacing="none"
             {...props}
         >
           <FlexItem>
@@ -40,7 +40,7 @@ const FlexSpacing = (props) => {
         <br />
         <Flex
             className="bg_light"
-            justify="around"
+            spacing="around"
             {...props}
         >
           <FlexItem>
@@ -67,7 +67,7 @@ const FlexSpacing = (props) => {
         <br />
         <Flex
             className="bg_light"
-            justify="between"
+            spacing="between"
             {...props}
         >
           <FlexItem>
@@ -94,7 +94,7 @@ const FlexSpacing = (props) => {
         <br />
         <Flex
             className="bg_light"
-            justify="evenly"
+            spacing="evenly"
             {...props}
         >
           <FlexItem>

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

@@ -0,0 +1,68 @@
+<div class="flex-doc-example">
+
+  <%= pb_rails("title", props: {size: 4, text: "Row"}) %><br/>
+
+  <%= pb_rails("flex", props: {classname: "tall", vertical: "top"}) 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: {classname: "tall", vertical: "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 %>
+
+  <br/><br/>
+
+  <%= pb_rails("flex", props: {classname: "tall", vertical: "bottom"}) 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: {classname: "tall", vertical: "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 %>
+
+  <br/><br/>
+
+  <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
+
+  <%= pb_rails("flex", props: {classname: "tall", orientation: "column", vertical: "top"}) 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: {classname: "tall", orientation: "column", vertical: "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 %>
+
+  <br/><br/>
+
+  <%= pb_rails("flex", props: {classname: "tall", orientation: "column", vertical: "bottom"}) 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_justify.jsx → _flex_vertical.jsx}

@@ -1,20 +1,25 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexJustify = (props) => {
+const FlexVertical = (props) => {
   return (
     <>
-
-      <Title
-          size={4}
-          text="Row"
-          {...props}
-      />
-      <br />
       <div className="flex-doc-example">
+        <Title
+            size={3}
+            text="Row"
+            {...props}
+        />
+        <br />
+        <Title
+            size={4}
+            text="Top"
+            {...props}
+        />
+        <br />
         <Flex
-            justify="start"
-            orientation="row"
+            className="bg_light tall"
+            vertical="top"
             {...props}
         >
           <FlexItem>
@@ -30,12 +35,18 @@ const FlexJustify = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
-      <br />
-      <div className="flex-doc-example">
+
+        <br />
+
+        <Title
+            size={4}
+            text="Center"
+            {...props}
+        />
+        <br />
         <Flex
-            justify="center"
-            orientation="row"
+            className="bg_light tall"
+            vertical="center"
             {...props}
         >
           <FlexItem>
@@ -51,12 +62,45 @@ const FlexJustify = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
 
-      <br />
-      <div className="flex-doc-example">
+        <br />
+
+        <Title
+            size={4}
+            text="Bottom"
+            {...props}
+        />
+        <br />
+        <Flex
+            className="bg_light tall"
+            vertical="bottom"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem>
+            {'3'}
+          </FlexItem>
+          <FlexItem>
+            {'4'}
+          </FlexItem>
+        </Flex>
+
+        <br />
+
+        <Title
+            size={4}
+            text="Stretch"
+            {...props}
+        />
+        <br />
         <Flex
-            justify="end"
+            className="bg_light tall"
+            horizontal="stretch"
             orientation="row"
             {...props}
         >
@@ -73,21 +117,25 @@ const FlexJustify = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
-      <br />
 
-      <Title
-          size={4}
-          text="Column"
-          {...props}
-      />
-      <br />
-      <div className="flex-doc-example tall">
+        <br />
+        <Title
+            size={3}
+            text="Column"
+            {...props}
+        />
+        <br />
+        <Title
+            size={4}
+            text="Top"
+            {...props}
+        />
+        <br />
         <Flex
-            align="start"
             className="bg_light tall"
-            justify="start"
+            horizontal="left"
             orientation="column"
+            vertical="top"
             {...props}
         >
           <FlexItem>
@@ -103,14 +151,19 @@ const FlexJustify = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
-      <br />
-      <div className="flex-doc-example tall">
+
+        <br />
+        <Title
+            size={4}
+            text="Center"
+            {...props}
+        />
+        <br />
         <Flex
-            align="start"
             className="bg_light tall"
-            justify="center"
+            horizontal="center"
             orientation="column"
+            vertical="left"
             {...props}
         >
           <FlexItem>
@@ -126,14 +179,19 @@ const FlexJustify = (props) => {
             {'4'}
           </FlexItem>
         </Flex>
-      </div>
-      <br />
-      <div className="flex-doc-example tall">
+
+        <br />
+        <Title
+            size={4}
+            text="Bottom"
+            {...props}
+        />
+        <br />
         <Flex
-            align="start"
             className="bg_light tall"
-            justify="end"
+            horizontal="bottom"
             orientation="column"
+            vertical="left"
             {...props}
         >
           <FlexItem>
@@ -154,4 +212,4 @@ const FlexJustify = (props) => {
   )
 }
 
-export default FlexJustify
+export default FlexVertical