Merge branch 'master' of github.com:powerhome/playbook into PLAY-1608…

…_add_summary_display

playbook-website/app/javascript/components/MainSidebar/MenuData/GuidelinesNavItems.ts

@@ -63,6 +63,10 @@ export const VisualGuidelinesItems = [
         name: "Hover",
         link: "/visual_guidelines/hover"
     },
+    {
+        name: "Group Hover",
+        link: "/visual_guidelines/group_hover"
+    },
     {
         name: "Text Align",
         link: "/visual_guidelines/text_align"

playbook-website/app/javascript/components/VisualGuidelines/Examples/GroupHover.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable flowtype/no-types-missing-file-annotation */
+
+import React from 'react'
+
+import {
+  Card,
+  Title,
+} from 'playbook-ui'
+
+import Example from '../Templates/Example'
+
+const GroupHoverDescription = () => (
+  <>
+    You can hover over a kit and its children's hover affects will be applied. Check out <a href="https://playbook.powerapp.cloud/visual_guidelines/hover">{"our hover affects here."}</a>
+  </>
+)
+
+const GroupHover = ({ example }: {example: string}) => (
+  <Example
+      backgroundClass='group-hover-class'
+      description={<GroupHoverDescription />}
+      example={example}
+      title="Group Hover"
+  >
+    <Card 
+      cursor="pointer"
+      groupHover
+    >
+      <Title
+          alignSelf="center"
+          groupHover 
+          hover={{ scale: "lg"}}
+          text="If the card is hovered, I'm hovered too!"
+      />
+      <Title
+          alignSelf="center"
+          paddingY="lg"
+          text="I don't have any hover effect on me"
+      />
+      <Title
+          alignSelf="center"
+          hover={{ scale: "lg"}}
+          text="I need to be hovered over directly"
+      />
+    </Card>
+  </Example>
+)
+
+export default GroupHover

playbook-website/app/javascript/components/VisualGuidelines/index.tsx

@@ -18,6 +18,7 @@ import Cursor from "../VisualGuidelines/Examples/Cursor";
 import FlexBox from "../VisualGuidelines/Examples/FlexBox";
 import Position from "../VisualGuidelines/Examples/Position";
 import Hover from "../VisualGuidelines/Examples/Hover";
+import GroupHover from "../VisualGuidelines/Examples/GroupHover";
 import TextAlign from "../VisualGuidelines/Examples/TextAlign";
 import Overflow from "./Examples/Overflow";
 import Truncate from "./Examples/Truncate";
@@ -82,6 +83,8 @@ const VisualGuidelines = ({
         return <VerticalAlign example={examples.vertical_align_jsx}/>;
       case "hover":
         return <Hover example={examples.hover_jsx}/>;
+      case "group_hover":
+        return <GroupHover example={examples.group_hover_jsx}/>;
       case "text_align":
         return <TextAlign example={examples.text_align_jsx} />
       case "overflow":

playbook-website/app/views/guides/getting_started/dependencies.md

@@ -0,0 +1,67 @@
+---
+title: Dependencies
+icon: code
+description: Some of our kits require additional libraries to run properly.
+---
+
+## Playbook UI Dependencies | React
+
+Playbook UI's React library needs the following packages installed in your project to work properly:
+
+```json
+"react"
+ "react-dom"
+ "react-is"
+ "react-trix"
+```
+
+## Playbook UI Dependencies | Rails
+
+Playbook UI's Rails gem requires React for its components javascript to fully function. Follow the instructions in the [Ruby & React Setup](/guides/getting_started/rails_&_react_setup) guide to add react to your Rails app.
+
+## Unbundled Dependencies
+
+These kits require you to install additional libraries to get full functionality.
+
+To install them add them to your project using `yarn add`, `npm install`, or manually add them to your `package.json` file.
+
+| Kit                 | Kit Link                                                                    | NPM Link(s)                                                                                              | Dependency(s)                               |
+|---------------------|-----------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------|---------------------------------------------|
+| **Icon**            | [Icon](https://playbook.powerapp.cloud/kits/icon/react)                     | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free)                                       | fontawesome-free                            |
+| **Icon Circle**     | [Icon Circle](https://playbook.powerapp.cloud/kits/icon_circle/react)       | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free)                                       | fontawesome-free                            |
+| **Icon Stat Value** | [Icon Stat Value](https://playbook.powerapp.cloud/kits/icon_stat_value/react) | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free)                                       | fontawesome-free                            |
+| **Icon Value**      | [Icon Value](https://playbook.powerapp.cloud/kits/icon_value/react)         | [fontawesome-free](https://www.npmjs.com/package/fontawesome-free)                                       | fontawesome-free                            |
+| **Map**             | [Map](https://playbook.powerapp.cloud/kits/map/react)                       | [maplibre-gl](https://www.npmjs.com/package/maplibre-gl)                                                 | maplibre-gl                                 |
+| **Rich Text Editor**<br>(TipTap Editor) | [Rich Text Editor](https://playbook.powerapp.cloud/kits/rich_text_editor/react) | - [@tiptap/core](https://www.npmjs.com/package/@tiptap/core)<br>- [@tiptap/react](https://www.npmjs.com/package/@tiptap/react)<br>- [@tiptap/starter-kit](https://www.npmjs.com/package/@tiptap/starter-kit)<br>- [@tiptap/extension-document](https://www.npmjs.com/package/@tiptap/extension-document)<br>- [@tiptap/extension-highlight](https://www.npmjs.com/package/@tiptap/extension-highlight)<br>- [@tiptap/extension-horizontal-rule](https://www.npmjs.com/package/@tiptap/extension-horizontal-rule)<br>- [@tiptap/extension-link](https://www.npmjs.com/package/@tiptap/extension-link)<br>- [@tiptap/extension-paragraph](https://www.npmjs.com/package/@tiptap/extension-paragraph)<br>- [@tiptap/extension-text](https://www.npmjs.com/package/@tiptap/extension-text)<br>- [@tiptap/pm](https://www.npmjs.com/package/@tiptap/pm) | - @tiptap/core<br>- @tiptap/react<br>- @tiptap/starter-kit<br>- @tiptap/extension-document<br>- @tiptap/extension-highlight<br>- @tiptap/extension-horizontal-rule<br>- @tiptap/extension-link<br>- @tiptap/extension-paragraph<br>- @tiptap/extension-text<br>- @tiptap/pm |
+
+## Bundled Dependencies
+
+These kits use dependencies that are bundled with them; no additional installation is required.
+
+| Kit                    | Kit Link                                                                    | NPM Link(s)                                                                                       | Dependency(s)                           |
+|------------------------|-----------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|-----------------------------------------|
+| **Advanced Table**     | [Advanced Table](https://playbook.powerapp.cloud/kits/advanced_table/react) | [@tanstack/react-table](https://www.npmjs.com/package/@tanstack/react-table)                      | @tanstack/react-table                   |
+| **Bar Graph**          | [Bar Graph](https://playbook.powerapp.cloud/kits/bar_graph/react)           | [highcharts](https://www.npmjs.com/package/highcharts),<br>[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,<br>highcharts-react-official |
+| **Circle Chart**       | [Circle Chart](https://playbook.powerapp.cloud/kits/circle_chart/react)     | [highcharts](https://www.npmjs.com/package/highcharts),<br>[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,<br>highcharts-react-official |
+| **Date Picker**        | [Date Picker](https://playbook.powerapp.cloud/kits/date_picker/react)       | [flatpickr](https://www.npmjs.com/package/flatpickr)                                              | flatpickr                               |
+| **Dialog**             | [Dialog](https://playbook.powerapp.cloud/kits/dialog/react)                 | [react-modal](https://www.npmjs.com/package/react-modal)                                          | react-modal                             |
+| **File Upload**        | [File Upload](https://playbook.powerapp.cloud/kits/file_upload/react)       | [react-dropzone](https://www.npmjs.com/package/react-dropzone)                                    | react-dropzone                          |
+| **Filter**             | [Filter](https://playbook.powerapp.cloud/kits/filter/react)                 | [react-popper](https://www.npmjs.com/package/react-popper)                                        | react-popper                            |
+| **Gauge**              | [Gauge](https://playbook.powerapp.cloud/kits/gauge/react)                   | [highcharts](https://www.npmjs.com/package/highcharts),<br>[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,<br>highcharts-react-official |
+| **Highlight**          | [Highlight](https://playbook.powerapp.cloud/kits/highlight/react)           | [react-highlight-words](https://www.npmjs.com/package/react-highlight-words)                      | react-highlight-words                   |
+| **LightBox**           | [LightBox](https://playbook.powerapp.cloud/kits/lightbox/react)             | [react-zoom-pan-pinch](https://www.npmjs.com/package/react-zoom-pan-pinch)                        | react-zoom-pan-pinch                    |
+| **Line Graph**         | [Line Graph](https://playbook.powerapp.cloud/kits/line_graph/react)         | [highcharts](https://www.npmjs.com/package/highcharts),<br>[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,<br>highcharts-react-official |
+| **Multi Level Select** | [Multi Level Select](https://playbook.powerapp.cloud/kits/multi_level_select/react) | [lodash](https://www.npmjs.com/package/lodash)                                                    | lodash                                  |
+| **Passphrase**         | [Passphrase](https://playbook.powerapp.cloud/kits/passphrase/react)         | [react-popper](https://www.npmjs.com/package/react-popper)                                        | react-popper                            |
+| **Phone Number Input** | [Phone Number Input](https://playbook.powerapp.cloud/kits/phone_number_input/react) | [intl-tel-input](https://www.npmjs.com/package/intl-tel-input)                                    | intl-tel-input                          |
+| **Popover**            | [Popover](https://playbook.powerapp.cloud/kits/popover/react)               | [lodash](https://www.npmjs.com/package/lodash),<br>[react-popper](https://www.npmjs.com/package/react-popper) | lodash,<br>react-popper                 |
+| **Rich Text Editor**<br>(Trix Editor) | [Rich Text Editor](https://playbook.powerapp.cloud/kits/rich_text_editor/react) | [trix](https://www.npmjs.com/package/trix),<br>[react-trix](https://www.npmjs.com/package/react-trix) | trix,<br>react-trix                     |
+| **Tooltip**            | [Tooltip](https://playbook.powerapp.cloud/kits/tooltip/react)               | [@floating-ui/react](https://www.npmjs.com/package/@floating-ui/react)                            | @floating-ui/react                      |
+| **Treemap Chart**      | [Treemap Chart](https://playbook.powerapp.cloud/kits/treemap_chart/react)   | [highcharts](https://www.npmjs.com/package/highcharts),<br>[highcharts-react-official](https://www.npmjs.com/package/highcharts-react-official) | highcharts,<br>highcharts-react-official |
+| **Typeahead**          | [Typeahead](https://playbook.powerapp.cloud/kits/typeahead/react)           | [react-select](https://www.npmjs.com/package/react-select),<br>[lodash](https://www.npmjs.com/package/lodash) | react-select,<br>lodash                 |
+| **Walkthrough**        | [Walkthrough](https://playbook.powerapp.cloud/kits/walkthrough/react)       | [react-joyride](https://www.npmjs.com/package/react-joyride)                                      | react-joyride                           |
+
+## Notes
+**Rich Text Editor**: This kit supports two different editors:
+**TipTap Editor**: Requires manual installation of `tiptap` and various `@tiptap/*` extensions (listed above under Unbundled Dependencies).
+**Trix Editor**: Dependencies (`trix` and `react-trix`) are bundled with the kit; no extra installation is needed.

playbook-website/app/views/guides/getting_started/font_awesome.md

@@ -0,0 +1,127 @@
+---
+title: Font Awesome Setup
+description: Playbook seamlessly integrates with Font Awesome, a leading icon library known for its extensive collection of high-quality, scalable icons. This integration not only enhances the visual appeal of websites and applications but also improves overall usability.
+icon: font-awesome
+---
+
+Playbook seamlessly integrates with [Font Awesome](https://fontawesome.com/), a leading icon library known for its extensive collection of high-quality, scalable icons. This integration not only enhances the visual appeal of websites and applications but also improves overall usability. 
+
+Some Font Awesome benefits:
+
+**1. Wide Range of Icons:** Font Awesome offers a vast selection of icons to suit a variety of needs. You can easily find the perfect icon for your project through their [icon search](https://fontawesome.com/search).
+**2. Ease of Use:** The icons are straightforward to implement. With just a few lines of code, you can quickly and easily add visual elements to your web projects. Note, a Pro subscription is required for access to a wider range of icons beyond the [Free set](https://fontawesome.com/search?o=r&m=free&s=regular).
+**3. Visual Appeal:** Incorporating these icons can improve the aesthetic of your site or application, making it more attractive to users. With Playbook, you have the flexibility to customize color, size, and animations.
+**4. User-Friendliness:** Icons can help users navigate and understand your website or application more efficiently, enhancing their overall experience. Font Awesome icons are web fonts compatible with most browsers and are optimized for performance and accessibility.
+
+Integrating Font Awesome with Playbook ensures that you have access to these benefits, making your projects more polished and professional.
+
+![fontawesome](https://github.com/user-attachments/assets/638b63ad-56d3-4819-8e05-fcbb175bedc7)
+
+### Ruby on Rails Setup
+
+<details class="mt_sm">
+  <summary class="mb_sm"><strong><img src="https://github.com/user-attachments/assets/781b1ec8-954c-4919-a79c-7009521849a6" alt="rails logo" class="pb_custom_icon svg-inline--fa svg_fw mr_xxs" style="margin: 0;" />Default with an Asset Pipeline</strong></summary>
+  <strong>Make sure you are on Rails 7 or higher.</strong>
+  <p>
+    <strong>1.</strong> Follow the <a href="/guides/getting_started/ruby_on_rails_setup">Ruby on Rails Setup getting started page</a> to setup Playbook with your Rails project.
+  </p>
+  <p>
+    <strong>2.</strong> Setup Pro or Free Font Awesome to use our Icon Component.
+  </p>
+  <p><strong>Pro:</strong></p>
+  <pre><code class="rb"># app/assets/stylesheets/application.scss
+ @import "font-awesome-pro";
+ @import "font-awesome-pro/solid";
+ @import "font-awesome-pro/regular";
+ @import "playbook";</code></pre>
+  <pre><code class="rb"># app/Gemfile
+ source "https://token:[email protected]/basic/fontawesome-pro/ruby/" do
+   gem "font-awesome-pro-sass", "6.2.0"
+ end</code></pre>
+ <strong>Free:</strong>
+  <p><em>Currently only <a href="https://fontawesome.com/search?o=r&m=free&s=regular">Free Regular</a> icons are supported in our icon component structure.</em></p>
+
+  <pre><code class="rb"># app/assets/stylesheets/application.scss
+ @import "font-awesome";</code></pre>
+
+  <pre><code class="rb"># app/Gemfile
+ source "https://token:[email protected]/basic/fontawesome-pro/ruby/" do
+   gem "font-awesome-pro-sass", "6.2.0"
+ end</code></pre>
+
+  <strong>3.</strong> Bundle all the things!
+
+  <pre><code class="sh">bundle install</code></pre>
+
+  <strong>4.</strong> <strong>Go build awesome stuff!</strong>
+
+  <p>Refer to our <a href="/kits/icon">Icon kit</a> to get started with Font Awesome icons in Playbook.</p>
+
+  <pre><code class="rb">&lt;%= pb_rails("icon", props: { icon: "font-awesome", fixed_width: true }) %&gt;</code></pre>
+</details>
+
+<details class="mt_sm">
+  <summary class="mb_sm"><strong><img src="https://github.com/user-attachments/assets/781b1ec8-954c-4919-a79c-7009521849a6" alt="rails logo" class="pb_custom_icon svg-inline--fa svg_fw mr_xxs" style="margin: 0;" />With a JavaScript Bundler</strong></summary>
+  <strong>Make sure you are on Rails 7 or higher.</strong>
+  <p>
+    <strong>1.</strong> Follow the <a href="/guides/getting_started/ruby_on_rails_setup">Ruby on Rails Setup getting started page</a> to setup Playbook with your Rails project. 
+  </p>
+  <p>
+    Use your desired bundler:
+    <pre><code class="sh">rails new CoolNewApp -j webpack</code></pre>
+  </p>
+  <p>
+    <strong>2.</strong> Follow the <a href="/guides/getting_started/rails_&_react_setup">Ruby & React page</a> if you want to use React with your project. 
+  </p>
+  <p>
+    <strong>3.</strong> Setup Pro or Free Font Awesome to use our Icon Component.
+  </p>
+  <p><strong>Pro:</strong></p>
+  <pre><code class="rb"># app/assets/stylesheets/application.scss
+ @import "font-awesome-pro";
+ @import "font-awesome-pro/solid";
+ @import "font-awesome-pro/regular";
+ @import "playbook";</code></pre>
+  <pre><code class="rb"># app/Gemfile
+ source "https://token:[email protected]/basic/fontawesome-pro/ruby/" do
+   gem "font-awesome-pro-sass", "6.2.0"
+ end</code></pre>
+  <p>If you prefer, you can install with JavaScript:</p>
+  <pre><code class="sh">FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX yarn add @fortawesome/fontawesome-pro</code></pre>
+  <strong>Free:</strong>
+  <p><em>Currently only <a href="https://fontawesome.com/search?o=r&m=free&s=regular">Free Regular</a> icons are supported in our icon component structure.</em></p>
+
+  <pre><code class="rb"># app/assets/stylesheets/application.scss
+ @import "font-awesome";</code></pre>
+
+  <pre><code class="rb"># app/Gemfile
+ source "https://token:[email protected]/basic/fontawesome-pro/ruby/" do
+   gem "font-awesome-pro-sass", "6.2.0"
+ end</code></pre>
+
+  <p>If you prefer, you can install with JavaScript:</p>
+  <pre><code class="sh">yarn add @fortawesome/fontawesome-free</code></pre>
+
+  <strong>4.</strong> Bundle all the things!
+
+  <pre><code class="sh">bundle install</code></pre>
+
+  <pre><code class="sh">yarn</code></pre>
+
+  <pre><code class="sh">npm install</code></pre>
+
+  <strong>5.</strong> Build JavaScript for development
+  <p>When using a bundling option, use <code>bin/dev</code> to start the Rails server and build JavaScript for development. Don't forget to add a build script in your package.json file:</p>
+
+  <pre><code class="js">"scripts": {
+   "build": "webpack"
+ },</code></pre>
+
+  <strong>6.</strong> <strong>Go build awesome stuff!</strong>
+
+  <p>Refer to our <a href="/kits/icon">Icon kit</a> to get started with Font Awesome icons in Playbook.</p>
+
+  <pre><code class="rb">&lt;%= pb_rails("icon", props: { icon: "font-awesome", fixed_width: true }) %&gt;</code></pre>
+
+  <pre><code class="react">&lt;Icon fixedWidth icon="font-awesome" /&gt;</code></pre>
+</details>