playbook_ui 7.13.0 → 7.14.0.pre.alpha1

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

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

@@ -13,7 +13,7 @@ const FlexReverse = (props) => {
         <br />
         <Flex
             className="bg_light"
-            horizontal="left"
+            justify="start"
             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_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

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

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

@@ -0,0 +1,7 @@
+##### Prop
+
+*ATTENTION* - the spacing prop will be deprecated & renamed in the future. 
+
+* **Deprecated Prop**: `spacing` | **Type**: String | **Values**: none | around | evenly | between 
+
+* **New Prop**: `justify` | **Type**: String | **Values**: none | around | evenly | between

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

@@ -59,7 +59,7 @@ const FlexWrap = (props) => {
             {...props}
         />
         <br />
-        <Flex className="bg_light wide">
+        <Flex className="bg_light">
           <FlexItem fixedSize="300px">
             {'1'}
           </FlexItem>

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

@@ -0,0 +1,5 @@
+##### Prop
+
+* `wrap` | **Type**: Boolean 
+
+- When set to `true` this prop will move the next item in flex container to a new line if there is no more room.

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

@@ -6,8 +6,11 @@ examples:
   - flex_reverse: Reverse
   - flex_wrap: Wrap
   - flex_spacing: Spacing
-  - flex_horizontal: Horizontal Alignment
-  - flex_vertical: Vertical Alignment
+  - flex_justify: Justify
+  - flex_align: Align
+  - flex_gap: Gap
+  - flex_item: Flex Item
+
 
 
   react:
@@ -16,5 +19,7 @@ examples:
   - flex_reverse: Reverse
   - flex_wrap: Wrap
   - flex_spacing: Spacing
-  - flex_horizontal: Horizontal Alignment
-  - flex_vertical: Vertical Alignment
+  - flex_justify: Justify
+  - flex_align: Align
+  - flex_gap: Gap
+  - flex_item_example: Flex Item

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

@@ -3,5 +3,7 @@ export { default as FlexInline } from './_flex_inline.jsx'
 export { default as FlexReverse } from './_flex_reverse.jsx'
 export { default as FlexWrap } from './_flex_wrap.jsx'
 export { default as FlexSpacing } from './_flex_spacing.jsx'
-export { default as FlexHorizontal } from './_flex_horizontal.jsx'
-export { default as FlexVertical } from './_flex_vertical.jsx'
+export { default as FlexJustify } from './_flex_justify.jsx'
+export { default as FlexAlign } from './_flex_align.jsx'
+export { default as FlexGap } from './_flex_gap.jsx'
+export { default as FlexItemExample } from './_flex_item_example.jsx'

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -8,8 +8,13 @@ module Playbook
       partial "pb_flex/flex"
 
       prop :horizontal, type: Playbook::Props::Enum,
-                        values: %w[left center right stretch],
-                        default: "left"
+                        values: %w[left center right stretch none],
+                        default: "left",
+                        deprecated: true
+
+      prop :justify, type: Playbook::Props::Enum,
+                     values: %w[start center end stretch around between evenly none],
+                     default: "none"
 
       prop :inline, type: Playbook::Props::Boolean,
                     default: false
@@ -20,14 +25,32 @@ module Playbook
 
       prop :spacing, type: Playbook::Props::Enum,
                      values: %w[around between evenly none],
+                     default: "none",
+                     deprecated: true
+
+      prop :gap, type: Playbook::Props::Enum,
+                 values: %w[xs sm md lg xl none],
+                 default: "none"
+
+      prop :row_gap, type: Playbook::Props::Enum,
+                     values: %w[xs sm md lg xl none],
                      default: "none"
 
+      prop :column_gap, type: Playbook::Props::Enum,
+                        values: %w[xs sm md lg xl none],
+                        default: "none"
+
       prop :reverse, type: Playbook::Props::Boolean,
                      default: false
 
       prop :vertical, type: Playbook::Props::Enum,
-                      values: %w[top center bottom stretch baseline],
-                      default: "top"
+                      values: %w[top center bottom stretch baseline none],
+                      default: "top",
+                      deprecated: true
+
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[start center end stretch baseline none],
+                   default: "none"
 
       prop :wrap, type: Playbook::Props::Boolean,
                   default: false
@@ -35,24 +58,36 @@ module Playbook
       def classname
         generate_classname("pb_flex_kit",
                            orientation_class,
-                           horizontal_class,
-                           vertical_class,
+                           justify_class,
+                           align_class,
                            inline_class,
+                           reverse_class,
                            wrap_class,
-                           spacing_class)
+                           spacing_class,
+                           gap_class,
+                           row_gap_class,
+                           column_gap_class)
       end
 
     private
 
       def orientation_class
-        "orientation_#{orientation}#{reverse_class}"
+        "orientation_#{orientation}"
       end
 
       def horizontal_class
         if orientation == "row"
-          "justify_content_#{horizontal}#{reverse_class}"
+          "justify_content_#{horizontal}"
         else
-          "align_items_#{horizontal}"
+          "align_items_#{horizontal}" if align == "none"
+        end
+      end
+
+      def justify_class
+        if justify == "none"
+          horizontal_class
+        else
+          "justify_content_#{justify}"
         end
       end
 
@@ -65,20 +100,52 @@ module Playbook
       end
 
       def reverse_class
-        reverse ? "_reverse" : nil
+        reverse ? "reverse" : nil
       end
 
       def vertical_class
         if orientation == "row"
           "align_items_#{vertical}"
         else
-          "justify_content_#{vertical}_#{reverse_class}"
+          "justify_content_#{vertical}" if justify == "none"
+        end
+      end
+
+      def align_class
+        if align == "none"
+          vertical_class
+        else
+          "align_items_#{align}"
         end
       end
 
       def wrap_class
         wrap ? "wrap" : nil
       end
+
+      def gap_class
+        if gap == "none"
+          nil
+        else
+          "gap_#{gap}"
+        end
+      end
+
+      def row_gap_class
+        if row_gap == "none"
+          nil
+        else
+          "rowGap_#{row_gap}"
+        end
+      end
+
+      def column_gap_class
+        if column_gap == "none"
+          nil
+        else
+          "columnGap_#{column_gap}"
+        end
+      end
     end
   end
 end