Adjust code regarding the new design tokens (#1085)

- Mostly replace div's description to paragraphs to make it more semantic - Fix gallery block Co-authored-by: Dan Tovbein <[email protected]>
greenpeace · Aug 23, 2023 · c1fd47b · c1fd47b
1 parent 8835620
commit c1fd47b
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 10 deletions.
diff --git a/assets/src/blocks/Articles/ArticlesFrontend.js b/assets/src/blocks/Articles/ArticlesFrontend.js
@@ -31,7 +31,7 @@ export const ArticlesFrontend = props => {
         <h2 className="page-section-header">{ article_heading }</h2>
       </header>
       { articles_description &&
-        <div className="page-section-description" dangerouslySetInnerHTML={{__html: articles_description}} />
+        <p className="page-section-description" dangerouslySetInnerHTML={{__html: articles_description}} />
       }
       <ArticlesList posts={posts} postType={postType} />
       { hasMorePages &&

diff --git a/assets/src/blocks/Columns/ColumnsFrontend.js b/assets/src/blocks/Columns/ColumnsFrontend.js
@@ -44,7 +44,7 @@ export const ColumnsFrontend = ({columns_block_style, columns_title, columns_des
         </header>
       }
       {columns_description &&
-        <div className="page-section-description" dangerouslySetInnerHTML={{__html: columns_description}} />
+        <p className="page-section-description" dangerouslySetInnerHTML={{__html: columns_description}} />
       }
       <Columns
         columns_block_style={columns_block_style}

diff --git a/assets/src/blocks/Covers/CoversFrontend.js b/assets/src/blocks/Covers/CoversFrontend.js
@@ -38,7 +38,7 @@ export const CoversFrontend = attributes => {
         <h2 className="page-section-header" dangerouslySetInnerHTML={{__html: title}} />
       }
       {description &&
-        <div className="page-section-description" dangerouslySetInnerHTML={{__html: description}} />
+        <p className="page-section-description" dangerouslySetInnerHTML={{__html: description}} />
       }
       {isCarouselLayout && !isSmallWindow ? <CoversCarouselLayout {...coversProps} /> : <Covers {...coversProps} />}
       {showLoadMoreButton && <CoversGridLoadMoreButton showMoreCovers={showMoreCovers} readMoreText={readMoreText} />}

diff --git a/assets/src/blocks/Gallery/GalleryFrontend.js b/assets/src/blocks/Gallery/GalleryFrontend.js
@@ -49,12 +49,16 @@ export const GalleryFrontend = ({
         </header>
       }
       {attributes.gallery_block_description &&
-        <div className="page-section-description" dangerouslySetInnerHTML={{__html: attributes.gallery_block_description}} />
+        <p className="page-section-description" dangerouslySetInnerHTML={{__html: attributes.gallery_block_description}} />
       }
 
-      {layout === 'slider' && <GalleryCarousel onImageClick={openLightbox} images={images} />}
-      {layout === 'three-columns' && <GalleryThreeColumns onImageClick={openLightbox} images={images} postType={postType} />}
-      {layout === 'grid' && <GalleryGrid onImageClick={openLightbox} images={images} />}
+      {images.length ? (
+        <>
+          {layout === 'slider' && <GalleryCarousel onImageClick={openLightbox} images={images} />}
+          {layout === 'three-columns' && <GalleryThreeColumns onImageClick={openLightbox} images={images} postType={postType} />}
+          {layout === 'grid' && <GalleryGrid onImageClick={openLightbox} images={images} />}
+        </>
+      ) : null}
 
       {(renderLightbox && items.length) ?
         <Lightbox isOpen={isOpen} index={index} items={items} onClose={closeLightbox} /> :

diff --git a/assets/src/blocks/Media/MediaFrontend.js b/assets/src/blocks/Media/MediaFrontend.js
@@ -40,7 +40,7 @@ export const MediaFrontend = attributes => {
       }
       {
         description &&
-        <div className="page-section-description" dangerouslySetInnerHTML={{__html: description}} />
+        <p className="page-section-description" dangerouslySetInnerHTML={{__html: description}} />
       }
       {
         media_url && media_url.endsWith('.mp4') ?

diff --git a/assets/src/blocks/SocialMedia/SocialMediaFrontend.js b/assets/src/blocks/SocialMedia/SocialMediaFrontend.js
@@ -17,7 +17,7 @@ export const SocialMediaFrontend = ({
       </header>
     }
     {!!description &&
-      <div className="page-section-description" dangerouslySetInnerHTML={{__html: description}} />
+      <p className="page-section-description" dangerouslySetInnerHTML={{__html: description}} />
     }
     <SocialMediaEmbed
       embedCode={embed_code}

diff --git a/assets/src/blocks/Timeline/TimelineFrontend.js b/assets/src/blocks/Timeline/TimelineFrontend.js
@@ -16,7 +16,7 @@ export const TimelineFrontend = props => {
         </header>
       }
       {!!description &&
-        <div className="page-section-description" dangerouslySetInnerHTML={{__html: description}} />
+        <p className="page-section-description" dangerouslySetInnerHTML={{__html: description}} />
       }
       <Timeline {...nodeProps} />
     </section>