playbook_ui 12.34.0 → 12.35.0

data/app/pb_kits/playbook/pb_collapsible/index.js

@@ -2,8 +2,8 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 const MAIN_SELECTOR = '[data-collapsible-main]'
 const CONTENT_SELECTOR = '[data-collapsible-content]'
-const DOWN_ARROW_SELECTOR = '.fa-chevron-down'
-const UP_ARROW_SELECTOR = '.fa-chevron-up'
+const DOWN_ARROW_SELECTOR = '#collapsible_open_icon'
+const UP_ARROW_SELECTOR = '#collapsible_close_icon'
 
 export default class PbCollapsible extends PbEnhancedElement {
   static get selector() {
@@ -75,5 +75,5 @@ export default class PbCollapsible extends PbEnhancedElement {
   displayUpArrow() {
     this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
-  }
+   }
 }

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -263,8 +263,20 @@
   }
 }
 
-// Styles specific to Rails version of kit
-// Rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
+[class*="dialog_body"] {
+  padding: $space_sm;
+}
+
+[class*="dialog_header"] {
+  padding: $space_sm;
+}
+
+[class*="dialog_footer"] {
+  padding: $space_sm;
+}
+
+//styles specific to rails version of kit
+// rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
 .pb_dialog_wrapper_rails {
   $medium: 500px;
   $large: 800px;

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx

@@ -11,9 +11,9 @@ type DialogBodyProps = {
 
 // Body component
 const DialogBody = (props: DialogBodyProps) => {
-  const { children, padding = "sm", className } = props
+  const { children, className } = props
   const bodyCSS = buildCss("dialog_body")
-  const bodySpacing = globalProps(props, { padding })
+  const bodySpacing = globalProps(props)
 
   return (
     <div className={classnames(bodyCSS, bodySpacing, className)}>

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx

@@ -25,16 +25,13 @@ type DialogFooterProps = {
 const DialogFooter = (props: DialogFooterProps) => {
   const {
     children,
-    padding = "sm",
-    paddingBottom = "sm",
-    paddingX = "sm",
     className,
     spacing = "between",
     separator = false,
   } = props
 
   const footerCSS = buildCss("dialog_footer")
-  const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
+  const footerSpacing = globalProps(props)
 
   return (
     <>

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx

@@ -28,7 +28,6 @@ const DialogHeader = (props: DialogHeaderProps) => {
     children,
     className,
     data = {},
-    padding = "sm",
     spacing = "between",
     closeable = true,
     separator = true,
@@ -38,7 +37,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
   const dataProps = buildDataProps(data)
   const api = useContext(DialogContext)
   const headerCSS = buildCss("dialog_header")
-  const headerSpacing = globalProps(props, { padding })
+  const headerSpacing = globalProps(props)
 
   /* eslint-disable react/jsx-handler-names */
 

data/app/pb_kits/playbook/pb_highlight/_highlight.scss

@@ -1,6 +1,7 @@
-@import "../tokens/colors";
-@import "../tokens/opacity";
-
 [class^=pb_highlight_kit] {
   background-color: rgba($yellow,$opacity_2);
+
+  mark {
+    background-color: unset;
+  }
 }

data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb

@@ -1,20 +1,10 @@
 
-<%= pb_rails("highlight", props: {text: "Highlight Kit"})%>
-<br>
-<br>
-<%= pb_rails("title", props: {text: "Kit wrapping",size: 4})%>
-<br>
 <%= pb_rails("body") do%>
-This an example<%= pb_rails("highlight") do%>Highlight Example<% end %>around.
+    This is the <%= pb_rails("highlight") do%>Highlight Kit<% end %>.
 <% end %>
-<br>
-<br>
-<%= pb_rails("title", props: {text: "Search",size: 4})%>
-<br>
-<%= pb_rails("body", props: {text: "hello helpers are great even highlighting this", highlighting: true, highlighted_text: ["hello","great"]})%>
 
-<br>
-<br>
-<%= pb_rails("caption", props: {size: "xs", text: "To enable highlighting make sure the [highlighting] flag is set to true. "}) %>
-<br>
-<br>
+<%= pb_rails("body", props: {padding_bottom: "md"}) do%>
+    Hello this is a <%= pb_rails("highlight") do%>highlight<% end %> wrapped.
+<% end %>
+
+<%= pb_rails("body", props: {text: "This is text highlighted in the Body Kit using the text prop.", highlighting: true, highlighted_text: ["highlighted", "Body Kit"]})%>

data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.jsx

@@ -7,7 +7,7 @@ const HighlightDefault = (props) => (
   <div>
     <Highlight
         highlightedText={['highlight kit']}
-        text="This is the Highlight Kit"
+        text="This is the Highlight Kit."
         {...props}
     />
     <br />
@@ -15,7 +15,7 @@ const HighlightDefault = (props) => (
       {' '}
       {'Hello this is a'}
       {' '}
-      <Highlight text=" highlight wrapped"/>
+      <Highlight text=" highlight wrapped."/>
     </Body>
     <br />
     <Body

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

@@ -3,7 +3,5 @@ examples:
   rails:
   - highlight_default: Default
   
-  
   react:
   - highlight_default: Default
-  

data/app/pb_kits/playbook/pb_message/_message.scss

@@ -4,6 +4,24 @@
 @import "../pb_caption/caption";
 @import "../pb_timestamp/timestamp";
 
+$mention_bg_color_yellow: rgba(249, 187, 0, 0.2);
+$mention_bg_color_blue: #e5eefa;
+
 [class^=pb_message_kit] {
   @include pb_message;
+
+  [class^=pb_message_mention] {
+    border-radius: $space_xxs;
+    color: $primary;
+    display: inline;
+    padding: $space_xxs;
+    
+    &[class*=_user] {
+      background-color: $mention_bg_color_blue;
+    }
+    
+    &[class*=_self] {
+      background-color: $mention_bg_color_yellow;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -11,6 +11,7 @@ import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
 import Timestamp from '../pb_timestamp/_timestamp'
 import Title from '../pb_title/_title'
+import MessageMention from './_message_mention'
 
 type MessageProps = {
   aria: { [key: string]: string },
@@ -113,4 +114,5 @@ const Message = (props: MessageProps) => {
   )
 }
 
+Message.Mention = MessageMention
 export default Message

data/app/pb_kits/playbook/pb_message/_message_mention.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+type MessageMentionProps = {
+  aria: { [key: string]: string },
+  children?: React.ReactChild[] | React.ReactChild,
+  className?: string,
+  data?: object,
+  id?: string,
+  variant: 'user' | 'self',
+}
+
+const MessageMention = (props: MessageMentionProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    id,
+    variant = 'user',
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_message_mention', variant),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default MessageMention

data/app/pb_kits/playbook/pb_message/docs/_message_mentions.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("message", props: {
+  label: "Keith Craig",
+  timestamp: "2 days ago",
+  avatar_name: "Keith Craig",
+  padding_bottom: "md"
+}) do %>
+  <%= pb_rails("message/message_mention", props: { variant: "user" }) do %>
+    @all
+  <% end %> let's welcome 
+  <%= pb_rails("message/message_mention", props: { variant: "self" }) do %>
+    @Lucille Sanchez
+  <% end %> to the team this week!
+<% end %>
+
+<%= pb_rails("message", props: {
+  label: "Lucille Sanchez",
+  timestamp: "2 days ago",
+  avatar_name: "Lucille Sanchez",
+  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
+}) do %>
+  <%= pb_rails("message/message_mention", props: {variant: "self"}) do %>
+    @Keith Craig
+  <% end %> thanks for the warm welcome! I'm so excited!
+<% end %>

data/app/pb_kits/playbook/pb_message/docs/_message_mentions.jsx

@@ -0,0 +1,31 @@
+import React from "react"
+import Message from "../_message"
+
+const MessageDefault = (props) => {
+    return (
+        <>
+            <Message
+                avatarName='Keith Craig'
+                label='Keith Craig'
+                paddingBottom="md"
+                timestamp='2 days ago'
+                {...props}
+            >
+                <Message.Mention variant='user'>{'@all'}</Message.Mention>{` let's welcome `}
+                <Message.Mention variant='self'>{'@Lucille Sanchez'}</Message.Mention>{' to the team this week!'}
+            </Message>
+
+            <Message
+                avatarName='Lucille Sanchez'
+                avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
+                label='Lucille Sanchez'
+                timestamp='2 days ago'
+                {...props}
+            >
+                <Message.Mention variant='self'>{'@Keith Craig'}</Message.Mention>{` thanks for the warm welcome! I'm so excited!`}
+            </Message>
+        </>
+    )
+}
+
+export default MessageDefault

data/app/pb_kits/playbook/pb_message/docs/_message_mentions.md

@@ -0,0 +1 @@
+The message kit also supports @mentions using a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure. See the code example for details on how to pass user mentions through your messages.

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

@@ -4,10 +4,10 @@ examples:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
-
+  - message_mentions: Mentions
 
   react:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
-
+  - message_mentions: Mentions

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

@@ -1,4 +1,4 @@
 export { default as MessageDefault } from './_message_default.jsx'
 export { default as MessageTimestamp } from './_message_timestamp.jsx'
 export { default as MessageHover } from './_message_hover.jsx'
-
+export { default as MessageMentions } from './_message_mentions.jsx'

data/app/pb_kits/playbook/pb_message/message_mention.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  aria: object.aria) do %>
+    <%= content %>
+<% end %>

data/app/pb_kits/playbook/pb_message/message_mention.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbMessage
+    class MessageMention < Playbook::KitBase
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[user self],
+                     default: "user"
+
+      def classname
+        generate_classname("pb_message_mention", variant)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss

@@ -0,0 +1,6 @@
+[class^="pb_nav_list"] {
+  .pb_collapsible_main_kit,
+  .pb_collapsible_content_kit {
+    padding: 0 !important;
+  }
+}

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -6,15 +6,17 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 import Image from '../pb_image/_image'
+import Collapsible from '../pb_collapsible/_collapsible'
 
 type NavItemProps = {
   active?: boolean,
   aria?: { [key: string]: string },
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
+  collapsible?: boolean,
   data?: object,
   iconLeft?: string,
-  iconRight?: string,
+  iconRight?: string | string[],
   id?: string,
   imageUrl?: string,
   link?: string,
@@ -29,6 +31,7 @@ const NavItem = (props: NavItemProps) => {
     aria = {},
     children,
     className,
+    collapsible,
     data = {},
     iconLeft,
     iconRight,
@@ -53,54 +56,100 @@ const NavItem = (props: NavItemProps) => {
       className={classes}
       id={id}
     >
-      <Tag
-        className="pb_nav_list_item_link"
-        href={link}
-        onClick={onClick}
-        target={target}
-      >
-        {imageUrl &&
-          <div
-            className="pb_nav_list_item_icon_section"
-            key={imageUrl}
-          >
-            <Image
-              className="pb_nav_img_wrapper"
-              url={imageUrl}
-            />
-          </div>
-        }
-
-        {iconLeft &&
-          <div
-            className="pb_nav_list_item_icon_section"
-            key={iconLeft}
-          >
-            <Icon
-              className="pb_nav_list_item_icon_left"
-              fixedWidth
-              icon={iconLeft}
-            />
-          </div>
-        }
-
-        <span className="pb_nav_list_item_text">
-          {text || children}
-        </span>
-
-        {iconRight &&
-          <div
-            className="pb_nav_list_item_icon_section"
-            key={iconRight}
-          >
-            <Icon
-              className="pb_nav_list_item_icon_right"
-              fixedWidth
-              icon={iconRight}
-            />
-          </div>
-        }
-      </Tag>
+      {
+        collapsible ? (
+          <Collapsible icon={iconRight ? iconRight : ['plus','minus']} iconSize="xs">
+          <Collapsible.Main>
+          <Tag
+          className="pb_nav_list_item_link"
+          href={link}
+          onClick={onClick}
+          target={target}
+        >
+          {imageUrl &&
+            <div
+              className="pb_nav_list_item_icon_section"
+              key={imageUrl}
+            >
+              <Image
+                className="pb_nav_img_wrapper"
+                url={imageUrl}
+              />
+            </div>
+          }
+  
+          {iconLeft &&
+            <div
+              className="pb_nav_list_item_icon_section"
+              key={iconLeft}
+            >
+              <Icon
+                className="pb_nav_list_item_icon_left"
+                fixedWidth
+                icon={iconLeft}
+              />
+            </div>
+          }
+           <span className="pb_nav_list_item_text">
+            {text}
+          </span>
+        </Tag>
+        </Collapsible.Main>
+        <Collapsible.Content>
+        {children}
+        </Collapsible.Content>
+        </Collapsible>
+        ) : (
+        <Tag
+          className="pb_nav_list_item_link"
+          href={link}
+          onClick={onClick}
+          target={target}
+        >
+          {imageUrl &&
+            <div
+              className="pb_nav_list_item_icon_section"
+              key={imageUrl}
+            >
+              <Image
+                className="pb_nav_img_wrapper"
+                url={imageUrl}
+              />
+            </div>
+          }
+  
+          {iconLeft &&
+            <div
+              className="pb_nav_list_item_icon_section"
+              key={iconLeft}
+            >
+              <Icon
+                className="pb_nav_list_item_icon_left"
+                fixedWidth
+                icon={iconLeft}
+              />
+            </div>
+          }
+  
+          <span className="pb_nav_list_item_text">
+            {text || children}
+          </span>
+  
+          {iconRight &&
+            <div
+              className="pb_nav_list_item_icon_section"
+              key={iconRight as string}
+            >
+              <Icon
+                className="pb_nav_list_item_icon_right"
+                fixedWidth
+                icon={iconRight as string}
+              />
+            </div>
+          }
+        </Tag>
+        )
+      }
     </li>
   )
 }

data/app/pb_kits/playbook/pb_nav/_nav.scss

@@ -4,3 +4,4 @@
 @import "../tokens/colors";
 @import "./vertical_nav";
 @import "./horizontal_nav";
+@import "./collapsible_nav";

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -29,22 +29,20 @@
         flex: 1;
         font-weight: $regular;
       }
-      @media (hover:hover) {
-        &:hover {
-          background-color: rgba($primary, 0.03);
-          [class*=_icon] {
-            color: $primary;
-          }
-          [class*=_text] {
-            color: $primary;
-          }
-        }
-      }
     }
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
       letter-spacing: normal;
     }
+      &:hover {
+        background-color: rgba($primary, 0.03);
+        [class*=_icon] {
+          color: $primary;
+        }
+        [class*=_text] {
+          color: $primary;
+        }
+      }
   }
 }

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("nav", props: { variant: "subtle" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
+        <%= pb_rails("nav", props: { variant: "subtle" }) do %>
+            <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
+        <% end %>
+    <% end %>
+  <% end %>
+