reustyle 2.0.7

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 9ba3d932d07b7a852c9a3a9dcb229fef14599c37ded0f32dc272d2b0eaed6ba9
+  data.tar.gz: bd7b6b496118275ba7a3d7acd7d75c971ab9d9d5f49e48566357a276870ff717
+SHA512:
+  metadata.gz: 2dc754699e78b534101118a72c46d5ba7f811bfc2bc67fbdc0a7561955335da974d46f2d509f3d4aecd8b1440fa9127fd169c2e7131f82220f00688656c5960a
+  data.tar.gz: 3ae0ed5d8c66a6551d4405ad0f9de4a21b7d6e75781e7214298d035bf3ebb3b1876de9a6e617a724fbe286758c620be5d242eeb463bef2dc74e05120e515a0cd

data/.drone.yml

@@ -0,0 +1,17 @@
+pipeline:
+  build:
+    when:
+      event: push
+      branch: master
+    image: starefossen/ruby-node:2-8
+    commands:
+      - npm install --silent
+      - bundle install --binstubs
+      - npm run publish
+
+  publish:
+    when:
+      event: push
+      branch: master
+    image: plugins/gh-pages
+    secrets: [ github_username, github_password ]

data/.gitignore

@@ -0,0 +1,25 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+.DS_Store
+*.sublime-*
+docs/
+.sass-cache/
+node_modules/
+build/
+npm-debug.log
+bin/

data/.nvmrc

@@ -0,0 +1 @@
+8.9

data/.rbenv-gemsets

@@ -0,0 +1 @@
+ustyle

data/.ruby-version

@@ -0,0 +1 @@
+2.3.0

data/CONTRIBUTING.md

