playbook_ui 4.1.2 → 4.2.0

data/app/pb_kits/playbook/pb_flex/_flex.scss

@@ -0,0 +1,86 @@
+@import "flex_item";
+
+[class^=pb_flex_kit] {
+  display: flex;
+  flex-wrap: nowrap;
+
+  // Inline
+  &[class*=_inline] {
+    display: inline-flex;
+  }
+
+  // Wrap
+  &[class*=_wrap] {
+    flex-wrap: wrap;
+  }
+
+  // Orientation
+  &[class*=_orientation_row] {
+    flex-direction: row;
+
+    &[class*=_reverse] {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &[class*=_orientation_column] {
+    flex-direction: column;
+
+    &[class*=_reverse] {
+      flex-direction: column-reverse;
+    }
+  }
+
+  // Alignment: Justify Content
+  &[class*=justify_content_left],
+  &[class*=justify_content_top] {
+    justify-content: flex-start;
+    &[class*=_reverse] {
+      justify-content: flex-end;
+    }
+  }
+
+  &[class*=justify_content_right],
+  &[class*=justify_content_bottom] {
+    justify-content: flex-end;
+     &[class*=_reverse] {
+      justify-content: flex-start;
+    }
+  }
+
+  &[class*=justify_content_center] {
+    justify-content: center;
+  }
+
+  // Alignment: Align Items
+  &[class*=align_items_left],
+  &[class*=align_items_top] {
+    align-items: flex-start;
+  }
+
+  &[class*=align_items_right],
+  &[class*=align_items_bottom] {
+    align-items: flex-end;
+  }
+
+  &[class*=align_items_center] {
+    align-items: center;
+  }
+
+  &[class*=align_items_stretch] {
+    align-items: stretch;
+  }
+
+  // Spacing
+  &[class*=spacing_around] {
+    justify-content: space-around;
+  }
+
+  &[class*=spacing_between] {
+    justify-content: space-between;
+  }
+
+  &[class*=spacing_evenly] {
+    justify-content: space-evenly;
+  }
+}

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

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    style: object.style_value) do %>
+  <%= capture(&object.children) %>
+<% end %>

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -0,0 +1,32 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+
+type FlexItemPropTypes = {
+  children: Array<React.ReactNode> | React.ReactNode,
+  fixedSize: String,
+  grow: Boolean,
+  className: String,
+}
+
+const FlexItem = ({
+  children,
+  className,
+  fixedSize,
+  grow,
+}: FlexItemPropTypes) => {
+  const growClass = grow === true ? 'grow' : ''
+  const fixedStyle = fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
+
+  return (
+    <div
+        className={classnames(buildCss('pb_flex_item_kit', growClass), className)}
+        style={fixedStyle}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default FlexItem

data/app/pb_kits/playbook/pb_flex/_flex_item.scss

@@ -0,0 +1,10 @@
+[class^=pb_flex_item_kit] {
+  &[class*=_fixed_size] {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  &[class*=_grow] {
+    flex-grow: 1;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,64 @@
+<%= 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("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: "right"}) 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", 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: {orientation: "column", horizontal: "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: {orientation: "column", horizontal: "right"}) 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: {orientation: "column", horizontal: "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 %>

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

@@ -0,0 +1,194 @@
+import React from 'react'
+import { Flex, FlexItem, Title } from  '../..'
+
+const FlexHorizontal = () => {
+  return (
+    <>
+      <Title
+          size={3}
+          text="Row"
+      />
+      <br />
+      <Title
+          size={4}
+          text="Left"
+      />
+      <br />
+      <Flex
+          horizontal="left"
+          orientation="row"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Center"
+      />
+      <br />
+      <Flex
+          horizontal="center"
+          orientation="row"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Right"
+      />
+      <br />
+      <Flex
+          horizontal="right"
+          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="Left"
+      />
+      <br />
+      <Flex
+          orientation="column"
+          vertical="left"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Center"
+      />
+      <br />
+      <Flex
+          orientation="column"
+          vertical="center"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Right"
+      />
+      <br />
+      <Flex
+          orientation="column"
+          vertical="right"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+      <br />
+
+      <Title
+          size={4}
+          text="Stretch"
+      />
+      <br />
+      <Flex
+          orientation="column"
+          vertical="stretch"
+      >
+        <FlexItem>
+          {'1'}
+        </FlexItem>
+        <FlexItem>
+          {'2'}
+        </FlexItem>
+        <FlexItem>
+          {'3'}
+        </FlexItem>
+        <FlexItem>
+          {'4'}
+        </FlexItem>
+      </Flex>
+
+    </>
+  )
+}
+
+export default FlexHorizontal