import React from "react" ; import type { ReactElement , ReactText , KeyboardEvent } from "react" ; import type { Story } from "@storybook/react" ; import { List , ListProps , Box , Heading , UserIcon , SettingsIcon , } from "@okta/odyssey-react" ; import { List as Source } from "../../../../odyssey-react/src" ; export default { title : `Components/List` , component : Source } ; const Template = ( { listType , unstyled } ) => ( < List listType = { listType } unstyled = { unstyled } > < List . Item > Item 1 < /List.Item> < List . Item > Item 2 < /List.Item> < /List>); export const Default = Template . bind ( { } ) ; Default . args = { listType : "unordered" , unstyled : false } ; export const OrderedList = ( ) : ReactElement => ( < List listType = "ordered" > < List . Item > Item 1 < /List.Item> < List . Item > Item 2 < /List.Item> < /List>); export const DescriptionList = ( ) : ReactElement => ( < List listType = "description" > < List . Term > Term 1 < /List.Term> < List . Details > Detail 1.1 < /List.Details> < List . Details > Detail 1.2 < /List.Details> < List . Term > Term 2 < /List.Term> < List . Details > Detail 2.1 < /List.Details> < /List>); export const UnstyledList = ( ) : ReactElement => ( < List unstyled = { true } > < List . Item > Item 1 < /List.Item> < List . Item > Item 2 < /List.Item> < /List>); type ActionCardProps = { icon : ReactElement ; heading : ReactText ; subHeading : ReactText ; onClick : ( ) => void ; } ; const ActionCard = ( { icon , heading , subHeading , onClick , } ) => { function handleKeyPress ( event ) { if ( event . key === " " || event . key === "Enter" ) { onClick ( ) ; } } return ( < Box borderColor = "display" hoverBorderColor = "ui" borderRadius = "base" boxShadow = "default" hoverBoxShadow = "default" padding = "m" focusRing = "primary" tabIndex = { 0 } role = "button" display = "flex" alignItems = "center" marginBottom = "s" cursor = "pointer" onClick = { onClick } onKeyPress = { handleKeyPress } > < Box marginRight = "m" > { icon } < /Box> < Box flexGrow = "1" userSelect = "none" > < Heading level = "2" visualLevel = "6" > { heading } < /Heading> < p className = "action-card-sub" > { subHeading } < /p> < /Box> < /Box>); } ; export const ActionList = ( ) : ReactElement => ( < List unstyled = { true } > < List . Item > < ActionCard icon = { < UserIcon />} heading="User" subHeading="Text related to user" onClick={() => { console . log ( "click user" ) ; } } /> < /List.Item> < List . Item > < ActionCard icon = { < SettingsIcon />} heading="Settings" subHeading="Text related to settings" onClick={() => { console . log ( "click settings" ) ; } } /> < /List.Item> < /List>);