imagecard

README.md

Image Card

The image card contains multiple card variants that all include a large image element in addition to texts and icons. Image cards work as buttons. The whole card is clickable. Overall Accessibility: Image cards have one focus point. The image is always ignored by screen readers.

Typed of Image Card

• OVS Appointment Card: This image card contain title, doctor speciality both get truncated after 2 lines. Also there is a image on the left side which s disabled for screen readers. The image card has information about the appointment date and time and also photo upload.
• Feed Card: This image card contain image, category, title and description. User can provide image resource id or any composable to load image. Truncation of text is as follows: Category - After 1 line, title - After 2 lines, description - After 4 lines.
• Course Card Yuble: This image card contain image, star ratings, title, description and addresses. User can provide image resource id or any composable to load image. Truncation of text is as follows: start ratings - After 1 line, title - After 2 lines, description - After 4 lines - Addresses.
• Course Card Queo: This image card contain image, title, rounder button, addresses, date and time . User can provide image resource id or any composable to load image. Truncation of text is as follows: title - After 1 line, rounder button - After 1 line, addresses - After 2 lines - date - After 1 line - time.
• Course Card: This image card contain image, title and description . User can provide image resource id or any composable to load image. Truncation of text is as follows: title - After 2 line, description.
• GoalsOverView Card: This image card contain image, bubble image, title and union button. User can provide image resource id or any composable to load image. Truncation of text is as follows: title - After 1 line, button.
• Magazine Card: This image card contain image, title and description. The component user can provide image resource id or any composable to load image. Truncation of text is as follows: title - After 1 line, description after 4 lines of description.
• Event Card: This image card contain image, title, description, location and date. User can provide image resource id or any composable to load image. Truncation of text is as follows: title - After 2 lines, description - After 4 lines.

Features:

• Able to pass different types of image card.
• Dynamic styling the text content
• Able to pass image composable so image from url can also be displayed in card along with drawables.

How to use Image Card

1. Add the necessary imports:

   import your.package.name.OCImageCard

2. Create Image Card composable of your choice by choosing your desired image Card Type and pass the required model

OCOVSAppointmentImageCard

   OCImageCard(
             modifier = Modifier.wrapContentHeight(),
             imageCardType = OCOVSAppointmentImageCard,
             oCImageCardModel = OCOVSAppointmentModel(
                 title = "Dr. med. Wolfgang Gast",
                 doctorsSpeciality = "Hals-Nasen-Ohrenheilkunde",
                 appointmentTime = "09:10 Uhr",
                 appointmentDate = "Mittwoch, 12.12.2023",
                 photoUpload = "Bitte Fotos hochladen",
                 image = R.drawable.image_card_placeholder_image
             ),
             onClick = {
                 println("Hello I am Image Card")
             }
         )

OCFeedImageCard

OCImageCard(
         modifier = Modifier.wrapContentHeight(),
         imageCardType = OCFeedImageCard,
         oCImageCardModel = OCFeedModel(
             title = "Title",
             category = "Category",
             description = "Teasertext goes here in maximum of four lines. Cut off (after number of characters/words, when line ends?) with three dots.",
             imageResId = R.drawable.image_card_placeholder,
         ),
         onClick = {
             println("Hello I am Image Card With Multi Line")
         },
     )

OCCourseImageCardYuble

     OCImageCard(
         modifier = Modifier.wrapContentHeight(),
         imageCardType = OCCourseImageCard,
         oCImageCardModel = OCCourseModel(
             courseModel = OCCourseYubleModelItemData(
                 imageResId = R.drawable.image_card_placeholder,
                 title = "Very long Title Lorem ipsum dolor sit amet at, sed diam voluptua.",
                 description = "Very long Teaser Text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat",
                 ratings = 3.5f,
                 address = arrayListOf("Address 1", "Address 2")
             )
         ),
         onClick = {
             println("Hello I am Image Card With Multi Line")
         },
     )

OCCourseImageCardQueo

     OCImageCard(
         modifier = Modifier.wrapContentHeight(),
         imageCardType = OCCourseImageCard,
         oCImageCardModel = OCCourseModel(
             courseModel = OCCourseQueoModelItemData(
                 imageResId = R.drawable.image_card_placeholder,
                 title = "Very long Title Lorem ipsum dolor sit amet at, sed diam voluptua.",
                 description = "Label",
                 address = arrayListOf("Address 1", "Address 2"),
                 date = "Date 1",
                 time = "Time"
             )
         ),
         onClick = {
             println("Hello I am Image Card With Multi Line")
         },
     )

