playbook_ui_docs 16.7.0.pre.alpha.tablewidths16409 → 16.7.0.pre.rc.0

data/app/pb_kits/playbook/pb_link/docs/_playground.json

@@ -5,9 +5,7 @@
     "color": "default",
     "disabled": false,
     "tag": "a",
-    "underline": false,
-    "href": "#link-example",
-    "text": "Link text"
+    "underline": false
   },
   "children": {
     "editable": true,
@@ -30,7 +28,6 @@
       "props": [
         "href",
         "target",
-        "disabled",
         "tabIndex"
       ]
     },
@@ -39,95 +36,78 @@
       "props": [
         "color",
         "underline",
-        "tag",
-        "dark"
+        "disabled",
+        "tag"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {
-        "href": "#link-example",
-        "text": "Link text"
-      }
+      "props": {},
+      "children": "Link text"
     },
     {
-      "name": "Body color",
+      "name": "Muted underline",
       "props": {
-        "color": "body",
-        "href": "#body-link",
-        "text": "Inline body link"
-      }
+        "color": "muted",
+        "underline": true
+      },
+      "children": "Secondary link"
     },
     {
-      "name": "Muted underline",
+      "name": "Body color",
       "props": {
-        "color": "muted",
-        "href": "#secondary-link",
-        "underline": true,
-        "text": "Secondary link"
-      }
+        "color": "body"
+      },
+      "children": "Inline body link"
     },
     {
       "name": "Destructive",
       "props": {
-        "color": "destructive",
-        "href": "#delete-account",
-        "text": "Delete account"
-      }
+        "color": "destructive"
+      },
+      "children": "Delete account"
     },
     {
-      "name": "Leading icon",
+      "name": "With icon",
       "props": {
         "color": "default",
-        "href": "#continue",
-        "icon": "arrow-up-right-from-square",
-        "text": "Continue"
-      }
+        "icon": "arrow-up-right-from-square"
+      },
+      "children": "Continue"
     },
     {
-      "name": "Trailing icon",
+      "name": "Icon both sides",
       "props": {
-        "href": "#details",
         "icon": "plus",
-        "iconRight": "chevron-right",
-        "text": "Open document"
-      }
+        "iconRight": "chevron-right"
+      },
+      "children": "Open document"
     },
     {
-      "name": "Disabled",
+      "name": "As heading tag",
       "props": {
-        "disabled": true,
-        "href": "#disabled",
-        "text": "Disabled link"
-      }
+        "tag": "span"
+      },
+      "children": "Styled as link"
     },
     {
-      "name": "Heading tag",
+      "name": "With href",
       "props": {
-        "href": "#heading-link",
-        "icon": "arrow-up-right-from-square",
-        "tag": "h3",
-        "text": "Heading link"
-      }
+        "href": "/dashboard",
+        "color": "default"
+      },
+      "children": "Go to dashboard"
     },
     {
       "name": "External new tab",
       "props": {
         "href": "https://example.com",
         "target": "_blank",
-        "icon": "arrow-up-right-from-square",
-        "text": "Example.com"
-      }
-    },
-    {
-      "name": "Span tag",
-      "props": {
-        "href": "#span-link",
-        "tag": "span",
-        "text": "Span link example"
-      }
+        "icon": "arrow-up-right-from-square"
+      },
+      "children": "Example.com"
     }
   ],
   "conditionals": {
@@ -139,32 +119,11 @@
     }
   },
   "hints": {
-    "external_target_info": {
-      "when": {
-        "target": "_blank"
-      },
-      "message": "Use target=\"_blank\" for external destinations that should open in a new tab.",
-      "type": "info"
-    },
-    "icon_pairing_info": {
-      "when": {
-        "iconRight": "chevron-right"
-      },
-      "message": "iconRight is available only when icon is also set, so the link can render a balanced icon treatment.",
-      "type": "info"
-    },
-    "disabled_info": {
-      "when": {
-        "disabled": true
-      },
-      "message": "Disabled links keep their visual treatment but should not be the only way to reach important actions.",
-      "type": "info"
-    },
-    "tag_semantics_info": {
+    "target_needs_href": {
       "when": {
-        "tag": "h3"
+        "target": true
       },
-      "message": "Use tag to borrow link styling on semantic headings or inline text, but keep href when the element should still navigate.",
+      "message": "The target attribute only applies when href is set.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_link/docs/_playground.overrides.json

@@ -2,14 +2,6 @@
   "children": {
     "default": "Link text"
   },
-  "defaults": {
-    "color": "default",
-    "disabled": false,
-    "href": "#link-example",
-    "tag": "a",
-    "text": "Link text",
-    "underline": false
-  },
   "groups": [
     {
       "name": "Content",
@@ -17,97 +9,62 @@
     },
     {
       "name": "Behavior",
-      "props": ["href", "target", "disabled", "tabIndex"]
+      "props": ["href", "target", "tabIndex"]
     },
     {
       "name": "Appearance",
-      "props": ["color", "underline", "tag", "dark"]
+      "props": ["color", "underline", "disabled", "tag"]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {
-        "href": "#link-example",
-        "text": "Link text"
-      }
+      "props": {},
+      "children": "Link text"
     },
     {
-      "name": "Body color",
-      "props": {
-        "color": "body",
-        "href": "#body-link",
-        "text": "Inline body link"
-      }
+      "name": "Muted underline",
+      "props": { "color": "muted", "underline": true },
+      "children": "Secondary link"
     },
     {
-      "name": "Muted underline",
-      "props": {
-        "color": "muted",
-        "href": "#secondary-link",
-        "underline": true,
-        "text": "Secondary link"
-      }
+      "name": "Body color",
+      "props": { "color": "body" },
+      "children": "Inline body link"
     },
     {
       "name": "Destructive",
-      "props": {
-        "color": "destructive",
-        "href": "#delete-account",
-        "text": "Delete account"
-      }
+      "props": { "color": "destructive" },
+      "children": "Delete account"
     },
     {
-      "name": "Leading icon",
-      "props": {
-        "color": "default",
-        "href": "#continue",
-        "icon": "arrow-up-right-from-square",
-        "text": "Continue"
-      }
+      "name": "With icon",
+      "props": { "color": "default", "icon": "arrow-up-right-from-square" },
+      "children": "Continue"
     },
     {
-      "name": "Trailing icon",
-      "props": {
-        "href": "#details",
-        "icon": "plus",
-        "iconRight": "chevron-right",
-        "text": "Open document"
-      }
+      "name": "Icon both sides",
+      "props": { "icon": "plus", "iconRight": "chevron-right" },
+      "children": "Open document"
     },
     {
-      "name": "Disabled",
-      "props": {
-        "disabled": true,
-        "href": "#disabled",
-        "text": "Disabled link"
-      }
+      "name": "As heading tag",
+      "props": { "tag": "span" },
+      "children": "Styled as link"
     },
     {
-      "name": "Heading tag",
-      "props": {
-        "href": "#heading-link",
-        "icon": "arrow-up-right-from-square",
-        "tag": "h3",
-        "text": "Heading link"
-      }
+      "name": "With href",
+      "props": { "href": "/dashboard", "color": "default" },
+      "children": "Go to dashboard"
     },
     {
       "name": "External new tab",
       "props": {
         "href": "https://example.com",
         "target": "_blank",
-        "icon": "arrow-up-right-from-square",
-        "text": "Example.com"
-      }
-    },
-    {
-      "name": "Span tag",
-      "props": {
-        "href": "#span-link",
-        "tag": "span",
-        "text": "Span link example"
-      }
+        "icon": "arrow-up-right-from-square"
+      },
+      "children": "Example.com"
     }
   ],
   "conditionals": {
@@ -115,24 +72,9 @@
     "iconRight": { "requires": "icon" }
   },
   "hints": {
-    "external_target_info": {
-      "when": { "target": "_blank" },
-      "message": "Use target=\"_blank\" for external destinations that should open in a new tab.",
-      "type": "info"
-    },
-    "icon_pairing_info": {
-      "when": { "iconRight": "chevron-right" },
-      "message": "iconRight is available only when icon is also set, so the link can render a balanced icon treatment.",
-      "type": "info"
-    },
-    "disabled_info": {
-      "when": { "disabled": true },
-      "message": "Disabled links keep their visual treatment but should not be the only way to reach important actions.",
-      "type": "info"
-    },
-    "tag_semantics_info": {
-      "when": { "tag": "h3" },
-      "message": "Use tag to borrow link styling on semantic headings or inline text, but keep href when the element should still navigate.",
+    "target_needs_href": {
+      "when": { "target": true },
+      "message": "The target attribute only applies when href is set.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx

@@ -4,28 +4,7 @@ import Pagination from '../../pb_pagination/_pagination'
 import Select from '../../pb_select/_select'
 import Table from '../../pb_table/_table'
 
-const data = [
-    ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
-    ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
-    ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
-    ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
-    ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
-    ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
-    ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
-    ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
-    ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
-    ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
-    ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
-    ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
-    ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
-    ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
-    ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
-    ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
-    ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
-    ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
-    ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
-    ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
-  ];
+import { data } from "./data";
 
 const PaginationExternalControl = (props) => {
   const [totalItems, setTotalItems] = useState(20);

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -2,28 +2,8 @@ import React, { useState } from "react";
 import Table from '../../pb_table/_table'
 import Pagination from '../../pb_pagination/_pagination'
 
-const data = [
-  ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
-  ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
-  ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
-  ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
-  ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
-  ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
-  ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
-  ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
-  ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
-  ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
-  ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
-  ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
-  ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
-  ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
-  ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
-  ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
-  ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
-  ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
-  ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
-  ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
-];
+
+import { data } from "./data";
 
 const PaginationPageChange = (props) => {
 

data/app/pb_kits/playbook/pb_pagination/docs/data.js

@@ -0,0 +1,23 @@
+export const data = [
+    ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
+    ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
+    ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
+    ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
+    ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
+    ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
+    ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
+    ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
+    ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
+    ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
+    ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
+    ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
+    ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
+    ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
+    ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
+    ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
+    ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
+    ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
+    ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
+    ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
+  ];
+  

data/app/pb_kits/playbook/pb_phone_number_input/docs/_playground.json

@@ -13,8 +13,7 @@
     "value": "",
     "formatAsYouType": false,
     "strictMode": false,
-    "countrySearch": false,
-    "showPlaceholder": false
+    "countrySearch": false
   },
   "groups": [
     {
@@ -38,8 +37,7 @@
         "value",
         "formatAsYouType",
         "strictMode",
-        "countrySearch",
-        "showPlaceholder"
+        "countrySearch"
       ]
     }
   ],

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

@@ -2,7 +2,6 @@ examples:
 
   react:
   - phone_number_input_default: Default
-  - phone_number_input_show_placeholder: Show Placeholder
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Only Countries
@@ -17,7 +16,6 @@ examples:
 
   rails:
   - phone_number_input_default: Default
-  - phone_number_input_show_placeholder: Show Placeholder
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Only Countries

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

@@ -10,4 +10,3 @@ export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
 export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
 export { default as PhoneNumberInputRequiredIndicator } from './_phone_number_input_required_indicator.jsx'
-export { default as PhoneNumberInputShowPlaceholder } from './_phone_number_input_show_placeholder'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx

@@ -5,82 +5,7 @@ import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'
 
 import Select from '../../pb_select/_select'
-
-const release = `
-  <div>
-    <div>
-      <strong>Story Background</strong>
-    </div>
-    <div>
-      Follow the{" "}
-      <a href='https://github.com/powerhome/playbook/wiki/Release-Team-Guide'>
-        release process
-      </a>{" "}
-      to create a new version, create a gem, and package. Create a Ninja testing
-      plan, then update Nitro with the new version.
-    </div>
-    <div>
-      <br />
-    </div>
-    <div>
-      <strong>Timeline / Due Date</strong>
-    </div>
-    <div>
-      <em>Release End of business Thursday</em>
-    </div>
-    <div>
-      <em>Testing on Nitro End of business Friday</em>
-    </div>
-    <div>
-      <br />
-    </div>
-    <div>
-      <strong>Definition of done</strong>
-    </div>
-    <ol>
-      <li>Merge all PR’s</li>
-      <li>Update the final CHANGELOG</li>
-      <li>Version up and generate NPM, and RubyGem</li>
-      <li>Create next version branch and milestone</li>
-      <li>Update default branch and branch protection rules&nbsp;</li>
-      <li>Notify Everyone of new version</li>
-      <li>
-        Generate testing plan and pages to test for Ninjas (update runway
-        ticket)
-      </li>
-      <li>Update version on Nitro and get on Demo</li>
-      <li>Send Ninjas demo and runway ticket for testing</li>
-      <li>Ninja Approved + PR Approved</li>
-    </ol>
-    <div>
-      <br />
-    </div>
-    <div>
-      <strong>Stakeholders / Sign-off</strong>
-    </div>
-    <ul>
-      <li>Code Owners</li>
-    </ul>
-    <div>
-      <br />
-      <strong>Cadence</strong>
-      <br />
-      Jason, Jon, Stephen, Jasper, Brendan, Cole
-    </div>
-  </div>
-`
-
-const changelog = `
-  <div>
-    <strong>Changelog:<br></strong>
-    [INSERT LINK]<br><br>
-    You can test the normal spots of Playbook rails and react on
-    dev docs plus the following:
-  </div>
-  <div>
-    <br>
-  </div>
-`
+import { changelog, release } from './templates.js'
 
 const RichTextEditorAdvancedTemplates = (props) => {
 

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

@@ -1,8 +1,6 @@
 examples:
 
   rails:
-  - rich_text_editor_rails_default: "Rails (TipTap)"
-  - rich_text_editor_rails_simple: "Rails (TipTap — Simple toolbar)"
 
   react:
   - rich_text_editor_advanced_default: Advanced Default

data/app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js

@@ -0,0 +1,75 @@
+export const release = `
+  <div>
+    <div>
+      <strong>Story Background</strong>
+    </div>
+    <div>
+      Follow the{" "}
+      <a href='https://github.com/powerhome/playbook/wiki/Release-Team-Guide'>
+        release process
+      </a>{" "}
+      to create a new version, create a gem, and package. Create a Ninja testing
+      plan, then update Nitro with the new version.
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Timeline / Due Date</strong>
+    </div>
+    <div>
+      <em>Release End of business Thursday</em>
+    </div>
+    <div>
+      <em>Testing on Nitro End of business Friday</em>
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Definition of done</strong>
+    </div>
+    <ol>
+      <li>Merge all PR’s</li>
+      <li>Update the final CHANGELOG</li>
+      <li>Version up and generate NPM, and RubyGem</li>
+      <li>Create next version branch and milestone</li>
+      <li>Update default branch and branch protection rules&nbsp;</li>
+      <li>Notify Everyone of new version</li>
+      <li>
+        Generate testing plan and pages to test for Ninjas (update runway
+        ticket)
+      </li>
+      <li>Update version on Nitro and get on Demo</li>
+      <li>Send Ninjas demo and runway ticket for testing</li>
+      <li>Ninja Approved + PR Approved</li>
+    </ol>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Stakeholders / Sign-off</strong>
+    </div>
+    <ul>
+      <li>Code Owners</li>
+    </ul>
+    <div>
+      <br />
+      <strong>Cadence</strong>
+      <br />
+      Jason, Jon, Stephen, Jasper, Brendan, Cole
+    </div>
+  </div>
+`
+
+export const changelog = `
+  <div>
+    <strong>Changelog:<br></strong>
+    [INSERT LINK]<br><br>
+    You can test the normal spots of Playbook rails and react on
+    dev docs plus the following:
+  </div>
+  <div>
+    <br>
+  </div>
+`