@npm_leadtech/legal-lib-components 5.7.1 → 5.7.2

package/dist/images/svg/arrow-right-24px-outlined.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.70531 0.705315C8.31578 0.31578 7.68422 0.31578 7.29468 0.705316C6.9054 1.0946 6.90511 1.72568 7.29405 2.11531L12.17 7H0.999999C0.447714 7 0 7.44772 0 8C0 8.55229 0.447715 9 1 9H12.17L7.29405 13.8847C6.90511 14.2743 6.9054 14.9054 7.29468 15.2947C7.68422 15.6842 8.31578 15.6842 8.70532 15.2947L15.2929 8.70711C15.6834 8.31658 15.6834 7.68342 15.2929 7.29289L8.70531 0.705315Z" fill="#078080"/>
+</svg>

package/dist/src/components/atoms/CardPane/CardPane.styled.js

@@ -32,15 +32,28 @@ export const CardPaneStyled = styled.div `
       }
       &:nth-child(2) {
         text-align: right;
+        padding-right: 0;
         @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
           text-align: left;
         }
       }
       &:nth-child(3) {
         margin-top: 30px;
+        padding-right: 0;
       }
-      &:last-child {
+
+      &:nth-child(4) {
+        margin-top: 45px;
+        text-align: right;
         padding-right: 0;
+        @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+          text-align: left;
+          margin-top: 16px;
+        }
+        .pane--title {
+          font-size: 0.75rem;
+          padding: 0;
+        }
       }
       span {
         display: block;
@@ -51,6 +64,8 @@ export const CardPaneStyled = styled.div `
       }
     }
     &--title {
+      border: none;
+      background: none;
       color: var(--neutral-neutral-2);
       font-size: 0.875rem;
       line-height: 1.29;
@@ -63,6 +78,9 @@ export const CardPaneStyled = styled.div `
       @media ${device.laptop} {
         font-size: 0.875rem;
       }
+      &.pane--title--button {
+        cursor: pointer;
+      }
     }
     &--description {
       color: var(--neutral-main);

package/dist/src/components/atoms/CardPane/CardPane.styled.ts

@@ -33,15 +33,28 @@ export const CardPaneStyled = styled.div`
       }
       &:nth-child(2) {
         text-align: right;
+        padding-right: 0;
         @media (min-width: ${size.xxs}) and (max-width: ${size.sm}) {
           text-align: left;
         }
       }
       &:nth-child(3) {
         margin-top: 30px;
+        padding-right: 0;
       }
