@sphereon/ui-components.ssi-react 0.3.1-next.4 → 0.3.1-next.6

package/dist/components/views/ContactViewItem/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { CredentialRole, IImageAttributes } from '@sphereon/ssi-sdk.data-store';
+export interface Props {
+    name: string;
+    uri?: string;
+    logo?: IImageAttributes;
+    roles: Array<CredentialRole>;
+}
+declare const ContactViewItem: FC<Props>;
+export default ContactViewItem;

package/dist/components/views/ContactViewItem/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+const ContactViewItem = (props) => {
+    const { name, uri, roles, logo } = props;
+    return (_jsxs(Container, { children: [_jsx(StatusContainer, {}), _jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: fontColors.dark }) }), _jsxs("div", { children: [_jsxs(ContactDetailsContainer, { children: [_jsx(ContactNameCaption, { children: name }), _jsx(ContactRolesCaption, { children: roles.join(', ') })] }), _jsx(ContactUriCaption, { children: uri })] })] }));
+};
+export default ContactViewItem;

package/dist/components/views/SSICredentialCardView/index.d.ts

@@ -14,6 +14,7 @@ type CardBody = {
     properties?: Array<CardProperty>;
 };
 type CardFooter = {
+    showExpirationDate?: boolean;
     expirationDate?: number;
     credentialStatus?: CredentialStatus;
 };

package/dist/components/views/SSICredentialCardView/index.js

@@ -7,7 +7,7 @@ const SSICredentialCardView = (props) => {
     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) => {
         return properties.slice(0, 2).map((property, index) => (_jsxs(PropertyContainer, { style: {
@@ -17,8 +17,9 @@ const SSICredentialCardView = (props) => {
     };
     return (_jsx(Container, { style: { backgroundColor }, children: _jsx(BackgroundImage, { style: {
                 ...(backgroundImage?.uri && { background: `url(${backgroundImage.uri})`, backgroundSize: 'cover' }),
-            }, children: _jsxs(AlphaContainer, { children: [header && (_jsxs(HeaderContainer, { children: [(!backgroundImage || logo) && (_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor }) })), credentialTitle && (_jsxs(TitleContainer, { children: [_jsx(CredentialTitleText, { style: { color: textColor }, children: credentialTitle }), credentialSubtitle && _jsx(CredentialSubtitleText, { style: { color: textColor }, children: credentialSubtitle })] }))] })), body && (_jsx(ContentMainContainer, { children: _jsxs(ContentSubContainer, { children: [issuerName && (_jsx(IssueNameContainer, { children: _jsx(H4Text, { style: { color: textColor }, children: issuerName }) })), properties && _jsx(PropertiesContainer, { children: getPropertyElementsFrom(properties) })] }) })), footer && (_jsxs(FooterContainer, { children: [_jsx(ExpirationDateText, { style: { color: textColor }, children: expirationDate
-                                    ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
-                                    : Localization.translate('credential_status_never_expires_date_label') }), credentialStatus && (_jsx(StatusContainer, { children: credentialStatus && _jsx(SSIStatusLabel, { status: credentialStatus, color: textColor }) }))] }))] }) }) }));
+            }, children: _jsxs(AlphaContainer, { children: [header && (_jsxs(HeaderContainer, { children: [(!backgroundImage || logo) && (_jsx(LogoContainer, { children: _jsx(SSILogo, { logo: logo, color: textColor }) })), credentialTitle && (_jsxs(TitleContainer, { children: [_jsx(CredentialTitleText, { style: { color: textColor }, children: credentialTitle }), credentialSubtitle && _jsx(CredentialSubtitleText, { style: { color: textColor }, children: credentialSubtitle })] }))] })), body && (_jsx(ContentMainContainer, { children: _jsxs(ContentSubContainer, { children: [issuerName && (_jsx(IssueNameContainer, { children: _jsx(H4Text, { style: { color: textColor }, children: issuerName }) })), properties && _jsx(PropertiesContainer, { children: getPropertyElementsFrom(properties) })] }) })), footer && (_jsxs(FooterContainer, { children: [showExpirationDate &&
+                                _jsx(ExpirationDateText, { style: { color: textColor }, children: expirationDate
+                                        ? `${Localization.translate('credential_card_expires_message')} ${toLocalDateString(expirationDate)}`
+                                        : Localization.translate('credential_status_never_expires_date_label') }), credentialStatus && (_jsx(StatusContainer, { children: credentialStatus && _jsx(SSIStatusLabel, { status: credentialStatus, color: textColor }) }))] }))] }) }) }));
 };
 export default SSICredentialCardView;

package/dist/index.d.ts

@@ -46,9 +46,10 @@ 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';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem };

package/dist/index.js

@@ -46,8 +46,9 @@ 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';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem };

package/dist/styles/components/components/ContactViewItem/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const ContactViewItemContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const ContactViewItemNewStatusContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ContactViewItemLogoContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ContactViewItemContactDetailsContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ContactViewItemContactUriCaptionStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;

package/dist/styles/components/components/ContactViewItem/index.js

@@ -0,0 +1,23 @@
+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;
+`;
+export const ContactViewItemContactUriCaptionStyled = styled(SSITextH5Styled) `
+  color: #4F4F4F;
+`;

package/dist/styles/components/components/index.d.ts

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

package/dist/styles/components/components/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.3.1-next.4+4fddd6c",
+  "version": "0.3.1-next.6+1c82a92",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -40,7 +40,8 @@
     "@mui/styled-engine-sc": "^5.14.12",
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
-    "@sphereon/ui-components.core": "0.3.1-next.4+4fddd6c",
+    "@sphereon/ssi-sdk.data-store": "0.29.1-next.47",
+    "@sphereon/ui-components.core": "0.3.1-next.6+1c82a92",
     "@tanstack/react-table": "^8.9.3",
     "react-json-tree": "^0.18.0",
     "react-loader-spinner": "5.4.5",
@@ -58,5 +59,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "4fddd6c22fa6283b5e2504d00592c31c45d4cdf1"
+  "gitHead": "1c82a92f21702a4027d6601c25ec9757f0f58e6a"
 }