Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Add pagination example with page hrefs [MDS-615] #716

Merged
merged 4 commits into from
Sep 22, 2023
Merged

fix: Add pagination example with page hrefs [MDS-615] #716

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2e99240
href example
tkullisaar Sep 20, 2023
8f01460
button style fix
tkullisaar Sep 20, 2023
66eeeb3
add code example
tkullisaar Sep 20, 2023
005b258
Merge branch 'main' into MDS-615-2
tkullisaar Sep 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions lib/moon/design/pagination/next_button.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ defmodule Moon.Design.Pagination.NextButton do
@doc "Additional Tailwind classes for hover background"
prop(hover_bg_class, :css_class)

@doc "Visual/Logical variant of button"
@doc "Visual/Logical variant of button. Please use \"fill\", \"outline\", \"ghost\" instead of \"primary\", \"secondary\", \"tertiary\" "
prop(variant, :string,
values: ["primary", "secondary", "tertiary", "ghost"],
default: "secondary"
values: ["fill", "outline", "ghost", "primary", "secondary", "tertiary"],
default: "outline"
)

@doc "Size of button"
Expand Down
6 changes: 3 additions & 3 deletions lib/moon/design/pagination/prev_button.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ defmodule Moon.Design.Pagination.PrevButton do
@doc "Additional Tailwind classes for hover background"
prop(hover_bg_class, :css_class)

@doc "Visual/Logical variant of button"
@doc "Visual/Logical variant of button. Please use \"fill\", \"outline\", \"ghost\" instead of \"primary\", \"secondary\", \"tertiary\" "
prop(variant, :string,
values: ["primary", "secondary", "tertiary", "ghost"],
default: "secondary"
values: ["fill", "outline", "ghost", "primary", "secondary", "tertiary"],
default: "outline"
)

@doc "Size of button"
Expand Down
16 changes: 8 additions & 8 deletions lib/moon_web/examples/design/pagination_example/with_icons.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ defmodule MoonWeb.Examples.Design.PaginationExample.WithIcons do
use Moon.StatefulComponent
use MoonWeb, :example

alias Moon.Icons.ControlsChevronRight
alias Moon.Icons.ControlsChevronLeft
alias Moon.Icons.ControlsChevronRightSmall
alias Moon.Icons.ControlsChevronLeftSmall
alias Moon.Design.Pagination

prop(current_page, :integer, default: 1)
Expand All @@ -14,11 +14,11 @@ defmodule MoonWeb.Examples.Design.PaginationExample.WithIcons do
~F"""
<Pagination id="with_buttons" total_pages={26} value={@current_page} on_change="set_current_page">
<Pagination.PrevButton testid="prev_button">
<ControlsChevronLeft class="text-moon-24 rtl:rotate-180" />
<ControlsChevronLeftSmall class="text-moon-24 rtl:rotate-180" />
</Pagination.PrevButton>
<Pagination.Pages />
<Pagination.NextButton testid="next_button">
<ControlsChevronRight class="text-moon-24 rtl:rotate-180" />
<ControlsChevronRightSmall class="text-moon-24 rtl:rotate-180" />
</Pagination.NextButton>
</Pagination>
"""
Expand All @@ -31,8 +31,8 @@ defmodule MoonWeb.Examples.Design.PaginationExample.WithIcons do

