Packages
moon
2.79.10
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/components/accordion_page.ex
defmodule MoonWeb.Pages.Components.AccordionPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Accordion
alias Moon.Icons.{ChatChat, ChatComment, ChatCommentAdd, ChatDoubleBubble}
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.Page
alias MoonWeb.Components.Facing.DeprecationWarning
data(item_id, :string, default: "1")
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/accordion",
name: "Accordion"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"title",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Title of accordion"
},
%{
:name => ~c"open_by_default",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Expanded/collapsed accordion by default"
},
%{
:name => ~c"with_button",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"true",
:description => ~c"Show expand/collapse chevron"
},
%{
:name => ~c"disabled",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Disable expand/collapse accordion"
},
%{
:name => ~c"content",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Content to show inside of accordion"
},
%{
:name => ~c"size",
:type => ~c"sm | md | lg | xl",
:required => ~c"No",
:default => ~c"md",
:description => ~c"Size variant of accordion"
},
%{
:name => ~c"is_content_inside",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Whether the content is displayed outside of the accordion header"
}
]
)
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Accordion">
<DeprecationWarning
name="Accordion"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.AccordionPage)}
/>
</ComponentPageDescription>
<ExampleAndCode title="Default" id="accordion-1">
<:example>
<Accordion id="deposits-and-withdrawals-1">
<:title>Deposit & Withdrawals</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
</:example>
<:code>{get_example_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Open by default" id="accordion-2">
<:example>
<Accordion id="deposits-and-withdrawals-2" open_by_default>
<:title>Deposit & Withdrawals</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
</:example>
<:code>{get_example_2_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Without button" id="accordion-3">
<:example>
<Accordion id="deposits-and-withdrawals-3" with_button={false}>
<:title>Deposit & Withdrawals</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
</:example>
<:code>{get_example_3_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Disabled" id="accordion-4">
<:example>
<Accordion id="deposits-and-withdrawals-4" disabled>
<:title>Deposit & Withdrawals</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
</:example>
<:code>{get_example_4_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Content outside" id="accordion-5">
<:example>
<Accordion id="basket-items" open_by_default is_content_inside={false}>
<:title>Basket Items</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
</:example>
<:code>{get_example_5_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Header content" id="accordion-6">
<:example>
<Accordion id="customer-support">
<:title>Customer support</:title>
<:header_content>
<ChatChat class="w-6 h-6" />
<ChatComment class="w-6 h-6" />
<ChatCommentAdd class="w-6 h-6" />
<ChatDoubleBubble class="w-6 h-6" />
</:header_content>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
</:example>
<:code>{get_example_6_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Sizes" id="accordion-7">
<:example>
<Accordion id="size-4" size="xl">
<:title>X Large (xl)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-3" size="lg">
<:title>Large (lg)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-2">
<:title>Medium default (md)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-1" size="sm">
<:title>Small (sm)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<p class="text-moon-14 text-trunks pl-3 pr-3">
please note that also for sizes we do use explicit namings also - "xlarge", "large", "medium", "small"
</p>
</:example>
<:code>{get_example_7_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Sizes: content outside" id="accordion-8">
<:example>
<Accordion id="size-out-4" size="xl" is_content_inside={false}>
<:title>X Large (xl)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-out-3" size="lg" is_content_inside={false}>
<:title>Large (lg)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-out-2" is_content_inside={false}>
<:title>Medium default (md)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-out-1" size="sm" is_content_inside={false}>
<:title>Small (sm)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
</:example>
<:code>{get_example_8_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="With background" id="accordion-9">
<:example>
<Accordion id="deposits-and-withdrawals-9-1" bg_color="bg-beerus">
<:title>Test accordion with backgound</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="deposits-and-withdrawals-9-2" bg_color="bg-beerus" is_content_inside={false}>
<:title>Test accordion with backgound: content outside</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
</:example>
<:code>{get_example_9_code()}</:code>
</ExampleAndCode>
<PropsTable title="Accordion props" data={@props_info_array} />
</Page>
"""
end
def get_example_1_code() do
"""
<Accordion id="deposits-and-withdrawals-1">
<:title>Deposit & Withdrawals</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
"""
end
def get_example_2_code() do
"""
<Accordion id="deposits-and-withdrawals-2" open_by_default>
<:title>Deposit & Withdrawals</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
"""
end
def get_example_3_code() do
"""
<Accordion id="deposits-and-withdrawals-3" with_button={false}>
<:title>Deposit & Withdrawals</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
"""
end
def get_example_4_code() do
"""
<Accordion id="deposits-and-withdrawals-4" disabled>
<:title>Deposit & Withdrawals</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
"""
end
def get_example_5_code() do
"""
<Accordion id="basket-items" open_by_default is_content_inside={false}>
<:title>Basket Items</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
"""
end
def get_example_6_code() do
"""
<Accordion id="customer-support">
<:title>Customer support</:title>
<:header_content>
<ChatChat class="w-6 h-6" />
<ChatComment class="w-6 h-6" />
<ChatCommentAdd class="w-6 h-6" />
<ChatDoubleBubble class="w-6 h-6" />
</:header_content>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
"""
end
def get_example_7_code() do
"""
<Accordion id="size-4" size="xl">
<:title>X Large (xl)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-3" size="lg">
<:title>Large (lg)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-2">
<:title>Medium is default (md)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-1" size="sm">
<:title>Small (sm)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
"""
end
def get_example_8_code() do
"""
<Accordion id="size-out-4" size="xl" is_content_inside={false}>
<:title>X Large</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-out-3" size="lg" is_content_inside={false}>
<:title>Large</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-out-2" is_content_inside={false}>
<:title>Medium (Default)</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="size-out-1" size="sm" is_content_inside={false}>
<:title>Small</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
"""
end
def get_example_9_code() do
"""
<Accordion id="deposits-and-withdrawals-9-1" bg_color="bg-beerus">
<:title>Test accordion with backgound</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
<Accordion id="deposits-and-withdrawals-9-2" bg_color="bg-beerus">
<:title>Test accordion with backgound: content outside</:title>
<:content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</:content>
</Accordion>
"""
end
end