Merge pull request #2004 from Kajabi/develop

Version Bump PR
Kajabi · Oct 22, 2024 · 24b4b5a · 24b4b5a
2 parents 356e7c8 + 2fe5d18
commit 24b4b5a
Show file tree

Hide file tree

Showing 25 changed files with 117 additions and 41 deletions.
diff --git a/.github/labeler.yml b/.github/labeler.yml
@@ -0,0 +1,2 @@
+mercury-rising:
+  - base-branch: ['mercury-rising']
diff --git a/docs/lib/sage_rails/app/sage_components/sage_icon.rb b/docs/lib/sage_rails/app/sage_components/sage_icon.rb
@@ -6,7 +6,7 @@ class SageIcon < SageComponent
     card_color: [:optional, NilClass, Set.new(SageSchemas::STATUSES), String],
     circular: [:optional, NilClass, TrueClass],
     color: [:optional, NilClass, SageSchemas::COLOR_SLIDER],
-    icon: SageSchemas::ICON,
+    icon: String,
     label: [:optional, NilClass, String],
     size: [:optional, NilClass, SageSchemas::ICON_SIZE],
   })

diff --git a/lerna.json b/lerna.json
@@ -3,7 +3,7 @@
     "packages/*",
     "docs"
   ],
-  "version": "independent",
+  "version": "6.0.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -14,7 +14,7 @@ $-btn-base-padding-block: sage-spacing(xs); // vertical (y) axis
 $-btn-base-padding-inline: sage-spacing(sm); // horizontal (x) axis
 $-btn-base-line-height: var(--sage-line-height-body, #{rem(24px)});
 $-btn-border-radius: 9999px;
-$-btn-shadow-base: sage-shadow(sm);
+$-btn-shadow-base: sage-shadow(050);
 $-btn-icon-only-standard-size: rem(40px);
 $-btn-icon-only-subtle-size: rem(16px);
 $-btn-icon-only-hover-size: rem(24px);
@@ -49,33 +49,34 @@ $-btn-base-styles: (
   primary: (
     default: (
       color: sage-color(white),
-      background-color: sage-color(charcoal, 400),
-      border-color: sage-color(charcoal, 400),
+      background-color: sage-color(grey, 900),
+      border-color: sage-color(grey, 900),
       ring-color: sage-color(purple, 300),
     ),
     hover: (
       color: sage-color(white),
       background-color: sage-color(grey, 950),
+      border-color: sage-color(grey, 950),
     ),
     focus: (
       color: sage-color(white),
       background-color: sage-color(grey, 900),
       border-color: sage-color(grey, 900),
     ),
     disabled: (
-      color: sage-color(grey, 600),
-      background-color: sage-color(grey, 200),
-      border-color: sage-color(grey, 200),
+      color: sage-color(grey, 400),
+      background-color: sage-color(grey, 150),
+      border-color: sage-color(grey, 150),
     )
   ),
   secondary: (
     default: (
-      color: sage-color(grey, 900),
+      color: sage-color(grey, 800),
       background-color: sage-color(white),
       ring-color: sage-color(purple, 300),
     ),
     hover: (
-      color: sage-color(grey, 900),
+      color: sage-color(grey, 950),
       background-color: sage-color(grey, 100),
     ),
     focus: (
@@ -96,7 +97,8 @@ $-btn-base-styles: (
     ),
     hover: (
       color: sage-color(white),
-      background-color: sage-color(red, 800),
+      background-color: sage-color(red, 600),
+      border-color: sage-color(red, 600),
     ),
     focus: (
       color: sage-color(white),
@@ -184,9 +186,14 @@ $-btn-loading-min-height: rem(36px);
   border-width: 1px;
   border-style: solid;
   border-radius: $-btn-border-radius;
+  box-shadow: $-btn-shadow-base;
   transition: $-btn-transition;
   transition-property: border, background-color, box-shadow;
 
+  &:focus {
+    outline: none;
+  }
+
   &:disabled,
   &[aria-disabled="true"] {
     @include sage-button-style-disabled;
@@ -238,7 +245,9 @@ $-btn-loading-min-height: rem(36px);
   }
 
   .sage-dropdown__trigger--select & {
-    font-weight: sage-font-weight(regular);
+    height: rem(40px);
+    font-family: $-body-font-stack;
+    font-weight: sage-font-weight(medium);
     border-width: 0;
     box-shadow: sage-border-interactive(default);
     &:hover {
@@ -524,6 +533,7 @@ a.sage-btn {
         }
       }
       @else if ($-style-type-name == focus) {
+        &:focus,
         &:focus-visible,
         &:active {
           color: map-get($-style-type-configs, color);
@@ -588,31 +598,27 @@ a.sage-btn {
 
 // Secondary styles, no shadow variation
 .sage-btn--secondary {
-  color: sage-color(grey, 900);
+  color: sage-color(grey, 800);
   background-color: sage-color(white);
-  border: 1px solid sage-color(grey, 500);
+  border: 1px solid sage-color(grey, 200);
 
   &:hover {
-    background-color: sage-color(white);
-    border-color: sage-color(grey, 600);
-  }
-
-  &:focus {
-    outline: none;
+    color: sage-color(grey, 950);
+    background-color: sage-color(grey, 100);
+    border-color: sage-color(grey, 300);
   }
 
   &:focus-visible,
   &:active {
-    color: sage-color(grey, 800);
     background-color: sage-color(white);
     border-color: sage-color(grey);
   }
 
   &:disabled,
   &[aria-disabled="true"] {
-    color: sage-color(grey, 600);
+    color: sage-color(grey, 400);
     background-color: sage-color(white);
-    border-color: sage-color(grey, 200);
+    border-color: sage-color(grey, 150);
   }
 }
 

diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -19,6 +19,7 @@ $-sage-card-background: transparent;
   .sage-card,
   .sage-panel & {
     box-shadow: none;
+    border: sage-border();
   }
 }
 

diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
@@ -213,6 +213,10 @@ $-checkbox-focus-outline-color: sage-color(purple, 300);
     background-color: sage-color(grey, 100);
   }
 
+  &:focus:not(:disabled) {
+    outline: none;
+  }
+
   &:focus-visible:not(:disabled),
   &:active:not(:disabled) {
     outline: none;

diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -65,6 +65,10 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
     color: $-choice-color-active;
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:focus-visible {
     border-color: sage-color(purple, 300);
     outline: none;
@@ -98,6 +102,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
   .sage-card & ,
   .sage-panel & {
     box-shadow: none;
+    border: sage-border();
   }
 
   .sage-tabs--layout-default &:not(:last-child) {

diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -122,6 +122,10 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
   @extend %t-sage-body;
 
+  &:focus {
+    outline: none;
+  }
+
   &:active,
   &:focus-visible,
   &:focus-within {
@@ -434,6 +438,10 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
   }
 }
 
+.sage-dropdown__trigger--select {
+  font-family: $-body-font-stack;
+}
+
 .sage-dropdown__trigger--select,
 .sage-dropdown__trigger--select-labeled {
   :not(.sage-dropdown--customized) > & {
@@ -448,10 +456,11 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 .sage-dropdown__trigger-selected-value {
   justify-content: space-between;
   width: 100%;
+  font-weight: sage-font-weight(medium);
 }
 
 .sage-dropdown__trigger-label {
-  @extend %t-sage-body;
+  @extend %t-sage-body-med;
 
   position: absolute;
   z-index: sage-z-index(default, 1);
@@ -467,9 +476,9 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
   .sage-dropdown--value-selected & {
     @extend %t-sage-body-xsmall-semi;
-
     transform: translateY(calc(#{-$-dropdown-height} + 50%));
     width: auto;
+    font-weight: sage-font-weight(medium);
     background-color: $-dropdown-trigger-label-color-label-background;
     transition: transform 0.15s ease-in-out, color 0.15s ease-out;
   }

diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
@@ -96,7 +96,7 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   }
 
   .sage-select--value-selected & {
-    color: sage-color(grey, 900);
+    color: map-get($sage-field-colors, default);
   }
 
   .sage-select--value-selected &:not(:disabled) + .sage-select__arrow::before {

diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss
@@ -176,6 +176,10 @@ $-link-base-styles: (
     color: sage-color(grey, 600);
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:hover,
   &:active,
   &:focus-visible {

diff --git a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
@@ -77,6 +77,10 @@ $-media-tile-breakpoints: (
     color: inherit;
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:focus-visible {
     outline: 0;
 

diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss
@@ -11,6 +11,7 @@
   .sage-card &,
   .sage-panel {
     box-shadow: none;
+    border: sage-border();
   }
 }
 

diff --git a/packages/sage-assets/lib/stylesheets/components/_radio.scss b/packages/sage-assets/lib/stylesheets/components/_radio.scss
@@ -176,6 +176,10 @@ $-radio-focus-outline-color: currentColor;
     }
   }
 
+  &:focus:not(:disabled) {
+    outline: none;
+  }
+
   &:focus-visible:not(:disabled),
   &:active:not(:disabled) {
     outline: none;

diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss
@@ -115,10 +115,6 @@ $-search-icon: "::before";
   .sage-dropdown__panel & {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-
-    &:focus-within {
-      box-shadow: inset map-get($sage-toolbar-button-borders, focus);
-    }
   }
 }
 

diff --git a/packages/sage-assets/lib/stylesheets/components/_stat_box.scss b/packages/sage-assets/lib/stylesheets/components/_stat_box.scss
@@ -17,6 +17,7 @@ $-stat-box-image-max-width: rem(48px);
   .sage-card &,
   .sage-panel & {
     box-shadow: none;
+    border: sage-border();
   }
 
   &.sage-stat-box--raised {

diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -48,6 +48,7 @@ $-switch-toggle-size: rem(16px);
     .sage-card &,
     .sage-panel & {
       box-shadow: none;
+      border: sage-border();
     }
   }
 
@@ -95,6 +96,10 @@ $-switch-toggle-size: rem(16px);
   border-radius: $-switch-border-radius;
   transition: background 0.3s ease-out;
 
+  &:focus {
+    outline: none !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .sage-switch--has-border & {
     position: absolute;
   }

diff --git a/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss b/packages/sage-assets/lib/stylesheets/components/_transaction_card.scss
@@ -14,6 +14,7 @@ $-transaction-card-price-max-width: rem(100px);
   .sage-card &,
   .sage-panel & {
     box-shadow: none;
+    border: sage-border();
   }
 
   position: relative;

diff --git a/packages/sage-assets/lib/stylesheets/core/_typography.scss b/packages/sage-assets/lib/stylesheets/core/_typography.scss
@@ -6,7 +6,7 @@
 
 
 // Font definitions
-$-heading-font: "GreetStandard";
+$-heading-font: "GreetStandard", "Inter", -apple-system, system-ui, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Ubuntu", sans-serif;
 $-body-font-stack: "Inter", -apple-system, system-ui, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Ubuntu", sans-serif;
 $-body-margin-bottom: sage-spacing(xs);
 $-headings-margin-bottom: sage-spacing(sm);

diff --git a/packages/sage-packs/package.json b/packages/sage-packs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kajabi/sage-packs",
-  "version": "1.1.16",
+  "version": "6.0.0",
   "description": "Sage Packs",
   "keywords": [
     "sage",

diff --git a/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx b/packages/sage-react/lib/ExpandableCard/ExpandableCard.jsx
@@ -12,6 +12,7 @@ export const ExpandableCard = ({
   expanded,
   children,
   className,
+  customKey,
   headerContent,
   name,
   onClick,
@@ -32,7 +33,7 @@ export const ExpandableCard = ({
     }
   };
 
-  const id = uuid();
+  const id = customKey || uuid();
 
   const containerClassnames = classnames(
     'sage-expandable-card',
@@ -98,6 +99,7 @@ ExpandableCard.defaultProps = {
   expanded: false,
   children: null,
   className: null,
+  customKey: null,
   headerContent: null,
   alignTrigger: 'middle',
   name: null,
@@ -109,6 +111,7 @@ ExpandableCard.defaultProps = {
 ExpandableCard.propTypes = {
   alignArrowRight: PropTypes.bool,
   bodyBordered: PropTypes.bool,
+  customKey: PropTypes.string,
   headerContent: PropTypes.node,
   expanded: PropTypes.bool,
   className: PropTypes.string,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		mercury-rising:
		- base-branch: ['mercury-rising']