-      &:last-child {
+
+      &:nth-child(4) {
+        margin-top: 45px;
+        text-align: right;
         padding-right: 0;
+        @media (min-width: #{$xxs}) and (max-width: #{$sm}) {
+          text-align: left;
+          margin-top: 16px;
+        }
+        .pane--title {
+          font-size: 0.75rem;
+          padding: 0;
+        }
       }
       span {
         display: block;
@@ -52,6 +65,8 @@ export const CardPaneStyled = styled.div`
       }
     }
     &--title {
+      border: none;
+      background: none;
       color: var(--neutral-neutral-2);
       font-size: 0.875rem;
       line-height: 1.29;
@@ -64,6 +79,9 @@ export const CardPaneStyled = styled.div`
       @media ${device.laptop} {
         font-size: 0.875rem;
       }
+      &.pane--title--button {
+        cursor: pointer;
+      }
     }
     &--description {
       color: var(--neutral-main);

package/dist/src/components/atoms/CardPane/CardPaneInfo.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CardPaneInfo = ({ description, subdescription, id, title }) => {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const CardPaneInfo = ({ description, subdescription, id, title, handleClick }) => {
+    const paneTitle = (_jsx(_Fragment, { children: handleClick ? (_jsx("button", { onClick: handleClick, className: 'pane--title pane--title--button', children: title })) : (_jsx("div", { className: 'pane--title', children: title })) }));
     if (description === 'Active' || description === 'Inactive') {
         let descriptionClass;
         if (description === 'Active') {
@@ -8,8 +9,8 @@ const CardPaneInfo = ({ description, subdescription, id, title }) => {
         else if (description === 'Inactive') {
             descriptionClass = 'pane--description--inactive';
         }
-        return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
+        return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsx("div", { "data-testid": 'description-div', className: descriptionClass, children: _jsx("li", { className: 'position', children: _jsx("div", { className: 'marker', children: description }) }) })] }, id));
     }
-    return (_jsxs("div", { className: 'pane-wrapper', children: [_jsx("div", { className: 'pane--title', children: title }), _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
+    return (_jsxs("div", { className: 'pane-wrapper', children: [paneTitle, _jsxs("div", { className: 'pane--description', children: [description, subdescription !== undefined && _jsx("span", { className: 'pane--description--subdescription', children: subdescription })] })] }, id));
 };
 export default CardPaneInfo;

package/dist/src/components/atoms/CardPane/CardPaneInfo.tsx

@@ -4,7 +4,18 @@ import React, { type FC } from 'react'
 
 import { type CardPaneInfoProps } from './CardPaneProps.types'
 
-const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title }) => {
+const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id, title, handleClick }) => {
+  const paneTitle = (
+    <>
+      {handleClick ? (
+        <button onClick={handleClick} className='pane--title pane--title--button'>
+          {title}
+        </button>
+      ) : (
+        <div className='pane--title'>{title}</div>
+      )}
+    </>
+  )
   if (description === 'Active' || description === 'Inactive') {
     let descriptionClass
     if (description === 'Active') {
@@ -14,7 +25,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
     }
     return (
       <div key={id} className='pane-wrapper'>
-        <div className='pane--title'>{title}</div>
+        {paneTitle}
         <div data-testid='description-div' className={descriptionClass}>
           <li className='position'>
             <div className='marker'>{description}</div>
@@ -26,7 +37,7 @@ const CardPaneInfo: FC<CardPaneInfoProps> = ({ description, subdescription, id,
 
   return (
     <div key={id} className='pane-wrapper'>
-      <div className='pane--title'>{title}</div>
+      {paneTitle}
       <div className='pane--description'>
         {description}
         {subdescription !== undefined && <span className='pane--description--subdescription'>{subdescription}</span>}

package/dist/src/components/atoms/CardPane/CardPaneProps.types.d.ts

@@ -6,4 +6,5 @@ export interface CardPaneInfoProps {
     id: string;
     title: string;
     subdescription?: string;
+    handleClick?: () => void;
 }

package/dist/src/components/atoms/CardPane/CardPaneProps.types.ts

@@ -7,4 +7,5 @@ export interface CardPaneInfoProps {
   id: string
   title: string
   subdescription?: string
+  handleClick?: () => void
 }

package/dist/src/components/atoms/ContactCard/ContactCard.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContactCardStyled } from './ContactCard.styled';
 const ContactCard = ({ id, title, image, body = '', url, isClickableOnDesktop = true, dataQa }) => {
-    return (_jsxs(ContactCardStyled, { className: 'contact-card', children: [_jsx("div", { className: 'contact-card__icon', children: isClickableOnDesktop ? (_jsx("a", { className: 'contact-card__icon__image', "data-qa": dataQa, href: url, target: '_self', children: image })) : (_jsxs("div", { children: [_jsx("div", { className: 'contact-card__icon__image contact-card__icon__image-desktop', children: image }), _jsx("a", { className: 'contact-card__icon__image contact-card__icon__image-mobile', "data-qa": dataQa, href: url, children: image })] })) }), _jsx("div", { className: 'contact-card__title', children: title }), _jsx("p", { className: 'contact-card__text', children: body })] }, id));
+    const contactCardContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: 'contact-card__image', children: image }), _jsx("div", { className: 'contact-card__title', children: title }), _jsx("p", { className: 'contact-card__text', children: body })] }));
+    return (_jsx(ContactCardStyled, { children: isClickableOnDesktop ? (_jsx("a", { className: 'contact-card', "data-qa": dataQa, href: url, target: '_self', children: contactCardContent })) : (_jsxs("div", { children: [_jsx("div", { className: 'contact-card contact-card-desktop', "data-qa": dataQa, children: contactCardContent }), _jsx("a", { className: 'contact-card contact-card-mobile', "data-qa": dataQa, href: url, target: '_self', children: contactCardContent })] })) }, id));
 };
 export default ContactCard;

package/dist/src/components/atoms/ContactCard/ContactCard.styled.js

@@ -1,38 +1,40 @@
 import { device } from '../../../globalStyles/breakpoints';
 import styled from 'styled-components';
 export const ContactCardStyled = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: white;
-  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-  border-radius: 0.25rem;
-  min-width: 200px;
-  padding: 1rem;
-
   .contact-card {
-    &__icon {
-      &__image {
-        width: 2rem;
-      }
-      &__image-desktop {
-        display: none;
-        @media ${device.laptop} {
-          display: block;
-        }
-      }
-      &__image-mobile {
-        @media ${device.laptop} {
-          display: none;
-        }
-      }
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: white;
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+    border-radius: 0.25rem;
+    min-width: 12.5rem;
+    height: 7.875rem;
+    flex-shrink: 0;
+    padding: 1rem;
+    text-decoration: none;
+    color: var(--neutral-neutral-1);
+    &__image {
+      width: 2rem;
     }
     &__title {
       margin-top: 1rem;
-      line-height: 1rem;
+      font-size: 1rem;
+      line-height: 1.375rem;
     }
     &__text {
-      font-size: 14px;
+      font-size: 0.75rem;
+    }
+  }
+  .contact-card-desktop {
+    display: none;
+    @media ${device.desktop} {
+      display: flex;
+    }
+  }
+  .contact-card-mobile {
+    @media ${device.desktop} {
+      display: none;
     }
   }
 `;

package/dist/src/components/atoms/ContactCard/ContactCard.styled.ts

@@ -2,38 +2,40 @@ import { device } from '../../../globalStyles/breakpoints'
 import styled from 'styled-components'
 
 export const ContactCardStyled = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: white;
-  box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
-  border-radius: 0.25rem;
-  min-width: 200px;
-  padding: 1rem;
-
   .contact-card {
-    &__icon {
-      &__image {
-        width: 2rem;
-      }
-      &__image-desktop {
-        display: none;
-        @media ${device.laptop} {
-          display: block;
-        }
-      }
-      &__image-mobile {
-        @media ${device.laptop} {
-          display: none;
-        }
-      }
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: white;
+    box-shadow: 0 2px 6px 0 rgba(2, 55, 74, 0.25);
+    border-radius: 0.25rem;
+    min-width: 12.5rem;
+    height: 7.875rem;
+    flex-shrink: 0;
+    padding: 1rem;
+    text-decoration: none;
+    color: var(--neutral-neutral-1);
+    &__image {
+      width: 2rem;
     }
     &__title {
       margin-top: 1rem;
-      line-height: 1rem;
+      font-size: 1rem;
+      line-height: 1.375rem;
     }
     &__text {
-      font-size: 14px;
+      font-size: 0.75rem;
+    }
+  }
+  .contact-card-desktop {
+    display: none;
+    @media ${device.desktop} {
+      display: flex;
+    }
+  }
+  .contact-card-mobile {
+    @media ${device.desktop} {
+      display: none;
     }
   }
 `

package/dist/src/components/atoms/ContactCard/ContactCard.tsx

@@ -13,24 +13,30 @@ const ContactCard: FC<ContactCardProps> = ({
   isClickableOnDesktop = true,
   dataQa
 }) => {
-  return (
-    <ContactCardStyled className='contact-card' key={id}>
-      <div className='contact-card__icon'>
-        {isClickableOnDesktop ? (
-          <a className='contact-card__icon__image' data-qa={dataQa} href={url} target='_self'>
-            {image}
-          </a>
-        ) : (
-          <div>
-            <div className='contact-card__icon__image contact-card__icon__image-desktop'>{image}</div>
-            <a className='contact-card__icon__image contact-card__icon__image-mobile' data-qa={dataQa} href={url}>
-              {image}
-            </a>
-          </div>
-        )}
-      </div>
+  const contactCardContent = (
+    <>
+      <div className='contact-card__image'>{image}</div>
       <div className='contact-card__title'>{title}</div>
       <p className='contact-card__text'>{body}</p>
+    </>
+  )
+
+  return (
+    <ContactCardStyled key={id}>
+      {isClickableOnDesktop ? (
+        <a className='contact-card' data-qa={dataQa} href={url} target='_self'>
+          {contactCardContent}
+        </a>
+      ) : (
+        <div>
+          <div className='contact-card contact-card-desktop' data-qa={dataQa}>
+            {contactCardContent}
+          </div>
+          <a className='contact-card contact-card-mobile' data-qa={dataQa} href={url} target='_self'>
+            {contactCardContent}
+          </a>
+        </div>
+      )}
     </ContactCardStyled>
   )
 }

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.js

@@ -2,18 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DocumentStatusStyled } from './DocumentStatus.styled';
 import { Done24px } from '../../../../images/componentsSvg/Done24px';
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p';
-import { RatafiaIcon24px } from '../../../../images/componentsSvg/RatafiaIcon24px';
 import { Time24px } from '../../../../images/componentsSvg/Time24px';
-const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText, statusAIReviewedText }) => {
+const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText }) => {
     if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
         return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-completed', children: [_jsx(Done24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusCompletedText })] }));
     }
     if (type === 'new') {
         return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-new', children: [_jsx(NewRelease24p, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusNewText })] }));
     }
