playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb

@@ -1,13 +0,0 @@
-<%= pb_rails("form_pill", props: {
-   name: "Anna Black",
-   avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-   size: "small",
-}) %>
-
-<br />
-<br />
-
-<%= pb_rails("form_pill", props: {
-   name: "Anna Black",
-   size: "small",
-}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import FormPill from '../_form_pill'
-
-const FormPillSize = (props) => {
-  return (
-
-    <div>
-      <FormPill
-          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-          name="Anna Black"
-          size="small"
-          {...props}
-      />
-      <br />
-      <br />
-      <FormPill
-          name="Anna Black"
-          size="small"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default FormPillSize

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("form_pill", props: { text: "this is a tag" }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import FormPill from '../_form_pill'
-
-const FormPillDefault = (props) => {
-  return (
-    <div>
-      <FormPill
-          onClick={() => {
-alert('Click!')
-}}
-          text="this is a tag"
-          {...props}
-      />
-    </div>
-  )
-}
-export default FormPillDefault

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb

@@ -1,11 +0,0 @@
-<%= pb_rails("form_pill", props: {
-   name: "Anna Black",
-   avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-}) %>
-
-<br />
-<br />
-
-<%= pb_rails("form_pill", props: {
-   name: "Anna Black",
-}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import FormPill from '../_form_pill'
-
-const FormPillDefault = (props) => {
-  return (
-
-    <div>
-      <FormPill
-          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-          name="Anna Black"
-          onClick={() => alert('Click!')}
-          {...props}
-      />
-      <br />
-      <br />
-      <FormPill
-          name="Anna Black"
-          onClick={() => alert('Click!')}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default FormPillDefault

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

@@ -1,14 +0,0 @@
-examples:
-
-  rails:
-  - form_pill_user: Form Pill User
-  - form_pill_size: Form Pill Size
-  - form_pill_tag: Form Pill Tag
-  - form_pill_example: Example
-
-
-  react:
-  - form_pill_user: Form Pill User
-  - form_pill_size: Form Pill Size
-  - form_pill_tag: Form Pill Tag
-  - form_pill_example: Example

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

@@ -1,5 +0,0 @@
-export { default as FormPillUser } from './_form_pill_user.jsx'
-export { default as FormPillSize } from './_form_pill_size.jsx'
-export { default as FormPillTag } from './_form_pill_tag.jsx'
-export { default as FormPillExample } from './_form_pill_example.jsx'
-

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb

@@ -1,12 +0,0 @@
-<% data = [
-  {
-    name: 'Name',
-    value: 67,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-colors",
-  chart_data: data,
-  colors: ['data-7']
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { Gauge } from '../../'
-
-const data = [
-  { name: 'Name', value: 67 },
-]
-
-const GaugeColors = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-colors"
-        {...props}
-        colors={['data-7']}
-    />
-  </div>
-)
-
-export default GaugeColors

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-Pass the prop `colors` and use **ONE** desired value `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb

@@ -1,32 +0,0 @@
-<%= pb_rails("flex", props: {wrap: true, padding: "xl", gap: "sm"}) do %>
-  <%= pb_rails("flex/flex_item", props: {flex: 1, grow: true }) do %>
-    <%= pb_rails("card", props: {max_width: "xs", padding: "md", }) do %>
-      <%= pb_rails("title", props: {padding_bottom: "sm", size: 4, text: "Abandoned Calls" })%>
-      <%= pb_rails("flex", props: {align: "stretch"}) do %>
-        <%= pb_rails("flex", props: {margin_right: "sm", orientation: "column"}) do %>
-          <%= pb_rails("body", props: {color: "light", padding_bottom: "sm",text: "Total Abandoned"}) %>
-          <%= pb_rails("flex", props: {align: "baseline", padding_bottom: "sx"}) do %>
-            <%= pb_rails("title", props: {size: 1, text: "39"})%>
-            <%= pb_rails("title", props: {color: "light", size: 3, text: "calls"}) %>
-          <% end %>
-          <%= pb_rails("caption", props: {size: "xs", text: "of 390" }) %>
-        <%end %>
-        <%= pb_rails("section_separator", props: {align_self: "stretch", margin_right: "sm", orientation: "vertical" }) %>
-        <%= pb_rails("flex", props: {orientation: "column", wrap: true}) do %>
-          <%= pb_rails("body", props: {color: "light", text: "% Abandoned"}) %>
-          <%= pb_rails("flex", props: {wrap: true}) do %>
-            <%= pb_rails("flex/flex_item", props: {fixed_size: "150px", overflow: "hidden", shrink: true}) do %>
-              <%= pb_rails("gauge", props: {
-                chart_data: [{ name: "Name", value: 10 }],
-                disable_animation: true,
-                height: '150',
-                id: "gauge-complex",
-                suffix: "%"
-              }) %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <%end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -1,101 +0,0 @@
-import React from "react";
-import {
-  Title,
-  Card,
-  Gauge,
-  Flex,
-  FlexItem,
-  SectionSeparator,
-  Body,
-  Caption,
-} from "../..";
-
-const data = [{ name: "Name", value: 10 }];
-
-const GaugeComplex = (props) => (
-  <Flex
-      gap="sm"
-      padding="xl"
-      wrap
-  >
-    <FlexItem
-        flex={1}
-        grow
-    >
-      <Card
-          maxWidth="xs"
-          padding="md"
-      >
-        <Title
-            paddingBottom="sm"
-            size={4}
-            text="Abandoned Calls"
-        />
-        <Flex align="stretch">
-          <Flex
-              marginRight="sm"
-              orientation="column"
-          >
-            <Body
-                color="light"
-                paddingBottom="sm"
-                text="Total Abandoned"
-            />
-            <Flex
-                align="baseline"
-                paddingBottom="xs"
-            >
-              <Title
-                  size={1}
-                  text="39"
-              />
-              <Title
-                  color="light"
-                  size={3}
-                  text="calls"
-              />
-            </Flex>
-            <Caption
-                size="xs"
-                text="of 390"
-            />
-          </Flex>
-
-          <SectionSeparator
-              alignSelf="stretch"
-              marginRight="sm"
-              orientation="vertical"
-          />
-
-          <Flex
-              orientation="column"
-              wrap
-          >
-              <Body
-                  color="light"
-                  text="% Abandoned"
-               />
-            <Flex wrap>
-              <FlexItem
-                  fixedSize="150px"
-                  overflow="hidden"
-                  shrink
-              > 
-                <Gauge
-                    chartData={data}
-                    disableAnimation
-                    height="150"
-                    id="gauge-complex"
-                    suffix="%"
-                    {...props}
-                />
-               </FlexItem>
-            </Flex>  
-          </Flex>
-        </Flex>
-      </Card>
-    </FlexItem>
-  </Flex>
-);
-
-export default GaugeComplex;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md

@@ -1 +0,0 @@
-We are able to wrap our Gauge kits within multiple other Flex and Card components.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb

@@ -1,11 +0,0 @@
-<% data = [
-  {
-    name: 'Name',
-    value: 45,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-default",
-  chart_data: data,
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { Gauge } from '../../'
-
-const data = [
-  { name: 'Name', value: 45 },
-]
-
-const GaugeDefault = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-default"
-        {...props}
-    />
-  </div>
-)
-
-export default GaugeDefault

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb

@@ -1,12 +0,0 @@
-<% data = [
-  {
-    name: 'Participants',
-    value: 84,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-disable-animation",
-  chart_data: data,
-  disable_animation: true,
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { Gauge } from '../../'
-
-const data = [
-  { name: 'Participants', value: 84 },
-]
-
-const GaugeDisableAnimation = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        disableAnimation
-        id="gauge-disable-animation"
-        {...props}
-    />
-  </div>
-)
-
-export default GaugeDisableAnimation

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb

@@ -1,14 +0,0 @@
-<% data = [
-  {
-    name: 'Capacity',
-    value: 75,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "full-circle",
-  chart_data: data,
-  full_circle: true,
-  title: "Seating Capacity",
-  suffix: "%"
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { Gauge } from '../../'
-
-const data = [
-  { name: 'Capacity', value: 75 },
-]
-
-const GaugeFullCircle = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        fullCircle
-        id="gauge-full-circle"
-        suffix="%"
-        title="Seating Capacity"
-        {...props}
-    />
-  </div>
-)
-
-export default GaugeFullCircle

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb

@@ -1,15 +0,0 @@
-<%= pb_rails("gauge", props: {
-  id: "gauge-height-px",
-  chart_data: [{ name: "Pixels", value: 400 }],
-  height: '400',
-  title: "Fixed Height in Pixels",
-  suffix: "px"
-}) %>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-height-percent",
-  chart_data: [{ name: "Percentage", value: 45 }],
-  height: '45%',
-  title: "Height as Percentage of Width",
-  suffix: "%"
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { Gauge } from '../../'
-
-const GaugeHeight = (props) => (
-  <div>
-    <Gauge
-        chartData={[ { name: 'Pixels', value: 400 } ]}
-        height="400"
-        id="gauge-height-px"
-        suffix="px"
-        title="Fixed Height in Pixels"
-        {...props}
-    />
-    <Gauge
-        chartData={[ { name: 'Percentage', value: 45 } ]}
-        height="45%"
-        id="gauge-height-percent"
-        suffix="%"
-        title="Height as Percentage of Width"
-        {...props}
-    />
-  </div>
-)
-
-export default GaugeHeight

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -1,43 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Gauge } from '../../'
-
-const GaugeLiveData = (props) => {
-  const [value, setValue] = useState(50)
-  const [name, setName] = useState('Name')
-
-  const updateValue = () => {
-    setValue(Math.floor(Math.random() * 100))
-  }
-  const updateName = () => {
-    let index = namesArray.indexOf(name)
-    if (namesArray.indexOf(name) == 5) {
-      index = 0
-    } else {
-      index += 1
-    }
-    setName(namesArray[index])
-  }
-  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
-
-  return (
-    <div>
-      <Button
-          onClick={updateValue}
-          text="Update Value"
-          {...props}
-      />
-      <Button
-          onClick={updateName}
-          text="Update Name"
-          {...props}
-      />
-      <Gauge
-          chartData={[{ name: name, value: value }]}
-          id="gauge-live-data"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default GaugeLiveData

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb

@@ -1,15 +0,0 @@
-<% data = [
-  {
-    name: 'Rating',
-    value: 4.5,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-min-max",
-  chart_data: data,
-  min: 0,
-  max: 5,
-  show_labels: true,
-  title: "Product Rating"
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { Gauge } from '../../'
-
-const data = [{
-  name: 'Rating', value: 4.5,
-}]
-
-const GaugeMinMax = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-min-max"
-        max={5}
-        min={0}
-        showLabels
-        title="Product Rating"
-        {...props}
-    />
-  </div>
-)
-
-export default GaugeMinMax

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.md

@@ -1 +0,0 @@
-### Min defaults to 0, Max to 100.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb

@@ -1,27 +0,0 @@
-<%= pb_rails("flex", props: {wrap: true, align: "center"}) do %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("gauge", props: {
-        id: "gauge-sizing4",
-        chart_data: [{ name: "Point 1", value: 100 }],
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("gauge", props: {
-        id: "gauge-sizing3",
-        chart_data: [{ name: "Point 2", value: 75 }],
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("gauge", props: {
-        id: "gauge-sizing2",
-        chart_data: [{ name: "Point 3", value: 50 }],
-      }) %>
-  <% end %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px", overflow: "hidden", shrink: true }) do %>
-      <%= pb_rails("gauge", props: {
-        id: "gauge-sizing1",
-        height: '100%',
-        chart_data: [{ name: "Point 4", value: 25 }],
-      }) %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -1,64 +0,0 @@
-import React from 'react'
-import { Flex, FlexItem, Gauge } from '../../'
-
-const GaugeSizing = (props) => (
-  <div>
-    <Flex
-        align="center"
-        wrap
-        {...props}
-    >
-      <FlexItem
-          fixedSize="400px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <Gauge
-            chartData={[ { name: 'Point 1', value: 100 } ]}
-            id="gauge-sizing4"
-            {...props}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="300px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <Gauge
-            chartData={[ { name: 'Point 2', value: 75 } ]}
-            id="gauge-sizing3"
-            {...props}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="200px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <Gauge
-            chartData={[ { name: 'Point 3', value: 50 } ]}
-            id="gauge-sizing2"
-            {...props}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="125px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <Gauge
-            chartData={[ { name: 'Point 4', value: 25 } ]}
-            height="100%"
-            id="gauge-sizing1"
-            {...props}
-        />
-      </FlexItem>
-    </Flex>
-  </div>
-)
-
-export default GaugeSizing

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md

@@ -1,2 +0,0 @@
-### Gauge resizes dynamically to fit whatever element it's placed within.
-#### Note: set `overflow` to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb

@@ -1,14 +0,0 @@
-<% data = [
-  {
-    name: 'Score',
-    value: 780,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-title",
-  chart_data: data,
-  min: 300,
-  max: 850,
-  title: "Credit Score",
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { Gauge } from '../../'
-
-const data = [
-  { name: 'Score', value: 780 },
-]
-
-const GaugeTitle = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-title"
-        max={850}
-        min={300}
-        title="Credit Score"
-        {...props}
-    />
-  </div>
-)
-
-export default GaugeTitle