V2 beta

.eslintrc.js

@@ -3,11 +3,12 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ['plugin:vue/essential', '@vue/standard'],
+  extends: ['plugin:vue/essential', '@vue/standard', 'prettier', 'prettier/vue', 'plugin:prettier/recommended'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   },
+  plugins: ['prettier'],
   parserOptions: {
     parser: 'babel-eslint'
   }

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/build
 
 # local env files
 .env.local

.node-version

@@ -0,0 +1 @@
+14

.prettierignore

@@ -0,0 +1 @@
+src/components/docs/*.vue

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 140,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

README.md

@@ -1,14 +1,25 @@
 # cube-scss-components
 
-## Why
+## Key features
+
+- Dart Sass
+- Mobile first
+- Modern
+- Fluid
+- Responsive
+- Composable
+- Best practices
+- Clean
+- Functional
+- Import what you need
 
-Because at Cube we manage several web apps and we worry about UI consistency, this project aims to provide basic SCSS components, tailored for SPA and mobile environment.
+## Why
 
-And because we know you'll customize any CSS framework you use, we strive to keep it as simple and basic as possible.
+Because at Cube we manage many web apps and we worry about consistency, this project aims to provide basic SCSS scaffoldings and components, tailored for SPA and mobile web projects.
 
-## Documentation
+## Demo
 
-See the [Documentation Reference](https://cube-scss-components.netlify.com).
+See the [demo](https://cube-scss-components.netlify.com).
 
 ## Installation
 
@@ -18,44 +29,67 @@ yarn add cube-scss-components
 
 ## Getting Started
 
-Usually you import SCSS components you need and you customize variables to match with your visual identity. There is several ways to do so ; here is one way to make it described below.
+Here is one way to get started with Cube SCSS Components.
 
-From your global `index.scss`:
+From your main `index.scss` file:
 
 ```scss
-// Imports your custom "_variables.scss", overrides !defaults
-@import "variables";
-
-// Imports the components you need
-@import "node_modules/cube-scss-components/src/scss/scaffoldings";
-@import "node_modules/cube-scss-components/src/scss/badge";
-@import "node_modules/cube-scss-components/src/scss/bullets";
-@import "node_modules/cube-scss-components/src/scss/buttons";
-@import "node_modules/cube-scss-components/src/scss/buttons_variants";
-@import "node_modules/cube-scss-components/src/scss/cards";
-@import "node_modules/cube-scss-components/src/scss/forms";
-@import "node_modules/cube-scss-components/src/scss/labels";
-@import "node_modules/cube-scss-components/src/scss/list_group";
-@import "node_modules/cube-scss-components/src/scss/pagination";
-@import "node_modules/cube-scss-components/src/scss/slider";
-@import "node_modules/cube-scss-components/src/scss/tables";
-@import "node_modules/cube-scss-components/src/scss/types";
+// Imports your custom "_variables.scss" and overrides !defaults
+@import 'variables';
+
+// Imports Cube SCSS Components
+@import 'node_modules/cube-scss-components/src/scss';
 
 // Your other imports here…
 ```
 
 Your `_variables.scss` file may looks like:
 
 ```scss
+// Loads the "disabled" preset (all components disabled by default), otherwise all components will be written down on your SCSS
+@import 'node_modules/cube-scss-components/src/scss/disabled';
+
+// Then, enable the components you need
+$badge-enabled: true;
+$bullet-enabled: true;
+$button-enabled: true;
+$button-size-enabled: true;
+$button-text-enabled: true;
+$button-outline-enabled: true;
+$button-filled-enabled: true;
+$button-shadow-enabled: true;
+$button-secondary-enabled: true;
+$button-success-enabled: true;
+$button-info-enabled: true;
+$button-warning-enabled: true;
+$button-danger-enabled: true;
+$button-white-enabled: true;
+$card-enabled: true;
+$color-enabled: true;
+$dark-color-scheme-enabled: true;
+$prefers-color-scheme-enabled: true;
+$form-enabled: true;
+$label-enabled: true;
+$layout-enabled: true;
+$list-group-enabled: true;
+$pagination-enabled: true;
+$table-enabled: true;
+$type-enabled: true;
+$type-responsive-fonts-enabled: true;
+
+///
+/// Override defaults
+///
+
 // Colors
-$gray-700: hsl(210, 10%,  30%);
-$brand-primary: #8d1760;
-$brand-secondary: #ffa7e7;
+$gray-700: hsl(210, 10%, 30%);
+$primary: #8d1760;
+$secondary: #ffa7e7;
 
 // Text
 $text-color: #54424a;
 $link-color: #00c9b1;
-$text-muted: lighten($text-color, 30%);
+$muted: lighten($text-color, 30%);
 
 // Fonts
 $font-weight-base: 400;
@@ -64,12 +98,13 @@ $font-size-small: 85%;
 $line-height-base: 1.5;
 
 // Buttons
-$button-primary-color: $brand-primary;
+$button-primary-color: $primary;
 
 // Component commons
 $component-border-radius: 4px;
 $component-box-shadow: 0px 3px 16px -2px $gray-700;
 
-// Imports other cube-scss-components variables
-@import "node_modules/cube-scss-components/src/scss/_variables.scss";
+// Imports other cube-scss-components variables.
+// Should be imported at the end of your own custom variables because of variables dependencies
+@import 'node_modules/cube-scss-components/src/scss/_variables.scss';
 ```

jest.config.js

@@ -1,10 +1,5 @@
 module.exports = {
-  moduleFileExtensions: [
-    'js',
-    'jsx',
-    'json',
-    'vue'
-  ],
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
   transform: {
     '^.+\\.vue$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
@@ -13,10 +8,6 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1'
   },
-  snapshotSerializers: [
-    'jest-serializer-vue'
-  ],
-  testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
-  ]
+  snapshotSerializers: ['jest-serializer-vue'],
+  testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)']
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cube-scss-components",
-  "version": "1.3.4",
+  "version": "2.0.0-beta.7",
   "description": "Basic SCSS components of Cube web apps",
   "author": "Fred Gomez <fred@cube.rentals>",
   "license": "MIT",
@@ -15,10 +15,14 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:css": "sass src/scss/index.scss build/index.css --style=compressed",
+    "build:css:dev": "sass src/scss/index.scss build/index.css",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit"
   },
   "files": [
+    "*.md",
+    "src/scss/**/*.md",
     "src/scss/**/*.scss"
   ],
   "dependencies": {},
