playbook_ui_docs 15.4.0.pre.alpha.testingseparation12395 → 15.4.0.pre.rc.0

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.jsx

@@ -1,113 +0,0 @@
-import React from 'react'
-
-import Nav from '../_nav'
-import NavItem from '../_item'
-import Caption from '../../pb_caption/_caption'
-
-const HorizontalNavDisabled = (props) => {
-  return (
-    <>
-    <Caption marginBottom="sm">Default Variant</Caption>
-    <Nav
-        link="#"
-        orientation="horizontal"
-        {...props}
-    >
-      <NavItem
-          link="#"
-          text="About"
-          {...props}
-      />
-      <NavItem
-          active
-          link="#"
-          text="Case Studies"
-          {...props}
-      />
-      <NavItem
-          disabled
-          link="#"
-          text="Service"
-          {...props}
-      />
-      <NavItem
-          link="#"
-          text="Contacts"
-          {...props}
-      />
-      </Nav>
-      <Caption  
-          marginBottom="sm" 
-          marginTop="lg"
-      >
-        Subtle Variant
-      </Caption>
-      <Nav
-          link="#"
-          orientation="horizontal"
-          variant="subtle"
-          {...props}
-      >
-        <NavItem
-            link="#"
-            text="About"
-            {...props}
-        />
-        <NavItem
-            active
-            link="#"
-            text="Case Studies"
-            {...props}
-        />
-        <NavItem
-            disabled
-            link="#"
-            text="Service"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="Contacts"
-            {...props}
-        />
-      </Nav>
-      <Caption  
-          marginBottom="sm" 
-          marginTop="lg"
-      >
-        Bold Variant
-      </Caption>
-      <Nav
-          link="#"
-          orientation="horizontal"
-          variant="bold"
-          {...props}
-      >
-        <NavItem
-            link="#"
-            text="About"
-            {...props}
-        />
-        <NavItem
-            active
-            link="#"
-            text="Case Studies"
-            {...props}
-        />
-        <NavItem
-            disabled
-            link="#"
-            text="Service"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="Contacts"
-            {...props}
-        />
-      </Nav>
-    </>
-  )
-}
-
-export default HorizontalNavDisabled

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.md

@@ -1 +0,0 @@
-Use the `disabled` prop on a `navItem`/`nav_item` within a horizontal nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item. 

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.html.erb

@@ -1,30 +0,0 @@
-<%= pb_rails("flex", props: { justify: "between" }) do %>
-  <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
-    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
-    <%= pb_rails("nav") do %>
-      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-    <% end %>
-  <% end %>
-    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
-    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Subtle Variant" }) %>
-    <%= pb_rails("nav", props:{variant: "subtle"}) do %>
-      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-    <% end %>
-  <% end %>
-    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
-    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Bold Variant" }) %>
-    <%= pb_rails("nav", props:{variant: "bold"}) do %>
-      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-    <% end %>
-  <% end %>
-  
-<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.jsx

@@ -1,117 +0,0 @@
-import React from 'react'
-
-import Nav from '../_nav'
-import NavItem from '../_item'
-import Caption from '../../pb_caption/_caption'
-import Flex from '../../pb_flex/_flex'
-
-const VerticalNavDisabled = (props) => {
-  return (
-    <Flex justify="between" 
-        wrap
-    >
-        <Flex orientation="column">
-            <Caption marginBottom="sm">Default Variant</Caption>
-            <Nav
-                link="#"
-                {...props}
-            >
-            <NavItem
-                link="#"
-                text="About"
-                {...props}
-            />
-            <NavItem
-                active
-                link="#"
-                text="Case Studies"
-                {...props}
-            />
-            <NavItem
-                disabled
-                link="#"
-                text="Service"
-                {...props}
-            />
-            <NavItem
-                link="#"
-                text="Contacts"
-                {...props}
-            />
-            </Nav>
-        </Flex>
-        <Flex orientation="column">
-            <Caption  
-                marginBottom="sm" 
-            >
-                Subtle Variant
-            </Caption>
-            <Nav
-                link="#"
-                variant="subtle"
-                {...props}
-            >
-            <NavItem
-                link="#"
-                text="About"
-                {...props}
-            />
-            <NavItem
-                active
-                link="#"
-                text="Case Studies"
-                {...props}
-            />
-            <NavItem
-                disabled
-                link="#"
-                text="Service"
-                {...props}
-            />
-            <NavItem
-                link="#"
-                text="Contacts"
-                {...props}
-            />
-            </Nav>
-        </Flex>
-        <Flex orientation="column">
-            <Caption  
-                marginBottom="sm" 
-            >
-                Bold Variant
-            </Caption>
-            <Nav
-                link="#"
-                variant="bold"
-                {...props}
-            >
-                <NavItem
-                    link="#"
-                    text="About"
-                    {...props}
-                />
-                <NavItem
-                    active
-                    link="#"
-                    text="Case Studies"
-                    {...props}
-                />
-                <NavItem
-                    disabled
-                    link="#"
-                    text="Service"
-                    {...props}
-                />
-                <NavItem
-                    link="#"
-                    text="Contacts"
-                    {...props}
-                />
-            </Nav>
-        </Flex>
-    </Flex>
-  )
-}
-
-export default VerticalNavDisabled

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.md

