From b6052eb925a67a561ce813eb583042f6ffb52e6c Mon Sep 17 00:00:00 2001 From: frani Date: Tue, 5 Sep 2023 18:25:40 -0300 Subject: [PATCH 1/3] feat: add custom title in App Gallery --- src/components/AppGalleryButton/index.tsx | 9 ++++++++- src/stories/AppGalleryButton.stories.js | 9 +++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/AppGalleryButton/index.tsx b/src/components/AppGalleryButton/index.tsx index daa9b27..0dccfb0 100644 --- a/src/components/AppGalleryButton/index.tsx +++ b/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 = ({ theme = "light", height, + title = "EXPLORE IT ON", width, className, url, @@ -56,7 +63,7 @@ const AppGalleryButton: FC = ({ storeName={"AppGallery"} logo={Huawei} className={className} - title={"EXPLORE IT ON"} + title={title} /> ); }; diff --git a/src/stories/AppGalleryButton.stories.js b/src/stories/AppGalleryButton.stories.js index 3bdd36d..ce11bb4 100644 --- a/src/stories/AppGalleryButton.stories.js +++ b/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", + }, +}; From 8a3b3f5a5128345d15a19091de94add7714d3403 Mon Sep 17 00:00:00 2001 From: frani Date: Tue, 5 Sep 2023 18:27:25 -0300 Subject: [PATCH 2/3] feat: add custom title in App Store --- src/components/AppStoreButton/index.tsx | 9 ++++++++- src/stories/AppStoreButton.stories.js | 9 +++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/AppStoreButton/index.tsx b/src/components/AppStoreButton/index.tsx index adbfe43..7a08358 100644 --- a/src/components/AppStoreButton/index.tsx +++ b/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 = ({ theme = "light", height, + title = "Download on the", width, className, url, @@ -57,7 +64,7 @@ const AppStoreButton: FC = ({ storeName={"App Store"} logo={theme === "dark" ? AppStoreLight : AppStore} className={className} - title={"Download on the"} + title={title} /> ); }; diff --git a/src/stories/AppStoreButton.stories.js b/src/stories/AppStoreButton.stories.js index b8d4729..4a95fb7 100644 --- a/src/stories/AppStoreButton.stories.js +++ b/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", + }, +}; From 0f16c399795d7f05e8ef4ce631c42e631074dafb Mon Sep 17 00:00:00 2001 From: frani Date: Tue, 5 Sep 2023 18:28:52 -0300 Subject: [PATCH 3/3] feat: add custom title in Google Play --- src/components/GooglePlayButton/index.tsx | 12 +++++++++--- src/stories/GooglePlayButton.stories.js | 7 +++---- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/GooglePlayButton/index.tsx b/src/components/GooglePlayButton/index.tsx index b92a3fa..b7beb71 100644 --- a/src/components/GooglePlayButton/index.tsx +++ b/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 - * @returns + * @returns */ const GooglePlayButton: FC = ({ theme = "light", height, + title = "GET IT ON", width, className, url, @@ -56,7 +62,7 @@ const GooglePlayButton: FC = ({ storeName={"Google Play"} logo={GooglePlay} className={className} - title={"GET IT ON"} + title={title} /> ); }; diff --git a/src/stories/GooglePlayButton.stories.js b/src/stories/GooglePlayButton.stories.js index 94d553c..8eadf1a 100644 --- a/src/stories/GooglePlayButton.stories.js +++ b/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", }, };