From 0c1780c88154e9ba0f7647f33cdd0e3201e8003b Mon Sep 17 00:00:00 2001
From: Tatiana Cherednichenko <tatinacher@gmail.com>
Date: Thu, 1 Jul 2021 11:54:58 +0300
Subject: [PATCH] feat: write styleguide for data-attribute

---
 .../html/data-attribute/data-attribute.mdx    | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/styleguide/html/data-attribute/data-attribute.mdx

diff --git a/src/styleguide/html/data-attribute/data-attribute.mdx b/src/styleguide/html/data-attribute/data-attribute.mdx
new file mode 100644
index 00000000..f115735a
--- /dev/null
+++ b/src/styleguide/html/data-attribute/data-attribute.mdx
@@ -0,0 +1,33 @@
+# Styleguide for data-attributes
+
+Data-attributes allow us to store extra information on standard, semantic HTML elements. The data attribute can also be used for styling. You can access them from CSS to add styles to the tag that have specific data-attribute.
+
+It's simpler and cleaner to write data attributes as data-name, where a name is a concrete name of a data attribute.
+
+You **should not** write unnecessary data-block='name' or data-container='name' because data-attribute has only one definition and doesn't change.
+
+Bad code example:
+
+```html
+<div data-block="input"></div>
+```
+
+Good code example:
+
+```html
+<div data-input></div>
+```
+
+If you have several values of component states that you need to pass to a data attribute, you can write it this way:
+
+```html
+data-name="value"
+```
+
+For example:
+
+```html
+<div data-position="horizontal">horizontal block</div>
+
+<div data-position="vertical">vertical block</div>
+```