@@ -33,8 +37,11 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "eslint": "^5.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^5.0.0",
-    "node-sass": "^4.9.0",
+    "prettier": "^2.0.5",
+    "sass": "^1.26.3",
     "sass-loader": "^7.1.0",
     "v-clipboard": "^2.2.1",
     "vue": "^2.6.6",

public/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>cube-scss-components</title>
   </head>

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="app">
-    <Documentation/>
+    <AppMenu />
+    <AppDocumentation />
     <footer>
       <div>cube-scss-components v{{ $root.$options.version }}</div>
       <div>Cube Living, Inc. © {{ currentYear }}</div>
@@ -9,30 +10,31 @@
 </template>
 
 <script>
-import Documentation from './components/Documentation.vue'
+import AppMenu from './components/AppMenu.vue'
+import AppDocumentation from './components/AppDocumentation.vue'
 import './scss/index.scss'
 
 export default {
   name: 'app',
   components: {
-    Documentation
+    AppMenu,
+    AppDocumentation
   },
-  data () {
-    const now = new Date()
-    return {
-      currentYear: now.getFullYear()
-    }
+  computed: {
+    currentYear: () => new Date().getFullYear()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@import "~@/scss/variables";
+@import '~@/scss/variables';
 #app {
   width: 100%;
   max-width: 1024px;
   margin: 0 auto;
-  padding: 0 1em;
+  padding: 1em;
+  padding: calc(env(safe-area-inset-top) + 1em) calc(env(safe-area-inset-right) + 1em) calc(env(safe-area-inset-bottom) + 1em)
+    calc(env(safe-area-inset-left) + 1em);
 }
 footer {
   display: flex;
@@ -41,6 +43,22 @@ footer {
   align-items: center;
   margin: 3em 0;
   padding: 3em 1em;
-  color: $text-muted;
+  color: var(--text-muted);
+}
+</style>
+
+<style lang="scss">
+@import '~@/scss/variables';
+.fade {
+  &-enter-active {
+    transition: all $timing-fast ease;
+  }
+  &-leave-active {
+    transition: all $timing-very-fast ease;
+  }
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+  }
 }
 </style>

src/components.js

@@ -1,5 +1,31 @@
 import Vue from 'vue'
 
-import Example from './components/Example.vue'
+import Example from './components/AppExample.vue'
+import ArrowUpToLine from './components/icons/ArrowUpToLine.vue'
+import ChevronRight from './components/icons/ChevronRight.vue'
+import ChevronLeftSlashChevronRight from './components/icons/ChevronLeftSlashChevronRight.vue'
+import CircleRighthalfFill from './components/icons/CircleRighthalfFill.vue'
+import DocOnClipboard from './components/icons/DocOnClipboard.vue'
+import Minus from './components/icons/Minus.vue'
+import MoonFill from './components/icons/MoonFill.vue'
+import PersonCropSquare from './components/icons/PersonCropSquare.vue'
+import Plus from './components/icons/Plus.vue'
+import SunMax from './components/icons/SunMax.vue'
+import Star from './components/icons/Star.vue'
+import StarFill from './components/icons/StarFill.vue'
+import StarLefthalfFill from './components/icons/StarLefthalfFill.vue'
 
 Vue.component(Example.name, Example)
+Vue.component('ArrowUpToLine', ArrowUpToLine)
+Vue.component('ChevronRight', ChevronRight)
+Vue.component('ChevronLeftSlashChevronRight', ChevronLeftSlashChevronRight)
+Vue.component('CircleRighthalfFill', CircleRighthalfFill)
+Vue.component('DocOnClipboard', DocOnClipboard)
+Vue.component('Minus', Minus)
+Vue.component('MoonFill', MoonFill)
+Vue.component('PersonCropSquare', PersonCropSquare)
+Vue.component('Plus', Plus)
+Vue.component('SunMax', SunMax)
+Vue.component('Star', Star)
+Vue.component('StarFill', StarFill)
+Vue.component('StarLefthalfFill', StarLefthalfFill)