playbook_ui 7.14.0.pre.alpha1 → 7.14.0

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb

@@ -1,4 +0,0 @@
-<%= pb_rails("distribution_bar", props: {
-  widths: [4,5,3],
-  colors: ["data_7", "data_1", "data_6"]
-}) %>

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import DistributionBar from '../_distribution_bar.jsx'
-
-const DistributionBarCustomColors = (props) => {
-  return (
-    <React.Fragment>
-      <div>
-        <DistributionBar
-            colors={['data_7', 'data_1', 'data_6']}
-            widths={[4, 5, 3]}
-            {...props}
-        />
-      </div>
-    </React.Fragment>
-  )
-}
-
-export default DistributionBarCustomColors

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +0,0 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.

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

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

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

@@ -1,7 +0,0 @@
-##### Prop
-
-*ATTENTION* - the vertical prop will be deprecated & renamed in the future. 
-
-* **Deprecated Prop**: `vertical` | **Type**: String | **Values**: top | center | bottom | stretch | baseline | none
-
-* **New Prop**: `align` | **Type**: String | **Values**: start | center | end | stretch | baseline | none

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

@@ -1,33 +0,0 @@
-<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
-<br/>
-<div class="flex-doc-example">
-  <%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
-   <%40.times do |i|%>
-    <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
-   <% end %>
-  <% end %>
-</div>
-
-<br/><br/>
-<%= pb_rails("title", props: {size: 4, text: "Column Gap"}) %>
-<br/>
-<div class="flex-doc-example">
-  <%= pb_rails("flex", props:{ column_gap: "lg"}) 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: "Row Gap"}) %>
-<br/>
-<div class="flex-doc-example">
-  <%= pb_rails("flex", props:{ orientation: "column", row_gap: "xl"}) 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_gap.jsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import { Flex, FlexItem } from  '../../'
-
-const FlexGap = (props) => {
-  const count = () => {
-    const array = []
-    for (let i = 0; i < 40; i++) {
-      array.push(i)
-    }
-    return array
-  }
-
-  return (
-    <>
-      <div className="flex-doc-example">
-        <Flex
-            gap="xs"
-            wrap
-            {...props}
-        >
-          {count().map((v, key) => (
-            <FlexItem key={key}>
-              {v}
-            </FlexItem>
-            ))}
-        </Flex>
-      </div>
-
-      <br />
-
-      <div className="flex-doc-example">
-        <Flex
-            columnGap="lg"
-            {...props}
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem>
-            {'3'}
-          </FlexItem>
-          <FlexItem>
-            {'4'}
-          </FlexItem>
-        </Flex>
-      </div>
-      <br />
-      <div className="flex-doc-example">
-        <Flex
-            orientation="column"
-            rowGap="xl"
-            {...props}
-        >
-          <FlexItem>
-            {'1'}
-          </FlexItem>
-          <FlexItem>
-            {'2'}
-          </FlexItem>
-          <FlexItem>
-            {'3'}
-          </FlexItem>
-          <FlexItem>
-            {'4'}
-          </FlexItem>
-        </Flex>
-      </div>
-    </>
-  )
-}
-
-export default FlexGap

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

@@ -1,9 +0,0 @@
-##### Prop
-
-*  `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xs | sm | md | lg | xl | none
-
-- Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
-
-- Setting the row_gap || rowGap prop creates space between rows in a flex container.
-
-- Setting the column_gap || columnGap prop creates space between columns in a flex container.

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

@@ -1,49 +0,0 @@
-<%= pb_rails("title", props: {size: 4, text: "Grow"}) %>
-<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>

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

@@ -1,11 +0,0 @@
-##### Props
-
-*  `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 
-
-- 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

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

@@ -1,113 +0,0 @@
-import React from 'react'
-import { Flex, FlexItem, Title } from  '../../'
-
-const FlexItemExample = (props) => {
-  return (
-    <>
-      <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>
-    </>
-  )
-}
-
-export default FlexItemExample

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

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