feat(aci-toggle): ui adjustments (#3297)

* feat(aci-toggle): ui adjustments

* feat(aci-toggle): resolve comments

Author: arturfrombox

i18n/en-US.properties

@@ -829,11 +829,11 @@ boxui.accessStats.accessStatsViewDetails = View Details
 # The label for the view category of access stats for box notes
 boxui.accessStats.accessStatsViews = Views
 # Description text about advanced content insights.
-boxui.advancedContentInsights.advancedContentInsightsDescription = Get actionable insights into how viewers are engaging with this content. Measure average time spent, page-by-page engagement, per person and per visit details. {helpLink}
+boxui.advancedContentInsights.advancedContentInsightsDescription = Get actionable insights into how viewers are engaging with this content. Measure average time spent, page-by-page engagement, per person and per visit details.
 # Advanced Content Insights toggle title
-boxui.advancedContentInsights.advancedContentInsightsTitle = Advanced Insights
-# Text for a link that goes to an external page with more information about Advanced Content Insights
-boxui.advancedContentInsights.learnMore = Learn more.
+boxui.advancedContentInsights.advancedContentInsightsTitleDisabled = Activate Engagement Insights
+# Advanced Content Insights toggle title
+boxui.advancedContentInsights.advancedContentInsightsTitleEnabled = Engagement Insights is activated
 # Text for an icon aria label to convey an external user of the enterprise
 boxui.avatar.externalUser = External user
 # Text for the beta badge

src/features/advanced-content-insights/AdvancedContentInsightsToggle.scss

@@ -1,9 +1,15 @@
+@import '../../styles/variables';
+
 .AdvancedContentInsightsToggle {
     margin-bottom: 0;
 
     .toggle-simple-label {
         display: flex;
     }
+
+    .toggle-simple-description {
+        color: $bdl-gray;
+    }
 }
 
 .AdvancedContentInsightsToggle-icon {

src/features/advanced-content-insights/AdvancedContentInsightsToggle.tsx

@@ -23,16 +23,14 @@ const AdvancedContentInsightsToggle = ({
     isDisabled,
     onChange = noop,
 }: Props) => {
-    const helpLink = !hasTooltip && (
-        <a href="https://support.box.com" rel="noopener noreferrer" target="_blank">
-            <FormattedMessage {...messages.learnMore} />
-        </a>
-    );
-
-    const description = <FormattedMessage {...messages.advancedContentInsightsDescription} values={{ helpLink }} />;
+    const description = <FormattedMessage {...messages.advancedContentInsightsDescription} />;
     const label = (
         <>
-            <FormattedMessage {...messages.advancedContentInsightsTitle} />
+            <FormattedMessage
+                {...(isChecked
+                    ? messages.advancedContentInsightsTitleEnabled
+                    : messages.advancedContentInsightsTitleDisabled)}
+            />
             {hasTooltip && (
                 <Tooltip text={description}>
                     <div className="AdvancedContentInsightsToggle-icon">
@@ -47,7 +45,7 @@ const AdvancedContentInsightsToggle = ({
         <Toggle
             className="AdvancedContentInsightsToggle"
             data-testid="insights-toggle"
-            description={!hasTooltip && description}
+            description={!hasTooltip && !isChecked && description}
             isDisabled={isDisabled}
             isOn={isChecked}
             label={label}

src/features/advanced-content-insights/__tests__/__snapshots__/AdvancedContentInsightsToggle.test.tsx.snap

@@ -10,8 +10,8 @@ exports[`features/advanced-content-insights/AdvancedContentInsightsToggle should
   label={
     <React.Fragment>
       <FormattedMessage
-        defaultMessage="Advanced Insights"
-        id="boxui.advancedContentInsights.advancedContentInsightsTitle"
+        defaultMessage="Engagement Insights is activated"
+        id="boxui.advancedContentInsights.advancedContentInsightsTitleEnabled"
       />
       <Tooltip
         constrainToScrollParent={false}
@@ -20,13 +20,8 @@ exports[`features/advanced-content-insights/AdvancedContentInsightsToggle should
         position="top-center"
         text={
           <FormattedMessage
-            defaultMessage="Get actionable insights into how viewers are engaging with this content. Measure average time spent, page-by-page engagement, per person and per visit details. {helpLink}"
+            defaultMessage="Get actionable insights into how viewers are engaging with this content. Measure average time spent, page-by-page engagement, per person and per visit details."
             id="boxui.advancedContentInsights.advancedContentInsightsDescription"
-            values={
-              Object {
-                "helpLink": false,
-              }
-            }
           />
         }
         theme="default"

src/features/advanced-content-insights/messages.ts

@@ -1,23 +1,22 @@
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
-    advancedContentInsightsTitle: {
-        defaultMessage: 'Advanced Insights',
+    advancedContentInsightsTitleEnabled: {
+        defaultMessage: 'Engagement Insights is activated',
         description: 'Advanced Content Insights toggle title',
-        id: 'boxui.advancedContentInsights.advancedContentInsightsTitle',
+        id: 'boxui.advancedContentInsights.advancedContentInsightsTitleEnabled',
+    },
+    advancedContentInsightsTitleDisabled: {
+        defaultMessage: 'Activate Engagement Insights',
+        description: 'Advanced Content Insights toggle title',
+        id: 'boxui.advancedContentInsights.advancedContentInsightsTitleDisabled',
     },
     advancedContentInsightsDescription: {
         defaultMessage:
-            'Get actionable insights into how viewers are engaging with this content. Measure average time spent, page-by-page engagement, per person and per visit details. {helpLink}',
+            'Get actionable insights into how viewers are engaging with this content. Measure average time spent, page-by-page engagement, per person and per visit details.',
         description: 'Description text about advanced content insights.',
         id: 'boxui.advancedContentInsights.advancedContentInsightsDescription',
     },
-    learnMore: {
-        defaultMessage: 'Learn more.',
-        description:
-            'Text for a link that goes to an external page with more information about Advanced Content Insights',
-        id: 'boxui.advancedContentInsights.learnMore',
-    },
 });
 
 export default messages;