playbook_ui 4.1.2 → 4.2.0

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

@@ -0,0 +1,19 @@
+<%= 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 %>
+
+<br/><br/>
+
+<%= 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 %>

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

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Flex, FlexItem, Title } from  '../..'
+
+const FlexInline = () => {
+  return (
+    <>
+      <Title
+          size={4}
+          text="Row"
+      />
+      <br />
+      <Flex
+          className="bg_light"
+          inline
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+      <Title
+          size={4}
+          text="Column"
+      />
+      <br />
+      <Flex
+          className="bg_light"
+          inline
+          orientation="column"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+    </>
+  )
+}
+
+export default FlexInline

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

@@ -0,0 +1,19 @@
+<%= 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 %>
+
+<br/><br/>
+
+<%= 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 %>

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

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Flex, FlexItem, Title } from  '../..'
+
+const FlexReverse = () => {
+  return (
+    <>
+      <Title
+          size={4}
+          text="Row"
+      />
+      <br />
+      <Flex
+          className="bg_light"
+          horizontal="left"
+          orientation="row"
+          reverse
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+      <Title
+          size={4}
+          text="Column"
+      />
+      <br />
+      <Flex
+          className="bg_light"
+          orientation="column"
+          reverse
+          vertical="left"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+    </>
+  )
+}
+
+export default FlexReverse

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

@@ -0,0 +1,33 @@
+<%= 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 %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("title", props: {size: 4, text: "Around"}) %><br/>
+
+<%= 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 %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("title", props: {size: 4, text: "Evenly"}) %><br/>
+
+<%= 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 %>
+<% end %>
+
+<br/><br/>
+
+<%= pb_rails("title", props: {size: 4, text: "Between"}) %><br/>
+
+<%= 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 %>
+<% end %>

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

@@ -0,0 +1,109 @@
+import React from 'react'
+import { Flex, FlexItem, Title } from  '../..'
+
+const FlexSpacing = () => {
+  return (
+    <>
+      <Title
+          size={4}
+          text="None"
+      />
+      <br />
+      <Flex
+          className="bg_light"
+          spacing="none"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Around"
+      />
+      <br />
+      <Flex
+          className="bg_light"
+          spacing="around"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Between"
+      />
+      <br />
+      <Flex
+          className="bg_light"
+          spacing="between"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Evenly"
+      />
+      <br />
+      <Flex
+          className="bg_light"
+          spacing="evenly"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+    </>
+  )
+}
+
+export default FlexSpacing

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

@@ -0,0 +1,64 @@
+<%= 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 %>

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

@@ -0,0 +1,202 @@
+import React from 'react'
+import { Flex, FlexItem, Title } from  '../..'
+
+const FlexVertical = () => {
+  return (
+    <>
+      <Title
+          size={3}
+          text="Row"
+      />
+      <br />
+      <Title
+          size={4}
+          text="Top"
+      />
+      <br />
+      <Flex
+          className="bg_light tall"
+          vertical="top"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Center"
+      />
+      <br />
+      <Flex
+          className="bg_light tall"
+          vertical="center"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Bottom"
+      />
+      <br />
+      <Flex
+          className="bg_light tall"
+          vertical="bottom"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Stretch"
+      />
+      <br />
+      <Flex
+          className="bg_light tall"
+          horizontal="stretch"
+          orientation="row"
+
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+      <Title
+          size={3}
+          text="Column"
+      />
+      <br />
+      <Title
+          size={4}
+          text="Top"
+      />
+      <br />
+      <Flex
+          className="bg_light tall"
+          horizontal="left"
+          orientation="column"
+          vertical="top"
+
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+      <Title
+          size={4}
+          text="Center"
+      />
+      <br />
+      <Flex
+          className="bg_light tall"
+          horizontal="center"
+          orientation="column"
+          vertical="left"
+
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+      <Title
+          size={4}
+          text="Bottom"
+      />
+      <br />
+      <Flex
+          className="bg_light tall"
+          horizontal="bottom"
+          orientation="column"
+          vertical="left"
+
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+    </>
+  )
+}
+
+export default FlexVertical