@@ -1 +0,0 @@
-Use the `disabled` prop on a `navItem`/`nav_item` within a vertical nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item. 

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.md

@@ -1 +0,0 @@
-In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.md

@@ -1,11 +0,0 @@
-Highcharts provides many options for customizing the legend display. This example showcases the following:
-
-`align` can be used to align the legend left, right or center (defaults to center)
-
-`verticalAlign` can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom
-
-`layout` determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal `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 alignment. Negative x moves it to the left, positive x moves it to the right (defaults to 0)
-
-`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down (defaults to 0)

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.md

@@ -1 +0,0 @@
-In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.md

@@ -1 +0,0 @@
-In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.md

@@ -1 +0,0 @@
-In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx

@@ -1,71 +0,0 @@
-import React, { useState } from "react";
-import PbReactPopover from "../_popover";
-import Body from "../../pb_body/_body";
-import Flex from "../../pb_flex/_flex";
-import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
-
-const PopoverAppendTo = (props) => {
-  const [showParentPopover, setShowParentPopover] = useState(false);
-  const [showSelectorPopover, setShowSelectorPopover] = useState(false);
-
-  const parentPopoverReference = (
-    <CircleIconButton
-        icon="info"
-        onClick={() => setShowParentPopover(!showParentPopover)}
-        variant="secondary"
-    />
-  );
-
-  const selectorPopoverReference = (
-    <CircleIconButton
-        icon="info"
-        onClick={() => setShowSelectorPopover(!showSelectorPopover)}
-        variant="secondary"
-    />
-  );
-
-  return (
-    <>
-      <Flex
-          marginBottom="md"
-          orientation="row"
-          vertical="center"
-          {...props}
-      >
-        <Body text="Click info for more details" />
-        &nbsp;
-        <PbReactPopover
-            appendTo="parent"
-            offset
-            placement="top"
-            reference={parentPopoverReference}
-            show={showParentPopover}
-            {...props}
-        >
-          {'I\'m a popover. I have been appended to my parent element.'}
-        </PbReactPopover>
-      </Flex>
-
-      <Flex
-          orientation="row"
-          vertical="center"
-          {...props}
-      >
-        <Body text="Click info for more details" />
-        &nbsp;
-        <PbReactPopover
-            appendTo=".kit-show-wrapper"
-            offset
-            placement="top"
-            reference={selectorPopoverReference}
-            show={showSelectorPopover}
-            {...props}
-        >
-          {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
-        </PbReactPopover>
-      </Flex>
-    </>
-  );
-};
-
-export default PopoverAppendTo;

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md

@@ -1 +0,0 @@
-By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.html.erb

@@ -1,63 +0,0 @@
-<% content = capture do %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
-        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
-    <% end %>
-<% end %>
-
-<%= pb_rails("table", props: { size: "sm" }) do %>
-  <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
-          <%= pb_rails("table/table_header", props: { text: ""}) %>
-       <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "11" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text_align: "right", html_options: { onclick: "toggleArrows()" }}) do %>
-            <%= pb_rails("icon", props: {id: "chevron-icon-down", icon: "chevron-down", fixed_width: true, color: "primary" }) %>
-            <%= pb_rails("icon", props: {id: "chevron-icon-up", icon: "chevron-up", fixed_width: true, color: "primary" }) %>
-          <% end %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-  <% end %>
-<% end %>
-
-<script>
-    const downArrow = document.getElementById("chevron-icon-down");
-    const upArrow = document.getElementById("chevron-icon-up");
-
-    upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
-
-    function toggleArrows() {
-        if (downArrow) {
-            downArrow.style.display = downArrow.style.display === 'none' ? 'inline-block' : 'none';
-        }
-        if (upArrow) {
-            upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
-        }
-    }
-</script>

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx

