Merge branch 'master' into dev/DS-979

kronostechnologies · Mar 15, 2024 · 1eaab79 · 1eaab79
2 parents 5fba2ff + 8070f57
commit 1eaab79
Show file tree

Hide file tree

Showing 20 changed files with 367 additions and 116 deletions.
diff --git a/packages/react/src/components/accordion/accordion-item.tsx b/packages/react/src/components/accordion/accordion-item.tsx
@@ -19,8 +19,8 @@ export interface AccordionItemProps {
 }
 
 const AccordionSection = styled.section<{ theme: ResolvedTheme }>`
-    background: ${({ theme }) => theme.greys['colored-white']};
-    border-color: ${({ theme }) => theme.greys.grey};
+    background: ${({ theme }) => theme.component['accordion-panel-background-color']};
+    border-color: ${({ theme }) => theme.component['accordion-panel-border-color']};
     border-radius: 0 0 var(--border-radius-2x) var(--border-radius-2x);
     border-style: solid;
     border-width: 0;
@@ -39,8 +39,8 @@ const AccordionSection = styled.section<{ theme: ResolvedTheme }>`
 `;
 
 const AccordionBody = styled.div<{ theme: ResolvedTheme }>`
-    background: ${({ theme }) => theme.greys['colored-white']};
-    color: ${({ theme }) => theme.greys['neutral-90']};
+    background: ${({ theme }) => theme.component['accordion-panel-background-color']};
+    color: ${({ theme }) => theme.component['accordion-panel-text-color']};
     font-size: 0.75rem;
     font-weight: var(--font-normal);
     letter-spacing: 0.015rem;
@@ -62,9 +62,9 @@ const HeadingStyled = styled(Heading)`
 
 const ButtonStyled = styled(Button)<{ theme: ResolvedTheme }>`
     align-items: flex-start;
-    border: 1px solid ${({ theme }) => theme.greys.grey};
+    border: 1px solid ${({ theme }) => theme.component['accordion-header-border-color']};
     border-radius: var(--border-radius-2x);
-    color: ${({ theme }) => theme.greys['neutral-90']};
+    color: ${({ theme }) => theme.component['accordion-header-text-color']};
     font-size: 0.875rem;
     font-weight: var(--font-normal);
     justify-content: start;
@@ -81,24 +81,24 @@ const ButtonStyled = styled(Button)<{ theme: ResolvedTheme }>`
     width: 100%;
 
     &[aria-expanded='true'] {
-        background: ${({ theme }) => theme.greys.white};
+        background: ${({ theme }) => theme.component['accordion-header-expanded-background-color']};
         border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
-        color: ${({ theme }) => theme.greys['neutral-90']};
+        color: ${({ theme }) => theme.component['accordion-header-expanded-text-color']};
         transition-delay: 0s;
         transition-duration: 0.1s;
         transition-property: border-radius;
         transition-timing-function: ease;
     }
 
     &:focus {
-        box-shadow: ${({ theme }) => theme.tokens['focus-box-shadow-inset']};
-        color: ${({ theme }) => theme.greys['neutral-90']};
+        box-shadow: inset 0 0 0 2px ${({ theme }) => theme.component['accordion-header-focus-box-shadow-inset-color']};
+        color: ${({ theme }) => theme.component['accordion-header-focus-text-color']};
     }
 
     &:hover {
-        background: ${({ theme }) => theme.greys.grey};
-        border-color: ${({ theme }) => theme.greys['neutral-90']};
-        color: ${({ theme }) => theme.greys['neutral-90']};
+        background: ${({ theme }) => theme.component['accordion-header-hover-background-color']};
+        border-color: ${({ theme }) => theme.component['accordion-header-hover-border-color']};
+        color: ${({ theme }) => theme.component['accordion-header-hover-color']};
     }
 
     > svg {
@@ -108,13 +108,13 @@ const ButtonStyled = styled(Button)<{ theme: ResolvedTheme }>`
     }
 
     &:disabled {
-        background-color: ${({ theme }) => theme.greys['light-grey']};
+        background-color: ${({ theme }) => theme.component['accordion-header-disabled-background-color']};
         &:hover {
-            border-color: ${({ theme }) => theme.greys.grey};
-            color: ${({ theme }) => theme.greys['mid-grey']};
+            border-color: ${({ theme }) => theme.component['accordion-header-disabled-hover-border-color']};
+            color: ${({ theme }) => theme.component['accordion-header-disabled-hover-text-color']};
         }
         > svg {
-            color: ${({ theme }) => theme.greys['mid-grey']};
+            color: ${({ theme }) => theme.component['accordion-header-disabled-svg-color']};
         }
     }
 `;

diff --git a/packages/react/src/components/carousel/carousel.tsx b/packages/react/src/components/carousel/carousel.tsx
@@ -59,8 +59,8 @@ interface DotProps {
 }
 
 const Dot = styled.button<DotProps>`
