playbook_ui_docs 12.25.0.pre.alpha.play822bolddefaultfortitle3764 → 12.25.0.pre.alpha.play824786

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f84f9245cf801f85ab5dfc3f0978e4c7145e3d6cfa842c6cda1f497a42df94f
-  data.tar.gz: 69c8c7d46dea768b11f8e54e7d0a581ee450b5f730d7fdfbc157a07a6b4c3f58
+  metadata.gz: 55a134041f0bd091d00782a4574c401246c42c819da44aeab2ea54f3c81bbdaf
+  data.tar.gz: b6f5c0a997ba59e6a056abcf4089e3c2e8be28a02d52267c36f3de0d3fe9cbce
 SHA512:
-  metadata.gz: 696ca3aa7566fed253f62ad0cddcc4216873f4bc08a54454fdf10eef6b5e694ede44bf7497245d854f1e9de1cf3277d71d8ffc1af0ccbcb10c230fa4420f3e84
-  data.tar.gz: 70a5d5ea8fff0b2fcb967cfb9b6510d7ccfd5e10cfb719b46cd8d61e301c8f3575eaf4b2d736b772f1b6e55b1299b55d5f635166fe54ec1cf6f543b2a036d9d9
+  metadata.gz: 42c74c97bc51212b2f2a509dd60776f783abedfa775f5b5026e7f3445fa74366d07d5b5a3d272454d6afb3ad3c494aa5122ee9c93dbac5dda3be39874e84fc3c
+  data.tar.gz: 671afc3e799488d9b4965607f20f7442efd7c203265ad41d403db96738a89af685a97730a82dba91fb73864b7828b1e7ddc1a9b0d8cafdb1872d24b912ed7588

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md

@@ -1 +1,82 @@
-![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)
+In the world of design, consistency is key. Whether you're designing a website, app, or product, having a consistent visual language can make all the difference. That's where design systems come in.
+
+A design system is a collection of reusable components, guidelines, and assets that help ensure consistency across all of your design work. It's a way to standardize your design language, making it easier for your team to work together and for your users to navigate your products.
+
+In this article, we'll explore the various elements of a design system and how they can be used to create a cohesive and effective design language.
+
+### Headings
+Headings are an essential component of any design system. They help organize content, provide visual hierarchy, and make it easier for users to scan and find what they're looking for. A good design system will have headings of various sizes, ranging from H1 (the largest) to H6 (the smallest). Here's an example:
+
+# H1: Main Title Headings
+## H2: Headings
+### H3: Subheadings
+#### H4: Sub-Subheadings
+
+![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)
+
+### Lists
+Lists are another important component of a design system. They help organize content into easily digestible chunks, making it easier for users to read and understand. There are two types of lists: ordered and unordered.
+
+Ordered lists are numbered, and each item is listed in a specific order. For example:
+
+1. Headings
+2. Lists
+3. Blockquotes
+4. Links
+5. Bold
+6. Underline
+7. Code Blocks
+8. Inline Code
+9. Example Tables
+10. Horizontal Rules
+
+Unordered lists, on the other hand, use bullet points to separate each item. For example:
+
+* Headings
+* Lists
+* Blockquotes
+* Links
+* Bold
+* Underline
+* Code Blocks
+* Inline Code
+* Example Tables
+* Horizontal Rules
+
+### Blockquotes
+Blockquotes are used to highlight a particular section of text or quote. They’re often used to emphasize an important point or to provide context. Here’s an example:
+
+> “Design systems are a collection of reusable components, guidelines, and assets that help ensure consistency across all of your design work.” - ChatGPT
+
+
+### Links
+Links are an important part of any design system. They allow users to navigate between different pages and sections of your product. When using links in your design system, it’s important to make sure they’re consistent in color, size, and style. Here’s an example:
+Click here to learn more about design systems.
+
+### Bold, Underline, & Italics
+**Bold** and _underline_ are used to *highlight specific words* or phrases within ~~a block of~~ text. They help draw the user’s attention to important information. Here’s an example: *Design systems are* a collection of **reusable components**, **guidelines**, and **assets** that help ensure _consistency across all of your design work_.
+
+### Code Blocks and Inline Code
+Code blocks and `inline code` are used to display and highlight code within a block of text. This is especially useful for developers who need to reference code snippets in their work. 
+
+Here’s an example:
+
+```js
+function greet() {
+	console.log(“Hello, world!”);
+}
+```
+
+### Example Tables
+Example tables are used to display data in a clear and organized way. They help users compare and analyze information quickly. Here’s an example:
+
+| Tables   |      Are      |  Cool |
+|----------|:-------------:|------:|
+| col 1 is |  left-aligned | $1600 |
+| col 2 is |    centered   |   $12 |
+| col 3 is | right-aligned |    $1 |
+
+---
+
+### Horizontal Rules
+Horizontal rules are used to separate sections of content visually. They help break up long blocks of text and make it easier for users

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+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_multi_level_select/docs/_multi_level_select_default.md

