Merge pull request #62 from Sphereon-Opensource/feat/CWALL-250

feature/CWALL-250

packages/ssi-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.3.0",
+  "version": "0.3.4-bram",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -41,6 +41,7 @@
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
     "@sphereon/ui-components.core": "workspace:*",
+    "@sphereon/ssi-sdk.data-store": "0.29.1-next.47",
     "@tanstack/react-table": "^8.9.3",
     "react-json-tree": "^0.18.0",
     "react-loader-spinner": "5.4.5",

packages/ssi-react/src/components/views/ContactViewItem/index.tsx

@@ -0,0 +1,41 @@
+import React, {FC} from 'react';
+import {CredentialRole, IImageAttributes} from '@sphereon/ssi-sdk.data-store';
+import SSILogo from '../../assets/logos/SSILogo';
+import {
+    ContactViewItemContactDetailsContainerStyled as ContactDetailsContainer,
+    SSITextH3Styled as ContactNameCaption,
+    SSITextH4Styled as ContactRolesCaption,
+    ContactViewItemContactUriCaptionStyled as ContactUriCaption,
+    ContactViewItemContainerStyled as Container,
+    ContactViewItemLogoContainerStyled as LogoContainer,
+    ContactViewItemNewStatusContainerStyled as StatusContainer,
+} from '../../../styles';
+import {fontColors} from "@sphereon/ui-components.core";
+
+export interface Props {
+    name: string;
+    uri?: string;
+    logo?: IImageAttributes;
+    roles: Array<CredentialRole>;
+}
+
+const ContactViewItem: FC<Props> = (props: Props): JSX.Element => {
+    const {name, uri, roles, logo} = props;
+    return (
+        <Container>
+            <StatusContainer />
+            <LogoContainer>
+                <SSILogo logo={logo} color={fontColors.dark}/>
+            </LogoContainer>
+            <div>
+                <ContactDetailsContainer>
+                    <ContactNameCaption>{name}</ContactNameCaption>
+                    <ContactRolesCaption>{roles.join(', ')}</ContactRolesCaption>
+                </ContactDetailsContainer>
+                <ContactUriCaption>{uri}</ContactUriCaption>
+            </div>
+        </Container>
+    );
+};
+
+export default ContactViewItem;

packages/ssi-react/src/components/views/SSICredentialCardView/index.tsx

@@ -47,6 +47,7 @@ type CardBody = {
 }
 
 type CardFooter = {
+  showExpirationDate?: boolean
   expirationDate?: number
   credentialStatus?: CredentialStatus
 }
@@ -68,7 +69,7 @@ const SSICredentialCardView: FC<Props> = (props: Props): ReactElement => {
   const {header, body, footer} = props
   const {credentialTitle, credentialSubtitle, logo} = props.header ?? {}
   const {issuerName, properties} = props.body ?? {}
-  const {credentialStatus, expirationDate} = props.footer ?? {}
+  const {credentialStatus, expirationDate, showExpirationDate = true} = props.footer ?? {}
   const {backgroundColor = credentialCardColors.default, backgroundImage, textColor = backgroundColors.primaryLight} = props.display ?? {}
 
   const getPropertyElementsFrom = (properties: Array<CardProperty>): Array<ReactElement> => {
@@ -123,11 +124,13 @@ const SSICredentialCardView: FC<Props> = (props: Props): ReactElement => {
           )}
           {footer && (
             <FooterContainer>
-              <ExpirationDateText style={{color: textColor}}>
-                {expirationDate
-                  ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
-                  : Localization.translate('credential_status_never_expires_date_label')}
-              </ExpirationDateText>
+              { showExpirationDate  &&
+                  <ExpirationDateText style={{color: textColor}}>
+                    {expirationDate
+                        ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
+                        : Localization.translate('credential_status_never_expires_date_label')}
+                  </ExpirationDateText>
+              }
               {credentialStatus && (
                 <StatusContainer>{credentialStatus && <SSIStatusLabel status={credentialStatus} color={textColor} />}</StatusContainer>
               )}

packages/ssi-react/src/index.ts

@@ -46,6 +46,7 @@ import TextInputField from './components/fields/TextInputField'
 import WarningImage from './components/assets/images/WarningImage'
 import FormView from './components/views/FormView'
 import InformationRequestView from './components/views/InformationRequestView'
+import ContactViewItem from './components/views/ContactViewItem'
 
 import {Row} from '@tanstack/react-table'
 
@@ -106,4 +107,5 @@ export {
   WarningImage,
   FormView,
   InformationRequestView,
+  ContactViewItem
 }

packages/ssi-react/src/styles/components/components/ContactViewItem/index.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+import {SSIFlexDirectionRowViewStyled} from '../../containers';
+import {SSITextH5Styled} from '../../../fonts';
+
+export const ContactViewItemContainerStyled = styled(SSIFlexDirectionRowViewStyled)`
+  padding: 16px 24px 18px 7px;
+`;
+
+export const ContactViewItemNewStatusContainerStyled = styled.div`
+  height: 10px;
+  width: 17px;
+  margin: auto 0;
+`;
+
+export const ContactViewItemLogoContainerStyled = styled.div`
+  width: 78px;
+  margin: 2.5px 4px 2.5px 0;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const ContactViewItemContactDetailsContainerStyled = styled.div`
+  margin-bottom: 6px;
+`;
+
+// TODO we need to have a color here and not use opacity for colors
+// opacity: 0.8;
+// TODO move color
+export const ContactViewItemContactUriCaptionStyled = styled(SSITextH5Styled)`
+  color: #4F4F4F;
+`;

packages/ssi-react/src/styles/components/components/index.ts

@@ -28,3 +28,4 @@ export * from './CredentialViewItem'
 export * from './JSONDataView'
 export * from './TextInputField'
 export * from './InformationRequestView'
+export * from './ContactViewItem'