-    background-color: ${({ active, theme }) => (active ? theme.main['primary-1.1'] : theme.greys.grey)};
-    border: 1px solid transparent;
+    background-color: ${({ active, theme }) => (active ? theme.component['carousel-dot-active-background-color'] : theme.component['carousel-dot-inactive-background-color'])};
+    border: 1px solid  ${({ theme }) => theme.component['carousel-dot-border-color']};
     border-radius: 50%;
     box-sizing: border-box;
     display: inline-block;
@@ -79,7 +79,7 @@ interface NavigationButtonProps {
 }
 
 const NavigationButton = styled.button.attrs<NavigationButtonProps>({ type: 'button' })`
-    border: 1px solid transparent;
+    border: 1px solid ${({ theme }) => theme.component['carousel-nav-button-border-color']};
     height: 34px;
     visibility: ${({ disabled }) => (disabled ? 'hidden' : 'visible')};
     width: 34px;
@@ -89,12 +89,12 @@ const NavigationButton = styled.button.attrs<NavigationButtonProps>({ type: 'but
 
 const LeftArrowIcon: VoidFunctionComponent = (): ReactElement => {
     const theme = useTheme();
-    return <Icon name="arrowLeft" size="100%" color={theme.greys['dark-grey']} />;
+    return <Icon name="arrowLeft" size="100%" color={theme.component['carousel-arrow-icon-color']} />;
 };
 
 const RightArrowIcon: VoidFunctionComponent = (): ReactElement => {
     const theme = useTheme();
-    return <Icon name="arrowRight" size="100%" color={theme.greys['dark-grey']} />;
+    return <Icon name="arrowRight" size="100%" color={theme.component['carousel-arrow-icon-color']} />;
 };
 
 export interface CarouselProps extends Pick<AriaAttributes, 'aria-label'> {

diff --git a/packages/react/src/components/modal/modal.tsx b/packages/react/src/components/modal/modal.tsx
@@ -42,8 +42,8 @@ function getModalMinWidth({ breakpoints, isMobile }: StyledModalProps): string {
 }
 
 const StyledModal = styled(ReactModal)<StyledModalProps>`
-    background-color: ${({ theme }) => theme.greys.white};
-    border: 1px solid ${({ theme }) => theme.greys['dark-grey']};
+    background-color: ${({ theme }) => theme.component['modal-background-color']};
+    border: 1px solid ${({ theme }) => theme.component['modal-border-color']};
     border-radius: var(--border-radius-2x);
     box-shadow: 0 6px 10px 0 rgb(0 0 0 / 10%);
     box-sizing: border-box;
@@ -65,8 +65,8 @@ const StyledModal = styled(ReactModal)<StyledModalProps>`
     }
 
     &:focus {
-        border-color: ${({ theme }) => theme.tokens['focus-border']};
-        box-shadow: ${({ theme }) => theme.tokens['focus-box-shadow']}, 0 6px 10px 0 rgb(0 0 0 / 10%);
+        border-color: ${({ theme }) => theme.component['modal-focus-border-color']};
+        box-shadow: 0 0 0 2px ${({ theme }) => theme.component['modal-focus-box-shadow-color']}, 0 6px 10px 0 rgb(0 0 0 / 10%);
         outline: none;
     }
 `;
@@ -81,8 +81,7 @@ interface HeaderProps extends ContentProps {
     isTopScrolled?: boolean;
 }
 const Header = styled.header<HeaderProps>`
-    /* TODO change colors when updating thematization */
-    border-bottom: 1px solid ${({ isTopScrolled }) => (isTopScrolled ? '#878f9a' : 'transparent')};
+    border-bottom: 1px solid ${({ isTopScrolled, theme }) => (isTopScrolled ? theme.component['modal-header-border-bottom-color'] : 'transparent')};
     padding: ${getTopPadding} ${getPadding} var(--spacing-2x);
 
     & + ${Main} {
@@ -100,8 +99,7 @@ interface FooterProps extends ContentProps {
     isBottomScrolled?: boolean;
 }
 const Footer = styled.footer<FooterProps>`
