@dev-crew-berlin/enter-js-utils 0.32.1 → 0.34.0

package/dist/generated/api-schema.d.ts

@@ -3,6 +3,10 @@
  * Do not make direct changes to the file.
  */
 export declare type paths = {
+    "/health": {
+        /** healthcheck to see if api server is running */
+        get: operations["healthcheck_health_get"];
+    };
     "/authenticate": {
         post: operations["login_authenticate_post"];
     };
@@ -63,17 +67,17 @@ export declare type components = {
          * @description New attendee was created
          */
         AttendeeCreatedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default attendee-created
              * @enum {string}
              */
             event: "attendee-created";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             attendee: components["schemas"]["PublicAttendee"];
             /** Instancename */
             instanceName: string;
@@ -83,17 +87,17 @@ export declare type components = {
          * @description Attendee was deleted
          */
         AttendeeDeletedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default attendee-deleted
              * @enum {string}
              */
             event: "attendee-deleted";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Attendeeid */
             attendeeId: string;
             /** Instancename */
@@ -109,17 +113,17 @@ export declare type components = {
          * Alternatively you can set `is_edit` to trigger email that are sent on edit instead.
          */
         AttendeeRespondedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default attendee-responded
              * @enum {string}
              */
             event: "attendee-responded";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Instancename */
             instanceName: string;
             /** Attendeeid */
@@ -159,17 +163,17 @@ export declare type components = {
          * @description Attendee was updated. This includes `userdata` but also other data such as `payment`, `rsvp` or `tags`
          */
         AttendeeUpdatedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default attendee-updated
              * @enum {string}
              */
             event: "attendee-updated";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Instancename */
             instanceName: string;
             /** Attendeeid */
@@ -207,6 +211,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -217,15 +226,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
         };
         /** AuthResponse */
         AuthResponse: {
@@ -291,6 +293,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -301,15 +308,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
         };
         /** CheckboxGroupField */
         CheckboxGroupField: {
@@ -342,6 +342,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -352,15 +357,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string[];
-            /** If */
-            if?: string;
             /**
              * Items
              * @default []
@@ -403,17 +401,17 @@ export declare type components = {
          * @description A new checkin was created
          */
         CheckinCreatedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default checkin-created
              * @enum {string}
              */
             event: "checkin-created";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Instancename */
             instanceName: string;
             /** Attendeeid */
@@ -427,17 +425,17 @@ export declare type components = {
          * @description An existing checkin was deleted
          */
         CheckinDeletedEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default checkin-deleted
              * @enum {string}
              */
             event: "checkin-deleted";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Instancename */
             instanceName: string;
             /** Attendeeid */
@@ -507,6 +505,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -517,18 +520,11 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /**
              * Value
              * Format: date-time
              */
             value?: string;
-            /** If */
-            if?: string;
         };
         /** DropdownField */
         DropdownField: {
@@ -561,6 +557,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -571,15 +572,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
             /**
              * Items
              * @default []
@@ -617,6 +611,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -627,15 +626,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
             /** Min */
             min?: number;
             /** Max */
@@ -696,6 +688,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -706,15 +703,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
             /** Min */
             min?: number;
             /** Max */
@@ -758,6 +748,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -768,15 +763,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
             /** Min */
             min?: number;
             /** Max */
@@ -835,6 +823,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -845,15 +838,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
             /** Min */
             min?: number;
             /** Max */
@@ -867,15 +853,6 @@ export declare type components = {
              */
             isCompanion: false;
         };
-        /** MetaField */
-        MetaField: {
-            /** Type */
-            type: "list" | "checkbox" | "text" | "textfield";
-            /** Values */
-            values?: string[];
-            /** Default */
-            default?: string;
-        };
         /** NumberField */
         NumberField: {
             /**
@@ -907,6 +884,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -917,15 +899,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
             /** Min */
             min?: number;
             /** Max */
@@ -935,6 +910,8 @@ export declare type components = {
         Payment: {
             /** Paid */
             paid: boolean;
+            /** Title */
+            title?: string;
             /**
              * Provider
              * @enum {string}
@@ -952,17 +929,17 @@ export declare type components = {
          * This triggers mails that are atomatically sent on payment
          */
         PaymentPaidEvent: {
+            /**
+             * Id
+             * Format: uuid
+             */
+            id?: string;
             /**
              * Event
              * @default payment-paid
              * @enum {string}
              */
             event: "payment-paid";
-            /**
-             * Id
-             * Format: uuid
-             */
-            id: string;
             /** Attendeeid */
             attendeeId: string;
             /** Instancename */
@@ -1035,9 +1012,9 @@ export declare type components = {
             registration: components["schemas"]["RegistrationInfo"];
             /** Guestnamefields */
             guestNameFields: string[];
-            /** Metafields */
-            metaFields: {
-                [key: string]: components["schemas"]["MetaField"];
+            /** Tagcolors */
+            tagColors: {
+                [key: string]: string;
             };
         };
         /**
@@ -1091,6 +1068,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -1101,15 +1083,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
             /** Itemval */
             itemval?: string;
         };
@@ -1144,6 +1119,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -1154,15 +1134,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
             /**
              * Items
              * @default []
@@ -1228,6 +1201,12 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default true
+             * @enum {boolean}
+             */
+            static: true;
             /**
              * Required
              * @default false
@@ -1238,15 +1217,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
         };
         /** TextField */
         TextField: {
@@ -1279,6 +1251,11 @@ export declare type components = {
              * @default false
              */
             isMetaField: boolean;
+            /**
+             * Static
+             * @default false
+             */
+            static: boolean;
             /**
              * Required
              * @default false
@@ -1289,15 +1266,8 @@ export declare type components = {
              * @default false
              */
             hidden: boolean;
-            /**
-             * Attendeesonly
-             * @default false
-             */
-            attendeesOnly: boolean;
             /** Value */
             value?: string;
-            /** If */
-            if?: string;
             /** Min */
             min?: number;
             /** Max */
@@ -1364,6 +1334,17 @@ export declare type components = {
     };
 };
 export declare type operations = {
+    /** healthcheck to see if api server is running */
+    healthcheck_health_get: {
+        responses: {
+            /** Successful Response */
+            200: {
+                content: {
+                    "application/json": unknown;
+                };
+            };
+        };
+    };
     login_authenticate_post: {
         responses: {
             /** Successful Response */

package/dist/models/attendee.d.ts

@@ -27,7 +27,7 @@ export declare class Attendee {
     constructor(args: AttendeeJSON | string);
     toJSON(): AttendeeJSON;
     getRsvpCountForTag(checkinTag: string): number;
-    getResponseForTag(checkinTag: string): 'no-response' | 'negative-repsone' | 'positive-response';
+    getResponseForTag(checkinTag: string): 'no-response' | 'negative-response' | 'positive-response';
     getCheckinsForTag(checkinTag: string): Checkins;
     getCheckinCountForTag(checkinTag: string): number;
     addCheckinForTag(args: {

package/dist/models/attendee.js

@@ -49,7 +49,7 @@ export class Attendee {
   getResponseForTag(checkinTag) {
     const rsvp = this.rsvp[checkinTag] ?? null;
     if (rsvp === null) return 'no-response';
-    return rsvp > 0 ? 'positive-response' : 'negative-repsone';
+    return rsvp > 0 ? 'positive-response' : 'negative-response';
   }
 
   getCheckinsForTag(checkinTag) {

package/dist/models/instance.d.ts

@@ -27,9 +27,11 @@ export declare class Instance {
         editEnd?: Date;
     };
     guestNameFields: string[];
+    tagColors: Record<string, string>;
     constructor(json: InstanceJSON);
     toJSON(): InstanceJSON;
     isRegistrationClosed(): boolean;
     canEditRegistration(): boolean;
     formatName(guest: Attendee): string;
+    getTagColor(tag: string): string;
 }

package/dist/models/instance.js

@@ -1,3 +1,4 @@
+import { theme } from '../lib';
 export class Instance {
   constructor(json) {
     this.name = json.name;
@@ -14,6 +15,7 @@ export class Instance {
       editEnd: json.registration.editEnd ? new Date(json.registration.editEnd) : undefined
     };
     this.guestNameFields = json.guestNameFields;
+    this.tagColors = json.tagColors;
   }
 
   toJSON() {
@@ -32,7 +34,7 @@ export class Instance {
         editEnd: this.registration.editEnd?.toISOString()
       },
       guestNameFields: this.guestNameFields,
-      metaFields: {}
+      tagColors: this.tagColors
     };
   }
 
@@ -69,4 +71,8 @@ export class Instance {
     return this.guestNameFields.map(fieldKey => guest.userdata[fieldKey] ?? '').join(' ');
   }
 
+  getTagColor(tag) {
+    return this.tagColors[tag] ?? theme.colors.enterMediumGrey;
+  }
+
 }

package/dist/ui/checkin-count-indicator.d.ts

@@ -9,7 +9,7 @@ declare type Props = {
     rsvpCount: number;
 } | {
     checkins: Checkin[];
-    response: 'negative-repsone' | 'no-response';
+    response: 'negative-response' | 'no-response';
 };
 export declare const CheckinCountIndicator: FunctionComponent<Props>;
 export {};

package/dist/ui/checkin-count-indicator.js

@@ -24,7 +24,7 @@ export const CheckinCountIndicator = props => {
   });
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'checkin-count-indicator'
-  }, props.response === 'negative-repsone' && !hasCheckins ? /*#__PURE__*/React.createElement("div", {
+  }, props.response === 'negative-response' && !hasCheckins ? /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'box-wrapper'
   }, /*#__PURE__*/React.createElement("span", {
     className: _JSXStyle.dynamic([["103743971", [fonts.primary, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterError, colors.enterError]]]) + " " + 'decline-box'

package/dist/ui/checkin-count-indicator.stories.d.ts

@@ -7,7 +7,7 @@ declare const _default: ComponentMeta<React.FunctionComponent<{
     rsvpCount: number;
 } | {
     checkins: Checkin[];
-    response: "no-response" | "negative-repsone";
+    response: "no-response" | "negative-response";
 }>>;
 export default _default;
 export declare const SingleResponse: ComponentStory<React.FunctionComponent<{
@@ -16,7 +16,7 @@ export declare const SingleResponse: ComponentStory<React.FunctionComponent<{
     rsvpCount: number;
 } | {
     checkins: Checkin[];
-    response: "no-response" | "negative-repsone";
+    response: "no-response" | "negative-response";
 }>>;
 export declare const Decline: ComponentStory<React.FunctionComponent<{
     checkins: Checkin[];
@@ -24,7 +24,7 @@ export declare const Decline: ComponentStory<React.FunctionComponent<{
     rsvpCount: number;
 } | {
     checkins: Checkin[];
-    response: "no-response" | "negative-repsone";
+    response: "no-response" | "negative-response";
 }>>;
 export declare const NoResponse: ComponentStory<React.FunctionComponent<{
     checkins: Checkin[];
@@ -32,7 +32,7 @@ export declare const NoResponse: ComponentStory<React.FunctionComponent<{
     rsvpCount: number;
 } | {
     checkins: Checkin[];
-    response: "no-response" | "negative-repsone";
+    response: "no-response" | "negative-response";
 }>>;
 export declare const MultipleResponses: ComponentStory<React.FunctionComponent<{
     checkins: Checkin[];
@@ -40,7 +40,7 @@ export declare const MultipleResponses: ComponentStory<React.FunctionComponent<{
     rsvpCount: number;
 } | {
     checkins: Checkin[];
-    response: "no-response" | "negative-repsone";
+    response: "no-response" | "negative-response";
 }>>;
 export declare const CheckinAndResponse: ComponentStory<React.FunctionComponent<{
     checkins: Checkin[];
@@ -48,7 +48,7 @@ export declare const CheckinAndResponse: ComponentStory<React.FunctionComponent<
     rsvpCount: number;
 } | {
     checkins: Checkin[];
-    response: "no-response" | "negative-repsone";
+    response: "no-response" | "negative-response";
 }>>;
 export declare const MultipleCheckinsAndResponse: ComponentStory<React.FunctionComponent<{
     checkins: Checkin[];
@@ -56,7 +56,7 @@ export declare const MultipleCheckinsAndResponse: ComponentStory<React.FunctionC
     rsvpCount: number;
 } | {
     checkins: Checkin[];
-    response: "no-response" | "negative-repsone";
+    response: "no-response" | "negative-response";
 }>>;
 export declare const CheckinsWithDecline: ComponentStory<React.FunctionComponent<{
     checkins: Checkin[];
@@ -64,7 +64,7 @@ export declare const CheckinsWithDecline: ComponentStory<React.FunctionComponent
     rsvpCount: number;
 } | {
     checkins: Checkin[];
-    response: "no-response" | "negative-repsone";
+    response: "no-response" | "negative-response";
 }>>;
 export declare const CheckinWithoutResponse: ComponentStory<React.FunctionComponent<{
     checkins: Checkin[];
@@ -72,7 +72,7 @@ export declare const CheckinWithoutResponse: ComponentStory<React.FunctionCompon
     rsvpCount: number;
 } | {
     checkins: Checkin[];
-    response: "no-response" | "negative-repsone";
+    response: "no-response" | "negative-response";
 }>>;
 export declare const MultipleCheckins: ComponentStory<React.FunctionComponent<{
     checkins: Checkin[];
@@ -80,5 +80,5 @@ export declare const MultipleCheckins: ComponentStory<React.FunctionComponent<{
     rsvpCount: number;
 } | {
     checkins: Checkin[];
-    response: "no-response" | "negative-repsone";
+    response: "no-response" | "negative-response";
 }>>;

package/dist/ui/checkin-count-indicator.stories.js

@@ -19,7 +19,7 @@ SingleResponse.args = {
 export const Decline = Template.bind({});
 Decline.args = {
   checkins: [],
-  response: 'negative-repsone'
+  response: 'negative-response'
 };
 export const NoResponse = Template.bind({});
 NoResponse.args = {
@@ -47,7 +47,7 @@ MultipleCheckinsAndResponse.args = {
 export const CheckinsWithDecline = Template.bind({});
 CheckinsWithDecline.args = {
   checkins: [exampleCheckin],
-  response: 'negative-repsone'
+  response: 'negative-response'
 };
 export const CheckinWithoutResponse = Template.bind({});
 CheckinWithoutResponse.args = {

package/dist/ui/form-elements/search-input.stories.d.ts

@@ -11,3 +11,8 @@ export declare const Basic: ComponentStory<React.FunctionComponent<React.InputHT
     borderColor?: string | undefined;
     placeholder?: string | undefined;
 }>>;
+export declare const WhiteText: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    textColor?: string | undefined;
+    borderColor?: string | undefined;
+    placeholder?: string | undefined;
+}>>;

package/dist/ui/form-elements/search-input.stories.js

@@ -13,4 +13,14 @@ Basic.args = {
   textColor: theme.colors.enterDarkGrey,
   borderColor: theme.colors.enterMediumGrey,
   placeholder: 'Search'
+};
+export const WhiteText = Template.bind({});
+WhiteText.parameters = {
+  backgrounds: {
+    default: 'dark'
+  }
+};
+WhiteText.args = {
+  textColor: 'white',
+  borderColor: 'white'
 };

package/dist/ui/guest-card.d.ts

@@ -5,10 +5,10 @@ declare type Props = {
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean;
-    labelColor?: string;
     infoText?: string;
     formatName: (attendee: Attendee) => string;
     filterTags?: (tag: string) => boolean;
+    getTagColor?: (tag: string) => string;
     findMainGuest?: (attendeeId: string) => Attendee | undefined;
     onClick?: (attendeeId: string) => void;
 };

package/dist/ui/guest-card.js

@@ -9,21 +9,35 @@ export const GuestCard = props => {
   const filterTags = props.filterTags ?? (() => true);
 
   const tags = (props.attendee.tags || []).filter(filterTags);
+
+  const getTagColor = props.getTagColor ?? (() => undefined);
+
   const onClick = props.onClick ? () => {
     if (!props.onClick) return;
     props.onClick(props.attendee.id);
   } : undefined;
   return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'guest-card-wrapper'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'tag-color-list'
+  }, tags.map(tag => [tag, getTagColor(tag)]).filter(([, tagColor]) => tagColor).map(([tag, tagColor]) => /*#__PURE__*/React.createElement("div", {
+    key: tag,
+    title: tag,
+    style: {
+      backgroundColor: tagColor,
+      height: '100%'
+    },
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'tag-color'
+  }))), /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
-    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + (cx({
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + (cx({
       'guest-card': true,
-      plain: props.plain,
-      labeled: props.labelColor !== undefined
+      plain: props.plain
     }) || "")
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]])
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]])
   }, /*#__PURE__*/React.createElement("h2", {
-    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + 'name'
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'name'
   }, props.formatName(props.attendee)), /*#__PURE__*/React.createElement(CompanionInfo, {
     companionStatus: props.attendee.companions,
     findMainGuest: props.findMainGuest,
@@ -33,13 +47,13 @@ export const GuestCard = props => {
     response: props.attendee.getResponseForTag(props.checkinTag),
     rsvpCount: props.attendee.getRsvpCountForTag(props.checkinTag)
   })), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + 'tag-list'
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'tag-list'
   }, tags.map(tag => /*#__PURE__*/React.createElement(Tag, {
     key: tag
   }, tag)), props.infoText && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + 'info'
-  }, " ", props.infoText)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2201546649",
-    dynamic: [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]
-  }, `.guest-card.__jsx-style-dynamic-selector{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;border-radius:2px;border:1px solid ${theme.colors.enterGrey};background-color:${theme.colors.enterBackground};font-family:${theme.fonts.primary};padding:1.1em 1em 0.9em;margin:1.5em 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.plain.__jsx-style-dynamic-selector{border:none;background-color:transparent;}.labeled.__jsx-style-dynamic-selector::before{content:'';position:absolute;top:-1px;right:-1px;width:3px;height:100%;background-color:${props.labelColor};border:1px solid ${props.labelColor};border-radius:0 2px 2px 0;}.name.__jsx-style-dynamic-selector{font-size:1.15em;margin:-0.1em 0 0.3em;}.tag-list.__jsx-style-dynamic-selector{max-width:40%;text-align:right;}.info.__jsx-style-dynamic-selector{display:block;width:100%;text-align:right;}`));
+    className: _JSXStyle.dynamic([["4235458019", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]]]) + " " + 'info'
+  }, " ", props.infoText))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4235458019",
+    dynamic: [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary]
+  }, `.guest-card-wrapper.__jsx-style-dynamic-selector{border-radius:2px;border:1px solid ${theme.colors.enterGrey};background-color:${theme.colors.enterBackground};font-family:${theme.fonts.primary};margin:1.5em 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.guest-card.__jsx-style-dynamic-selector{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;padding:1.1em 1em 0.9em;-webkit-flex:1;-ms-flex:1;flex:1;}.tag-color-list.__jsx-style-dynamic-selector{width:0.5em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.tag-color.__jsx-style-dynamic-selector:first-child{border-top-left-radius:1px;}.tag-color.__jsx-style-dynamic-selector:last-child{border-bottom-left-radius:1px;}.plain.__jsx-style-dynamic-selector{border:none;background-color:transparent;}.name.__jsx-style-dynamic-selector{font-size:1.15em;margin:-0.1em 0 0.3em;}.tag-list.__jsx-style-dynamic-selector{max-width:40%;text-align:right;font-size:0.9em;}.info.__jsx-style-dynamic-selector{display:block;width:100%;text-align:right;}`));
 };

package/dist/ui/guest-card.stories.d.ts

@@ -5,10 +5,10 @@ declare const _default: ComponentMeta<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -17,10 +17,10 @@ export declare const WithBackground: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -28,10 +28,10 @@ export declare const Plain: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -39,10 +39,10 @@ export declare const FilteredTags: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -50,10 +50,21 @@ export declare const WithColorLabel: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string) | undefined;
+    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
+    onClick?: ((attendeeId: string) => void) | undefined;
+}>>;
+export declare const WithMultipleColorLabels: ComponentStory<React.FunctionComponent<{
+    attendee: Attendee;
+    checkinTag: string;
+    plain?: boolean | undefined;
+    infoText?: string | undefined;
+    formatName: (attendee: Attendee) => string;
+    filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -61,10 +72,10 @@ export declare const WithInfoText: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -72,10 +83,10 @@ export declare const WithCompanion: ComponentStory<React.FunctionComponent<{
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;
@@ -83,10 +94,10 @@ export declare const WithCompanionButNoMainGuestInfo: ComponentStory<React.Funct
     attendee: Attendee;
     checkinTag: string;
     plain?: boolean | undefined;
-    labelColor?: string | undefined;
     infoText?: string | undefined;
     formatName: (attendee: Attendee) => string;
     filterTags?: ((tag: string) => boolean) | undefined;
+    getTagColor?: ((tag: string) => string) | undefined;
     findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
     onClick?: ((attendeeId: string) => void) | undefined;
 }>>;

package/dist/ui/guest-card.stories.js

@@ -28,10 +28,27 @@ const attendee = new Attendee({
   },
   deleted: false
 });
+const attendeeWithMultipleTags = new Attendee({
+  id: 'my-attendee-2',
+  language: 'de',
+  tags: ['VIP', 'tester', 'Import-200-02-10'],
+  time: new Date('2022-01-01').toISOString(),
+  rsvp: {
+    default: 1
+  },
+  checkin: {},
+  companions: {
+    isCompanion: false
+  },
+  userdata: {
+    name: 'Max Mustermann'
+  },
+  deleted: false
+});
 const companion = new Attendee({
   id: 'my-companion',
   language: 'de',
-  tags: ['VIP', 'Import-200-02-10'],
+  tags: ['VIP'],
   time: new Date('2022-01-01').toISOString(),
   rsvp: {
     default: 1
@@ -42,10 +59,14 @@ const companion = new Attendee({
     mainGuestId: 'my-attendee'
   },
   userdata: {
-    name: 'Jhon Doe'
+    name: 'John Doe'
   },
   deleted: false
 });
+const tagColors = {
+  VIP: theme.colors.enterPink,
+  tester: theme.colors.enterCyan
+};
 
 const Template = args => /*#__PURE__*/React.createElement(GuestCard, args);
 
@@ -89,10 +110,27 @@ export const WithColorLabel = Template.bind({});
 WithColorLabel.args = {
   attendee: attendee,
   checkinTag: 'default',
-  labelColor: theme.colors.enterPink,
 
   formatName(attendee) {
     return attendee.userdata.name?.toString() ?? '';
+  },
+
+  getTagColor(tag) {
+    return tagColors[tag] ?? null;
+  }
+
+};
+export const WithMultipleColorLabels = Template.bind({});
+WithMultipleColorLabels.args = {
+  attendee: attendeeWithMultipleTags,
+  checkinTag: 'default',
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  },
+
+  getTagColor(tag) {
+    return tagColors[tag] ?? null;
   }
 
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-crew-berlin/enter-js-utils",
-  "version": "0.32.1",
+  "version": "0.34.0",
   "description": "utils such as vaildation and other helpers to work with data from the enter app",
   "files": [
     "dist",