chore: explicitly pass theme prop to styled components

This is needed in order to resolve testing issues in consumer apps that use vitest
Orfium · Oct 19, 2023 · 60b3df9 · 60b3df9
1 parent 9b6e559
commit 60b3df9
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 63 deletions.
diff --git a/documentation/docs/api/interfaces/AxiosRequestConfig.md b/documentation/docs/api/interfaces/AxiosRequestConfig.md
@@ -130,7 +130,7 @@ ___
 
 ### method
 
-• `Optional` **method**: [`Method`](../modules.md#method)
+• `Optional` **method**: [`Method`](../modules.md#method-6)
 
 #### Defined in
 
@@ -160,7 +160,7 @@ ___
 
 ### responseType
 
-• `Optional` **responseType**: [`ResponseType`](../modules.md#responsetype)
+• `Optional` **responseType**: [`ResponseType`](../modules.md#responsetype-6)
 
 #### Defined in
 

diff --git a/documentation/docs/api/interfaces/AxiosStatic.md b/documentation/docs/api/interfaces/AxiosStatic.md
@@ -79,7 +79,7 @@ ___
 
 #### Inherited from
 
-[AxiosInstance](AxiosInstance.md).[defaults](AxiosInstance.md#defaults)
+[AxiosInstance](AxiosInstance.md).[defaults](AxiosInstance.md#defaults-6)
 
 #### Defined in
 
@@ -100,7 +100,7 @@ ___
 
 #### Inherited from
 
-[AxiosInstance](AxiosInstance.md).[interceptors](AxiosInstance.md#interceptors)
+[AxiosInstance](AxiosInstance.md).[interceptors](AxiosInstance.md#interceptors-6)
 
 #### Defined in
 
@@ -178,7 +178,7 @@ ___
 
 #### Inherited from
 
-[AxiosInstance](AxiosInstance.md).[delete](AxiosInstance.md#delete)
+[AxiosInstance](AxiosInstance.md).[delete](AxiosInstance.md#delete-6)
 
 #### Defined in
 
@@ -210,7 +210,7 @@ ___
 
 #### Inherited from
 
-[AxiosInstance](AxiosInstance.md).[get](AxiosInstance.md#get)
+[AxiosInstance](AxiosInstance.md).[get](AxiosInstance.md#get-6)
 
 #### Defined in
 
@@ -234,7 +234,7 @@ ___
 
 #### Inherited from
 
-[AxiosInstance](AxiosInstance.md).[getUri](AxiosInstance.md#geturi)
+[AxiosInstance](AxiosInstance.md).[getUri](AxiosInstance.md#geturi-6)
 
 #### Defined in
 
@@ -266,7 +266,7 @@ ___
 
 #### Inherited from
 
-[AxiosInstance](AxiosInstance.md).[head](AxiosInstance.md#head)
+[AxiosInstance](AxiosInstance.md).[head](AxiosInstance.md#head-6)
 
 #### Defined in
 
@@ -338,7 +338,7 @@ ___
 
 #### Inherited from
 
-[AxiosInstance](AxiosInstance.md).[options](AxiosInstance.md#options)
+[AxiosInstance](AxiosInstance.md).[options](AxiosInstance.md#options-6)
 
 #### Defined in
 
@@ -371,7 +371,7 @@ ___
 
 #### Inherited from
 
-[AxiosInstance](AxiosInstance.md).[patch](AxiosInstance.md#patch)
+[AxiosInstance](AxiosInstance.md).[patch](AxiosInstance.md#patch-6)
 
 #### Defined in
 
@@ -404,7 +404,7 @@ ___
 
 #### Inherited from
 
-[AxiosInstance](AxiosInstance.md).[post](AxiosInstance.md#post)
+[AxiosInstance](AxiosInstance.md).[post](AxiosInstance.md#post-6)
 
 #### Defined in
 
@@ -437,7 +437,7 @@ ___
 
 #### Inherited from
 
-[AxiosInstance](AxiosInstance.md).[put](AxiosInstance.md#put)
+[AxiosInstance](AxiosInstance.md).[put](AxiosInstance.md#put-6)
 
 #### Defined in
 
@@ -468,7 +468,7 @@ ___
 
 #### Inherited from
 
-[AxiosInstance](AxiosInstance.md).[request](AxiosInstance.md#request)
+[AxiosInstance](AxiosInstance.md).[request](AxiosInstance.md#request-6)
 
 #### Defined in
 

diff --git a/documentation/docs/api/modules.md b/documentation/docs/api/modules.md
@@ -35,15 +35,15 @@ custom_edit_url: null
 
 ## Other Functions
 
-- [Authentication](modules.md#authentication)
-- [Navigation](modules.md#navigation)
-- [TopBar](modules.md#topbar)
-- [createAPIInstance](modules.md#createapiinstance)
-- [useAuthentication](modules.md#useauthentication)
+- [Authentication](modules.md#authentication-6)
+- [Navigation](modules.md#navigation-6)
+- [TopBar](modules.md#topbar-6)
+- [createAPIInstance](modules.md#createapiinstance-6)
+- [useAuthentication](modules.md#useauthentication-6)
 
 ## component Functions
 
-- [generateRoutes](modules.md#generateroutes)
+- [generateRoutes](modules.md#generateroutes-6)
 
 ## Type aliases
 
@@ -58,10 +58,10 @@ custom_edit_url: null
 | `isAuthenticated` | `boolean` |
 | `isLoading` | `boolean` |
 | `orfiumProducts` | `Product`[] \| ``null`` |
-| `organizations` | [`Organization`](modules.md#organization)[] |
-| `selectedOrganization` | [`Organization`](modules.md#organization) \| ``null`` |
-| `user` | [`User`](modules.md#user) \| `undefined` |
-| `getAccessTokenSilently` | (`opts?`: `GetTokenSilentlyOptions`) => `Promise`<`void` \| { `decodedToken`: [`DecodedTokenResponse`](modules.md#decodedtokenresponse) \| `Record`<`string`, `never`\> ; `token`: `string`  }\> |
+| `organizations` | [`Organization`](modules.md#organization-6)[] |
+| `selectedOrganization` | [`Organization`](modules.md#organization-6) \| ``null`` |
+| `user` | [`User`](modules.md#user-6) \| `undefined` |
+| `getAccessTokenSilently` | (`opts?`: `GetTokenSilentlyOptions`) => `Promise`<`void` \| { `decodedToken`: [`DecodedTokenResponse`](modules.md#decodedtokenresponse-6) \| `Record`<`string`, `never`\> ; `token`: `string`  }\> |
 | `loginWithRedirect` | (`o?`: `RedirectLoginOptions`<`any`\>) => `Promise`<`void`\> |
 | `logout` | () => `void` |
 | `switchOrganization` | (`organisation`: `string`) => `void` |
@@ -147,7 +147,7 @@ ___
 | Name | Type |
 | :------ | :------ |
 | `instance` | [`AxiosInstance`](interfaces/AxiosInstance.md) |
-| `createRequest` | <T\>(`props`: [`RequestProps`](modules.md#requestprops)) => { `cancelTokenSource`: [`CancelTokenSource`](interfaces/CancelTokenSource.md) ; `request`: () => `Promise`<`T`\>  } |
+| `createRequest` | <T\>(`props`: [`RequestProps`](modules.md#requestprops-6)) => { `cancelTokenSource`: [`CancelTokenSource`](interfaces/CancelTokenSource.md) ; `request`: () => `Promise`<`T`\>  } |
 | `deleteToken` | () => `void` |
 | `setToken` | (`token`: `string`) => `void` |
 
@@ -205,7 +205,7 @@ ___
 
 | Name | Type |
 | :------ | :------ |
-| `children?` | [`Optional`](modules.md#optional)<[`MenuItem`](modules.md#menuitem), ``"iconName"``\>[] |
+| `children?` | [`Optional`](modules.md#optional-6)<[`MenuItem`](modules.md#menuitem-6), ``"iconName"``\>[] |
 | `iconName` | `AcceptedIconNames` |
 | `text` | `string` |
 | `url` | `string` |
@@ -245,13 +245,13 @@ ___
 | Name | Type |
 | :------ | :------ |
 | `adminButtonTooltipText?` | `string` |
-| `adminNavigation?` | [`MenuItem`](modules.md#menuitem)[] |
+| `adminNavigation?` | [`MenuItem`](modules.md#menuitem-6)[] |
 | `adminNavigationHeader?` | `string` |
 | `adminNavigationURLSegment?` | `string` |
-| `extras?` | { `menuItems`: `Omit`<[`MenuItem`](modules.md#menuitem), ``"children"``\>[] ; `title`: `string`  }[] |
+| `extras?` | { `menuItems`: `Omit`<[`MenuItem`](modules.md#menuitem-6), ``"children"``\>[] ; `title`: `string`  }[] |
 | `hideOrgSwitcher?` | `boolean` |
 | `navigationHeader` | `string` |
-| `regularNavigation` | [`MenuItem`](modules.md#menuitem)[] |
+| `regularNavigation` | [`MenuItem`](modules.md#menuitem-6)[] |
 | `userIsAdmin?` | `boolean` |
 
 #### Defined in
@@ -349,8 +349,8 @@ ___
 
 | Name | Type | Description |
 | :------ | :------ | :------ |
-| `authorization?` | [`Authorization`](modules.md#authorization) | The authorization level of the route, there are 3: 'anonymous' \| 'authorized' \| 'unauthorized' -  **`defaultvalue:`** 'anonymous' |
-| `component?` | `React.FunctionComponent`<[`RouteComponentProps`](modules.md#routecomponentprops)\> | A component that the route renders as page. This has all the props and extraProps that have been passed to that route |
+| `authorization?` | [`Authorization`](modules.md#authorization-6) | The authorization level of the route, there are 3: 'anonymous' \| 'authorized' \| 'unauthorized' -  **`defaultvalue:`** 'anonymous' |
+| `component?` | `React.FunctionComponent`<[`RouteComponentProps`](modules.md#routecomponentprops-6)\> | A component that the route renders as page. This has all the props and extraProps that have been passed to that route |
 | `extraProps?` | `unknown` | Any custom/extra props that are going to be available on the component |
 | `path` | `string` \| `string`[] | The url path or paths of the route that will listen to in order to render |
 
@@ -368,8 +368,8 @@ ___
 
 | Name | Type | Description |
 | :------ | :------ | :------ |
-| `fallbackPaths?` | `Partial`<`Record`<[`FallbackPath`](modules.md#fallbackpath), `string`\>\> | Holder of paths relative to the types of authorization. For every type there is a fallback path that a user will be redirected if they don't have access to it based on the authorization |
-| `routes` | [`RouteItem`](modules.md#routeitem)[] | - |
+| `fallbackPaths?` | `Partial`<`Record`<[`FallbackPath`](modules.md#fallbackpath-6), `string`\>\> | Holder of paths relative to the types of authorization. For every type there is a fallback path that a user will be redirected if they don't have access to it based on the authorization |
+| `routes` | [`RouteItem`](modules.md#routeitem-6)[] | - |
 
 #### Defined in
 
@@ -458,7 +458,7 @@ ___
 
 ### orfiumIdBaseInstance
 
-• `Const` **orfiumIdBaseInstance**: [`CreateAPIInstanceType`](modules.md#createapiinstancetype)
+• `Const` **orfiumIdBaseInstance**: [`CreateAPIInstanceType`](modules.md#createapiinstancetype-6)
 
 #### Defined in
 
@@ -474,7 +474,7 @@ ___
 
 | Name | Type |
 | :------ | :------ |
-| `__namedParameters` | [`AuthenticationProps`](modules.md#authenticationprops) |
+| `__namedParameters` | [`AuthenticationProps`](modules.md#authenticationprops-6) |
 
 #### Returns
 
@@ -494,7 +494,7 @@ ___
 
 | Name | Type |
 | :------ | :------ |
-| `props` | [`NavigationProps`](modules.md#navigationprops) |
+| `props` | [`NavigationProps`](modules.md#navigationprops-6) |
 
 #### Returns
 
@@ -514,7 +514,7 @@ ___
 
 | Name | Type |
 | :------ | :------ |
-| `__namedParameters` | [`TopBarProps`](modules.md#topbarprops) |
+| `__namedParameters` | [`TopBarProps`](modules.md#topbarprops-6) |
 
 #### Returns
 
@@ -528,17 +528,17 @@ ___
 
 ### createAPIInstance
 
-▸ **createAPIInstance**(`__namedParameters`): [`CreateAPIInstanceType`](modules.md#createapiinstancetype)
+▸ **createAPIInstance**(`__namedParameters`): [`CreateAPIInstanceType`](modules.md#createapiinstancetype-6)
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
-| `__namedParameters` | [`CreateAPIInstanceProps`](modules.md#createapiinstanceprops) |
+| `__namedParameters` | [`CreateAPIInstanceProps`](modules.md#createapiinstanceprops-6) |
 
 #### Returns
 
-[`CreateAPIInstanceType`](modules.md#createapiinstancetype)
+[`CreateAPIInstanceType`](modules.md#createapiinstancetype-6)
 
 #### Defined in
 
@@ -548,11 +548,11 @@ ___
 
 ### useAuthentication
 
-▸ **useAuthentication**(): [`AuthenticationContextValue`](modules.md#authenticationcontextvalue)
+▸ **useAuthentication**(): [`AuthenticationContextValue`](modules.md#authenticationcontextvalue-6)
 
 #### Returns
 
-[`AuthenticationContextValue`](modules.md#authenticationcontextvalue)
+[`AuthenticationContextValue`](modules.md#authenticationcontextvalue-6)
 
 #### Defined in
 
@@ -577,7 +577,7 @@ If the fallbacks are defined then those will be used instead.
 | `props` | `Object` | Component properties |
 | `props.fallbackComponent?` | `ComponentType`<{}\> | The component that will render if none of the routes match the url location - @default Page not found |
 | `props.isAuthenticated` | `boolean` | A boolean that are passed from the parent Application to let the generation of routes know the state of the user |
-| `props.structure` | [`RoutingStructure`](modules.md#routingstructure) | A list of Routes that needs to render with authorization level and extra props. |
+| `props.structure` | [`RoutingStructure`](modules.md#routingstructure-6) | A list of Routes that needs to render with authorization level and extra props. |
 
 #### Returns
 

diff --git a/src/ui/Navigation/Navigation.tsx b/src/ui/Navigation/Navigation.tsx
@@ -1,4 +1,4 @@
-import { Icon, Tooltip, useBreakpoints } from '@orfium/ictinus';
+import { Icon, Tooltip, useBreakpoints, useTheme } from '@orfium/ictinus';
 import { useEffect, useState } from 'react';
 import { useLocation, useRouteMatch } from 'react-router-dom';
 import AdminIcon from '../../assets/admin_icon.svg';
@@ -50,6 +50,7 @@ function Navigation(props: NavigationProps) {
     userIsAdmin = false,
   } = props;
 
+  const theme = useTheme();
   const breakpoints = useBreakpoints();
   const [expanded, setExpanded] = useState(() => {
     return breakpoints.des1200;
@@ -76,12 +77,13 @@ function Navigation(props: NavigationProps) {
       // onMouseEnter={() => !isDesktop && setExpanded(true)}
       onMouseLeave={() => !isDesktop && setExpanded(false)}
     >
-      <GlobalNav data-testid={'global-navigation'}>
+      <GlobalNav theme={theme} data-testid={'global-navigation'}>
         <SingleIconContainer>
           {isDesktop ? (
             <img alt={'Orfium logo'} src={Logo} height={28} width={28} />
           ) : (
             <BurgerButton
+              theme={theme}
               onClick={() => {
                 setExpanded((state) => !state);
               }}
@@ -91,7 +93,7 @@ function Navigation(props: NavigationProps) {
             </BurgerButton>
           )}
         </SingleIconContainer>
-        <IconsContainer>
+        <IconsContainer theme={theme}>
           {orfiumProducts
             ? orfiumProducts.map((p) => {
                 const isCurrentApp = p.client_metadata.product_code === config.productCode;
@@ -125,6 +127,7 @@ function Navigation(props: NavigationProps) {
             <Tooltip content={adminButtonTooltipText} placement={'right'}>
               <AppIconWrapper>
                 <AppIconRRLink
+                  theme={theme}
                   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                   // @ts-ignore
                   to={

diff --git a/src/ui/Navigation/components/ClientSelector/ClientSelector.tsx b/src/ui/Navigation/components/ClientSelector/ClientSelector.tsx
@@ -49,20 +49,29 @@ function ClientSelector(props: Props & TestProps) {
   return (
     <ClickAwayListener onClick={() => setOpen(false)}>
       <Wrapper data-testid={dataTestId}>
-        <Button disabled={disabled} textColor={textColor} onClick={() => setOpen((open) => !open)}>
+        <Button
+          theme={theme}
+          disabled={disabled}
+          textColor={textColor}
+          onClick={() => setOpen((open) => !open)}
+        >
           <ButtonContentWrapper>
-            <ButtonTextWrapper>
+            <ButtonTextWrapper theme={theme}>
               <span>{buttonText}</span>
-              {tagText && <Tag textColor={textColor}>{tagText}</Tag>}
+              {tagText && (
+                <Tag theme={theme} textColor={textColor}>
+                  {tagText}
+                </Tag>
+              )}
             </ButtonTextWrapper>
-            <ChevronWrapper>
+            <ChevronWrapper theme={theme}>
               <FlippableArrow expanded={open} color={textColor} size={11} />
             </ChevronWrapper>
           </ButtonContentWrapper>
         </Button>
 
         {open && (
-          <Option menuPosition={menuPosition}>
+          <Option theme={theme} menuPosition={menuPosition}>
             {items && (
               <List
                 data={items}