@@ -2,4 +2,4 @@ The MultiLevelSelect kit renders a multi leveled select dropdown based on data f
 
 For the React version of the kit, the `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
 
-For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around the MultiLevelSelect.
+For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around  the MultiLevelSelect.

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb

@@ -3,6 +3,7 @@
     value: "Power Home Remodeling",
     id: "powerhome1",
     expanded: true,
+
     children: [
       {
         label: "People",

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

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

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

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

@@ -5,9 +5,11 @@ examples:
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_validation: Form Validation
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_validation: Form Validation

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

@@ -2,3 +2,4 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
+export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb

@@ -1,3 +1,2 @@
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>
-<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -17,12 +17,6 @@ const TitleLightWeight = (props) => {
           text='Title 2'
           {...props}
       />
-      <Title bold={false}
-          size={3}
-          tag='h2'
-          text='Title 3'
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -1,3 +1,4 @@
 ##### Prop
-Title `size 1`, `size 2`, & `size 3` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
+Title `size 1` & `size 2` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
+Title `size 3` uses a light font weight by default and will not accept a bold font weight.
 Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.

data/dist/app/components/playbook/pb_docs/kit_api.html.erb

@@ -7,7 +7,7 @@
           <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, dark: dark }) %>
         <% end %>
       <% end %>
-      <%= pb_rails("section_separator", dark: dark) %>
+      <%= pb_rails("section_separator", props:{ dark: dark }) %>
       <%= pb_rails("card/card_body", props: {}) do %>
         <%= pb_rails("table", props: {container: false, disable_hover: true, dark: dark }) do %>
           <thead>

data/dist/app/components/playbook/pb_docs/kit_example.html.erb

@@ -1,15 +1,21 @@
 <% example_html = ERB.new(example).result %>
 
 <%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
-  <div class="pb--kit-example">
-    <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
-    <br />
-    <%= example %>
-    <br>
-  </div>
-
+  <% unless (action_name == "kit_show_swift") %>
+    <div class="pb--kit-example">
+      <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
+      <br />
+      <%= example %>
+      <br>
+    </div>
+  <% else %>
+    <div class="pb--kit-example-markdown pt_none markdown <%= dark ? "dark" : "" %>">
+      <%= pb_rails("caption", props: { text: example_title, dark: dark, margin_top: "md" }) %>
+      <%= render_markdown(description) %>
+    </div>
+  <% end %>
   <% if show_code %>
-    <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
+    <div class="markdown pb--kit-example-markdown markdown <%= dark ? "dark" : "" %>">
       <%= render_markdown(description) %>
     </div>
     <div id="code-wrapper">

data/dist/app/components/playbook/pb_docs/kit_example.rb

@@ -8,7 +8,7 @@ module Playbook
       prop :example_title, type: Playbook::Props::String, required: true
       prop :example_key, type: Playbook::Props::String, required: true
       prop :show_code, type: Playbook::Props::Boolean, default: true
-      prop :type, type: Playbook::Props::Enum, values: %w[rails react], default: "rails"
+      prop :type, type: Playbook::Props::Enum, values: %w[rails react swift], default: "rails"
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       include PlaybookWebsite::Markdown::Helper
@@ -18,6 +18,9 @@ module Playbook
           render inline: source
         elsif type == "react"
           react_component example_key.camelize, { dark: dark }
+        elsif type == "swift"
+          ## render the markdown file
+          render inline: source
         end
       end
 
@@ -31,7 +34,11 @@ module Playbook
 
       def source
         @source ||= begin
-          extension = type == "react" ? "jsx" : "html.erb"
+          extension = if type == "rails"
+                        "html.erb"
+                      else
+                        type == "swift" ? "swift" : "jsx"
+                      end
           stringified_code = read_kit_file("docs", "_#{example_key}.#{extension}")
           sanitize_code(stringified_code)
         end

data/dist/menu.yml

@@ -90,6 +90,7 @@ kits:
   - typography:
     - body
     - caption
+    - detail
     - title
   - typography_patterns:
     - contact

data/dist/pb_doc_helper.rb

@@ -84,8 +84,11 @@ module PlaybookWebsite
     def pb_doc_render_clickable_title(kit, type)
       url = "#"
       begin
-        url = if type == "react"
+        url = case type
+              when "react"
                 kit_show_reacts_path(kit)
+              when "swift"
+                kit_show_swift_path(kit)
               else
                 kit_show_path(kit)
               end