-    if (type === 'ai_reviewed') {
-        return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --is-ai-reviewed', children: [_jsx(RatafiaIcon24px, { className: 'icon' }), " ", _jsx("span", { className: 'sans-serif --small', children: statusAIReviewedText })] }));
-    }
     return (_jsxs(DocumentStatusStyled, { "data-testid": 'document-status', className: 'document-status --in-progress', children: [_jsx(Time24px, { className: 'icon' }), _jsx("span", { className: 'sans-serif --small', children: statusInProgressText })] }));
 };
 export default DocumentStatus;

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.js

@@ -61,19 +61,5 @@ export const DocumentStatusStyled = styled.div `
         margin-right: 1.4rem;
       }
     }
-
-    &.--is-ai-reviewed {
-      padding: 0.25rem;
-      gap: 0.25rem;
-      background-color: var(--primary-main-light-5);
-      border-color: var(--primary-main-light-3);
-      color: var(--primary-main);
-
-      svg {
-        path {
-          fill: var(--primary-main);
-        }
-      }
-    }
   }
 `;

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.styled.ts

@@ -62,19 +62,5 @@ export const DocumentStatusStyled = styled.div`
         margin-right: 1.4rem;
       }
     }
-
-    &.--is-ai-reviewed {
-      padding: 0.25rem;
-      gap: 0.25rem;
-      background-color: var(--primary-main-light-5);
-      border-color: var(--primary-main-light-3);
-      color: var(--primary-main);
-
-      svg {
-        path {
-          fill: var(--primary-main);
-        }
-      }
-    }
   }
 `

