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

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.html.erb

@@ -0,0 +1,62 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475]
+}, {
+    name: 'Manufacturing',
+    data: [4434]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387]
+}, {
+    name: 'Project Development',
+    data: [3227]
+}, {
+    name: 'Other',
+    data: [1111]
+}] %>
+
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id:"legend-position-bar",
+    y_axis_min: 0,
+    x_axis_categories:['Jan'],
+    title: 'Alignment of Legend',
+    legend: true,
+    align: 'right',
+    vertical_align: 'top',
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id:"legend-position-bar-1",
+    y_axis_min: 0,
+    x_axis_categories:['Jan'],
+    title: 'Layout of Legend',
+    legend: true,
+    layout: 'vertical',
+    padding_top: "sm",
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id:"legend-position-bar-2",
+    y_axis_min: 0,
+    x_axis_categories:['Jan'],
+    title: 'Offset of Legend',
+    legend: true,
+    layout: "vertical",
+    x: 100,
+    y: 10,
+    padding_top: "sm",
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { BarGraph, Title } from '../..'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475],
+}, {
+  name: 'Manufacturing',
+  data: [4434],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387],
+}, {
+  name: 'Project Development',
+  data: [3227],
+}, {
+  name: 'Other',
+  data: [1111],
+}]
+
+const BarGraphLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <BarGraph
+        align='right'
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position-bar"
+        legend
+        paddingBottom="sm"
+        title="Alignment of Legend"
+        verticalAlign="top"
+        xAxisCategories={['Jan']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position-bar-1"
+        layout="vertical"
+        legend
+        paddingBottom="sm"
+        paddingTop="sm"
+        title="Layout of Legend"
+        xAxisCategories={['Jan']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position-bar-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        xAxisCategories={['Jan']}
+        y={10}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphLegendPosition

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md

@@ -0,0 +1,17 @@
+##### Prop
+
+`align` **Type**: String | **Values**: left | center | right (defaults to center)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
+`x` **Type**: Number (defaults to 0)
+`y` **Type**: Number (defaults to 0)
+
+- 
+
+- `layout` determines the position of the legend items
+`layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+- `x` offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
+
+
+- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.html.erb

@@ -0,0 +1,20 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}, {
+    type: 'spline',
+    name: 'Trend Line',
+    data: [1975, 600, 2500, 924, 500],
+    color: '#F9BB00',
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-spline",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    subtitle: 'Source: thesolarfoundation.com',
+    title: 'Bar Graph with Spline',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  type: 'spline',
+  name: 'Trend Line',
+  data: [1975, 600, 2500, 924, 500],
+  color: '#F9BB00',
+}]
+
+const BarGraphSpline = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-spline"
+        legend
+        title="Bar Graph with Spline"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphSpline

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.md

@@ -0,0 +1,2 @@
+A spline can be added by including a separate chart data with the `type: 'spline'` attribute.
+A color can also be specified for the spline.

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

@@ -0,0 +1,3 @@
+Bar graphs are used to compare data. Bar graphs are not typically used to show percentages. The default height of bar graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+
+For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml

@@ -0,0 +1,20 @@
+examples:
+
+  rails:
+  - bar_graph_default: Default
+  - bar_graph_legend: Legend
+  - bar_graph_legend_position: Legend Position
+  - bar_graph_legend_non_clickable: Legend Non Clickable
+  - bar_graph_height: Height
+  - bar_graph_spline: Spline
+  - bar_graph_colors: Color Overrides
+
+
+  react:
+  - bar_graph_default: Default
+  - bar_graph_legend: Legend
+  - bar_graph_legend_position: Legend Position
+  - bar_graph_legend_non_clickable: Legend Non Clickable
+  - bar_graph_height: Height
+  - bar_graph_spline: Spline
+  - bar_graph_colors: Color Overrides

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

@@ -0,0 +1,7 @@
+export { default as BarGraphDefault } from './_bar_graph_default.jsx'
+export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
+export { default as BarGraphLegendPosition } from './_bar_graph_legend_position.jsx'
+export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_clickable.jsx'
+export { default as BarGraphHeight } from './_bar_graph_height.jsx'
+export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
+export { default as BarGraphColors } from './_bar_graph_colors.jsx'

data/app/pb_kits/playbook/pb_body/docs/_body_articles.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("body", props: {
+  line_height: "loose",
+  max_width: "md"
+}) do %>
+    <p>Infuse your life with action. Don't wait for it to happen. Make it happen. Make your own future. Make your own hope. Make your own love. And whatever your beliefs, honor your creator, not by passively waiting for grace to come down from upon high, but by doing what you can to make grace happen... yourself, right now, right down here on Earth.</p>
+    <br />
+    <p>- Bradley Whitford</p>
+<% end %>

data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Body } from '../..'
+
+const BodyBlock = (props) => {
+    return (
+        <>
+            <Body
+                lineHeight='loose'
+                maxWidth='md'
+                {...props}
+            >
+                <p>{`Infuse your life with action. Don't wait for it to happen. Make it happen. Make your own future. Make your own hope. Make your own love. And whatever your beliefs, honor your creator, not by passively waiting for grace to come down from upon high, but by doing what you can to make grace happen... yourself, right now, right down here on Earth.`}</p>
+                <br />
+                <p>{`- Bradley Whitford`}</p>
+            </Body>
+        </>
+    )
+}
+
+export default BodyBlock

