Merge branch 'master' into PLAY-1581

powerhome · Nov 8, 2024 · e2c4dd3 · e2c4dd3
2 parents 183312d + aa29701
commit e2c4dd3
Show file tree

Hide file tree

Showing 42 changed files with 798 additions and 131 deletions.
diff --git a/playbook-website/app/javascript/components/MainSidebar/MenuData/GuidelinesNavItems.ts b/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"

diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/GroupHover.tsx b/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
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/index.tsx b/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":

diff --git a/playbook-website/app/views/guides/getting_started/dependencies.md b/playbook-website/app/views/guides/getting_started/dependencies.md
@@ -4,6 +4,21 @@ 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.

diff --git a/playbook-website/app/views/guides/getting_started/font_awesome.md b/playbook-website/app/views/guides/getting_started/font_awesome.md
@@ -17,57 +17,111 @@ Integrating Font Awesome with Playbook ensures that you have access to these ben
 
 ![fontawesome](https://github.com/user-attachments/assets/638b63ad-56d3-4819-8e05-fcbb175bedc7)
 
-## Ruby on Rails Setup (default with asset pipeline)
-
-**Make sure you are on Rails 7 or higher.**
-
-**1.** Follow the [Ruby on Rails Setup getting started page](/guides/getting_started/ruby_on_rails_setup) to setup Playbook with your Rails project.
-
-**2.** Setup Pro or Free Font Awesome to use our Icon Component.
+### 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>
 
-**Pro:**
+  <pre><code class="rb"># app/assets/stylesheets/application.scss
+ @import "font-awesome";</code></pre>
 
-```rb
-# app/assets/stylesheets/application.scss
+  <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";
-```
+ @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>
 
-```rb
-# app/Gemfile
+  <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
-```
+ end</code></pre>
 
-**Free:**
+  <p>If you prefer, you can install with JavaScript:</p>
+  <pre><code class="sh">yarn add @fortawesome/fontawesome-free</code></pre>
 
-*Currently only [Free Regular](https://fontawesome.com/search?o=r&m=free&s=regular) icons are supported in our icon component structure.*
+  <strong>4.</strong> Bundle all the things!
 
-```rb
-# app/assets/stylesheets/application.scss
- @import "font-awesome";
-```
+  <pre><code class="sh">bundle install</code></pre>
 
-```rb
-# app/Gemfile
- source "https://token:[email protected]/basic/fontawesome-pro/ruby/" do
-   gem "font-awesome-pro-sass", "6.2.0"
- end
-```
+  <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>
 
-**3.** Bundle all the things!
+  <pre><code class="js">"scripts": {
+   "build": "webpack"
+ },</code></pre>
 
-```sh
-bundle install
-```
+  <strong>6.</strong> <strong>Go build awesome stuff!</strong>
 
-**4.** **Go build awesome stuff!**
+  <p>Refer to our <a href="/kits/icon">Icon kit</a> to get started with Font Awesome icons in Playbook.</p>
 
-Refer to our [Icon kit](/kits/icon) to get started with Font Awesome icons in Playbook. 
+  <pre><code class="rb">&lt;%= pb_rails("icon", props: { icon: "font-awesome", fixed_width: true }) %&gt;</code></pre>
 
-```rb
-<%= pb_rails("icon", props: { icon: "font-awesome", fixed_width: true }) %>
-```
+  <pre><code class="react">&lt;Icon fixedWidth icon="font-awesome" /&gt;</code></pre>
+</details>
diff --git a/playbook-website/app/views/guides/getting_started/react_setup.md b/playbook-website/app/views/guides/getting_started/react_setup.md
@@ -8,11 +8,13 @@ description: React applications. Endlessly flexible presentational UI components
 ```sh
 yarn add playbook-ui
 ```
-#### Match your project's versions of React and ReactDOM with Playbook's versions
+#### Match your project's versions of React, ReactDOM, react-is and React Trix with Playbook's versions
 
 ```json
 "react": "17.0.2",
  "react-dom": "17.0.2",
+ "react-is": "^17.0.2",
+ "react-trix": "0.10.1",
 ```
 #### Import fonts and CSS styles
 Can be imported in your Index.js file or top level app Component
@@ -28,4 +30,7 @@ import 'playbook-ui/dist/fonts/fontawesome-min';
 import { Avatar, Button } from 'playbook-ui';
 ```
 #### CodeSandbox React Setup Example
-[Link to CodeSandbox Example](https://codesandbox.io/s/playbook-empty-6ixcw)
+[Link to CodeSandbox Example](https://codesandbox.io/s/playbook-empty-6ixcw)
+
+### Dependencies 
+[More details about Playbook dependencies](/guides/getting_started/dependencies)
diff --git a/playbook-website/app/views/pages/code_snippets/group_hover_jsx.txt b/playbook-website/app/views/pages/code_snippets/group_hover_jsx.txt
@@ -0,0 +1,21 @@
+<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>
diff --git a/playbook-website/config/menu.yml b/playbook-website/config/menu.yml
@@ -44,7 +44,7 @@ kits:
     description:
     status: stable
   - name: drawer
-    platforms: *1 
+    platforms: *1
     status: beta
 - category: buttons
   description: Buttons are used primarily for actions, such as “Save” and “Cancel”.
@@ -494,6 +494,9 @@ kits:
     description: The timeline kit can use two different line styles in the same timeline
       - solid and dotted line styles.
     status: stable
+  - name: skeleton_loading
+    platforms: *1
+    status: beta
 - category: tags
   description:
   components:

diff --git a/playbook-website/package.json b/playbook-website/package.json
@@ -22,7 +22,7 @@
     "@babel/preset-typescript": "^7.24.7",
     "@hotwired/turbo-rails": "^7.3.0",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
-    "@tiptap/extension-document": "^2.1.12",
+    "@tiptap/extension-document": "^2.6.6",
     "@tiptap/extension-highlight": "^2.0.3",
     "@tiptap/extension-horizontal-rule": "^2.0.3",
     "@tiptap/extension-link": "^2.0.2",

diff --git a/playbook/app/entrypoints/playbook-doc.js b/playbook/app/entrypoints/playbook-doc.js
@@ -88,6 +88,7 @@ import * as SelectableCard from 'kits/pb_selectable_card/docs'
 import * as SelectableCardIcon from 'kits/pb_selectable_card_icon/docs'
 import * as SelectableIcon from 'kits/pb_selectable_icon/docs'
 import * as SelectableList from 'kits/pb_selectable_list/docs'
+import * as SkeletonLoading from 'kits/pb_skeleton_loading/docs'
 import * as Source from 'kits/pb_source/docs'
 import * as StarRating from 'kits/pb_star_rating/docs'
 import * as StatChange from 'kits/pb_stat_change/docs'
@@ -197,6 +198,7 @@ WebpackerReact.registerComponents({
   ...SelectableCardIcon,
   ...SelectableIcon,
   ...SelectableList,
+  ...SkeletonLoading,
   ...Source,
   ...StarRating,
   ...StatChange,

diff --git a/playbook/app/entrypoints/playbook.scss b/playbook/app/entrypoints/playbook.scss
@@ -1,4 +1,3 @@
-
 @import 'kits/pb_advanced_table/advanced_table';
 @import 'kits/pb_avatar/avatar';
 @import 'kits/pb_avatar_action_button/avatar_action_button';
@@ -85,6 +84,7 @@
 @import 'kits/pb_selectable_card_icon/selectable_card_icon';
 @import 'kits/pb_selectable_icon/selectable_icon';
 @import 'kits/pb_selectable_list/selectable_list';
+@import 'kits/pb_skeleton_loading/skeleton_loading';
 @import 'kits/pb_source/source';
 @import 'kits/pb_star_rating/star_rating';
 @import 'kits/pb_stat_change/stat_change';

diff --git a/playbook/app/javascript/kits.js b/playbook/app/javascript/kits.js
@@ -93,6 +93,7 @@ export { default as SelectableCardIcon } from '../pb_kits/playbook/pb_selectable
 export { default as SelectableIcon } from '../pb_kits/playbook/pb_selectable_icon/_selectable_icon'
 export { default as SelectableList } from '../pb_kits/playbook/pb_selectable_list/_selectable_list'
 export { default as SelectableListItem } from '../pb_kits/playbook/pb_selectable_list/_item'
+export { default as SkeletonLoading} from '../pb_kits/playbook/pb_skeleton_loading/_skeleton_loading'
 export { default as Source } from '../pb_kits/playbook/pb_source/_source'
 export { default as StarRating } from '../pb_kits/playbook/pb_star_rating/_star_rating'
 export { default as StatChange } from '../pb_kits/playbook/pb_stat_change/_stat_change'

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx
@@ -16,13 +16,15 @@ interface CustomCellProps {
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   row: Row<GenericObject>
   value?: string
+  customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
 } 
 
 export const CustomCell = ({
   getValue,
   onRowToggleClick,
   row,
   value,
+  customRenderer,
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
 
@@ -61,7 +63,12 @@ export const CustomCell = ({
           </button>
         ) : null}
         <FlexItem paddingLeft={renderButton? "none" : "xs"}>
-          {row.depth === 0 ? getValue() : value}
+          {row.depth === 0 ? (
+            customRenderer ? customRenderer(row, getValue()) : getValue()
+           ) :(
+            customRenderer ? customRenderer(row, value) : value
+           )
+           }
         </FlexItem>
       </Flex>
     </div>