Merge pull request #179 from reusejs/StoreButtonFix

Store button fix

Author: ShreyDhyani

.changeset/curvy-ducks-swim.md

@@ -0,0 +1,5 @@
+---
+"@reusejs/react": patch
+---
+
+Store Button Enhancements

apps/storybook/src/stories/docs/StoreButton.docs.tsx

@@ -4,8 +4,9 @@ This is sample templates of store buttons. Both Play store and app store.
 This template only accept two props:
 1. **storeName** : Which can have two values **\`google\`** and **\`apple\`**, one for each store. This prop is **mandatory**
 2. **mode** : This prop can have two values **\`dark\`** and **\`light\`**, Default value is \`light\` if no value is given.
+3. **responsive** : This prop can have a boolean value i.e. *\`true\`* or *\`false\`*. Default value is true. If false is given the button will not be responsive. Sample3 and Sample6 shows the non-responsive button example while the other examples features a responsive button.
 
 > This is for demo pupose only. Please copy the code fragment for ButtonBase and use as you see fit for any radical customisation
 `;
 
-export default docs;
+export default docs;

apps/storybook/src/stories/templates/StoreButton.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import StoreButtonDocs from '../docs/StoreButton.docs';
-
 import { StoreButton } from '@reusejs/react';
 
 export default {
@@ -33,20 +32,33 @@ Sample2.args = {
   storeName: 'apple',
 };
 
+export const Sample3 = Template.bind({});
+Sample3.args = {
+  storeName: 'apple',
+  responsive: false,
+};
+
 const Template2: ComponentStory<typeof StoreButton> = (args) => (
   <div className='flex h-40 items-center justify-center bg-black'>
     <StoreButton {...args} />
   </div>
 );
 
-export const Sample3 = Template2.bind({});
-Sample3.args = {
+export const Sample4 = Template2.bind({});
+Sample4.args = {
   storeName: 'google',
   mode: 'dark',
 };
 
-export const Sample4 = Template2.bind({});
-Sample4.args = {
+export const Sample5 = Template2.bind({});
+Sample5.args = {
+  storeName: 'apple',
+  mode: 'dark',
+};
+
+export const Sample6 = Template2.bind({});
+Sample6.args = {
   storeName: 'apple',
   mode: 'dark',
+  responsive: false,
 };

packages/react/src/templates/StoreButtonTemplates/storeButton.tsx

@@ -7,14 +7,22 @@ import PlayStoreLogo from "./PlayStoreLogo";
 export interface StoreButtonInterface {
   storeName: "google" | "apple";
   mode?: "dark" | "light" | undefined;
+  responsive?: boolean;
+}
+
+export interface ContentProps {
+  responsive: boolean;
 }
 
 const appStoreText = ["Download on the", " App Store"];
 const playStoreText = ["GET IT ON", " Google Play"];
 
-const Play = () => {
+const Play = (props: ContentProps) => {
+  const style = props.responsive
+    ? "hidden md:ml-1 md:flex md:flex-col"
+    : "ml-1 flex flex-col";
   return (
-    <div className="ml-1 flex flex-col">
+    <div className={style}>
       <p className="text-left text-sm font-semibold leading-tight">
         {playStoreText[0]}
       </p>
@@ -23,9 +31,12 @@ const Play = () => {
   );
 };
 
-const App = () => {
+const App = (props: ContentProps) => {
+  const style = props.responsive
+    ? "hidden md:flex md:flex-col"
+    : "flex flex-col";
   return (
-    <div className="flex flex-col">
+    <div className={style}>
       <p className="w-full text-sm leading-tight">{appStoreText[0]}</p>
       <p className="w-full scale-x-125 text-lg font-bold leading-tight">
         {appStoreText[1]}
@@ -38,19 +49,29 @@ const StoreButton = (props: StoreButtonInterface) => {
   let parms = {
     backgroundColor: "bg-white hover:shadow-xl",
     border: "border-2 border-black",
-    font: "text-black",
+    borderRadius: props.responsive
+      ? "rounded-full md:rounded-md"
+      : "rounded-md",
+    textColor: "text-black",
+    padding: props.responsive ? "px-3 py-3 md:px-4 md:py-2" : "px-4 py-2",
   };
   if (props.mode === "dark") {
     parms = {
       ...parms,
       backgroundColor: "bg-black hover:shadow-lg hover:shadow-white	",
       border: "border-2 border-white",
-      font: "text-white",
+      textColor: "text-white",
     };
   }
   return (
     <ButtonBase
-      label={props.storeName === "google" ? <Play /> : <App />}
+      label={
+        props.storeName === "google" ? (
+          <Play responsive={props.responsive as boolean} />
+        ) : (
+          <App responsive={props.responsive as boolean} />
+        )
+      }
       buttonBaseClasses={{ ...parms }}
       buttonPrefix={
         props.storeName === "google" ? (
@@ -63,4 +84,9 @@ const StoreButton = (props: StoreButtonInterface) => {
   );
 };
 
+StoreButton.defaultProps = {
+  mode: "light",
+  responsive: true,
+};
+
 export default StoreButton;