Merge pull request #1873 from Kajabi/develop

Next Version Bump
Kajabi · Mar 26, 2024 · 1496ee6 · 1496ee6
2 parents 1a6c398 + cd51072
commit 1496ee6
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 18 deletions.
diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb b/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb
@@ -103,6 +103,7 @@ def SageTokens.grid_templates
     "add-circle",
     "add-image",
     "add-small",
+    "add-square",
     "advanced",
     "ai-sparkle",
     "ai-writer",
@@ -125,10 +126,12 @@ def SageTokens.grid_templates
     "ban",
     "bank",
     "bell",
+    "block",
     "blog",
     "blog-filled",
     "bold",
     "broadcast",
+    "button",
     "calendar-date",
     "calendar-schedule",
     "calendar-simple",
@@ -168,6 +171,7 @@ def SageTokens.grid_templates
     "closed-captions",
     "cloud-upload",
     "code",
+    "code-block",
     "color",
     "columns",
     "comment",
@@ -214,6 +218,7 @@ def SageTokens.grid_templates
     "flag",
     "flash",
     "flash-filled",
+    "floppy-disk",
     "folder",
     "folder-group",
     "form",
@@ -229,6 +234,12 @@ def SageTokens.grid_templates
     "handle-2-vertical",
     "hashtag",
     "hd-video",
+    "heading-1",
+    "heading-2",
+    "heading-3",
+    "heading-4",
+    "heading-5",
+    "heading-6",
     "heading-large",
     "heading-small",
     "headset",
@@ -369,6 +380,7 @@ def SageTokens.grid_templates
     "user",
     "user-circle",
     "user-circle-filled",
+    "user-filled",
     "user-star",
     "user-star-filled",
     "users",

diff --git a/packages/sage-assets/lib/stylesheets/components/_icon.scss b/packages/sage-assets/lib/stylesheets/components/_icon.scss
@@ -4,7 +4,7 @@
 /// @group sage
 ////
 
-$-icon-font-cdn-version: "24"; // Keep in sync with desired `vX` folder from CDN
+$-icon-font-cdn-version: "25"; // Keep in sync with desired `vX` folder from CDN
 $-icon-font-path: "#{$sage-font-cdn-root}/sage/v#{$-icon-font-cdn-version}" !default;
 $-icon-font-version: 1; // Only used for cache busting so increment as needed for such purposes
 

