quilt_ui 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: acf0c64722b0b47bca95af230be7aa97dc0d8277
+  data.tar.gz: b3a04c11c71083140c744ee1ab470536730ee402
+SHA512:
+  metadata.gz: 2c9f085e2fa763f27751cc557d4f5ec5c2dcafb977e73c81ae54dc7fd7d7f9f61809b21f80ad1b8f961faa564246bcc00fbea64d1f0ab91ecd516e46498dc934
+  data.tar.gz: 2f0d653f6886066c7eee34fde72ef2c8191b2616375fb078650c2dc4a90ddfef1f959dff13c2f8d972bf7216a61c81a17c37f59718eabd665efd307bd4067947

data/assets/javascripts/quilt.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Quilt=t():e.Quilt=t()}(this,function(){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t.default=e,t}Object.defineProperty(t,"__esModule",{value:!0}),t.Utilities=t.Components=void 0;var n=o(1),i=r(n),u=o(3),s=r(u);t.Components=i,t.Utilities=s},function(e,t){"use strict"},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.Desktop={matches:!0},t.Mobile={matches:!1}},function(e,t,o){"use strict";function r(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t.default=e,t}Object.defineProperty(t,"__esModule",{value:!0}),t.Breakpoints=void 0;var n=o(2),i=r(n);t.Breakpoints=i}])});

data/assets/stylesheets/quilt/components/badge.scss

@@ -0,0 +1,47 @@
+.badge {
+  @include meta-text;
+  border-radius: default(border-radius);
+  background-color: color(background);
+  padding: spacing(tiny) spacing(tight);
+  vertical-align: middle;
+  white-space: nowrap;
+  display: inline-block;
+
+  + .badge {
+    margin-left: spacing(tight);
+  }
+}
+
+.badge--success {
+  background-color: color(background, success);
+}
+
+.badge--info {
+  background-color: color(background, info);
+}
+
+.badge--subdued {
+  background-color: color(background, subdued);
+}
+
+.badge--attention {
+  background-color: color(background, attention);
+}
+
+.badge--warning {
+  background-color: color(background, warning);
+}
+
+.badge--critical {
+  background-color: color(background, critical);
+}
+
+.badge--complete {
+  background-color: color(background, subdued);
+}
+
+.badge--inline {
+  font-size: type-size(label);
+  line-height: type-line-height(label);
+  margin-left: spacing(tiny);
+}

data/assets/stylesheets/quilt/components.scss

@@ -0,0 +1 @@
+@import 'components/badge';

data/assets/stylesheets/quilt/foundation/colors.scss

