updates(participant): new templates

CHANGELOG.md

@@ -51,7 +51,9 @@
   - Change the payload data as per backend logic
 - App Subscription
   - Add and Edit Tenant URL functionality in detail overlay
-- Data Space
+- Static Pages
+  - Data Space
+  - Catena-X Participant
 
 ## 1.5.0
 

src/components/pages/CompanyRoles/index.tsx

@@ -37,15 +37,18 @@ export default function CompanyRoles() {
 
   useEffect(() => {
     CommonService.getCompanyRoles((data: any) => {
-      setLinkArray(data.subNavigation)
       if (url.indexOf('companyrolesappprovider') > 1) {
         setCompanyRoles(data.appProvider)
+        setLinkArray(data.appProvider.subNavigation)
       } else if (url.indexOf('companyrolesserviceprovider') > 1) {
         setCompanyRoles(data.serviceProvider)
+        setLinkArray(data.serviceProvider.subNavigation)
       } else if (url.indexOf('companyrolesconfirmitybody') > 1) {
         setCompanyRoles(data.confirmity)
+        setLinkArray(data.confirmity.subNavigation)
       } else {
         setCompanyRoles(data.participant)
+        setLinkArray(data.participant.subNavigation)
       }
     })
   }, [url, language])

src/components/shared/templates/StaticTemplateResponsive/Cards/AlignedText.tsx

@@ -0,0 +1,42 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { subSectionsType } from '../StaticTypes'
+import '../StaticTemplate.scss'
+import TitleDescriptionAndSectionlink from './TitleDescriptionAndSectionlink'
+
+export default function AlignedText({
+  provider,
+  align,
+}: {
+  provider: subSectionsType
+  align?: string
+}) {
+  return (
+    <div
+      id={provider.id}
+      className={align === 'left' ? 'leftAligned' : 'rightAligned'}
+    >
+      <TitleDescriptionAndSectionlink
+        provider={provider}
+        defaultTitleVariation={false}
+      />
+    </div>
+  )
+}

src/components/shared/templates/StaticTemplateResponsive/Cards/ImageVideoWrapper.tsx

@@ -18,71 +18,37 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { IconButton, Typography } from '@catena-x/portal-shared-components'
 import { ReactElement } from 'react'
 import { ProviderProps } from '../StaticTypes'
 import '../StaticTemplate.scss'
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
-import { Trans } from 'react-i18next'
+import TitleDescriptionAndSectionlink from './TitleDescriptionAndSectionlink'
 
 export default function ImageVideoWrapper({
   provider,
   children,
   scrollTop,
   showScroll,
+  isImagePresent,
 }: {
   provider: ProviderProps
   children: ReactElement
   scrollTop: () => void
   showScroll: boolean
+  isImagePresent?: boolean
 }) {
-  const navigate = (link: { internal: boolean; id: string }) => {
-    if (link.internal) {
-      const element = document.getElementById(link.id)
-      const top = element?.offsetTop
-      window.scrollTo({
-        top: top,
-        behavior: 'smooth',
-      })
-    } else {
-      window.open(link.id, '_blank')
-    }
-  }
-
   return (
     <div className={'imageVideoTextSideBySide'}>
-      <div className={'titleDescriptionBody'}>
-        <div className="titleWithIcon sideBySideTitle">
-          <Typography variant="h2">{provider.title}</Typography>
-          {showScroll && (
-            <IconButton onClick={scrollTop}>
-              <ArrowUpwardIcon />
-            </IconButton>
-          )}
-        </div>
-        <Typography className={'providerDescription'}>
-          <Trans
-            key={provider.description}
-            i18nKey={provider.description}
-            components={[
-              <span key={provider.description}></span>,
-              <br key={provider.description} />,
-            ]}
-          ></Trans>
-        </Typography>
-        {provider.sectionLink && (
-          <>
-            {provider.sectionLink.data.map((link) => (
-              <Typography
-                className={'highlightText'}
-                onClick={() => navigate(link)}
-                key={link.title}
-              >
-                {link.title}
-              </Typography>
-            ))}
-          </>
-        )}
+      <div
+        className={'titleDescriptionBody'}
+        style={{
+          width: !isImagePresent ? '100%' : '50%',
+        }}
+      >
+        <TitleDescriptionAndSectionlink
+          showScroll={showScroll}
+          provider={provider}
+          scrollTop={scrollTop}
+        />
       </div>
       {children}
     </div>

src/components/shared/templates/StaticTemplateResponsive/Cards/RenderImage.tsx

@@ -51,7 +51,12 @@ export default function RenderImage({
           additionalStyles={additionalStyles || {}}
         />
       ) : (
-        <img className={'imageGallery'} src={url} alt="provider" />
+        <img
+          className={'imageGallery'}
+          src={url}
+          alt="provider"
+          width={width ? width : 'auto'}
+        />
       )}
     </>
   )

src/components/shared/templates/StaticTemplateResponsive/Cards/TextImageSideBySideWithSections.tsx

@@ -0,0 +1,120 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { ProviderProps } from '../StaticTypes'
+import RenderImage from './RenderImage'
+import '../StaticTemplate.scss'
+import AlignedText from './AlignedText'
+import { Typography } from '@catena-x/portal-shared-components'
+import { Trans } from 'react-i18next'
+import TitleDescriptionAndSectionlink from './TitleDescriptionAndSectionlink'
+
+export default function TextImageSideBySideWithSections({
+  provider,
+  baseUrl,
+  scrollTop,
+  showScroll,
+}: {
+  provider: ProviderProps
+  baseUrl: string
+  scrollTop: () => void
+  showScroll: boolean
+}) {
+  return (
+    <div className="imageVideoTextSideBySideWithSections">
+      <div className={'imageVideoTextSideBySide padding-bottom-20'}>
+        <div
+          className={'titleDescriptionBody'}
+          style={{
+            width: !provider.imagePath ? '100%' : '50%',
+          }}
+        >
+          <TitleDescriptionAndSectionlink
+            showScroll={showScroll}
+            provider={provider}
+            scrollTop={scrollTop}
+          />
+          {provider.subDescriptions && (
+            <>
+              <Typography className={'providerDescription'}>
+                <Trans
+                  key={provider.subDescriptions.title}
+                  i18nKey={provider.subDescriptions.title}
+                  components={[
+                    <span key={provider.subDescriptions.title}></span>,
+                    <br key={provider.subDescriptions.title} />,
+                    <p
+                      key={provider.subDescriptions.title}
+                      className="padding-left-30"
+                    ></p>,
+                  ]}
+                ></Trans>
+              </Typography>
+              {provider?.subDescriptions?.sections.map(
+                (section: { title: string; link: string; value: string }) => (
+                  <>
+                    <Typography>
+                      <Trans
+                        key={section.title}
+                        i18nKey={section.title}
+                        components={[
+                          <span key={section.title}></span>,
+                          <br key={section.title} />,
+                          <span
+                            key={section.title}
+                            className="subDescription"
+                          ></span>,
+                        ]}
+                      ></Trans>
+                    </Typography>
+                    <Typography
+                      className={
+                        'padding-left-30 highlightText padding-bottom-20'
+                      }
+                      onClick={() => window.open(section.link, '_blank')}
+                      key={section.value}
+                    >
+                      {section.value}
+                    </Typography>
+                  </>
+                )
+              )}
+            </>
+          )}
+        </div>
+        {provider.imagePath !== '' && (
+          <RenderImage
+            url={baseUrl + provider.imagePath || ''}
+            additionalStyles={{
+              textAlign: 'center',
+            }}
+            width="490px"
+          />
+        )}
+      </div>
+      {provider.subsections && (
+        <>
+          {provider.subsections.map((section) => (
+            <AlignedText key={section.title} provider={section} align="left" />
+          ))}
+        </>
+      )}
+    </div>
+  )
+}

src/components/shared/templates/StaticTemplateResponsive/Cards/TextVideoSideBySide.tsx

@@ -37,6 +37,7 @@ export default function TextVideoSideBySide({
       scrollTop={scrollTop}
       showScroll={showScroll}
       provider={provider}
+      isImagePresent={true}
       children={
         <ReactPlayer
           className="video"

src/components/shared/templates/StaticTemplateResponsive/Cards/TitleDescriptionAndSectionlink.tsx

@@ -0,0 +1,90 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { IconButton, Typography } from '@catena-x/portal-shared-components'
+import '../StaticTemplate.scss'
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
+import { Trans } from 'react-i18next'
+import { ProviderProps, subSectionsType } from '../StaticTypes'
+
+export default function TitleDescriptionAndSectionlink({
+  scrollTop,
+  showScroll,
+  provider,
+  defaultTitleVariation = true,
+}: {
+  scrollTop?: () => void
+  showScroll?: boolean
+  provider: ProviderProps | subSectionsType
+  defaultTitleVariation?: boolean
+}) {
+  const navigateTo = (link: { internal: boolean; id: string }) => {
+    if (link.internal) {
+      const element = document.getElementById(link.id)
+      const top = element?.offsetTop
+      window.scrollTo({
+        top: top,
+        behavior: 'smooth',
+      })
+    } else {
+      window.open(link.id, '_blank')
+    }
+  }
+  return (
+    <>
+      <div className="titleWithIcon sideBySideTitle">
+        {defaultTitleVariation ? (
+          <>
+            <Typography variant="h2">{provider.title}</Typography>
+            {showScroll && (
+              <IconButton onClick={scrollTop}>
+                <ArrowUpwardIcon />
+              </IconButton>
+            )}
+          </>
+        ) : (
+          <Typography variant="h3">{provider.title}</Typography>
+        )}
+      </div>
+      <Typography className={'providerDescription'}>
+        <Trans
+          key={provider.description}
+          i18nKey={provider.description}
+          components={[
+            <span key={provider.description}></span>,
+            <br key={provider.description} />,
+          ]}
+        ></Trans>
+      </Typography>
+      {provider.sectionLink && (
+        <>
+          {provider.sectionLink.data.map((link) => (
+            <Typography
+              className={'highlightText'}
+              onClick={() => navigateTo(link)}
+              key={link.title}
+            >
+              {link.title}
+            </Typography>
+          ))}
+        </>
+      )}
+    </>
+  )
+}