Add the styleguide docs #62
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
oscarpolanco
requested review from
fxisco,
jonwinton,
labreu05,
manuelurenah,
MariaFdezJ and
pedro-rosario
manuelurenah
reviewed
May 7, 2019
docs/style.md
Outdated
| --- | ||
|
|
||
|
|
||
| On `amphora-html` using the `data` and `meta` object that are the instances of the components and site respectively. This state |
There was a problem hiding this comment.
Theres a double space after data
Suggested change
| On `amphora-html` using the `data` and `meta` object that are the instances of the components and site respectively. This state | |
| On `amphora-html` using the `data` and `meta` object that are the instances of the components and site respectively. This site |
My guess is that you wanted to say This site instead of This state
docs/style.md
Outdated
|
|
||
| ## Get component variations | ||
|
|
||
| Using the site name; `amphora-html` build the specific style path that we need to have all stylesheet that we need: |
There was a problem hiding this comment.
Suggested change
| Using the site name; `amphora-html` build the specific style path that we need to have all stylesheet that we need: | |
| Using the site name, `amphora-html` builds the specific style path that we need to have all the required stylesheets: |
docs/style.md
Outdated
| Using the site name; `amphora-html` build the specific style path that we need to have all stylesheet that we need: | ||
| `styleguides/siteName/components` | ||
|
|
||
| If the name of the site is not available the `siteName` will be replaced for `_default` then return the list of the variation of the components. |
There was a problem hiding this comment.
Suggested change
| If the name of the site is not available the `siteName` will be replaced for `_default` then return the list of the variation of the components. | |
| If the name of the site is not available, the `siteName` property will be replaced for `_default` and return the list of the variation of the components. |
docs/style.md
Outdated
|
|
||
| If the name of the site is not available the `siteName` will be replaced for `_default` then return the list of the variation of the components. | ||
|
|
||
| If a component variation exist we will receive a combination of the name of the component and the name of the variation separate by an |
There was a problem hiding this comment.
Suggested change
| If a component variation exist we will receive a combination of the name of the component and the name of the variation separate by an | |
| If a component variation exists, we will receive a combination of the name of the component and the name of the variation separate by an |
docs/style.md
Outdated
| If the name of the site is not available the `siteName` will be replaced for `_default` then return the list of the variation of the components. | ||
|
|
||
| If a component variation exist we will receive a combination of the name of the component and the name of the variation separate by an | ||
| underscore like this example: `componentName_variationName` |
There was a problem hiding this comment.
This line can be put together with line 23
Suggested change
| underscore like this example: `componentName_variationName` | |
| If a component variation exists, we will receive a combination of the name of the component and the name of the variation separate by an underscore like this example: `componentName_variationName` |
docs/style.md
Outdated
|
|
||
| After getting the list of the variations expose on the state (or set on the data object that we receive) we can go throw each component defining it default styleguide. The following are the condition that we got to define which is the variation that we will add: | ||
|
|
||
| - The component has a variation set, but it doesn't exist in the site's styleguide or the default styleguide; render the component with the default variation; |
There was a problem hiding this comment.
Suggested change
| - The component has a variation set, but it doesn't exist in the site's styleguide or the default styleguide; render the component with the default variation; | |
| - The component has a variation set, but it doesn't exists in the site's styleguide or the default styleguide; render the component with the default variation. |
docs/style.md
Outdated
|
|
||
| - The component has no variation set; render the component with the default variation. | ||
|
|
||
| - Finally, if the other condition doesn't match to the current component means that we have a component variation define and we use it |
There was a problem hiding this comment.
Suggested change
| - Finally, if the other condition doesn't match to the current component means that we have a component variation define and we use it | |
| - Finally, if the other condition doesn't match to the current component means that we have a component variation defined and we use it. |
docs/style.md
Outdated
|
|
||
|
|
||
| On `amphora-html` using the `data` and `meta` object that are the instances of the components and site respectively. This state | ||
| will expose the component variations on the state then it will set these variations on the into a structure [Kiln](https://docs.clayplatform.com/clay-kiln/) will need then |
There was a problem hiding this comment.
Suggested change
| will expose the component variations on the state then it will set these variations on the into a structure [Kiln](https://docs.clayplatform.com/clay-kiln/) will need then | |
| will expose the component variations on the state, then it will set these variations into a structure. Finally, [Kiln](https://docs.clayplatform.com/clay-kiln/) will render the `HTML` |
docs/style.md
Outdated
|
|
||
| On `amphora-html` using the `data` and `meta` object that are the instances of the components and site respectively. This state | ||
| will expose the component variations on the state then it will set these variations on the into a structure [Kiln](https://docs.clayplatform.com/clay-kiln/) will need then | ||
| render the `HTML`. |
There was a problem hiding this comment.
Put this line together with line 11
docs/style.md
Outdated
|
|
||
| ## Set component default variations | ||
|
|
||
| After getting the list of the variations expose on the state (or set on the data object that we receive) we can go throw each component defining it default styleguide. The following are the condition that we got to define which is the variation that we will add: |
There was a problem hiding this comment.
Suggested change
| After getting the list of the variations expose on the state (or set on the data object that we receive) we can go throw each component defining it default styleguide. The following are the condition that we got to define which is the variation that we will add: | |
| After getting the list of the variations exposed on the state (or set on the data object that we receive), we can go throw each component defining it default styleguide. The following are the conditions that we got to define which is the variation that we will add: |
Shilario
reviewed
May 8, 2019
docs/style.md
Outdated
| --- | ||
|
|
||
|
|
||
| On `amphora-html` using the `data` and `meta` object that are the instances of the components and site respectively. This site will expose the component variations on the state, then it will set these variations on the into a structure. Finally, [Kiln](https://docs.clayplatform.com/clay-kiln will need then render the `HTML`. |
There was a problem hiding this comment.
Suggested change
| On `amphora-html` using the `data` and `meta` object that are the instances of the components and site respectively. This site will expose the component variations on the state, then it will set these variations on the into a structure. Finally, [Kiln](https://docs.clayplatform.com/clay-kiln will need then render the `HTML`. | |
| On `amphora-html` using the `data` and `meta` object that are the instances of the components and site respectively. This site will expose the component variations on the state, then it will set these variations into a structure. Finally, [Kiln](https://docs.clayplatform.com/clay-kiln will need then render the `HTML`. |
Shilario
reviewed
May 8, 2019
docs/style.md
Outdated
|
|
||
| ## Set component default variations | ||
|
|
||
| After getting the list of the variations exposed on the state (or set on the data object that we receive), we can go throw each component defining it default styleguide. The following are the conditions that we got to define which is the variation that we will add: |
There was a problem hiding this comment.
Suggested change
| After getting the list of the variations exposed on the state (or set on the data object that we receive), we can go throw each component defining it default styleguide. The following are the conditions that we got to define which is the variation that we will add: | |
| After getting the list of the variations exposed on the state (or set on the data object that we receive), we can go throw each component defining its default styleguide. The following are the conditions that we have to define in order to determine which is the variation that we will add: |
Shilario
reviewed
May 8, 2019
docs/style.md
Outdated
|
|
||
| ## Compose data | ||
|
|
||
| After we got and set the variations on the components we gonna compose the data into the structure that [Kiln](https://docs.clayplatform.com/clay-kiln/) needs; we got to this step after we finish getting all the variations of the components that are in the `data` object that we mention before and use it on [Kiln](https://docs.clayplatform.com/clay-kiln/). |
There was a problem hiding this comment.
Suggested change
| After we got and set the variations on the components we gonna compose the data into the structure that [Kiln](https://docs.clayplatform.com/clay-kiln/) needs; we got to this step after we finish getting all the variations of the components that are in the `data` object that we mention before and use it on [Kiln](https://docs.clayplatform.com/clay-kiln/). | |
| After we got and set the variations on the components we gonna compose the data into the structure that [Kiln](https://docs.clayplatform.com/clay-kiln/) needs; we have to this step after we finish getting all the variations of the components that are in the `data` object that we mention before and use it on [Kiln](https://docs.clayplatform.com/clay-kiln/). |
manuelurenah
approved these changes
May 9, 2019
docs/style.md
Outdated
|
|
||
| ## Compose data | ||
|
|
||
| After we got and set the variations on the components we gonna compose the data into the structure that [Kiln](https://docs.clayplatform.com/clay-kiln/) needs; we got to this step after we finish getting all the variations of the components that are in the `data` object that we mention before and use it on [Kiln](https://docs.clayplatform.com/clay-kiln/). |
There was a problem hiding this comment.
Suggested change
| After we got and set the variations on the components we gonna compose the data into the structure that [Kiln](https://docs.clayplatform.com/clay-kiln/) needs; we got to this step after we finish getting all the variations of the components that are in the `data` object that we mention before and use it on [Kiln](https://docs.clayplatform.com/clay-kiln/). | |
| After we got and set the variations on the components, we are going to compose the data into the structure that [Kiln](https://docs.clayplatform.com/clay-kiln/) needs; we got to this step after we finished getting all the variations of the components that are in the `data` object that we mentioned before and use it on [Kiln](https://docs.clayplatform.com/clay-kiln/). |
fxisco
reviewed
Jun 13, 2019
docs/style.md
Outdated
| Using the site name, `amphora-html` builds the specific style path that we need to have all the required stylesheets: | ||
| `styleguides/siteName/components` | ||
|
|
||
| If the name of the site is not available, the `siteName` property will be replaced for `_default` and return the list of the variation of the components. |
There was a problem hiding this comment.
Suggested change
| If the name of the site is not available, the `siteName` property will be replaced for `_default` and return the list of the variation of the components. | |
| If the name of the site is not available, the `siteName` property will be replaced for `_default` and the list of the variation of the components will be returned. |
docs/style.md
Outdated
|
|
||
| If the name of the site is not available, the `siteName` property will be replaced for `_default` and return the list of the variation of the components. | ||
|
|
||
| If a component variation exists, we will receive a combination of the name of the component and the name of the variation separate by an underscore like this example: `componentName_variationName` |
There was a problem hiding this comment.
Suggested change
| If a component variation exists, we will receive a combination of the name of the component and the name of the variation separate by an underscore like this example: `componentName_variationName` | |
| If a component variation exists, we will receive a combination of the name of the component and the name of the variation separated by an underscore like this example: `componentName_variationName` |
docs/style.md
Outdated
|
|
||
| ## Set component default variations | ||
|
|
||
| After getting the list of the variations exposed on the state (or set on the data object that we receive), we can go throw each component defining its default styleguide. The following are the conditions that we have to define in order to determine which is the variation that we will add: |
There was a problem hiding this comment.
Suggested change
| After getting the list of the variations exposed on the state (or set on the data object that we receive), we can go throw each component defining its default styleguide. The following are the conditions that we have to define in order to determine which is the variation that we will add: | |
| After getting the list of the variations exposed on the state (or set on the data object that we receive), we can go through each component defining its default styleguide. The following are the conditions that we have to define in order to determine which is the variation that we will add: |
docs/style.md
Outdated
|
|
||
| After getting the list of the variations exposed on the state (or set on the data object that we receive), we can go throw each component defining its default styleguide. The following are the conditions that we have to define in order to determine which is the variation that we will add: | ||
|
|
||
| - The component has a variation set, but it doesn't exists in the site's styleguide or the default styleguide; render the component with the default variation. |
There was a problem hiding this comment.
Suggested change
| - The component has a variation set, but it doesn't exists in the site's styleguide or the default styleguide; render the component with the default variation. | |
| - The component has a variation set, but it doesn't exist in the site's styleguide or the default styleguide; render the component with the default variation. |
docs/style.md
Outdated
|
|
||
| - The component has no variation set; render the component with the default variation. | ||
|
|
||
| - Finally, if the other conditions don't match to the current component, it means that we have a component variation defined and we use it. |
There was a problem hiding this comment.
Suggested change
| - Finally, if the other conditions don't match to the current component, it means that we have a component variation defined and we use it. | |
| - Finally, if the other conditions don't match to the current component, it means that we have a component variation defined and we are using it. |
oscarpolanco
force-pushed
the
styleguide
branch
2 times, most recently
from
ad621fa to
701a308
Compare
fxisco
approved these changes
Jun 17, 2019
docs/style.md
Outdated
| --- | ||
|
|
||
|
|
||
| On `amphora-html` using the `data` and `meta` object that are the instances of the components and site respectively. This site will expose the component variations on the state, then it will set these variations into a structure. Finally, [Kiln](https://docs.clayplatform.com/clay-kiln) will need then render the `HTML`. |
There was a problem hiding this comment.
Suggested change
| On `amphora-html` using the `data` and `meta` object that are the instances of the components and site respectively. This site will expose the component variations on the state, then it will set these variations into a structure. Finally, [Kiln](https://docs.clayplatform.com/clay-kiln) will need then render the `HTML`. | |
| On `amphora-html` using the `data` and `meta` object that are instances of the components and site respectively. This site will expose the component variations on the state, then it will set these variations into a structure. Finally, [Kiln](https://docs.clayplatform.com/clay-kiln) will need then render the `HTML`. |
jonwinton
approved these changes
Jun 20, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add the styleguide docs
Close issue: #47
Steps for testing the site locally:
websitefoldernpm installnpm run start