data/app/pb_kits/playbook/pb_body/docs/_body_articles.md

@@ -0,0 +1 @@
+Using two global props can greatly improve the readability of articles and even forms. Set Max Width to `md`, and Line Height to `loose`.

data/app/pb_kits/playbook/pb_body/docs/_body_block.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("body") do %>
+  I am body kit
+<% end %>

data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Body } from '../../'
+
+const BodyBlock = (props) => {
+  return (
+    <div>
+      <Body {...props}>
+        {'I am a body kit'}
+      </Body>
+    </div>
+  )
+}
+
+export default BodyBlock

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb

@@ -0,0 +1,28 @@
+<%= pb_rails("body", props: {
+  text: "I am a body kit"
+}) %>
+
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Light)",
+  color: "light"
+}) %>
+
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Lighter)",
+  color: "lighter"
+}) %>
+
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Link)",
+  color: "link"
+}) %>
+
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Error)",
+  color: "error"
+}) %>
+
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Success)",
+  color: "success"
+}) %>

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Body } from '../../'
+
+const BodyLight = (props) => {
+  return (
+    <div>
+      <Body
+          text="I am a body kit (Default)"
+          {...props}
+      />
+      <Body
+          color="light"
+          text="I am a body kit (Light)"
+          {...props}
+      />
+      <Body
+          color="lighter"
+          text="I am a body kit (Lighter)"
+          {...props}
+      />
+      <Body
+          color="link"
+          text="I am a body kit (Link)"
+          {...props}
+      />
+      <Body
+          color="error"
+          text="I am a body kit (Error)"
+          {...props}
+      />
+      <Body
+          color="success"
+          text="I am a body kit (Success)"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default BodyLight

data/app/pb_kits/playbook/pb_body/docs/_body_light.md

@@ -0,0 +1,6 @@
+##### Prop
+This kit uses `default` color by default, and can be replaced with colors below:
+
+* `light` `lighter` `success` `error` `link`
+
+- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it

data/app/pb_kits/playbook/pb_body/docs/_body_styled.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("body") do %>
+    <b>This text is using the <%="<b>"%> tag</b>
+    <br />
+    <br />
+    <strong>This text is using the <%="<strong>"%> tag</strong>
+    <br />
+    <br />
+    <a href="#">This text is using the <%="<a>"%> tag</a>
+    <br />
+    <br />
+    <i>This text is using an <%="<i>"%> tag</i>
+    <br />
+    <br />
+    This <em>word</em> is using an <%="<em>"%> tag.
+    <br />
+    <br />
+    <small>This text is using a <%="<small>"%> tag.</small>
+    <br />
+    <br />
+    <u>This text is using a <%="<u>"%> tag.</u>
+<% end %>

data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Body } from '../..'
+
+const BodyStyled = (props) => {
+  return (
+    <>
+      <Body {...props}>
+        <b>{"This text is using the <b> tag"}</b>
+        <br />
+        <br />
+        <strong>{"This text is using the <strong> tag"}</strong>
+        <br />
+        <br />
+        <a href="#">{"This text is using the <a> tag"}</a>
+        <br />
+        <br />
+        <i>{"This text is using an <i> tag"}</i>
+        <br />
+        <br />
+        {"This "}<em>word</em>{" is using an <em> tag."}
+        <br />
+        <br />
+        <small>{"This text is using a <small> tag."}</small>
+        <br />
+        <br />
+        <u>{"This text is using a <u> tag."}</u>
+      </Body>
+    </>
+  )
+}
+
+export default BodyStyled

data/app/pb_kits/playbook/pb_body/docs/_body_styled.md

@@ -0,0 +1 @@
+Playbook styles the `b`, `strong`, `a`. `i`, `em`, `small` and `u` tags within the body kit to match Playbook's design system.

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

@@ -0,0 +1,2 @@
+Default text style for paragraphs. Follow hiearchy when using "light" or "lighter" variants to deemphasize text — default style should be followed by "light" followed by "lighter".
+Use "success" and "error" for status. View footer notes for things to avoid.

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

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use positive and negative variants with each other. Use <a href="https://playbook.powerapp.cloud/kits/pill">Pill Kit</a> to show status if the text is short. Otherwise, use positive and negative variants and use them sparingly.

data/app/pb_kits/playbook/pb_body/docs/example.yml

@@ -0,0 +1,11 @@
+examples:
+  rails:
+  - body_light: Default
+  - body_block: Block
+  - body_articles: Best settings for articles
+  - body_styled: Styled tags
+  react:
+  - body_light: Default
+  - body_block: Block
+  - body_articles: Best settings for articles
+  - body_styled: Styled tags

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

@@ -0,0 +1,4 @@
+export { default as BodyLight } from './_body_light.jsx'
+export { default as BodyBlock } from './_body_block.jsx'
+export { default as BodyStyled } from './_body_styled.jsx'
+export { default as BodyArticles } from './_body_articles.jsx'

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.html.erb

@@ -0,0 +1,17 @@
+
+<div>
+  <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" } }) do%>
+    <%= pb_rails("icon", props: { icon: "home"}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/" }) do %> 
+      <%= pb_rails("title", props: { size: 4, text: "Home", tag: "span" }) %>
+     <%end%>
+     <%= pb_rails("icon", props: { icon: 'users'}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/users" }) do %> 
+      <%= pb_rails("title", props: { size: 4, text: "Users", tag: "span" }) %>
+     <%end%>
+     <%= pb_rails("icon", props: { icon: "user"}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item") do %> 
+      <%= pb_rails("title", props: { size: 4, text: "User", tag: "span" }) %>
+     <%end%>
+    <%end%>
+</div>

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import BreadCrumbs from '../_bread_crumbs'
+import { Icon, Title } from '../../'
+import BreadCrumbItem from '../_bread_crumb_item'
+
+const Link = (props) => <BreadCrumbItem {...props} />
+const BreadCrumbsDefault = (props) => {
+  return (
+    <BreadCrumbs
+        text="+1"
+        {...props}
+    >
+      <Icon
+          icon="home"
+          size="1x"
+      />
+      <BreadCrumbItem
+          {...props}
+          href="/home"
+      >
+        <Title
+            size="4"
+            tag="span"
+            text="Home"
+        />
+      </BreadCrumbItem>
+      <Icon
+          icon="users"
+          size="1x"
+      />
+      <Link
+          {...props}
+          href="/users"
+      >
+        <Title
+            size="4"
+            tag="span"
+            text="Users"
+        />
+      </Link>
+      <Icon
+          icon="user"
+          size="1x"
+      />
+      <Link {...props}>
+        <Title
+            size="4"
+            tag="span"
+            text="User"
+        />
+      </Link>
+    </BreadCrumbs>
+  )
+}
+
+export default BreadCrumbsDefault

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

@@ -0,0 +1 @@
+BreadCrumbs can be used for keeping a user aware of their route location.

data/app/pb_kits/playbook/pb_bread_crumbs/docs/example.yml

@@ -0,0 +1,7 @@
+examples:
+  rails:
+  - bread_crumbs_default: Default
+ 
+  react:
+  - bread_crumbs_default: Default
+ 

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

@@ -0,0 +1 @@
+export { default as BreadCrumbsDefault } from './_bread_crumbs_default.jsx'

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"}) %>

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Button } from '../../'
+
+const ButtonAccessibility = (props) => (
+  <div>
+    <Button
+        aria={{ label: 'Go to Google' }}
+        link="https://google.com"
+        tabIndex={0}
+        tag="a"
+        text="Button with ARIA"
+        {...props}
+    />
+  </div>
+)
+
+export default ButtonAccessibility

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("button") do %>
+  <%= pb_rails("pill", props: { text:"5", fixed_width: true, margin_right: "xs", variant:"info" }) %>
+  <span>Button with Block Content</span>
+<% end %>

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Button, Pill } from "../../";
+
+const ButtonBlockContent = (props) => (
+  <div>
+    <Button fixedWidth 
+        {...props}
+        tabIndex={0}
+    >
+      <Pill marginRight="xs"
+          text="5"
+          variant="info"
+      />
+      <span>Button with Block Content</span>
+    </Button>
+  </div>
+);
+
+export default ButtonBlockContent;

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md

@@ -0,0 +1 @@
+Used when the user wants to display custom content within a button instead of passing in text or props to the kit itself. In this example the button is using the Pill kit and a `<span>` element inside the button.

data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("button", props: { text: "Button Primary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button Link", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button Disabled", disabled: true, margin_right: "lg" }) %>
+