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

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

@@ -0,0 +1,170 @@
+/* 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

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

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

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

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

@@ -0,0 +1,4 @@
+<%= 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

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

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

@@ -0,0 +1,9 @@
+<%= 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

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

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

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

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