Merge branch 'release/0.5.0'

.babelrc

@@ -1,9 +1,21 @@
 {
   "env": {
-    "test": {
+    "dev": {
       "presets": [
         ["env"]
       ]
+    },
+    "test": {
+      "presets": [
+        [
+          "babel-preset-env",
+          {
+            "targets": {
+              "node": "current"
+            }
+          }
+        ]
+      ]
     }
   }
 }

.circleci/config.yml

@@ -1,3 +1,4 @@
+version: 2
 jobs:
   build:
     docker:
@@ -8,3 +9,4 @@ jobs:
       - run: yarn eslint
       - run: yarn stylelint
       - run: yarn test
+      - run: yarn codecov

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 /index.js
 !/.storybook
+src/atoms/icon/templates/*

.storybook/addons.js

@@ -1,7 +1,7 @@
 import 'storybook-addon-vue-info/lib/register'
-import '@storybook/addon-notes/register'
-import '@storybook/addon-storysource/register'
-import '@storybook/addon-a11y/register'
 import '@storybook/addon-knobs/register'
-import '@storybook/addon-viewport/register'
 import '@storybook/addon-actions/register'
+import '@storybook/addon-a11y/register'
+import '@storybook/addon-storysource/register'
+import '@storybook/addon-notes/register'
+import '@storybook/addon-viewport/register'

.storybook/config.js

@@ -1,6 +1,10 @@
 // Storybook
 import { configure, addDecorator, addParameters } from '@storybook/vue'
 
+// Polyfills
+import 'focus-visible'
+import 'svgxuse'
+
 // Addons
 import { withInfo } from 'storybook-addon-vue-info'
 import { withA11y } from '@storybook/addon-a11y'

.storybook/webpack.config.js

@@ -1,4 +1,5 @@
 const StyleLintPlugin = require('stylelint-webpack-plugin')
+const path = require('path')
 
 module.exports = ({ config }) => {
   config.module.rules.push({
@@ -25,10 +26,7 @@ module.exports = ({ config }) => {
   config.module.rules.push({
     enforce: 'pre',
     test: /\.(js|vue)$/,
-    loader: 'eslint-loader',
-    options: {
-      fix: true
-    }
+    loader: 'eslint-loader'
   })
 
   config.plugins.push(new StyleLintPlugin({
@@ -40,5 +38,10 @@ module.exports = ({ config }) => {
     fix: true
   }))
 
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    '@utils': path.resolve(__dirname, '../utils')
+  }
+
   return config
 }

CHANGELOG.md

@@ -6,6 +6,63 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.5.0] - 15-10-2019
+### Added
+- Vue Info table generator helper
+- badge: tag knob and new test regarding custom tag
+- Tests for radio button
+- Test coverage
+- Codecov badge
+- Tests for Price component
+- Tests for Preformatted component
+- More tests in input component
+- Tests for Textarea component
+- FooterMenu component
+- Tests for Select component
+- Custom icon in Select component
+- Sidebar story based on Modal component
+- TransitionExpand for Collapse component
+- Disabled attribute for QuantityUpdate component
+- Pagination component
+- Price component - custom classes props
+
+### Removed
+- -webkit- in transitions
+- Modifiers in collapse component
+- InputWrapper component
+- OffCanvasSidebar component
+
+### Changed
+- Move ProductItem to atomic design, rename to ProductListItem
+- Move CatalogGridItem to atomic design, rename to ProductGridItem
+- heading: update heading class and add unit test and knobs
+- paragraph: to update stories - add text knobs, update component class name - add prefix
+- container: add props with tag, update tests
+- Update readme
+- Update tests in heading component, remove extends from styles
+- Image: class name - add prefix, add basic tests
+- Refactor styles in checkbox component
+- Refactor styles for radio button
+- Remove unnecessary variables in quantity update styles
+- Components structure
+- Price component (removed props, changed classes, removed useless storeies)
+- Collapse style
+- Move modal to atomic design, update template and component js logic
+- Refactor Newsletter component
+- Refactor Collapse component
+- Refactor Footer component
+- Move breadcrumbs to atomic design, update styles and template
+- Remove 'selected' story in Selected coomponents
+- Refactor styles in Select component
+- Update modal component js and styles to handle sidebar case
+- Update attributes passed to Select, Radio and Checkbox components ($attrs)
+- ProductListItem component styles for old price element
+
+### Fixed
+- Typo in Message.selectors.json file
+- Transitions
+- IE bugs
+
 ## [0.4.0] - 04-06-2019
 ### Added
 - This CHANGELOG

CONTRIBUTING.md

@@ -10,7 +10,6 @@ Snowdog team is monitoring for new pull requests. We'll review your PR and eithe
 git clone [email protected]:SnowdogApps/alpaca-ui.git
 cd alpaca-ui
 yarn
-cd components
 yarn dev
 ```
 

README.md

@@ -3,9 +3,12 @@
 </p>
 <br/>
 
+
 ## Alpaca UI
 
 [![CircleCI](https://circleci.com/gh/SnowdogApps/alpaca-ui/tree/develop.svg?style=svg)](https://circleci.com/gh/SnowdogApps/alpaca-ui/tree/develop)
+[![npm version](https://badge.fury.io/js/%40snowdog%2Falpaca-ui.svg)](https://www.npmjs.com/package/@snowdog/alpaca-ui)
+[![codecov](https://codecov.io/gh/SnowdogApps/alpaca-ui/branch/develop/graph/badge.svg)](https://codecov.io/gh/SnowdogApps/alpaca-ui)
 
 Highly customizable library of responsive UI components crafted for e-commerce. It is based on Vue.js and Alpaca design system.
 
@@ -19,6 +22,61 @@ Highly customizable library of responsive UI components crafted for e-commerce.
 - Semantic and accessible code output
 - Ready to use with Vue CLI, Vue Storefornt and Nuxt.js
 
+
+## Getting Started
+
+### Installation
+
+Add Alpaca UI to your project by using Yarn
+```bash
+yarn add @snowdog/alpaca-ui
+```
+
+or NPM
+```bash
+npm install @snowdog/alpaca-ui
+```
+
+### Usage
+
+Import component in your app using named imports:
+
+`import { AButton } from '@snowdog/alpaca-ui'`
+
+```vue
+<template>
+  <a-button>
+    Alpaca button
+  </a-button>
+</template>
+
+<script>
+import { AButton } from '@snowdog/alpaca-ui'
+
+export default {
+  name: 'MyComponent',
+  components: AButton
+}
+</script>
+```
+
+If you need more flexibility you can take the source:
+
+```vue
+<template src="@snowdog/alpaca-ui/src/atoms/button/Button.html" />
+
+<script>
+import AButton from '@snowdog/alpaca-ui/src/atoms/button/Button.js'
+
+export default {
+  mixins: [AButton]
+}
+</script>
+
+<style src="@snowdog/alpaca-ui/src/atoms/button/Button.scss" lang="scss" />
+```
+For now, to see all possible cases/modifiers, you should clone and run repo as in Development point, or check .stories.js file in component.
+
 ## Browser support
 
 Recent versions of Firefox, Chrome, Edge, Opera, Safari and IE11+.
@@ -34,16 +92,11 @@ We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.c
 git clone [email protected]:SnowdogApps/alpaca-ui.git
 cd alpaca-ui
 yarn
-cd components
 yarn dev
 ```
 
 Open your browser, visit http://127.0.0.1:6006 and have fun.
 
-## Cooperation with Storefront UI
-
-Ideas behind Alpaca UI and [Storefront UI](https://github.com/DivanteLtd/storefront-ui/) are common efforts. We share almost identical configuration and API so you can easily switch between these two ones. [SNOW.DOG](https://snow.dog) and [Divante](https://divante.co) joined forces in figuring out how to make things right to deliver the best possible experience to the users.
-
 ## License
 
 Code released under MIT license.

assets/styles/_focus-visible.scss

@@ -0,0 +1,4 @@
+// Global styles to remove focus for mouse events
+.js-focus-visible :focus:not([data-focus-visible-added]) {
+  outline: none;
+}

assets/styles/_reset.scss

@@ -5,14 +5,14 @@
 }
 
 *:focus {
-  outline: $reset;
+  outline: 0;
 }
 
 html,
 body {
   min-width: 320px;
   height: 100%;
-  margin: $reset;
+  margin: 0;
   color: $font-color-base;
   font-weight: $font-weight-base;
   font-size: $font-size-base;
@@ -29,12 +29,12 @@ body {
 }
 
 p {
-  margin: $reset;
-  padding: $reset;
+  margin: 0;
+  padding: 0;
 }
 
 dl,
 dt,
 dd {
-  margin: $reset;
+  margin: 0;
 }

assets/styles/_variables.scss

@@ -42,9 +42,6 @@ $border-base: $border-width-base $border-style-base $border-color-base !default;
 // Outline
 $outline-base: none !default;
 
-//Clear
-$reset: 0 !default;
-
 // Spacers
 $spacer: 8px !default;
 $spacer--medium: 16px !default;

assets/styles/transitions/_fade.scss

@@ -11,8 +11,7 @@
 }
 
 .fade-enter-active {
-  -webkit-animation: fade-enter both ease-in;
-  animation: fade-enter both ease-in;
+  animation: fade-enter 400ms both ease-in;
 }
 
 @-webkit-keyframes fade-leave {
@@ -28,6 +27,5 @@
 }
 
 .fade-leave-active {
-  -webkit-animation: fade-leave both ease-out;
-  animation: fade-leave both ease-out;
+  animation: fade-leave 400ms both ease-out;
 }

assets/styles/transitions/_slide-down.scss

@@ -1,37 +1,38 @@
+$offset: -50px;
+$animationDuration: 400ms;
+
 @-webkit-keyframes slide-down-enter {
   from {
-    -webkit-transform: translate3d(0, -50px, 0);
-    transform: translate3d(0, -50px, 0);
+    transform: translate3d(0, $offset, 0);
+    opacity: 0;
   }
 }
 
 @keyframes slide-down-enter {
   from {
-    -webkit-transform: translate3d(0, -50px, 0);
-    transform: translate3d(0, -50px, 0);
+    transform: translate3d(0, $offset, 0);
+    opacity: 0;
   }
 }
 
 .slide-down-enter-active {
-  -webkit-animation: slide-down-enter both cubic-bezier(0.4, 0, 0, 1.5);
-  animation: slide-down-enter both cubic-bezier(0.4, 0, 0, 1.5);
+  animation: slide-down-enter $animationDuration both cubic-bezier(0.4, 0, 0, 0);
 }
 
 @-webkit-keyframes slide-down-leave {
   to {
-    -webkit-transform: translate3d(0, -50px, 0);
-    transform: translate3d(0, -50px, 0);
+    transform: translate3d(0, $offset, 0);
+    opacity: 0;
   }
 }
 
 @keyframes slide-down-leave {
   to {
-    -webkit-transform: translate3d(0, -50px, 0);
-    transform: translate3d(0, -50px, 0);
+    transform: translate3d(0, $offset, 0);
+    opacity: 0;
   }
 }
 
 .slide-down-leave-active {
-  -webkit-animation: slide-down-leave both;
-  animation: slide-down-leave both;
+  animation: slide-down-leave $animationDuration both;
 }