accordion

Accordion - A customisable Composable UI Component

OCAccordion Component

Overview

The OCAccordion is a custom Composable widget for the Jetpack Compose UI Toolkit. It provides an interactive accordion-style UI component, allowing content to be expanded and collapsed.

Features

States: Supports Enabled and Disabled states. Content Types: Supports different types of content: Plain text. Text with a button. Custom Composable view. How to use

Define your accordion details:

val accordionDetails = listOf( OCAccordionDetails( accordionState = OCAccordionState.Enabled, title = "Accordion Title 1", content = OCContentType.Text("This is detailed text for accordion item 1.") ) // ... add more details as needed ) Use the OCAccordion Composable in your UI:

OCAccordion( style = object : OCAccordionStyle { override val accordionDetails = accordionDetails }, onClickTextButton = { /* Click Handler */ }, )

For custom views inside the accordion, utilize the OCContentType.ContainerView and define your custom Composable inside. Accessibility

Custom View Full Sample Preview

Proper content descriptions are set for screen readers.

`@Preview(showBackground = true)
@Composable
fun OCAccordionPreview() {
val checkedItems = remember { mutableStateOf(listOf<String>()) }
val items = listOf("Option 1", "Option 2", "Option 3")1`

    val accordionDetails = mutableListOf<OCAccordionDetails>()

    val onCheckedChanged: (isChecked: Boolean) -> Unit = { isChecked ->
        val accordionDetail = accordionDetails.find { it.content is OCContentType.ContainerView }

        accordionDetail?.let {
            if (isChecked) {
                it.indicator.value++
            } else {
                it.indicator.value--
            }
        }
    }
    accordionDetails.addAll(
        listOf(
            OCAccordionDetails(
                accordionState = OCAccordionState.Enabled,
                title = "Accordion Title 1",
                content = OCContentType.Text("This is some detailed text for accordion item 1."),
            ),
            OCAccordionDetails(
                accordionState = OCAccordionState.Disabled,
                title = "Accordion Title 2",
                content = OCContentType.TextWithButton("This is some detailed text for accordion item 2.", "Click Me!"),
            ),
            OCAccordionDetails(
                accordionState = OCAccordionState.Enabled,
                title = "Custom View",
                content = OCContentType.ContainerView {
                    Column {
                        OCText(text = "Choose your options below:")
                        Spacer(modifier = Modifier.height(8.dp))

                        CheckboxListContent(
                            items = items,
                            checkedItems = checkedItems,
                            onItemChecked = onCheckedChanged,
                        )
                    }
                },
            ),
        ),
    )
    OCTheme {
        OCAccordion(
            style = object : OCAccordionStyle {
                override val accordionDetails = accordionDetails
            },
            onClickTextButton = { /* Click Handler */ },
        )
    }
}

`@Composable
fun CheckboxListContent(
items: List<String>,
checkedItems: MutableState<List<String>>,
onItemChecked: (isChecked: Boolean) -> Unit,
) {
items.forEach { item ->
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
) {
OCText(
item,
style = OCTheme.typography.body1Regular,
color = OCTheme.colors.accordionText,
modifier = Modifier.padding(top = OCTheme.dimensions.sixteenDPSpacing, bottom = OCTheme.dimensions.sixteenDPSpacing, end = OCTheme.dimensions.twentyFourDPSpacing),
)
OCCheckBox(
isSelected = checkedItems.value.contains(item),
onCheckedChange = { isChecked ->
if (isChecked) {
checkedItems.value = checkedItems.value + item
} else {
checkedItems.value = checkedItems.value - item
}
onItemChecked(isChecked)
},
)
}
}
}`