From 7cf67a19ddd1648e885c43041919c53bef11efc2 Mon Sep 17 00:00:00 2001
From: Oscar Polanco <opolanco@intellisys.com.do>
Date: Fri, 3 May 2019 18:46:29 -0400
Subject: [PATCH] Add the styleguide docs

---
 docs/style.md         | 47 +++++++++++++++++++++++++++++++++++++++++++
 website/i18n/en.json  | 28 --------------------------
 website/sidebars.json |  3 +++
 3 files changed, 50 insertions(+), 28 deletions(-)
 create mode 100644 docs/style.md
 delete mode 100644 website/i18n/en.json

diff --git a/docs/style.md b/docs/style.md
new file mode 100644
index 0000000..7cdf8bf
--- /dev/null
+++ b/docs/style.md
@@ -0,0 +1,47 @@
+---
+id: style
+title: Styleguides
+sidebar_label: Styleguides
+---
+
+---
+
+
+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`. 
+
+---
+
+## Get component variations
+
+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.
+
+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`
+
+Furthermore, if the component variation is no set we will have the name of the component as a default style.
+
+For more information on how to get the variations, you can check the [styleguide.js](https://github.com/clay/amphora-html/blob/master/lib/styleguide.js) file on the `amphora-html` repository.
+
+---
+
+## 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:
+
+- 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 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.
+
+For more information on how to set the variations, you can check the [styleguide.js](https://github.com/clay/amphora-html/blob/master/lib/styleguide.js) file on the `amphora-html` repository.
+
+---
+
+## Compose data
+
+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/).
+
+For more information on how the kiln structure is formed and send; you can check the [render.js](https://github.com/clay/amphora-html/blob/master/lib/render.js) file on the `amphora-html` repository.
diff --git a/website/i18n/en.json b/website/i18n/en.json
deleted file mode 100644
index 421f851..0000000
--- a/website/i18n/en.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "_comment": "This file is auto-generated by write-translations.js",
-  "localized-strings": {
-    "next": "Next",
-    "previous": "Previous",
-    "tagline": "HTML renderer for component data structures",
-    "docs": {
-      "integration": {
-        "title": "Integration",
-        "sidebar_label": "Integration"
-      },
-      "intro": {
-        "title": "Amphora HTML",
-        "sidebar_label": "Amphora HTML"
-      }
-    },
-    "links": {},
-    "categories": {
-      "Introduction": "Introduction",
-      "Integration": "Integration"
-    }
-  },
-  "pages-strings": {
-    "Help Translate|recruit community translators for your project": "Help Translate",
-    "Edit this Doc|recruitment message asking to edit the doc source": "Edit",
-    "Translate this Doc|recruitment message asking to translate the docs": "Translate"
-  }
-}
diff --git a/website/sidebars.json b/website/sidebars.json
index 4859877..cafe28b 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -5,6 +5,9 @@
     ],
     "Integration": [
       "integration"
+    ],
+    "Styleguide": [
+      "style"
     ]
   }
 }