From ffd48d30373ed43cc7532119439f44511919856c Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Fri, 8 Nov 2024 12:49:15 +0200
Subject: [PATCH] Add align option for Button component

---
 src/components/Button/index.js |  4 ++--
 src/pages/components.md        | 21 +++++++++++++++++++++
 src/scss/base/_content.scss    |  5 +++++
 src/scss/base/_utils.scss      |  1 +
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 50c4ca09..7af93955 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -2,8 +2,8 @@ import React from "react";
 import Link from '/src/components/Link';
 import clsx from "clsx";
 
-export default function Button ({variant, href, className, size, target, title, icon, stretched, children, ...props}) {
-  const btnClassName = clsx(`btn`, className, size && `btn-${size}`, stretched && `stretched-link position-static`);
+export default function Button ({variant, href, className, size, target, title, icon, stretched, align, children, ...props}) {
+  const btnClassName = clsx(`btn`, className, size && `btn-${size}`, stretched && `stretched-link position-static`, align === 'left' && `d-flex w-fit`, align === 'center' && `d-flex w-fit mx-auto`, align === 'right' && `d-flex w-fit ms-auto`)
   // will start with exactly one slash, and that anything else is external.
   const Icon = () => {
     return icon && (
diff --git a/src/pages/components.md b/src/pages/components.md
index a2981c19..28558081 100644
--- a/src/pages/components.md
+++ b/src/pages/components.md
@@ -642,6 +642,7 @@ description="Get an API key & make your first API call in minutes. Get an API ke
 
 
 ## Buttons
+By deffault, button acts as inline element.
 - **Code**
 
 ```jsx
@@ -651,6 +652,26 @@ description="Get an API key & make your first API call in minutes. Get an API ke
 ```
 Default <Button href="/dev-tools/">Default Button</Button>, small <Button size="sm" href="/developers/">Small Button</Button>, and large <Button size="lg" href="/resources/">Large Button</Button> buttons for different use cases.
 
+#### Align Button
+You can align the button to the left, center, or right. With align option button acts as a block element.
+
+- **Code**
+
+```jsx
+<Button href="/resources/" align="left">Left aligned Button</Button>
+<Button href="/resources/" align="center">Centered Button</Button>
+<Button href="/resources/" align="right">Right align Button</Button>
+```
+- **Render**
+
+<Button href="/resources/" align="left">Left aligned Button</Button>
+
+
+<Button href="/resources/" align="center">Centered Button</Button>
+
+
+<Button href="/resources/" align="right">Right aligned Button</Button>
+
 ## Badges
 Badges <Shield label="any text" title="you like" color="blue" /> <Shield label="build" title="passing" color="green" /> based on [shields.io](https://shields.io/)
 
diff --git a/src/scss/base/_content.scss b/src/scss/base/_content.scss
index 84c16775..36ab2ed2 100644
--- a/src/scss/base/_content.scss
+++ b/src/scss/base/_content.scss
@@ -168,6 +168,11 @@ ul{
   p > img:last-child{
     margin-bottom: 0;
   }
+
+  .btn.w-fit + .btn.w-fit{
+    margin-top: 12px;
+  }
+
   & > :first-child {
     margin-top: 0;
   }
diff --git a/src/scss/base/_utils.scss b/src/scss/base/_utils.scss
index 7c4e36b5..6516deb0 100644
--- a/src/scss/base/_utils.scss
+++ b/src/scss/base/_utils.scss
@@ -126,6 +126,7 @@ $utilities: map-merge(
           50: 50%,
           75: 75%,
           100: 100%,
+          fit: fit-content,
           auto: auto
         )
       ),