From 9c9f8b2f0e9f0e810cb6fcd51cdc27d03bc2499f Mon Sep 17 00:00:00 2001
From: Tatiana Cherednichenko <tatinacher@gmail.com>
Date: Thu, 1 Jul 2021 11:54:47 +0300
Subject: [PATCH 1/3] fix: rewrite data-selector, fix grammar

---
 src/woly/atoms/button-icon/index.tsx        |  4 +-
 src/woly/atoms/button/index.tsx             | 10 ++---
 src/woly/atoms/button/usage.mdx             |  4 +-
 src/woly/atoms/chip/usage.mdx               |  2 +-
 src/woly/atoms/input/usage.mdx              |  4 +-
 src/woly/atoms/label/usage.mdx              |  2 +-
 src/woly/atoms/text/usage.mdx               |  2 +-
 src/woly/elements/input-container/index.tsx | 10 ++---
 src/woly/molecules/checkbox/index.tsx       | 49 +++++++++++----------
 src/woly/molecules/checkbox/usage.mdx       |  2 +-
 src/woly/molecules/field/index.tsx          |  4 +-
 src/woly/molecules/field/usage.mdx          |  4 +-
 src/woly/molecules/input-password/usage.mdx |  4 +-
 src/woly/molecules/radio-button/usage.mdx   |  4 +-
 src/woly/molecules/select/usage.mdx         |  4 +-
 src/woly/molecules/switch/usage.mdx         |  2 +-
 16 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/src/woly/atoms/button-icon/index.tsx b/src/woly/atoms/button-icon/index.tsx
index 9104a0b9..a98890b4 100644
--- a/src/woly/atoms/button-icon/index.tsx
+++ b/src/woly/atoms/button-icon/index.tsx
@@ -25,7 +25,7 @@ const ButtonIconBase: React.FC<Props & Priority> = ({
     type="button"
     {...p}
   >
-    <span data-icon>{icon}</span>
+    <span data-icon="button-icon">{icon}</span>
   </button>
 );
 
@@ -46,7 +46,7 @@ export const ButtonIcon = styled(ButtonIconBase)`
   border-radius: var(--woly-rounding);
   outline: none;
 
-  [data-icon] {
+  [data-icon='button-icon'] {
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/woly/atoms/button/index.tsx b/src/woly/atoms/button/index.tsx
index f9180ffc..0b5f630b 100644
--- a/src/woly/atoms/button/index.tsx
+++ b/src/woly/atoms/button/index.tsx
@@ -4,7 +4,7 @@ import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
 import { box } from 'ui/elements/box';
 
-export type Buttonprioritys =
+export type ButtonPriorities =
   | 'secondary'
   | 'primary'
   | 'default'
@@ -34,12 +34,12 @@ const ButtonBase: React.FC<ButtonProps & Priority> = ({
 }) => (
   <button
     type={type}
-    data-fullWidth={fullWidth}
+    data-full-width={fullWidth}
     data-outlined={outlined}
     data-priority={priority}
     {...p}
   >
-    {icon && <span data-icon="left">{icon}</span>}
+    {icon && <span data-icon="button">{icon}</span>}
     <span data-text>{text}</span>
   </button>
 );
@@ -76,11 +76,11 @@ export const Button = styled(ButtonBase)`
     }
   }
 
