-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.Accordion
  ( -- ** Props
    AccordionProps (..)
  , defaultAccordionProps
  , AccordionItemProps (..)
  , defaultAccordionItemProps
    -- ** Views
  , accordion_
  , accordionSection_
  , accordionHeader_
  , accordionBody_
    -- ** Sample
  , accordionSample
  , accordionCodeSample
  , accordionPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html          as H
import qualified Miso.Html.Property as P
-----------------------------------------------------------------------------
import           Miso.UI.Icons
-----------------------------------------------------------------------------
-- | Props for 'accordion_'
data AccordionProps action
  = AccordionProps
  { forall action. AccordionProps action -> Bool
accordionMultiple :: Bool
    -- ^ Allow several sections open at once (@data-multiple@)
  , forall action. AccordionProps action -> [MisoString]
accordionClasses :: [MisoString]
    -- ^ Extra classes appended to the root @section.accordion@
  , forall action. AccordionProps action -> [Attribute action]
accordionAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor: exclusive expand
defaultAccordionProps :: AccordionProps action
defaultAccordionProps :: forall action. AccordionProps action
defaultAccordionProps
  = AccordionProps
  { accordionMultiple :: Bool
accordionMultiple = Bool
False
  , accordionClasses :: [MisoString]
accordionClasses = []
  , accordionAttrs :: [Attribute action]
accordionAttrs = []
  }
-----------------------------------------------------------------------------
-- | Props for 'accordionSection_'
data AccordionItemProps action
  = AccordionItemProps
  { forall action. AccordionItemProps action -> Bool
accordionItemOpen :: Bool
    -- ^ Section expanded initially
  , forall action. AccordionItemProps action -> Bool
accordionItemDisabled :: Bool
    -- ^ Renders with @aria-disabled@
  , forall action. AccordionItemProps action -> [MisoString]
accordionItemClasses :: [MisoString]
  , forall action. AccordionItemProps action -> [Attribute action]
accordionItemAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor: collapsed, enabled
defaultAccordionItemProps :: AccordionItemProps action
defaultAccordionItemProps :: forall action. AccordionItemProps action
defaultAccordionItemProps
  = AccordionItemProps
  { accordionItemOpen :: Bool
accordionItemOpen = Bool
False
  , accordionItemDisabled :: Bool
accordionItemDisabled = Bool
False
  , accordionItemClasses :: [MisoString]
accordionItemClasses = []
  , accordionItemAttrs :: [Attribute action]
accordionItemAttrs = []
  }
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/accordion/ Accordion>, driven by 'AccordionProps'
accordion_
  :: AccordionProps action
  -> [View model action]
  -> View model action
accordion_ :: forall action model.
AccordionProps action -> [View model action] -> View model action
accordion_ AccordionProps {Bool
[MisoString]
[Attribute action]
accordionMultiple :: forall action. AccordionProps action -> Bool
accordionClasses :: forall action. AccordionProps action -> [MisoString]
accordionAttrs :: forall action. AccordionProps action -> [Attribute action]
accordionMultiple :: Bool
accordionClasses :: [MisoString]
accordionAttrs :: [Attribute action]
..} [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.section_
    ( [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
      [ [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (MisoString
"accordion" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: [MisoString]
accordionClasses) ]
      , [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.data_ MisoString
"multiple" MisoString
"" | Bool
accordionMultiple ]
      , [Attribute action]
accordionAttrs
      ]
    ) [View model action]
kids
-----------------------------------------------------------------------------
accordionSection_
  :: AccordionItemProps action
  -> [View model action]
  -> View model action
accordionSection_ :: forall action model.
AccordionItemProps action
-> [View model action] -> View model action
accordionSection_ AccordionItemProps {Bool
[MisoString]
[Attribute action]
accordionItemOpen :: forall action. AccordionItemProps action -> Bool
accordionItemDisabled :: forall action. AccordionItemProps action -> Bool
accordionItemClasses :: forall action. AccordionItemProps action -> [MisoString]
accordionItemAttrs :: forall action. AccordionItemProps action -> [Attribute action]
accordionItemOpen :: Bool
accordionItemDisabled :: Bool
accordionItemClasses :: [MisoString]
accordionItemAttrs :: [Attribute action]
..} [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.details_
    ( [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
      [ [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_
          ( [ MisoString
"group", MisoString
"border-b", MisoString
"last:border-b-0" ] [MisoString] -> [MisoString] -> [MisoString]
forall a. [a] -> [a] -> [a]
++ [MisoString]
accordionItemClasses )
        ]
      , [ Bool -> Attribute action
forall action. Bool -> Attribute action
P.open_ Bool
True | Bool
accordionItemOpen ]
      , [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"disabled" MisoString
"true" | Bool
accordionItemDisabled ]
      , [Attribute action]
accordionItemAttrs
      ]
    ) [View model action]
kids
-----------------------------------------------------------------------------
accordionHeader_
  :: [ Attribute action ]
  -> [ View model action ]
  -> View model action
accordionHeader_ :: forall action model.
[Attribute action] -> [View model action] -> View model action
accordionHeader_ [Attribute action]
attrs [View model action]
kids = [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.summary_
  ( MisoString -> Attribute action
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 action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
attrs
  )
  [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.h2_
    [ MisoString -> Attribute action
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 model action]
kids
  , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
chevronDownIcon
    [ [MisoString] -> Attribute action
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"
      ]
    ]
  ]
-----------------------------------------------------------------------------
accordionBody_
  :: [ Attribute action ]
  -> [ View model action ]
  -> View model action
accordionBody_ :: forall action model.
[Attribute action] -> [View model action] -> View model action
accordionBody_ [Attribute action]
attrs [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.section_
    ( MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.className MisoString
"pb-4"
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
attrs
    )
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.p_
      [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ [MisoString
"text-sm"]
      ]
      [View model action]
kids
    ]
-----------------------------------------------------------------------------
accordionSample :: View model action
accordionSample :: forall model action. View model action
accordionSample =
  AccordionProps action -> [View model action] -> View model action
forall action model.
AccordionProps action -> [View model action] -> View model action
accordion_ AccordionProps action
forall action. AccordionProps action
defaultAccordionProps
    [ AccordionItemProps action
-> [View model action] -> View model action
forall action model.
AccordionItemProps action
-> [View model action] -> View model action
accordionSection_ AccordionItemProps action
forall action. AccordionItemProps action
defaultAccordionItemProps { accordionItemOpen = True }
      [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
accordionHeader_ []
        [ View model action
"Is it accessible?" ]
      , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
accordionBody_ []
        [ View model action
"Yes. It adheres to the WAI-ARIA design pattern." ]
      ]
    , AccordionItemProps action
-> [View model action] -> View model action
forall action model.
AccordionItemProps action
-> [View model action] -> View model action
accordionSection_ AccordionItemProps action
forall action. AccordionItemProps action
defaultAccordionItemProps
      [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
accordionHeader_ []
        [ View model action
"Is it styled?" ]
      , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
accordionBody_ []
        [ View model action
"Yes. It comes with default styles that match other component aesthetic." ]
      ]
    , AccordionItemProps action
-> [View model action] -> View model action
forall action model.
AccordionItemProps action
-> [View model action] -> View model action
accordionSection_ AccordionItemProps action
forall action. AccordionItemProps action
defaultAccordionItemProps
      [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
accordionHeader_ []
        [ View model action
"Is it animated?" ]
      , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
accordionBody_ []
        [ View model action
"Yes. It's animated by default, but you can disable it if you prefer." ]
      ]
    ]
-----------------------------------------------------------------------------
accordionCodeSample :: View model action
accordionCodeSample :: forall model action. View model action
accordionCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MyAccordion (accordionSample) where
  -----------------------------------------------------------------------------
  import           Miso
  import qualified Miso.Html          as H
  import qualified Miso.Html.Property as P
  import           Miso.UI.Icons
  import           Miso.UI.Accordion
  -----------------------------------------------------------------------------
  accordionSample :: View model action
  accordionSample =
    accordion_ defaultAccordionProps
      [ accordionSection_ defaultAccordionItemProps { accordionItemOpen = True }
        [ accordionHeader_ []
          [ "Is it accessible?" ]
        , accordionBody_ []
          [ "Yes. It adheres to the WAI-ARIA design pattern." ]
        ]
      , accordionSection_ defaultAccordionItemProps
        [ accordionHeader_ []
          [ "Is it styled?" ]
        , accordionBody_ []
          [ "Yes. It comes with default styles that match other component aesthetic." ]
        ]
      , accordionSection_ defaultAccordionItemProps
        [ accordionHeader_ []
          [ "Is it animated?" ]
        , accordionBody_ []
          [ "Yes. It's animated by default, but you can disable it if you prefer." ]
        ]
      ]
  """
-----------------------------------------------------------------------------
accordionPropsApi :: View model action
accordionPropsApi :: forall model action. View model action
accordionPropsApi =
  View model action
"""
  -- | Props for 'accordion_'
  data AccordionProps action
    = AccordionProps
    { accordionMultiple :: Bool
      -- ^ Allow several sections open at once (@data-multiple@)
    , accordionClasses :: [MisoString]
      -- ^ Extra classes appended to the root @section.accordion@
    , accordionAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor: exclusive expand
  defaultAccordionProps :: AccordionProps action
  defaultAccordionProps
    = AccordionProps
    { accordionMultiple = False
    , accordionClasses = []
    , accordionAttrs = []
    }
  -----------------------------------------------------------------------------
  -- | Props for 'accordionSection_'
  data AccordionItemProps action
    = AccordionItemProps
    { accordionItemOpen :: Bool
      -- ^ Section expanded initially
    , accordionItemDisabled :: Bool
      -- ^ Renders with @aria-disabled@
    , accordionItemClasses :: [MisoString]
    , accordionItemAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor: collapsed, enabled
  defaultAccordionItemProps :: AccordionItemProps action
  defaultAccordionItemProps
    = AccordionItemProps
    { accordionItemOpen = False
    , accordionItemDisabled = False
    , accordionItemClasses = []
    , accordionItemAttrs = []
    }
  """
-----------------------------------------------------------------------------