package/dist/src/components/atoms/DocumentStatus/DocumentStatus.tsx

@@ -4,15 +4,13 @@ import { type DocumentStatusProps } from './DocumentStatusProps.types'
 import { DocumentStatusStyled } from './DocumentStatus.styled'
 import { Done24px } from '../../../../images/componentsSvg/Done24px'
 import { NewRelease24p } from '../../../../images/componentsSvg/NewRelease24p'
-import { RatafiaIcon24px } from '../../../../images/componentsSvg/RatafiaIcon24px'
 import { Time24px } from '../../../../images/componentsSvg/Time24px'
 
 const DocumentStatus: FC<DocumentStatusProps> = ({
   type,
   statusCompletedText,
   statusNewText,
-  statusInProgressText,
-  statusAIReviewedText
+  statusInProgressText
 }) => {
   if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
     return (
@@ -28,13 +26,6 @@ const DocumentStatus: FC<DocumentStatusProps> = ({
       </DocumentStatusStyled>
     )
   }
-  if (type === 'ai_reviewed') {
-    return (
-      <DocumentStatusStyled data-testid='document-status' className={'document-status --is-ai-reviewed'}>
-        <RatafiaIcon24px className='icon' /> <span className={'sans-serif --small'}>{statusAIReviewedText}</span>
-      </DocumentStatusStyled>
-    )
-  }
   return (
     <DocumentStatusStyled data-testid='document-status' className={'document-status --in-progress'}>
       <Time24px className='icon' />

package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.d.ts

@@ -3,5 +3,4 @@ export interface DocumentStatusProps {
     statusCompletedText: string;
     statusNewText: string;
     statusInProgressText: string;
-    statusAIReviewedText: string;
 }

package/dist/src/components/atoms/DocumentStatus/DocumentStatusProps.types.ts

@@ -3,5 +3,4 @@ export interface DocumentStatusProps {
   statusCompletedText: string
   statusNewText: string
   statusInProgressText: string
-  statusAIReviewedText: string
 }

package/dist/src/components/atoms/RichTextStrapi/RichTextStrapi.styled.js

@@ -1,9 +1,7 @@
 import styled from 'styled-components';
 export const RichTextStrapiStyled = styled.div `
-  &.richt-text-strapi {
-    & ul li,
-    ol li {
-      margin-bottom: 1rem;
-    }
+  ul li,
+  ol li {
+    margin-bottom: 1rem;
   }
 `;

package/dist/src/components/atoms/RichTextStrapi/RichTextStrapi.styled.ts

@@ -1,10 +1,8 @@
 import styled from 'styled-components'
 
 export const RichTextStrapiStyled = styled.div`
-  &.richt-text-strapi {
-    & ul li,
-    ol li {
-      margin-bottom: 1rem;
-    }
+  ul li,
+  ol li {
+    margin-bottom: 1rem;
   }
 `

package/dist/src/components/molecules/Article/Article.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg';
 import { Button } from '../../atoms';
 // import './Article.scss'
-const Article = ({ imageUrl, title, articleUrl, summary }) => {
-    return (_jsxs("div", { className: 'article', children: [_jsx("img", { src: imageUrl, className: 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), _jsx(Button, { color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true })] })] }));
+const Article = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
+    return (_jsxs("div", { className: 'article', children: [_jsx("img", { src: imageUrl, className: 'image', loading: 'lazy', alt: title }), _jsxs("div", { className: 'information', children: [_jsx("a", { href: articleUrl, target: '_blank', rel: 'noreferrer', children: _jsxs("p", { className: 'title sans-serif --big', children: [title, " "] }) }), _jsx("div", { className: 'summary', children: summary }), isCategoryProductPage ? (_jsxs("div", { className: 'button-image-container', children: [_jsx(Button, { givenClass: 'thinner-letter', color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }), _jsx("img", { className: 'article__arrow-right', src: ArrowRight, alt: '' })] })) : (_jsx(Button, { color: 'tertiary', label: 'Read more', dataQa: 'article-read-more', link: articleUrl, isExternal: true }))] })] }));
 };
 export default Article;

package/dist/src/components/molecules/Article/Article.scss

@@ -62,5 +62,22 @@
         margin-top: 0;
       }
     }
