playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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

@@ -1,157 +0,0 @@
-import React from 'react'
-import { Flex, FlexItem, Title } from  '../..'
-
-const FlexJustify = (props) => {
-  return (
-    <>
-
-      <Title
-          size={4}
-          text="Row"
-          {...props}
-      />
-      <br />
-      <div className="flex-doc-example">
-        <Flex
-            justify="start"
-            orientation="row"
-            {...props}
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem>
-            {'3'}
-          </FlexItem>
-          <FlexItem>
-            {'4'}
-          </FlexItem>
-        </Flex>
-      </div>
-      <br />
-      <div className="flex-doc-example">
-        <Flex
-            justify="center"
-            orientation="row"
-            {...props}
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem>
-            {'3'}
-          </FlexItem>
-          <FlexItem>
-            {'4'}
-          </FlexItem>
-        </Flex>
-      </div>
-
-      <br />
-      <div className="flex-doc-example">
-        <Flex
-            justify="end"
-            orientation="row"
-            {...props}
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem>
-            {'3'}
-          </FlexItem>
-          <FlexItem>
-            {'4'}
-          </FlexItem>
-        </Flex>
-      </div>
-      <br />
-
-      <Title
-          size={4}
-          text="Column"
-          {...props}
-      />
-      <br />
-      <div className="flex-doc-example tall">
-        <Flex
-            align="start"
-            className="bg_light tall"
-            justify="start"
-            orientation="column"
-            {...props}
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem>
-            {'3'}
-          </FlexItem>
-          <FlexItem>
-            {'4'}
-          </FlexItem>
-        </Flex>
-      </div>
-      <br />
-      <div className="flex-doc-example tall">
-        <Flex
-            align="start"
-            className="bg_light tall"
-            justify="center"
-            orientation="column"
-            {...props}
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem>
-            {'3'}
-          </FlexItem>
-          <FlexItem>
-            {'4'}
-          </FlexItem>
-        </Flex>
-      </div>
-      <br />
-      <div className="flex-doc-example tall">
-        <Flex
-            align="start"
-            className="bg_light tall"
-            justify="end"
-            orientation="column"
-            {...props}
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem>
-            {'3'}
-          </FlexItem>
-          <FlexItem>
-            {'4'}
-          </FlexItem>
-        </Flex>
-      </div>
-    </>
-  )
-}
-
-export default FlexJustify

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

@@ -1,3 +0,0 @@
-##### Prop
-
-`justify` | **Type**: String | **Values**: start | center | end | | none

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

@@ -1,23 +0,0 @@
-<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
-<br/>
-<div class="flex-doc-example">
-  <%= 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/>
-<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

@@ -1,67 +0,0 @@
-import React from 'react'
-import { Flex, FlexItem, Title } from  '../..'
-
-const FlexReverse = (props) => {
-  return (
-    <>
-      <div className="flex-doc-example">
-        <Title
-            size={4}
-            text="Row"
-            {...props}
-        />
-        <br />
-        <Flex
-            className="bg_light"
-            justify="start"
-            orientation="row"
-            reverse
-            {...props}
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem>
-            {'3'}
-          </FlexItem>
-          <FlexItem>
-            {'4'}
-          </FlexItem>
-        </Flex>
-
-        <br />
-        <Title
-            size={4}
-            text="Column"
-            {...props}
-        />
-        <br />
-        <Flex
-            align="start"
-            className="bg_light"
-            orientation="column"
-            reverse
-            {...props}
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem>
-            {'3'}
-          </FlexItem>
-          <FlexItem>
-            {'4'}
-          </FlexItem>
-        </Flex>
-      </div>
-    </>
-  )
-}
-
-export default FlexReverse

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

@@ -1,5 +0,0 @@
-##### 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,52 +0,0 @@
-
-<%= 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/>
-
-<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/>
-
-<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/>
-<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

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

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

@@ -1,3 +0,0 @@
-##### Prop
-
-`justify` | **Type**: String | **Values**: none | around | evenly | between

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

@@ -1,35 +0,0 @@
-<div class="flex-doc-example">
-
-  <%= pb_rails("title", props: {size: 4, text: "Wrap"}) %><br/>
-
-  <%= pb_rails("flex", props: {wrap: true}) do %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>1<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>2<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>3<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>4<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>5<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>6<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>7<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>8<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>9<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>10<% end %>
-  <% end %>
-
-  <br/><br/>
-
-  <%= pb_rails("title", props: {size: 4, text: "No Wrap"}) %><br/>
-
-  <%= pb_rails("flex") do %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>1<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>2<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>3<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>4<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>5<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>6<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>7<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>8<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>9<% end %>
-    <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>10<% end %>
-  <% end %>
-
-</div>

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

@@ -1,99 +0,0 @@
-import React from 'react'
-import { Body, Flex, FlexItem, Title } from  '../..'
-
-const FlexWrap = (props) => {
-  return (
-    <>
-      <div className="flex-doc-example">
-        <Body
-            text="Resize your browser"
-            {...props}
-        />
-        <Title
-            size={4}
-            text="Wrap"
-            {...props}
-        />
-        <br />
-        <Flex
-            className="bg_light"
-            wrap
-            {...props}
-        >
-          <FlexItem fixedSize="300px">
-            {'1'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'2'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'3'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'4'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'5'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'6'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'7'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'8'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'9'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'10'}
-          </FlexItem>
-        </Flex>
-
-        <br />
-        <Title
-            size={4}
-            text="No Wrap"
-            {...props}
-        />
-        <br />
-        <Flex className="bg_light">
-          <FlexItem fixedSize="300px">
-            {'1'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'2'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'3'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'4'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'5'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'6'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'7'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'8'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'9'}
-          </FlexItem>
-          <FlexItem fixedSize="300px">
-            {'10'}
-          </FlexItem>
-        </Flex>
-      </div>
-    </>
-  )
-}
-
-export default FlexWrap

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

@@ -1,5 +0,0 @@
-##### 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

@@ -1,28 +0,0 @@
-examples:
-
-  rails:
-  - flex_default: Default
-  - flex_inline: Inline
-  - flex_reverse: Reverse
-  - flex_wrap: Wrap
-  - flex_spacing: Spacing
-  - flex_justify: Justify
-  - flex_align: Align
-  - flex_gap: Gap
-  - flex_item: Flex Item
-  - flex_item_align_self: Flex Item - Align Self
-
-
-
-
-  react:
-  - flex_default: Default
-  - flex_inline: Inline
-  - flex_reverse: Reverse
-  - flex_wrap: Wrap
-  - flex_spacing: Spacing
-  - flex_justify: Justify
-  - flex_align: Align
-  - flex_gap: Gap
-  - flex_item_example: Flex Item
-  - flex_item_align_self: Flex Item - Align Self

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

@@ -1,10 +0,0 @@
-export { default as FlexDefault } from './_flex_default.jsx'
-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 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'
-export { default as FlexItemAlignSelf } from './_flex_item_align_self.jsx'

data/app/pb_kits/playbook/pb_form/docs/_description.md

@@ -1,6 +0,0 @@
-The `form` kit provides consumers with a convenient, consistently styled `<form>` wrapper.
-
-### Form Helpers
-
-This kit uses rails `form_with` with our custom builder to render forms using other kits such as text_input, select, and typeahead to name a few. Doing so provides UI consistency within forms and makes adding a form to your page easier.
-

data/app/pb_kits/playbook/pb_form/docs/_footer.md

@@ -1,2 +0,0 @@
-### Things to Avoid
-Avoid using a form without validation if fields are required and using  with  validation if not required.