@npm_leadtech/legal-lib-components 5.7.8 → 5.9.0

package/dist/images/componentsSvg/RatafiaIcon24px.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+interface RatafiaIcon24pxProps {
+    className: string;
+}
+export declare const RatafiaIcon24px: FC<RatafiaIcon24pxProps>;
+export {};

package/dist/images/componentsSvg/RatafiaIcon24px.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RatafiaIcon24px = ({ className }) => (_jsx("svg", { width: '17', height: '16', viewBox: '0 0 17 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("g", { id: 'Icon/Symbol/AI_24px', children: _jsx("path", { id: 'path', fillRule: 'evenodd', clipRule: 'evenodd', d: 'M13.6732 1.14034C13.4454 0.509208 12.5528 0.509208 12.3251 1.14034L11.9922 2.06282C11.9198 2.26336 11.7619 2.42127 11.5614 2.49363L10.6389 2.82651C10.0078 3.05426 10.0078 3.94684 10.6389 4.17458L11.5614 4.50746C11.7619 4.57982 11.9198 4.73773 11.9922 4.93827L12.3251 5.86075C12.5528 6.49189 13.4454 6.49188 13.6732 5.86075L14.006 4.93827C14.0784 4.73773 14.2363 4.57982 14.4369 4.50746L15.3593 4.17458C15.9905 3.94684 15.9905 3.05426 15.3593 2.82651L14.4369 2.49363C14.2363 2.42127 14.0784 2.26336 14.006 2.06282L13.6732 1.14034ZM8.53354 4.24146C8.07805 2.97919 6.29289 2.97919 5.8374 4.24146L5.07821 6.34533C4.93348 6.74641 4.61768 7.06222 4.21659 7.20695L2.11272 7.96613C0.850447 8.42162 0.850449 10.2068 2.11272 10.6623L4.21659 11.4215C4.61768 11.5662 4.93348 11.882 5.07821 12.2831L5.8374 14.387C6.29289 15.6492 8.07805 15.6492 8.53354 14.387L9.29272 12.2831C9.43745 11.882 9.75326 11.5662 10.1543 11.4215L12.2582 10.6623C13.5205 10.2068 13.5205 8.42162 12.2582 7.96613L10.1543 7.20695C9.75326 7.06222 9.43745 6.74641 9.29272 6.34533L8.53354 4.24146Z', fill: '#078080' }) }) }));

package/dist/images/componentsSvg/RatafiaIcon24px.tsx

@@ -0,0 +1,18 @@
+import React, { type FC } from 'react'
+interface RatafiaIcon24pxProps {
+  className: string
+}
+
+export const RatafiaIcon24px: FC<RatafiaIcon24pxProps> = ({ className }: RatafiaIcon24pxProps) => (
+  <svg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <g id='Icon/Symbol/AI_24px'>
+      <path
+        id='path'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M13.6732 1.14034C13.4454 0.509208 12.5528 0.509208 12.3251 1.14034L11.9922 2.06282C11.9198 2.26336 11.7619 2.42127 11.5614 2.49363L10.6389 2.82651C10.0078 3.05426 10.0078 3.94684 10.6389 4.17458L11.5614 4.50746C11.7619 4.57982 11.9198 4.73773 11.9922 4.93827L12.3251 5.86075C12.5528 6.49189 13.4454 6.49188 13.6732 5.86075L14.006 4.93827C14.0784 4.73773 14.2363 4.57982 14.4369 4.50746L15.3593 4.17458C15.9905 3.94684 15.9905 3.05426 15.3593 2.82651L14.4369 2.49363C14.2363 2.42127 14.0784 2.26336 14.006 2.06282L13.6732 1.14034ZM8.53354 4.24146C8.07805 2.97919 6.29289 2.97919 5.8374 4.24146L5.07821 6.34533C4.93348 6.74641 4.61768 7.06222 4.21659 7.20695L2.11272 7.96613C0.850447 8.42162 0.850449 10.2068 2.11272 10.6623L4.21659 11.4215C4.61768 11.5662 4.93348 11.882 5.07821 12.2831L5.8374 14.387C6.29289 15.6492 8.07805 15.6492 8.53354 14.387L9.29272 12.2831C9.43745 11.882 9.75326 11.5662 10.1543 11.4215L12.2582 10.6623C13.5205 10.2068 13.5205 8.42162 12.2582 7.96613L10.1543 7.20695C9.75326 7.06222 9.43745 6.74641 9.29272 6.34533L8.53354 4.24146Z'
+        fill='#078080'
+      />
+    </g>
+  </svg>
+)

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

@@ -2,14 +2,18 @@ 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 }) => {
+const DocumentStatus = ({ type, statusCompletedText, statusNewText, statusInProgressText, statusAIReviewedText }) => {
     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,5 +61,19 @@ 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,5 +62,19 @@ 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,13 +4,15 @@ 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
+  statusInProgressText,
+  statusAIReviewedText
 }) => {
   if (type === 'complete' || type === 'downloaded' || type === 'pdf_processing' || type === 'pdf_generated') {
     return (
@@ -26,6 +28,13 @@ 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,4 +3,5 @@ export interface DocumentStatusProps {
     statusCompletedText: string;
     statusNewText: string;
     statusInProgressText: string;
+    statusAIReviewedText: string;
 }

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

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

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import { useEffect, useRef } from 'react';
 import { useDispatchDataAccordionItem, useStateDataAccordionItem } from '../../organisms/Accordion/Accordion.context';
-// import './AccordionItem.scss'
+import { AccordionItemStyled } from './AccordionItem.styled';
 export const AccordionItem = ({ accordionRightContent, children, defaultHeightItem = 416, index, isOpen, onClick, title }) => {
     const contenReftHeight = useRef(null);
     const { state } = useStateDataAccordionItem(index);
@@ -14,7 +14,7 @@ export const AccordionItem = ({ accordionRightContent, children, defaultHeightIt
             dispatch({ type: 'unlocked', accordionItem: index, resetAction: 'default' });
         }
     }, [state.locked.actionType]);
-    return (_jsxs("div", { className: 'accordion__container', children: [_jsxs("button", { className: `accordion__button 
+    return (_jsxs(AccordionItemStyled, { className: 'accordion__container', children: [_jsxs("button", { className: `accordion__button 
           ${state.handler === 'success' ? '--success' : ''}
           ${state.locked.isLocked ? '--locked' : ''}`, onClick: () => {
                     !state.locked.isLocked && onClick();

package/dist/src/components/molecules/AccordionItem/AccordionItem.styled.d.ts

@@ -0,0 +1 @@
+export declare const AccordionItemStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/molecules/AccordionItem/AccordionItem.styled.js

@@ -0,0 +1,69 @@
+import styled from 'styled-components';
+export const AccordionItemStyled = styled.div `
+  overflow: hidden;
+  border-bottom: 1px solid var(--neutral-neutral-4);
+
+  &:first-child {
+    border-top: 1px solid var(--neutral-neutral-4);
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  .accordion__button {
+    border-right: 1px solid var(--neutral-neutral-4);
+    border-left: 1px solid var(--neutral-neutral-4);
+    width: 100%;
+    text-align: left;
+    padding: 1rem 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--neutral-neutral-6);
+    border-bottom: none;
+    border-top: none;
+    cursor: pointer;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.3px;
+
+    &.--success {
+      background: #eff7f5;
+    }
+
+    &.--locked {
+      cursor: not-allowed;
+    }
+
+    &:not(.--locked):hover {
+      background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
+    }
+  }
+
+  .accordion__title {
+    color: var(--primary-main-dark-1);
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+
+    &.--locked {
+      color: var(--neutral-neutral-2);
+    }
+  }
+
+  .accordion__content {
+    padding: 0 1.5rem;
+    transition: height 0.7s ease-in-out;
+    border-right: 1px solid var(--neutral-neutral-4);
+    border-left: 1px solid var(--neutral-neutral-4);
+    border-bottom: none;
+  }
+`;

package/dist/src/components/molecules/AccordionItem/{AccordionItem.scss → AccordionItem.styled.ts}

@@ -1,6 +1,6 @@
-@import '../../../globalStyles/mediaqueries.scss';
+import styled from 'styled-components'
 
-.accordion__container {
+export const AccordionItemStyled = styled.div`
   overflow: hidden;
   border-bottom: 1px solid var(--neutral-neutral-4);
 
@@ -67,4 +67,4 @@
     border-left: 1px solid var(--neutral-neutral-4);
     border-bottom: none;
   }
-}
+`

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

@@ -4,8 +4,7 @@ import React, { useEffect, useRef } from 'react'
 import { useDispatchDataAccordionItem, useStateDataAccordionItem } from '../../organisms/Accordion/Accordion.context'
 
 import { type AccordionItemProps } from './AccordionItemProps.types'
-
-// import './AccordionItem.scss'
+import { AccordionItemStyled } from './AccordionItem.styled'
 
 export const AccordionItem = ({
   accordionRightContent,
@@ -28,7 +27,7 @@ export const AccordionItem = ({
   }, [state.locked.actionType])
 
   return (
-    <div className='accordion__container'>
+    <AccordionItemStyled className='accordion__container'>
       <button
         className={`accordion__button 
           ${state.handler === 'success' ? '--success' : ''}
@@ -48,6 +47,6 @@ export const AccordionItem = ({
       >
         {children}
       </div>
-    </div>
+    </AccordionItemStyled>
   )
 }

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ActionButtonHeaderRatafiaCard } from '../../atoms';
-// import './ActionButtonHeaderRatafiaCardList.scss'
+import { ActionButtonHeaderRatafiaCardListStyled } from './ActionButtonHeaderRatafiaCardList.styled';
 const ActionButtonHeaderRatafiaCardList = ({ actionButtons }) => {
     if (actionButtons.length === 0)
         return null;
-    return (_jsx("div", { className: 'action-button-header-ratafia-card-list', children: actionButtons.map((actionButton) => (_jsx(ActionButtonHeaderRatafiaCard, { ...actionButton }, actionButton.id))) }));
+    return (_jsx(ActionButtonHeaderRatafiaCardListStyled, { className: 'action-button-header-ratafia-card-list', children: actionButtons.map((actionButton) => (_jsx(ActionButtonHeaderRatafiaCard, { ...actionButton }, actionButton.id))) }));
 };
 export default ActionButtonHeaderRatafiaCardList;

package/dist/src/components/molecules/ActionButtonHeaderRatafiaCardList/ActionButtonHeaderRatafiaCardList.styled.d.ts

@@ -0,0 +1 @@
+export declare const ActionButtonHeaderRatafiaCardListStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/molecules/ActionButtonHeaderRatafiaCardList/ActionButtonHeaderRatafiaCardList.styled.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export const ActionButtonHeaderRatafiaCardListStyled = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-radius: 4px 4px 0 0;
+`;

package/dist/src/components/molecules/ActionButtonHeaderRatafiaCardList/ActionButtonHeaderRatafiaCardList.styled.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components'
+
+export const ActionButtonHeaderRatafiaCardListStyled = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-radius: 4px 4px 0 0;
+`

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

@@ -2,17 +2,17 @@ import React, { type FC } from 'react'
 
 import { ActionButtonHeaderRatafiaCard } from '../../atoms'
 import { type ActionButtonHeaderRatafiaCardListProps } from './ActionButtonHeaderRatafiaCardListProps.types'
-// import './ActionButtonHeaderRatafiaCardList.scss'
+import { ActionButtonHeaderRatafiaCardListStyled } from './ActionButtonHeaderRatafiaCardList.styled'
 
 const ActionButtonHeaderRatafiaCardList: FC<ActionButtonHeaderRatafiaCardListProps> = ({ actionButtons }) => {
   if (actionButtons.length === 0) return null
 
   return (
-    <div className='action-button-header-ratafia-card-list'>
+    <ActionButtonHeaderRatafiaCardListStyled className='action-button-header-ratafia-card-list'>
       {actionButtons.map((actionButton) => (
         <ActionButtonHeaderRatafiaCard key={actionButton.id} {...actionButton} />
       ))}
-    </div>
+    </ActionButtonHeaderRatafiaCardListStyled>
   )
 }
 export default ActionButtonHeaderRatafiaCardList

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlsoKnownAsStyled } from './AlsoKnownAs.styled';
 import { DocumentTag } from '../../atoms';
 import { SymbolDoc } from '../../../../images/componentsSvg/SymbolDoc';
-// import './AlsoKnownAs.scss'
 const AlsoKnownAs = ({ title = '', documents = [] }) => {
     if (documents.length === 0)
         return null;
-    return (_jsxs("div", { className: 'also-known-as', children: [_jsxs("p", { className: 'title', children: [_jsx(SymbolDoc, {}), _jsx("span", { className: 'text', children: title })] }), documents.map((item) => (_jsx(DocumentTag, { text: item }, item)))] }));
+    return (_jsxs(AlsoKnownAsStyled, { className: 'also-known-as', children: [_jsxs("p", { className: 'title', children: [_jsx(SymbolDoc, {}), _jsx("span", { className: 'text', children: title })] }), documents.map((item) => (_jsx(DocumentTag, { text: item }, item)))] }));
 };
 export default AlsoKnownAs;

package/dist/src/components/molecules/AlsoKnownAs/AlsoKnownAs.styled.d.ts

@@ -0,0 +1 @@
+export declare const AlsoKnownAsStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/molecules/AlsoKnownAs/AlsoKnownAs.styled.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+export const AlsoKnownAsStyled = styled.div `
+  display: flex;
+  align-items: center;
+  gap: calc(1rem / 2);
+  flex-wrap: wrap;
+
+  .title {
+    display: flex;
+    align-items: center;
+    gap: calc(1rem / 4);
+    flex-wrap: nowrap;
+
+    svg {
+      width: 18px;
+      height: 18px;
+      fill: var(--secondary-main-dark-1);
+    }
+
+    .text {
+      color: var(--Neutral-600, #6d7275);
+      font-size: 0.875rem;
+      line-height: 18px;
+      letter-spacing: -0.3px;
+      white-space: nowrap;
+    }
+  }
+`;

package/dist/src/components/molecules/AlsoKnownAs/{AlsoKnownAs.scss → AlsoKnownAs.styled.ts}

@@ -1,6 +1,6 @@
-@import '../../../globalStyles/variables.scss';
+import styled from 'styled-components'
 
-.also-known-as {
+export const AlsoKnownAsStyled = styled.div`
   display: flex;
   align-items: center;
   gap: calc(1rem / 2);
@@ -15,7 +15,7 @@
     svg {
       width: 18px;
       height: 18px;
-      fill: get-color('secondary', 'main-dark-1');
+      fill: var(--secondary-main-dark-1);
     }
 
     .text {
@@ -26,4 +26,4 @@
       white-space: nowrap;
     }
   }
-}
+`

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

@@ -1,15 +1,15 @@
 import React, { type FC } from 'react'
 
 import { type AlsoKnownAsProps } from './AlsoKnownAsProps.types'
+import { AlsoKnownAsStyled } from './AlsoKnownAs.styled'
 import { DocumentTag } from '../../atoms'
 import { SymbolDoc } from '../../../../images/componentsSvg/SymbolDoc'
-// import './AlsoKnownAs.scss'
 
 const AlsoKnownAs: FC<AlsoKnownAsProps> = ({ title = '', documents = [] }) => {
   if (documents.length === 0) return null
 
   return (
-    <div className='also-known-as'>
+    <AlsoKnownAsStyled className='also-known-as'>
       <p className='title'>
         <SymbolDoc />
         <span className='text'>{title}</span>
@@ -17,7 +17,7 @@ const AlsoKnownAs: FC<AlsoKnownAsProps> = ({ title = '', documents = [] }) => {
       {documents.map((item) => (
         <DocumentTag key={item} text={item} />
       ))}
-    </div>
+    </AlsoKnownAsStyled>
   )
 }
 

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg';
+import { ArticleStyled } from './Article.styled';
 import { Button } from '../../atoms';
-// import './Article.scss'
-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 }))] })] }));
+const Article = ({ imageUrl, title, articleUrl, summary }) => {
+    return (_jsxs(ArticleStyled, { 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 })] })] }));
 };
 export default Article;

