playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -1,170 +0,0 @@
-/* eslint-disable react/jsx-handler-names */
-/* @flow */
-
-import React, { useState } from "react"
-import { Button, Dialog, Flex } from "../.."
-
-const useDialog = (visible = false) => {
-  const [opened, setOpened] = useState(visible)
-  const toggle = () => setOpened(!opened)
-  return [opened, toggle]
-
-}
-
-const DialogStatus = () => {
-  const [defaultAlertOpened, toggleDefaultAlert] = useDialog()
-  const [cautionAlertOpened, toggleCautionAlert] = useDialog()
-  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
-  const [infoAlertOpened, toggleInfoAlert] = useDialog()
-  const [successAlertOpened, toggleSuccessAlert] = useDialog()
-  const [errorAlertOpened, toggleErrorAlert] = useDialog()
-
-  const dialogs = [
-    {
-      size: "status_size",
-      status: "default",
-      text: "Text explaining why there is an alert",
-      title: "Are you sure?",
-      toggle: toggleDefaultAlert,
-      visible: defaultAlertOpened,
-      buttonOneText:"Yes, Action",
-      buttonTwoText: "No, Cancel"
-    },
-    {
-      size: "status_size",
-      status: "caution",
-      text: "This is the action you will be taking",
-      title: "Are you sure?",
-      toggle: toggleCautionAlert,
-      visible: cautionAlertOpened,
-      buttonOneText:"Yes, Action",
-      buttonTwoText: "No, Cancel"
-    },
-    {
-      size: "status_size",
-      status: "delete",
-      text: "You are about to delete ...",
-      title: "Delete",
-      toggle: toggleDeleteAlert,
-      visible: deleteAlertOpened,
-      buttonOneText:"Yes, Delete",
-      buttonTwoText: "No, Cancel"
-    },
-    {
-      size: "sm",
-      status: "info",
-      text: "Text explaining why there is an alert",
-      title: "Information",
-      toggle: toggleInfoAlert,
-      visible: infoAlertOpened,
-      buttonOneText:"Ok, Thanks!",
-    },
-    {
-      size: "sm",
-      status: "success",
-      text: "Text explaining what is successful",
-      title: "Success!",
-      toggle: toggleSuccessAlert,
-      visible: successAlertOpened,
-      buttonOneText: "Great!",
-    },
-    {
-      size: "sm",
-      status: "error",
-      text: "Text explaining the error",
-      title: "Error Message",
-      toggle: toggleErrorAlert,
-      visible: errorAlertOpened,
-      buttonOneText:"Oh no!",
-    },
-  ]
-
-  return (
-    <div>
-      <Flex 
-          rowGap="xs" 
-          wrap
-        >
-        <Button
-            marginRight="md"
-            onClick={toggleDefaultAlert}
-        >
-          {"Default Status"}
-        </Button>
-        <Button
-            marginRight="md"
-            onClick={toggleCautionAlert}
-        >
-          {"Caution Status"}
-        </Button>
-        <Button
-            marginRight="md"
-            onClick={toggleDeleteAlert}
-        >
-          {"Delete Status"}
-        </Button>
-        <Button
-            marginRight="md"
-            onClick={toggleInfoAlert}
-        >
-          {"Information Status"}
-        </Button>
-        <Button
-            marginRight="md"
-            onClick={toggleSuccessAlert}
-        >
-          {"Success Status"}
-        </Button>
-        <Button 
-            marginRight="md"
-            onClick={toggleErrorAlert}
-        >
-          {"Error Status"}
-        </Button>
-      </Flex>
-      <Flex>
-        {dialogs.map((dialog) => (
-          <Dialog
-              key={dialog.status}
-              onClose={dialog.toggle}
-              opened={dialog.visible}
-              size={dialog.size}
-              status={dialog.status}
-              text={dialog.text}
-              title={dialog.title}
-          >
-          <Dialog.Footer
-              paddingBottom="md"
-              paddingX="md"
-          >
-            <If condition={!dialog.buttonTwoText}>
-              <Button
-                  fullWidth
-                  onClick={dialog.toggle}
-              >
-              {dialog.buttonOneText}
-              </Button>
-            </If>
-            <If condition={dialog.buttonTwoText}>
-              <Button
-                  onClick={dialog.toggle}
-                  paddingRight="xl"
-              >
-              {dialog.buttonOneText}
-              </Button>
-              <Button
-                  onClick={dialog.toggle}
-                  variant="secondary"
-              >
-              {dialog.buttonTwoText}
-              </Button>
-            </If>
-          </Dialog.Footer>
-          </Dialog>
-        ))}
-      </Flex>
-    </div>
-  )
-}
-
-export default DialogStatus

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md

