refactor(components): rewrite PostsList component

* remove NoResults component and move logic to Search page
* add a usePostsList hook
* remove Pagination from PostsList (it is only used if javascript is
disabled and not on every posts list)
* replace `byYear` prop with `sortByYear`
* replace `loadMore` prop with `onLoadMore`
* remove `showLoadMoreBtn` (we can use `loadMore` prop instead to
determine if we need to display the button)
* replace `titleLevel` prop with `headingLvl`
* add `firstNewResult` prop to handle focus on the new results when
loading more article (we should not focus a useless span but the item
directly)

1 files changed, 40 insertions, 0 deletions

diff --git a/src/components/organisms/posts-list/posts-list.module.scss b/src/components/organisms/posts-list/posts-list.module.scss
new file mode 100644
index 0000000..fc0ef44
--- /dev/null
+++ b/src/components/organisms/posts-list/posts-list.module.scss
@@ -0,0 +1,40 @@
+@use "../../../styles/abstracts/functions" as fun;
+@use "../../../styles/abstracts/mixins" as mix;
+@use "../../../styles/abstracts/placeholders";
+
+.section {
+  max-width: 100%;
+  margin-block-end: var(--spacing-md);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      display: grid;
+      grid-template-columns: var(--col1, auto) minmax(0, 1fr);
+      align-items: first baseline;
+      gap: var(--gap, var(--spacing-lg));
+    }
+  }
+}
+
+:where(.section) .year {
+  @extend %h2;
+
+  margin-bottom: var(--spacing-md);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-column: 1;
+      position: sticky;
+      top: var(--spacing-xs);
+      justify-self: end;
+    }
+  }
+}
+
+.progress {
+  margin-block: var(--spacing-md);
+}
+
+.btn {
+  margin-inline: auto;
+}