feat: Button component with icon (#6259)

* feat: button with icon

* chore: story example updated

app/[locale]/error.tsx

···
 'use client';
 
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import { captureException } from '@sentry/nextjs';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
···
         <p className="-mt-4 max-w-sm text-center text-lg">
           {t('layouts.error.internalServerError.description')}
         </p>
-        <Button href="/">{t('layouts.error.backToHome')}</Button>
+        <Button href="/">
+          {t('layouts.error.backToHome')}
+          <ArrowRightIcon />
+        </Button>
       </main>
     </CenteredLayout>
   );

app/[locale]/not-found.tsx

···
 'use client';
 
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
···
         <p className="-mt-4 max-w-sm text-center text-lg">
           {t('layouts.error.notFound.description')}
         </p>
-        <Button href="/">{t('layouts.error.backToHome')}</Button>
+        <Button href="/">
+          {t('layouts.error.backToHome')}
+          <ArrowRightIcon />
+        </Button>
       </main>
     </CenteredLayout>
   );

app/global-error.tsx

···
 'use client';
 
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import { captureException } from '@sentry/nextjs';
 import ErrorComponent from 'next/error';
 import type { FC } from 'react';
···
               <p className="-mt-4 max-w-sm text-center text-lg">
                 This page has thrown a non-recoverable error.
               </p>
-              <Button href="/">Back to Home</Button>
+              <Button href="/">
+                Back to Home
+                <ArrowRightIcon />
+              </Button>
             </main>
           </CenteredLayout>
         </BaseLayout>

components/Common/Button/index.module.css

···
 .button {
   @apply relative
+    inline-flex
+    items-center
+    gap-2
     px-4.5
     py-2.5
     text-center
     font-semibold;
+
+  svg {
+    @apply size-5;
+  }
 
   &[aria-disabled='true'] {
     @apply cursor-not-allowed;

components/Common/Button/index.stories.tsx

···
+import { ArrowRightIcon } from '@heroicons/react/24/solid';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 import Button from '@/components/Common/Button';
···
   args: {
     kind: 'special',
     children: 'Download Node (LTS)',
+    disabled: false,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    kind: 'primary',
+    children: (
+      <>
+        Back to Home
+        <ArrowRightIcon />
+      </>
+    ),
     disabled: false,
   },
 };

components/Common/CodeBox/index.module.css

···
     }
 
     & > .action {
-      @apply flex
-        items-center
-        gap-2
-        px-3
+      @apply px-3
         py-1.5
         font-medium;
     }

components/Common/Pagination/index.module.css

···
 
 .previousButton,
 .nextButton {
-  @apply flex
-    items-center
-    gap-2
-    text-sm;
+  @apply text-sm;
 }
 
 .previousButton {

components/Downloads/DownloadButton/index.module.css

···
 .downloadButton {
-  @apply flex-row
-    items-center
-    justify-center
-    gap-2;
+  @apply justify-center;
+
+  &.primary {
+    @apply inline-flex
+      dark:hidden;
+  }
+
+  &.special {
+    @apply hidden
+      dark:inline-flex;
+  }
 
   svg {
-    @apply size-5
-      dark:opacity-50;
+    @apply dark:opacity-50;
   }
 }

components/Downloads/DownloadButton/index.tsx

···
       <Button
         kind="special"
         href={downloadLink}
-        className={classNames(styles.downloadButton, 'hidden dark:flex')}
+        className={classNames(styles.downloadButton, styles.special)}
       >
         {children}
 
···
       <Button
         kind="primary"
         href={downloadLink}
-        className={classNames(styles.downloadButton, 'flex dark:hidden')}
+        className={classNames(styles.downloadButton, styles.primary)}
       >
         {children}