Merge pull request #489 from PayButton/feat/size-prop

Feat/size prop

Author: chedieck

docs/README.md

@@ -1069,6 +1069,34 @@ disableSound = false
 ```
 <!-- tabs:end -->
 
+## size
+
+> **The ‘size’ parameter will adjust the size of the button.**
+
+?> The size parameter is optional and supports the following predefined string values: 'xs' (extra small), 'sm' (small), 'md' (medium), 'lg' (large), and 'xl' (extra large). If not specified, the default value is 'md'. You can also use the aliases 'extrasmall', 'small', 'medium', 'large', and 'extralarge', which correspond to 'xs', 'sm', 'md', 'lg', and 'xl', respectively.
+
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+size="sm"
+```
+
+#### ** JavaScript **
+
+```javascript
+size: "sm"
+```
+
+#### ** React **
+
+```react
+size = "sm"
+```
+<!-- tabs:end -->
 # Contribute
 
 PayButton is a community-driven open-source initiative. Contributions from the community are _crucial_ to the success of the project.

docs/zh-cn/README.md

@@ -1066,6 +1066,37 @@ disableSound = false
 ```
 <!-- tabs:end -->
 
+## size
+
+> **‘size’参数用于调整按钮的大小。**
+
+?> size 参数是可选的，支持以下预定义的字符串值：'xs'（特小）、'sm'（小）、'md'（中）、'lg'（大）和 'xl'（特大）。如果未指定，将默认使用 'md'。你也可以使用别名 'extrasmall'、'small'、'medium'、'large' 和 'extralarge'，它们分别对应 'xs'、'sm'、'md'、'lg' 和 'xl'。
+
+
+
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+size="sm"
+```
+
+#### ** JavaScript **
+
+```javascript
+size: "sm"
+```
+
+#### ** React **
+
+```react
+size = "sm"
+```
+<!-- tabs:end -->
+
 # 贡献
 
 PayButton是一个社群主导的开放源代码促进会。此项目的成功关键在于对社群的贡献。

docs/zh-tw/README.md