+
+    .button-image-container {
+      align-items: center;
+      margin: 1rem 0 2rem 0;
+      display: flex;
+
+      .thinner-letter {
+        font-family: $font-sans;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 22px;
+        letter-spacing: -0.3px;
+        text-align: left;
+        margin: 0;
+        padding: 0 1rem 0 0;
+      }
+    }
   }
 }

package/dist/src/components/molecules/Article/Article.tsx

@@ -1,10 +1,11 @@
 import React, { type FC } from 'react'
 
+import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg'
 import { type ArticleProps } from './ArticleProps.types'
 import { Button } from '../../atoms'
 // import './Article.scss'
 
-const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary }) => {
+const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
   return (
     <div className='article'>
       <img src={imageUrl} className='image' loading='lazy' alt={title} />
@@ -13,7 +14,21 @@ const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary }) =>
           <p className='title sans-serif --big'>{title} </p>
         </a>
         <div className='summary'>{summary}</div>
-        <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
+        {isCategoryProductPage ? (
+          <div className='button-image-container'>
+            <Button
+              givenClass='thinner-letter'
+              color='tertiary'
+              label={'Read more'}
+              dataQa='article-read-more'
+              link={articleUrl}
+              isExternal
+            />
+            <img className='article__arrow-right' src={ArrowRight} alt=''></img>
+          </div>
+        ) : (
+          <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
+        )}
       </div>
     </div>
   )

