Usage
📝 Usage #
All the components are ready to use out-of-the-box.
Yassir Theme #
YassirTheme {
Box(
modifier = Modifier
.fillMaxSize()
.padding(YassirTheme.spacing.m)
) {
Text(
text = "Hello from Yassir Theme!",
style = YassirTheme.typography.heading4,
color = YassirTheme.colors.labelNeutralDefault,
)
}
}
Accordion #
Accordion(
modifier = Modifier // optional
headingText = "Heading",
bodyText = "Body Text ".repeat(50), // optional
headerIconResId = ContentIcons.Document, // optional
customContent = { Text("Change me!") } // optional
)
- For more details visit Accordion documentation
Avatar #
- Initials Avatar
InitialsAvatar(
modifier = Modifier, // optional
name = "Foo Bar",
size = AvatarSize.Large,
isFocused = true, // optional
isElevated = true, // optional
badgeType = AvatarBadgeType.OnlineIndicatorBadge(isOnline = true), // optional
hasTwoInitials = false // optional
)
- Image Avatar
ImageAvatar(
modifier = Modifier, // optional
imageUrl = null, // optional
resourceId = R.drawable.ic_avatar, // optional
size = AvatarSize.Medium,
isFocused = false, // optional
isElevated = true, // optional
badgeType = AvatarBadgeType.VerifiedBadge, // optional
)
- Icon Avatar
IconAvatar(
size = AvatarSize.Small,
modifier = Modifier, // optional
iconRes = DrawableR.ic_user, // optional
isFocused = false, // optional
isElevated = true, // optional
badgeType = AvatarBadgeType.None, // optional
)
- For more details visit Avatars documentation
Avatar Group #
val listOfAvatars = listOf(
AvatarGroupItem(
avatarType = AvatarType.Initials, //Icon, Image, Initials variants
name = "John Doe", // optional (for Initials variant)
imageUrl = null, // optional (for Image variant)
iconRes = R.drawable.ic_avatar, // optional (for Icon variant)
imageRes = R.drawable.ic_avatar, // optional (for Image variant)
hasTwoInitials = false // optional (for Initials variant)
)
)
AvatarGroup (
modifier = Modifier,
avatars= listOfAvatars,
size = AvatarGroupSize.Medium
)
- For more details visit Avatar Group documentation
Backdrop #
Important note:
- If you´re passing a SheetState, put it in a remember block first.
- Carousel Dot State
Backdrop(
modifier = Modifier.padding(YassirTheme.spacing.spacing0_5), // optional
backDropType = BackdropType.EmptyState(
illustrationResIds = listOf(
IllustrationInfo(
R.drawable.flag_algeria_rect,
message = "Top up 1",
description = "check 1",
subtitle = "subtitle 1", //optional
), IllustrationInfo(
R.drawable.flag_uae_rect,
message = "Top up 2",
description = "check 2",
subtitle = "subtitle 2", //optional
), IllustrationInfo(
R.drawable.flag_south_africa_rect,
message = "Top up 3",
description = "check 3",
subtitle = "subtitle 3", //optional
)
),
carouselIndicatorStyle = CarouselIndicatorStyle.Dot, // optional
carouselIndicatorSize = CarouselIndicatorSize.Medium, // optional
),
backdropHeaderItem = BackdropHeaderItem(
title = "Title",
subtitle = "Subtitle",
tabsList = tabsList,
onBackClick = {},
), // optional
primaryAction = ButtonAction(
text = "Primary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
secondaryAction = ButtonAction(
text = "Secondary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
tertiaryAction = ButtonAction(
text = "Teritary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
isVisible = true, // optional
screenState = ScreenState.FullScreen, // optional
windowInsets = WindowInsets(0, 0, 0, 0), // optional
containerColor = YassirTheme.colors.surfaceNeutralHigh, // optional
isSecondaryButtonNegative = false, // optional
sheetState = SheetState(
skipPartiallyExpanded = true,
density = LocalDensity.current,
initialValue = SheetValue.Expanded
), // optional
onDismissRequest = {},
onCloseClick = null // optional
)
- Carousel Line State
Backdrop(
modiefier = Modifier.padding(YassirTheme.spacing.spacing0_5), // optional
backDropType = BackdropType.EmptyState(
illustrationResIds = listOf(
IllustrationInfo(
R.drawable.flag_algeria_rect,
message = "Top up 1",
description = "check 1"
), IllustrationInfo(
R.drawable.flag_uae_rect,
message = "Top up 2",
description = "check 2"
), IllustrationInfo(
R.drawable.flag_south_africa_rect,
message = "Top up 3",
description = "check 3",
)
),
carouselIndicatorStyle = CarouselIndicatorStyle.Line, // optional
carouselIndicatorSize = CarouselIndicatorSize.Medium, // optional
),
backdropHeaderItem = BackdropHeaderItem(
title = "Title",
subtitle = "Subtitle",
tabsList = tabsList,
onBackClick = {},
), // optional
primaryAction = Action(
text = "Primary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
secondaryAction = Action(
text = "Secondary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
tertiaryAction = Action(
text = "Teritary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
isVisible = true, // optional
screenState = ScreenState.FullScreen, // optional
windowInsets = WindowInsets(0, 0, 0, 0), // optional
containerColor = YassirTheme.colors.surfaceNeutralHigh, // optional
sheetState = SheetState(
skipPartiallyExpanded = true,
density = LocalDensity.current,
initialValue = SheetValue.Expanded
), // optional
onDismissRequest = { }
)
- Single Illustration State
Backdrop(
modiefier = Modifier.padding(YassirTheme.spacing.spacing0_5), // optional
backDropType = BackdropType.EmptyState(
illustrationResIds = IllustrationInfo(
R.drawable.flag_algeria_rect,
message = "Top up 1",
description = "check 1"
)
),
backdropHeaderItem = BackdropHeaderItem(
title = "Title",
subtitle = "Subtitle",
tabsList = tabsList,
onBackClick = {},
), // optional
primaryAction = Action(
text = "Primary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
secondaryAction = Action(
text = "Secondary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
tertiaryAction = Action(
text = "Teritary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
isVisible = true, // optional
screenState = ScreenState.FullScreen, // optional
windowInsets = WindowInsets(0, 0, 0, 0), // optional
containerColor = YassirTheme.colors.surfaceNeutralHigh, // optional
sheetState = SheetState(
skipPartiallyExpanded = true,
density = LocalDensity.current,
initialValue = SheetValue.Expanded
), // optional
onDismissRequest = { }
)
- CustomState State Important note:
- If you´re using a custom state, add a
requiredHeight, if you want to set a custom height for your custom content, Otherwise, it will default to a height of 1/3 of the screen´s size.
val incrementButton = BackdropIncrementButton(
modifier = Modifier, //optional
enabled = true, //optional
isLoading = false, //optional
defaultValue = 1, //optional
minValue = 1, //optional
maxValue = 5,
onValueChanged = {newValue -> }
)
Backdrop(
modiefier = Modifier.padding(YassirTheme.spacing.spacing0_5), // optional
backDropType = BackdropType.CustomState(
isElevatedFooter = false,
requiredHeight = 600.dp,
customContent = {
// create custom component
},
incrementButton = incrementButton, //optionl
),
backdropHeaderItem = BackdropHeaderItem(
title = "Title",
subtitle = "Subtitle",
tabsList = tabsList,
onBackClick = {},
), // optional
primaryAction = Action(
text = "Primary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
secondaryAction = Action(
text = "Secondary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
tertiaryAction = Action(
text = "Teritary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
isVisible = true, // optional
screenState = ScreenState.FullScreen, // optional
windowInsets = WindowInsets(0, 0, 0, 0), // optional
containerColor = YassirTheme.colors.surfaceNeutralHigh, // optional
sheetState = SheetState(
skipPartiallyExpanded = true,
density = LocalDensity.current,
initialValue = SheetValue.Expanded
), // optional
onDismissRequest = { }
)
- ListItem State
Backdrop(
modiefier = Modifier.padding(YassirTheme.spacing.spacing0_5), // optional
backDropType = BackdropType.ListItemState(
items = List(50) { index ->
Element(
title = "Item Title $index",
description = "description",
formattedAmount = "1000$",
onClick = {}
)
},
showScrollbar = true // optional
),
backdropHeaderItem = BackdropHeaderItem(
title = "Title",
subtitle = "Subtitle",
tabsList = tabsList,
onBackClick = {},
), // optional
primaryAction = Action(
text = "Primary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
secondaryAction = Action(
text = "Secondary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
tertiaryAction = Action(
text = "Teritary Action",
startIconResId = null, //optional
endIconResId = null, //optional
onClick = {}
), // optional
isVisible = true, // optional
screenState = ScreenState.FullScreen, // optional
windowInsets = WindowInsets(0, 0, 0, 0), // optional
containerColor = YassirTheme.colors.surfaceNeutralHigh, // optional
sheetState = SheetState(
skipPartiallyExpanded = true,
density = LocalDensity.current,
initialValue = SheetValue.Expanded
), // optional
onDismissRequest = { }
)
- For more details visit Backdrop documentation
Badge #
Badge(
style = BadgeStyleType.Primary,
badgeText = "1", // optional
colors: YassirColorScheme = YassirTheme.colors, // optional
typography: YassirTypography = YassirTheme.typography, // optional
)
- For more details visit Badge documentation
Banner #
- Boxed Banner
Banner(
bannerType = BannerType.Boxed(
label = "Label", // optional
bodyText = "This is the subtitle text of banner.", // optional
style = BoxedBannerState.Default,
captionText = "This is the caption text of banner", // optional
captionIconRes = R.drawable.ic_alert_circle, // optional
leadingIconRes = R.drawable.ic_alert_circle, // optional
trailingIconRes = R.drawable.ic_small_x, // optional
isElevated = false, // optional
primaryBannerAction =
BannerAction(
text = "Primary Action",
isEnabled = false, // optional
onClick = { /* action */ }
), // optional
secondaryBannerAction =
BannerAction(
text = "Secondary action",
isEnabled = false, // optional
onClick = { /* action */ },
)
), // optional
trailingIconOnClick = { /* action */ },
isAnimating = false, // optional
)
- FulWidth Banner
Banner(
bannerType = BannerType.FullWidth(
text = "This is the text of banner",
style = FullWidthBannerState.Positive,
iconRes = R.drawable.ic_alert_circle, // optional
isElevated = true // optional
)
)
- For more details visit Banner documentation
Bottom Navigation Bar #
val bottomNavigationBarList = listOf(
BottomNavigationBarItem(
text = "Tab", //optional (make sure if you don´t pass this, you need to pass textResId)
iconRes = R.drawable.ic_alert_circle,
onClick = { /* action */ },
badgeType = null, //optional: default value is null
),
BottomNavigationBarItem(
textResId = R.string.tab_string, //optional (make sure if you don´t pass this, you need to pass text)
iconRes = R.drawable.ic_lock,
onClick = { /* action */ },
badgeType = BadgeType.TextBadge("3"),
),
BottomNavigationBarItem(
text = "Tab", //optional (make sure if you don´t pass this, you need to pass textResId)
iconRes = R.drawable.ic_coins_hand,
onClick = { /* action */ },
badgeType = BadgeType.DotBadge,
)
)
BottomNavigationBar(
list = bottomNavigationBarList,
selectedItemIndex = 1, // optional
onItemSelected = { }
)
- For more details visit Bottom Navigation Bar documentation
Buttons #
- Floating Action Button
PrimaryFloatingActionButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle,
enabled = true, // optional
label = "label", // optional
loading = true, // optional
elevationStyle = null, // optional
shadowPosition = ShadowPosition.Top, // optional
contentDescription = "content_description", // optional
)
SecondaryFloatingActionButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle,
enabled = true, // optional
label = "label", // optional
loading = true, // optional
elevationStyle = null, // optional
shadowPosition = ShadowPosition.Bottom, // optional
contentDescription = "content_description", // optional
)
TextualFloatingActionButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle,
enabled = true, // optional
label = "label", // optional
loading = true, // optional
elevationStyle = null, // optional
shadowPosition = ShadowPosition.Top, // optional
contentDescription = "content_description", // optional
)
BrandedFloatingActionButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle,
enabled = true, // optional
label = "label", // optional
loading = true, // optional
elevationStyle = null, // optional
shadowPosition = ShadowPosition.Top, // optional
contentDescription = "content_description", // optional
)
NegativeFloatingActionButton(
modifier = modifier, // optional
onClick = {},
iconResId = DrawableR.ic_alert_circle,
enabled = true, // optional
label = "label", // optional
loading = true, // optional
elevationStyle = null, // optional
shadowPosition = ShadowPosition.Bottom, // optional
contentDescription = "content_description", // optional
)
For more details visit Floating Action Buttons documentation
- Icon Buttons
IconButton(
type = ButtonType.Primary,
onClick = {},
iconResId = DrawableR.ic_ds_alert_circle, // optional
enabled = true, // optional
isShadowOnTop = true, // optional
elevationStyle = null, // optional
size = YassirButtonSize.Small, // optional
badgeProperties = BadgeProperties(
badgeText = "3",
badgeStyleType = BadgeStyleType.Primary
), // optional
textualIconButtonProperties = TextualIconButtonProperties(
iconTintOverride = YassirColorSchemeKeySurfaceNeutralDefault
), // optional
)
For more details visit Icon Buttons documentation
- Static Increment Button
DefaultIncrementButton(
modifier = modifier, // optional
enabled = areButtonsEnabled, // optional
showNumber = false, // optional
minValue = 1, // optional
maxValue = 5, // optional
defaultValue = 1, // optional
onTrashClicked = {
Toast.makeText(context, "Trash Clicked", Toast.LENGTH_SHORT).show()
}, // optional
type = IncrementButtonType.Static(
loading = false,
trashState = false,
elevationStyle = null,
shadowPosition = ShadowPosition.Bottom,
) // pass options if needed
)
- Animated Increment Button
DefaultIncrementButton(
modifier = modifier, // optional
enabled = areButtonsEnabled, // optional
showNumber = false, // optional
minValue = 1, // optional
maxValue = 5, // optional
defaultValue = 1, // optional
onTrashClicked = {
Toast.makeText(context, "Trash Clicked", Toast.LENGTH_SHORT).show()
}, // optional
type = IncrementButtonType.Animated(
isLoading = true,
isAddOnly = false,
elevationStyle = ElevationStyle.Light1,
shadowPosition = ShadowPosition.Bottom,
) // pass options if needed
)
For more details visit Increment Buttons documentation
- Text Button
PrimaryButton(
modifier = modifier, // optional
onClick = {},
text = "text",
loading = true, // optional
expanded = true, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
endIconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
size = YassirButtonSize.Small, // optional
)
BrandedButton(
modifier = modifier, // optional
onClick = {},
text = "text",
loading = true, // optional
expanded = true, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
endIconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
size = YassirButtonSize.ExtraLarge, // optional
)
SecondaryButton(
modifier = modifier, // optional
onClick = {},
text = "text",
isElevated = true, // optional
loading = true, // optional
expanded = true, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
endIconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
size = YassirButtonSize.Large, // optional
)
TextualButton(
modifier = modifier, // optional
onClick = {},
text = "text",
loading = true, // optional
expanded = true, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
endIconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
size = YassirButtonSize.Medium, // optional
)
NegativeButton(
modifier = modifier, // optional
onClick = {},
text = "text",
loading = true, // optional
expanded = true, // optional
startIconResId = DrawableR.ic_alert_circle, // optional
endIconResId = DrawableR.ic_alert_circle, // optional
enabled = true, // optional
size = YassirButtonSize.Small, // optional
)
For more details visit Text Buttons documentation
Cards #
Activity Card #
ListItem properties for the ActivityCard
val contentProperties =
ListItemContentProperties(
title = "Title",
description = "Description", // optional
leading = LeadingElementType.Icon(
iconRes = DrawableR.ic_ds_coins_hand,
tint = YassirTheme.colors.labelNeutralDefault,
), // optional
trailing = TrailingElementType.CheckBox(
selectionState = trailingCheckBoxState,onClick = {},
), // optional
upperDescription = "upperDescription", // optional
onClickLabel = "", // optional
tagProperties = TagProperties(
text = "test tag",
tagStyle = TagStyle.Neutral,
size = YassirTagSize.Medium,
),
)
val transactionProperties =
ListItemTransactionProperties(
formattedAmount = "$ 54.00", // optional
transactionType = TransactionType.Incoming, // optional
transactionStatus = TransactionStatus.Pending, // optional
currencyHidden = true, // optional
transactionDateTime = Date(), // optional
)
val visualConfig =
ListItemVisualConfig(
size = ListItemSize.Medium, // optional
isSelected = true, // optional
isEnabled = true, // optional
showDivider = true, // optional
showOutline = true, // optional
styleOverrides = ListItemStyleOverrides(
roundedCornersSize = SpacingKey.SPACING_0, // optional
verticalPaddingKey = SpacingKey.SPACING_1, // optional
horizontalPaddingKey = SpacingKey.SPACING_1, // optional
descriptionTextColorKey = YassirColorSchemeKey.LabelNeutralDefault, // optional
titleTextColorKey = YassirColorSchemeKey.LabelPrimary, // optional
itemBackgroundColorKey = YassirColorSchemeKey.SurfaceNeutralDefault, // optional
) // optional
)
- Activity Card with Body = Text and Actions = single button
ActivityCard(
modifier = Modifier, //optional
listItem = ActivityCardListItem(
contentProperties = contentProperties,
transactionProperties = transactionProperties,
visualConfig = visualConfig,
),
body = ActivityCardBody.Text("Some Text for Preview"),
actions = ActivityCardActions.Buttons(
firstAction = ActivityAction(
label = "Action",
onClick = {},
isEnabled = true
),
) //optional
)
- Activity Card with Body = Address List and Actions = two buttons
ActivityCard(
modifier = Modifier, //optional
listItem = ActivityCardListItem(
contentProperties = contentProperties,
transactionProperties = transactionProperties,
visualConfig = visualConfig,
),
body = ActivityCardBody.AddressList(
locationsList = listOf(
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
)
),
actions = ActivityCardActions.Buttons(
firstAction = ActivityAction(
label = "Action",
onClick = {},
isEnabled = true
),
secondaryAction = ActivityAction(
label = "Action 2",
onClick = {},
isEnabled = true
),
) //optional
)
- Activity Card with Body = Address List and Actions = tag and label
ActivityCard(
modifier = Modifier, //optional
listItem = ActivityCardListItem(
contentProperties = contentProperties,
transactionProperties = transactionProperties,
visualConfig = visualConfig,
),
locale: Locale = currentLocale(), //optional
body = ActivityCardBody.AddressList(
locationsList = listOf(
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
Location(name = "Location Name", address = "Location Address"),
)
),
actions = ActivityCardActions.Tag(
labelText = "Label", //optional
tagText = "Tag Text", //optional
iconRes = DrawableR.ic_coins_hand //optional
) //optional
)
For more details visit Activity Card documentation
Horizontal Card #
- Image Aligned
HorizontalCard(
modifier = Modifier, // optional
element = HorizontalCardElement(
image = Image(
resId = R.drawable.flag_algeria_rect,
size = ImageSize.Large
), // optional
titled = Titled(
variant = TitledSectionVariant.Level4,
title = CARD_TITLE,
subtitle = CARD_SUBTITLE,
description = TEXT_ALIGNED_LAYOUT,
caption = CAPTION_TEXT
),
subElement = SubElement.PriceElement(regularPriceText = REGULAR_PRICE_TEXT), // optional
primary = ActionButton(text = BUY_NOW, onClick = {}), // optional
secondary = SecondaryAction.Button(text = ADD_TO_CART, onClick = {}), // optional
primary2 = ActionButton(text = BUY_NOW, onClick = {}), // optional
),
layoutCardType = LayoutCardType.ImageAligned // optional
)
- Text Aligned
HorizontalCard(
modifier = Modifier, // optional
element = HorizontalCardElement(
image = Image(
resId = R.drawable.flag_algeria_rect,
size = ImageSize.Large
), // optional
titled = Titled(
variant = TitledSectionVariant.Level4,
title = CARD_TITLE,
subtitle = CARD_SUBTITLE,
description = TEXT_ALIGNED_LAYOUT,
caption = CAPTION_TEXT
),
subElement = SubElement.PriceElement(regularPriceText = REGULAR_PRICE_TEXT), // optional
primary = ActionButton(text = BUY_NOW, onClick = {}), // optional
secondary = SecondaryAction.Button(text = ADD_TO_CART, onClick = {}) // optional
primary2 = ActionButton(text = BUY_NOW, onClick = {}), // optional
),
layoutCardType = LayoutCardType.TextAligned // optional
)
- For more details visit Horizontal Card documentation
Shop Card #
@Composable
fun ShopCardExample() {
ShopCard(
shopCardDetails = shopCardDetails,
isEnabled = true
)
}
fun getShopCardDetails() {
val hasYassirSideElement = false
val shopCardDetails = ShopCardDetails(
text = "Title",
sideElement = if (hasYassirSideElement) {
SideElement.YassirLogo
} else if (hasNewTag) {
SideElement.SefarTag(text = "New")
} else {
SideElement.IconWithLabel(
iconResId = DrawableR.ic_ds_plus_circle,
iconLabel = "1",
)
},
imageUrl = null, // optional
imageResId = DrawableR.flag_morocco_rect, // optional
leadingElementType = LeadingElementType.ImageAvatar(resourceId = R.drawable.ic_avatar), // optional
desc = "Body", // optional
primaryTag = TagDetails(
text = "Free delivery",
startIconResId = R.drawable.ic_map_mark,
tagStyle = TagStyle.Positive,
isAlternative = false,
).takeIf { hasTags },
secondaryTag = TagDetails(
text = "Discount",
startIconResId = R.drawable.ic_map_mark
), // optional
tagsAlignment = if (verticalTags) TagsAlignment.VERTICAL else TagsAlignment.HORIZONTAL, // optional
disabledTag = TagDetails(
text = "Coming Soon",
startIconResId = R.drawable.ic_map_mark
), // optional
iconButton = IconButtonDetails(
iconResId = MapsIcons.Bus,
contentDescription = null,
) // optional
)
}
For more details visit Shop Card documentation
Vertical Card #
- Default Card
val image = Image(
resId = R.drawable.ic_avatar,
isEnable = isImageEnable, //optional
)
val defaultType = VerticalCardType.Default(
price = "100$", //optional
incrementButton = SecondaryAction.IncrementButton(), //optional
)
VerticalCard(
modifier = Modifier, //optional
image = image,
title = "Card title",
type = defaultType,
size = VerticalCardSize.Large
)
- Discount Card
val image = Image(
resId = R.drawable.ic_avatar,
isEnable = isImageEnable, //optional
)
val tag =
SubElement.TagElement(
text = TAG_TEXT_NEW,
isElevated = true,
startIconResId = DrawableR.ic_ds_user,
)
val discountType = VerticalCardType.Discount(
price = "100$", //optional
incrementButton = SecondaryAction.IncrementButton(), //optional
priceAfterDiscount = "80$",
tag = tag, //optional
)
VerticalCard(
modifier = Modifier, //optional
image = image,
title = "Card title",
type = discountType,
size = VerticalCardSize.Large
)
- For more details visit Vertical Card documentation
Charts #
Bar Chart #
- Categorical Bar Chart
BarChart(
modifier = Modifier.padding(YassirTheme.spacing.spacing2), //optional
xAxisValues = getSampleCategoricalXAxisValues(),
yAxisValues = getSampleNumericYAxisValues(),
datasets = getSampleCategoricalBarChartDatasets(),
showGridLines = true, //optional
shouldRotateXAxisLabels = false, //optional
)
private fun getSampleCategoricalXAxisValues() =
listOf("Jan", "Feb").map { XAxisValue.Categorical(it) }
private fun getSampleNumericYAxisValues() = (0..7).map { YAxisValue.Numeric(it * 10f) }
private fun getSampleCategoricalBarChartDatasets(): List<Dataset> {
val categories = listOf("Jan", "Feb")
val yValues = listOf(2f, 4f, 6f)
val dataPoints1 = categories.mapIndexed { index, category ->
DataPoint(
x = XAxisValue.Categorical(category),
y = YAxisValue.Numeric(yValues[index % yValues.size]),
)
}
val dataPoints2 = categories.mapIndexed { index, category ->
DataPoint(
x = XAxisValue.Categorical(category),
y = YAxisValue.Numeric(yValues.reversed()[index % yValues.size]),
)
}
val dataset1 = Dataset(points = dataPoints1, label = "Dataset 1")
val dataset2 = Dataset(points = dataPoints2, label = "Dataset 2")
return listOf(dataset1, dataset2)
}
- Numerical Bar Chart
BarChart(
modifier = Modifier.padding(YassirTheme.spacing.spacing2), //optional
xAxisValues = getSampleNumericXAxisValues(),
yAxisValues = getSampleNumericYAxisValues(),
datasets = getSampleBarChartDatasets(),
showGridLines = true, //optional
shouldRotateXAxisLabels = false, //optional
)
private fun getSampleNumericXAxisValues() = (1..7).map { XAxisValue.Numeric(it.toFloat()) }
private fun getSampleNumericYAxisValues() = (0..7).map { YAxisValue.Numeric(it * 10f) }
private fun getSampleBarChartDatasets(): List<Dataset> {
val dataset1Points =
(1..7).map {
DataPoint(
x = XAxisValue.Numeric(it.toFloat()),
y = YAxisValue.Numeric((it * 10f).toFloat()),
)
}
val dataset2Points =
(1..7).map {
DataPoint(
x = XAxisValue.Numeric(it.toFloat()),
y = YAxisValue.Numeric(((8 - it) * 10f).toFloat()),
)
}
val dataset1 = Dataset(points = dataset1Points, label = "Dataset 1")
val dataset2 = Dataset(points = dataset2Points, label = "Dataset 2")
return listOf(dataset1, dataset2)
}
For more details visit Bar Chart documentation
Line Chart #
- Categorical Line Chart
LineChart(
xAxisValues = getSampleCategoricalXAxisValues(),
yAxisValues = getSampleNumericYAxisValues(),
datasets = getSampleCategoricalDatasets(),
shouldShadeArea = true,
modifier = Modifier.padding(YassirTheme.spacing.spacing1), //optional
shouldRotateXAxisLabels = true, //optional
showGridLines = true, //optional
)
private fun getSampleCategoricalXAxisValues() = listOf("January", "February", "March", "April", "May", "June", "July").map { XAxisValue.Categorical(it) }
private fun getSampleNumericYAxisValues() =
(1..7).map { y ->
YAxisValue.Numeric(
value = (y * 10f),
suffix = "k", //optional
showAsInteger = true) //optional
}
private fun getSampleCategoricalDatasets(): List<Dataset> {
val xCategories = listOf("January", "February", "March", "April", "May", "June", "July")
val staticYValues = listOf(
listOf(2f, -10f, 6f, 50f, 4f, 0.1f, 1f),
listOf(4f, 5f, 6f, 7f, 6f, 5f, 4f),
listOf(1f, 2f, 3f, 4f, 5f, 6f, 7f),
listOf(6f, 6f, 5f, 4f, 3f, 2f, 1f),
listOf(5f, 6f, 7f, 6f, 5f, 4f, 3f),
listOf(3f, 4f, 5f, 6f, 7f, 6f, 5f),
listOf(7f, 6f, 5f, 4f, 3f, 2f, 1f),
listOf(2f, 3f, 4f, 5f, 6f, 7f, 6f),
)
return staticYValues.mapIndexed { index, yValues ->
val points =
xCategories.zip(yValues).map { (x, y) ->
DataPoint(XAxisValue.Categorical(x), YAxisValue.Numeric(y*10))
}
val label = "Dataset ${index + 1}"
Dataset(points = points, label = label)
}
}
- Numerical Line Chart
LineChart(
xAxisValues = getSampleNumericXAxisValues(),
yAxisValues = getSampleNumericYAxisValues(),
datasets = getSampleNumericDatasets(),
shouldShadeArea = false,
modifier = Modifier.padding(YassirTheme.spacing.spacing1), //optional
shouldRotateXAxisLabels = false, //optional
showGridLines = false, //optional
)
private fun getSampleNumericXAxisValues() =
(1..7).map {
x -> XAxisValue.Numeric(
value = x.toFloat(),
showAsInteger = true) //optional
}
private fun getSampleNumericYAxisValues() =
(1..7).map { y ->
YAxisValue.Numeric(
value = (y * 10f),
suffix = "k", //optional
showAsInteger = true) //optional
}
private fun getSampleNumericDatasets(): List<Dataset> {
val staticYValues = listOf(
listOf(10f, 2f, 30f, 40f, 50f, 60f, 78f), //78 is intentionally added to represent data outside the grid
listOf(12f, 28f, 20f, 33f, 35f, 44f, 51f),
listOf(-25f, 2f, 5f, 43f, 55f, 57f, 65f), //-25 is intentionally added to represent data outside the grid
listOf(10f, 20f, 15f, 25f, 30f, 35f, 45f),
listOf(30f, 45f, 35f, 50f, 40f, 55f, 65f),
listOf(20f, 30f, 25f, 35f, 40f, 50f, 60f),
listOf(25f, 35f, 30f, 40f, 45f, 55f, 65f),
listOf(15f, 25f, 20f, 30f, 35f, 45f, 55f)
)
val xValues = (1..7).map { it.toFloat() }
return staticYValues.mapIndexed { index, yValues ->
val points = xValues.zip(yValues).map { (x, y) ->
DataPoint(XAxisValue.Numeric(x), YAxisValue.Numeric(y))
}
val label = "Dataset ${index + 1}"
Dataset(points = points, label = label)
}
}
For more details visit Line Chart documentation
Pie Chart #
- Full Pie Chart
val chartSlices = List(4) { index ->
PieSlice(
label = "Slice ${index + 1}",
value = (index + 1) * 5f,
)
}
PieChart(
slices = chartSlices,
type = PieChartType.Full(showLabels = false),
onSliceClick = { index ->
Toast.makeText(context, "selectedIndex :$index", Toast.LENGTH_SHORT).show()
},
)
- Thick Pie Chart
val chartSlices = List(4) { index ->
PieSlice(
label = "Slice ${index + 1}",
value = (index + 1) * 5f,
)
}
PieChart(
slices = chartSlices,
type = PieChartType.Thick(showLabels = true),
onSliceClick = { index ->
Toast.makeText(context, "selectedIndex :$index", Toast.LENGTH_SHORT).show()
},
)
- Thin Pie Chart
val chartSlices = List(4) { index ->
PieSlice(
label = "Slice ${index + 1}",
value = (index + 1) * 5f,
)
}
PieChart(
slices = chartSlices,
type = PieChartType.Thin(showLabels = true, showValues = true),
onSliceClick = { index ->
Toast.makeText(context, "selectedIndex :$index", Toast.LENGTH_SHORT).show()
},
)
For more details visit Pie Chart documentation
Chips #
- Plain Single Chip with no Leading Element
SingleChip(
modifier = Modifier.align(Alignment.CenterHorizontally), // optional
size = YassirChipSize.Large,
chipItem = ChipItem.Plain(
text = text,
counterValue = 50, // optional
isEnabled = isEnabled, // optional
isSelected = isSelected, // optional
),
onClick = { isSelected = isSelected.not() }, // optional
onClearIconClick = if (hasClearIcon) {
null
} else {
{ isCleared = true }
}, // optional
shape = RoundedCornerShape(size = YassirTheme.spacing.spacing0_75) // optional
)
- Single Chip with Icon as Leading Element
SingleChip(
modifier = Modifier.align(Alignment.CenterHorizontally), // optional
size = YassirChipSize.Small,
chipItem = ChipItem.Icon(
text = text,
iconResourceId = DrawableR.ic_coins_hand,
counterValue = null, // optional
isEnabled = isEnabled, // optional
isSelected = isSelected, // optional
),
onClick = { isSelected = isSelected.not() }, // optional
onClearIconClick = if (hasClearIcon) {
null
} else {
{ isCleared = true }
}, // optional
shape = RoundedCornerShape(size = YassirTheme.spacing.spacing0_75) // optional
)
- Single Chip with Image Avatar as Leading Element
SingleChip(
modifier = Modifier.align(Alignment.CenterHorizontally), // optional
size = YassirChipSize.Small,
chipItem = ChipItem.ImageAvatar(
text = text,
imageUrl = "", // optional
counterValue = 50, // optional
isEnabled = isEnabled, // optional
isSelected = isSelected, // optional
),
onClick = { isSelected = isSelected.not() }, // optional
onClearIconClick = if (hasClearIcon) {
null
} else {
{ isCleared = true }
}, // optional
shape = RoundedCornerShape(size = YassirTheme.spacing.spacing0_75) // optional
)
- Chip Filter
val listOfChips = (1..7).forEach {
add(
ChipItem.ImageAvatar(
text = text,
imageUrl = "", // optional
counterValue = 50, // optional
isEnabled = isEnabled, // optional
isSelected = isSelected, // optional
)
)
}
ChipFilter(
modifier = Modifier.align(Alignment.CenterHorizontally), // optional
chipElements = listOfChips,
size = chipSelectedSize,
allowMultipleSelection = allowMultipleSelection, // optional
allowHorizontalScrolling = allowHorizontalScrolling, // optional,
shape = RoundedCornerShape(size = YassirTheme.spacing.spacing0_75), // optional
onElementClick = { chipItem -> } // optional
)
- Chip Group
val listOfChips = (1..7).forEach {
add(
ChipItem.Plain(
text = text,
counterValue = 50, // optional
isEnabled = isEnabled, // optional
isSelected = isSelected, // optional
)
)
}
ChipGroup(
modifier = Modifier.align(Alignment.CenterHorizontally), // optional
chipElements = listOfChips,
size = YassirChipSize.Small,
onElementClick = { chipItem -> } // optional
)
- For more details visit Chips documentation
CountDown #
CountDown(
modifier = Modifier,
totalTime = 500_000_000L, // in milisecconds
timeLeft = 2_000_000L, // in milisecconds
format = CountDownFormat.Days, //optional
progressBarStyle = ProgressBarStyle.Default, //optional
isInCoolDown= false, //optional
)
- For more details visit CountDown documentation
Date & Time Pickers #
Date Picker #
- Single Selection
val selectedDates = remember { mutableStateListOf<Date>() }
val datePickerProperties = DatePickerProperties(
primaryAction = ButtonAction(
text = "Primary Action",
onClick = {
Toast.makeText(context,"Primary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
secondaryAction = ButtonAction(
text = "Secondary Action",
onClick = {
Toast.makeText(context,"Secondary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
startDayOfWeek = Weekday.SUNDAY,
startDayOfWeekend = Weekday.FRIDAY,
calendarStart = CalendarDay(day = 13, month = Calendar.JANUARY, year = 2022), //day is optional
calendarEnd = CalendarDay(day = 20, month = Calendar.DECEMBER, year = 2026), //day is optional
selectCalendarMonth = CalendarMonth(month = Calendar.OCTOBER, year = 2024), // optional
yearDialogTitle = ¨Year¨, // optional
monthDialogTitle = ¨Month¨, // optional
)
DatePicker(
modifier = Modifier,
selectionMode = DateSelectionMode.Single(
isScrollable = false,
isTodayMarked = true,
timeSelectionProperties = TimePickerProperties() // optional if you want time picker to pop up as well after date selection
),
properties = datePickerProperties,
selectedDates = selectedDates, // optional
updateDateSelection = {
selectedDates.clear()
selectedDates.addAll(it)
},
onDismissRequest = {}
)
- Single Selection - Scrollable
val selectedDates = remember { mutableStateListOf<Date>() }
val datePickerProperties = DatePickerProperties(
primaryAction = ButtonAction(
text = "Primary Action",
onClick = {
Toast.makeText(context,"Primary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
secondaryAction = ButtonAction(
text = "Secondary Action",
onClick = {
Toast.makeText(context,"Secondary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
startDayOfWeek = Weekday.SUNDAY,
startDayOfWeekend = Weekday.FRIDAY,
calendarStart = CalendarDay(day = 13, month = Calendar.JANUARY, year = 2022), //day is optional
calendarEnd = CalendarDay(day = 20, month = Calendar.DECEMBER, year = 2026), //day is optional
selectCalendarMonth = CalendarMonth(month = Calendar.OCTOBER, year = 2024), // optional
yearDialogTitle = ¨Year¨, // optional
monthDialogTitle = ¨Month¨, // optional
)
DatePicker(
modifier = Modifier,
selectionMode = DateSelectionMode.Single(
isScrollable = true,
isTodayMarked = true,
timeSelectionProperties = TimePickerProperties() // optional if you want time picker to pop up as well after date selection
),
properties = datePickerProperties,
selectedDates = selectedDates // optional,
updateDateSelection = {
selectedDates.clear()
selectedDates.addAll(it)
},
onDismissRequest = {}
)
- Range Seclection
val selectedDates = remember { mutableStateListOf<Date>() }
val datePickerProperties = DatePickerProperties(
primaryAction = ButtonAction(
text = "Primary Action",
onClick = {
Toast.makeText(context,"Primary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
secondaryAction = ButtonAction(
text = "Secondary Action",
onClick = {
Toast.makeText(context,"Secondary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
startDayOfWeek = Weekday.SUNDAY,
startDayOfWeekend = Weekday.FRIDAY,
calendarStart = CalendarDay(day = 13, month = Calendar.JANUARY, year = 2022), //day is optional
calendarEnd = CalendarDay(day = 20, month = Calendar.DECEMBER, year = 2026), //day is optional
selectCalendarMonth = CalendarMonth(month = Calendar.OCTOBER, year = 2024), // optional
yearDialogTitle = ¨Year¨, // optional
monthDialogTitle = ¨Month¨, // optional
)
DatePicker(
modifier = Modifier,
selectionMode = DateSelectionMode.Range(isScrollable = false, isTodayMarked = false),
properties = datePickerProperties,
selectedDates = selectedDates, // optional
updateDateSelection = {
selectedDates.clear()
selectedDates.addAll(it)
},
onDismissRequest = {}
)
- Range Seclection - Scrollable
val selectedDates = remember { mutableStateListOf<Date>() }
val datePickerProperties = DatePickerProperties(
primaryAction = ButtonAction(
text = "Primary Action",
onClick = {
Toast.makeText(context,"Primary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
secondaryAction = ButtonAction(
text = "Secondary Action",
onClick = {
Toast.makeText(context,"Secondary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
startDayOfWeek = Weekday.SUNDAY,
startDayOfWeekend = Weekday.FRIDAY,
calendarStart = CalendarDay(day = 13, month = Calendar.JANUARY, year = 2022), //day is optional
calendarEnd = CalendarDay(day = 20, month = Calendar.DECEMBER, year = 2026), //day is optional
selectCalendarMonth = CalendarMonth(month = Calendar.OCTOBER, year = 2024), // optional
yearDialogTitle = ¨Year¨, // optional
monthDialogTitle = ¨Month¨, // optional
)
DatePicker(
modifier = Modifier,
selectionMode = DateSelectionMode.Range(isScrollable = true, isTodayMarked = false),
properties = datePickerProperties,
selectedDates = selectedDates, // optional
updateDateSelection = {
selectedDates.clear()
selectedDates.addAll(it)
},
onDismissRequest = {}
)
- Multiple Dates Seclection
val selectedDates = remember { mutableStateListOf<Date>() }
val datePickerProperties = DatePickerProperties(
primaryAction = ButtonAction(
text = "Primary Action",
onClick = {
Toast.makeText(context,"Primary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
secondaryAction = ButtonAction(
text = "Secondary Action",
onClick = {
Toast.makeText(context,"Secondary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
startDayOfWeek = Weekday.SUNDAY,
startDayOfWeekend = Weekday.FRIDAY,
calendarStart = CalendarDay(day = 13, month = Calendar.JANUARY, year = 2022), //day is optional
calendarEnd = CalendarDay(day = 20, month = Calendar.DECEMBER, year = 2026), //day is optional
selectCalendarMonth = CalendarMonth(month = Calendar.OCTOBER, year = 2024), // optional
yearDialogTitle = ¨Year¨, // optional
monthDialogTitle = ¨Month¨, // optional
)
DatePicker(
modifier = Modifier,
selectionMode = DateSelectionMode.Multiple(isTodayMarked = false, showSelectionChips = false),
properties = datePickerProperties,
selectedDates = selectedDates, // optional
updateDateSelection = {
selectedDates.clear()
selectedDates.addAll(it)
},
onDismissRequest = {}
)
- Multiple Dates Seclection - With Selection Chips
val selectedDates = remember { mutableStateListOf<Date>() }
val datePickerProperties = DatePickerProperties(
primaryAction = ButtonAction(
text = "Primary Action",
onClick = {
Toast.makeText(context,"Primary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
secondaryAction = ButtonAction(
text = "Secondary Action",
onClick = {
Toast.makeText(context,"Secondary Action Clicked",Toast.LENGTH_SHORT).show()
}
),
startDayOfWeek = Weekday.SUNDAY,
startDayOfWeekend = Weekday.FRIDAY,
calendarStart = CalendarDay(day = 13, month = Calendar.JANUARY, year = 2022), //day is optional
calendarEnd = CalendarDay(day = 20, month = Calendar.DECEMBER, year = 2026), //day is optional
selectCalendarMonth = CalendarMonth(month = Calendar.OCTOBER, year = 2024), // optional
yearDialogTitle = ¨Year¨, // optional
monthDialogTitle = ¨Month¨, // optional
)
DatePicker(
modifier = Modifier,
selectionMode = DateSelectionMode.Multiple(isTodayMarked = true, showSelectionChips = true),
properties = datePickerProperties,
selectedDates = selectedDates, // optional
updateDateSelection = {
selectedDates.clear()
selectedDates.addAll(it)
},
onDismissRequest = {}
)
- For more details visit Date Picker documentation
Month Picker #
MonthPicker(
modifier = Modifier, // optional
startMonth = 4, // optional
endMonth = 11,
onDismissRequest = { },
selectedMonth = 10, // optional
onMonthSelected = { },
onBackIconClick = { }, // optional
)
For more details visit Month Picker documentation
Time Picker #
TimePicker(
timePickerProperties = TimePickerProperties(
timeFormat = TimeFormat.HOUR_24, // optional, default is TimeFormat.HOUR_24
minutesIncrement = TimeMinutesIncrement.ONE, // optional, default is TimeMinutesIncrement.ONE
startTime = Calendar.getInstance(), // optional, default is the current time
minTime = Calendar.getInstance().apply { // optional, default is start of the day (00:00)
set(Calendar.HOUR_OF_DAY, 0)
set(Calendar.MINUTE, 0)
set(Calendar.SECOND, 0)
set(Calendar.MILLISECOND, 0)
},
maxTime = Calendar.getInstance().apply { // optional, default is end of the day (23:59:59.999)
set(Calendar.HOUR_OF_DAY, 23)
set(Calendar.MINUTE, 59)
set(Calendar.SECOND, 59)
set(Calendar.MILLISECOND, 999)
},
titleText = "Time", // optional, default is "Time"
applyButtonText = "Apply", // optional, default is "Apply"
cancelButtonText = "Cancel", // optional, default is "Cancel"
onSnappedTime = { snappedTime, timeFormat -> /* Handle snapped time here */ }, // optional, default is an empty function
),
onDismissRequest = { /* Handle dismiss request here */ }, // required, no default
onApplyButtonClick = { selectedTime -> /* Handle apply action here */ }, // required, no default
onCancelButtonClick = { /* Handle cancel action here */ } // required, no default
onBackIconClick = { }, // optional
)
For more details visit Time Picker documentation
Year Picker #
YearPicker(
modifier = Modifier,// optional
startYear = 2000, // optional
endYear = 2066,
onDismissRequest = { },
selectedYear = 2024, // optional
onYearSelected = { },
onBackIconClick = { }, // optional
)
For more details visit Year Picker documentation
Divider #
- Simple Default
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Simple.Default,
orientation = Orientation.Horizontal,
)
- Simple Left Aligned
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Simple.LeftAligned,
orientation = Orientation.Horizontal
)
- Simple Right Aligned
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Simple.RightAligned,
orientation = Orientation.Horizontal
)
- Simple Horizontally Aligned
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Simple.HorizontalAligned,
orientation = Orientation.Horizontal
)
- Doubled
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Doubled,
orientation = Orientation.Horizontal
)
- Thick
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Thick,
orientation = Orientation.Horizontal
)
- Dotted
Divider(
modifier = Modifier.background(color = YassirTheme.colors.outlineLowAlternative), // optional
dividerType = DividerType.Dotted,
orientation = Orientation.Horizontal
)
- For more details visit Divider documentation
Flags #
- Circular Flag
CircularFlag(
countryCode = "TN",
modifier = modifier, // optional
size = FlagSize.Small, // optional
contentDescription = "" // optional
)
- Rectangular Flag
RectangularFlag(
countryCode = "SA",
modifier = Modifier, // optional
size = FlagSize.Medium, // optional
contentDescription = "" // optional
)
Supported Countries #
| Country | Country Code |
|---|---|
| 🇩🇿 Algeria | DZ |
| 🇨🇦 Canada | CA |
| 🇪🇬 Egypt | EG |
| 🇪🇺 European Union | EU |
| 🇫🇷 France | FR |
| 🇩🇪 Germany | DE |
| 🇬🇧 Great Britain | GB |
| 🇮🇹 Italy | IT |
| 🇲🇦 Morocco | MA |
| 🇳🇱 Netherlands | NL |
| 🇶🇦 Qatar | QA |
| 🇸🇦 Saudi Arabia | SA |
| 🇸🇳 Senegal | SN |
| 🇿🇦 South Africa | ZA |
| 🇪🇸 Spain | ES |
| 🇹🇳 Tunisia | TN |
| 🇦🇪 United Arab Emirates | AE |
| 🇺🇸 United States | US |
- For more details visit Flags documentation
Image PlaceHolder #
- Portrait
Box {
ImagePlaceholder(
aspectRatio = AspectRatio.Square,
orientation = Orientation.Portrait,
resId = R.drawable.ic_avatar, // optional
url = null, // optional,
contentDescription = null // optional
)
}
- Landscape
Box {
ImagePlaceholder(
aspectRatio = AspectRatio.Landscape,
orientation = Orientation.Portrait,
resId = R.drawable.ic_avatar, // optional
url = null, // optional,
contentDescription = null // optional
)
}
- For more details visit Image Placeholder documentation
Input Fields #
Address Field #
- Departure Address Field
var value by remember { mutableStateOf("") }
AddressField(
modifier = Modifier.padding(top = YassirTheme.spacing.spacing1), // optional
addressFieldType = AddressFieldType.Departure(
leadingIcon = leadingAddressFieldLeadingIcon.Flag, // optional
label = "label", // optional
hint = "hint", // optional
),
enabled = true,
value = value,
errorMessage = "Field can't be empty", // optional
onValueChange = { value = it },
)
- Stop Address Field
var value by remember { mutableStateOf("") }
AddressField(
modifier = Modifier.padding(top = YassirTheme.spacing.spacing1), // optional
addressFieldType = AddressFieldType.Stop(
leadingIcon = AddressFieldLeadingIcon.MarkerPin, // optional
label = "label", // optional
hint = "hint", // optional
hasTrailingDragIcon = true, // optional
onDragStart = {}, // optional
onDrag = {}, // optional
onDragEnd = {}, // optional
onDragReposition = {}, // optional
onAddActionClick = {} // optional
),
enabled = true,
value = "",
errorMessage = "Field can't be empty", // optional
onValueChange = { value = it },
)
- Destination Address Field
var value by remember { mutableStateOf("") }
AddressField(
modifier = Modifier.padding(top = YassirTheme.spacing.spacing1), // optional
addressFieldType = AddressFieldType.Destination(
leadingIcon = AddressFieldLeadingIcon.DoubleLocationPins, // optional
label = "label", // optional
hint = "hint", // optional
hasTrailingDragIcon = true, // optional
onDragStart = {}, // optional
onDrag = {}, // optional
onDragEnd = {}, // optional
onDragReposition = {}, // optional
onAddActionClick = {} // optional
),
enabled = true,
value = "",
errorMessage = "Field can't be empty", // optional
onValueChange = { value = it },
)
- For more details visit Address Field documentation
Credit Card Input Field #
CreditCardInput(
modifier = Modifier, // optional
cardNumberFieldProperties = cardNumberFieldProperties,
expiryDateFieldProperties = expiryDateFieldProperties,
cvvFieldProperties = cvvFieldProperties,
enabled = true, // optional
)
val cardNumberFieldProperties =
CardNumberFieldProperties(
cardNumberValue = "",
onCardNumberChange = {newCardNumber -> },
onScannerClick = null, // Implement this lamda only if you are going to implemet the credit card scanner
cardNumberHint = null,
cardNumberFieldIsEnabled = true,
cardNumberFieldHasError = false,
)
val expiryDateFieldProperties =
ExpiryDateFieldProperties(
expiryDateValue = "",
onExpiryDateChange = {newExpiryDate -> },
expiryDateHint = null,
expiryDateFieldHasError = false,
)
val cvvFieldProperties =
CvvFieldProperties(
cvvValue = "",
onCvvChange = {newCVV -> },
)
For more details visit Credit Card Input documentation
Currency Input Field #
CurrencyInput(
modifier = Modifier.padding(horizontal = YassirTheme.spacing.spacing1_5), // optional
value = "text",
onValueChange = { },
regionCode = "DZ",
currencyCode = "DZD",
formattedBalance = "3000 DZD",
enabled = true, // optional
hasError = false, // optional
hint = AnnotatedString("This is an example hint"), // optional
onImeAction = { /* action */ }, // optional
placeholder = "0", // optional
clickableHint = "HyperLink", // optional
onHintClick = {}, // optional
imeAction = ImeAction.Default, // optional
)
For more details visit Currency Input documentation
Date Field #
DateSelectionField(
modifier = Modifier, // optional
label = "Select a date",
enabled = true,
hasError = false,
hint = "Hint",
fieldProperties = fieldProperties,
datePickerProperties = datePickerProperties,
onDateChanged = { date ->
Toast.makeText(context, "Date changed: $date", Toast.LENGTH_SHORT).show()
},
)
val datePickerProperties =
DateFieldSelectionProperties(
startDayOfWeek = Weekday.MONDAY,
startDayOfWeekend = Weekday.SATURDAY,
calendarStart = CalendarDay(day= 3, month = Calendar.JANUARY, year = 2022), //day is optional
calendarEnd = CalendarDay(day= 15,month = Calendar.DECEMBER, year = 2026), //day is optional
selectCalendarMonth = CalendarMonth(month = Calendar.JANUARY, year = 2024),
showActionButtons = showActionButtons,
)
val dateFieldProperties =
DateInputFieldProperties(
initialValue = Date(),
hasCalendarIcon = hasTrailingIcon,
)
For more details visit Date Field documentation
Date Range Field #
DateRangeSelectionField(
modifier = Modifier, // optional
label = "Select Date Range",
enabled = true,
hasError = false,
hint = "hint",
fromFieldProperties = fromFieldProperties,
toFieldProperties = toFieldProperties,
datePickerProperties = datePickerProperties,
onDateChanged = { dates ->
Toast.makeText(context, "Date range changed: $dates", Toast.LENGTH_SHORT).show()
},
)
val fromFieldProperties =
DateInputFieldProperties(
initialValue = Date().takeIf { hasInitialValue },
hasCalendarIcon = hasTrailingIcon,
)
val toFieldProperties =
DateInputFieldProperties(
initialValue =
Calendar.getInstance().apply {add(Calendar.DAY_OF_YEAR, 1)}.time.takeIf { hasInitialValue },
hasCalendarIcon = hasTrailingIcon,
)
For more details visit Date Range Field documentation
DateTime Field #
DateTimeSelectionField(
modifier = Modifier, //optional
dateTimeFieldProperties = dateTimeInputFieldProperties, //optional
timeFieldProperties = timeInputFieldProperties, //optional
dateFieldProperties = dateInputFieldProperties, //optional
timePickerProperties = timeFieldSelectionProperties, //optional
datePickerProperties = dateFieldSelectionProperties,
onDateTimeChanged: (Date?, Date?) -> Unit = { date, time -> },
)
val dateTimeInputFieldProperties =
DateTimeInputFieldProperties(
label = "DateTime Input",
enabled = true,
hasError = false,
hint = null,
)
val timeInputFieldProperties =
TimeInputFieldProperties(
initialValue = Date().takeIf { hasInitialValue },
hasClockIcon = hasTrailingIcon,
)
val dateInputFieldProperties =
DateInputFieldProperties(
initialValue = Date().takeIf { hasInitialValue },
hasCalendarIcon = hasTrailingIcon,
)
val timePickerProperties =
TimeFieldSelectionProperties(
timeFormat = TimeFormat.HOUR_24,
minutesIncrement = TimeMinutesIncrement.ONE,
startTime = Calendar.getInstance(),
fromTime = null,
toTime = null,
titleText = null,
)
val datePickerProperties =
DateFieldSelectionProperties(
startDayOfWeek = Weekday.MONDAY,
startDayOfWeekend = Weekday.SATURDAY,
calendarStart = CalendarDay(day = 13, month = Calendar.JANUARY, year = 2022), //day is optional
calendarEnd = CalendarDay(day = 20, month = Calendar.DECEMBER, year = 2026), //day is optional
selectCalendarMonth = CalendarMonth(month = Calendar.JANUARY, year = 2024),
showActionButtons = showActionButtons,
)
For more details visit DateTime Field documentation
Dropdown Field Input #
DropdownInput(
modifier = Modifier.fillMaxWidth(), // optional, default is Modifier
items = listOf(
DropdownInputItem(text = "Option 1", iconResourceId = R.drawable.ic_option1_icon),
DropdownInputItem(text = "Option 2", avatarResourceId = R.drawable.avatar_option2),
DropdownInputItem(text = "Option 3") // No icon or avatar
),
selectedItems = mutableListOf(
// Empty list for standard behavior, prefilled list for already pre-selected items being displayed
),
multiSelect = true,
onItemSelect = { selectedItem ->
// Handle item select logic here
},
onItemDeselect = { deselectedItem ->
// Handle item deselect logic here
},
onApply = {
// Handle apply button logic here
},
onClear = {
// Handle clear button logic here
},
labelText = "Select Items", // optional, default is null
dropDownText = "Choose from options", // optional, default is null
hintText = "Select one or more options from the dropdown", // optional, default is null
leadingIcon = R.drawable.ic_dropdown_icon, // optional, default is null
isError = false, // optional, default is false
errorText = "An error occurred", // optional, default is null
disabled = false, // optional, default is false
applyButtonText = "Apply Selection", // optional, default is "Apply"
clearButtonText = "Clear All" // optional, default is "Clear filter"
)
- For more details visit Dropdown Field Input documentation
Generic Input Field #
GenericInput(
label = "Email Label", // optional
value = "text",
onValueChange = { text = it },
modifier = Modifier, // optional
styleParams = InputFieldStyleParams(
showScrollBars = true, // optional
isInteractive = true, // optional
shiftTrailingComponent = false, // optional
textAlign = TextAlign.Start, // optional
maxLines = 1, // optional
fixedHeight = null, // optional
minHeight = 30.dp, // optional
maxHeight = 60.dp, // optional
labelTextStyle = TypographyKey.BodyLargeSemiBold, // optional
visualTransformation = VisualTransformation.None // optional
),
stateParams = InputFieldStateParams(
enabled = enabled, // optional
hasError = hasError, // optional
showIconOnError = true, // optional
forceLtr = true, // optional
filled = false, // optional
cursorAtEnd = false // optional
),
leading = GenericInputDefaults.EmptyWithString, // updated default
trailing = GenericInputDefaults.EmptyWithString, // updated default
placeholder = "Placeholder text", // optional
hint = "Hint text", // optional
onHintClick = {}, // optional
innerFieldStaticLeadingText = "Test", // optional
keyboardOptions = KeyboardOptions(
keyboardType = keyboardType,
imeAction = imeAction
),
keyboardActions = KeyboardActions(
onAny = { /* action */ }
)
)
For more details visit Generic Input documentation
(PIN/OTP) Code Input Fields #
//PIN Code
CodeInput(
modifier = Modifier, // optional
codeType = CodeType.PinCode,
label = "PIN Code", // optional
isError = false, // optional
isEnabled = true, // optional
clearCode = false, // optional
autoFocus = true, // optional
codeLength = CodeInputDefaults.LENGTH, // optional
spaceBetweenCodeCells = YassirTheme.spacing.spacing2, // optional
hint = AnnotatedString(hintText), // optional
onHintClick = {}, // optional
resetErrorState = {}, // optional
onCodeFilled = { code ->
/* handle entered PIN code */
},
colors = YassirTheme.colors // optional
)
//OTP Code
CodeInput(
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(top = YassirTheme.spacing.spacing4), // optional
codeType = CodeType.OtpCode(
initialCode = "456757" //optional
),
isError = false, // optional
isEnabled = true, // optional
clearCode = false, // optional
autoFocus = true, // optional
codeLength = 6, // optional
spaceBetweenCodeCells = YassirTheme.spacing.spacing1_5, // optional
hint = AnnotatedString(hintText), // optional
onHintClick = {}, // optional
resetErrorState = { isError = false }, // optional
onCodeFilled = { code ->
/* handle entered OTP code */
},
colors = YassirTheme.colors, // optional
label = "OTP Code" // optional
)
- For more details visit PIN Code Input documentation or OTP Code Input documentation
Password Input Field #
PasswordInput(
modifier = Modifier, // optional
value = "text",
label = "Password",
isNumerical = true,
enabled = true, // optional
hasError = false, // optional
placeholder = "placeholder" ,// optional
hint = "hint", // optional
onValueChange = { text = it },
onHintClick = { /* action */ }, // optional
onImeAction = { }, // optional
)
For more details visit Password Input documentation
Phone Input Field #
- with a supported countries list and supported initial country
val phoneInputConfig = PhoneInputConfig(
enabled = true,
hasError = false,
hasLabel = false,
isCountryCodeTextEnabled = true,
isCountrySelectionEnabled = true,
hint = "",
initialSelectedCountryRegionCode = SupportedCountry.Algeria.regionCode,
)
val countryPickerConfig = CountryPickerConfig(
backdropTitle = "",
searchPlaceholder = null,
hasBackdropHeaderItem = true,
backdropHintTextResId = R.string.country_backdrop_hint,
countriesBackDropList = CountryCodeListType.SupportedCounties,
onCountrySelected = null,
)
PhoneInput(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
phoneNumber = "", // optional
config = phoneInputConfig, // optional
countryPickerConfig = countryPickerConfig, // optional
onHintClick = { /* action */ },
onImeAction = { /* action */ } // optional,
onPhoneNumberChange = {phoneNumber, isValidPhoneNumber -> }, // optional
)
- with an Mixed countries list and unsupported initial country
val countryGermany = SimpleCountry(regionCode = "DE", countryName = "Germany")
val listOfCountries = listOf(
SupportedCountry.Algeria,
SupportedCountry.Egypt,
countryGermany
)
PhoneInput(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
phoneNumber = "", // optional
config = phoneInputConfig.copy(initialSelectedCountryRegionCode = countryGermany.regionCode)
countryPickerConfig = countryPickerConfig.copy(countriesBackDropList = CountryCodeListType.MixedCountries(listOfCountries)),
onHintClick = { /* action */ } // optional,
onImeAction = { /* action */ } // optional,
onPhoneNumberChange = { phoneNumber, isValid -> }, // optional
)
For more details visit Phone Input documentation
Search Input Field #
SearchInput(
label = "Search", // optional
value = "text",
onValueChange = { newValue -> },
enabled = false, // optional
modifier = modifier, // optional
placeholder = "Search", // optional
hint = "This is a hint text to help user.", // optional
inputShape = SearchInputShape.RoundCornerShape, // optional
)
- For more details visit Search Input documentation
Text Area Field #
TextAreaInput(
text = "text",
onValueChange = { },
enabled = true,
hasError = false,
label = "Label", // optional
showScrollBars = false, // optional
placeholder = stringResource(R.string.placeholder_text), // optional
hint = if (hasHint) stringResource(R.string.hint_text) // optional
)
For more details visit Text Area Input documentation
Time Input Field #
TimeSelectionField(
modifier: Modifier = Modifier, // optional
initialValue: Date? = null, // optional
enabled: Boolean = true, // optional
hasError: Boolean = false, // optional
label: String? = null, // optional
hint: String? = null, // optional
timeSelectionProperties: timeFieldSelectionProperties, // optional
onTimeChanged: (Date) -> Unit = {selectedTime -> },
)
val timeFieldSelectionProperties = TimeFieldSelectionProperties(
timeFormat = TimeFormat.HOUR_24,
minutesIncrement = TimeMinutesIncrement.ONE,
startTime = Calendar.getInstance(),
fromTime = null,
toTime = null,
titleText = null,
)
For more details visit Time Input Field documentation
Time Range Input #
TimeRangeSelectionField(
modifier: Modifier = Modifier, // optional
label: String? = null, // optional
enabled: Boolean = true, // optional
hasError: Boolean = false, // optional
hint: String? = null, // optional
fromFieldProperties: timeInputFieldProperties, // optional
toFieldProperties: timeInputFieldProperties, // optional
timePickerProperties: timeFieldSelectionProperties, // optional
onTimeChanged: (Date?,Date?) -> Unit = {fromTime,toTime -> },
)
val timeInputFieldProperties = TimeInputFieldProperties(
initialValue = null,
hasClockIcon = true,
)
For more details visit Time Range Input documentation
Lists & List Items #
Address List #
val locationsList = repeat((0 until 5).count()) {
add(
Location(
name = "Location Name", // optional
address = "Address",
tripTime = "8 min", // optional,
enabled = true // optional
)
)
}
AddressList(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
locationsList = locationsList,
notesHint = "Enter your notes to the driver here", // optional
onNotesFieldChange = { newNotes -> } // optional
)
- For more details visit Address List documentation
Checkout List Item #
CheckoutListItem(
countNumber = 2,
label = "Label",
description = "Description" // optional,
regularPriceText = "7000" // optional,
discountPriceText = "8000" // optional,
regularPriceCurrency = "DZD" // optional,
discountPriceCurrency = "DZD" // optional,
chipElements = listOf(
ChipItem(text = "Item 1", iconResourceId = DrawableR.ic_coins_hand),
ChipItem(text = "Sample Item 2", isSelected = true),
ChipItem(text = "Item 3", DrawableR.ic_coins_hand),
ChipItem(text = "Sample Item 4"),
) // optional,
)
For more details visit Checkout List Item documentation
List Item #
val contentProperties =
ListItemContentProperties(
title = "Title",
description = "Description", // optional
leading = LeadingElementType.Icon(
iconRes = DrawableR.ic_ds_coins_hand,
tint = YassirTheme.colors.labelNeutralDefault,
), // optional
trailing = TrailingElementType.CheckBox(
selectionState = trailingCheckBoxState,onClick = {},
), // optional
upperDescription = "upperDescription", // optional
onClickLabel = "", // optional
tagProperties = TagProperties(
text = "test tag",
tagStyle = TagStyle.Neutral,
size = YassirTagSize.Medium,
),
)
val transactionProperties =
ListItemTransactionProperties(
formattedAmount = "$ 54.00", // optional
transactionType = TransactionType.Incoming, // optional
transactionStatus = TransactionStatus.Pending, // optional
currencyHidden = true, // optional
transactionDateTime = Date(), // optional
)
val visualConfig =
ListItemVisualConfig(
size = ListItemSize.Medium, // optional
isSelected = true, // optional
isEnabled = true, // optional
showDivider = true, // optional
showOutline = true, // optional
useWeight = true, // optional
titleSingleLine = false, // optional
upperDescriptionSingleLine = false, // optional
descriptionSingleLine = false, // optional
styleOverrides = ListItemStyleOverrides(
roundedCornersSize = SpacingKey.SPACING_0, // optional
verticalPaddingKey = SpacingKey.SPACING_1, // optional
horizontalPaddingKey = SpacingKey.SPACING_1, // optional
descriptionTextColorKey = YassirColorSchemeKey.LabelNeutralDefault, // optional
titleTextColorKey = YassirColorSchemeKey.LabelPrimary, // optional
itemBackgroundColorKey = YassirColorSchemeKey.SurfaceNeutralDefault, // optional
) // optional
)
ListItem(
modifier = Modifier, // optional
contentProperties = contentProperties,
transactionProperties transactionProperties, // optional
visualConfig = visualConfig, // optional
locale = currentLocale(), // optional
onClick = {
Toast.makeText(context, "List Item was clicked", Toast.LENGTH_SHORT).show()
} // optional
)
- For more details visit List Item documentation
Price List #
- Primary Price List with Total Element
PriceList(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
listItems = listOf(
PriceListElement(
label = "Label",
price = "10", //optional
currency = "DZD", //optional
discountPercentage = "25" //optional
)
),
totalElement = TotalPriceListElement(
label = "Total",
price = "4000",
currency = "DZD" //optional
), // optional
type = PriceListType.Primary,
onClick = { value -> /* action */ },
)
- Icon Price List
PriceList(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
modifier = Modifier,
listItems = listOf(
PriceListElement(
label = "Label",
price = "10", //optional
currency = "DZD", //optional
iconRes = R.drawable.image, //optional
discountPercentage = "25" //optional
)
),
totalElement = null, // optional
type = PriceListType.Icon,
onClick = { value -> /* action */ },
)
- For more details visit Price List documentation
Selectors List #
Last item TextArea
var textAreaText by remember { mutableStateOf("") }
val lastItemTextArea = SelectorsListTextArea(
modifier = Modifier, //optional
enabled = true, //optional
hasError = false, //optional
text = textAreaText,
showScrollBars = false, //optional
placeholder = "", //optional
hint: String = "", //optional
onValueChange: { textAreaText = it},
)
- Selectors List with RadioButton
SelectorsList(
selectorsListLeadingElementType = SelectorsListRadioButton(
modifier = Modifier, // optional
selectedItemIndex = 0, // optional
items = listOf(
SelectorsListItemElement(
label = "Label",
priceText = "10",
currencyText = "DZD",
iconRes = R.drawable.image,
isEnabled = true // optional
isPreselected = true // optional
)
),
isGroupEnabled = isEnabled,
onItemSelection = { value -> /* action */ },
),
lastItemTextArea = lastItemTextArea, //optional
)
- Selectors List with Checkbox
SelectorsList(
selectorsListLeadingElementType = SelectorsListCheckBox(
modifier = Modifier, // optional
items = listOf(
SelectorsListItemElement(
label = "Label",
priceText = "10",
currencyText = "DZD",
iconRes = R.drawable.image,
isEnabled = true, // optional
isPreselected = true // optional
)
),
isGroupEnabled = isEnabled,
onStateChange = { checkBoxGroupState -> /* action */}, // optional
),
lastItemTextArea = lastItemTextArea, //optional
)
- For more details visit Selectors List documentation
Map Pin #
- Label type
MapPin(
mapPinType = MapPinType.Label(
caption = "caption text",
body = "body",
subtitle = "subtitle",
showIcon = true
),
mapPinDirection = MapPinDirection.Up, // optional
mapPinCardColor = MapPinCardColor.Primary // optional
)
- Avatar type
YassirMapPin(
mapPinType = MapPinType.Avatar(
imageUrl = "", // optional
resourceId = R.drawable.ic_avatar, // optional
painter = painterResource(id = R.drawable.ic_user) // optional,
),
mapPinDirection = MapPinDirection.Up, // optional
mapPinCardColor = MapPinCardColor.Primary // optional
)
- Dot type
YassirMapPin(
mapPinType = MapPinType.Dot,
mapPinDirection = MapPinDirection.Up, // optional
mapPinCardColor = MapPinCardColor.Primary // optional
)
- Icon type
YassirMapPin(
mapPinType = MapPinType.Icon.Loading,
mapPinDirection = MapPinDirection.Up, // optional
mapPinCardColor = MapPinCardColor.Primary // optional
)
- For more details visit Map Pin documentation
Modal #
- Empty State Modal
val modalType = ModalType.EmptyState(
illustrationResIds = listOf(
IllustrationInfo(
resId = DrawableR.system_verified,
message = "Title",
description = "This Is description"
),
),
isSecondaryButtonNegative = false, // optional - add as true for a negative or destructive secondary button
)
Modal(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
modalType = modalType,
onDismiss = { /* action */ },
colors = YassirTheme.colors, // optional
primaryAction = Action(
text = "Primary Action",
onClick = { /* action */ }
), // optional
secondaryAction = Action(
text = "Secondary Action",
onClick = { /* action */ }
), // optional
tertiaryAction = Action(
text = "Terniary Action",
onClick = { /* action */ }
) // optional
)
- Slot Modal
val modalType = ModalType.Slot(
slot = /* @Composable */,
isSecondaryButtonNegative = false, // optional - add as true for a negative or destructive secondary button
)
Modal(
modifier = Modifier.padding(YassirTheme.spacing.spacing3), // optional
modalType = modalType,
onDismiss = { /* action */ },
colors = YassirTheme.colors, // optional
primaryAction = Action(
text = "Primary Action",
onClick = { /* action */ }
), // optional
secondaryAction = Action(
text = "Secondary Action",
onClick = { /* action */ }
), // optional
tertiaryAction = Action(
text = "Terniary Action",
onClick = { /* action */ }
) // optional
)
- For more details visit Modal documentation
Modifiers #
HorizontalScrollbar #
@Composable
internal fun HorizontalScrollbarPreview() {
val state = rememberScrollState()
Row(
modifier = Modifier
.drawHorizontalScrollbar(state)
) {
repeat(50) {
Text(
text = (it + 1).toString(),
modifier = Modifier
.padding(YassirTheme.spacing.spacing1, vertical = YassirTheme.spacing.spacing2)
)
}
}
}
VerticalScrollbar #
@Composable
internal fun VerticalScrollbarPreview() {
val state = rememberScrollState()
Row(
modifier = Modifier
.drawVerticalScrollbar(state)
) {
repeat(50) {
Text(
text = (it + 1).toString(),
modifier = Modifier
.padding(YassirTheme.spacing.spacing2)
)
}
}
}
LazyListScrollbar - Horizontal #
@Composable
internal fun LazyListScrollbarPreview() {
val state = rememberLazyListState()
LazyColumn(
modifier = Modifier.drawHorizontalScrollbar(state),
state = state
) {
items(50) {
Text(
text = "Item ${it + 1}",
modifier = Modifier
.fillMaxWidth()
.padding(YassirTheme.spacing.spacing2)
)
}
}
}
LazyListScrollbar - Vertical #
@Composable
internal fun LazyListScrollbarPreview() {
val state = rememberLazyListState()
LazyColumn(
modifier = Modifier.drawVerticalScrollbar(state),
state = state
) {
items(50) {
Text(
text = "Item ${it + 1}",
modifier = Modifier
.fillMaxWidth()
.padding(YassirTheme.spacing.spacing2)
)
}
}
}
Shadow - elevation #
Column(
modifier = Modifier
.elevation(ElevationStyle.Light2,
shape = RoundedCornerShape(YassirTheme.spacing.spacing1),
shadowPosition = ShadowPosition.Bottom)
.background(
colors.fromToken(style.backgroundColorKey),
shape = RoundedCornerShape(YassirTheme.spacing.spacing1)
)
.padding(
horizontal = YassirTheme.spacing.spacing1_5,
vertical = YassirTheme.spacing.spacing1
)
) {}
Test Prefix #
Use the modifier extension method kotlin withTextPrefix to add your unique identifier prefix to the test tag of the component itself and all its subcomponents
Price(
modifier = Modifier.withTestPrefix("checkout_screen") // optional
regularPriceText = "6000 DZD",
discountPriceText = "7000 DZD", // optional
priceLayoutDirection = PriceLayoutDirection.Vertical, // optional
priceSize = PriceSize.Large // optional
)
- For more details visit Modifiers documentation
OptionsMenu #
var isVisible by remember { mutableStateOf(false) }
val actionsList = listOf(
OptionsMenuAction(
caption = "Donate",
icon = DrawableR.ic_ds_coins_hand,
onClick = {},
),
OptionsMenuAction(
caption = "Schedule",
icon = DrawableR.ic_ds_calendar,
onClick = {},
destructive = true,
),
OptionsMenuAction(
caption = "Delivery",
icon = DrawableR.ic_ds_delivery_nav,
enabled = false,
onClick = {},
),
)
OptionsMenu(
modifier = Modifier,
actionsList = actionsList,
isVisible = isVisible,
onDismiss = { isVisible = false },
dismissOnPressOutSide = false, // optional
)
- For more details visit OptionsMenu documentation
Price #
- Vertical Large Price
Price(
regularPriceText = "6000 DZD",
discountPriceText = "7000 DZD", // optional
priceLayoutDirection = PriceLayoutDirection.Vertical, // optional
priceSize = PriceSize.Large // optional
)
- Horizontal Small Price
Price(
regularPriceText = "6000 DZD",
discountPriceText = "7000 DZD", // optional
priceLayoutDirection = PriceLayoutDirection.Horizontal, // optional
priceSize = PriceSize.Small // optional
)
- Horizontal Large Price with no discount price
Price(
regularPriceText = "6000 DZD",
priceLayoutDirection = PriceLayoutDirection.Horizontal, // optional
priceSize = PriceSize.Large // optional
)
- For more details visit Price documentation
Profile Photo #
- Image Profile
ImageProfile(
modifier = Modifier, // optional
imageUrl = "", // optional
resourceId = R.drawable.ic_avatar, // optional
size = ProfileSize.Small,
withBorder = false, // optional
badgeType = ProfileBadgeType.VerifiedBadge, // optional
)
- Icon Profile
IconProfile(
modifier = Modifier, // optional
size = ProfileSize.Medium,
withBorder = false, // optional
badgeType = ProfileBadgeType.EditBadge(onEditClick = { }), // optional
)
- Initials Profile
InitialsProfile(
name = "Foo Bar",
modifier = Modifier, // optional
size = ProfileSize.Large,
withBorder = false, // optional
badgeType = ProfileBadgeType.None, // optional
hasTwoInitials = false, // optional
)
- For more details visit Profile Photo documentation
Progress Bar #
- Linear ProgressBar
ProgressBar(
progress = 25f,
label = "2/5",//optional
style = ProgressBarStyle.Default,//optional
type = ProgressBarType.Linear,//optional
size = ProgressBarSize.Large,//optional
)
- Circular ProgressBar
ProgressBar(
progress = 25f,
label = "2/5",//optional
style = ProgressBarStyle.Default,//optional
type = ProgressBarType.Circular,//optional
size = ProgressBarSize.Large,//optional
)
- Large ProgressBar
ProgressBar(
progress = 25f,
label = "2/5",//optional
style = ProgressBarStyle.Default,//optional
type = ProgressBarType.Linear,//optional
size = ProgressBarSize.Large,//optional
)
- Small ProgressBar
ProgressBar(
progress = 25f,
label = "25%",//optional
style = ProgressBarStyle.Default,//optional
type = ProgressBarType.Linear,//optional
size = ProgressBarSize.Small,//optional
)
- Secondary ProgressBar
ProgressBar(
progress = 25f,
label = "25%",//optional
style = ProgressBarStyle.Secondary,//optional
type = ProgressBarType.Linear,//optional
size = ProgressBarSize.Large,//optional
)
- Positive ProgressBar
ProgressBar(
progress = 25f,
label = "25%",//optional
style = ProgressBarStyle.Positive,//optional
type = ProgressBarType.Linear,//optional
size = ProgressBarSize.Large,//optional
)
- Negative ProgressBar
ProgressBar(
progress = 25f,
label = "25%",//optional
style = ProgressBarStyle.Negative,//optional
type = ProgressBarType.Linear,//optional
size = ProgressBarSize.Large,//optional
)
- Warning ProgressBar
ProgressBar(
progress = 25f,
label = "25%",//optional
style = ProgressBarStyle.Warning,//optional
type = ProgressBarType.Linear,//optional
size = ProgressBarSize.Large,//optional
)
- For more details visit ProgressBar documentation
Rating Bar #
var rating by remember { mutableFloatStateOf(0f) }
RatingBar(
modifier = Modifier.padding(16.dp), //optional
allowDoubleTap = false, //optional
rating = rating, //optional
onRatingChange = { newRating -> rating = newRating }
)
- For more details check RatingBar documentation
Scrollbar #
- LazyListState Fast Scrolling component
val numbers = (1..100).toList()
val scrollableState: LazyListState = rememberLazyListState()
val scrollbarState: ScrollbarState =
scrollableState.scrollbarState(itemsAvailable = numbers.size)
Box(modifier = Modifier.fillMaxSize()) {
LazyColumn(
modifier = Modifier.fillMaxWidth(),
state = scrollableState,
) {
items(items = numbers) { number ->
//any item
}
}
scrollableState.DraggableScrollbar(
modifier = Modifier
.windowInsetsPadding(WindowInsets.systemBars)
.padding(horizontal = 2.dp)
.align(Alignment.CenterEnd),
state = scrollbarState,
orientation = Orientation.Vertical,
onThumbMoved = scrollableState.rememberDraggableScroller(itemsAvailable = numbers.size)
)
}
- LazyListState Regular Scrolling component
val numbers = (1..100).toList()
val scrollableState: LazyListState = rememberLazyListState()
val scrollbarState: ScrollbarState =
scrollableState.scrollbarState(itemsAvailable = numbers.size)
Box(modifier = Modifier.fillMaxSize()) {
LazyColumn(
modifier = Modifier.fillMaxWidth(),
state = scrollableState,
) {
items(items = numbers) { number ->
//any item
}
}
scrollableState.DecorativeScrollbar(
modifier = Modifier
.windowInsetsPadding(WindowInsets.systemBars)
.padding(horizontal = 2.dp)
.align(Alignment.CenterEnd),
state = scrollbarState,
orientation = Orientation.Vertical
)
}
- LazyListState Modifier Scrolling
val state = rememberLazyListState()
LazyColumn(
modifier = Modifier.drawVerticalScrollbar(state),
state = state
) {
items(50) {
Text(
text = "Item ${it + 1}",
modifier = Modifier
.fillMaxWidth()
.padding(YassirTheme.spacing.spacing2)
)
}
}
- ScrollState Regular Scrolling component
val state: ScrollState = rememberScrollState()
val scrollbarState: ScrollbarState = state.scrollbarState()
Box(modifier = Modifier.fillMaxSize()) {
Column(
modifier = Modifier
.verticalScroll(state)
.fillMaxSize()
) {
repeat(100) { index ->
Text(text = "Item $index", style = YassirTheme.typography.heading1)
Spacer(modifier = Modifier.height(YassirTheme.spacing.spacing2))
}
}
state.DecorativeScrollbar(
modifier = Modifier
.windowInsetsPadding(WindowInsets.systemBars)
.padding(horizontal = 2.dp)
.align(Alignment.CenterEnd),
state = scrollbarState,
orientation = Orientation.Vertical
)
}
- ScrollState Modifier Scrolling
val state = rememberScrollState()
Column(
modifier = Modifier
.drawVerticalScrollbar(state)
) {
repeat(50) {
Text(
text = (it + 1).toString(),
modifier = Modifier
.padding(YassirTheme.spacing.spacing1, vertical = YassirTheme.spacing.spacing2)
)
}
}
- For more details visit Scrollbar documentation
Selectors #
- Checkbox and ChecboxGroup
Checkbox(
modifier = Modifier.padding(top = YassirTheme.spacing.spacing1_5), // optional
onSelectedChange = {},
title = "title", // optional
description = "description", // optional
isSelected = false, // optional
isEnabled = false // optional
)
CheckboxGroup(
modifier = Modifier, // optional
onStateChange = {checkBoxGroupState -> },
topLevelCheckbox = IndeterminateCheckboxItem(
title = "Toppings",
description = "All the toppings"
),
checkboxes = listOf(
CheckboxItem(title = "Pepperoni", description = "spicy salami seasoned with paprika"),
CheckboxItem(title = "Extra cheese", description = "extra cheese on your pizza!"),
CheckboxItem(title = "Olives", description = "delicious black olives")
),
isGroupEnabled = true // optional
)
- Radio Group
RadioGroup(
modifier = Modifier, // optional
onItemSelection = { intValue -> },
items = leadingRadioGroupList,
selectedItemIndex = 0, // optional
isGroupEnabled = true // optional
)
- For more details visit Selectors documentation
Skeleton (Shimmer Layout) #
- Circular
var isLoading by remember { mutableStateOf(false) }
val customSize = Size(width = 50F, height = 50F)
val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
Text(
modifier = Modifier.shimmerEffect(
isLoading = isLoading,
skeletonShape = SkeletonShape.Circular(
size = customSize // optional
), // optional
isRtl = isRtl
),
text = "genericText"
)
- Rectangular
var isLoading by remember { mutableStateOf(false) }
val customSize = Size(width = 50F, height = 50F)
val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
Text(
modifier = Modifier.shimmerEffect(
isLoading = isLoading,
skeletonShape = SkeletonShape.Rectangular(
rounderCornerSize = 4.dp, // optional
size = customSize // optional
), // optional
isRtl = isRtl
),
text = "genericText"
)
- List Item
var isLoading by remember { mutableStateOf(false) }
val customSize = Size(width = 350F, height = 100F)
val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
Text(
modifier = Modifier.shimmerEffect(
isLoading = isLoading,
skeletonShape = SkeletonShape.ListItem(
hasImagePlaceholder = false, // optional
size = customSize // optional
), // optional
isRtl = isRtl
),
text = "genericText"
)
- For more details visit Skeleton documentation
Slider #
- Simple Slider without label
Slider(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing2) // optional
value = sliderValue,
onValueChange = { newValue -> sliderValue = newValue },
valueRange = 0f..10f, // optional
step = 1, // optional
enabled = isEnabled, // optional
)
- Simple Slider with label - has a value sign
Slider(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing2) // optional
value = sliderValue,
onValueChange = { newValue -> sliderValue = newValue },
valueRange = 0f..10f, // optional
step = 1, // optional
enabled = true, // optional
labelData = SliderLabelData(
text = "GenericText",
symbol = "\$" // optional
), // optional
)
- Simple Slider with label - has no value sign
Slider(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing2) // optional
value = sliderValue,
onValueChange = { newValue -> sliderValue = newValue },
valueRange = 0f..10f, // optional
step = 1, // optional
enabled = true, // optional
labelData = SliderLabelData(
text = "GenericText",
), // optional
)
- Dashed Slider with ticks
Slider(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing2) // optional
value = sliderValue,
onValueChange = { newValue -> sliderValue = newValue },
valueRange = 0f..10f, // optional
step = 1, // optional
enabled = true, // optional
labelData = SliderLabelData(
text = "GenericText",
symbol = "\$" // optional
), // optional
isDashed = true, // optional
)
- Dashed Slider with ticks and indicator labels
Slider(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing2) // optional
value = sliderValue,
onValueChange = { newValue -> sliderValue = newValue },
valueRange = 0f..10f, // optional
step = 1, // optional
enabled = true, // optional
labelData = SliderLabelData(
text = "GenericText",
symbol = "\$" // optional
), // optional
isDashed = true, // optional
showDashedLabels = hasDashLabels, // optional
)
- For more details visit Slider documentation
Snackbar #
Snackbar(
message = "This is a snackbar message",
actionLabel = "Retry", // optional, displays an action button if provided
onActionClick = { /* Handle retry action */ }, // optional, called when the action button is clicked
iconResId = R.drawable.ic_alert_circle, // optional, displays an icon if a drawable resource ID is provided
displayDuration = 5000L, // optional, default is 5000 milliseconds (5 seconds)
onDismiss = { /* Handle snackbar dismiss */ } // optional, called when the snackbar is dismissed,
action2Label = "Undo", // optional second action, displays an action button if provided,
onAction2Click = { /* Handle undo action */ }, // optional, called when the second action button is clicked
)
- For more details visit Snackbar documentation
Steppers #
Stepper #
- Vertical Stepper
@Composable
fun StepperExample() {
val currentStepIsError = false
val stepsAreNumbered = false
val includeDescription = true
Stepper(
modifier = Modifier, // optional
steps = getStepsList(
currentStepIsError,
stepsAreNumbered,
includeDescription
),
isHorizontal = false
)
}
private fun getStepsList(
currentStepIsError: Boolean,
stepsAreNumbered: Boolean,
includeDescription: Boolean,
noOfSteps: Int = defaultNoOfSteps,
) = buildList {
(1..noOfSteps).forEach {
val status = when (it) {
noOfSteps -> StepStatus.Remaining
noOfSteps - 1 -> if (currentStepIsError) StepStatus.Error else StepStatus.Current
else -> StepStatus.Completed
}
add(
Step(
text = "Step $it",
description = if (includeDescription) "Desc" else null, // optional
status = status,
number = it, // optional
iconResId = if (!stepsAreNumbered) R.drawable.ic_map_mark else null, // optional
iconContentDesc = "Step $it" // optional
)
)
}
}
- Horizontal Stepper
@Composable
fun StepperExample() {
val currentStepIsError = true
val stepsAreNumbered = true
val includeDescription = false
Stepper(
modifier = Modifier, // optional
steps = getStepsList(
currentStepIsError,
stepsAreNumbered,
includeDescription
),
isHorizontal = true
)
}
private fun getStepsList(
currentStepIsError: Boolean,
stepsAreNumbered: Boolean,
includeDescription: Boolean,
noOfSteps: Int = defaultNoOfSteps,
) = buildList {
(1..noOfSteps).forEach {
val status = when (it) {
noOfSteps -> StepStatus.Remaining
noOfSteps - 1 -> if (currentStepIsError) StepStatus.Error else StepStatus.Current
else -> StepStatus.Completed
}
add(
Step(
text = "Step $it",
description = if (includeDescription) "Desc" else null, // optional
status = status,
number = it, // optional
iconResId = if (!stepsAreNumbered) R.drawable.ic_map_mark else null, // optional
iconContentDesc = "Step $it" // optional
)
)
}
}
For more details visit Stepper documentation
Progress Stepper #
ProgressStepper(
modifier = Modifier,
numberOfCompletedSteps = 3,
totalSteps = 5,
stepSize = ProgressStepperSize.Medium,
showCompletedLabel = true,
)
For more details visit Progress Stepper documentation
Switches (Toggle) #
Switch(
modifier = Modifier.padding(vertical = YassirTheme.spacing.spacing1), //optional
enabled = true, //optional
checked = true,
isIconVisible = true, //optional
title = "on", //optional
onToggle = { checked = checked.not() },
)
- For more details visit Switches documentation
Tabs #
Tabs(
modifier = Modifier, // optional
selectedTabIndex = 0,
tabsList = listOf(
TabElement(
isEnabled = true,
text = "Tab Text",
isBadgePresent = true,
badgeText = "1",
onClick = { /* action */ }
),
TabElement(
isEnabled = true,
text = "Tab Text",
isBadgePresent = false,
onClick = { /* action */ }
)
),
type = TabType.Default(isScrollable = true),
colors = YassirTheme.colors, // optional
badgeStyleType = BadgeStyleType.Primary // optional
)
- For more details visit Tabs documentation
Tag #
- Tag
Tag(
modifier = Modifier, // optional
tagProperties = TagProperties(
text = "12:20", // optional
tagStyle = TagStyle.Neutral,
val isElevated = false, // optional
val isAlternativeStyle = false, // optional
val startIconResId = null, // optional
size = YassirTagSize.ExtraLarge, // optional
),
)
- For more details visit Tags documentation
Titled Section #
TitledSection(
title = "title",
modifier = Modifier, // optional
subtitle = "subtitle", // optional
caption = "caption", // optional
description = "description", // optional
horizontalAlignment = Alignment.Start, // optional
variant = TitledSectionVariant.Level1, // optional
titleMaxLines = 1, // optional
captionMaxLines = 1, // optional
subtitleMaxLines = 1, // optional
)
- For more details visit Titled Section documentation
Toast #
val toast = Toast(context)
toast.MakeToast(
modifier = Modifier,
message = "Message to show"
)
Button(
onClick = {
toast.show()
},
text = "Show Toast"
)
- For more details visit Toast documentation
Tooltip #
val localContext = LocalContext.current
Tooltip(
text = "Tooltip text",
supportingText = "Supporting text goes here.", // optional
arrowDirection = ArrowDirection.Top, // optional
dotColor = YassirTheme.colors.labelNeutralDefault, // optional
invertedColors = false, // optional
onCloseClick = {
Toast.makeText(localContext, "Close clicked",Toast.LENGTH_SHORT,).show()
}, // optional add only if you wanr to show a close icon at the end
)
- For more details visit Tooltip documentation
Top Bar #
- Top Bar with Textual Button Action and Title Content
val topbarAvatar = TopBarAvatar(
Modifier = Modifier,
imageUrl = null,
name = null,
hasTwoInitials = false,
badgeType = AvatarBadgeType.None,
)
TopAppBar(
contentType = TopBarContentType.Title(
title = "Title",
subtitle = "Subtitle",
ratingText = "4.5",
avatar = topbarAvatar, //optional
),
actionType = TopBarActionType.Button(
text = "Button",
onClick = { /* action */ }
),
showBackground = true, // optional
leadingIconClick = { /* action */ }, // optional
contentColor = LabelColors.LabelNeutralDefault, // optional
isScrolling = false, // optional
)
- Top Bar With Actions Bar Action and Address Content
TopAppBar(
contentType = TopBarContentType.AddressName(
title = "Title",
subtitle = "Subtitle",
avatar = topbarAvatar, //optional
isArrowVisible = true, //optional
onAddressClick = {}, //optional
),
actionType = TopBarActionType.ActionsWithBadges(
firstAction = TopAppBarAction(
iconRes = DrawableR.ic_plus,
onClick = { /* action */ },
badgeProperties = BadgeProperties(
badgeText = "3",
badgeStyleType = BadgeStyleType.Primary
), // optional
),
secondAction = TopAppBarAction(
iconRes = DrawableR.ic_lock,
onClick = { /* action */ },
badgeProperties = BadgeProperties(
badgeText = "3",
badgeStyleType = BadgeStyleType.Primary
), // optional
),
thirdAction = TopAppBarAction(
iconRes = DrawableR.ic_coins_hand,
onClick = { /* action */ },
badgeProperties = BadgeProperties(
badgeText = "3",
badgeStyleType = BadgeStyleType.Primary
), // optional
)
),
showBackground = true, // optional
leadingIconClick = { /* action */ }, // optional
contentColor = LabelColors.LabelNeutralDefault, // optional
isScrolling = false, // optional
)
- Top Bar with Avatar Action and Search Input Content
TopAppBar(
contentType = TopBarContentType.Search(
value = "",
placeholder = "Search",
onValueChange = { /* action */ },
onImeAction = { /* action */ },
onFocusChanged = { /* action */ },
),
actionType = TopBarActionType.Avatar(
imageUrl = "",
onClick = {/* action */}
),
showBackground = true, // optional
leadingIconClick = { /* action */ }, // optional
contentColor = LabelColors.LabelNeutralDefault, // optional
isScrolling = false, // optional
)
- Top Bar with Switch Action and Dropdown Input Content
TopAppBar(
contentType = TopBarContentType.DropDown(
label = "Button",
onClick = { /* action */ }
),
actionType = TopBarActionType.Switch(
checked = true,
enabled = true,
title = "ON",
onToggle = { /* action */ }
),
showBackground = true, // optional
leadingIconClick = { /* action */ }, // optional
contentColor = LabelColors.LabelNeutralDefault, // optional
isScrolling = false, // optional
)
- Top Bar with Slot Action and Title Content
TopAppBar(
contentType = TopBarContentType.Title(
title = "Title",
subtitle = "Subtitle",
ratingText = "4.5"
),
actionType = TopBarActionType.Slot(
slot = { TopBarSlot() }
),
showBackground = true, // optional
leadingIconClick = { /* action */ }, // optional
contentColor = LabelColors.LabelNeutralDefault, // optional
isScrolling = false, // optional
)
- Top Bar with Title Content and Tabs
var selectedTabIndex by remember { mutableIntStateOf(0) }
val tabs = TopBarTabs(
selectedTabIndex = selectedTabIndex,
type = TabType.Default(isScrollable = true),
tabsList = listOf(
TabElement(isEnabled = true, text = "Tab 1",isBadgePresent = false,onClick = { selectedTabIndex = 0 }),
TabElement(
isEnabled = true,
text = "Tab 2",
isBadgePresent = true,
badgeText = "2",
onClick = { selectedTabIndex = 1 },
),
TabElement(isEnabled = true, text = "Tab 3",isBadgePresent = false,onClick = { selectedTabIndex = 2 }),
TabElement(isEnabled = true, text = "Tab 4",isBadgePresent = false,onClick = { selectedTabIndex = 3 }),
TabElement(isEnabled = true, text = "Tab 5",isBadgePresent = false,onClick = { selectedTabIndex = 4 }),
),
)
TopBar(
contentType = TopBarContentType.Title(
title = "Title",
subtitle = "Subtitle",
ratingText = "4.5"
),
actionType = null,
showBackground = true, // optional
leadingIconClick = { /* action */ }, // optional
contentColor = LabelColors.LabelNeutralDefault, // optional
isScrolling = false, // optional
tabs = tabs, //optional
)
- For more details visit Top Bar documentation