npm - @orchestrator-ui/orchestrator-ui-components - Versions diffs - 0.2.7 → 0.3.1 - Mend

@orchestrator-ui/orchestrator-ui-components 0.2.7 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

package/src/components/WfoForms/formFields/SubscriptionField.tsx CHANGED Viewed

@@ -166,8 +166,9 @@ function SubscriptionFieldDefinition({
             ].includes(subscription.product.tag as ProductTag)
         ) {
             const portMode = getPortMode(subscription.productBlockInstances);
-            return `${subscriptionSubstring} ${portMode?.toUpperCase()} ${description.trim()} ${subscription
-                .customer?.fullname}`;
+            return `${subscriptionSubstring} ${portMode?.toUpperCase()} ${description.trim()} ${
+                subscription.customer?.fullname
+            }`;
         } else {
             return description.trim();
         }
@@ -234,7 +235,10 @@ function SubscriptionFieldDefinition({
                     )
                 ) {
                     return false;
-                } else if (portMode !== visiblePortMode) {
+                } else if (
+                    portMode !== visiblePortMode &&
+                    visiblePortMode !== 'normal'
+                ) {
                     return false;
                 }
             }
@@ -250,7 +254,8 @@ function SubscriptionFieldDefinition({
             if (parentName !== name) {
                 if (
                     parent.fieldType === Array &&
-                    // @ts-ignore
+                    // @ts-expect-error Parent field can have the uniqueItems boolean property but this is not part of JSONSchema6 type
+                    // TODO: Figure out why this is so
                     parent.uniqueItems
                 ) {
                     const allValues: string[] = get(model, parentName, []);
@@ -277,6 +282,7 @@ function SubscriptionFieldDefinition({
     };
     const options = getSubscriptionOptions();
     const selectedValue = options.find(
         (option: Option) => option.value === value,
     );

package/src/components/WfoForms/formFields/SummaryField.tsx ADDED Viewed

@@ -0,0 +1,103 @@
+/*
+ * Copyright 2019-2023 SURF.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import React from 'react';
+import { FieldProps, connectField, filterDOMProps } from 'uniforms';
+import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
+import { getStyles } from '@/components/WfoForms/formFields/SummaryFieldStyling';
+import { useWithOrchestratorTheme } from '@/hooks';
+export type SummaryFieldProps = FieldProps<
+    null,
+    {
+        description?: string;
+        data?: { headers: string[]; labels: string[]; columns: string[][] };
+    }
+>;
+// onChange not used on purpose
+function Summary({
+    id,
+    label,
+    description,
+    data,
+    ...props
+}: SummaryFieldProps) {
+    const { summaryFieldStyle } = useWithOrchestratorTheme(getStyles);
+    if (!data) {
+        return null;
+    }
+    const { headers, labels, columns } = data;
+    const extraColumnsData = columns.filter((_, index) => index !== 0);
+    const rows = columns[0].map((row, index) => (
+        <tr key={index}>
+            {labels && <td className={`label`}>{labels[index]}</td>}
+            <td className={`value`}>
+                {row.includes('<!doctype html>') ? (
+                    <div
+                        className="emailMessage"
+                        dangerouslySetInnerHTML={{ __html: row }}
+                    ></div>
+                ) : (
+                    row
+                )}
+            </td>
+            {extraColumnsData &&
+                extraColumnsData.map((_, idx) => (
+                    <td className={`value`} key={idx}>
+                        {extraColumnsData[idx][index]}
+                    </td>
+                ))}
+        </tr>
+    ));
+    const tableHeader =
+        !headers || headers.length === 0 ? null : (
+            <tr>
+                {labels && <th />}
+                {headers.map((header, idx) => (
+                    <th key={idx}>{header}</th>
+                ))}
+            </tr>
+        );
+    return (
+        <EuiFlexItem css={summaryFieldStyle}>
+            <section {...filterDOMProps(props)}>
+                <EuiFormRow
+                    label={label}
+                    labelAppend={<EuiText size="m">{description}</EuiText>}
+                    id={id}
+                    fullWidth
+                >
+                    <section className="table-summary">
+                        <table id={`${id}-table`}>
+                            <thead>{tableHeader}</thead>
+                            <tbody>{rows}</tbody>
+                        </table>
+                    </section>
+                </EuiFormRow>
+            </section>
+        </EuiFlexItem>
+    );
+}
+export const SummaryField = connectField(Summary, { kind: 'leaf' });

package/src/components/WfoForms/formFields/SummaryFieldStyling.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { tint } from '@elastic/eui';
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+export const getStyles = (theme: EuiThemeComputed) => {
+    const toShadeColor = (color: string) => tint(color, 0.9);
+    const summaryFieldStyle = css({
+        'div.emailMessage': {
+            td: {
+                color: theme.colors.text,
+            },
+            p: {
+                color: theme.colors.text,
+            },
+            html: {
+                marginLeft: '-10px',
+            },
+        },
+        'section.table-summary': {
+            marginTop: '20px',
+            width: '100%',
+            td: {
+                padding: '10px',
+                verticalAlign: 'top',
+            },
+            'td:not(:first-child):not(:last-child)': {
+                borderRight: `1px solid ${theme.colors.lightestShade}`,
+            },
+            '.label': {
+                fontWeight: 'bold',
+                color: theme.colors.lightestShade,
+                backgroundColor: theme.colors.primary,
+                borderRight: `2px solid ${theme.colors.lightestShade}`,
+                borderBottom: `1px solid ${theme.colors.lightestShade}`,
+            },
+            '.value': {
+                backgroundColor: toShadeColor(theme.colors.primary),
+                borderBottom: `1px solid ${theme.colors.lightestShade}`,
+            },
+        },
+    });
+    return {
+        summaryFieldStyle: summaryFieldStyle,
+    };
+};

package/src/components/WfoForms/formFields/VlanField.tsx CHANGED Viewed

@@ -210,20 +210,20 @@ function Vlan({
     const placeholder = imsIsLoading
         ? t('widgets.vlan.loadingIms')
         : subscriptionId
-        ? t('widgets.vlan.placeholder')
-        : t('widgets.vlan.placeholderNoServicePort');
+          ? t('widgets.vlan.placeholder')
+          : t('widgets.vlan.placeholderNoServicePort');
     const errorMessageExtra = missingInIms
         ? t('widgets.vlan.missingInIms')
         : !validFormat
-        ? t('widgets.vlan.invalidVlan')
-        : vlansInUse.length
-        ? vlansInUse.length >= 1 && vlansInUse[0] === 0
-            ? t('widgets.vlan.untaggedPortInUse')
-            : t('widgets.vlan.vlansInUseError', {
-                  vlans: vlanRangeFromNumbers(vlansInUse),
-              })
-        : undefined;
+          ? t('widgets.vlan.invalidVlan')
+          : vlansInUse.length
+            ? vlansInUse.length >= 1 && vlansInUse[0] === 0
+                ? t('widgets.vlan.untaggedPortInUse')
+                : t('widgets.vlan.vlansInUseError', {
+                      vlans: vlanRangeFromNumbers(vlansInUse),
+                  })
+            : undefined;
     let message = '';
     if (!imsIsLoading) {

package/src/components/WfoForms/formFields/index.ts CHANGED Viewed

@@ -21,9 +21,11 @@ export * from './TimestampField';
 export * from './OrganisationField';
 export * from './ContactPersonNameField';
 export * from './ImsNodeIdField';
+export * from './ImsPortIdField';
 export * from './LocationCodeField';
 export * from './VlanField';
 export * from './NestField';
 export * from './OptGroupField';
 export * from './SubscriptionField';
 export * from './IpNetworkField';
+export * from './SummaryField';

package/src/components/WfoForms/formFields/surf/types.ts CHANGED Viewed

@@ -1,3 +1,19 @@
+import { ProductDefinition } from '../../../../types';
+export interface NodeSubscription {
+    name: string;
+    subscription_id: string;
+    description: string;
+    product: ProductDefinition;
+    product_id: string;
+    status: string;
+    insync: boolean;
+    customer_id: string;
+    start_date: number;
+    end_date: number;
+    note: string;
+}
 export interface ServicePort {
     subscription_id?: string;
     vlan?: string;
@@ -22,6 +38,16 @@ export enum ProductTag {
     AGGSPNL = 'AGGSPNL',
 }
+export interface ImsPort {
+    id: number;
+    line_name: string;
+    node: string;
+    port: string;
+    iface_type: string;
+    patchposition: string;
+    status: string;
+}
 export interface ImsNode {
     id: number;
     name: string;

package/src/components/WfoForms/formFields/utils.spec.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-import type { ProductBlockInstance, SubscriptionDetail } from '../../../types';
+import type { ProductBlockInstance, SubscriptionDetail } from '@/types';
 import {
     ProcessStatus,
     ProductLifecycleStatus,
@@ -7,19 +8,25 @@ import {
 } from '../../../types';
 import { ProductTag } from './surf/types';
 import {
+    getPortMode,
     subscriptionHasTaggedPortModeInstanceValue,
     subscriptionHasTaggedProduct,
 } from './utils';
+const getProductBlockInstance = (
+    instanceProperties: Partial<ProductBlockInstance> = {},
+): ProductBlockInstance => ({
+    id: 1,
+    ownerSubscriptionId: 'ProductBlockInstanceId 1',
+    parent: 0,
+    productBlockInstanceValues: [],
+    subscriptionInstanceId: 'testId',
+    inUseByRelations: [],
+    ...instanceProperties,
+});
 const testProductBlockInstances: ProductBlockInstance[] = [
-    {
-        id: 1,
-        ownerSubscriptionId: 'ProductBlockInstanceId 1',
-        parent: 0,
-        productBlockInstanceValues: [],
-        subscriptionInstanceId: 'testId',
-        inUseByRelations: [],
-    },
+    getProductBlockInstance(),
 ];
 const testSubscriptionDetail: SubscriptionDetail = {
@@ -51,12 +58,85 @@ const testSubscriptionDetail: SubscriptionDetail = {
                 createdBy: 'Test',
                 workflowTarget: WorkflowTarget.CREATE,
                 workflowName: 'Test workflow name',
+                isTask: false,
             },
         ],
     },
 };
 describe('formField utils', () => {
+    describe('getPortMode()', () => {
+        it('returns undefined if the productBlockInstances is an empty array', () => {
+            const result = getPortMode([]);
+            expect(result).toEqual(undefined);
+        });
+        it('returns undefined if the productBlockInstances dont contain a productBlockInstanceValues', () => {
+            const result = getPortMode([
+                getProductBlockInstance({
+                    productBlockInstanceValues: [
+                        {
+                            field: 'key1',
+                            value: 'value1',
+                        },
+                    ],
+                }),
+            ]);
+            expect(result).toEqual(undefined);
+        });
+        it('returns undefined if the productBlockInstances dont contain productBlockInstanceValues but none with portMode', () => {
+            const result = getPortMode([
+                getProductBlockInstance({
+                    productBlockInstanceValues: [
+                        {
+                            field: 'portMode',
+                            value: 'NOTTAGGED',
+                        },
+                    ],
+                }),
+            ]);
+            expect(result).toEqual('NOTTAGGED');
+        });
+        it('returns undefined if the last portMode if there are more than one productBlockInstanceValue with portmode', () => {
+            const result = getPortMode([
+                getProductBlockInstance({
+                    productBlockInstanceValues: [
+                        {
+                            field: 'portMode',
+                            value: 'FIRST',
+                        },
+                    ],
+                }),
+                getProductBlockInstance({
+                    productBlockInstanceValues: [
+                        {
+                            field: 'portMode',
+                            value: 'SECOND',
+                        },
+                    ],
+                }),
+            ]);
+            expect(result).toEqual('SECOND');
+        });
+        it('returns undefined if the productBlockInstances dont contain a portMode field', () => {
+            const result = getPortMode([
+                ...testProductBlockInstances,
+                {
+                    id: 1,
+                    ownerSubscriptionId: 'ProductBlockInstanceId 1',
+                    parent: 0,
+                    productBlockInstanceValues: [],
+                    subscriptionInstanceId: 'testId',
+                    inUseByRelations: [],
+                },
+            ]);
+            expect(result).toEqual(undefined);
+        });
+    });
     describe('subscriptionHasPortModeInstanceValue()', () => {
         it('returns false if the subscriptionDetail has no productBlockInstances', () => {
             const result = subscriptionHasTaggedPortModeInstanceValue(

package/src/components/WfoJsonCodeBlock/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './WfoJsonCodeBlock';

package/src/components/WfoKeyValueTable/WfoValueCell.tsx CHANGED Viewed

@@ -21,11 +21,11 @@ export const WfoValueCell: FC<WfoValueCellProps> = ({
 }) => {
     const { theme } = useOrchestratorTheme();
     const {
-        valueColumnStyle,
-        valueCellStyle,
         clipboardIconStyle,
         clickable,
         getBackgroundColorStyleForRow,
+        valueColumnStyle,
+        valueCellStyle,
     } = getStyles(theme);
     const shouldRenderCopyColumn = enableCopyIcon && textToCopy;

package/src/components/WfoOptionalLink/WfoOptionalLink.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import React, { FC, ReactNode } from 'react';
+import Link from 'next/link';
+import type { UrlObject } from 'url';
+export type WfoOptionalLinkProps = {
+    children: ReactNode;
+    href?: UrlObject | string;
+};
+export const WfoOptionalLink: FC<WfoOptionalLinkProps> = ({
+    children,
+    href,
+}) => {
+    if (!href) {
+        return <span>{children}</span>;
+    }
+    return <Link href={href}>{children}</Link>;
+};

package/src/components/WfoOptionalLink/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './WfoOptionalLink';

package/src/components/WfoPageTemplate/WfoBreadcrumbs/WfoBreadcrumbs.tsx CHANGED Viewed

@@ -25,8 +25,11 @@ export const WfoBreadcrumbs = () => {
     parts.forEach((p, index) => {
         if (index > 0) {
             const link = removeSuffix(parts.slice(0, index + 1).join('/'));
-            // Handle UUID's: so you can have breadcrumb like: `Start / Subscriptions / 12312aa-cbc ...`
-            const text = isUuid4(p) ? p : removeSuffix(upperCaseFirstChar(p));
+            // Handle UUID's: so you can have breadcrumb like: `Start / Subscriptions / b2312aa-cbc ...`
+            // first remove the suffix, like ?activeTab=....
+            const _p = removeSuffix(p);
+            const text = isUuid4(_p) ? _p : upperCaseFirstChar(_p);
+            // eslint-disable-next-line no-console
             breadcrumbs.push({
                 text: text,

package/src/components/WfoPageTemplate/WfoPageHeader/WfoAppLogo.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+export const WfoAppLogo: FC = () => (
+    <svg
+        width="64"
+        height="64"
+        viewBox="0 0 640 640"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M354.832 276.683L360.538 287.948L359.342 289.144L350.731 280.784L354.832 276.683Z"
+            fill="#76B5E0"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M314 128H326V144.077L346.283 151.332C369.967 159.802 392.949 170.121 415.016 182.193L437.191 194.324L457.599 173.916L466.084 182.401L444.445 204.041L447.319 212.963C458.702 248.31 474.148 282.216 493.347 314H512V326H494.455L479.094 369.434L455.768 455.642L435.097 460.957C396.477 470.887 359.666 486.806 326 508.123V512H314V507.22C278.543 479.763 236.412 462.268 191.965 456.521L177.181 471.305L168.696 462.82L182.781 448.735L178.858 430.061C170.982 392.571 155.435 357.146 133.225 326H128V314H133.231C160.297 276.391 177.89 232.762 184.461 186.82L184.848 184.112L189.665 183.666C233.34 179.627 275.675 166.567 314 145.341V128ZM202.539 445.947C242.755 452.568 280.91 468.411 314 492.244V473.216L290.911 456.231C282.445 450.003 272.889 445.414 262.735 442.701L217.795 430.692L202.539 445.947ZM223.816 419.218L220.283 411.232L220.205 411.31L203.692 365.949L182.106 324.487L209.836 263.925L220.609 229.096L250.516 259.003L247.951 276.471L259.312 281.643C259.366 281.313 259.417 280.983 259.466 280.652L261.092 269.578L280.603 289.089L289.027 280.543L272.597 264.113C290.854 263.844 308.123 255.788 320.058 241.986L320.416 242.326C326.029 247.645 334.392 254.783 343.006 258.57C346.645 260.171 350.671 261.323 354.722 262.155L365.634 251.672C359.394 251.031 352.909 249.816 347.836 247.585C340.856 244.516 333.312 238.102 327.751 232.737C327.142 232.15 326.558 231.575 326 231.019V192.603L349.031 206.751C357.495 211.95 366.707 215.817 376.346 218.216L414.942 227.823L416.766 231.72L417.01 231.476L428.441 264.125L454.962 322.358L435.039 366.132L418.078 409.592L417.67 409.185L413.333 419.221L370.63 430.485C358.819 433.601 347.703 438.922 337.869 446.167L326 454.912V413.269L369.867 395.097L360.505 385.986L326 400.28L326 352.404L319.555 346.132L314 351.776L314 397.517L303.919 390.42C298.125 386.34 291.71 383.263 284.945 381.296L275.035 391.364C282.944 392.589 290.464 395.623 297.01 400.232L314 412.193V457.525L298.401 446.05C288.665 438.888 277.675 433.611 265.998 430.49L223.816 419.218ZM326 470.61V494.005C358.966 474.008 394.715 458.95 432.109 449.335L439.062 447.547L421.62 430.106L373.853 442.706C363.583 445.415 353.917 450.042 345.366 456.342L326 470.61ZM427.836 419.351L447.764 439.279L467.629 365.861L481.727 326H467.19L446.687 371.051L427.836 419.351ZM465.043 314H479.389C461.412 283.226 446.827 250.582 435.896 216.641L434.909 213.576L426.928 221.558L440.181 259.408L465.043 314ZM416.363 215.152L428.349 203.166L409.257 192.721C387.741 180.95 365.334 170.889 342.242 162.631L326 156.822V177.77L355.647 195.982C363.006 200.503 371.017 203.865 379.399 205.952L416.363 215.152ZM314 175.391V158.982C279.328 177.284 241.657 189.241 202.767 194.283L222.749 214.264L255.145 205.567C261.978 203.732 268.553 201.044 274.715 197.566L314 175.391ZM314 189.904L280.928 208.572C273.842 212.572 266.28 215.663 258.422 217.773L233.065 224.581L260.604 252.12H271.652C287.114 252.12 301.774 245.239 311.653 233.345L314 230.516V189.904ZM210.505 218.991L194.003 202.49C186.351 242.412 170.649 280.354 147.865 314H173.007L198.004 259.408L210.505 218.991ZM168.644 326L192.099 371.051L210.345 421.171L192.914 438.602L190.601 427.593C182.967 391.252 168.422 356.769 147.811 326H168.644Z"
+            fill="#76B5E0"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M217.061 279.988L198.893 323.312L236.306 407.902L319.312 323.568L402.325 404.358L439.577 318.177L402.325 238.609L369.47 270.173L392.538 315.708L385.493 336.836L319.327 272.592L252.74 340.151L245.423 323.568L252.74 296.229L217.061 279.988Z"
+            fill="white"
+        />
+    </svg>
+);

package/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx CHANGED Viewed

@@ -9,11 +9,15 @@ import {
     EuiHeaderSectionItem,
 } from '@elastic/eui';
-import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
-import { WfoLogoutIcon } from '../../../icons/WfoLogoutIcon';
-import { WfoEngineStatusBadge } from '../../WfoBadges/WfoEngineStatusBadge';
-import { WfoEnvironmentBadge } from '../../WfoBadges/WfoEnvironmentBadge';
-import { WfoFailedTasksBadge } from '../../WfoBadges/WfoFailedTasksBadge';
+import {
+    WfoEngineStatusBadge,
+    WfoEnvironmentBadge,
+    WfoFailedTasksBadge,
+} from '@/components';
+import { WfoAppLogo } from '@/components/WfoPageTemplate/WfoPageHeader/WfoAppLogo';
+import { getWfoPageHeaderStyles } from '@/components/WfoPageTemplate/WfoPageHeader/styles';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+import { WfoLogoutIcon, WfoSideMenu } from '@/icons';
 export interface WfoPageHeaderProps {
     // todo: should be part of theme!
@@ -30,31 +34,29 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
     handleLogoutClick,
 }) => {
     const { theme, multiplyByBaseUnit } = useOrchestratorTheme();
+    const { getHeaderStyle, appNameStyle } = useWithOrchestratorTheme(
+        getWfoPageHeaderStyles,
+    );
     return (
-        <EuiHeader
-            css={{
-                backgroundColor: theme.colors.primary,
-                height: navigationHeight,
-            }}
-        >
+        <EuiHeader css={getHeaderStyle(navigationHeight)}>
             <EuiHeaderSection>
                 <EuiHeaderSectionItem>
-                    <EuiHeaderLogo
-                        iconType={() => getAppLogo(navigationHeight)}
-                    />
+                    <EuiHeaderLogo iconType={() => <WfoAppLogo />} />
+                    <div css={appNameStyle}>{getAppLogo(navigationHeight)}</div>
                 </EuiHeaderSectionItem>
                 <EuiHeaderSectionItem>
                     <WfoEnvironmentBadge />
                 </EuiHeaderSectionItem>
                 <EuiButtonIcon
-                    aria-label="Logout"
+                    aria-label="Show/Hide side menu"
                     display="empty"
                     iconType={() => (
-                        <WfoLogoutIcon color={theme.colors.emptyShade} />
+                        <WfoSideMenu color={theme.colors.emptyShade} />
                     )}
                     css={{ width: 48, height: 48, marginLeft: 10 }}
-                    color="ghost"
                     onClick={handleSideMenuClick}
                 />
             </EuiHeaderSection>
@@ -72,8 +74,10 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
                         iconType={() => (
                             <WfoLogoutIcon color={theme.colors.emptyShade} />
                         )}
-                        css={{ width: 48, height: 48 }}
-                        color="ghost"
+                        css={{
+                            width: 48,
+                            height: 48,
+                        }}
                         onClick={handleLogoutClick}
                     />
                 </EuiHeaderSectionItem>

package/src/components/WfoPageTemplate/WfoPageHeader/styles.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+import { toHexColorWithOpacity } from './utils/toHexColorWithOpacity';
+export const getWfoPageHeaderStyles = (theme: EuiThemeComputed) => {
+    const navigationBackgroundColor = '#04385F';
+    const appNameStyle = css({
+        paddingRight: theme.base,
+        marginRight: theme.base,
+        borderRight: `${theme.border.width.thick} solid ${toHexColorWithOpacity(
+            theme.colors.emptyShade,
+            0.3,
+        )}`,
+    });
+    const getHeaderStyle = (navigationHeight: number) => {
+        return css({
+            backgroundColor: navigationBackgroundColor,
+            height: navigationHeight,
+        });
+    };
+    return {
+        appNameStyle,
+        getHeaderStyle,
+    };
+};

package/src/components/WfoPageTemplate/WfoPageHeader/utils/toHexColorWithOpacity.spec.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { toHexColorWithOpacity } from './toHexColorWithOpacity';
+describe('toHexColorWithOpacity', () => {
+    it('returns hex color with opacity', () => {
+        const hexColor = '#ffffff';
+        const opacity = 0.3;
+        const result = toHexColorWithOpacity(hexColor, opacity);
+        expect(result).toEqual('#ffffff4d');
+    });
+});

package/src/components/WfoPageTemplate/WfoPageHeader/utils/toHexColorWithOpacity.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export const toHexColorWithOpacity = (hexColor: string, opacity: number) => {
+    const opacityHex = Math.round(opacity * 255).toString(16);
+    return `${hexColor}${opacityHex}`;
+};