Develop

.bemlintrc.json

@@ -0,0 +1,16 @@
+{
+  "elementDivider": "__",
+  "modifierDivider": "--",
+  "ignore": [
+    "node_modules",
+    "dist"
+  ],
+  "rules": {
+    "one-block": true,
+    "one-element": true,
+    "element-inside-parent-block": true,
+    "no-double-element": true,
+    "no-neighbour-parent-block": true,
+    "modifiable-class": true
+  }
+}

.editorconfig

@@ -7,4 +7,4 @@ indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-end_of_line = lf
+end_of_line = lf

.eslintignore

@@ -1,2 +1,2 @@
 /backstop_data
-/src/report
+/dist

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data

.gitignore

@@ -1,6 +1,14 @@
+# IDE
 .idea
+.vscode
+
+# Node
 node_modules
+
+# MacOS
 .DS_Store
-yarn.lock
+
+# Generated files
 backstop_data
-!backstop_data/engine_scripts/
+dist
+.cache

.linthtmlrc.json

@@ -0,0 +1,49 @@
+{
+  "attr-bans": [
+    "align",
+    "background",
+    "bgcolor",
+    "border",
+    "frameborder",
+    "style"
+  ],
+  "attr-name-ignore-regex": "viewBox",
+  "attr-no-dup": true,
+  "attr-quote-style": "double",
+  "attr-req-value": true,
+  "class-no-dup": true,
+  "doctype-first": true,
+  "doctype-html5": true,
+  "fig-req-figcaption": true,
+  "head-req-title": true,
+  "html-req-lang": true,
+  "id-class-style": false,
+  "id-no-dup": true,
+  "img-req-src": true,
+  "img-req-alt": "allownull",
+  "indent-width": 2,
+  "indent-style": "spaces",
+  "indent-width-cont": true,
+  "input-radio-req-name": true,
+  "spec-char-escape": true,
+  "tag-bans": [
+    "b",
+    "i",
+    "u",
+    "center",
+    "style",
+    "marquee",
+    "font",
+    "s"
+  ],
+  "tag-name-lowercase": true,
+  "tag-name-match": true,
+  "tag-self-close": "never",
+  "tag-close": true,
+  "text-ignore-regex": "&",
+  "title-no-dup": true,
+  "line-end-style": "lf",
+  "attr-new-line": 2,
+  "attr-name-style": "dash",
+  "attr-no-unsafe-char": true
+}

.stylelintignore

@@ -1,2 +1,2 @@
 /backstop_data/
-/src/report
+/dist

.stylelintrc.js

@@ -1,4 +1,10 @@
 module.exports = {
-  extends: "@mate-academy/stylelint-config",
+  extends: [
+    "stylelint-config-recommended-scss",
+    "@mate-academy/stylelint-config"
+  ],
+  plugins: [
+    "stylelint-scss"
+  ],
   rules: {}
-}
+};

backstopConfig.js

@@ -0,0 +1,57 @@
+'use strict';
+// https://github.com/garris/BackstopJS#advanced-scenarios
+
+const backstop = require('@mate-academy/backstop-config');
+const { basicScenario } = backstop;
+
+const basic = {
+  ...basicScenario,
+  label: 'Elementary test',
+  referenceUrl: basicScenario.referenceUrl + '/html-form/',
+};
+
+const config = {
+  ...backstop,
+  fileNameTemplate: '{scenarioLabel}-{selectorIndex}',
+  viewports: [
+    {
+      name: 'tablet_h',
+      width: 1024,
+      height: 768,
+    },
+  ],
+  scenarios: [
+    {
+      ...basic,
+      label: 'Entire document',
+      selectors: ['document'],
+    },
+    {
+      ...basic,
+      label: 'Form',
+      selectors: ['form'],
+    },
+    {
+      ...basic,
+      label: 'Fieldset tag', // all fieldsets are different
+      selectors: ['fieldset'],
+    },
+    {
+      ...basic,
+      label: 'Submit button',
+      selectors: ['[type="submit"]'],
+    },
+    {
+      ...basic,
+      label: 'Email with placeholder',
+      selectors: ['[type="email"][placeholder]'],
+    },
+    {
+      ...basic,
+      label: 'Number with value',
+      selectors: ['[type="number"][value]'],
+    },
+  ],
+};
+
+module.exports = config;

checklist.md

@@ -0,0 +1,101 @@
+1. [CODE STYLE] - Keep your code line length below 80. It’s not only historical
+tradition, but also allows your code to fit into one standard screen without
+horizontal scroll.
+
+2. [CODE STYLE] - Remember about correct indentation between parent and child
+elements. Each level of nesting, including text, contained inside the element,
+requires 2-space offset.
+
+GOOD example:
+```html
+<div>
+  <p>
+    some text
+  </p>
+</div>
+```
+BAD example:
+```html
+<div>
+<p>
+some text
+</p>
+</div>
+```
+
+3. [CODE STYLE] - If the HTML-element has long attribute values or number of
+attributes is more than 3 - start each one, including the first, on the new
+line with 2-space indentation related to tag. Tag’s closing bracket should be
+on the same level as opening one.
+
+GOOD example:
+```html
+<input
+  type="text"
+  name="surname"
+  id="surname"
+  required
+>
+```
+BAD example:
+```html
+<input type="text" name="surname"
+id="surname" required>
+```
+BAD example:
+```html
+<input type="text"
+  name="surname"
+  id="surname"
+  required>
+```
+BAD example:
+```html
+<input
+type="text"
+name="surname"
+id="surname"
+required>
+```
+Still BAD example:
+```html
+<input
+  type="text"
+  name="surname"
+  id="surname"
+  required>
+```
+
+4. [CODE STYLE] - Use camelCase for values of name attribute - they should be
+valid as JavaScript object keys. It should not contain spaces, “-” or other
+special characters.
+
+GOOD example:
+```html
+<input
+  type="date"
+  name="dateOfBirth"
+  id="dateOfBirth"
+  required
+>
+```
+BAD example:
+```html
+<input
+  type="date"
+  name="date of birth"
+  id="dateOfBirth"
+  required
+>
+```
+
+5. [CODE STYLE] - No need to provide empty value="" attribute for inputs. Add
+it only if a certain value is specified from the start, or use placeholders.
+6. [FUNCTIONAL] - You need to use a label tag for each input, so that every
+input could be activated by clicking on the corresponding label.
+7. [TESTS] - Remember, you need to add a certain distance BETWEEN inputs and
+BETWEEN blocks with inputs. It means that, for example, the last input in
+the group of inputs should not have a set bottom margin.
+8. [TESTS] - Remember, any other styles besides margins, should be browser
+default.
+