@sphereon/ui-components.ssi-react-native 0.5.1 → 0.5.2-next.2

package/dist/components/labels/SSIStatusLabel/index.js

@@ -10,9 +10,11 @@ const SSIExclamationMarkBadge_1 = __importDefault(require("../../../components/a
 const styles_1 = require("../../../styles");
 const SSIStatusLabel = (props) => {
     const { status, color = ui_components_core_1.statusColors[status], style, showIcon = false } = props;
-    return (<styles_1.SSIStatusLabelContainerStyled style={[style, { borderColor: color }]}>
+    const isSolid = status === ui_components_core_1.CredentialStatus.REVOKED || status === ui_components_core_1.CredentialStatus.EXPIRED;
+    const textColor = isSolid ? '#FFFFFF' : color;
+    return (<styles_1.SSIStatusLabelContainerStyled style={[style, { borderColor: isSolid ? '#FFFFFF' : color, ...(isSolid ? { backgroundColor: color } : {}) }]}>
       {showIcon && <styles_1.SSIStatusLabelBadgeContainer>{getStatusBadge(status, color)}</styles_1.SSIStatusLabelBadgeContainer>}
-      <styles_1.SSIStatusLabelStatusCaptionStyled style={{ color }}>{(0, ui_components_core_1.getStatusTranslation)(status)}</styles_1.SSIStatusLabelStatusCaptionStyled>
+      <styles_1.SSIStatusLabelStatusCaptionStyled style={{ color: textColor }}>{(0, ui_components_core_1.getStatusTranslation)(status)}</styles_1.SSIStatusLabelStatusCaptionStyled>
     </styles_1.SSIStatusLabelContainerStyled>);
 };
 const getStatusBadge = (status, backgroundColor) => {

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

@@ -15,6 +15,11 @@ const SSICredentialCardView = (props) => {
     const { issuerName, properties } = props.body ?? {};
     const { credentialStatus, expirationDate } = props.footer ?? {};
     const { backgroundColor = ui_components_core_1.credentialCardColors.default, backgroundImage, textColor = ui_components_core_1.backgroundColors.primaryLight } = props.display ?? {};
+    const statusRibbonColor = credentialStatus === ui_components_core_1.CredentialStatus.REVOKED
+        ? ui_components_core_1.statusColors.revoked
+        : credentialStatus === ui_components_core_1.CredentialStatus.EXPIRED
+            ? ui_components_core_1.statusColors.expired
+            : undefined;
     const getPropertyElementsFrom = (properties) => {
         return properties.slice(0, 2).map((property, index) => (<react_native_1.View key={index} style={{
                 ...(properties.length > 1 && { width: 140 }),
@@ -35,7 +40,9 @@ const SSICredentialCardView = (props) => {
                   <styles_1.SSICredentialCardViewCredentialTitleTextStyled style={{ color: textColor }} numberOfLines={2}>
                     {credentialTitle}
                   </styles_1.SSICredentialCardViewCredentialTitleTextStyled>
-                  {credentialSubtitle && <styles_1.SSICredentialCardViewCredentialSubtitleTextStyled style={{ color: textColor }} numberOfLines={2}>{credentialSubtitle}</styles_1.SSICredentialCardViewCredentialSubtitleTextStyled>}
+                  {credentialSubtitle && (<styles_1.SSICredentialCardViewCredentialSubtitleTextStyled style={{ color: textColor }} numberOfLines={2}>
+                      {credentialSubtitle}
+                    </styles_1.SSICredentialCardViewCredentialSubtitleTextStyled>)}
                 </styles_1.SSICredentialCardViewHeaderTitleContainerStyled>)}
             </styles_1.SSICredentialCardViewHeaderContainerStyled>)}
           {body && (<styles_1.SSICredentialCardViewContentMainContainerStyled>
@@ -54,11 +61,28 @@ const SSICredentialCardView = (props) => {
                 ? `${ui_components_core_1.Localization.translate('credential_card_expires_message')} ${(0, ui_components_core_1.toLocalDateString)(expirationDate)}`
                 : ui_components_core_1.Localization.translate('credential_status_never_expires_date_label')}
                 </styles_1.SSITextH5LightStyled>
-                {credentialStatus && (<styles_1.SSICredentialCardViewStatusContainerStyled>{credentialStatus && <SSIStatusLabel_1.default status={credentialStatus} color={textColor}/>}</styles_1.SSICredentialCardViewStatusContainerStyled>)}
+                {credentialStatus && (<styles_1.SSICredentialCardViewStatusContainerStyled>
+                    {credentialStatus && (<SSIStatusLabel_1.default status={credentialStatus} color={credentialStatus === ui_components_core_1.CredentialStatus.REVOKED || credentialStatus === ui_components_core_1.CredentialStatus.EXPIRED
+                        ? ui_components_core_1.statusColors[credentialStatus]
+                        : textColor}/>)}
+                  </styles_1.SSICredentialCardViewStatusContainerStyled>)}
               </styles_1.SSICredentialCardViewFooterContentContainerStyled>
             </styles_1.SSICredentialCardViewFooterContainerStyled>)}
         </styles_1.SSIAlphaContainerStyled>
       </styles_1.SSICredentialCardViewBackgroundImageStyled>
+      {statusRibbonColor && credentialStatus && (<react_native_1.View style={{ position: 'absolute', top: 0, left: 0, right: 0, alignItems: 'center', zIndex: 5 }}>
+          <react_native_1.View style={{
+                backgroundColor: statusRibbonColor,
+                paddingHorizontal: 22,
+                paddingVertical: 3,
+                borderBottomLeftRadius: 9,
+                borderBottomRightRadius: 9,
+            }}>
+            <react_native_1.Text style={{ color: '#FFFFFF', fontSize: 10, fontWeight: '700', letterSpacing: 1.2 }}>
+              {(0, ui_components_core_1.getStatusTranslation)(credentialStatus).toUpperCase()}
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>)}
     </styles_1.SSICredentialCardViewContainerStyled>);
 };
 exports.default = SSICredentialCardView;

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

@@ -1,11 +1,12 @@
 import { FC } from 'react';
 import { ColorValue, ViewStyle } from 'react-native';
-import { ImageAttributes } from '@sphereon/ui-components.core';
+import { CredentialStatus, ImageAttributes } from '@sphereon/ui-components.core';
 type Props = {
     backgroundImage?: ImageAttributes;
     backgroundColor?: ColorValue;
     logo?: ImageAttributes;
     logoColor?: ColorValue;
+    credentialStatus?: CredentialStatus;
     style?: ViewStyle;
 };
 declare const SSICredentialMiniCardView: FC<Props>;

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

@@ -4,13 +4,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
 const ui_components_core_1 = require("@sphereon/ui-components.core");
 const SSILogo_1 = __importDefault(require("../../assets/logos/SSILogo"));
 const styles_1 = require("../../../styles");
 const SSICredentialMiniCardView = (props) => {
-    const { backgroundColor = ui_components_core_1.credentialCardColors.default, backgroundImage, logo, logoColor, style } = props;
+    const { backgroundColor = ui_components_core_1.credentialCardColors.default, backgroundImage, logo, logoColor, credentialStatus, style } = props;
+    const ribbonColor = credentialStatus === ui_components_core_1.CredentialStatus.REVOKED
+        ? ui_components_core_1.statusColors.revoked
+        : credentialStatus === ui_components_core_1.CredentialStatus.EXPIRED
+            ? ui_components_core_1.statusColors.expired
+            : undefined;
     return (<styles_1.SSICredentialMiniCardViewContainerStyled style={[style, { backgroundColor }]}>
       <styles_1.SSICredentialMiniCardViewBackgroundImageStyled source={backgroundImage}>{(!backgroundImage || logo) && <SSILogo_1.default logo={logo} color={logoColor}/>}</styles_1.SSICredentialMiniCardViewBackgroundImageStyled>
+      {ribbonColor && credentialStatus && (<react_native_1.View style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                backgroundColor: ribbonColor,
+                alignItems: 'center',
+                paddingVertical: 1,
+                zIndex: 5,
+            }}>
+          <react_native_1.Text style={{ color: '#FFFFFF', fontSize: 6, fontWeight: '700', letterSpacing: 0.2 }}>
+            {(0, ui_components_core_1.getStatusTranslation)(credentialStatus).toUpperCase()}
+          </react_native_1.Text>
+        </react_native_1.View>)}
     </styles_1.SSICredentialMiniCardViewContainerStyled>);
 };
 exports.default = SSICredentialMiniCardView;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react-native",
   "private": false,
-  "version": "0.5.1",
+  "version": "0.5.2-next.2+e712569",
   "description": "SSI UI components for React-Native",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@react-native-masked-view/masked-view": "^0.3.2",
-    "@sphereon/ui-components.core": "0.5.1",
+    "@sphereon/ui-components.core": "0.5.2-next.2+e712569",
     "expo-blur": "^15.0.8",
     "expo-image": "~2.0.6",
     "expo-linear-gradient": "~13.0.2",
@@ -46,5 +46,5 @@
     "react": ">= 18.2",
     "react-native": "~0.74.3"
   },
-  "gitHead": "62b19af0896e0946973b50f057dc63661209a318"
+  "gitHead": "e712569aee9d9c8db97ca0f6484e625293560c74"
 }