diff --git a/src/hooks/useIndexOfLastVisibleChild.jsx b/src/hooks/useIndexOfLastVisibleChild.jsx
index 458b1b3d82..786375cdbf 100644
--- a/src/hooks/useIndexOfLastVisibleChild.jsx
+++ b/src/hooks/useIndexOfLastVisibleChild.jsx
@@ -1,7 +1,5 @@
import { useLayoutEffect, useState } from 'react';
-import useWindowSize from './useWindowSize';
-
/**
* This hook will find the index of the last child of a containing element
* that fits within its bounding rectangle. This is done by summing the widths
@@ -10,48 +8,48 @@ import useWindowSize from './useWindowSize';
* @param {Element} containerElementRef - container element
* @param {Element} overflowElementRef - overflow element
*
- * The hook returns an array containing:
- * [indexOfLastVisibleChild, containerElementRef, overflowElementRef]
- *
- * indexOfLastVisibleChild - the index of the last visible child
- * containerElementRef - a ref to be added to the containing html node
- * overflowElementRef - a ref to be added to an html node inside the container
- * that is likely to be used to contain a "More" type dropdown or other
- * mechanism to reveal hidden children. The width of this element is always
- * included when determining which children will fit or not. Usage of this ref
- * is optional.
+ * The hook returns the index of the last visible child.
*/
const useIndexOfLastVisibleChild = (containerElementRef, overflowElementRef) => {
const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);
- const windowSize = useWindowSize();
useLayoutEffect(() => {
- if (!containerElementRef) {
- return;
+ function updateLastVisibleChildIndex() {
+ // Get array of child nodes from NodeList form
+ const childNodesArr = Array.prototype.slice.call(containerElementRef.children);
+ const { nextIndexOfLastVisibleChild } = childNodesArr
+ // filter out the overflow element
+ .filter(childNode => childNode !== overflowElementRef)
+ // sum the widths to find the last visible element's index
+ .reduce((acc, childNode, index) => {
+ acc.sumWidth += childNode.getBoundingClientRect().width;
+ if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {
+ acc.nextIndexOfLastVisibleChild = index;
+ }
+ return acc;
+ }, {
+ // Include the overflow element's width to begin with. Doing this means
+ // sometimes we'll show a dropdown with one item in it when it would fit,
+ // but allowing this case dramatically simplifies the calculations we need
+ // to do above.
+ sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
+ nextIndexOfLastVisibleChild: -1,
+ });
+
+ setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
+ }
+
+ if (containerElementRef) {
+ updateLastVisibleChildIndex();
+
+ const resizeObserver = new ResizeObserver(() => updateLastVisibleChildIndex());
+ resizeObserver.observe(containerElementRef);
+
+ return () => resizeObserver.disconnect();
}
- // Get array of child nodes from NodeList form
- const childNodesArr = Array.prototype.slice.call(containerElementRef.children);
- const { nextIndexOfLastVisibleChild } = childNodesArr
- // filter out the overflow element
- .filter(childNode => childNode !== overflowElementRef)
- // sum the widths to find the last visible element's index
- .reduce((acc, childNode, index) => {
- acc.sumWidth += childNode.getBoundingClientRect().width;
- if (acc.sumWidth <= containerElementRef.getBoundingClientRect().width) {
- acc.nextIndexOfLastVisibleChild = index;
- }
- return acc;
- }, {
- // Include the overflow element's width to begin with. Doing this means
- // sometimes we'll show a dropdown with one item in it when it would fit,
- // but allowing this case dramatically simplifies the calculations we need
- // to do above.
- sumWidth: overflowElementRef ? overflowElementRef.getBoundingClientRect().width : 0,
- nextIndexOfLastVisibleChild: -1,
- });
-
- setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
- }, [windowSize, containerElementRef, overflowElementRef]);
+
+ return undefined;
+ }, [containerElementRef, overflowElementRef]);
return indexOfLastVisibleChild;
};
diff --git a/src/hooks/useIndexOfLastVisibleChild.mdx b/src/hooks/useIndexOfLastVisibleChild.mdx
index 59a9fc417c..7da3e5d693 100644
--- a/src/hooks/useIndexOfLastVisibleChild.mdx
+++ b/src/hooks/useIndexOfLastVisibleChild.mdx
@@ -25,10 +25,10 @@ of the children until they exceed the width of the container.
pointerEvents: 'none',
visibility: 'hidden',
};
- const containerElementRef = React.useRef(null);
+ const [containerElementRef, setContainerElementRef] = React.useState(null);
const overflowElementRef = React.useRef(null);
const indexOfLastVisibleChild = useIndexOfLastVisibleChild(
- containerElementRef.current,
+ containerElementRef,
overflowElementRef.current,
);
const elements = ['Element 1', 'Element 2', 'Element 3', 'Element 4', 'Element 5', 'Element 6', 'Element 7'];
@@ -71,7 +71,7 @@ of the children until they exceed the width of the container.
}, [indexOfLastVisibleChild]);
return (
-
+
{children}
)
diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json
index da2ed734cf..b068921a11 100644
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "إغلاق قائمة الخيارات",
"pgn.FormAutosuggest.iconButtonOpened": "فتح قائمة الخيارات",
"pgn.Toast.closeLabel": "إغلاق ",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/ca.json b/src/i18n/messages/ca.json
index 022a108c1c..ab80caa906 100644
--- a/src/i18n/messages/ca.json
+++ b/src/i18n/messages/ca.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/es_419.json b/src/i18n/messages/es_419.json
index 29c5b77cb0..911b212703 100644
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
"pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
"pgn.Toast.closeLabel": "Cerrar",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/es_AR.json b/src/i18n/messages/es_AR.json
index 638e6af70e..3bdb5eb26d 100644
--- a/src/i18n/messages/es_AR.json
+++ b/src/i18n/messages/es_AR.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
"pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
"pgn.Toast.closeLabel": "Cerrar",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/es_ES.json b/src/i18n/messages/es_ES.json
index 81c8e6df9e..a5a1668558 100644
--- a/src/i18n/messages/es_ES.json
+++ b/src/i18n/messages/es_ES.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
"pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
"pgn.Toast.closeLabel": "Cerrar",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json
index 022a108c1c..ab80caa906 100644
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/he.json b/src/i18n/messages/he.json
index 022a108c1c..ab80caa906 100644
--- a/src/i18n/messages/he.json
+++ b/src/i18n/messages/he.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/id.json b/src/i18n/messages/id.json
index 022a108c1c..ab80caa906 100644
--- a/src/i18n/messages/id.json
+++ b/src/i18n/messages/id.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/it_IT.json b/src/i18n/messages/it_IT.json
index ff3baf38c8..64055347ab 100644
--- a/src/i18n/messages/it_IT.json
+++ b/src/i18n/messages/it_IT.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Chiudi",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/ko_KR.json b/src/i18n/messages/ko_KR.json
index 022a108c1c..ab80caa906 100644
--- a/src/i18n/messages/ko_KR.json
+++ b/src/i18n/messages/ko_KR.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/pl.json b/src/i18n/messages/pl.json
index b23933a642..d8d2e9e6e9 100644
--- a/src/i18n/messages/pl.json
+++ b/src/i18n/messages/pl.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Zamknij",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/pt_BR.json b/src/i18n/messages/pt_BR.json
index 022a108c1c..ab80caa906 100644
--- a/src/i18n/messages/pt_BR.json
+++ b/src/i18n/messages/pt_BR.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/pt_PT.json b/src/i18n/messages/pt_PT.json
index 534c64b645..dc274f81ad 100644
--- a/src/i18n/messages/pt_PT.json
+++ b/src/i18n/messages/pt_PT.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Fechar o menu de opções",
"pgn.FormAutosuggest.iconButtonOpened": "Abrir o menu de opções",
"pgn.Toast.closeLabel": "Fechar",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json
index 022a108c1c..ab80caa906 100644
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/th.json b/src/i18n/messages/th.json
index 022a108c1c..ab80caa906 100644
--- a/src/i18n/messages/th.json
+++ b/src/i18n/messages/th.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/tr_TR.json b/src/i18n/messages/tr_TR.json
index c29565d297..bf544c4543 100644
--- a/src/i18n/messages/tr_TR.json
+++ b/src/i18n/messages/tr_TR.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Seçenekler menüsünü kapat",
"pgn.FormAutosuggest.iconButtonOpened": "Seçenekler menüsünü aç",
"pgn.Toast.closeLabel": "Kapat",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/uk.json b/src/i18n/messages/uk.json
index 022a108c1c..ab80caa906 100644
--- a/src/i18n/messages/uk.json
+++ b/src/i18n/messages/uk.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/src/i18n/messages/zh_CN.json b/src/i18n/messages/zh_CN.json
index 022a108c1c..ab80caa906 100644
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -28,5 +28,6 @@
"pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
"pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
"pgn.Toast.closeLabel": "Close",
- "pgn.ProductTour.Checkpoint.position-text": "Top of step {step}"
+ "pgn.ProductTour.Checkpoint.top-position-text": "Top of step {step}",
+ "pgn.ProductTour.Checkpoint.bottom-position-text": "Bottom of step {step}"
}
\ No newline at end of file
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index 728ae6f797..59586ffea2 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -1,7 +1,7 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
- * Generated on Wed, 06 Dec 2023 09:28:09 GMT
+ * Generated on Tue, 26 Dec 2023 14:13:40 GMT
*/
:root {
@@ -236,7 +236,6 @@
--pgn-spacing-card-margin-group: 12px;
--pgn-spacing-card-spacer-y: .75rem;
--pgn-spacing-card-spacer-x: 1.25rem;
- --pgn-spacing-btn-focus-gap: 1px;
--pgn-spacing-btn-block-spacing-y: .5rem;
--pgn-spacing-bubble-expandable-padding-x: .25rem;
--pgn-spacing-bubble-expandable-padding-y: 0;
@@ -493,6 +492,7 @@
--pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group);
--pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group);
--pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap));
+ --pgn-spacing-btn-focus-gap: var(--pgn-size-btn-focus-width);
--pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x);
--pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x);
--pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x);
@@ -584,7 +584,8 @@
--pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
--pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
--pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
- --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
+ --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
+ --pgn-size-btn-focus-border-radius-base: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
--pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
--pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);
--pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight);
@@ -600,5 +601,6 @@
--pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base);
--pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2);
--pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border));
+ --pgn-size-btn-focus-border-radius-lg: var(--pgn-size-btn-focus-border-radius-base);
--pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg);
}
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index 87c12d7599..902d932990 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -1,7 +1,7 @@
/**
* IMPORTANT: This file is the result of assembling design tokens
* Do not edit directly
- * Generated on Wed, 06 Dec 2023 09:28:09 GMT
+ * Generated on Tue, 26 Dec 2023 14:13:40 GMT
*/
:root {
@@ -580,7 +580,6 @@
--pgn-color-alert-title: var(--pgn-color-black);
--pgn-color-theme-active-gray: var(--pgn-color-gray-900);
--pgn-color-theme-hover-gray: var(--pgn-color-gray-700);
- --pgn-color-theme-focus-gray: var(--pgn-color-gray-300);
--pgn-color-theme-border-gray: var(--pgn-color-gray-200);
--pgn-color-theme-bg-gray: var(--pgn-color-gray-100);
--pgn-color-border: var(--pgn-color-gray-200);
@@ -1112,10 +1111,11 @@
--pgn-color-theme-default-light: var(--pgn-color-light-500);
--pgn-color-theme-default-brand: var(--pgn-color-brand-500);
--pgn-color-theme-default-primary: var(--pgn-color-primary-500);
- --pgn-color-theme-focus-dark: var(--pgn-color-dark-300);
- --pgn-color-theme-focus-light: var(--pgn-color-light-300);
- --pgn-color-theme-focus-brand: var(--pgn-color-brand-300);
- --pgn-color-theme-focus-primary: var(--pgn-color-primary-300);
+ --pgn-color-theme-focus-gray: var(--pgn-color-gray-500);
+ --pgn-color-theme-focus-dark: var(--pgn-color-dark-500);
+ --pgn-color-theme-focus-light: var(--pgn-color-light-500);
+ --pgn-color-theme-focus-brand: var(--pgn-color-brand-500);
+ --pgn-color-theme-focus-primary: var(--pgn-color-primary-500);
--pgn-color-theme-border-dark: var(--pgn-color-dark-200);
--pgn-color-theme-border-light: var(--pgn-color-light-200);
--pgn-color-theme-border-brand: var(--pgn-color-brand-200);
@@ -1444,11 +1444,11 @@
--pgn-color-theme-default-info: var(--pgn-color-info-500);
--pgn-color-theme-default-success: var(--pgn-color-success-500);
--pgn-color-theme-default-secondary: var(--pgn-color-secondary-500);
- --pgn-color-theme-focus-danger: var(--pgn-color-danger-300);
- --pgn-color-theme-focus-warning: var(--pgn-color-warning-300);
- --pgn-color-theme-focus-info: var(--pgn-color-info-300);
- --pgn-color-theme-focus-success: var(--pgn-color-success-300);
- --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-300);
+ --pgn-color-theme-focus-danger: var(--pgn-color-danger-500);
+ --pgn-color-theme-focus-warning: var(--pgn-color-warning-500);
+ --pgn-color-theme-focus-info: var(--pgn-color-info-500);
+ --pgn-color-theme-focus-success: var(--pgn-color-success-500);
+ --pgn-color-theme-focus-secondary: var(--pgn-color-secondary-500);
--pgn-color-theme-border-danger: var(--pgn-color-danger-200);
--pgn-color-theme-border-warning: var(--pgn-color-warning-200);
--pgn-color-theme-border-info: var(--pgn-color-info-200);
diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json
index 65fe7cacf2..96fdbadb33 100644
--- a/tokens/src/core/components/Button/core.json
+++ b/tokens/src/core/components/Button/core.json
@@ -27,7 +27,7 @@
"spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" }
},
"focus": {
- "gap": { "value": "1px", "type": "dimension", "source": "$btn-focus-gap" },
+ "gap": { "value": "{size.btn.focus.width}", "type": "dimension", "source": "$btn-focus-gap" },
"border-gap": {
"value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
"type": "dimension",
@@ -88,9 +88,13 @@
"focus": {
"width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" },
"border-radius": {
- "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
- "type": "dimension",
- "source": "$btn-focus-border-radius"
+ "base": {
+ "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
+ "type": "dimension",
+ "source": "$btn-focus-border-radius"
+ },
+ "lg": { "value": "{size.btn.focus.border-radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-lg" },
+ "sm": { "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-sm" }
}
}
}
diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json
index ec29f72280..58d1299348 100644
--- a/tokens/src/themes/light/alias/color.json
+++ b/tokens/src/themes/light/alias/color.json
@@ -62,16 +62,16 @@
"gray": { "value": "{color.gray.200}", "type": "color", "description": "Theme-specific gray border color." }
},
"focus": {
- "primary": { "value": "{color.primary.300}", "type": "color", "description": "Theme-specific primary focus color." },
- "secondary": { "value": "{color.secondary.300}", "type": "color", "description": "Theme-specific secondary focus color." },
- "brand": { "value": "{color.brand.300}", "type": "color", "description": "Theme-specific brand focus color." },
- "success": { "value": "{color.success.300}", "type": "color", "description": "Theme-specific success focus color." },
- "info": { "value": "{color.info.300}", "type": "color", "description": "Theme-specific info focus color." },
- "warning": { "value": "{color.warning.300}", "type": "color", "description": "Theme-specific warning focus color." },
- "danger": { "value": "{color.danger.300}", "type": "color", "description": "Theme-specific danger focus color." },
- "light": { "value": "{color.light.300}", "type": "color", "description": "Theme-specific light focus color." },
- "dark": { "value": "{color.dark.300}", "type": "color", "description": "Theme-specific dark focus color." },
- "gray": { "value": "{color.gray.300}", "type": "color", "description": "Theme-specific gray focus color." }
+ "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary focus color." },
+ "secondary": { "value": "{color.secondary.500}", "type": "color", "description": "Theme-specific secondary focus color." },
+ "brand": { "value": "{color.brand.500}", "type": "color", "description": "Theme-specific brand focus color." },
+ "success": { "value": "{color.success.500}", "type": "color", "description": "Theme-specific success focus color." },
+ "info": { "value": "{color.info.500}", "type": "color", "description": "Theme-specific info focus color." },
+ "warning": { "value": "{color.warning.500}", "type": "color", "description": "Theme-specific warning focus color." },
+ "danger": { "value": "{color.danger.500}", "type": "color", "description": "Theme-specific danger focus color." },
+ "light": { "value": "{color.light.500}", "type": "color", "description": "Theme-specific light focus color." },
+ "dark": { "value": "{color.dark.500}", "type": "color", "description": "Theme-specific dark focus color." },
+ "gray": { "value": "{color.gray.500}", "type": "color", "description": "Theme-specific gray focus color." }
},
"default": {
"primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary default color." },
diff --git a/www/netlify/functions/trackGenerateComponent.js b/www/netlify/functions/trackGenerateComponent.js
index 8090e88369..5f44db94a7 100644
--- a/www/netlify/functions/trackGenerateComponent.js
+++ b/www/netlify/functions/trackGenerateComponent.js
@@ -1,12 +1,24 @@
-const { handler: actualHandler } = require('./sendAnalyticsData');
+const { v4: uuidv4 } = require('uuid');
+const Analytics = require('analytics-node');
+const { COMPONENT_GENERATED_EVENT } = require('../../segment-events');
+
+const analytics = new Analytics(process.env.SEGMENT_KEY);
exports.handler = async function eventHandler(event) {
- const body = JSON.parse(event.body);
- event.body = JSON.stringify({
- ...body,
- eventId: 'openedx.paragon.functions.track-generate-component.created',
- properties: { componentName: body.componentName },
+ // Only allow POST
+ if (event.httpMethod !== 'POST') {
+ return { statusCode: 405, body: 'Method Not Allowed' };
+ }
+ const { componentName } = JSON.parse(event.body);
+ // dispatch event to Segment
+ analytics.track({
+ anonymousId: uuidv4(),
+ event: COMPONENT_GENERATED_EVENT,
+ properties: { componentName },
});
- return actualHandler(event);
+ return {
+ statusCode: 200,
+ body: JSON.stringify({ success: true }),
+ };
};
diff --git a/www/segment-events/constants.js b/www/segment-events/constants.js
new file mode 100644
index 0000000000..728aa08ef0
--- /dev/null
+++ b/www/segment-events/constants.js
@@ -0,0 +1,44 @@
+/**
+ * Events are identified by the following structured pattern:
+ * openedx.paragon.event_environment.event_name.event_action
+ */
+
+export const ICON_COPIED_EVENT = 'openedx.paragon.docs.icons-table.selected-icon.copied';
+export const LEAVE_FEEDBACK_CLICKED_EVENT = 'openedx.paragon.docs.leave-feedback.clicked';
+export const CONTRAST_CHECKER_CLICKED_EVENT = 'openedx.paragon.docs.menu.tools.visit-contrast-checker.clicked';
+export const PAGE_EDIT_BTN_CLICKED_EVENT = 'openedx.paragon.docs.page-edit.clicked';
+export const COMPONENT_GENERATED_EVENT = 'openedx.paragon.functions.track-generate-component.created';
+
+export const PLAYGROUND_EVENTS = {
+ LINK_CLICKED: 'openedx.paragon.docs.menu.playground.visit-playground.clicked',
+ URL_COPIED: 'openedx.paragon.docs.playground.copy-url.copied',
+};
+
+export const SHADOW_GENERATOR_LAYER_EVENTS = {
+ ENABLED: 'openedx.paragon.docs.elevation.shadow-generator.layer.enabled',
+ DISABLED: 'openedx.paragon.docs.elevation.shadow-generator.layer.disabled',
+ REMOVED: 'openedx.paragon.docs.elevation.shadow-generator.layer.removed',
+ ADDED: 'openedx.paragon.docs.elevation.shadow-generator.layer.added',
+ UPDATED: 'openedx.paragon.docs.elevation.shadow-generator.layer.updated',
+};
+
+export const SETTINGS_EVENTS = {
+ OPENED: 'openedx.paragon.docs.settings.opened',
+ CLOSED: 'openedx.paragon.docs.settings.closed',
+ CHANGED: 'openedx.paragon.docs.setting.changed',
+};
+
+export const EXAMPLE_CODE_BLOCK_WITH_HEADING_EVENTS = {
+ CLOSED: 'openedx.paragon.docs.example-code-block.closed',
+ OPENED: 'openedx.paragon.docs.example-code-block.opened',
+};
+
+export const EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_EVENTS = {
+ CLOSED: 'openedx.paragon.docs.example-code-block.without-heading.closed',
+ OPENED: 'openedx.paragon.docs.example-code-block.without-heading.opened',
+};
+
+export const USAGE_INSIGHTS_EVENTS = {
+ TAB_CLICKED: 'openedx.paragon.docs.usage-insights.tab.clicked',
+ COMPONENT_LINK_CLICKED: 'openedx.paragon.docs.usage-insights.component-usage-link.clicked',
+};
diff --git a/www/segment-events/index.js b/www/segment-events/index.js
new file mode 100644
index 0000000000..dfe6d76180
--- /dev/null
+++ b/www/segment-events/index.js
@@ -0,0 +1,3 @@
+export * from './constants';
+
+export { sendUserAnalyticsEvent } from './utils';
diff --git a/www/segment-events/utils.js b/www/segment-events/utils.js
new file mode 100644
index 0000000000..3db5077762
--- /dev/null
+++ b/www/segment-events/utils.js
@@ -0,0 +1,8 @@
+function sendUserAnalyticsEvent(eventName, context) {
+ if (context) {
+ return global.analytics.track(eventName, context);
+ }
+ return global.analytics.track(eventName);
+}
+
+module.exports = { sendUserAnalyticsEvent };
diff --git a/www/src/components/CodeBlock.tsx b/www/src/components/CodeBlock.tsx
index b63c3e408a..d5b7460e1e 100644
--- a/www/src/components/CodeBlock.tsx
+++ b/www/src/components/CodeBlock.tsx
@@ -21,6 +21,11 @@ import { FormattedMessage, useIntl } from 'react-intl';
import * as ParagonReact from '~paragon-react';
import * as ParagonIcons from '~paragon-icons';
import { ContentCopy } from '~paragon-icons';
+import {
+ EXAMPLE_CODE_BLOCK_WITH_HEADING_EVENTS,
+ EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_EVENTS,
+ sendUserAnalyticsEvent,
+} from '../../segment-events';
import MiyazakiCard from './exampleComponents/MiyazakiCard';
import HipsterIpsum from './exampleComponents/HipsterIpsum';
import ExamplePropsForm from './exampleComponents/ExamplePropsForm';
@@ -64,16 +69,19 @@ function CollapsibleLiveEditor({ children, clickToCopy, handleCodeChange }: Coll
const headingElement = getCodeBlockHeading(e.target);
if (!headingElement) {
- global.analytics.track(`openedx.paragon.docs.ui.example-code-block.${collapseIsOpen ? 'closed' : 'opened'}`, {
- value: `${componentNameAndCategory}id-not-generated`,
- });
+ const event = collapseIsOpen
+ ? EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_EVENTS.CLOSED
+ : EXAMPLE_CODE_BLOCK_WITHOUT_HEADING_EVENTS.OPENED;
+ sendUserAnalyticsEvent(event, { value: `${componentNameAndCategory}id-not-generated` });
return;
}
- global.analytics.track(`openedx.paragon.docs.ui.example-code-block.${collapseIsOpen ? 'closed' : 'opened'}`, {
- value: `${componentNameAndCategory}${headingElement.id}`,
- });
+ const event = collapseIsOpen
+ ? EXAMPLE_CODE_BLOCK_WITH_HEADING_EVENTS.CLOSED
+ : EXAMPLE_CODE_BLOCK_WITH_HEADING_EVENTS.OPENED;
+
+ sendUserAnalyticsEvent(event, { value: `${componentNameAndCategory}${headingElement.id}` });
};
return (
diff --git a/www/src/components/IconsTable.tsx b/www/src/components/IconsTable.tsx
index a3f6a2a8c7..cff6c7cbc5 100644
--- a/www/src/components/IconsTable.tsx
+++ b/www/src/components/IconsTable.tsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import debounce from 'lodash.debounce';
import { Icon, SearchField, Toast } from '~paragon-react';
import * as IconComponents from '~paragon-icons';
+import { ICON_COPIED_EVENT, sendUserAnalyticsEvent } from '../../segment-events';
const WINDOW_HEIGHT = 2400;
const ROW_HEIGHT = 100;
@@ -75,7 +76,7 @@ function IconsTable({ iconNames }) {
const copyToClipboard = (content) => {
navigator.clipboard.writeText(content);
setShowToast(true);
- global.analytics.track('openedx.paragon.docs.icons-table.selected-icon.copied', { name: currentIcon });
+ sendUserAnalyticsEvent(ICON_COPIED_EVENT, { name: currentIcon });
};
const handleChangeSearchValue = useMemo(() => debounce(setSearchValue, 500, { leading: false }), []);
diff --git a/www/src/components/LeaveFeedback.tsx b/www/src/components/LeaveFeedback.tsx
index de42cb9133..68068de9f5 100644
--- a/www/src/components/LeaveFeedback.tsx
+++ b/www/src/components/LeaveFeedback.tsx
@@ -2,6 +2,7 @@ import React, { AnchorHTMLAttributes } from 'react';
import PropTypes from 'prop-types';
import { Nav, Button, Hyperlink } from '~paragon-react';
import { useLocation } from '@reach/router';
+import { LEAVE_FEEDBACK_CLICKED_EVENT, sendUserAnalyticsEvent } from '../../segment-events';
export interface LeaveFeedbackProps extends Partial
> {
isNavLink?: boolean;
@@ -12,9 +13,7 @@ function LeaveFeedback({ isNavLink, ...props }: LeaveFeedbackProps) {
const FEEDBACK_URL = `https://github.com/openedx/paragon/issues/new?title=%5Bparagon-openedx.netlify.app%5D%20Feedback%20(on%20${location.pathname})&labels=docs&template=feedback_template.md`;
const leaveFeedbackLinkTitle = 'Leave feedback';
- const handleLinkFeedbackClick = () => {
- global.analytics.track('openedx.paragon.docs.leave_feedback.clicked');
- };
+ const handleLinkFeedbackClick = () => sendUserAnalyticsEvent(LEAVE_FEEDBACK_CLICKED_EVENT);
if (isNavLink) {
return (
diff --git a/www/src/components/Menu.tsx b/www/src/components/Menu.tsx
index 74afa7a0b3..1c267a7259 100644
--- a/www/src/components/Menu.tsx
+++ b/www/src/components/Menu.tsx
@@ -16,6 +16,11 @@ import classNames from 'classnames';
import Search from './Search';
import { SettingsContext } from '../context/SettingsContext';
import { THEMES } from '../../theme-config';
+import {
+ PLAYGROUND_EVENTS,
+ sendUserAnalyticsEvent,
+ CONTRAST_CHECKER_CLICKED_EVENT,
+} from '../../segment-events';
import { FOUNDATION_PAGES } from '../config';
// MDX transforms markdown generated by gatsby-transformer-react-docgen
@@ -70,7 +75,7 @@ export interface IComponentNavItem {
type: string,
status?: string,
},
- isActive: boolean,
+ isActive?: boolean,
}
export function ComponentNavItem({
@@ -114,7 +119,11 @@ ComponentNavItem.propTypes = {
title: PropTypes.string.isRequired,
status: PropTypes.string,
}).isRequired,
- isActive: PropTypes.bool.isRequired,
+ isActive: PropTypes.bool,
+};
+
+ComponentNavItem.defaultProps = {
+ isActive: false,
};
export type MenuComponentListTypes = {
@@ -145,13 +154,9 @@ function MenuComponentListCategory({ children, title }: IMenuComponentListCatego
);
}
-const handlePlaygroundClick = () => {
- global.analytics.track('openedx.paragon.docs.menu.playground.visit_playground.clicked');
-};
+const handlePlaygroundClick = () => sendUserAnalyticsEvent(PLAYGROUND_EVENTS.LINK_CLICKED);
-const handleContrastCheckerClick = () => {
- global.analytics.track('openedx.paragon.docs.menu.tools.visit_contrast_checker.clicked');
-};
+const handleContrastCheckerClick = () => sendUserAnalyticsEvent(CONTRAST_CHECKER_CLICKED_EVENT);
MenuComponentListCategory.propTypes = {
children: PropTypes.node.isRequired,
diff --git a/www/src/components/PageEditBtn/index.tsx b/www/src/components/PageEditBtn/index.tsx
index 39821143fd..ba22e8ab22 100644
--- a/www/src/components/PageEditBtn/index.tsx
+++ b/www/src/components/PageEditBtn/index.tsx
@@ -1,6 +1,7 @@
import React, { AnchorHTMLAttributes } from 'react';
import PropTypes from 'prop-types';
import { Button, Hyperlink, Nav } from '~paragon-react';
+import { PAGE_EDIT_BTN_CLICKED_EVENT, sendUserAnalyticsEvent } from '../../../segment-events';
export interface PageEditBtnProps extends Partial> {
githubEditPath?: string,
@@ -10,9 +11,7 @@ export interface PageEditBtnProps extends Partial {
- global.analytics.track('openedx.paragon.docs.page_edit.clicked');
- };
+ const handlePageEditBtnClick = () => sendUserAnalyticsEvent(PAGE_EDIT_BTN_CLICKED_EVENT);
if (isNavLink) {
return (
diff --git a/www/src/components/PropsTable.tsx b/www/src/components/PropsTable.tsx
index 5bd2d87a05..eff2e99199 100644
--- a/www/src/components/PropsTable.tsx
+++ b/www/src/components/PropsTable.tsx
@@ -1,11 +1,33 @@
import React from 'react';
import PropTypes from 'prop-types';
import { MDXRenderer } from 'gatsby-plugin-mdx';
-import { Badge, Card } from '~paragon-react';
+import { Badge, Card, Hyperlink } from '~paragon-react';
import PropType from './PropType';
const IGNORED_COMPONENT_PROPS = ['intl'];
+const BOOTSTRAP_BASE_URL = 'https://react-bootstrap-v4.netlify.app/components';
+
+const bootstrapLinks = {
+ Button: `${BOOTSTRAP_BASE_URL}/buttons/#button-props`,
+ Card: `${BOOTSTRAP_BASE_URL}/cards/#card-props`,
+ CardBody: `${BOOTSTRAP_BASE_URL}/cards/#card-body-props`,
+ CardDeck: `${BOOTSTRAP_BASE_URL}/cards/#card-deck-props`,
+ Dropdown: `${BOOTSTRAP_BASE_URL}/dropdowns/#dropdown-props`,
+ DropdownToggle: `${BOOTSTRAP_BASE_URL}/dropdowns/#dropdown-toggle-props`,
+ DropdownItem: `${BOOTSTRAP_BASE_URL}/dropdowns/#dropdown-item-props`,
+ DropdownMenu: `${BOOTSTRAP_BASE_URL}/dropdowns/#dropdown-menu-props`,
+ DropdownButton: `${BOOTSTRAP_BASE_URL}/dropdowns/#dropdown-button-props`,
+ FormControl: `${BOOTSTRAP_BASE_URL}/forms/#form-control-props`,
+ Nav: `${BOOTSTRAP_BASE_URL}/navs/#nav-props`,
+ Popover: `${BOOTSTRAP_BASE_URL}/overlays/#popover-props`,
+ ProgressBar: `${BOOTSTRAP_BASE_URL}/progress/#progress-bar-props`,
+ Spinner: `${BOOTSTRAP_BASE_URL}/spinners/#spinner-props`,
+ Tabs: `${BOOTSTRAP_BASE_URL}/tabs/#tabs-api`,
+ Tab: `${BOOTSTRAP_BASE_URL}/tabs/#tab-props`,
+ Toast: `${BOOTSTRAP_BASE_URL}/toasts/#toast-props`,
+};
+
export type DefaultValueTypes = {
value: string | undefined,
};
@@ -92,10 +114,20 @@ export interface IPropsTable {
}
function PropsTable({ props: componentProps, displayName, content }: IPropsTable) {
+ const bootstrapLink = bootstrapLinks[displayName];
+
return (
{content && {content}
}
+ {bootstrapLink && (
+
+ This is a pass through component from React-Bootstrap, see original props documentation{' '}
+
+ here.
+
+
+ )}
{componentProps.length > 0 ? (
{componentProps
diff --git a/www/src/components/insights/UsagesList.tsx b/www/src/components/insights/UsagesList.tsx
index b3a5115d2e..de179e5969 100644
--- a/www/src/components/insights/UsagesList.tsx
+++ b/www/src/components/insights/UsagesList.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Hyperlink } from '~paragon-react';
+import { USAGE_INSIGHTS_EVENTS, sendUserAnalyticsEvent } from '../../../segment-events';
type UsagesType = {
filePath: string,
@@ -21,10 +22,9 @@ export default function UsagesList({
projectName,
} : UsagesListPropTypes) {
const handleUsageLinkClick = (linkToUsage) => {
- global.analytics.track(
- 'openedx.paragon.docs.usage-insights.component-usage-link.clicked',
- { project: projectName, component: componentName, linkToUsage },
- );
+ sendUserAnalyticsEvent(USAGE_INSIGHTS_EVENTS.COMPONENT_LINK_CLICKED, {
+ project: projectName, component: componentName, linkToUsage,
+ });
};
return (
diff --git a/www/src/context/SettingsContext.tsx b/www/src/context/SettingsContext.tsx
index d902d452fe..d05cef5ede 100644
--- a/www/src/context/SettingsContext.tsx
+++ b/www/src/context/SettingsContext.tsx
@@ -5,6 +5,7 @@ import { IntlProvider } from 'react-intl';
import { messages } from '~paragon-react';
import { THEMES, DEFAULT_THEME } from '../../theme-config';
+import { SETTINGS_EVENTS, sendUserAnalyticsEvent } from '../../segment-events';
export interface IDefaultValue {
settings: {
@@ -44,12 +45,16 @@ function SettingsContextProvider({ children }) {
}
setSettings(prevState => ({ ...prevState, [key]: value }));
global.localStorage.setItem('pgn__settings', JSON.stringify({ ...settings, [key]: value }));
- global.analytics.track(`openedx.paragon.docs.settings.${key}.changed`, { [key]: value });
+ sendUserAnalyticsEvent(SETTINGS_EVENTS.CHANGED, { setting: key, value });
};
const toggleSettings = (value: boolean) => {
+ const event = value
+ ? SETTINGS_EVENTS.OPENED
+ : SETTINGS_EVENTS.CLOSED;
+
setShowSettings(value);
- global.analytics.track(`openedx.paragon.docs.settings.${value ? 'opened' : 'closed'}`);
+ sendUserAnalyticsEvent(event);
};
// this hook will be called after the first render, so we can safely access localStorage
diff --git a/www/src/pages/foundations/elevation.tsx b/www/src/pages/foundations/elevation.tsx
index 2080925e6e..e4ca4f59e2 100644
--- a/www/src/pages/foundations/elevation.tsx
+++ b/www/src/pages/foundations/elevation.tsx
@@ -12,6 +12,7 @@ import { Close, WbSunny, DoDisturb } from '~paragon-icons';
import SEO from '../../components/SEO';
import Layout from '../../components/PageLayout';
import { SettingsContext } from '../../context/SettingsContext';
+import { sendUserAnalyticsEvent, SHADOW_GENERATOR_LAYER_EVENTS } from '../../../segment-events';
const boxShadowSides = ['down', 'up', 'right', 'left', 'centered'];
const boxShadowLevels = [1, 2, 3, 4, 5];
@@ -104,7 +105,7 @@ function BoxShadowToolkit({
});
const updateBoxShadowModel = (property: string, value: boolean | string) => {
- global.analytics.track('openedx.paragon.docs.elevation.generator.updated', { property, value });
+ sendUserAnalyticsEvent(SHADOW_GENERATOR_LAYER_EVENTS.UPDATED, { property, value });
const newBoxShadowModel = {
...boxShadowModel,
@@ -214,7 +215,7 @@ function BoxShadowGenerator() {
};
const addNewBoxShadowLayer = () => {
- global.analytics.track('openedx.paragon.elevation.generator.layer.added');
+ sendUserAnalyticsEvent(SHADOW_GENERATOR_LAYER_EVENTS.ADDED);
setBoxShadows([
...boxShadows,
{ id: boxShadows[boxShadows.length - 1].id + 1, enabled: true, style: DEFAULT_BOX_SHADOW },
@@ -222,12 +223,12 @@ function BoxShadowGenerator() {
};
const removeBoxShadowLayer = (toolkitId: number) => {
- global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.removed');
+ sendUserAnalyticsEvent(SHADOW_GENERATOR_LAYER_EVENTS.REMOVED);
setBoxShadows(boxShadows.filter((shadow) => shadow.id !== toolkitId));
};
const disableBoxShadowLayer = (toolkitId: number) => {
- global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.disabled');
+ sendUserAnalyticsEvent(SHADOW_GENERATOR_LAYER_EVENTS.DISABLED);
const updatedBoxShadows = boxShadows
.map((shadow) => {
if (shadow.id === toolkitId) {
@@ -239,7 +240,7 @@ function BoxShadowGenerator() {
};
const enableBoxShadowLayer = (toolkitId: string | number) => {
- global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.enabled');
+ sendUserAnalyticsEvent(SHADOW_GENERATOR_LAYER_EVENTS.ENABLED);
const updatedBoxShadows = boxShadows
.map((shadow) => {
if (shadow.id === toolkitId) {
diff --git a/www/src/pages/insights.tsx b/www/src/pages/insights.tsx
index a2d8626c89..cae9fd6227 100644
--- a/www/src/pages/insights.tsx
+++ b/www/src/pages/insights.tsx
@@ -18,6 +18,7 @@ import ComponentsUsage from '../components/insights/ComponentsUsage';
// @ts-ignore
import dependentProjectsAnalysis from '../../../dependent-usage.json'; // eslint-disable-line
+import { sendUserAnalyticsEvent, USAGE_INSIGHTS_EVENTS } from '../../segment-events';
import { INSIGHTS_TABS, INSIGHTS_PAGES } from '../config';
import componentsUsage from '../utils/componentsUsage';
import { IInsightsContext } from '../types/types';
@@ -63,7 +64,7 @@ export default function InsightsPage({ pageContext: { tab, githubEditPath } }: I
const handleOnSelect = (value: string) => {
if (value !== tab) {
- global.analytics.track(`openedx.paragon.docs.insights.tabs.${value.toLowerCase().trim()}.clicked`);
+ sendUserAnalyticsEvent(USAGE_INSIGHTS_EVENTS.TAB_CLICKED, { tabName: value });
navigate(INSIGHTS_PAGES.find(item => item.tab === value).path);
}
};
diff --git a/www/src/pages/playground.tsx b/www/src/pages/playground.tsx
index 9707676a47..77c2614215 100644
--- a/www/src/pages/playground.tsx
+++ b/www/src/pages/playground.tsx
@@ -14,6 +14,7 @@ import localforage from 'localforage';
import SEO from '../components/SEO';
import { SiteTitle } from '../components/header';
import { storageKey } from '../../playroom/constants';
+import { PLAYGROUND_EVENTS, sendUserAnalyticsEvent } from '../../segment-events';
const FEEDBACK_URL = 'https://github.com/openedx/paragon/issues/new?assignees=&labels=playground&template=feedback_template.md&title=[Playground]';
@@ -73,7 +74,7 @@ export default function Playground({ location }) {
onClick={() => {
setCopyUrlState('copied');
navigator.clipboard.writeText(location.href);
- global.analytics.track('openedx.paragon.docs.playground.url-copied');
+ sendUserAnalyticsEvent(PLAYGROUND_EVENTS.URL_COPIED);
}}
labels={{
default: 'Copy URL',