Merge branch 'master' into dev/DS-1136

kronostechnologies · Jul 12, 2024 · b664442 · b664442
2 parents ef0aeec + 19a6b9b
commit b664442
Show file tree

Hide file tree

Showing 16 changed files with 227 additions and 245 deletions.
diff --git a/.github/workflows/react.yml b/.github/workflows/react.yml
@@ -698,11 +698,12 @@ jobs:
       - storybook_compile
       - storybook_deploy
       - webapp_deploy
-    if: needs.setup.outputs.deploy == 'true'
+    if: always() && needs.setup.outputs.deploy == 'true'
 
     steps:
       - name: Post workflow status
-        uses: equisoft-actions/notify-workflow-status@v1
+        uses: equisoft-actions/notify-workflow-status@v2
         with:
           needs: ${{ toJSON(needs) }}
-          slack-webhook-url: ${{ secrets.OPS_CI_WEBHOOK_URL }}
+          slack-bot-token: ${{ secrets.SLACK_BOT_TOKEN }}
+          slack-channel: ${{ github.event.repository.custom_properties.ci_slack_channel }}
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -66,8 +66,8 @@
     "@types/react-dom": "~17.0.20",
     "@types/react-modal": "^3.16.0",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "7.14.1",
-    "@typescript-eslint/parser": "7.14.1",
+    "@typescript-eslint/eslint-plugin": "7.15.0",
+    "@typescript-eslint/parser": "7.15.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "cross-env": "^7.0.3",
     "css-loader": "^7.0.0",
@@ -98,10 +98,10 @@
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.2",
     "ts-mockito": "^2.6.1",
-    "typescript": "5.5.2",
+    "typescript": "5.5.3",
     "webpack": "5.92.1",
     "webpack-cli": "5.1.4",
-    "webpack-merge": "5.10.0",
+    "webpack-merge": "6.0.1",
     "yargs": "17.7.2"
   }
 }
diff --git a/packages/react/src/components/checkbox/checkbox.test.tsx.snap b/packages/react/src/components/checkbox/checkbox.test.tsx.snap
@@ -128,9 +128,7 @@ exports[`Checkbox matches snapshot 1`] = `
           <Styled(Icon)>
             <Icon
               className="c4 c5"
-              color="currentColor"
               name="check"
-              size="24"
             >
               <svg
                 className="c4 c5"
@@ -144,9 +142,7 @@ exports[`Checkbox matches snapshot 1`] = `
           <Styled(Icon)>
             <Icon
               className="c6 c7"
-              color="currentColor"
               name="minus"
-              size="24"
             >
               <svg
                 className="c6 c7"

diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -203,7 +203,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -594,7 +594,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -987,7 +987,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -1380,7 +1380,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -1801,7 +1801,7 @@ input + .c1 {
 }
 
 .c6 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c6 .react-datepicker__portal .react-datepicker__day-name {
@@ -2210,7 +2210,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -2768,7 +2768,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -4062,7 +4062,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {
@@ -5344,7 +5344,7 @@ input + .c1 {
 }
 
 .c4 .react-datepicker__portal {
-  background-color: #FFFFFF;
+  background-color: rgb(0 0 0 / 0.5);
 }
 
 .c4 .react-datepicker__portal .react-datepicker__day-name {

diff --git a/packages/react/src/components/date-picker/date-picker.tsx b/packages/react/src/components/date-picker/date-picker.tsx
@@ -155,7 +155,7 @@ const Container = styled.div<{ isMobile: boolean, theme: ResolvedTheme }>`
     }
 
     .react-datepicker__portal {
-        background-color: ${({ theme }) => theme.component['datepicker-background-color']};
+        background-color: ${({ theme }) => theme.component['datepicker-backdrop-color']};
 
         .react-datepicker__day-name {
             font-size: 1rem;

diff --git a/packages/react/src/components/icon/icon.tsx b/packages/react/src/components/icon/icon.tsx
@@ -144,8 +144,8 @@ export interface IconProps {
 export const Icon: VoidFunctionComponent<IconProps> = ({
     className,
     name,
-    size,
-    color,
+    size = '24',
+    color = 'currentColor',
     role,
     ...props
 }: IconProps) => {
@@ -167,8 +167,3 @@ export const Icon: VoidFunctionComponent<IconProps> = ({
         />
     );
 };
-
-Icon.defaultProps = {
-    size: '24',
-    color: 'currentColor',
-};
diff --git a/packages/react/src/components/search/search-input.test.tsx.snap b/packages/react/src/components/search/search-input.test.tsx.snap
@@ -439,9 +439,7 @@ input:valid + .c8 {
                   <Styled(Icon)>
                     <Icon
                       className="c14"
-                      color="currentColor"
                       name="search"
-                      size="24"
                     >
                       <svg
                         className="c14"

diff --git a/packages/react/src/components/sectional-banner/sectional-banner.tsx b/packages/react/src/components/sectional-banner/sectional-banner.tsx
@@ -11,13 +11,13 @@ import styled, { css, ThemedCssFunction } from 'styled-components';
 import { useId } from '../../hooks/use-id';
 import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
+import { focus } from '../../utils/css-state';
 import { Button } from '../buttons/button';
 import { IconButton } from '../buttons/icon-button';
-import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
+import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName } from '../icon/icon';
-import { focus } from '../../utils/css-state';
 
-type MobileDeviceContext = Pick<DeviceContextProps, 'isMobile'>
+type MobileDeviceContext = { $isMobile: boolean };
 export type SectionalBannerType = 'neutral' | 'info' | 'discovery' | 'success' | 'warning' | 'alert';
 type Role = 'status' | 'alert';
 type Live = 'polite' | 'assertive';
@@ -33,13 +33,13 @@ function getLineHeight(isMobile: boolean): number {
     return isMobile ? 28 : 24;
 }
 
-const BannerIcon = styled(Icon) <ComponentProps<typeof Icon> & { isMobile: boolean }>`
+const BannerIcon = styled(Icon) <ComponentProps<typeof Icon> & { $isMobile: boolean }>`
     grid-area: icon;
-    margin-top: ${({ isMobile }) => (isMobile ? 'var(--spacing-1x)' : 'var(--spacing-half)')};
+    margin-top: ${({ $isMobile }) => ($isMobile ? 'var(--spacing-1x)' : 'var(--spacing-half)')};
 `;
 
-function getLayout({ isMobile }: AbstractContainerProps): ReturnType<ThemedCssFunction<ResolvedTheme>> {
-    if (isMobile) {
+function getLayout({ $isMobile }: AbstractContainerProps): ReturnType<ThemedCssFunction<ResolvedTheme>> {
+    if ($isMobile) {
         return css`
             display: grid;
             grid-template-areas:
@@ -63,8 +63,8 @@ function abstractContainer(
         border: 1px solid ${(props) => props.theme.component[borderColor]};
         border-radius: var(--border-radius-2x);
         box-sizing: border-box;
-        line-height: ${({ isMobile }) => getLineHeight(isMobile)}px;
-        padding: ${(props) => (props.isMobile ? 'var(--spacing-3x) var(--spacing-2x)' : 'var(--spacing-2x) var(--spacing-3x)')};
+        line-height: ${({ $isMobile }) => getLineHeight($isMobile)}px;
+        padding: ${(props) => (props.$isMobile ? 'var(--spacing-3x) var(--spacing-2x)' : 'var(--spacing-2x) var(--spacing-3x)')};
         position: relative;
         width: 100%;
 
@@ -113,8 +113,8 @@ const AlertContainer = abstractContainer(
 );
 
 const Message = styled.p<MobileDeviceContext>`
-    font-size: ${(props) => (props.isMobile ? '1rem' : '0.875rem')};
-    margin: ${(props) => (props.isMobile ? 'var(--spacing-2x)' : 'var(--spacing-half)')} 0 0 0;
+    font-size: ${(props) => (props.$isMobile ? '1rem' : '0.875rem')};
+    margin: ${(props) => (props.$isMobile ? 'var(--spacing-2x)' : 'var(--spacing-half)')} 0 0 0;
 `;
 
 const TextWrapper = styled.div<MobileDeviceContext>`
@@ -125,8 +125,8 @@ const TextWrapper = styled.div<MobileDeviceContext>`
 
 type DismissButtonProps = MobileDeviceContext & { $marginTop: number }
 
-function getDismissButtonRight({ isMobile }: DismissButtonProps): string {
-    return isMobile ? 'var(--spacing-half)' : 'var(--spacing-1x)';
+function getDismissButtonRight({ $isMobile }: DismissButtonProps): string {
+    return $isMobile ? 'var(--spacing-half)' : 'var(--spacing-1x)';
 }
 
 function getDismissButtonTop({ $marginTop }: DismissButtonProps): string {
@@ -141,9 +141,9 @@ const DismissIconButton = styled(IconButton)
 `;
 
 const Heading = styled.span<MobileDeviceContext>`
-    font-size: ${(props) => (props.isMobile ? '1.125rem' : '1rem')};
+    font-size: ${(props) => (props.$isMobile ? '1.125rem' : '1rem')};
     font-weight: var(--font-semi-bold);
-    line-height: ${(props) => (props.isMobile ? '1.7' : '1.5')};
+    line-height: ${(props) => (props.$isMobile ? '1.7' : '1.5')};
     margin: 0;
 `;
 
@@ -283,7 +283,7 @@ export const SectionalBanner: VoidFunctionComponent<SectionalBannerProps> = ({
     return (
         <Container
             className={className}
-            isMobile={isMobile}
+            $isMobile={isMobile}
             tabIndex={focusable ? -1 : undefined}
             aria-live={bannerType.ariaLive}
             aria-atomic="true"
@@ -294,12 +294,12 @@ export const SectionalBanner: VoidFunctionComponent<SectionalBannerProps> = ({
                 name={bannerType.iconName}
                 size={iconSize.toString()}
                 aria-hidden="true"
-                isMobile={isMobile}
+                $isMobile={isMobile}
             />
 
-            <TextWrapper isMobile={isMobile}>
-                <Heading isMobile={isMobile} as={headingTag} id={headingId}>{title || t(bannerType.title)}</Heading>
-                <Message isMobile={isMobile} as={messageTag}>{children}</Message>
+            <TextWrapper $isMobile={isMobile}>
+                <Heading $isMobile={isMobile} as={headingTag} id={headingId}>{title || t(bannerType.title)}</Heading>
+                <Message $isMobile={isMobile} as={messageTag}>{children}</Message>
                 {!isMobile && buttonLabel && (
                     <ActionButton
                         isAlertType={isAlertType}
@@ -323,7 +323,7 @@ export const SectionalBanner: VoidFunctionComponent<SectionalBannerProps> = ({
                 <DismissIconButton
                     onClick={onDismiss}
                     label={t('dismissLabel')}
-                    isMobile={isMobile}
+                    $isMobile={isMobile}
                     $marginTop={marginTop}
                     data-testid="dismiss-button"
                 />

diff --git a/packages/react/src/components/toast/toast-container.test.tsx.snap b/packages/react/src/components/toast/toast-container.test.tsx.snap
@@ -170,7 +170,6 @@ exports[`ToastContainer should match snapshot (alert) 1`] = `
         <Icon
           aria-label="alert"
           className="c1"
-          color="currentColor"
           focusable={true}
           isMobile={false}
           name="alertOctagon"
@@ -266,7 +265,6 @@ exports[`ToastContainer should match snapshot (alert) 1`] = `
                 >
                   <Icon
                     aria-hidden="true"
-                    color="currentColor"
                     name="x"
                     size="16"
                   >
@@ -459,7 +457,6 @@ exports[`ToastContainer should match snapshot (discovery) 1`] = `
         <Icon
           aria-label="discovery"
           className="c1"
-          color="currentColor"
           focusable={true}
           isMobile={false}
           name="lightbulb"
@@ -555,7 +552,6 @@ exports[`ToastContainer should match snapshot (discovery) 1`] = `
                 >
                   <Icon
                     aria-hidden="true"
-                    color="currentColor"
                     name="x"
                     size="16"
                   >
@@ -748,7 +744,6 @@ exports[`ToastContainer should match snapshot (neutral) 1`] = `
         <Icon
           aria-label="information"
           className="c1"
-          color="currentColor"
           focusable={true}
           isMobile={false}
           name="info"
@@ -844,7 +839,6 @@ exports[`ToastContainer should match snapshot (neutral) 1`] = `
                 >
                   <Icon
                     aria-hidden="true"
-                    color="currentColor"
                     name="x"
                     size="16"
                   >
@@ -1037,7 +1031,6 @@ exports[`ToastContainer should match snapshot (success) 1`] = `
         <Icon
           aria-label="success"
           className="c1"
-          color="currentColor"
           focusable={true}
           isMobile={false}
           name="check"
@@ -1133,7 +1126,6 @@ exports[`ToastContainer should match snapshot (success) 1`] = `
                 >
                   <Icon
                     aria-hidden="true"
-                    color="currentColor"
                     name="x"
                     size="16"
                   >
@@ -1326,7 +1318,6 @@ exports[`ToastContainer should match snapshot (warning) 1`] = `
         <Icon
           aria-label="warning"
           className="c1"
-          color="currentColor"
           focusable={true}
           isMobile={false}
           name="alertTriangle"
@@ -1422,7 +1413,6 @@ exports[`ToastContainer should match snapshot (warning) 1`] = `
                 >
                   <Icon
                     aria-hidden="true"
-                    color="currentColor"
                     name="x"
                     size="16"
                   >