package/dist/src/components/molecules/Article/ArticleProps.types.d.ts

@@ -4,4 +4,5 @@ export interface ArticleProps {
     articleUrl: string;
     summary: string;
     id: string;
+    isCategoryProductPage: boolean;
 }

package/dist/src/components/molecules/Article/ArticleProps.types.ts

@@ -4,4 +4,5 @@ export interface ArticleProps {
   articleUrl: string
   summary: string
   id: string
+  isCategoryProductPage: boolean
 }

package/dist/src/components/molecules/ExpertCardList/ExpertCardList.scss

@@ -3,11 +3,12 @@
 
 .expert-card-list {
   display: flex;
-  flex-direction: column;
+  flex-flow: column;
+  gap: 0 2rem;
   justify-content: center;
   margin: 2rem 0 3rem 0;
 
   @include landscape-tablets {
-    flex-direction: row;
+    flex-flow: row wrap;
   }
 }

package/dist/src/components/molecules/RatafiaSubscriptionCard/RatafiaSubscriptionCard.scss

@@ -64,7 +64,7 @@
   }
 
   &.primary {
-    background-color: get-color(neutral, neutral-6);
+    background-color: var(--neutral-neutral-6);
 
     .icon-svg-with-theme-color {
       background-color: get-color(primary, main-light-1);

package/dist/src/components/organisms/ArticlesList/ArticlesList.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Article } from '../../molecules';
 // import './ArticlesList.scss'
-const ArticlesList = ({ articles = [] }) => {
+const ArticlesList = ({ articles = [], isCategoryProductPage = false }) => {
     if (articles?.length === 0)
         return null;
-    return (_jsx("div", { className: 'articles_wrapper', children: articles.map((article) => (_jsx(Article, { ...article }, `article_${article?.id}`))) }));
+    return (_jsx("div", { className: 'articles_wrapper', children: articles.map((article) => (_jsx(Article, { ...article, isCategoryProductPage: isCategoryProductPage }, `article_${article?.id}`))) }));
 };
 export default ArticlesList;

package/dist/src/components/organisms/ArticlesList/ArticlesList.tsx

@@ -5,13 +5,13 @@ import { Article, type ArticleProps } from '../../molecules'
 import { type ArticlesListProps } from './ArticlesListProps.types'
 // import './ArticlesList.scss'
 
-const ArticlesList: FC<ArticlesListProps> = ({ articles = [] }) => {
+const ArticlesList: FC<ArticlesListProps> = ({ articles = [], isCategoryProductPage = false }) => {
   if (articles?.length === 0) return null
 
   return (
     <div className='articles_wrapper'>
       {articles.map((article: ArticleProps) => (
-        <Article key={`article_${article?.id}`} {...article} />
+        <Article key={`article_${article?.id}`} {...article} isCategoryProductPage={isCategoryProductPage} />
       ))}
     </div>
   )