@@ -1,89 +0,0 @@
-import React, { useState } from 'react'
-import Table from '../_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
-
-const TableWithDynamicCollapsible = (props) => {
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleToggleArrows = () => {
-    setIsOpen(!isOpen)
-  }
-
-  const Content = () => {
-    return (
-      <Card
-          borderNone
-          borderRadius="none"
-          padding="md"
-          {...props}
-      >
-        <Body {...props}>Nested content inside a Table Row</Body>
-      </Card>
-    );
-  };
-
-  return (
-    <Table
-        size="sm"
-        {...props}
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Column 1'}</Table.Header>
-          <Table.Header>{'Column 2'}</Table.Header>
-          <Table.Header>{'Column 3'}</Table.Header>
-          <Table.Header>{'Column 4'}</Table.Header>
-          <Table.Header>{'Column 5'}</Table.Header>
-          <Table.Header>{''}</Table.Header>
-        </Table.Row>
-
-      </Table.Head>
-      <Table.Body>
-
-        <Table.Row collapsible
-            collapsibleContent={<Content />}
-            {...props}
-        >
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 1'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 2'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 3'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 4'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 5'}</Table.Cell>
-          <Table.Cell
-              htmlOptions={{ onClick: handleToggleArrows }}
-              textAlign="right"
-          >
-            {
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon={isOpen ? 'chevron-up' : 'chevron-down'}
-              />}
-          </Table.Cell>
-
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
-
-export default TableWithDynamicCollapsible

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md

@@ -1,4 +0,0 @@
-The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
-Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
-
-Follow this example to make the icons dynamic following the state of the collapsible.

data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md

@@ -1,3 +0,0 @@
-The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
-
-Follow this example to make the icons dynamic following the state of the collapsible.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb

@@ -1,64 +0,0 @@
-<%
-  grouped_options = [
-    {
-      label: "Warm Colors",
-      options: [
-        { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" },
-        { label: "Coral", value: "#FF7F50" },
-        { label: "Gold", value: "#FFD700" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" },
-        { label: "Navy", value: "#000080" },
-        { label: "Turquoise", value: "#40E0D0" }
-      ]
-    },
-    {
-      label: "Neutrals",
-      options: [
-        { label: "White", value: "#FFFFFF" },
-        { label: "Black", value: "#000000" },
-        { label: "Gray", value: "#808080" },
-        { label: "Beige", value: "#F5F5DC" },
-        { label: "Silver", value: "#C0C0C0" }
-      ]
-    },
-    {
-      label: "Earth Tones",
-      options: [
-        { label: "Brown", value: "#A52A2A" },
-        { label: "Olive", value: "#808000" },
-        { label: "Forest Green", value: "#228B22" },
-        { label: "Tan", value: "#D2B48C" },
-        { label: "Maroon", value: "#800000" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Lime", value: "#00FF00" },
-        { label: "Purple", value: "#800080" },
-        { label: "Indigo", value: "#4B0082" }
-      ]
-    }
-  ]
-%>
-<br />
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-custom-options",
-    options: grouped_options,
-    label: "Colors",
-    name: :foo,
-    placeholder: "Select a Color...",
-    is_multi: false
-  })
-%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx

@@ -1,70 +0,0 @@
-import React from 'react'
-
-import Typeahead from '../_typeahead'
-
-const groupedOptions = [
-  {
-    label: "Warm Colors",
-    options: [
-      { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" },
-        { label: "Coral", value: "#FF7F50" },
-        { label: "Gold", value: "#FFD700" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" },
-        { label: "Navy", value: "#000080" },
-        { label: "Turquoise", value: "#40E0D0" }
-      ]
-    },
-    {
-      label: "Neutrals",
-      options: [
-        { label: "White", value: "#FFFFFF" },
-        { label: "Black", value: "#000000" },
-        { label: "Gray", value: "#808080" },
-        { label: "Beige", value: "#F5F5DC" },
-        { label: "Silver", value: "#C0C0C0" }
-      ]
-    },
-    {
-      label: "Earth Tones",
-      options: [
-        { label: "Brown", value: "#A52A2A" },
-        { label: "Olive", value: "#808000" },
-        { label: "Forest Green", value: "#228B22" },
-        { label: "Tan", value: "#D2B48C" },
-        { label: "Maroon", value: "#800000" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Lime", value: "#00FF00" },
-        { label: "Purple", value: "#800080" },
-        { label: "Indigo", value: "#4B0082" }
-      ]
-    }
-  ]
-
-const TypeaheadCustomOptions = (props) => {
-  return (
-    <Typeahead
-        label="Colors"
-        options={groupedOptions}
-        placeholder="Select a Color..."
-        {...props}
-    />
-  )
-}
-
-export default TypeaheadCustomOptions
-

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.md

@@ -1 +0,0 @@
-Grouped options can be rendered via structuring the options in the way shown in the code snippet below.