OCCourseImageCard

        OCImageCard(
         modifier = Modifier.wrapContentHeight(),
         imageCardType = OCCourseImageCard,
         oCImageCardModel = OCCourseModel(
             courseModel = OCCourseNormalModelItemData(
                 imageResId = R.drawable.image_card_placeholder,
                 title = "Very long Title Lorem ipsum dolor sit amet at, sed diam voluptua.",
                 description = "Very long Teaser Text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat"
             )
         ),
         onClick = {
             println("Hello I am Image Card With Multi Line")
         },
     )

OCGoalsOverViewImageCard

     OCGoalsOverViewImageCard -> {
         OCImageCardGoalsOverView(
             modifier = modifier,
             oCGoalsOverviewModel = oCImageCardModel as OCGoalsOverViewModel,
             image = image,
             onClick = onClick,
         )
     }
     

Parameter:

modifier: Modifier: Modifier for styling and layout. imageCardType: OCImageCardType<T>: Type of image card user want to display. Its a generic type of OCImageCardModelConfig. Based on the type selected the oCImageCardModel gets the corresponding model. oCImageCardModel: T: Based on the card type decides which data model to be used to displayed content on the card. For example if its OVSAppointmentCard then the model is OCOVSAppointmentModel. image: (@Composable () -> Unit)? = null: User can add any composable to load the image from url or from any source rather than displaying only through drawable resource id. categoryIcon: (@Composable () -> Unit)? = null: User can add any composable to load the category icon from url or from any source rather than displaying only through drawable resource id. onClick: () -> Unit = : The callback function that get triggered when clicking the image card.

Types of model that is available in image card

• OCOVSAppointmentModel:

    data class OCOVSAppointmentModel(
                @DrawableRes val image:Int,
                val title:String,
                val doctorsSpeciality:String,
                val appointmentTime:String,
                val appointmentDate:String,
                val photoUpload:String,
                val style: OVSAppointmentStyleModel ?= null
                ) : OCImageCardModelConfig()

Parameter: @DrawableRes val imageResId:Int = ResourcesCompat.ID_NULL: Leading Image to be displayed in the card which increases the size as the right side column size increases. By default take placeholder[R.drawable.image_card_placeholder_image] if image resource id and also the image composable is not given. It is disabled for screen readers. val title:String: Main title Text in the card mainly the doctors name will be displayed here. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 2 lines. val doctorsSpeciality:String: Sub Text in the card mainly showcasing the doctors specialization. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 2 lines. val appointmentTime:String: Doctors appointment time will be mentioned in this text. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 2 lines. val appointmentDate:String: Doctors appointment date will be mentioned in this text. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 2 lines. val photoUpload:String: This text will mention the message to upload the photo. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 2 lines. @DrawableRes val appointmentTimeIconResId: Int = ResourcesCompat.ID_NULL: Icon that the user can provide for appointment time. By default will take [R.drawable.icon_image_card_clock]. It is disabled for screen readers. @DrawableRes val appointmentDateIconResId: Int = ResourcesCompat.ID_NULL: Icon that the user can provide for appointment date. By default will take [R.drawable.icon_image_card_calendar]. It is disabled for screen readers. @DrawableRes val photoUploadIconResId: Int = ResourcesCompat.ID_NULL: Icon that the user can provide for appointment date. By default will take [R.drawable.icon_image_card_camera]. It is disabled for screen readers. val style: OVSAppointmentStyleModel = OVSAppointmentStyleModel(): The text styling model for title, subtitle, and body.

• OCFeedModel:

        data class OCFeedModel(
          @DrawableRes val imageResId: Int? = null,
          val title: String,
          val category: String,
          val description: String,
          @DrawableRes val categoryIconResId: Int? = null,
          val style: FeedStyleModel? = null,
      ) : OCImageCardModelConfig()
  

Parameter: @DrawableRes val imageResId:Int = ResourcesCompat.ID_NULL: Image to be displayed in the card at the top which has fixed height and takes full width of the card. By default take placeholder[R.drawable.image_card_placeholder] if image resource id and also the image composable is not given. It is disabled for screen readers. val title:String: Main title Text in the card is given using this String. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 2 lines. val category:String: This string is used to provide the category. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 1 lines. val description:String: The descriptive text for the card is given using this string. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 4 lines. @DrawableRes val categoryIconResId: Int = ResourcesCompat.ID_NULL: Custom Leading Icon for the category that the user can provide. By default will take [R.drawable.icon_image_card_category_placeholder]. It is disabled for screen readers. val style: FeedStyleModel = FeedStyleModel(): The text styling model for title, category, and description.

OCMagazineCard

