Initial commit

.editorconfig

@@ -0,0 +1,10 @@
+#airbnb
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

.eslintignore

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

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: '@mate-academy/eslint-config',
+};

.gitignore

@@ -0,0 +1,7 @@
+.idea
+node_modules
+.DS_Store
+yarn.lock
+package-lock.json
+backstop_data
+!backstop_data/engine_scripts/

.stylelintignore

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

.stylelintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  extends: "@mate-academy/stylelint-config",
+  rules: {}
+}

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - '11'
+cache: npm
+before_script:
+  - bash ./config/hooks/start-server.sh
+script:
+  - npm run css:reference
+  - npm run css:test

config/backstop/backstopConfig.js

@@ -0,0 +1,62 @@
+'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 + '/stars/',
+};
+
+const config = {
+  ...backstop,
+  fileNameTemplate: '{scenarioLabel}',
+  viewports: [
+    {
+      name: 'tablet_h',
+      width: 1024,
+      height: 768,
+    },
+  ],
+  scenarios: [
+    {
+      ...basic,
+      label: 'Entire document',
+      selectors: ['document'],
+    },
+    {
+      ...basic,
+      label: 'stars--0',
+      selectors: ['.stars--0'],
+    },
+    {
+      ...basic,
+      label: 'stars--1',
+      selectors: ['.stars--1'],
+    },
+    {
+      ...basic,
+      label: 'stars--2',
+      selectors: ['.stars--2'],
+    },
+    {
+      ...basic,
+      label: 'stars--3',
+      selectors: ['.stars--3'],
+    },
+    {
+      ...basic,
+      label: 'stars--4',
+      selectors: ['.stars--4'],
+    },
+    {
+      ...basic,
+      label: 'stars--5',
+      selectors: ['.stars--5'],
+    },
+  ],
+};
+
+module.exports = config;

config/hooks/deploy.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+cp -R backstop_data/ src/report
+git add src/
+git commit -m "deploy static content"
+git subtree push --prefix src origin gh-pages
+./node_modules/.bin/rimraf src/report
+git add src/
+git commit -m "removed report after deploy"

config/hooks/start-server.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+npm run start &
+sleep 3

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "stars",
+  "version": "1.0.0",
+  "description": "Create reusable stars block with BEM",
+  "main": "src/main.js",
+  "scripts": {
+    "css:test": "rimraf ./backstop_data/bitmaps_test && backstop test --config=config/backstop/backstopConfig",
+    "css:reference": "rimraf ./backstop_data/bitmaps_reference && backstop reference --config=config/backstop/backstopConfig",
+    "deploy": "git add . && git commit -m 'solution' && git push origin develop && npm run publish",
+    "lint": "stylelint src/**/*.css && eslint src/**/*.js && htmllint --rc ./node_modules/@mate-academy/htmllint-config/.htmllintrc src/*.html",
+    "postinstall": "npm run css:reference && git checkout -b develop",
+    "publish": "bash ./config/hooks/deploy.sh",
+    "start": "node server.js",
+    "test": "npm run lint && npm run css:test"
+  },
+  "keywords": [],
+  "author": "Mate Academy",
+  "license": "GPL-3.0",
+  "devDependencies": {
+    "@mate-academy/browsersync-config": "*",
+    "@mate-academy/eslint-config": "*",
+    "@mate-academy/htmllint-config": "*",
+    "@mate-academy/stylelint-config": "*",
+    "@mate-academy/backstop-config": "*",
+    "backstopjs": "^4.0.3",
+    "eslint": "^5.16.0",
+    "eslint-plugin-node": "^8.0.1",
+    "htmllint": "^0.7.3",
+    "htmllint-cli": "0.0.7",
+    "browser-sync": "^2.1.6",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.5",
+    "rimraf": "^2.6.3",
+    "stylelint": "^10.0.0"
+  },
+  "lint-staged": {
+    "linters": {
+      "*.css": [
+        "stylelint",
+        "git add"
+      ],
+      "*.js": [
+        "eslint",
+        "git add"
+      ],
+      "*.html": [
+        "htmllint --rc  ./node_modules/@mate-academy/htmllint-config/.htmllintrc",
+        "git add"
+      ]
+    },
+    "ignore": [
+      "**/backstop_data/**",
+      "**/report/**"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "post-commit": "git update-index --again",
+      "pre-commit": "lint-staged"
+    }
+  }
+}

readme.md

@@ -0,0 +1,18 @@
+# Product cards
+1. Replace `<your_account>` with your Github username in the links
+    - [DEMO LINK](https://<your_account>.github.io/layout_stars/) <br>
+    - [TEST REPORT LINK](https://<your_account>.github.io/layout_stars/report/html_report/)
+2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/)
+
+> Disable `Multiplayer Cursors` in figma to hide other cursors ([Learn how](https://mate-academy.github.io/layout_task-guideline/figma.html#multiplayer-cursors))
+___
+
+## The task
+Implement `stars` block used in [the card](https://www.figma.com/file/bS8N1lTT0Ew0Brf1Nfl36iMV/Product-Cards?node-id=0%3A1).
+- Reset browser's default margins
+- Implement 6 blocks with classes
+  - The first one is general `stars`
+  - Add 5 more blocks with a modifier per block from `stars--1` to `stars--5`
+  - Each block should have a given number of active stars without adding any special class for an individual star. (Use `nth-child`)
+- The star size is fixed
+- The distance between the stars is also fixed

server.js

@@ -0,0 +1,6 @@
+'use strict';
+
+const browserSync = require('browser-sync');
+const config = require('@mate-academy/browsersync-config');
+
+browserSync(config);

src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <title>Product cards</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <h1>Stars</h1>
+</body>
+</html>

src/main.js

@@ -0,0 +1 @@
+'use strict';