chore: add a Summary component

2 files changed, 24 insertions, 3 deletions

diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx
index 6fe786b..92b7521 100644
--- a/src/components/atoms/buttons/button-link.stories.tsx
+++ b/src/components/atoms/buttons/button-link.stories.tsx
@@ -28,6 +28,19 @@ export default {
         required: true,
       },
     },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the button link.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     kind: {
       control: {
         type: 'select',
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx
index 81229c8..77a7f7b 100644
--- a/src/components/atoms/buttons/button-link.tsx
+++ b/src/components/atoms/buttons/button-link.tsx
@@ -8,6 +8,10 @@ export type ButtonLinkProps = {
    */
   'aria-label'?: string;
   /**
+   * Set additional classnames to the button link.
+   */
+  className?: string;
+  /**
    * True if it is an external link. Default: false.
    */
   external?: boolean;
@@ -18,7 +22,7 @@ export type ButtonLinkProps = {
   /**
    * ButtonLink shape. Default: rectangle.
    */
-  shape?: 'rectangle' | 'square';
+  shape?: 'circle' | 'rectangle' | 'square';
   /**
    * Define an URL as target.
    */
@@ -32,6 +36,7 @@ export type ButtonLinkProps = {
  */
 const ButtonLink: FC<ButtonLinkProps> = ({
   children,
+  className,
   target,
   kind = 'secondary',
   shape = 'rectangle',
@@ -44,14 +49,17 @@ const ButtonLink: FC<ButtonLinkProps> = ({
   return external ? (
     <a
       href={target}
-      className={`${styles.btn} ${kindClass} ${shapeClass}`}
+      className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
       {...props}
     >
       {children}
     </a>
   ) : (
     <Link href={target}>
-      <a className={`${styles.btn} ${kindClass} ${shapeClass}`} {...props}>
+      <a
+        className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
+        {...props}
+      >
         {children}
       </a>
     </Link>