@@ -0,0 +1,68 @@
+# Contributing
+
+### Code style
+Please see [uStyle](http://ustyle.guide)
+
+## Modifying the code
+
+You have several options with regards to modifying, each of which come with their advantages and disadvantages.
+
+### Documentation
+
+Documentation must be written for any component you are actively working on. All documentation that isn't full page examples remains within the source code `.scss` files. We use [DSS](https://github.com/darcyclarke/DSS) for documenting components. This is done like this:
+
+```scss
+// @page Forms
+// @name Inputs
+// 
+// @description
+//   The standard form input, `.us-form-input`, styled with our brand colours. Explicitly
+//   classed to allow individual app styling for other inputs
+//
+// @state .large - Larger input style
+//
+// @markup
+//   <input class='us-form-input {$modifiers}' type='text'>
+```
+
+`{$modifiers}` is a placeholder where the different states get rendered. If the component you are documenting requires an additional, more complex, component that doesn't quite fit the basic `style_block.tpl` layout, you can declare a partial, like so:
+
+```scss
+@page Colours
+@name Base colours
+@partial colours
+```
+
+Then you can have a partial named `colours.tpl` in `partials/` and run with that.
+
+All output of our documentation goes to `ustyle.json` in `build/`. This contains the JSON which is then parsed by our `builder.js` module and compiled to handlebars. All context within DSS is available on the templates.
+
+### Method 1
+
+1. Clone the existing repo.
+1. Run `bundle install` to install all dependencies.
+1. Create a new feature branch - do not work off `master`
+1. Add in the features/fixes
+1. Test -- this means running the gem locally on several projects. **Not just your own**
+1. Commit with a *reasonable* commit message.
+1. Submit a pull request and wait for it to be merged into master
+
+
+### Method 2
+
+**Warning: If you are unsure about using the publisher function, please use method 1. If you think you're super awesome and won't screw up uStyle versions, please read on.**
+
+1. Clone existing repo
+1. Run a `bundle config --local ustyle /PATH-TO-USTYLE` -- this will allow you to test and work off master on your local copy.
+1. Work off `master` and add in your awesome features.
+1. Test some more, ensure you've run this in a few projects.
+2. Ensure you commit `/dist` into your changes
+1. Run `grunt publish:version:{patch,minor,major}`
+1. Voilà! You now have successfully updated and pushed the gem version, updated the stylesheets and built the styleguide. You're now a pro.
+
+Publishing
+===
+
+Versioning gets done automatically by the `grunt:publish` command. However without specifying a type of version, if will just publish `HEAD` without a new release. 
+
+    $ grunt publish:version:{patch,minor,major}

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in ustyle.gemspec
+gemspec

data/Gruntfile.js

@@ -0,0 +1,234 @@
+var browsersList = require('./package.json')['browserslist']
+
+module.exports = function (grunt) {
+  grunt.loadNpmTasks('grunt-postcss')
+  require('load-grunt-tasks')(grunt)
+  grunt.loadTasks('grunt/tasks')
+
+  grunt.initConfig({
+    clean: ['dist', 'docs'],
+    shell: {
+      upgrade: {
+        command: 'bundle exec rake ustyle:upgrade'
+      },
+      publish: {
+        command: 'bundle exec rake ustyle:publish'
+      }
+    },
+    version: {
+      project: {
+        src: ['package.json', 'lib/ustyle/version.rb']
+      }
+    },
+    postcss: {
+      options: {
+        map: false,
+        processors: [
+          require('autoprefixer')({
+            browsers: browsersList
+          })
+        ]
+      },
+      dist: { src: ['docs/**/*.css', 'dist/**/*.css'] }
+    },
+    watch: {
+      options: {
+        spawn: false
+      },
+      build: {
+        files: ['vendor/assets/**/*', 'styleguide/**/*', 'dist/ustyle.json'],
+        tasks: ['copy', 'sass', 'sassdoc', 'postcss', 'browserSync-inject', 'styleguide', 'builder']
+      },
+      scripts: {
+        files: ['styleguide/**/*.js', 'vendor/**/*.js'],
+        tasks: ['concat']
+      }
+    },
+    svgstore: {
+      options: {
+        prefix: 'icon-'
+      },
+      default: {
+        files: {
+          'vendor/assets/images/icons.svg': ['vendor/assets/images/icons/*.svg'],
+          'dist/icons.svg': ['vendor/assets/images/icons/*.svg'],
+          'styleguide/assets/images/icons.svg': ['vendor/assets/images/icons/*.svg']
+        }
+      }
+    },
+    svgmin: {
+      dist: {
+        files: [{
+          expand: true,
+          cwd: 'vendor/assets/images/icons/',
+          src: '{,*/}*.svg',
+          dest: 'vendor/assets/images/icons/'
+        }]
+      }
+    },
+    styleguide: {
+      dist: {
+        src: 'vendor/assets/stylesheets/ustyle/**/*.scss',
+        dir: 'styleguide',
+        output: 'dist/ustyle.json',
+        statsFor: 'https://assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/{#tag}/ustyle-latest.css',
+        tagPlaceholder: '{#tag}',
+        tagStartVersion: '0.9.9'
+      }
+    },
+    builder: {
+      dist: {
+        files: {
+          'docs/': 'dist/ustyle.json'
+        }
+      }
+    },
+    sass: {
+      dist: {
+        options: {
+          loadPath: ['vendor/assets/stylesheets/ustyle', 'styleguide/assets/sass'],
+          require: './lib/ustyle.rb',
+          style: 'compressed',
+          sourcemap: 'none',
+          bundleExec: true
+        },
+        files: {
+          'dist/ustyle-latest.css': 'vendor/assets/stylesheets/ustyle.scss',
+          'dist/ustyle-content.css': 'vendor/assets/stylesheets/ustyle-content.scss',
+          'docs/css/main.css': 'styleguide/assets/sass/main.scss'
+        }
+      }
+    },
+    concat: {
+      ustyle: {
+        src: [
+          'vendor/assets/javascripts/ustyle/utils.js',
+          'vendor/assets/javascripts/ustyle/anchor.js',
+          'vendor/assets/javascripts/ustyle/backdrop.js',
+          'vendor/assets/javascripts/ustyle/overlay.js',
+          'vendor/assets/javascripts/ustyle/tabs.js',
+          'vendor/assets/javascripts/ustyle/classtoggler.js'
+        ],
+        dest: 'dist/ustyle.js'
+      },
+      app: {
+        src: [
+          'styleguide/assets/javascripts/vendor/*.js',
+          'dist/ustyle.js',
+          'styleguide/assets/javascripts/modules/*.js',
+          'styleguide/assets/javascripts/*.js'
+        ],
+        dest: 'docs/js/app.js'
+      }
+    },
+    uglify: {
+      ustyle: {
+        files: {
+          'dist/ustyle.min.js': ['dist/ustyle.js'],
+          'docs/js/app.min.js': ['docs/js/app.js']
+        }
+      }
+    },
+    copy: {
+      main: {
+        files: [
+          {expand: true, flatten: true, src: ['dist/*.css'], dest: 'docs/css/'},
+          {expand: true, flatten: true, src: ['styleguide/assets/images/**'], dest: 'docs/images/'},
+          {expand: true, flatten: true, src: ['styleguide/CNAME'], dest: 'docs/'}
+        ]
+      }
+    },
+    sassdoc: {
+      default: {
+        src: ['vendor/assets/stylesheets/ustyle/**/*.scss'],
+        options: {
+          dest: './docs/sass',
+          exclude: [
+            './vendor/assets/stylesheets/ustyle/rebrand/vendor/*'
+          ]
+        }
+      }
+    },
+    scsslint: {
+      allFiles: [
+        './vendor/assets/stylesheets/**/*.scss',
+        './styleguide/assets/sass/**/*.scss'
+      ],
+      options: {
+        bundleExec: true,
+        config: 'config/scss-lint.yml',
+        reporterOutput: null,
+        exclude: [
+          './vendor/assets/stylesheets/ustyle/vendor/*',
+          './vendor/assets/stylesheets/ustyle/rebrand/vendor/*',
+          './styleguide/assets/sass/vendor/*'
+        ]
+      }
+    },
+    standard: {
+      options: {
+        fix: true,
+        globals: [
+          'google',
+          '$',
+          'cleanWhiteSpace',
+          'svg4everybody',
+          'hljs',
+          'Overlay',
+          'ClassToggler',
+          'Tabs',
+          'reportData'
+        ]
+      },
+      ustyle: {
+        src: [
+          './grunt/**/*.js',
+          './styleguide/**/!(vendor)/*.js',
+          './vendor/**/*.js',
+          '*.js'
+        ]
+      }
+    },
+    env: {
+      dev: {
+        NODE_ENV: 'development'
+      },
+      build: {
+        NODE_ENV: 'production'
+      }
+    },
+    buildcontrol: {
+      options: {
+        dir: 'docs/',
+        commit: true,
+        push: true,
+        message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
+      },
+      pages: {
+        options: {
+          remote: 'git@github.com:uswitch/ustyle.git',
+          branch: 'gh-pages'
+        }
+      }
+    }
+  })
+
+  grunt.registerTask('lint', ['scsslint', 'standard'])
+  grunt.registerTask('icons', ['svgstore'])
+
+  grunt.registerTask('build', ['clean', 'sass', 'sassdoc', 'copy', 'concat:ustyle', 'concat:app', 'uglify:ustyle', 'lint', 'postcss', 'styleguide', 'builder', 'icons'])
+
+  grunt.registerTask('publish', ['env:build', 'build'])
+
+  grunt.registerTask('publish:version', 'Build and publish ustyle version', function (version) {
+    if (version === null) {
+      grunt.warn('Version must be specified when publishing ustyle')
+    }
+
+    grunt.task.run('env:build', 'version::' + version, 'build', 'shell:upgrade')
+  })
+
+  grunt.registerTask('deploy', ['shell:publish'])
+
+  grunt.registerTask('default', ['env:dev', 'build', 'browserSync-init', 'watch'])
+}

data/LICENSE.txt

@@ -0,0 +1,13 @@
+Copyright 2015 uSwitch Limited
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

data/README.md

@@ -0,0 +1,196 @@
+# [ustyle](http://ustyle.guide)
+
+![ustyle unicorn](https://assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/ustyle-unicorn.png)
+
+uStyle, aptly named, is the styleguide gem for [uSwitch](http://www.uswitch.com). Include it in your Rails/Sinatra/Anything project as a gem to apply consistent styles according the uSwitch styleguide.
+
+This project is provided as is and is aimed at building uSwitch specific projects.
+
+* [Features](#features)
+* [Infrastructure](#infrastructure)
+* [Installation](#installation)
+  * [Sinatra](#sinatra)
+* [Usage](#usage)
+  * [Rails / Sprockets apps](#rails--sprockets-apps)
+  * [Node apps](#node-apps)
+  * [Mixins/Variables](#mixins--variables)
+* [Development](#development)
+* [Contributing](#contributing)
+
+## Features
+
+uStyle is a fully fledged living styleguide that delivers both CSS and JavaScript components for technical implementations as well as documentation for how these things should be applied across uSwitch.
+
+* [Pattern library](https://ustyle.guide/pattern-library/index.html)
+* [Design guidelines](https://ustyle.guide/design/index.html)
+* [Brand guidelines](https://ustyle.guide/brand/index.html)
+
+## Infrastructure
+
+uStyle is compiled and uploaded to S3. Consequently it is served from Cloudfront via our nginx load balancers.
+
+uStyle within applications is usually served within their asset pipeline on compilation.
+
+## Installation
+
+Pre-requisites:
+
+If you want to use as a gem
+
+* Ruby (1.9+)
+* Sinatra / Rails applications with sprockets
+
+This can also be used as a node package just like you would install any other package.
+
+uStyle automagically sets itself up in a sprockets context where found. That means both Sinatra and Rails apps get configured correctly. However there are a few gotchas, as we don't want to add gem dependencies that are only required for certain set ups.
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'ustyle'
+```
+
+And then run in your terminal:
+
+    $ bundle
+
+### Sinatra
+
+Add to your Gemfile:
+``` ruby
+gem 'sprockets'
+gem 'sprockets-sass', '~> 1.2.0'
+gem 'sprockets-helpers'
+```
+
+Then in your app file (usually named server.rb/app.rb etc), after declaring your `class App < Sinatra::Base`:
+
+```ruby
+register Sinatra::Ustyle
+```
+
+**You must use `sprockets-sass` version 1.1.0 or above, as there was a bug where the postprocessor was getting added to the preprocessor which caused autoprefixer to break**
+
+This is only for the gem, not the styleguide within this project.
+
+### Icons
+
+uStyle serves it's icons via `<use xlink:href></use>` tags within an SVG. We have decided to not embed our SVGs, but rather serve them from a URL. See here for a better explanation: https://css-tricks.com/svg-use-with-external-reference-take-2/
+
+Due to this, you need to have the `icons.svg` symbol map on the same domain, protocol and port as your application. To facilite this without serving a sprockets asset, ustyle comes with some `Rack Middleware`
+
+For Rails apps, in your `development.rb` file (you do not want this in production)
+```ruby
+config.middleware.use Ustyle::IconMiddleware
+```
+
+For Rack apps (including Sinatra)
+```ruby
+configure :development do
+  use Ustyle::IconMiddleware
+end
+```
+
+Currently there is no middleware to support node apps, but can be written easily.
+
+Alternatively, you can serve your application in a docker container with nginx (or another supporting proxy server) that has a route to /icons.svg so you can proxy pass to our icons for the app. Ports, domains and protocols **must** match when testing the icons.
+
+An example nginx configuration:
+```nginx
+location = /icons.svg {
+  set $upstream "https://assets0.uswitch.com/s3/uswitch-assets-eu/ustyle";
+  proxy_pass $upstream$request_uri;
+}
+```
+
+You can then successfully reference your icon like so:
+
+```html
+<svg role="img" class="us-icon--medium us-icon--custom us-icon--{$NAME}">
+  <use xlink:href="/images/icons.svg#icon-{$NAME}"></use>
+</svg>
+```
+
+#### Adding a new Icon
+
+To add a new Icon, add the SVG file to `/vendor/assets/images/icons`,
+then add your new icon name as `@state icon` to [this
+file](https://github.com/uswitch/ustyle/blob/new-shield-icon/vendor/assets/stylesheets/ustyle/icons/_base.scss#L19-L112).
+
+Finally, build the optimised icons using
+
+```sh
+grunt icons
+```
+
+## Usage
+
+### Rails / Sprockets apps
+
+If using Rails and Sass, just import the base uSwitch styles at the start of your file
+
+```scss
+@import "ustyle";
+```
+
+This will import the main components. If you want more granular control of what to import, please look at the source code or the styleguide.
+
+### Node apps
+
+uStyle comes with JavaScript implementations of the custom Sass Ruby functions used by Sprockets. To use uStyle's mixins and variables within your own Sass, you'll need to add these functions to the compiler you're using. For example, using [node-sass](https://github.com/sass/node-sass) in a project that also has [Webpack](https://webpack.js.org/), you can do the following:
+
+```javascript
+// In your webpack.config.js
+
+import { SassHelpers } from 'ustyle';
+
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      // ...
+      {
+        test: /.scss$/,
+        use: [{
+          loader: 'sass-loader',
+          options: {
+            functions: SassHelpers
+          }
+        }]
+      }
+      // ...
+    ]
+  }
+  // ...
+};
+```
+
+### Mixins / Variables
+
+uStyle comes bundled with a good set of Sass variables and mixins to use in your project.
+
+For Sass documentation on mixins/variables available to you, please see: https://ustyle.guide/sass/
+
+## Development
+
+To preview changes that you make to uStyle's components and documentation, install dependencies with
+
+    $ npm install
+    
+    $ bundle install
+
+then run:
+
+    $ npm start
+
+This will run the [Grunt](http://gruntjs.com/) default task that builds uStyle, then starts a [Browsersync](https://www.browsersync.io/) server at http://localhost:3000. Changes that you make are live-reloaded in your browser.
+
+## Contributing
+
+See [CONTRIBUTING.md](https://github.com/uswitch/ustyle/blob/master/CONTRIBUTING.md)
+
+## Licences
+
+- Source code is licensed under the Apache v2.0 licence
+- All icons, except the uSwitch icon are licensed under [CC - Attribution - No Derivatives 4.0](http://creativecommons.org/licenses/by-nd/4.0/)
+- uSwitch icon is licensed under [CC - Attribution - NonCommercial - NoDerivates 4.0](http://creativecommons.org/licenses/by-nc-nd/4.0/)

data/Rakefile

@@ -0,0 +1,6 @@
+lib_path = File.join(File.dirname(__FILE__), 'lib')
+$:.unshift(lib_path) unless $:.include?(lib_path)
+
+require "bundler/gem_tasks"
+
+load './tasks/publish.rake'

data/bower.json

@@ -0,0 +1,54 @@
+{
+  "name": "ustyle",
+  "description": "A living styleguide and pattern library by uSwitch.",
+  "main": [
+    "dist/ustyle-latest.css",
+    "dist/ustyle-icons.css",
+    "dist/ustyle.js"
+  ],
+  "dependencies": {
+    "jquery": ">= 1.9.1"
+  },
+  "moduleType": "globals",
+  "keywords": [
+    "css",
+    "sass",
+    "scss",
+    "js",
+    "javascript",
+    "front-end",
+    "styleguide",
+    "uswitch",
+    "ustyle"
+  ],
+  "authors": [
+    "uSwitch Limited <developers@uswitch.com>",
+    "Joe Green <joe.green@uswitch.com>",
+    "David Annez <david.annez@uswitch.com>",
+    "Thomas Britton <thomas.britton@uswitch.com>",
+    "Ricardo Cerqueira <ricardo.cerqueira@uswitch.com>",
+    "Ivo Reis <ivo.reis@uswitch.com>"
+  ],
+  "homepage": "http://ustyle.guide",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/uswitch/ustyle.git"
+  },
+  "license": "Apache-2.0",
+  "ignore": [
+    "/*.",
+    "config",
+    "docs",
+    "grunt",
+    "styleguide",
+    "tasks",
+    "CONTRIBUTING.md",
+    "Gemfile*",
+    "Gruntfile.js",
+    "JAVASCRIPT_STANDARDS.md",
+    "package.json",
+    "Rakefile",
+    "README.md",
+    "ustyle.gemspec"
+  ]
+}

data/config/autoprefixer.yml

@@ -0,0 +1,6 @@
+browsers:
+  - "> 1%"
+  - "last 5 versions"
+  - "Firefox ESR"
+  - "IE 10"
+  - "not Explorer < 10"