@@ -0,0 +1,122 @@
+// scss-lint:disable ColorVariable, ColorKeyword
+$color-palette-data: (
+  white: #fff,
+  black: #000,
+
+  slate-lightest: #95a7b7,
+  slate-lighter: #798c9c,
+  slate-light: #454e57,
+  slate: #31373d,
+  slate-dark: #272c30,
+  slate-darker: #212529,
+
+  sky-lighter: #fafbfc,
+  sky-light: #f5f6f7,
+  sky: #ebeef0,
+  sky-dark: #d3dbe2,
+  sky-darker: #c3cfd8,
+
+  blue-lightest: #eff9fd,
+  blue-lighter: #cae9f7,
+  blue-light: #4fb0e8,
+  blue: #479ccf,
+  blue-dark: #4293c2,
+  blue-darker: #3e89b5,
+
+  green-lightest: #f8ffec,
+  green-lighter: #e5fabc,
+  green-light: #b2d86a,
+  green: #96bf48,
+  green-dark: #7ba232,
+  green-darker: #4d6110,
+
+  yellow-lightest: #fffbe9,
+  yellow-lighter: #fff7b2,
+  yellow-light: #ffe477,
+  yellow: #ffd117,
+  yellow-dark: #d4a002,
+  yellow-darker: #6f4f0c,
+
+  orange-lightest: #fff9ec,
+  orange-lighter: #ffebcc,
+  orange-light: #fec97d,
+  orange: #ff9517,
+  orange-dark: #e06b0c,
+  orange-darker: #7f3a07,
+
+  red-lightest: #fef6f5,
+  red-lighter: #ffd9d6,
+  red-light: #ff9797,
+  red: #ff5d5d,
+  red-dark: #d83e3e,
+  red-darker: #852929,
+
+  purple-lightest: #faf1fe,
+  purple-lighter: #eccdff,
+  purple-light: #d098ff,
+  purple: #b762ff,
+  purple-dark: #763eaf,
+  purple-darker: #4a1f72,
+
+  teal-lightest: #eafdf7,
+  teal-lighter: #c3f9e4,
+  teal-light: #78ecbc,
+  teal: #29bc94,
+  teal-dark: #15966d,
+  teal-darker: #186148,
+
+  shade: rgba(#000, 0.1),
+
+  ink-black: rgba(#000, 0.9),
+  ink-charcoal: rgba(#000, 0.6),
+  ink-slate: rgba(#000, 0.45)
+);
+
+$color-keys-data: (
+  text: (
+    primary: ink-black,
+    secondary: ink-charcoal,
+    hint: ink-slate,
+    link: blue,
+    error: red-dark,
+    success: green-dark
+  ),
+
+  background: (
+    primary: sky-dark,
+    subdued: sky,
+    success: green-light,
+    info: blue-lighter,
+    attention: yellow-light,
+    warning: orange-light,
+    error: red-light,
+    critical: red-light
+  ),
+
+  border: (
+    primary: sky
+  ),
+
+  shadow: (
+    primary: shade
+  )
+);
+// scss-lint:enable ColorVariable, ColorKeyword
+
+//*
+// Returns the color value for a given color name and group.
+//
+// @param {String} $group - The key for the color group.
+// @param {String} $color - The key for the color name. Defaults to primary.
+// @return {Color} The color value.
+
+@function color($group, $color: primary) {
+  $color-palette-key: map-get(map-get($color-keys-data, $group), $color);
+  $fetched-color: map-get($color-palette-data, $color-palette-key);
+
+  @if type-of($fetched-color) == color {
+    @return $fetched-color;
+  } @else {
+    @error "Color `#{$group} - #{$color}` not found. Available colors: #{available-names($color-keys-data)}";
+  }
+}

data/assets/stylesheets/quilt/foundation/defaults.scss

@@ -0,0 +1,22 @@
+$defaults-data: (
+  border-radius: 3px,
+  box-shadow: 0 2px 4px color(shadow),
+  border-width: 1px,
+  border: 1px solid color(border)
+);
+
+//*
+// Returns the default value for the passed property
+//
+// @param {String} $property - The property to retrieve
+// @return {Mixed} The default value for that property
+
+@function default($property) {
+  $fetched-value: map-get($defaults-data, $property);
+
+  @if $fetched-value != null {
+    @return $fetched-value;
+  } @else {
+    @error "Default property `#{$property}` not found. Available properties: #{available-names($defaults-data)}";
+  }
+}

data/assets/stylesheets/quilt/foundation/spacing.scss

@@ -0,0 +1,35 @@
+$unit: 4px;
+
+$spacing-data: (
+  base: rem($unit * 4),
+  tiny: rem($unit),
+  tight: rem($unit * 2),
+  loose: rem($unit * 6)
+);
+
+//*
+// Returns the spacing value for a given variant.
+//
+// @param {String} $variant - The key for the given variant.
+// @return {Number} The spacing for the variant.
+
+@function spacing($variant: base) {
+  $fetched-value: map-get($spacing-data, $variant);
+
+  @if type-of($fetched-value) == number {
+    @return $fetched-value;
+  } @else {
+    @error "Spacing variant `#{$variant}` not found. Available variants: #{available-names($spacing-data)}";
+  }
+}
+
+//*
+// Adds spacing between all direct children.
+//
+// @param {String} $variant - The key for the given variant.
+
+@mixin vertical-rhythm($variant: base) {
+  > *:not(.hide) + * {
+    margin-top: spacing($variant);
+  }
+}

data/assets/stylesheets/quilt/foundation/typography.scss

@@ -0,0 +1,181 @@
+$type-sizes-data: (
+  x-small: rem(12px),
+  small: rem(14px),
+  medium: rem(16px),
+  large: rem(20px),
+  x-large: rem(32px)
+);
+
+$type-size-keys-data: (
+  meta: small,
+  body: medium,
+  section-title: medium,
+  page-title: large,
+  display-title: x-large,
+  label: x-small
+);
+
+//*
+// Returns the font size value for a given typography style.
+//
+// @param {String} $style - The key for the style.
+// @return {Number} The font size value.
+
+@function type-size($style) {
+  $size-key: map-get($type-size-keys-data, $style);
+  $fetched-value: map-get($type-sizes-data, $size-key);
+
+  @if type-of($fetched-value) == number {
+    @return $fetched-value;
+  } @else {
+    @error "Type style `#{$style}` not found. Available styles: #{available-names($type-size-keys-data)}";
+  }
+}
+
+
+
+$type-line-heights-data: (
+  x-small: rem(14px),
+  small: rem(20px),
+  medium: rem(24px),
+  large: rem(48px)
+);
+
+$type-line-height-keys-data: (
+  meta: small,
+  body: medium,
+  section-title: small,
+  page-title: small,
+  display-title: large,
+  label: x-small
+);
+
+//*
+// Returns the line height value for a given typography style.
+//
+// @param {String} $style - The key for the style.
+// @return {Number} The line-height value.
+
+@function type-line-height($style) {
+  $line-height-key: map-get($type-line-height-keys-data, $style);
+  $fetched-value: map-get($type-line-heights-data, $line-height-key);
+
+  @if type-of($fetched-value) == number {
+    @return $fetched-value;
+  } @else {
+    @error "Type style `#{$style}` not found. Available styles: #{available-names($type-line-height-keys-data)}";
+  }
+}
+
+
+
+$type-weights-data: (
+  bold: 600,
+  medium: 500,
+  regular: 400,
+  light: 300
+);
+
+$type-weight-keys-data: (
+  meta: regular,
+  emphasized: bold,
+  body: regular,
+  section-title: medium,
+  page-title: regular,
+  display-title: light
+);
+
+//*
+// Returns the font weight value for a given typography style.
+//
+// @param {String} $style - The key for the variant.
+// @return {Number} The font-weight value.
+
+@function type-weight($style) {
+  $weight-key: map-get($type-weight-keys-data, $style);
+  $fetched-value: map-get($type-weights-data, $weight-key);
+
+  @if type-of($fetched-value) == number {
+    @return $fetched-value;
+  } @else {
+    @error "Type style `#{$style}` not found. Available styles: #{available-names($type-weight-keys-data)}";
+  }
+}
+
+
+
+$type-family-data: (
+  sans-serif: ("Helvetica Neue", Helvetica, Arial, sans-serif),
+  monospace: (Monaco, Consolas, "Lucida Console", monospace)
+);
+
+$type-family-keys-data: (
+  base: sans-serif,
+  code: monospace
+);
+
+//*
+// Returns the font family for a given typography style.
+//
+// @param {String} $style - The key for the variant.
+// @return {List} The font family list.
+
+@function type-family($style) {
+  $family-key: map-get($type-family-keys-data, $style);
+  $fetched-value: map-get($type-family-data, $family-key);
+
+  @if $fetched-value != null {
+    @return $fetched-value;
+  } @else {
+    @error "Type family `#{$style}` not found. Available families: #{available-names($type-family-keys-data)}";
+  }
+}
+
+
+
+@mixin emphasized-text {
+  font-weight: type-weight(emphasized);
+}
+
+@mixin meta-text {
+  font-size: type-size(meta);
+  line-height: type-line-height(meta);
+  font-weight: type-weight(meta);
+  color: color(text, secondary);
+}
+
+@mixin body-text {
+  font-size: type-size(body);
+  line-height: type-line-height(body);
+  font-weight: type-weight(body);
+  color: color(text, primary);
+}
+
+@mixin section-title {
+  font-size: type-size(section-title);
+  line-height: type-line-height(section-title);
+  font-weight: type-weight(section-title);
+  color: color(text, primary);
+}
+
+@mixin page-title {
+  font-size: type-size(page-title);
+  line-height: type-line-height(page-title);
+  font-weight: type-weight(page-title);
+  color: color(text, primary);
+}
+
+@mixin display-title {
+  font-size: type-size(display-title);
+  line-height: type-line-height(display-title);
+  font-weight: type-weight(display-title);
+  color: color(text, primary);
+}
+
+@mixin error-text {
+  color: color(text, error);
+}
+
+@mixin succes-text {
+  color: color(text, success);
+}

data/assets/stylesheets/quilt/foundation/utilities/lengths.scss

@@ -0,0 +1,29 @@
+$base-size: 10px;
+
+//*
+// Returns the value in rem for a given pixel value.
+//
+// @param {Number} $value - The pixel value to be converted.
+// @return {Number} The converted value in rem.
+
+@function rem($value) {
+  @if unit($value) != 'px' {
+    @error 'Value must be in px.';
+  }
+
+  @return $value / $base-size * 1rem;
+}
+
+//*
+// Returns the value in pixels for a given rem value.
+//
+// @param {Number} $value - The rem value to be converted.
+// @return {Number} The converted value in pixels.
+
+@function px($value) {
+  @if unit($value) != 'rem' {
+    @error 'Value must be in rem.';
+  }
+
+  @return ($value / 1rem) * $base-size;
+}

data/assets/stylesheets/quilt/foundation/utilities/maps.scss

@@ -0,0 +1,32 @@
+//*
+// Returns the list of available names in a given map.
+//
+// @param {Map} $map - The map of data to list the names from.
+// @param {Number} $map - The level of depth to get names from.
+// @return {String} The list of names in the map.
+
+@function available-names($map, $level: 1) {
+  @if type-of($map) != 'map' { @return null; }
+
+  $output: '';
+  $newline: '\A ';
+
+  @if $level == 1 {
+    @each $key, $value in $map {
+      $output: $output + '#{$newline}- #{$key} #{available-names($value, $level + 1)}';
+    }
+  } @else {
+    $output: '(';
+    $i: 1;
+
+    @each $key, $value in $map {
+      $sep: if($i < length($map), ', ', '');
+      $output: $output + '#{$key}#{$sep}#{available-names($value, $level + 1)}';
+      $i: $i + 1;
+    }
+
+    $output: $output + ')';
+  }
+
+  @return $output;
+}

data/assets/stylesheets/quilt/foundation/utilities.scss

@@ -0,0 +1,2 @@
+@import 'utilities/lengths';
+@import 'utilities/maps';

data/assets/stylesheets/quilt/foundation.scss

@@ -0,0 +1,5 @@
+@import 'foundation/utilities';
+@import 'foundation/spacing';
+@import 'foundation/colors';
+@import 'foundation/typography';
+@import 'foundation/defaults';

data/assets/stylesheets/quilt/global/typography.scss

@@ -0,0 +1,23 @@
+.type-container {
+  @include vertical-rhythm;
+}
+
+.body-text {
+  @include body-text;
+}
+
+.meta-text {
+  @include meta-text;
+}
+
+.section-title {
+  @include section-title;
+}
+
+.page-title {
+  @include page-title;
+}
+
+.display-title {
+  @include display-title;
+}

data/assets/stylesheets/quilt/global.scss

@@ -0,0 +1 @@
+@import 'global/typography';

data/assets/stylesheets/quilt.scss

@@ -0,0 +1,3 @@
+@import 'quilt/foundation';
+@import 'quilt/global';
+@import 'quilt/components';

data/helpers/components/badge.rb

@@ -0,0 +1,26 @@
+require_relative './component.rb'
+
+module Quilt
+  module UIHelper
+    def ui_badge(content_or_args = nil, **args, &block)
+      if content_or_args.is_a?(Hash)
+        args = content_or_args
+      else
+        content = content_or_args
+        args ||= {}
+      end
+
+      Badge.new(self, **args).render(content, &block)
+    end
+
+    class Badge < Component
+      base_css_class 'badge'
+      variant :inline, accepts: [true, false]
+      variant :status, converts: :to_s, accepts: %w(subdued info success attention warning critical complete)
+
+      def render(content, &block)
+        ui_content_tag(:span, content, options, class: variant_classes, &block)
+      end
+    end
+  end
+end

data/helpers/components/component.rb

@@ -0,0 +1,117 @@
+require 'smart_properties'
+
+module Quilt
+  module UIHelper
+    class Component < SimpleDelegator
+      # rubocop:disable Alias
+      alias view_context __getobj__
+      # rubocop:enable Alias
+
+      include SmartProperties
+
+      def self.fallback
+        Fallback.new
+      end
+
+      def self.with_airbag
+        Airbag.new(self)
+      end
+
+      def self.variants
+        parent_variants = defined?(super) ? super : {}
+        (parent_variants || {}).merge(@variants || {})
+      end
+
+      def self.variant(name, accepts: [true, false], **options)
+        @variants ||= {}
+        @variants[name] = Variant.new(name.to_s.dasherize, Set.new(accepts))
+        property name, accepts: accepts, **options
+      end
+
+      def self.base_css_class(class_name)
+        define_method(:base_css_class) { class_name }
+      end
+
+      property :options, accepts: Hash, default: {}, required: true
+
+      def initialize(view_context, **args)
+        class_properties = self.class.properties.keys
+        valid_args = args.slice(*class_properties)
+        options = args.except(*class_properties)
+
+        super(view_context, options: options, **valid_args)
+      end
+
+      def base_css_class
+        raise NotImplementedError, 'You need to define a base_css_class method for your component'
+      end
+
+      def render
+        raise NotImplementedError, 'You must implement a render method'
+      end
+
+      def variant_classes(*additional_classes)
+        classes = self.class.variants.reduce([base_css_class]) do |matched_classes, (variant_name, variant)|
+          if self[variant_name]
+            matched_classes << "#{base_css_class}--#{variant.boolean? ? variant.name : self[variant_name]}"
+          else
+            matched_classes
+          end
+        end
+
+        [classes, additional_classes].flatten.compact
+      end
+
+      def ui_content_tag(name, *content_or_additional_options, **base_options, &block)
+        additional_options = content_or_additional_options.last.is_a?(Hash) ? content_or_additional_options.pop : {}
+
+        content = if block_given?
+          capture(&block)
+        else
+          Array(content_or_additional_options).compact.inject(''.html_safe, :<<)
+        end
+
+        options = base_options.merge(additional_options) do |key, base_value, additional_value|
+          case key
+          when :class
+            Array(base_value) + Array(additional_value)
+          else
+            additional_value
+          end
+        end
+
+        content.blank? ? ''.html_safe : content_tag(name, options) { content }
+      end
+
+      class Variant < Struct.new(:name, :values)
+        BOOLEAN = Set.new([true, false]).freeze
+
+        def boolean?
+          values == BOOLEAN
+        end
+      end
+
+      class Airbag < SimpleDelegator
+        # rubocop:disable Alias
+        alias component_class __getobj__
+        # rubocop:enable Alias
+
+        def new(*args, **attrs, &block)
+          component_class.new(*args, **attrs, &block)
+        rescue SmartProperties::AssignmentError => error
+          raise if Rails.env.development? || Rails.env.test?
+          Bugsnag.notify(FallbackWarning.new(error))
+          component_class.fallback(*args, **attrs, &block)
+        end
+      end
+
+      class Fallback
+        def render(*)
+          ''.html_safe
+        end
+      end
+
+      class FallbackWarning < RuntimeError; end
+    end
+  end
+end

data/lib/quilt/engine.rb

@@ -0,0 +1,12 @@
+Quilt.helpers.each { |helper| require helper }
+
+module Quilt
+  class Engine < Rails::Engine
+    config.assets.paths << File.expand_path('../../../assets/stylesheets', __FILE__)
+    config.assets.paths << File.expand_path('../../../assets/javascripts', __FILE__)
+
+    ActiveSupport.on_load :action_view do
+      include Quilt::UIHelper
+    end
+  end
+end

data/lib/quilt/version.rb

@@ -0,0 +1,3 @@
+module Quilt
+  VERSION = '0.0.1'
+end

data/lib/quilt_ui.rb

@@ -0,0 +1,13 @@
+require 'quilt/version'
+
+module Quilt
+  def self.root
+    @root ||= Pathname.new(File.dirname(File.expand_path('..', __FILE__)))
+  end
+
+  def self.helpers
+    Dir.glob(root + 'helpers/**/*.rb')
+  end
+end
+
+require 'quilt/engine' if defined?(Rails)

metadata

@@ -0,0 +1,91 @@
+--- !ruby/object:Gem::Specification
+name: quilt_ui
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Chris Sauve
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-03-14 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: smart_properties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.9'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.9'
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 4.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: 4.0.0
+description: 
+email:
+- chris.sauve@shopify.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- assets/javascripts/quilt.js
+- assets/stylesheets/quilt.scss
+- assets/stylesheets/quilt/components.scss
+- assets/stylesheets/quilt/components/badge.scss
+- assets/stylesheets/quilt/foundation.scss
+- assets/stylesheets/quilt/foundation/colors.scss
+- assets/stylesheets/quilt/foundation/defaults.scss
+- assets/stylesheets/quilt/foundation/spacing.scss
+- assets/stylesheets/quilt/foundation/typography.scss
+- assets/stylesheets/quilt/foundation/utilities.scss
+- assets/stylesheets/quilt/foundation/utilities/lengths.scss
+- assets/stylesheets/quilt/foundation/utilities/maps.scss
+- assets/stylesheets/quilt/global.scss
+- assets/stylesheets/quilt/global/typography.scss
+- helpers/components/badge.rb
+- helpers/components/component.rb
+- lib/quilt/engine.rb
+- lib/quilt/version.rb
+- lib/quilt_ui.rb
+homepage: 
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.2
+signing_key: 
+specification_version: 4
+summary: All of Shopify’s core assets.
+test_files: []