def code() do
"""
alias Moon.Icons.ControlsChevronRight
alias Moon.Icons.ControlsChevronLeft
alias Moon.Icons.ControlsChevronRightSmall
alias Moon.Icons.ControlsChevronLeftSmall
alias Moon.Design.Pagination

prop(current_page, :integer, default: 1)
Expand All @@ -41,11 +41,11 @@ defmodule MoonWeb.Examples.Design.PaginationExample.WithIcons do
~F\"""
<Pagination id="with_buttons" total_pages={26} value={@current_page} on_change="set_current_page">
<Pagination.PrevButton>
<ControlsChevronLeft class="text-moon-24 rtl:rotate-180" />
<ControlsChevronLeftSmall class="text-moon-24 rtl:rotate-180" />
</Pagination.PrevButton>
<Pagination.Pages />
<Pagination.NextButton>
<ControlsChevronRight class="text-moon-24 rtl:rotate-180" />
<ControlsChevronRightSmall class="text-moon-24 rtl:rotate-180" />
</Pagination.NextButton>
</Pagination>
\"""
Expand Down
58 changes: 58 additions & 0 deletions lib/moon_web/examples/design/pagination_example/with_page_hrefs.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
defmodule MoonWeb.Examples.Design.PaginationExample.WithPageHrefs do
@moduledoc false

use Moon.StatefulComponent
use MoonWeb, :example

alias Moon.Icons.ControlsChevronRightSmall
alias Moon.Icons.ControlsChevronLeftSmall
alias Moon.Design.Pagination

prop(current_page, :integer, default: 1)

def render(assigns) do
~F"""
<Pagination id="with_buttons" total_pages={10} value={@current_page} on_change="set_current_page">
<Pagination.PrevButton testid="prev_button">
<ControlsChevronLeftSmall class="text-moon-24 rtl:rotate-180" />
</Pagination.PrevButton>
<Pagination.Pages />
<Pagination.NextButton testid="next_button">
<ControlsChevronRightSmall class="text-moon-24 rtl:rotate-180" />
</Pagination.NextButton>
</Pagination>
"""
end

def handle_event("set_current_page", %{"value" => page}, socket) do
{:noreply, push_redirect(socket, to: "/components/v2/pagination?page=#{page}")}
end

def code() do
"""
alias Moon.Icons.ControlsChevronRightSmall
alias Moon.Icons.ControlsChevronLeftSmall
alias Moon.Design.Pagination

prop(current_page, :integer, default: 1)

def render(assigns) do
~F\"""
<Pagination id="with_buttons" total_pages={10} value={@current_page} on_change="set_current_page">
<Pagination.PrevButton testid="prev_button">
<ControlsChevronLeftSmall class="text-moon-24 rtl:rotate-180" />
</Pagination.PrevButton>
<Pagination.Pages />
<Pagination.NextButton testid="next_button">
<ControlsChevronRightSmall class="text-moon-24 rtl:rotate-180" />
</Pagination.NextButton>
</Pagination>
\"""
end

def handle_event("set_current_page", %{"value" => page}, socket) do
{:noreply, push_redirect(socket, to: "/components/v2/pagination?page=#\{page}")}
end
"""
end
end
15 changes: 15 additions & 0 deletions lib/moon_web/pages/design/pagination_page.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ defmodule MoonWeb.Pages.Design.PaginationPage do

alias MoonWeb.Examples.Design.PaginationExample

alias MoonWeb.Components.ExampleAndCode

data(breadcrumbs, :any,
default: [
%{
Expand All @@ -25,6 +27,12 @@ defmodule MoonWeb.Pages.Design.PaginationPage do
]
)

data(current_page, :integer)

def mount(params, _session, socket) do
{:ok, assign(socket, current_page: String.to_integer(params["page"] || "1"))}
end

def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
Expand All @@ -45,6 +53,13 @@ defmodule MoonWeb.Pages.Design.PaginationPage do
PaginationExample.WithText
]} />

<ExampleAndCode title="With page hrefs" id="with_hrefs">
<:example>
<PaginationExample.WithPageHrefs id="with_hrefs" {=@current_page} />
</:example>
<:code>{PaginationExample.WithPageHrefs.code()}</:code>
</ExampleAndCode>

<PropsTable title="Pagination props" module={Moon.Design.Pagination} />
<PropsTable title="Pagination.PrevButton props" module={Moon.Design.Pagination.PrevButton} />
<PropsTable title="Pagination.NextButton props" module={Moon.Design.Pagination.NextButton} />
Expand Down