@@ -1,3 +0,0 @@
-The Dialog kit also offers customizable Status Alert options as seen here. 
-
-For the rails version of the kit, when using custom confirm and cancel buttons as shown in these examples, the 'cancel' button must be given a `close-dialog` data attribute with a value that is the same as the id given to the dialog itself. 

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

@@ -1,24 +0,0 @@
-examples:
-
-  rails:
-  - dialog_default: Simple
-  - dialog_compound_components: Complex
-  - dialog_sizes: Sizes
-  - dialog_scrollable: Scrollable
-  - dialog_should_close_on_overlay: Overlay Click
-  - dialog_status: Status Alert
-  - dialog_stacked_alert: Stacked Button Alert
-  - dialog_full_height: Full Height
-  - dialog_full_height_placement: Full Height Placement
-
-
-  react:
-  - dialog_default: Simple
-  - dialog_compound_components: Complex
-  - dialog_sizes: Sizes
-  - dialog_scrollable: Scrollable
-  - dialog_should_close_on_overlay: Overlay Click
-  - dialog_status: Status Alert
-  - dialog_stacked_alert: Stacked Button Alert
-  - dialog_full_height: Full Height
-  - dialog_full_height_placement: Full Height Placement

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

@@ -1,10 +0,0 @@
-export { default as DialogDefault } from './_dialog_default.jsx'
-export { default as DialogCompoundComponents } from './_dialog_compound_components.jsx'
-export { default as DialogSizes } from './_dialog_sizes.jsx'
-export { default as DialogScrollable } from './_dialog_scrollable.jsx'
-export { default as DialogSeparators } from './_dialog_separators.jsx'
-export { default as DialogShouldCloseOnOverlay } from './_dialog_should_close_on_overlay.jsx'
-export { default as DialogStatus } from './_dialog_status.jsx'
-export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
-export { default as DialogFullHeight } from './_dialog_full_height.jsx'
-export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'

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

