style: Update tags count with opacity when the count is zero

openedx · Mar 11, 2024 · f808a84 · f808a84
1 parent 56af892
commit f808a84
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 13 deletions.
diff --git a/src/content-tags-drawer/index.scss b/src/content-tags-drawer/index.scss
@@ -1,2 +1,2 @@
 @import "content-tags-drawer/TagBubble";
-@import "content-tags-drawer/tags-sidebar/TagsSidebarBody";
+@import "content-tags-drawer/tags-sidebar/TagsSidebar";
diff --git a/...-drawer/tags-sidebar/TagsSidebarBody.scss → ...tags-drawer/tags-sidebar/TagsSidebar.scss b/...-drawer/tags-sidebar/TagsSidebarBody.scss → ...tags-drawer/tags-sidebar/TagsSidebar.scss
@@ -1,6 +1,10 @@
 .tags-sidebar {
   .course-unit-sidebar-header {
     padding-bottom: .25rem !important;
+
+    .course-unit-sidebar-header-count.zero-count {
+      opacity: .4;
+    }
   }
 
   .tags-sidebar-body {

diff --git a/src/content-tags-drawer/tags-sidebar/TagsSidebarHeader.jsx b/src/content-tags-drawer/tags-sidebar/TagsSidebarHeader.jsx
@@ -2,6 +2,7 @@ import { Icon, Stack } from '@openedx/paragon';
 import { Tag } from '@openedx/paragon/icons';
 import { useParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
 
 import messages from '../messages';
 import { useContentTaxonomyTagsCount } from '../data/apiHooks';
@@ -20,9 +21,12 @@ const TagsSidebarHeader = () => {
       <h3 className="course-unit-sidebar-header-title m-0">
         {intl.formatMessage(messages.tagsSidebarTitle)}
       </h3>
-      { isContentTaxonomyTagsCountLoaded && contentTaxonomyTagsCount !== 0
+      { isContentTaxonomyTagsCountLoaded
         && (
-          <div className="d-flex">
+          <div className={
+            classNames('course-unit-sidebar-header-count d-flex', { 'zero-count': contentTaxonomyTagsCount === 0 })
+          }
+          >
             <Icon
               className="mr-1 pt-1"
               src={Tag}

diff --git a/src/content-tags-drawer/tags-sidebar/TagsSidebarHeader.test.jsx b/src/content-tags-drawer/tags-sidebar/TagsSidebarHeader.test.jsx
@@ -33,14 +33,4 @@ describe('<TagsSidebarHeader>', () => {
     expect(screen.getByRole('heading', { name: /unit tags/i })).toBeInTheDocument();
     expect(screen.getByText('17')).toBeInTheDocument();
   });
-
-  it('should not render count if is cero', () => {
-    useContentTaxonomyTagsCount.mockReturnValue({
-      isSuccess: true,
-      data: 0,
-    });
-    render(<RootWrapper />);
-    expect(screen.getByRole('heading', { name: /unit tags/i })).toBeInTheDocument();
-    expect(screen.queryByText('0')).not.toBeInTheDocument();
-  });
 });