From 388e687857345c85ee550cd5da472675e05a6ff5 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 26 Sep 2023 18:43:11 +0200
Subject: refactor(components): rewrite Button and ButtonLink components

Both:
* move styles to Sass placeholders

Button:
* add `isPressed` prop to Button
* add `isLoading` prop to Button (to differentiate state from
disabled)

ButtonLink:
* replace `external` prop with `isExternal` prop
* replace `href` prop with `to` prop
---
 src/components/templates/layout/layout.tsx           |  2 +-
 .../templates/page/page-layout.stories.tsx           | 20 +++++++++-----------
 2 files changed, 10 insertions(+), 12 deletions(-)

(limited to 'src/components/templates')

diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index 7c97901..b284e29 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -236,7 +236,7 @@ export const Layout: FC<LayoutProps> = ({
         <div className={styles['noscript-spacing']} />
       </noscript>
       <span ref={topRef} tabIndex={-1} />
-      <ButtonLink target="#main" className="screen-reader-text">
+      <ButtonLink className="screen-reader-text" to="#main">
         {skipToContent}
       </ButtonLink>
       <Header
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 146204e..68df415 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ButtonLink, Heading, Link } from '../../atoms';
 import { LinksListWidget, PostsList, Sharing } from '../../organisms';
 import { comments } from '../../organisms/layout/comments-list.fixture';
@@ -287,7 +287,7 @@ Post.args = {
   footerMeta: {
     custom: {
       label: 'Read more about:',
-      value: <ButtonLink target="#">Topic 1</ButtonLink>,
+      value: <ButtonLink to="#">Topic 1</ButtonLink>,
     },
   },
   children: (
@@ -335,7 +335,7 @@ Post.args = {
     />,
   ],
   withToC: true,
-  comments: comments,
+  comments,
   allowComments: true,
 };
 
@@ -363,14 +363,12 @@ Blog.args = {
   title: 'Blog',
   headerMeta: { total: posts.length },
   children: (
-    <>
-      <PostsList
-        posts={posts}
-        byYear={true}
-        total={posts.length}
-        searchPage="#"
-      />
-    </>
+    <PostsList
+      posts={posts}
+      byYear={true}
+      total={posts.length}
+      searchPage="#"
+    />
   ),
   widgets: [
     <LinksListWidget
-- 
cgit v1.2.3