playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

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

@@ -0,0 +1,73 @@
+<%= pb_rails("title", props: {size: 4, text: "Display Flex"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex/flex_item",props: { gap:"sm", display_flex: true }) do %>
+    <%= pb_rails("flex/flex_item") do %>We<% end %>
+    <%= pb_rails("flex/flex_item") do %>Are<% end %>
+    <%= pb_rails("flex/flex_item") do %>Being<% end %>
+    <%= pb_rails("flex/flex_item") do %>Flexed<% end %>
+  <% end %>
+</div>
+
+<br/><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>
+
+<br/><br/>
+
+<%= pb_rails("title", props: {size: 4, text: "Order"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: "sm"}) do %>
+    <%= pb_rails("flex/flex_item", props: {order: "4"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props: {order: "2"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props: {order: "1"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props: {order: "3"}) do %>4<% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,14 @@
+##### Props
+
+*  `display_flex` | **Type**: Boolean
+*  `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
+*   `order` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
+
+- 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
+- display_flex will either be true or false. If true, then the class will be applied to the kit

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

@@ -0,0 +1,89 @@
+<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
+<br/>
+  <div class="flex-doc-example">
+    <%= pb_rails("flex") do %>
+      <%= pb_rails("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
+    <% end %>
+  </div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"end"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "center"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+   <div class="flex-doc-example">
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"stretch"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <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("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+    <% end %>
+  </div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "end"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"center"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+   <div class="flex-doc-example">
+  <%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item", props:{padding: "sm", align_self:"stretch"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,210 @@
+import React from 'react'
+import { Flex, FlexItem, Title } from  '../..'
+
+const FlexItemAlignSelf = (props) => {
+  return (
+    <>
+      <Title
+          size={4}
+          text="Row"
+          {...props}
+      />
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="start">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="end">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="center">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="stretch">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+      <br />
+
+      <Title
+          size={4}
+          text="Column"
+          {...props}
+      />
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="start"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="end"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="center"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="stretch"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+    </>
+  )
+}
+
+export default FlexItemAlignSelf

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

@@ -0,0 +1,5 @@
+##### Prop
+
+* `align_self` | **Type**: String | **Values**: start | end | center | stretch 
+
+- Align-self aligns the Flex Item on the cross axis. This prop may also be applied to the Flex kit and will act the same way.

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

@@ -0,0 +1,166 @@
+import React from 'react'
+import { Flex, FlexItem, Title } from  '../..'
+
+const FlexItemExample = (props) => {
+  return (
+    <>
+      <Title
+          size={4}
+          text="Display Flex"
+      />
+      <br />
+      <div className="flex-doc-example">
+        <FlexItem
+            displayFlex
+            gap="xs"
+            {...props}
+        >
+          <FlexItem>
+            {'We'}
+          </FlexItem>
+          <FlexItem>
+            {'Are'}
+          </FlexItem>
+          <FlexItem>
+            {'Being'}
+          </FlexItem>
+          <FlexItem>
+            {'Flexed'}
+          </FlexItem>
+        </FlexItem>
+      </div>
+
+      <br />
+      <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>
+
+      <br />
+      <Title
+          size={4}
+          text="Order"
+      />
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap="xs"
+            {...props}
+        >
+          <FlexItem order={4}>
+            {'1'}
+          </FlexItem>
+          <FlexItem order={2}>
+            {'2'}
+          </FlexItem>
+          <FlexItem order={1}>
+            {'3'}
+          </FlexItem>
+          <FlexItem order={3}>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+    </>
+  )
+}
+
+export default FlexItemExample

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

@@ -0,0 +1,14 @@
+##### Props
+
+*  `display_flex` | **Type**: Boolean
+*  `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
+*   `order` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
+
+- 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
+- display_flex will either be true or false. If true, then the class will be applied to the kit

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

@@ -0,0 +1,66 @@
+
+<%= 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/>
+
+<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/>
+
+<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("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/>
+
+  <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/>
+
+<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>