-    /* TODO change colors when updating thematization */
-    border-top: 1px solid ${({ isBottomScrolled }) => (isBottomScrolled ? '#878f9a' : 'transparent')};
+    border-top: 1px solid ${({ isBottomScrolled, theme }) => (isBottomScrolled ? theme.component['modal-footer-border-top-color'] : 'transparent')};
     padding: var(--spacing-4x) ${getPadding} 0;
 `;
 

diff --git a/packages/react/src/components/radio-button-group/radio-button-group.tsx b/packages/react/src/components/radio-button-group/radio-button-group.tsx
@@ -88,7 +88,7 @@ const StyledLabel = styled.label`
 const ContentWrapper = styled.div<{ isExpanded: boolean, maxHeight?: number }>(({ isExpanded, maxHeight = 500 }) => `
     overflow: hidden;
     max-height: ${isExpanded ? `${maxHeight}px` : '0'};
-    transition: ${isExpanded ? 'max-height 1s ease-in' : 'max-height .5s ease-out'};
+    transition: max-height 0.5s ease;
 `);
 
 interface RadioButtonProps {

diff --git a/packages/react/src/components/tabs/tab-button.test.tsx b/packages/react/src/components/tabs/tab-button.test.tsx
@@ -17,15 +17,15 @@ describe('TabButton', () => {
         const expectedButtonText = 'some text';
         const wrapper = mountWithProviders(<TabButton {...focusedAndSelected}>{expectedButtonText}</TabButton>);
 
-        const tabPanel = getByTestId(wrapper, 'tab-button-text');
+        const tabPanel = getByTestId(wrapper, 'tabs-tab-text');
 
         expect(tabPanel.prop('children')).toBe(expectedButtonText);
     });
 
     test('should not have a left icon in button when tab doesn\'t have a left icon name', () => {
         const wrapper = mountWithProviders(<TabButton {...focusedAndSelected}>some text</TabButton>);
 
-        const tabButtonLeftIcon = findByTestId(wrapper, 'tab-button-left-icon');
+        const tabButtonLeftIcon = findByTestId(wrapper, 'tabs-tab-left-icon');
 
         expect(tabButtonLeftIcon.length).toBe(0);
     });
@@ -36,15 +36,15 @@ describe('TabButton', () => {
             <TabButton {...focusedAndSelected} leftIcon={expectedLeftIcon}>some text</TabButton>,
         );
 
-        const tabButtonLeftIcon = getByTestId(wrapper, 'tab-button-left-icon');
+        const tabButtonLeftIcon = getByTestId(wrapper, 'tabs-tab-left-icon');
 
         expect(tabButtonLeftIcon.prop('name')).toBe(expectedLeftIcon);
     });
 
     test('should not have a right icon in button when tab doesn\'t have a right icon name', () => {
         const wrapper = mountWithProviders(<TabButton {...focusedAndSelected}>some text</TabButton>);
 
-        const tabButtonRightIcon = findByTestId(wrapper, 'tab-button-right-icon');
+        const tabButtonRightIcon = findByTestId(wrapper, 'tabs-tab-right-icon');
 
         expect(tabButtonRightIcon.length).toBe(0);
     });
@@ -55,7 +55,7 @@ describe('TabButton', () => {
             <TabButton {...focusedAndSelected} rightIcon={expectedRightIcon}>some text</TabButton>,
         );
 
-        const tabButtonRightIcon = getByTestId(wrapper, 'tab-button-right-icon');
+        const tabButtonRightIcon = getByTestId(wrapper, 'tabs-tab-right-icon');
 
         expect(tabButtonRightIcon.prop('name')).toBe(expectedRightIcon);
     });