diff --git a/packages/sage-assets/lib/stylesheets/tokens/_icon.scss b/packages/sage-assets/lib/stylesheets/tokens/_icon.scss
@@ -43,6 +43,7 @@ $sage-icons: (
   add-circle: unicode(e902),
   add-image: unicode(e903),
   add-small: unicode(e904),
+  add-square: unicode(e970),
   advanced: unicode(ea11),
   ai-sparkle: unicode(ea02),
   ai-writer: unicode(e91d),
@@ -65,10 +66,12 @@ $sage-icons: (
   ban: unicode(e913),
   bank: unicode(e914),
   bell: unicode(e915),
+  block: unicode(ea18),
   blog: unicode(e916),
   blog-filled: unicode(ea0f),
   bold: unicode(e917),
   broadcast: unicode(e918),
+  button: unicode(ea1b),
   calendar-date: unicode(e919),
   calendar-schedule: unicode(e91a),
   calendar-simple: unicode(e91b),
@@ -109,6 +112,7 @@ $sage-icons: (
   closed-captions: unicode(e93e),
   cloud-upload: unicode(ea06),
   code: unicode(e93f),
+  code-block: unicode(ea1c),
   color: unicode(e940),
   columns: unicode(e941),
   comment: unicode(e942),
@@ -155,6 +159,7 @@ $sage-icons: (
   flag: unicode(e962),
   flash: unicode(ea07),
   flash-filled: unicode(ea08),
+  floppy-disk: unicode(ea1d),
   folder: unicode(e963),
   folder-group: unicode(e964),
   form: unicode(e965),
@@ -170,8 +175,14 @@ $sage-icons: (
   handle-2-vertical: unicode(e96d),
   hashtag: unicode(e96e),
   hd-video: unicode(ea0a),
+  heading-1: unicode(ea1e),
+  heading-2: unicode(ea1f),
+  heading-3: unicode(ea20),
+  heading-4: unicode(ea21),
+  heading-5: unicode(ea22),
+  heading-6: unicode(ea23),
   heading-large: unicode(e96f),
-  heading-small: unicode(e970),
+  heading-small: unicode(ea24),
   headset: unicode(e971),
   help: unicode(e972),
   help-filled: unicode(e973),
@@ -310,6 +321,7 @@ $sage-icons: (
   user: unicode(e9d8),
   user-circle: unicode(e9d9),
   user-circle-filled: unicode(e9da),
+  user-filled: unicode(ea25),
   user-star: unicode(e9db),
   user-star-filled: unicode(e9dc),
   users: unicode(e9dd),

diff --git a/packages/sage-react/lib/Search/Search.jsx b/packages/sage-react/lib/Search/Search.jsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { Button } from '../Button';
 import { SageTokens } from '../configs';
 
-export const Search = ({
+export const Search = React.forwardRef(({
   className,
   contained,
   disabled,
@@ -16,7 +16,7 @@ export const Search = ({
   placeholder,
   value,
   ...rest
-}) => {
+}, ref) => {
   const classNames = classnames(
     'sage-search',
     className,
@@ -42,6 +42,7 @@ export const Search = ({
       )}
       <div className="sage-search__field-wrapper">
         <input
+          ref={ref}
           className="sage-search__input"
           type="search"
           onChange={onChange}
@@ -68,7 +69,7 @@ export const Search = ({
       </div>
     </div>
   );
-};
+});
 
 Search.defaultProps = {
   className: null,

diff --git a/packages/sage-react/lib/Search/Search.story.jsx b/packages/sage-react/lib/Search/Search.story.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Search } from './Search';
 
 export default {
@@ -38,6 +38,7 @@ export const ContainedWithLabelHidden = (args) => {
     </>
   );
 };
+
 ContainedWithLabelHidden.args = {
   contained: true,
   hideLabel: true,
@@ -47,6 +48,34 @@ ContainedWithLabelHidden.args = {
   value: ''
 };
 
+export const WithRef = (args) => {
+  const [searchValue, setSearchValue] = useState('');
+  const searchInputRef = React.useRef(null);
+
+  useEffect(() => {
+    searchInputRef.current.focus();
+  }, []);
+
+  return (
+    <>
+      <Search
+        {...args}
+        ref={searchInputRef}
+        onChange={(e) => setSearchValue(e.target.value)}
+        onClear={() => setSearchValue('')}
+        value={searchValue}
+      />
+    </>
+  );
+};
+
+WithRef.args = {
+  label: 'Search',
+  id: 'search_with_ref',
+  placeholder: 'Search',
+  value: '',
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   contained: true,

diff --git a/packages/sage-react/lib/configs/tokens/icons.js b/packages/sage-react/lib/configs/tokens/icons.js
@@ -4,6 +4,7 @@ export const TOKENS_ICONS = {
   ADD_CIRCLE: 'add-circle',
   ADD_IMAGE: 'add-image',
   ADD_SMALL: 'add-small',
+  ADD_SQUARE: 'add-square',
   ADVANCED: 'advanced',
   AI_SPARKLE: 'ai-sparkle',
   AI_WRITER: 'ai-writer',
@@ -26,10 +27,12 @@ export const TOKENS_ICONS = {
   BAN: 'ban',
   BANK: 'bank',
   BELL: 'bell',
+  BLOCK: 'block',
   BLOG: 'blog',
   BLOG_FILLED: 'blog-filled',
   BOLD: 'bold',
   BROADCAST: 'broadcast',
+  BUTTON: 'button',
   CALENDAR_DATE: 'calendar-date',
   CALENDAR_SCHEDULE: 'calendar-schedule',
   CALENDAR_SIMPLE: 'calendar-simple',
@@ -69,6 +72,7 @@ export const TOKENS_ICONS = {
   CLOSED_CAPTIONS: 'closed-captions',
   CLOUD_UPLOAD: 'cloud-upload',
   CODE: 'code',
+  CODE_BLOCK: 'code-block',
   COLOR: 'color',
   COMMENT: 'comment',
   CONNECT: 'connect',
@@ -115,6 +119,7 @@ export const TOKENS_ICONS = {
   FLAG: 'flag',
   FLASH: 'flash',
   FLASH_FILLED: 'flash-filled',
+  FLOPPY_DISK: 'floppy-disk',
   FOLDER: 'folder',
   FOLDER_GROUP: 'folder-group',
   FORM: 'form',
@@ -130,6 +135,12 @@ export const TOKENS_ICONS = {
   HANDLE_2_VERTICAL: 'handle-2-vertical',
   HASHTAG: 'hashtag',
   HD_VIDEO: 'hd-video',
+  HEADING_1: 'heading-1',
+  HEADING_2: 'heading-2',
+  HEADING_3: 'heading-3',
+  HEADING_4: 'heading-4',
+  HEADING_5: 'heading-5',
+  HEADING_6: 'heading-6',
   HEADING_LARGE: 'heading-large',
   HEADING_SMALL: 'heading-small',
   HEADSET: 'headset',
@@ -270,6 +281,7 @@ export const TOKENS_ICONS = {
   USER: 'user',
   USER_CIRCLE: 'user-circle',
   USER_CIRCLE_FILLED: 'user-circle-filled',
+  USER_FILLED: 'user-filled',
   USER_STAR: 'user-star',
   USER_STAR_FILLED: 'user-star-filled',
   USERS: 'users',

diff --git a/packages/sage-system/lib/dropdown.js b/packages/sage-system/lib/dropdown.js
@@ -189,20 +189,23 @@ Sage.dropdown = (function () {
     return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
   }
 
-  function positionElement(el) {
+  function positionElement(dropdownElement) {
+    // Guard clause to check if wrapperRef.current is null
+    if (!dropdownElement) return;
+
     let directionX = null;
     let directionY = null;
 
     // Elements
-    const button = el;
-    const panel = el.lastElementChild;
+    const button = dropdownElement;
+    const panel = dropdownElement.lastElementChild;
     const win = panel.ownerDocument.defaultView;
     const docEl = window.document.documentElement;
 
     panel.style.top = ''; // resets the style
     panel.style.left = ''; // resets the style
     panel.style.right = ''; // resets the style
-  
+
     // Dimensions
     const buttonDimensions = button.getBoundingClientRect();
     const panelDimensions = panel.getBoundingClientRect();
@@ -211,14 +214,14 @@ Sage.dropdown = (function () {
       top: (buttonDimensions.height / 2) + panelDimensions.height,
       left: (buttonDimensions.width / 2) + panelDimensions.width,
     };
-  
+
     const viewport = {
       top: docEl.scrollTop,
       bottom: window.pageYOffset + docEl.clientHeight,
       left: docEl.scrollLeft,
       right: window.pageXOffset + docEl.clientWidth,
     };
-  
+
     const offset = {
       top: panelDimensions.top + win.pageYOffset,
       left: panelDimensions.left + win.pageXOffset,
@@ -253,7 +256,7 @@ Sage.dropdown = (function () {
     } else if (!enoughSpaceLeft && enoughSpaceRight) {
       directionX = 'right';
     }
-    
+
     if (directionX === 'left') {
       panel.style.left = 'inherit';
       panel.style.right = 0;
@@ -262,7 +265,7 @@ Sage.dropdown = (function () {
       panel.style.right = 'inherit';
     }
   }
-  
+
   function open(el) {
     el.setAttribute("aria-expanded", "true");
     positionElement(el);

diff --git a/packages/sage-system/lib/tooltip.js b/packages/sage-system/lib/tooltip.js
@@ -53,17 +53,18 @@ Sage.tooltip = (function() {
     positionTooltip(evt.target, tooltip, pos);
   }
 
-
   // Removes tooltip from DOM
   function removeTooltip(evt) {
-    if (!evt.target.hasAttribute(DATA_ATTR) || !document.querySelector(SELECTOR) || !document.querySelector(`.${TOOLTIP_CLASS}`) || !evt.target.dataset.jsTooltip)  return;
+    if (!evt.target.hasAttribute(DATA_ATTR) || !document.querySelector(SELECTOR) || !document.querySelector(`.${TOOLTIP_CLASS}`) || !evt.target.dataset.jsTooltip) return;
 
     window.requestAnimationFrame(function() {
-      document.body.removeChild(document.querySelector(`.${TOOLTIP_CLASS}`));
+        var tooltip = document.querySelector(`.${TOOLTIP_CLASS}`);
+        if (tooltip && tooltip.parentNode === document.body) { // Ensure tooltip exists and its parent is document.body before removing
+            document.body.removeChild(tooltip);
+        }
     });
   }
 
-
   // Builds list of modifier classes from array of data-attributes
   function generateClasses(ele, evt) {
     ele.dataItems.forEach(function(item) {