OCImageCard(
         modifier = Modifier.wrapContentHeight(),
         imageCardType = OCGoalsOverviewImageCard,
         oCImageCardModel = OCGoalsOverviewModel(
             title = "Title",
             unionButtonTitle = "Bonuspunkte",
         ),
         image = {
             Image(
                 painter = painterResource(id = R.drawable.image_card_placeholder),
                 contentDescription = null,
                 contentScale = ContentScale.Crop,
             )
         },
         onClick = {
             println("Hello I am Image Card With Multi Line")
         },
     )

Parameter:

modifier: Modifier: Modifier for styling and layout. imageCardType: OCImageCardType<T>: Type of image card user want to display. Its a generic type of OCImageCardModelConfig. Based on the type selected the oCImageCardModel gets the corresponding model. oCImageCardModel: T: Based on the card type decides which data model to be used to displayed content on the card. For example if its OVSAppointmentCard then the model is OCOVSAppointmentModel. image: (@Composable () -> Unit)? = null: User can add any composable to load the image from url or from any source rather than displaying only through drawable resource id. onClick: () -> Unit = : The callback function that get triggered when clicking the image card.

Types of model that is available in Magazine Card

• OCMagazineModel:

    data class OCMagazineModel(
  @DrawableRes val imageResId: Int = ResourcesCompat.ID_NULL,
  val title: String,
  val description: String,
  val style: MagazineCardTextStyleModel = MagazineCardTextStyleModel()
  ) : OCImageCardModelConfig()  

Parameter: @DrawableRes val imageResId:Int = ResourcesCompat.ID_NULL: Image to be displayed in the card at the top which has fixed height and takes full width of the card. By default take placeholder[R.drawable.image_card_placeholder] if image resource id and also the image composable is not given. It is disabled for screen readers. val title:String: Main title Text in the card is given using this String. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 2 lines. val description:String: The descriptive text for the card is given using this string. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 4 lines. val style: MagazineCardTextStyleModel = MagazineCardTextStyleModel(): The text styling model for title and description.

OCEventCard

OCImageCard(
         modifier = Modifier.wrapContentHeight(),
         imageCardType = OCEventCard,
         oCImageCardModel = OCEventCardModel(
             title = "Title",
             description = "Teaser text goes here in maximum of four lines. Cut off (after number of characters/words, when line ends?) with three dots.",
             imageResId = R.drawable.image_card_placeholder,
             location = "Location",
             date = "Date",
         ),
         onClick = {
             println("Hello I am Magazine Card")
         },
     )

Parameter:

modifier: Modifier: Modifier for styling and layout. imageCardType: OCImageCardType<T>: Type of image card user want to display. Its a generic type of OCImageCardModelConfig. Based on the type selected the oCImageCardModel gets the corresponding model. oCImageCardModel: T: Based on the card type decides which data model to be used to displayed content on the card. For example if its EventCard then the model is OCEventCardModel. image: (@Composable () -> Unit)? = null: User can add any composable to load the image from url or from any source rather than displaying only through drawable resource id. categoryIcon: (@Composable () -> Unit)? = null: User can add any composable to load the category icon from url or from any source rather than displaying only through drawable resource id. onClick: () -> Unit = : The callback function that get triggered when clicking the image card.

• OCEventCardModel:

          data class OCEventCardModel(
    @DrawableRes val imageResId: Int = ResourcesCompat.ID_NULL,
    @DrawableRes val locationIconResId: Int = ResourcesCompat.ID_NULL,
    @DrawableRes val dateIconResId: Int = ResourcesCompat.ID_NULL,
    val location: String,
    val date: String,
    val title: String,
    val description: String,
    val style: EventCardTextStyle = EventCardTextStyle(),
    ) : OCImageCardModelConfig()

Parameter: @DrawableRes val imageResId:Int = ResourcesCompat.ID_NULL: Image to be displayed in the card at the top which has fixed height and takes full width of the card. By default take placeholder[R.drawable.image_card_placeholder] if image resource id and also the image composable is not given. It is disabled for screen readers. @DrawableRes val locationIconResId:Int = ResourcesCompat.ID_NULL: Icon to be displayed in the card with location. By default take placeholder[R.drawable.event_card_location] if image resource id is not given. @DrawableRes val locationIconResId:Int = ResourcesCompat.ID_NULL: Icon to be displayed in the card with date. By default take placeholder[R.drawable.event_card_date] if image resource id is not given. val title:String: Main title Text in the card is given using this String. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 2 lines. val location: String: Location Text in the card is given using this String. Accessibility feature for this text is enabled for screen readers. val description:String: The descriptive text for the card is given using this string. Accessibility feature for this text is enabled for screen readers and this title gets truncated after 4 lines. val style: EventCardTextStyle = EventCardTextStyle(): The text styling model for title and description.