Product Range/net.ikea.skapa.ui.components

Package-level declarations

Types

ActionIcon is used to chose between three pre defined icons. These icons are used in the MemberCardActionParams and displayed on the icon button. FullScreen displays a fullscreen icon. Intended to be used for an expand action button. CrossSmall displays a small variant of a cross icon. Ellipsis displays an ellipsis icon.

AffixVerticalAlignment

enum AffixVerticalAlignment : Enum<AffixVerticalAlignment>

Used in Price to manage the alignment of currency and decimal value

CommercialMessageType

enum CommercialMessageType : Enum<CommercialMessageType>

Types for CommercialMessage

CommercialMessageVariant

enum CommercialMessageVariant : Enum<CommercialMessageVariant>

Variants for CommercialMessage

CurrencyPosition

enum CurrencyPosition : Enum<CurrencyPosition>

Placement of currency symbol/label.

CurrencySpacing

enum CurrencySpacing : Enum<CurrencySpacing>

Space added between the currency and price digits. Appended before or after the currency depending on CurrencyPosition.

DecimalSign

enum DecimalSign : Enum<DecimalSign>

Separator for integers and decimals

MemberCardActionParams

data class MemberCardActionParams(val actionIcon: ActionIcon, val contentDescription: String, val clickableItems: MemberCardClickableItems = MemberCardClickableItems.Icon, val onClick: () -> Unit)

Data class for handling the action available in MemberCard.

MemberCardClickableItems

enum MemberCardClickableItems : Enum<MemberCardClickableItems>

MemberCardClickableItems defines which part of the card is clickable by the user. Default value is MemberCardClickableItems.Icon

MemberCardCodeType

enum MemberCardCodeType : Enum<MemberCardCodeType>

MemberCardCodeType defines which type of code system is to be used and sizes the code container accordingly. QR will enable a QR code to be used. Barcode will enable a barcode to be used. Sizes differ between horizontal and vertical layouts.

MemberCardOrientation

enum MemberCardOrientation : Enum<MemberCardOrientation>

MemberCardOrientation sets the desired orientation variant of the component. Use Horizontal in containers with horizontal orientation. Use Vertical in vertical orientation containers such as most mobile application settings.

MemberCardProgram

enum MemberCardProgram : Enum<MemberCardProgram>

MemberCardProgram defines the visual style, or program to be applied to the IKEA Member Card.

MemberCardStyleParams

data class MemberCardStyleParams(val program: MemberCardProgram = MemberCardProgram.Family, val orientation: MemberCardOrientation = MemberCardOrientation.Horizontal, val codeType: MemberCardCodeType = MemberCardCodeType.QR)

Data class for the styling of the MemberCard.

PriceModule

object PriceModule

PriceModuleSizeList

enum PriceModuleSizeList : Enum<PriceModuleSizeList>

Set of sizes for PriceModule component in the PriceModuleVariant.List variant.

PriceModuleSizeRegular

enum PriceModuleSizeRegular : Enum<PriceModuleSizeRegular>

Set of sizes for PriceModule component in the PriceModuleVariant.Regular variant.

PriceModuleVariant

sealed class PriceModuleVariant

PriceOfferType

sealed class PriceOfferType

PriceParams

data class PriceParams(val integerValue: String, val decimalValue: String? = null, val currencyLabel: String, val decimalSign: DecimalSign, val currencyPosition: CurrencyPosition = CurrencyPosition.Leading, val subscriptLabel: String? = null, val decimalVerticalAlignment: AffixVerticalAlignment = AffixVerticalAlignment.Top, val currencyVerticalAlignment: AffixVerticalAlignment = AffixVerticalAlignment.Top, val captionSuffix: String? = null, val captionPrefix: String? = null, val currencySpacing: CurrencySpacing = CurrencySpacing.None)

Price params used to match Price

PriceSize

enum PriceSize : Enum<PriceSize>

The price size is a simplified version of the Price scaling.

PriceSizeStyle

enum PriceSizeStyle : Enum<PriceSizeStyle>

The price display has two size variant called MixedSize and SingleSize.

PriceVariant

sealed class PriceVariant

Pre-defined styles for the Button component

ProductIdentifierVariant

enum ProductIdentifierVariant : Enum<ProductIdentifierVariant>