@@ -1 +0,0 @@
-Can be used in the same way a pie chart can be used. By default, Distribution Bar comparatively represents data without numbers. To add numbers to this chart, you can use the Legend kit with prefix text.

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", "neutral"]
-}) %>

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'
-
-const DistributionBarCustomColors = (props) => {
-  return (
-    <React.Fragment>
-      <div>
-        <DistributionBar
-            colors={['data_7', 'data_1', 'neutral']}
-            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 and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.

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

@@ -1,9 +0,0 @@
-<%= pb_rails("distribution_bar", props: {
-  widths: [1,2,3,4,5,3,3,7]
-}) %>
-
-<br><br>
-<%= pb_rails("distribution_bar", props: {
-  widths: [1,2,3,4,5,3,3,7],
-  size: "sm"
-}) %>

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

@@ -1,26 +0,0 @@
-import React from 'react'
-import DistributionBar from '../_distribution_bar'
-
-const DistributionBarDefault = (props) => {
-  return (
-    <React.Fragment>
-      <div>
-        <DistributionBar
-            widths={[1, 2, 3, 4, 5, 3, 3, 7]}
-            {...props}
-        />
-      </div>
-      <br />
-      <br />
-      <div>
-        <DistributionBar
-            size="sm"
-            widths={[1, 2, 3, 4, 5, 3, 3, 7]}
-            {...props}
-        />
-      </div>
-    </React.Fragment>
-  )
-}
-
-export default DistributionBarDefault

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

@@ -1,11 +0,0 @@
-examples:
-  
-  rails:
-  - distribution_bar_default: Default
-  - distribution_bar_custom_colors: Custom Colors
-  
-  
-  react:
-  - distribution_bar_default: Default
-  - distribution_bar_custom_colors: Custom Colors
-  

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

@@ -1,2 +0,0 @@
-export { default as DistributionBarDefault } from './_distribution_bar_default.jsx'
-export { default as DistributionBarCustomColors } from './_distribution_bar_custom_colors.jsx'

data/app/pb_kits/playbook/pb_docs/kit_api.html.erb

@@ -1,311 +0,0 @@
-<% if !local_prop_data.present? %>
-  <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
-  <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
-    <%= pb_rails("card", props: { padding: "none" }) do %>
-      <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
-        <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
-          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true }) %>
-        <% end %>
-      <% end %>
-      <%= pb_rails("section_separator") %>
-      <%= pb_rails("card/card_body", props: {}) do %>
-        <%= pb_rails("table", props: {container: false, disable_hover: true }) do %>
-          <thead>
-            <tr>
-              <th>Props</th>
-              <th>Type</th>
-              <th>Values</th>
-            </tr>
-          </thead>
-          <tbody>
-            <% global_prop_data.each do |key, value|%>
-              <tr>
-                <td>
-                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
-                </td>
-                <td>
-                  <%= pb_rails("card", props: {
-                    classname: "card",
-                    padding: "xxs",
-                    background: "light",
-                    border_none: true,
-                    border_radius: "sm"
-                  })  do %>
-                    <%= pb_rails("body", props: {
-                      classname: "kearning"
-                    }) do %>
-                        <% if key =~ /^padding|^margin/ %>
-                            <%= "array" %>
-                        <% else %>
-                          <%= value[:type].to_s.downcase %>
-                        <% end %>
-                    <% end %>
-                  <% end %>
-                </td>
-                <td>
-                  <% if key =~ /^padding|^margin/ %>
-                  <% padding_margin_values.each do |item| %>
-                      <%= pb_rails("card", props: {
-                          flex_direction: "row",
-                          classname: "card",
-                          padding: "xxs",
-                          background: "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning"
-                          }) do %>
-                            <%= item %>
-                          <% end %>
-                        <% end %>
-                      <% end %>
-                  <% else %>
-                  <% if value[:values].present? %>
-                    <% value[:values].each do |item| %>
-                      <% if item != nil %>
-                        <%= pb_rails("card", props: {
-                          flex_direction: "row",
-                          classname: "card",
-                          padding: "xxs",
-                          background: "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning"
-                          }) do %>
-                            <%= item %>
-                          <% end %>
-                        <% end %>
-                      <% end %>
-                    <% end %>
-                  <% end %>
-                  <% end %>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        <% end %>
-      <% end %>
-    <% end %>
-  </div>
-<% else %>
-  <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
-    <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
-    <%= pb_rails("card", props: { padding: "none" }) do %>
-      <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
-        <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
-        <% if local_prop_data.present? %>
-          <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", active: true, id: "local-button-active", classname: "local-active" }) %>
-        <% end %>
-        <% if local_prop_data.present? %>
-          <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", id: "local-button", classname: "global-active" }) %>
-        <% end %>
-          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, id: "global-button-active", classname: "global-active" }) %>
-          <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", id: "global-button", classname: "local-active" }) %>
-        <% end %>
-      <% end %>
-      <%= pb_rails("section_separator") %>
-      <%= pb_rails("card/card_body", props: {}) do %>
-        <%= pb_rails("table", props: {container: false, disable_hover: true, id: "global-prop-table", classname: "global-active"}) do %>
-          <thead>
-            <tr>
-              <th>Props</th>
-              <th>Type</th>
-              <th>Values</th>
-            </tr>
-          </thead>
-          <tbody>
-          <% global_prop_data.each do |key, value|%>
-              <tr>
-                <td>
-                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
-                </td>
-                <td>
-                  <%= pb_rails("card", props: {
-                    classname: "card",
-                    padding: "xxs",
-                    background: "light",
-                    border_none: true,
-                    border_radius: "sm"
-                  })  do %>
-                    <%= pb_rails("body", props: {
-                      classname: "kearning"
-                    }) do %>
-                        <% if key =~ /^padding|^margin/ %>
-                            <%= "array" %>
-                        <% else %>
-                          <%= value[:type].to_s.downcase %>
-                        <% end %>
-                    <% end %>
-                  <% end %>
-                </td>
-                <td>
-                  <% if key =~ /^padding|^margin/ %>
-                  <% padding_margin_values.each do |item| %>
-                      <%= pb_rails("card", props: {
-                          flex_direction: "row",
-                          classname: "card",
-                          padding: "xxs",
-                          background: "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning"
-                          }) do %>
-                            <%= item %>
-                          <% end %>
-                        <% end %>
-                      <% end %>
-                  <% else %>
-                  <% if value[:values].present? %>
-                    <% value[:values].each do |item| %>
-                      <% if item != nil %>
-                        <%= pb_rails("card", props: {
-                          flex_direction: "row",
-                          classname: "card",
-                          padding: "xxs",
-                          background: "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning"
-                          }) do %>
-                            <%= item %>
-                          <% end %>
-                        <% end %>
-                      <% end %>
-                    <% end %>
-                  <% end %>
-                  <% end %>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        <% end %>
-        <%= pb_rails("table", props: {container: false, disable_hover: true, id: "local-prop-table", classname: "local-active"}) do %>
-          <thead>
-            <tr>
-              <th>Props</th>
-              <th>Type</th>
-              <th>Values</th>
-              <th>Default</th>
-            </tr>
-          </thead>
-          <tbody>
-          <% local_prop_data.each do |key, value|%>
-              <tr>
-                <td>
-                  <%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
-                </td>
-                <td>
-                  <%= pb_rails("card", props: {
-                    classname: "card",
-                    padding: "xxs",
-                    background: "light",
-                    border_none: true,
-                    border_radius: "sm"
-                  })  do %>
-                    <%= pb_rails("body", props: {
-                      classname: "kearning"
-                    }) do %>
-                        <%= value[:type].downcase %>
-                    <% end %>
-                  <% end %>
-                </td>
-                <td>
-                  <% if value[:values].present? %>
-                    <% value[:values].each do |item| %>
-                      <% if item != nil %>
-                        <%= pb_rails("card", props: {
-                          flex_direction: "row",
-                          classname: "card",
-                          padding: "xxs",
-                          background: "light",
-                          border_none: true,
-                          border_radius: "sm",
-                          margin: "xxs"
-                        })  do %>
-                          <%= pb_rails("body", props: {
-                              classname: "kearning"
-                          }) do %>
-                            <%= item %>
-                          <% end %>
-                        <% end %>
-                      <% end %>
-                    <% end %>
-                  <% end %>
-                </td>
-                <td>
-                  <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
-                    <%= pb_rails("card", props: {
-                            classname: "card",
-                            padding: "xxs",
-                            background: "light",
-                            border_none: true,
-                            border_radius: "sm"
-                      })  do %>
-                        <%= pb_rails("body", props: {
-                          classname: "kearning"
-                        }) do %>
-                            <%= value[:default] %>
-                        <% end %>
-                      <% end %>
-                  <% end %>
-                </td>
-              </tr>
-            <% end %>
-          </tbody>
-        <% end %>
-      <% end %>
-    <% end %>
-  </div>
-<% end %>
-
-<script>
-
-const globalNavAndTable = document.querySelectorAll('.global-active');
-const localNavAndTable = document.querySelectorAll('.local-active');
-
-globalNavAndTable.forEach(element => {
-  element.style.display = 'none';
-});
-
-const globalButton = document.getElementById("global-button");
-if (globalButton) {
-  globalButton.addEventListener("click", showGlobal);
-}
-
-const localButton = document.getElementById("local-button");
-if (localButton) {
-  localButton.addEventListener("click", showLocal);
-}
-
-function showGlobal() {
-  localNavAndTable.forEach(element => {
-    element.style.display = 'none';
-  });
-
-  globalNavAndTable.forEach(element => {
-    element.style.display = 'table';
-  });
-}
-
-function showLocal() {
-  localNavAndTable.forEach(element => {
-    element.style.display = 'table';
-  });
-
-  globalNavAndTable.forEach(element => {
-    element.style.display = 'none';
-  });
-}
-
-</script>