Merge pull request #10 from frani/feature/custom-message

Feature/custom title

src/components/AppGalleryButton/index.tsx

@@ -9,6 +9,11 @@ type AppGalleryButtonProps = {
    */
   theme?: "dark" | "light";
 
+  /**
+   * @default "EXPLORE IT ON"
+   */
+  title: string;
+
   /**
    * @default 60px
    */
@@ -34,6 +39,7 @@ type AppGalleryButtonProps = {
  *
  * @param {string} theme Choose a theme between dark and light
  * @param {number} height Controls the height of the button
+ * @param {string} title Custom title in button
  * @param {number} width Controls the width of the button
  * @param {string} className Add className to the button in order to customize the button appearance
  * @param {string} url Add your store url to the button
@@ -43,6 +49,7 @@ type AppGalleryButtonProps = {
 const AppGalleryButton: FC<AppGalleryButtonProps> = ({
   theme = "light",
   height,
+  title = "EXPLORE IT ON",
   width,
   className,
   url,
@@ -56,7 +63,7 @@ const AppGalleryButton: FC<AppGalleryButtonProps> = ({
       storeName={"AppGallery"}
       logo={Huawei}
       className={className}
-      title={"EXPLORE IT ON"}
+      title={title}
     />
   );
 };

src/components/AppStoreButton/index.tsx

@@ -10,6 +10,11 @@ type AppStoreButtonProps = {
    */
   theme?: "dark" | "light";
 
+  /**
+   * @default "Download on the"
+   */
+  title: string;
+
   /**
    * @default 60px
    */
@@ -35,6 +40,7 @@ type AppStoreButtonProps = {
  *
  * @param {string} theme Choose a theme between dark and light
  * @param {number} height Controls the height of the button
+ * @param {number} height Controls the height of the button
  * @param {number} width Controls the width of the button
  * @param {string} className Add className to the button in order to customize the button appearance
  * @param {string} url Add your store url to the button
@@ -44,6 +50,7 @@ type AppStoreButtonProps = {
 const AppStoreButton: FC<AppStoreButtonProps> = ({
   theme = "light",
   height,
+  title = "Download on the",
   width,
   className,
   url,
@@ -57,7 +64,7 @@ const AppStoreButton: FC<AppStoreButtonProps> = ({
       storeName={"App Store"}
       logo={theme === "dark" ? AppStoreLight : AppStore}
       className={className}
-      title={"Download on the"}
+      title={title}
     />
   );
 };

src/components/GooglePlayButton/index.tsx

@@ -9,6 +9,11 @@ type GooglePlayButtonProps = {
    */
   theme?: "dark" | "light";
 
+  /**
+   * @default "GET IT ON"
+   */
+  title: string;
+
   /**
    * @default 60px
    */
@@ -31,18 +36,19 @@ type GooglePlayButtonProps = {
 };
 
 /**
- * 
+ *
  * @param {string} theme Choose a theme between dark and light
  * @param {number} height Controls the height of the button
  * @param {number} width Controls the width of the button
  * @param {string} className Add className to the button in order to customize the button appearance
  * @param {string} url Add your store url to the button
  * @example <GooglePlayButton theme="light" height={70} width={130} className="button-container" url="https://play.google.com/" />
- * @returns 
+ * @returns
  */
 const GooglePlayButton: FC<GooglePlayButtonProps> = ({
   theme = "light",
   height,
+  title = "GET IT ON",
   width,
   className,
   url,
@@ -56,7 +62,7 @@ const GooglePlayButton: FC<GooglePlayButtonProps> = ({
       storeName={"Google Play"}
       logo={GooglePlay}
       className={className}
-      title={"GET IT ON"}
+      title={title}
     />
   );
 };

src/stories/AppGalleryButton.stories.js

@@ -37,3 +37,12 @@ export const CustomWidth = {
     width: 160,
   },
 };
+
+/**
+ * Example: "EXPLORE IT ON"
+ */
+export const CustomTitle = {
+  args: {
+    title: "EXPLORE IT ON",
+  },
+};

src/stories/AppStoreButton.stories.js

@@ -37,3 +37,12 @@ export const CustomWidth = {
     width: 160,
   },
 };
+
+/**
+ * Example: title "Download on the"
+ */
+export const CustomTitle = {
+  args: {
+    title: "Download on the",
+  },
+};

src/stories/GooglePlayButton.stories.js

@@ -29,11 +29,10 @@ export const CustomHeight = {
 };
 
 /**
- * Example: width 160px
+ * Example: "GET IT ON"
  */
-export const CustomWidth = {
+export const CustomTitle = {
   args: {
-    theme: "dark",
-    width: 160,
+    title: "GET IT ON",
   },
 };