package/dist/src/components/molecules/Article/Article.styled.d.ts

@@ -0,0 +1 @@
+export declare const ArticleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,65 @@
+import { device } from '../../../globalStyles/breakpoints';
+import styled from 'styled-components';
+export const ArticleStyled = styled.div `
+  display: flex;
+  flex-flow: row wrap;
+  flex: 1 1 0;
+  border-radius: var(--global-border-radius);
+  box-shadow: var(--box-shadow-small);
+  max-width: $md;
+  margin: 1rem 0;
+
+  @media ${device.laptop} {
+    margin: 0 0.5rem;
+  }
+
+  .image {
+    object-fit: cover;
+    object-position: 25%;
+    height: 13em;
+    width: 100%;
+
+    @media ${device['landscape-tablets']} {
+      width: 35%;
+      height: auto;
+    }
+  }
+
+  .information {
+    width: 100%;
+    padding: 1rem 1.5rem 0;
+    text-align: left;
+    max-width: 100%;
+
+    @media ${device['landscape-tablets']} {
+      width: 65%;
+      height: 100%;
+    }
+
+    .title {
+      font-weight: bold;
+    }
+
+    .summary {
+      color: #6d7275;
+      margin: 0.5rem 0;
+      display: -webkit-box;
+      -webkit-line-clamp: 5;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      @media ${device['landscape-tablets']} {
+        margin: 0;
+        padding: 0.5rem 0;
+      }
+    }
+
+    .e-button {
+      margin: 2.5rem 0 1rem -1rem;
+      @media ${device.laptop} {
+        margin-top: 0;
+      }
+    }
+  }
+`;

