From b164be81fd015d7db4b6e435dfb23cca953b3eaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Caetano?= <53317012+caetano1@users.noreply.github.com> Date: Thu, 26 Nov 2020 12:10:55 -0300 Subject: [PATCH 1/4] Update README with warning message Add a warning message that this project is unfinished. --- docs/README.md | 92 +++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 73 insertions(+), 19 deletions(-) diff --git a/docs/README.md b/docs/README.md index d5bc394..394bc0a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,41 +1,80 @@ -First of all (even before the block's name), its README.md should contain the following sentence at the very beginning: +📢 Use this project, [contribute](https://github.com/{OrganizationName}/{AppName}) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion). -`= Use this project, [contribute](https://github.com/{OrganizationName/{AppName}) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).` +# CHECKOUT PAYMENT -# BLOCK NAME +⚠️⚠️ **This is an ongoing, unsupported, and undocumented project. We do not guarantee any results after installation.** ⚠️⚠️ -Under the block's name, you should explain the topic, giving a **brief description** of the **block's functionality** in a store. + + +[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-) + + -Next, **add media** (either an image of a GIF) with the rendered block, so that users can better understand how the block works in practice. +Under the app's name, you should explain the topic, giving a **brief description** of its **functionality** in a store when installed. + +Next, **add media** (either an image of a GIF) with the rendered components, so that users can better understand how the app works in practice. ![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png) ## Configuration -In this section, you first must **add the primary instructions** that will allow users to use the block in their store, such as adding the block's app as a dependency in the `manifest.json` and declaring the block itself in a given template. +In this section, you first must **add the primary instructions** that will allow users to use the app's blocks in their store, such as: + +1. Adding the app as a theme dependency in the `manifest.json` file; +2. Declaring the app's main block in a given theme template or inside another block from the theme. + +Remember to add a table with all blocks exported by the app and their descriptions. You can verify an example of it on the [Search Result documentation](https://vtex.io/docs/components/all/vtex.search-result@3.56.1/). + +Next, add the **props table** containing your block's props. + +If the app exports more than one block, create several tables - one for each block. For example: + +### `block-1` props + +| Prop name | Type | Description | Default value | +| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | +| `XXXXX` | `XXXXXX` | XXXXXXXX | `XXXXXX` | + + +### `block-2` props + +| Prop name | Type | Description | Default value | +| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | +| `XXXXX` | `XXXXXX` | XXXXXXXX | `XXXXXX` | + +Prop types are: + +- `string` +- `enum` +- `number` +- `boolean` +- `object` +- `array` -Next, add the **block's props table**: +When documenting a prop whose type is `object` or `array` another prop table will be needed. You can create it following the example below: + +- `propName` object: | Prop name | Type | Description | Default value | | ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | `XXXXX` | `XXXXXX` | XXXXXXXX | `XXXXXX` | -Remember to also **showcase any necessary disclaimer** related to the block in this section, such as the different behavior it may display during its configuration. +Remember to also use this Configuration section to **showcase any necessary disclaimer** related to the app and its blocks, such as the different behavior it may display during its configuration. ## Modus Operandi *(not mandatory)* -There are scenarios in which a block can behave differently in a store, according to how it was added to the catalog, for example. It's crucial to go through these **behavioral changes** in this section, allowing users to fully understand the **practical application** of the block in their store. +There are scenarios in which an app can behave differently in a store, according to how it was added to the catalog, for example. It's crucial to go through these **behavioral changes** in this section, allowing users to fully understand the **practical application** of the app in their store. -If you feel compelled to give further details about the block, such as it's **relationship with the VTEX admin**, don't hesitate to use this section. +If you feel compelled to give further details about the app, such as it's **relationship with the VTEX admin**, don't hesitate to use this section. ## Customization -The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in blocks: +The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in apps: `In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).` -Thereafter, you should add a single column table with the available CSS handles for that block: +Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically. | CSS Handles | | ----------- | @@ -48,15 +87,30 @@ Thereafter, you should add a single column table with the available CSS handles If there are none, add the following sentence instead: -`The component still doesn't have CSS Handles for its specific customization.` +`No CSS Handles are available yet for the app customization.` ---- + -Check out some documentation models that are already live: -- [Breadcrumb](https://github.com/vtex-apps/breadcrumb) -- [Image](https://vtex.io/docs/components/general/vtex.store-components/image) +## Contributors ✨ + +Thanks goes to these wonderful people: + + + + + + + + +This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome! + -**Upcoming documentation:** +---- - - [Checkout payment](https://github.com/vtex-apps/checkout-payment/pull/1) \ No newline at end of file +Check out some documentation models that are already live: +- [Breadcrumb](https://github.com/vtex-apps/breadcrumb) +- [Image](https://vtex.io/docs/components/general/vtex.store-components/image) +- [Condition Layout](https://vtex.io/docs/components/all/vtex.condition-layout@1.1.6/) +- [Add To Cart Button](https://vtex.io/docs/components/content-blocks/vtex.add-to-cart-button@0.9.0/) +- [Store Form](https://vtex.io/docs/components/all/vtex.store-form@0.3.4/) From 2f25de3a8f5a3078fa1feaaba9a8f516d251cc08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Caetano?= <53317012+caetano1@users.noreply.github.com> Date: Thu, 17 Dec 2020 17:15:25 -0300 Subject: [PATCH 2/4] Apply suggestions from code review Co-authored-by: Bia <52087100+guerreirobeatriz@users.noreply.github.com> --- docs/README.md | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/docs/README.md b/docs/README.md index 394bc0a..34969d6 100644 --- a/docs/README.md +++ b/docs/README.md @@ -87,7 +87,7 @@ Thereafter, you should add a single column table with the available CSS handles If there are none, add the following sentence instead: -`No CSS Handles are available yet for the app customization.` +No CSS Handles are available yet for the app customization. @@ -106,11 +106,3 @@ This project follows the [all-contributors](https://github.com/all-contributors/ ----- - -Check out some documentation models that are already live: -- [Breadcrumb](https://github.com/vtex-apps/breadcrumb) -- [Image](https://vtex.io/docs/components/general/vtex.store-components/image) -- [Condition Layout](https://vtex.io/docs/components/all/vtex.condition-layout@1.1.6/) -- [Add To Cart Button](https://vtex.io/docs/components/content-blocks/vtex.add-to-cart-button@0.9.0/) -- [Store Form](https://vtex.io/docs/components/all/vtex.store-form@0.3.4/) From c616117a1bc9480a670d4a113d9ccd3475113355 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Caetano?= <53317012+caetano1@users.noreply.github.com> Date: Thu, 17 Dec 2020 17:15:59 -0300 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Bia <52087100+guerreirobeatriz@users.noreply.github.com> --- docs/README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/README.md b/docs/README.md index 34969d6..130ba73 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,8 +1,8 @@ -📢 Use this project, [contribute](https://github.com/{OrganizationName}/{AppName}) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion). +📢 Use this project, [contribute](https://github.com/vtex-apps/checkout-payment) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion). -# CHECKOUT PAYMENT +# Checkout Payment -⚠️⚠️ **This is an ongoing, unsupported, and undocumented project. We do not guarantee any results after installation.** ⚠️⚠️ +> :warning: *Although ready to be installed, the Checkout Payment app is currently an **open-beta project**. Bear in mind that due to that status, you can expect an accelerated state of evolution.* @@ -105,4 +105,3 @@ Thanks goes to these wonderful people: This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome! - From 905f82f161e24905f93b9d84302716aad4e2e2ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Caetano?= <53317012+caetano1@users.noreply.github.com> Date: Thu, 17 Dec 2020 17:18:37 -0300 Subject: [PATCH 4/4] Update README.md --- docs/README.md | 74 +++----------------------------------------------- 1 file changed, 4 insertions(+), 70 deletions(-) diff --git a/docs/README.md b/docs/README.md index 130ba73..49250f3 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,85 +10,19 @@ -Under the app's name, you should explain the topic, giving a **brief description** of its **functionality** in a store when installed. - -Next, **add media** (either an image of a GIF) with the rendered components, so that users can better understand how the app works in practice. - -![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png) +:construction: To be completed. ## Configuration -In this section, you first must **add the primary instructions** that will allow users to use the app's blocks in their store, such as: - -1. Adding the app as a theme dependency in the `manifest.json` file; -2. Declaring the app's main block in a given theme template or inside another block from the theme. - -Remember to add a table with all blocks exported by the app and their descriptions. You can verify an example of it on the [Search Result documentation](https://vtex.io/docs/components/all/vtex.search-result@3.56.1/). - -Next, add the **props table** containing your block's props. - -If the app exports more than one block, create several tables - one for each block. For example: - -### `block-1` props - -| Prop name | Type | Description | Default value | -| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -| `XXXXX` | `XXXXXX` | XXXXXXXX | `XXXXXX` | - - -### `block-2` props - -| Prop name | Type | Description | Default value | -| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -| `XXXXX` | `XXXXXX` | XXXXXXXX | `XXXXXX` | - -Prop types are: - -- `string` -- `enum` -- `number` -- `boolean` -- `object` -- `array` - -When documenting a prop whose type is `object` or `array` another prop table will be needed. You can create it following the example below: - -- `propName` object: - -| Prop name | Type | Description | Default value | -| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -| `XXXXX` | `XXXXXX` | XXXXXXXX | `XXXXXX` | - - -Remember to also use this Configuration section to **showcase any necessary disclaimer** related to the app and its blocks, such as the different behavior it may display during its configuration. +:construction: To be completed. ## Modus Operandi *(not mandatory)* -There are scenarios in which an app can behave differently in a store, according to how it was added to the catalog, for example. It's crucial to go through these **behavioral changes** in this section, allowing users to fully understand the **practical application** of the app in their store. - -If you feel compelled to give further details about the app, such as it's **relationship with the VTEX admin**, don't hesitate to use this section. +:construction: To be completed. ## Customization -The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in apps: - -`In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).` - -Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically. - -| CSS Handles | -| ----------- | -| `XXXXX` | -| `XXXXX` | -| `XXXXX` | -| `XXXXX` | -| `XXXXX` | - - -If there are none, add the following sentence instead: - -No CSS Handles are available yet for the app customization. - +:construction: To be completed. ## Contributors ✨