playbook_ui 7.13.0 → 7.14.0.pre.alpha1

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

@@ -0,0 +1,7 @@
+##### Prop
+
+*ATTENTION* - the vertical prop will be deprecated & renamed in the future. 
+
+* **Deprecated Prop**: `vertical` | **Type**: String | **Values**: top | center | bottom | stretch | baseline | none
+
+* **New Prop**: `align` | **Type**: String | **Values**: start | center | end | stretch | baseline | none

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("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 %>
+    <%= 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("title", props: {size: 4, text: "Column"}) %>
+<br/>
+<div class="flex-doc-example">
   <%= pb_rails("flex", props: {orientation: "column"}) do %>
-    <%= 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 %>
+    <%= 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_default.jsx

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

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

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

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

@@ -0,0 +1,33 @@
+<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
+   <%40.times do |i|%>
+    <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
+   <% end %>
+  <% end %>
+</div>
+
+<br/><br/>
+<%= pb_rails("title", props: {size: 4, text: "Column Gap"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ column_gap: "lg"}) 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: "Row Gap"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props:{ orientation: "column", row_gap: "xl"}) 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_gap.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Flex, FlexItem } from  '../../'
+
+const FlexGap = (props) => {
+  const count = () => {
+    const array = []
+    for (let i = 0; i < 40; i++) {
+      array.push(i)
+    }
+    return array
+  }
+
+  return (
+    <>
+      <div className="flex-doc-example">
+        <Flex
+            gap="xs"
+            wrap
+            {...props}
+        >
+          {count().map((v, key) => (
+            <FlexItem key={key}>
+              {v}
+            </FlexItem>
+            ))}
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example">
+        <Flex
+            columnGap="lg"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem>
+            {'3'}
+          </FlexItem>
+          <FlexItem>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            orientation="column"
+            rowGap="xl"
+            {...props}
+        >
+          <FlexItem>
+            {'1'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem>
+            {'3'}
+          </FlexItem>
+          <FlexItem>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+    </>
+  )
+}
+
+export default FlexGap

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

@@ -0,0 +1,9 @@
+##### Prop
+
+*  `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xs | sm | md | lg | xl | none
+
+- Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
+
+- Setting the row_gap || rowGap prop creates space between rows in a flex container.
+
+- Setting the column_gap || columnGap prop creates space between columns in a flex container.

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/>
-
-  <%= pb_rails("title", props: {size: 4, text: "Column"}) %><br/>
+<br/><br/>
 
-  <%= pb_rails("flex", props: {orientation: "column", inline: true}) do %>
+<%= 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("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 +1,5 @@
-Display: inline
+##### 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.

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

@@ -0,0 +1,49 @@
+<%= pb_rails("title", props: {size: 4, text: "Grow"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex",props: { gap:"sm" }) do %>
+    <%= pb_rails("flex/flex_item", props: { grow: true }) do %>I'm growing<% end %>
+    <%= pb_rails("flex/flex_item") do %>1<% end %>
+    <%= pb_rails("flex/flex_item") do %>2<% end %>
+    <%= pb_rails("flex/flex_item") do %>3<% end %>
+  <% end %>
+</div>
+
+<br/><br/>
+
+<%= pb_rails("title", props: {size: 4, text: "Shrink"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: "sm"}) do %>
+    <%= pb_rails("flex/flex_item", props: {shrink: true}) do %> I'm shrinking<% end %>
+    <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>3<% end %>
+  <% end %>
+</div>
+
+<br/><br/>
+
+<%= pb_rails("title", props: {size: 4, text: "Fixed Size"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: "sm"}) do %>
+    <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %> I'm 250px<% end %>
+    <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>3<% end %>
+  <% end %>
+</div>
+
+<br/><br/>
+
+<%= pb_rails("title", props: {size: 4, text: "Flex"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: "sm"}) do %>
+    <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props: {flex: "3"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props: {flex: "1"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props: {flex: "2"}) do %>4<% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,11 @@
+##### Props
+
+*  `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+*  `fixed_size` | **Type**: String | **Values**: Any CSS px or % value 
+*  `grow` | **Type**: Boolean  
+*  `shrink` | **Type**: Boolean 
+
+- Flex is a short hand to set the flex item to take up (x) amount of available space
+- Setting Flex to 1 is equal to setting the grow & shrink prop to true 
+- Setting Flex to 0 is equal to setting the grow & shrink prop to false
+- If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container

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

@@ -0,0 +1,113 @@
+import React from 'react'
+import { Flex, FlexItem, Title } from  '../../'
+
+const FlexItemExample = (props) => {
+  return (
+    <>
+      <Title
+          size={4}
+          text="Grow"
+      />
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap="xs"
+            {...props}
+        >
+          <FlexItem grow>
+            {'I\'m growing'}
+          </FlexItem>
+          <FlexItem>
+            {'2'}
+          </FlexItem>
+          <FlexItem>
+            {'3'}
+          </FlexItem>
+          <FlexItem>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+      <Title
+          size={4}
+          text="Shrink"
+      />
+      <br />
+
+      <div className="flex-doc-example">
+        <Flex
+            gap="xs"
+            {...props}
+        >
+          <FlexItem>
+            {'I\'m shrinking'}
+          </FlexItem>
+          <FlexItem flex={1}>
+            {'2'}
+          </FlexItem>
+          <FlexItem flex={1}>
+            {'3'}
+          </FlexItem>
+          <FlexItem flex={1}>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+      <br />
+      <Title
+          size={4}
+          text="Fixed Size"
+      />
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap="xs"
+            {...props}
+        >
+          <FlexItem fixedSize="250px">
+            {'I\'m 250px'}
+          </FlexItem>
+          <FlexItem flex={1}>
+            {'2'}
+          </FlexItem>
+          <FlexItem flex={1}>
+            {'3'}
+          </FlexItem>
+          <FlexItem flex={1}>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+      <Title
+          size={4}
+          text="Flex"
+      />
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap="xs"
+            {...props}
+        >
+          <FlexItem flex={1}>
+            {'1'}
+          </FlexItem>
+          <FlexItem flex={3}>
+            {'2'}
+          </FlexItem>
+          <FlexItem flex={1}>
+            {'3'}
+          </FlexItem>
+          <FlexItem flex={2}>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+    </>
+  )
+}
+
+export default FlexItemExample

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>