Merge pull request #148 from rsksmart/feat/button-component

Add align option for Button component

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 && (

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/)
 

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;
   }

src/scss/base/_utils.scss

@@ -126,6 +126,7 @@ $utilities: map-merge(
           50: 50%,
           75: 75%,
           100: 100%,
+          fit: fit-content,
           auto: auto
         )
       ),