playbook_ui_docs 12.25.0.pre.alpha.play824786 → 12.25.0.pre.alpha.railsmultilevelimprovements758

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 12.25.0.pre.alpha.play824786
+  version: 12.25.0.pre.alpha.railsmultilevelimprovements758
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-06-15 00:00:00.000000000 Z
+date: 2023-06-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -419,19 +419,6 @@ files:
 - app/pb_kits/playbook/pb_date_year_stacked/docs/_footer.md
 - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
-- app/pb_kits/playbook/pb_detail/docs/_description.md
-- app/pb_kits/playbook/pb_detail/docs/_detail_bold.html.erb
-- app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx
-- app/pb_kits/playbook/pb_detail/docs/_detail_bold.md
-- app/pb_kits/playbook/pb_detail/docs/_detail_colors.html.erb
-- app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx
-- app/pb_kits/playbook/pb_detail/docs/_detail_colors.md
-- app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb
-- app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx
-- app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb
-- app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx
-- app/pb_kits/playbook/pb_detail/docs/example.yml
-- app/pb_kits/playbook/pb_detail/docs/index.js
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md
@@ -835,6 +822,7 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
 - app/pb_kits/playbook/pb_multi_level_select/docs/index.js
 - app/pb_kits/playbook/pb_multiple_users/docs/_description.md
@@ -949,8 +937,6 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
 - app/pb_kits/playbook/pb_phone_number_input/docs/index.js
 - app/pb_kits/playbook/pb_pill/docs/_description.md

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

@@ -1 +0,0 @@
-Used for tables or designs with large amounts of data or text.

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.html.erb

@@ -1,34 +0,0 @@
-<%= pb_rails("detail", props: {
-  bold: true,
-  text: "I am a bold detail kit"
-}) %>
-
-<%= pb_rails("detail", props: {
-  bold: true,
-  color: "default",
-  text: "I am a bold detail kit"
-}) %>
-
-<%= pb_rails("detail", props: {
-  bold: true,
-  color: "lighter",
-  text: "I am a bold detail kit"
-}) %>
-
-<%= pb_rails("detail", props: {
-  bold: true,
-  color: "link",
-  text: "I am a bold detail kit"
-}) %>
-
-<%= pb_rails("detail", props: {
-  bold: true,
-  color: "error",
-  text: "I am a bold detail kit"
-}) %>
-
-<%= pb_rails("detail", props: {
-  bold: true,
-  color: "success",
-  text: "I am a bold detail kit"
-}) %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import { Detail } from '../..'
-
-const DetailBold = (props) => (
-  <div>
-    <Detail
-        bold
-        text="I am a bold detail kit"
-        {...props}
-    />
-
-    <Detail
-        bold
-        color="default"
-        text="I am a bold detail kit"
-        {...props}
-    />
-
-    <Detail
-        bold
-        color="lighter"
-        text="I am a bold detail kit"
-        {...props}
-    />
-
-    <Detail
-        bold
-        color="link"
-        text="I am a bold detail kit"
-        {...props}
-    />
-
-    <Detail
-        bold
-        color="error"
-        text="I am a bold detail kit"
-        {...props}
-    />
-
-    <Detail
-        bold
-        color="success"
-        text="I am a bold detail kit"
-        {...props}
-    />
-  </div>
-)
-
-export default DetailBold

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.md

@@ -1 +0,0 @@
-Use the `bold` prop to strongly emphasis your text.

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.html.erb

@@ -1,24 +0,0 @@
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "default"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "lighter"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "link"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "error"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "success"
-}) %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { Detail } from '../..'
-
-const DetailColors = (props) => (
-  <div>
-    <Detail
-        color="default"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="lighter"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="link"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="error"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="success"
-        text="I am a detail kit"
-        {...props}
-    />
-  </div>
-)
-
-export default DetailColors

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.md

@@ -1,6 +0,0 @@
-##### Prop
-This kit uses the `light` color by default, and can be replaced with colors below:
-
-`default` `lighter` `link` `error` `success`
-
-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_detail/docs/_detail_default.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit"
-}) %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import { Detail } from '../..'
-
-const DetailDefault = (props) => (
-  <div>
-    <Detail
-        text="I am a detail kit"
-        {...props}
-    />
-  </div>
-)
-
-export default DetailDefault

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb

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

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx

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

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

@@ -1,11 +0,0 @@
-examples:
-
-  rails:
-  - detail_default: Default
-  - detail_colors: Colors
-  - detail_bold: Bold
-
-  react:
-  - detail_default: Default
-  - detail_colors: Colors
-  - detail_bold: Bold

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

@@ -1,4 +0,0 @@
-export { default as DetailDefault } from './_detail_default.jsx'
-export { default as DetailColors } from './_detail_colors.jsx'
-export { default as DetailStyled } from './_detail_styled.jsx'
-export { default as DetailBold } from './_detail_bold.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -1,14 +0,0 @@
-<form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
-    <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
-</form>
-
-<% content_for(:pb_js) do %>
-    <%= javascript_tag do %>
-        document.addEventListener('DOMContentLoaded', function () {
-            document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
-                if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
-            })
-        })
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -1,60 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
-
-const PhoneNumberInputValidation = (props) => {
-    const [formErrors, setFormErrors] = useState("");
-    const [showFormErrors, setShowFormErrors] = useState(false);
-    const [phoneNumber, setPhoneNumber] = useState("");
-    const [countryCode, setCountryCode] = useState("af");
-
-    const handleOnValidate = (valid) => {
-        setFormErrors(
-            valid ? "" : "Please correct the fields below and try again."
-        );
-    };
-
-    const handleOnChange = ({ iso2, number }) => {
-        setCountryCode(iso2);
-        setPhoneNumber(number);
-    };
-    
-    const handleOnSubmit = (e) => {
-        if (showFormErrors) e.preventDefault()
-    }
-
-    useEffect(() => {
-        setShowFormErrors(formErrors.length > 0);
-    }, [formErrors]);
-
-    return (
-        <form
-            action=""
-            method="get"
-            onSubmit={handleOnSubmit}
-        >
-            {showFormErrors && (
-                <FixedConfirmationToast
-                    marginBottom="md"
-                    status="error"
-                    text={formErrors}
-                />
-            )}
-            <PhoneNumberInput
-                error="Missing phone number."
-                id="validation"
-                initialCountry={countryCode}
-                onChange={handleOnChange}
-                onValidate={handleOnValidate}
-                required
-                value={phoneNumber}
-                {...props}
-            />
-            <Button
-                htmlType="submit"
-                text="Save Phone Number"
-            />
-        </form>
-    );
-};
-
-export default PhoneNumberInputValidation;