package/dist/src/components/molecules/Article/{Article.scss → Article.styled.ts}

@@ -1,16 +1,16 @@
-@import '../../../globalStyles/variables.scss';
-@import '../../../globalStyles/mediaqueries.scss';
+import { device } from '../../../globalStyles/breakpoints'
+import styled from 'styled-components'
 
-.article {
+export const ArticleStyled = styled.div`
   display: flex;
   flex-flow: row wrap;
   flex: 1 1 0;
   border-radius: var(--global-border-radius);
-  box-shadow: $box-shadow-small;
+  box-shadow: var(--box-shadow-small);
   max-width: $md;
   margin: 1rem 0;
 
-  @include laptop {
+  @media ${device.laptop} {
     margin: 0 0.5rem;
   }
 
@@ -20,7 +20,7 @@
     height: 13em;
     width: 100%;
 
-    @include landscape-tablets {
+    @media ${device['landscape-tablets']} {
       width: 35%;
       height: auto;
     }
@@ -32,7 +32,7 @@
     text-align: left;
     max-width: 100%;
 
-    @include landscape-tablets {
+    @media ${device['landscape-tablets']} {
       width: 65%;
       height: 100%;
     }
@@ -50,7 +50,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      @include landscape-tablets {
+      @media ${device['landscape-tablets']} {
         margin: 0;
         padding: 0.5rem 0;
       }
@@ -58,26 +58,9 @@
 
     .e-button {
       margin: 2.5rem 0 1rem -1rem;
-      @include laptop {
+      @media ${device.laptop} {
         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,36 +1,21 @@
 import React, { type FC } from 'react'
 
-import ArrowRight from '../../../../images/svg/arrow-right-24px-outlined.svg'
 import { type ArticleProps } from './ArticleProps.types'
+import { ArticleStyled } from './Article.styled'
 import { Button } from '../../atoms'
-// import './Article.scss'
 
-const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary, isCategoryProductPage }) => {
+const Article: FC<ArticleProps> = ({ imageUrl, title, articleUrl, summary }) => {
   return (
-    <div className='article'>
+    <ArticleStyled className='article'>
       <img src={imageUrl} className='image' loading='lazy' alt={title} />
       <div className='information'>
         <a href={articleUrl} target='_blank' rel='noreferrer'>
           <p className='title sans-serif --big'>{title} </p>
         </a>
         <div className='summary'>{summary}</div>
-        {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 />
-        )}
+        <Button color='tertiary' label={'Read more'} dataQa='article-read-more' link={articleUrl} isExternal />
       </div>
-    </div>
+    </ArticleStyled>
   )
 }
 

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

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

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

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