-  &[data-width='true'] {
+  &[data-full-width='true'] {
     width: 100%;
   }
 
-  [data-icon] {
+  [data-icon='button'] {
     --local-icon-size: var(--woly-line-height);
     display: flex;
     align-items: center;
diff --git a/src/woly/atoms/button/usage.mdx b/src/woly/atoms/button/usage.mdx
index 78b50d64..d95aeeb1 100644
--- a/src/woly/atoms/button/usage.mdx
+++ b/src/woly/atoms/button/usage.mdx
@@ -43,9 +43,9 @@ Button can span the entire width of the container or have a fixed width
   />
 </Playground>
 
-### prioritys
+### priorities
 
-Primary and danger prioritys are should be used to focus user attention.
+Primary and danger priorities are should be used to focus user attention.
 
 <Playground>
   <Button text="The main action on the page" priority="primary" />
diff --git a/src/woly/atoms/chip/usage.mdx b/src/woly/atoms/chip/usage.mdx
index b9f45bc0..62cd4853 100644
--- a/src/woly/atoms/chip/usage.mdx
+++ b/src/woly/atoms/chip/usage.mdx
@@ -23,7 +23,7 @@ As a standalone component, the most common use will be in some form of input.
 
 ### Weight and priority
 
-Chip can be represented in primary, secondary, default or tertiary prioritys and can be styled with fill or outline.
+Chip can be represented in primary, secondary, default or tertiary priorities and can be styled with fill or outline.
 In case of choosing chip in tertiary priority with outline styles use the opposite background color to the text color of chip.
 
 <Playground direction="horizontal" size="XS">
diff --git a/src/woly/atoms/input/usage.mdx b/src/woly/atoms/input/usage.mdx
index 821453ab..551691e0 100644
--- a/src/woly/atoms/input/usage.mdx
+++ b/src/woly/atoms/input/usage.mdx
@@ -308,9 +308,9 @@ Icons can also be touch targets for nested components.
   </Form>
 </Playground>
 
-### prioritys
+### Priorities
 
-Primary and secondary prioritys are should be used to focus user attention.
+Primary and secondary priorities are should be used to focus user attention.
 
 <Playground direction="vertical">
   <Form autoComplete="false">
diff --git a/src/woly/atoms/label/usage.mdx b/src/woly/atoms/label/usage.mdx
index 05091b5a..59d6068f 100644
--- a/src/woly/atoms/label/usage.mdx
+++ b/src/woly/atoms/label/usage.mdx
@@ -18,7 +18,7 @@ This increased hit area provides an advantage to anyone trying to activate the i
   <Label priority="secondary">Base label</Label>
 </Playground>
 
-### prioritys
+### Priorities
 
 Error priority can be used to focus user attention on error.
 
diff --git a/src/woly/atoms/text/usage.mdx b/src/woly/atoms/text/usage.mdx
index cee29eff..9855e681 100644
--- a/src/woly/atoms/text/usage.mdx
+++ b/src/woly/atoms/text/usage.mdx
@@ -36,7 +36,7 @@ Text component is used as a simple text or a hint/error message for Input or Tex
   </Text>
 </Playground>
 
-### prioritys
+### Priorities
 
 Hint priority can be used to give user a hint or additional information.
 
diff --git a/src/woly/elements/input-container/index.tsx b/src/woly/elements/input-container/index.tsx
index 0053bc54..4585914a 100644
--- a/src/woly/elements/input-container/index.tsx
+++ b/src/woly/elements/input-container/index.tsx
@@ -20,9 +20,9 @@ const InputContainerBase: React.FC<InputContainerProps & Priority> = ({
   rightIcon,
 }) => (
   <div className={className} data-disabled={disabled} data-priority={priority}>
-    {leftIcon && <span data-icon="left">{leftIcon}</span>}
-    <div data-input="input">{children}</div>
-    {rightIcon && <span data-icon="right">{rightIcon}</span>}
+    {leftIcon && <span data-icon="input">{leftIcon}</span>}
+    <div data-input>{children}</div>
+    {rightIcon && <span data-icon="input">{rightIcon}</span>}
   </div>
 );
 
@@ -46,7 +46,7 @@ export const InputContainer = styled(InputContainerBase)`
   border-radius: var(--woly-rounding);
   outline: none;
 
-  [data-input='input'] {
+  [data-input] {
     flex: 1;
 
     input {
@@ -54,7 +54,7 @@ export const InputContainer = styled(InputContainerBase)`
     }
   }
 
-  [data-icon] {
+  [data-icon='input'] {
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/woly/molecules/checkbox/index.tsx b/src/woly/molecules/checkbox/index.tsx
index c1170810..f509e6d8 100644
--- a/src/woly/molecules/checkbox/index.tsx
+++ b/src/woly/molecules/checkbox/index.tsx
@@ -51,15 +51,17 @@ const CheckboxBase: React.FC<CheckboxProps & Priority> = ({
       onKeyDown={onKeyDown}
       tabIndex={tabIndex}
     >
-      <span data-block="container" data-disabled={disabled} tabIndex={-1}>
-        <input type="checkbox" id={id} checked={checked} onChange={onChange} />
-        <span data-checkmark="unchecked" data-icon>
-          <IconFilledUnchecked />
+      <span data-container data-disabled={disabled} tabIndex={-1}>
+        <span data-icon>
+          <input type="checkbox" id={id} checked={checked} onChange={onChange} />
+          <span data-unchecked>
+            <IconFilledUnchecked />
+          </span>
+          <span data-checked>
+            <IconCheckFilled />
+          </span>
         </span>
-        <span data-checkmark="checked" data-icon>
-          <IconCheckFilled />
-        </span>
-        {text && <span data-block="text">{text}</span>}
+        {text && <span data-text>{text}</span>}
       </span>
     </label>
   );
@@ -80,8 +82,6 @@ export const Checkbox = styled(CheckboxBase)`
   --local-text-color: var(--woly-canvas-text-default);
   --local-background-color: var(--woly-shape-default);
 
-  ${box}
-
   outline: none;
 
   user-select: none;
@@ -91,13 +91,15 @@ export const Checkbox = styled(CheckboxBase)`
     box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
   }
 
-  [data-block='container'] {
+  [data-container] {
+    ${box}
+
     display: flex;
     align-items: center;
 
     outline: none;
 
-    [data-block='text'] {
+    [data-text] {
       color: var(--local-text-color);
       font-size: var(--woly-font-size, 12px);
       line-height: var(--woly-line-height, 24px);
@@ -118,14 +120,14 @@ export const Checkbox = styled(CheckboxBase)`
       }
     }
 
-    [data-checkmark='unchecked'],
-    input:checked ~ [data-checkmark='checked'] {
+    [data-unchecked],
+    input:checked ~ [data-checked] {
       display: flex;
       align-items: center;
       justify-content: center;
     }
 
-    input:checked ~ [data-checkmark='checked'] {
+    input:checked ~ [data-checked] {
       svg > rect {
         fill: var(--local-icon-fill);
       }
@@ -140,12 +142,12 @@ export const Checkbox = styled(CheckboxBase)`
       }
     }
 
-    [data-checkmark='checked'],
-    input:checked ~ [data-checkmark='unchecked'] {
+    [data-checked],
+    input:checked ~ [data-unchecked] {
       display: none;
     }
 
-    [data-checkmark='unchecked'] {
+    [data-unchecked] {
       &:hover {
         svg > rect {
           stroke: var(--local-icon-stroke);
@@ -168,12 +170,13 @@ export const Checkbox = styled(CheckboxBase)`
       --local-text-color: var(--woly-shape-disabled);
     }
 
-    [data-checkmark] > svg {
+    [data-unchecked] > svg,
+    [data-checked] > svg {
       box-shadow: none;
     }
 
-    [data-checkmark='unchecked'],
-    input:checked ~ [data-checkmark='checked'] {
+    [data-unchecked],
+    input:checked ~ [data-checked] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -183,8 +186,8 @@ export const Checkbox = styled(CheckboxBase)`
       }
     }
 
-    [data-checkmark='checked'],
-    input:checked ~ [data-checkmark='unchecked'] {
+    [data-checked],
+    input:checked ~ [data-unchecked] {
       display: none;
     }
   }
diff --git a/src/woly/molecules/checkbox/usage.mdx b/src/woly/molecules/checkbox/usage.mdx
index e5689af6..e6d20208 100644
--- a/src/woly/molecules/checkbox/usage.mdx
+++ b/src/woly/molecules/checkbox/usage.mdx
@@ -63,7 +63,7 @@ Size controlled by the `component-level` block property not from the props.
   </State>
 </Playground>
 
-### prioritys
+### Priorities
 
 Primary priority should be used to focus user attention. The disabled checkbox is unusable and un-clickable.
 
diff --git a/src/woly/molecules/field/index.tsx b/src/woly/molecules/field/index.tsx
index 0dc2abb1..d634ab08 100644
--- a/src/woly/molecules/field/index.tsx
+++ b/src/woly/molecules/field/index.tsx
@@ -18,9 +18,9 @@ const FieldBase: React.FC<FieldProps & Priority> = ({
   priority = 'secondary',
   row = false,
 }) => (
-  <Label data-field="label" className={className} data-row={row} data-priority={priority}>
+  <Label className={className} data-row={row} data-priority={priority} data-label>
     <span>{label}</span>
-    <div data-field="content">{children}</div>
+    <div data-content>{children}</div>
   </Label>
 );
 
diff --git a/src/woly/molecules/field/usage.mdx b/src/woly/molecules/field/usage.mdx
index 1d8f2835..6f133fd9 100644
--- a/src/woly/molecules/field/usage.mdx
+++ b/src/woly/molecules/field/usage.mdx
@@ -81,7 +81,7 @@ Labels and children component can be replaced in row
   </State>
 </Playground>
 
-or in column prioritys
+or in column priorities
 
 <Playground size="S">
   <Field label="Label of set">
@@ -98,7 +98,7 @@ or in column prioritys
   </State>
 </Playground>
 
-### prioritys
+### Priorities
 
 Error priority can be used to focus user attention on error.
 
diff --git a/src/woly/molecules/input-password/usage.mdx b/src/woly/molecules/input-password/usage.mdx
index eab7d991..abe9b9a7 100644
--- a/src/woly/molecules/input-password/usage.mdx
+++ b/src/woly/molecules/input-password/usage.mdx
@@ -38,9 +38,9 @@ Disabled text fields are uneditable. They have less opacity so that they appear
   />
 </Playground>
 
-### prioritys
+### Priorities
 
-Primary and danger prioritys are should be used to focus user attention.
+Primary and danger priorities are should be used to focus user attention.
 
 <Playground direction="vertical">
   <State initial={false} change={(i) => !i}>
diff --git a/src/woly/molecules/radio-button/usage.mdx b/src/woly/molecules/radio-button/usage.mdx
index 6983ba87..ef06770c 100644
--- a/src/woly/molecules/radio-button/usage.mdx
+++ b/src/woly/molecules/radio-button/usage.mdx
@@ -49,9 +49,9 @@ Disabled radio button are uneditable. They have less opacity so that they appear
   </State>
 </Playground>
 
-### prioritys
+### Priorities
 
-Primary and danger prioritys are should be used to focus user attention.
+Primary and danger priorities are should be used to focus user attention.
 
 <Playground direction="vertical">
   <State initial="no" change={(i) => !i}>
diff --git a/src/woly/molecules/select/usage.mdx b/src/woly/molecules/select/usage.mdx
index efcd93e6..0e3df105 100644
--- a/src/woly/molecules/select/usage.mdx
+++ b/src/woly/molecules/select/usage.mdx
@@ -84,7 +84,7 @@ Disabled selects are uneditable. They have less opacity so that they appear less
   </div>
 </Playground>
 
-### prioritys
+### Priorities
 
 Secondary priority should be used as default priority.
 
@@ -109,7 +109,7 @@ Secondary priority should be used as default priority.
   </div>
 </Playground>
 
-Primary and dander prioritys should focus user attention.
+Primary and dander priorities should focus user attention.
 
 <Playground direction="vertical">
   <StateEvent initial="Cats" change={(event) => event?.target?.dataset.value}>
diff --git a/src/woly/molecules/switch/usage.mdx b/src/woly/molecules/switch/usage.mdx
index cebaf781..728151c2 100644
--- a/src/woly/molecules/switch/usage.mdx
+++ b/src/woly/molecules/switch/usage.mdx
@@ -56,7 +56,7 @@ Switch is used to choose between two different options.
   </State>
 </Playground>
 
-### prioritys
+### Priorities
 
 Error priority focus attention user on error
 

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

---
 .../html/data-attribute/data-attribute.mdx    | 33 +++++++++++++++++++
 src/woly/molecules/checkbox/index.tsx         |  2 +-
 2 files changed, 34 insertions(+), 1 deletion(-)
 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>
+```
diff --git a/src/woly/molecules/checkbox/index.tsx b/src/woly/molecules/checkbox/index.tsx
index f509e6d8..195941bc 100644
--- a/src/woly/molecules/checkbox/index.tsx
+++ b/src/woly/molecules/checkbox/index.tsx
@@ -52,7 +52,7 @@ const CheckboxBase: React.FC<CheckboxProps & Priority> = ({
       tabIndex={tabIndex}
     >
       <span data-container data-disabled={disabled} tabIndex={-1}>
-        <span data-icon>
+        <span data-icon="checkbox">
           <input type="checkbox" id={id} checked={checked} onChange={onChange} />
           <span data-unchecked>
             <IconFilledUnchecked />

From 7682212641f47b690ab1f9ad5b6ca3e00dfb4cbc Mon Sep 17 00:00:00 2001
From: Ira <i.aristova@opends.tech>
Date: Mon, 5 Jul 2021 19:02:34 +0300
Subject: [PATCH 3/3] update Styleguide

---
 src/styleguide/html/data-attribute/data-attribute.mdx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/styleguide/html/data-attribute/data-attribute.mdx b/src/styleguide/html/data-attribute/data-attribute.mdx
index f115735a..7ffde121 100644
--- a/src/styleguide/html/data-attribute/data-attribute.mdx
+++ b/src/styleguide/html/data-attribute/data-attribute.mdx
@@ -1,6 +1,8 @@
 # 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.
+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.
 
@@ -18,7 +20,8 @@ Good code example:
 <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:
+If you have several values of component states that you need to pass to a data attribute, make data attribute more unique with adding a name to data attribute.
+You can do it in this way:
 
 ```html
 data-name="value"
@@ -27,7 +30,7 @@ data-name="value"
 For example:
 
 ```html
-<div data-position="horizontal">horizontal block</div>
+<div data-direction="horizontal">horizontal block</div>
 
-<div data-position="vertical">vertical block</div>
+<div data-direction="vertical">vertical block</div>
 ```