diff --git a/.github/labeler.yml b/.github/labeler.yml
new file mode 100644
index 0000000000..92d3e92a7b
--- /dev/null
+++ 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
index 9b0b7b7e78..5d54b21dd5 100644
--- 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
index 61bb73671f..89f06de875 100644
--- 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
index f31cb406d7..5e9bd9a688 100644
--- 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,13 +49,14 @@ $-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),
@@ -63,19 +64,19 @@ $-btn-base-styles: (
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
index 60ffb9bd64..7071da1a87 100644
--- 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
index e64daed60f..4d14795dd9 100644
--- 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
index 9c59d682e0..7cb579aaf6 100644
--- 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
index c31161dc81..8bc011f8bc 100644
--- 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
index 550ceb3a18..5de77e99bf 100644
--- 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
index 6193f5e1c9..ff85c37cca 100644
--- 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
index 519870434f..88f405f1be 100644
--- 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
index 4bfee719b2..be09769dc7 100644
--- 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
index e357763793..18587e1b8e 100644
--- 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
index de5ba504d4..d658fa5a06 100644
--- 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
index ce7ca6961f..9416185f9e 100644
--- 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
index 0a0517a861..ddaa05baef 100644
--- 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
index 0dfdadc996..0ddb767c98 100644
--- 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
index 383d8ca9c7..22545bc729 100644
--- 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
index 41f9acc43e..c70559a66a 100644
--- 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
index 2109efdaae..ab109b1fc6 100644
--- 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,
diff --git a/packages/sage-react/lib/Tooltip/Tooltip.jsx b/packages/sage-react/lib/Tooltip/Tooltip.jsx
index 13c12d8d6b..a23e6cd609 100644
--- a/packages/sage-react/lib/Tooltip/Tooltip.jsx
+++ b/packages/sage-react/lib/Tooltip/Tooltip.jsx
@@ -2,14 +2,13 @@ import React, { Children, useState, cloneElement } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { TooltipElement } from './TooltipElement';
-import {
- TOOLTIP_POSITIONS
-} from './configs';
+import { TOOLTIP_POSITIONS } from './configs';
export const Tooltip = ({
children,
content,
position,
+ tooltipCustomClass,
...rest
}) => {
const [active, setActive] = useState(false);
@@ -38,6 +37,7 @@ export const Tooltip = ({
content={content}
parentDomRect={parentDomRect}
position={position}
+ tooltipCustomClass={tooltipCustomClass}
/>,
document.body
)}
@@ -50,10 +50,12 @@ Tooltip.POSITIONS = TOOLTIP_POSITIONS;
Tooltip.defaultProps = {
position: TOOLTIP_POSITIONS.DEFAULT,
+ tooltipCustomClass: '',
};
Tooltip.propTypes = {
children: PropTypes.node.isRequired,
content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+ tooltipCustomClass: PropTypes.string,
};
diff --git a/packages/sage-react/lib/Tooltip/Tooltip.story.jsx b/packages/sage-react/lib/Tooltip/Tooltip.story.jsx
index 3cd8896733..33e5fad4e4 100644
--- a/packages/sage-react/lib/Tooltip/Tooltip.story.jsx
+++ b/packages/sage-react/lib/Tooltip/Tooltip.story.jsx
@@ -37,3 +37,29 @@ export const Default = Template.bind({});
export const Static = () => (
);
+
+export const CustomClass = Template.bind({});
+CustomClass.args = {
+ children: ,
+ content: 'This content and sizing is styled with the applied custom class. Use at your own risk',
+ position: Tooltip.POSITIONS.DEFAULT,
+ tooltipCustomClass: 'custom-tooltip-class',
+};
+
+CustomClass.decorators = [
+ (Story) => (
+ <>
+
+
+
+ ),
+];
diff --git a/packages/sage-react/lib/Tooltip/TooltipElement.jsx b/packages/sage-react/lib/Tooltip/TooltipElement.jsx
index 52398cb63a..2bd467d402 100644
--- a/packages/sage-react/lib/Tooltip/TooltipElement.jsx
+++ b/packages/sage-react/lib/Tooltip/TooltipElement.jsx
@@ -1,9 +1,7 @@
import React, { useState, useRef, useLayoutEffect } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
-import {
- TOOLTIP_POSITIONS
-} from './configs';
+import { TOOLTIP_POSITIONS } from './configs';
/* eslint-disable react-hooks/exhaustive-deps */
@@ -13,12 +11,14 @@ export const TooltipElement = ({
content,
parentDomRect,
position,
+ tooltipCustomClass,
}) => {
const tooltipRef = useRef(null);
const [coordinates, setCoordinates] = useState({ top: null, left: null });
const classNames = classnames(
'sage-tooltip',
+ tooltipCustomClass,
{
'sage-tooltip--static': !parentDomRect,
[`sage-tooltip--${position}`]: position,
@@ -86,6 +86,7 @@ TooltipElement.POSITIONS = TOOLTIP_POSITIONS;
TooltipElement.defaultProps = {
parentDomRect: null,
position: TOOLTIP_POSITIONS.DEFAULT,
+ tooltipCustomClass: '',
};
TooltipElement.propTypes = {
@@ -98,4 +99,5 @@ TooltipElement.propTypes = {
width: PropTypes.number,
}),
position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+ tooltipCustomClass: PropTypes.string,
};
diff --git a/packages/sage-react/package.json b/packages/sage-react/package.json
index 62bd4a25cd..eb779e98f3 100644
--- a/packages/sage-react/package.json
+++ b/packages/sage-react/package.json
@@ -1,6 +1,6 @@
{
"name": "@kajabi/sage-react",
- "version": "2.0.0",
+ "version": "6.0.0",
"description": "React Components",
"keywords": [
"react",
diff --git a/packages/sage-system/package.json b/packages/sage-system/package.json
index 825aea1c54..90f3ea9de6 100644
--- a/packages/sage-system/package.json
+++ b/packages/sage-system/package.json
@@ -1,6 +1,6 @@
{
"name": "@kajabi/sage-system",
- "version": "2.0.0",
+ "version": "6.0.0",
"description": "Sage System",
"keywords": [
"sage",