diff --git a/packages/react/src/components/tabs/tab-button.tsx b/packages/react/src/components/tabs/tab-button.tsx
@@ -15,9 +15,9 @@ interface StyledButtonProps extends IsSelected {
 
 const StyledButton = styled.button<StyledButtonProps>`
     align-items: center;
-    border-bottom: ${({ $isGlobal }) => ($isGlobal ? 'none' : '1px solid #878f9a')}; /* TODO change colors when updating thematization */
+    border-bottom: ${({ $isGlobal, theme }) => ($isGlobal ? 'none' : `1px solid ${theme.component['tabs-tab-border-bottom-color']}`)};
     bottom: -1px;
-    color: ${({ $isGlobal }) => ($isGlobal ? '#1B1C1E' : '#878f9a')}; /* TODO change colors when updating thematization */
+    color: ${({ $isGlobal, theme }) => ($isGlobal ? `${theme.component['tabs-tab-global-text-color']}` : `${theme.component['tabs-tab-text-color']}`)};
     display: flex;
     justify-content: center;
     line-height: 1.5rem;
@@ -27,7 +27,7 @@ const StyledButton = styled.button<StyledButtonProps>`
     position: relative;
 
     &:hover {
-        background-color: ${({ theme }) => theme.greys.grey};
+        background-color: ${({ theme }) => theme.component['tabs-tab-hover-background-color']};
     }
 
     ${focus};
@@ -42,7 +42,7 @@ const StyledButton = styled.button<StyledButtonProps>`
         z-index: 1;
 
         ::after {
-            background-color: ${theme.main['primary-1.1']};
+            background-color: ${theme.component['tabs-tab-global-selected-background-color']};
             bottom: 0;
             content: '';
             display: block;
@@ -54,33 +54,33 @@ const StyledButton = styled.button<StyledButtonProps>`
     `}
 
     ${({ $isGlobal, $isSelected, theme }) => (!$isGlobal && $isSelected) && css`
-        background-color: ${theme.greys.white};
-        border: 1px solid #878f9a; /* TODO change colors when updating thematization */
+        background-color: ${theme.component['tabs-tab-selected-background-color']};
+        border: 1px solid ${theme.component['tabs-tab-selected-border-color']};
         border-bottom: 1px solid transparent;
         border-radius: var(--border-radius-2x) var(--border-radius-2x) 0 0;
-        color: #1b1c1e; /* TODO change colors when updating thematization */
+        color: ${theme.component['tabs-tab-selected-text-color']};
         z-index: 1;
     `}
 `;
 
 const StyledButtonText = styled.span<IsSelected & { $isMobile: boolean; }>`
-    color: ${({ theme }) => theme.greys.black};
+    color: ${({ theme }) => theme.component['tabs-tab-button-text-color']};
     font-family: var(--font-family);
     font-size: ${({ $isMobile }) => ($isMobile ? 1 : 0.875)}rem;
     font-weight: ${({ $isSelected }) => ($isSelected ? 'var(--font-semi-bold)' : 'var(--font-normal)')};
     line-height: 1.5rem;
 `;
 
 const LeftIcon = styled(Icon)<IsSelected>`
-    color: ${({ theme }) => theme.greys.black};
+    color: ${({ theme }) => theme.component['tabs-tab-left-icon-color']};
     height: 1rem;
     min-width: fit-content;
     padding-right: var(--spacing-half);
     width: 1rem;
 `;
 
 const RightIcon = styled(Icon)<IsSelected>`
-    color: ${({ theme }) => theme.greys.black};
+    color: ${({ theme }) => theme.component['tabs-tab-right-icon-color']};
     height: 1rem;
     min-width: fit-content;
     padding-left: var(--spacing-half);
@@ -131,18 +131,18 @@ export const TabButton = forwardRef(({
         >
             {leftIcon && (
                 <LeftIcon
-                    data-testid="tab-button-left-icon"
+                    data-testid="tabs-tab-left-icon"
                     $isSelected={isSelected}
                     name={leftIcon}
                     size="16"
                 />
             )}
-            <StyledButtonText data-testid="tab-button-text" $isSelected={isSelected} $isMobile={isMobile}>
+            <StyledButtonText data-testid="tabs-tab-text" $isSelected={isSelected} $isMobile={isMobile}>
                 {children}
             </StyledButtonText>
             {rightIcon && (
                 <RightIcon
-                    data-testid="tab-button-right-icon"
+                    data-testid="tabs-tab-right-icon"
                     $isSelected={isSelected}
                     name={rightIcon}
                     size="16"

diff --git a/packages/react/src/components/tabs/tab-panel.tsx b/packages/react/src/components/tabs/tab-panel.tsx
@@ -11,7 +11,7 @@ interface TabPanelProps {
 }
 
 const StyledDiv = styled.div<{ $contained?: boolean }>`
-    border: ${({ $contained }) => ($contained ? '1px solid #878F9A' : 'none')}; /* TODO change with next thematization */
+    border: ${({ $contained, theme }) => ($contained ? `1px solid ${theme.component['tab-panel-border-color']}` : 'none')};
     border-top: none;
 
     ${focus}