{-# LANGUAGE GeneralizedNewtypeDeriving #-}
{-# LANGUAGE ExistentialQuantification #-}
{-# LANGUAGE DerivingStrategies #-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings #-}
{-# LANGUAGE RecordWildCards #-}
{-# LANGUAGE LambdaCase #-}
module Miso.UI.Accordion
(
accordion_
, accordionSection_
, accordionHeader_
, accordionBody_
, accordionSample
, accordionCodeSample
) where
import Miso
import qualified Miso.Html as H
import qualified Miso.Html.Property as P
import qualified Miso.Svg as S
import qualified Miso.Svg.Property as SP
accordion_
:: [ Attribute a ]
-> [ View m a ]
-> View m a
accordion_ :: forall a m. [Attribute a] -> [View m a] -> View m a
accordion_ [Attribute a]
attrs [View m a]
kids =
([Attribute a] -> [View m a] -> View m a)
-> [Attribute a] -> Bool -> [Attribute a] -> [View m a] -> View m a
forall action model.
([Attribute action] -> [View model action] -> View model action)
-> [Attribute action]
-> Bool
-> [Attribute action]
-> [View model action]
-> View model action
optionalAttrs
[Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
H.section_
[Attribute a]
attrs
Bool
True
[ MisoString -> Attribute a
forall action. MisoString -> Attribute action
P.class_ MisoString
"accordion"
]
[View m a]
kids
accordionSection_
:: [ Attribute a ]
-> [ View m a ]
-> View m a
accordionSection_ :: forall a m. [Attribute a] -> [View m a] -> View m a
accordionSection_ [Attribute a]
attrs [View m a]
kids =
([Attribute a] -> [View m a] -> View m a)
-> [Attribute a] -> Bool -> [Attribute a] -> [View m a] -> View m a
forall action model.
([Attribute action] -> [View model action] -> View model action)
-> [Attribute action]
-> Bool
-> [Attribute action]
-> [View model action]
-> View model action
optionalAttrs
[Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
H.details_
[Attribute a]
attrs
Bool
True
[ [MisoString] -> Attribute a
forall action. [MisoString] -> Attribute action
P.classes_
[ MisoString
"group"
, MisoString
"border-b"
, MisoString
"last:border-b-0"
]
]
[View m a]
kids
accordionHeader_
:: [ Attribute a ]
-> [ View m a ]
-> View m a
[Attribute a]
attrs [View m a]
kids = ([Attribute a] -> [View m a] -> View m a)
-> [Attribute a] -> Bool -> [Attribute a] -> [View m a] -> View m a
forall action model.
([Attribute action] -> [View model action] -> View model action)
-> [Attribute action]
-> Bool
-> [Attribute action]
-> [View model action]
-> View model action
optionalAttrs
[Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
H.summary_
[Attribute a]
attrs
Bool
True
[ MisoString -> Attribute a
forall action. MisoString -> Attribute action
P.className
MisoString
"w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md"
]
[ [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
H.h2_
[ MisoString -> Attribute a
forall action. MisoString -> Attribute action
P.className MisoString
"flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline"
]
[View m a]
kids
, [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
H.svg_
[ [MisoString] -> Attribute a
forall action. [MisoString] -> Attribute action
P.classes_
[ MisoString
"text-muted-foreground"
, MisoString
"pointer-events-none"
, MisoString
"size-4"
, MisoString
"shrink-0"
, MisoString
"translate-y-0.5"
, MisoString
"transition-transform"
, MisoString
"duration-200"
, MisoString
"group-open:rotate-180"
]
, MisoString -> Attribute a
forall action. MisoString -> Attribute action
SP.strokeLinejoin_ MisoString
"round"
, MisoString -> Attribute a
forall action. MisoString -> Attribute action
SP.strokeLinecap_ MisoString
"round"
, MisoString -> Attribute a
forall action. MisoString -> Attribute action
SP.strokeWidth_ MisoString
"2"
, MisoString -> Attribute a
forall action. MisoString -> Attribute action
SP.stroke_ MisoString
"currentColor"
, MisoString -> Attribute a
forall action. MisoString -> Attribute action
SP.fill_ MisoString
"none"
, MisoString -> Attribute a
forall action. MisoString -> Attribute action
SP.viewBox_ MisoString
"0 0 24 24"
, MisoString -> Attribute a
forall action. MisoString -> Attribute action
P.height_ MisoString
"24"
, MisoString -> Attribute a
forall action. MisoString -> Attribute action
P.width_ MisoString
"24"
, MisoString -> Attribute a
forall action. MisoString -> Attribute action
P.xmlns_ MisoString
"http://www.w3.org/2000/svg"
]
[ [Attribute a] -> View m a
forall action model. [Attribute action] -> View model action
S.path_
[ MisoString -> Attribute a
forall action. MisoString -> Attribute action
SP.d_ MisoString
"m6 9 6 6 6-6"
]
]
]
accordionBody_
:: [ Attribute a ]
-> [ View m a ]
-> View m a
accordionBody_ :: forall a m. [Attribute a] -> [View m a] -> View m a
accordionBody_ [Attribute a]
attrs [View m a]
kids =
([Attribute a] -> [View m a] -> View m a)
-> [Attribute a] -> Bool -> [Attribute a] -> [View m a] -> View m a
forall action model.
([Attribute action] -> [View model action] -> View model action)
-> [Attribute action]
-> Bool
-> [Attribute action]
-> [View model action]
-> View model action
optionalAttrs
[Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
H.section_
[Attribute a]
attrs
Bool
True
[ MisoString -> Attribute a
forall action. MisoString -> Attribute action
P.className MisoString
"pb-4"
]
[ [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
H.p_
[ [MisoString] -> Attribute a
forall action. [MisoString] -> Attribute action
P.classes_ [MisoString
"text-sm"]
]
[View m a]
kids
]
accordionSample :: View m a
accordionSample :: forall m a. View m a
accordionSample =
[Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
accordion_ []
[ [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
accordionSection_ []
[ [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
accordionHeader_ []
[ View m a
"Is it accessible?" ]
, [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
accordionBody_ []
[ View m a
"Yes. It adheres to the WAI-ARIA design pattern." ]
]
, [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
accordionSection_ []
[ [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
accordionHeader_ []
[ View m a
"Is it styled?" ]
, [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
accordionBody_ []
[ View m a
"Yes. It comes with default styles that match other component aesthetic." ]
]
, [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
accordionSection_ []
[ [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
accordionHeader_ []
[ View m a
"Is it animated?" ]
, [Attribute a] -> [View m a] -> View m a
forall a m. [Attribute a] -> [View m a] -> View m a
accordionBody_ []
[ View m a
"Yes. It's animated by default, but you can disable it if you prefer." ]
]
]
accordionCodeSample :: View m a
accordionCodeSample :: forall m a. View m a
accordionCodeSample = MisoString -> View m a
forall model action. MisoString -> View model action
text
MisoString
"""
-----------------------------------------------------------------------------
module MyAccordion (myAccordion) where
-----------------------------------------------------------------------------
import Miso
import Miso.UI.Accordion
( accordion_
, accordionSection_
, accordionHeader_
, accordionBody_
)
-----------------------------------------------------------------------------
myAccordion :: View model action
myAccordion = accordion_ []
[ accordionSection_ []
[ accordionHeader_ []
[ "Is it accessible?" ]
, accordionBody_ []
[ "Yes. It adheres to the WAI-ARIA design pattern." ]
]
, accordionSection_ []
[ accordionHeader_ []
[ "Is it styled?" ]
, accordionBody_ []
[ "Yes. It comes with default styles , that matches the other components aesthetic." ]
]
, accordionSection_ []
[ accordionHeader_ []
[ "Is it animated?" ]
, accordionBody_ []
[ "Yes. It's animated by default, but you can disable it if you prefer." ]
]
]
-----------------------------------------------------------------------------
"""