@@ -1035,6 +1035,36 @@ autoClose: false
 autoClose = false
 ```
 <!-- tabs:end -->
+## size
+
+> **「size」參數用於調整按鈕的大小。**
+
+?> size 參數為選填，支援以下預設的字串值：'xs'（特小）、'sm'（小）、'md'（中）、'lg'（大）以及 'xl'（特大）。若未指定，預設值為 'md'。你也可以使用別名 'extrasmall'、'small'、'medium'、'large' 和 'extralarge'，這些別名會分別對應到 'xs'、'sm'、'md'、'lg' 和 'xl'。
+
+
+
+**Example:**
+<!-- tabs:start -->
+
+#### ** HTML **
+
+```html
+size="sm"
+```
+
+#### ** JavaScript **
+
+```javascript
+size: "sm"
+```
+
+#### ** React **
+
+```react
+size = "sm"
+```
+<!-- tabs:end -->
+
 
 ## disable-sound
 

paybutton/dev/demo/index.html

@@ -25,17 +25,17 @@
   <div class="buttons-section">
     <div id="my_button"></div>
     <div class="paybutton" to="bitcoincash:qzy3s3qk8py0qvl97syex7tgap22pa2xfupwc4n659" amount="5" currency="USD"
-      display-currency="BCH"></div>
+      display-currency="BCH" size="sm"></div>
 
     <div class="paybutton" to="ecash:qp2v7kemclu7mv5y3h9qprwp0mrevkqt9gprvmm7yl"
       theme='{ "palette": { "primary": "#FF00FF", "secondary": "#ffffff", "tertiary": "#333333"} }'></div>
 
     <div class="paybutton" to="ecash:qp2v7kemclu7mv5y3h9qprwp0mrevkqt9gprvmm7yl" text="Purchase" amount="0.01"
       currency="CAD" goal-amount="2.5" success-text="WOW!" on-close="myClose" on-open="myOpen"
-      on-success="mySuccessFunction" on-transaction="myTransactionFunction" editable="true"></div>
+      on-success="mySuccessFunction" on-transaction="myTransactionFunction" editable="true" size="lg"></div>
 
     <div class="paybutton" to="bitcoincash:qzy3s3qk8py0qvl97syex7tgap22pa2xfupwc4n659" goal-amount="0.3" amount="0.05"
-      currency="BCH" text="Purchase" on-transaction="myTransactionFunction"></div>
+      currency="BCH" text="Purchase" on-transaction="myTransactionFunction" size="xl"></div>
 
     <div class="paybutton" to="ecash:qp2v7kemclu7mv5y3h9qprwp0mrevkqt9gprvmm7yl" goal-amount="2500.05" currency="USD"
       text="Donate (other dev)" on-success="mySuccessFunction" on-transaction="myTransactionFunction" disable-altpayment="false"></div>
@@ -206,6 +206,7 @@
       onSuccess: mySuccessFunction,
       onTransaction: myTransactionFunction,
       randomSatoshis: true,
+      size: 'xs'
     }
 
     PayButton.render(document.getElementById('my_button'), config)

paybutton/dev/demo/paybutton-generator.html

@@ -119,15 +119,26 @@
               <input id="successText" v-model="paybuttonProps.successText" type="text">
             </div>
           </div>
+          <div class="form-input">
+            <label for="hoverText">Hover Text:</label>
+            <input id="hoverText" v-model="paybuttonProps.hoverText" type="text">
+          </div>
           <div style="display: flex; justify-content: space-between; gap:10px">
-            <div class="form-input">
-              <label for="hoverText">Hover Text:</label>
-              <input id="hoverText" v-model="paybuttonProps.hoverText" type="text">
-            </div>
-            <div class="form-input">
+            <div class="form-input" style="width:100%">
               <label for="transactionText">Transaction Text:</label>
               <input id="transactionText" v-model="paybuttonProps.transactionText" type="text">
             </div>
+            <div class="form-input">
+              <label for="hoverText" style="width: 20%;">Size:</label>
+              <select id="paybutton-type" v-model="paybuttonProps.size" class="selector">
+                <option value="xs">Extra Small</option>
+                <option value="sm">Small</option>
+                <option value="md">Regular</option>
+                <option value="lg">Large</option>
+                <option value="xl">Extra Large</option>
+              </select>
+            </div>
+
           </div>
           <div class="form-input">
             <label for="theme">Theme:</label>

paybutton/dev/demo/style.css

@@ -10,11 +10,12 @@
   padding: 10px;
 }
 .buttons-section {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 20px;
-  padding: 50px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: center;
+  padding: 20px;
 }
 .widgets-section {
   display: grid;

paybutton/src/index.tsx

@@ -104,6 +104,7 @@ const allowedProps = [
   'autoClose',
   'disableSound',
   'transactionText',
+  'size'
 ];
 
 const requiredProps = [
@@ -224,6 +225,7 @@ function findAndRender<T>(className: string, Component: React.ComponentType<any>
 
       //    el.classList.remove(className);
 
+
       render(<Component {...props} />, el)
     });
 }

react/lib/components/Button/Button.tsx

@@ -3,6 +3,7 @@ import { CreateCSSProperties } from '@material-ui/styles';
 import React, { useRef, useState, useLayoutEffect } from 'react';
 
 import { Theme, ThemeName, useTheme } from '../../themes';
+import { ButtonSize } from '../../util';
 
 export type animation = 'slide' | 'invert' | 'none' | undefined;
 
@@ -13,70 +14,117 @@ export interface ButtonProps {
   theme?: ThemeName | Theme;
   disabled?: boolean;
   onClick?: () => void;
+  size?: ButtonSize;
+  sizeScaleAlreadyApplied?: boolean;
 }
 
 interface StyleProps {
   animation: animation;
   theme: Theme;
+  size: ButtonProps['size'];
+  sizeScaleAlreadyApplied: ButtonProps['sizeScaleAlreadyApplied'];
 }
 
 const useStyles = makeStyles({
-  container: {
-    fontSize: '0.8rem !important',
-  },
-  button: ({ theme, ...props }: StyleProps): CreateCSSProperties => ({
-    background: `${theme.palette.secondary} !important`,
-    transition: '0.6s !important',
-    ...(props.animation === 'slide'
-      ? {
-          background: `linear-gradient(45deg, ${theme.palette.primary} 50%, ${theme.palette.secondary} 50%) 100% center / 300% !important`,
-          backgroundSize: '300% !important',
-          backgroundPosition: '100% !important',
-          transition: 'background-position 0.8s, color 0.15s !important',
+  container: ({ size }: StyleProps) => {
+    switch (size) {
+      case 'xs': 
+      case "extrasmall":
+        return {
+          fontSize: '0.6rem !important',
         }
-      : {}),
-    color: `${theme.palette.primary} !important`,
-    minWidth: '14em !important',
-    padding: '0.618em 1.618em !important',
-    margin: 'auto !important',
-    boxShadow: '3px 3px 3px rgba(0, 0, 0, 0.08) !important',
-    border: `2px solid ${theme.palette.primary} !important`,
-    borderRadius: '10px !important',
-    fontSize: '1em !important',
-    textTransform: 'none',
-    '&:hover': {
-      ...(props.animation === 'slide'
-        ? {
-            backgroundPosition: '0 !important',
-            color: `${theme.palette.secondary} !important`,
-          }
-        : {}),
-      ...(props.animation === 'invert'
-        ? {
-            background: `${theme.palette.primary} !important`,
-            color: `${theme.palette.secondary} !important`,
-          }
-        : {}),
-      ...(props.animation === 'none'
+      case 'sm':
+      case "small":
+        return {
+          fontSize: '0.7rem !important',
+        }
+      case 'lg':
+      case "large":
+        return {
+          fontSize: '1rem !important',
+        }
+      case 'xl':
+      case "extralarge":
+        return {
+          fontSize: '1.2rem !important',
+        }
+      default:
+        return {
+          fontSize: '0.8rem !important',
+        }
+    }
+  },
+  button: ({ theme, animation, size }: StyleProps): CreateCSSProperties => {
+
+    const radiusBySize = {
+      xs: '5px',
+      extrasmall: '5px',
+      sm: '7px',
+      small: '7px',
+      lg: '12px',
+      large: '12px',
+      xl: '13px',
+      extralarge: '13px',
+      md: '10px',
+      medium: '10px'
+    };
+  
+    const borderRadius = radiusBySize[(size ?? 'default') as keyof typeof radiusBySize];
+
+    return {
+      background: `${theme.palette.secondary} !important`,
+      transition: '0.6s !important', 
+      ...(animation === 'slide'
         ? {
-            background: `${theme.palette.secondary} !important`,
-            color: `${theme.palette.primary} !important`,
+            background: `linear-gradient(45deg, ${theme.palette.primary} 50%, ${theme.palette.secondary} 50%) 100% center / 300% !important`,
+            backgroundSize: '300% !important',
+            backgroundPosition: '100% !important',
+            transition: 'background-position 0.8s, color 0.15s !important',
           }
         : {}),
-    },
-    '& .MuiTouchRipple-root': {
-      margin: -2,
-      color: '#00000044 !important',
-    },
-    '&:disabled span': {
-      filter: 'blur(2px)',
-      color: 'rgba(0, 0, 0, 0.5)',
-    },
-  }),
+      color: `${theme.palette.primary} !important`,
+      minWidth: '14em !important',
+      padding: '0.618em 1.618em !important',
+      margin: 'auto !important',
+      boxShadow: '3px 3px 3px rgba(0, 0, 0, 0.08) !important',
+      border: `2px solid ${theme.palette.primary} !important`,
+      borderRadius: `${borderRadius} !important`,
+      fontSize: '1em !important',
+      textTransform: 'none',
+      '&:hover': {
+        ...(animation === 'slide'
+          ? {
+              backgroundPosition: '0 !important',
+              color: `${theme.palette.secondary} !important`,
+            }
+          : {}),
+        ...(animation === 'invert'
+          ? {
+              background: `${theme.palette.primary} !important`,
+              color: `${theme.palette.secondary} !important`,
+            }
+          : {}),
+        ...(animation === 'none'
+          ? {
+              background: `${theme.palette.secondary} !important`,
+              color: `${theme.palette.primary} !important`,
+            }
+          : {}),
+      },
+      '& .MuiTouchRipple-root': {
+        margin: -2,
+        color: '#00000044 !important',
+      },
+      '&:disabled span': {
+        filter: 'blur(2px)',
+        color: 'rgba(0, 0, 0, 0.5)',
+      },
+    };
+  },
 });
 
 export const Button = (props: ButtonProps): React.ReactElement => {
-  const { animation, text, hoverText, disabled } = Object.assign(
+  const { animation, text, hoverText, disabled, size, sizeScaleAlreadyApplied } = Object.assign(
     {},
     Button.defaultProps,
     props,
@@ -88,7 +136,7 @@ export const Button = (props: ButtonProps): React.ReactElement => {
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   const theme = useTheme(props.theme);
-  const styleProps: StyleProps = { animation, theme };
+  const styleProps: StyleProps = { animation, theme, size, sizeScaleAlreadyApplied };
   const classes = useStyles(styleProps);
 
   useLayoutEffect(() => {
@@ -141,6 +189,8 @@ const buttonDefaultProps: ButtonProps = {
   text: 'Donate',
   hoverText: 'Send Payment',
   disabled: false,
+  size: 'medium',
+  sizeScaleAlreadyApplied: false,
 };
 
 Button.defaultProps = buttonDefaultProps;