Styles for ProductIdentifier

SecondCurrencyPriceParams

data class SecondCurrencyPriceParams(val priceParams: PriceParams, val comparisonPriceParams: PriceParams? = null)

Second currency price for Dual currencies. This option is provide due some legal requirements in some markets.

ShopAllButtonParams

data class ShopAllButtonParams(val label: String, val onClick: () -> Unit)

Params for Shop all button. Uses a ButtonVariant.ImageOverlay when rendered.

ShoppableImageItem

data class ShoppableImageItem<T>(val key: T, @FloatRange(from = 0.0, to = 1.0) val xCoordinate: Float, @FloatRange(from = 0.0, to = 1.0) val yCoordinate: Float, val tagPosition: TagPosition = TagPosition.Vertical.TopCenter, val content: @Composable () -> Unit, val onClick: () -> Unit)

Shoppable image item data class

SkapaIconsProductRange

enum SkapaIconsProductRange : Enum<SkapaIconsProductRange>

TagPosition

data class TagPosition

Position the product tag in relation to the dot.

Functions

CommercialMessage

@Composable

fun CommercialMessage(value: String, type: CommercialMessageType, modifier: Modifier = Modifier, variant: CommercialMessageVariant = Emphasised)

Commercial Message component is a badge that adorns range products with an IKEA sales steering category. It is built on top of androidx.compose.material3.Text and comes with pre-defined appearance based on Skapa design and guidelines.

MemberCard

@Composable

fun MemberCard(title: String, name: String, number: String, caption: String?, modifier: Modifier = Modifier, styleParams: MemberCardStyleParams = MemberCardStyleParams(), actionParams: MemberCardActionParams? = null, codeContent: @Composable () -> Unit)

MemberCard component allows us to expand our relation with our customers, displaying their physical IKEA Member Card in a digital format and comes with predefined appearance based on Skapa design and guidelines.

Price

@Composable

fun Price(integerValue: String, decimalValue: String? = null, currency: String, decimalSign: DecimalSign = DecimalSign.Comma, size: PriceSize = PriceSize.Medium, variant: PriceVariant = PriceVariant.Regular(), currencyPosition: CurrencyPosition = CurrencyPosition.Leading, priceSizeStyle: PriceSizeStyle = MixedSize, subscriptLabel: String? = null, modifier: Modifier = Modifier, decimalVerticalAlignment: AffixVerticalAlignment = AffixVerticalAlignment.Top, currencyVerticalAlignment: AffixVerticalAlignment = AffixVerticalAlignment.Top, captionPrefix: String? = null, captionSuffix: String? = null, currencySpacing: CurrencySpacing = CurrencySpacing.None)

Price displays a currency in the IKEA price presentation brand format. This is the leading price display used for most price presentations at IKEA.

PriceModule

@Composable

fun PriceModule(productName: String, productDescription: String, currentPriceParams: PriceParams, modifier: Modifier = Modifier, variant: PriceModuleVariant = PriceModuleVariant.Regular( size = PriceModuleSizeRegular.Medium, placeholder = false ), energy: @Composable () -> Unit? = null, priceOfferType: PriceOfferType = PriceOfferType.Regular, priceAddons: List<String>? = null, secondCurrencyPriceParams: SecondCurrencyPriceParams? = null)

Price Module communicates product information and price for different scenarios. Note: This is the new implementation of this Price module. In this version there are a couple of significant changes compared to the old PriceModule (Legacy) component.

ProductIdentifier

@Composable

fun ProductIdentifier(value: String, modifier: Modifier = Modifier, label: String? = null, variant: ProductIdentifierVariant = Emphasised)

Product Identifier component is a label that displays numbers related to the identification or the store location of an IKEA range product. It is built on top of androidx.compose.material3.Text and comes with pre-defined appearance based on Skapa design and guidelines.

ShoppableImage

@Composable

fun <T> ShoppableImage(imageParams: ImageParams, products: List<ShoppableImageItem<T>>, modifier: Modifier = Modifier, selectedProduct: T? = null, dotsVisibleFromStart: Boolean = true, shopAllButtonParams: ShopAllButtonParams? = null, onSelected: (T?) -> Unit)

Shoppable image is image that identifies and links to IKEA products pictured within.