quilt_ui 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7c69e411e62437b23e9336ccd2aa2e1f0d844d28
-  data.tar.gz: 0cc5e15c136a2fdb22755b2fa4530b65396b56ee
+  metadata.gz: 30ae1623281e5eb33ad4c165b52d1badc0654c23
+  data.tar.gz: beb2c1a1f9ec6d11e32d4352b40e068313011ce4
 SHA512:
-  metadata.gz: 7ec3089773741b6af55638f9fb49bad2489296be8e911f335edbe920f94d7d8810901b392caf312e1414aaa7faf148c8695e217b599e3db25bd33be667cce1bb
-  data.tar.gz: ebe86356bb454845231132ec44cf73dde5f5c2eebfe5ca67ef8d9dae1d36d76852ffa3bf921abfc8266b362f98397e8669aaacc127c0087a66d35a552f7c480f
+  metadata.gz: 4ef19e4b0c7738c1ae9be759e045642ddae26dae43da59e9995e7621d5d312417f59c32799e6474fe77c8ee1ffd90ce69c6addac8211899839e550eea4a1c772
+  data.tar.gz: 0536a8d90b5dab2a6523a1516fd2720322abe2269d3f742c6ba5d83c412616fc7c188b3486871855fe328675884841f697b2459c5c3f5df97505115271261e0e

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

@@ -1,8 +1,9 @@
 .badge {
-  @include meta-text;
-  border-radius: default(border-radius);
-  background-color: color(background);
-  padding: spacing(tiny) spacing(tight);
+  @include text-style-meta;
+  @include text-emphasis-subdued;
+  border-radius: border-radius();
+  background-color: color(sky, dark);
+  padding: spacing(extra-tight) spacing(tight);
   vertical-align: middle;
   white-space: nowrap;
   display: inline-block;
@@ -12,36 +13,34 @@
   }
 }
 
-.badge--success {
-  background-color: color(background, success);
+.badge--status-success {
+  background-color: color(green, light);
 }
 
-.badge--info {
-  background-color: color(background, info);
+.badge--status-info {
+  background-color: color(blue, lighter);
 }
 
-.badge--subdued {
-  background-color: color(background, subdued);
+.badge--status-subdued {
+  background-color: color(sky);
 }
 
-.badge--attention {
-  background-color: color(background, attention);
+.badge--status-attention {
+  background-color: color(yellow, light);
 }
 
-.badge--warning {
-  background-color: color(background, warning);
+.badge--status-warning {
+  background-color: color(orange, light);
 }
 
-.badge--critical {
-  background-color: color(background, critical);
+.badge--status-critical {
+  background-color: color(red, light);
 }
 
-.badge--complete {
-  background-color: color(background, subdued);
+.badge--status-complete {
+  background-color: color(sky);
 }
 
 .badge--inline {
-  font-size: type-size(label);
-  line-height: type-line-height(label);
-  margin-left: spacing(tiny);
+  margin-left: spacing(extra-tight);
 }

data/assets/stylesheets/quilt/foundation.scss

@@ -1,5 +1,8 @@
 @import 'foundation/utilities';
-@import 'foundation/spacing';
 @import 'foundation/colors';
+
+@import 'foundation/borders';
+@import 'foundation/border-radius';
+@import 'foundation/shadows';
+@import 'foundation/spacing';
 @import 'foundation/typography';
-@import 'foundation/defaults';

data/assets/stylesheets/quilt/foundation/border-radius.scss

@@ -0,0 +1,11 @@
+$border-radius-data: (
+  base: 3px
+);
+
+//*
+// Returns the default border radius.
+// @return {Number} The border radius value.
+
+@function border-radius() {
+  @return map-get($border-radius-data, base);
+}

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

@@ -0,0 +1,20 @@
+$borders-data: (
+  base: 1px solid color(sky),
+  dark: 1px solid color(sky, dark)
+);
+
+//*
+// Returns the specified border.
+//
+// @param {String} $variant - The key for a given variant.
+// @return {List} The border value.
+
+@function border($variant: base) {
+  $fetched-value: map-get($borders-data, $variant);
+
+  @if $fetched-value {
+    @return $fetched-value;
+  } @else {
+    @error "Border variant `#{$variant}` not found. Available variants: #{available-names($borders-data)}";
+  }
+}

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

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

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

@@ -0,0 +1,11 @@
+$shadows-data: (
+  base: 0 2px 4px color(shade)
+);
+
+//*
+// Returns the default shadow.
+// @return {List} The shadow value.
+
+@function shadow() {
+  @return map-get($shadows-data, base);
+}

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

@@ -1,9 +1,9 @@
 $unit: 4px;
 
 $spacing-data: (
-  base: rem($unit * 4),
-  tiny: rem($unit),
+  extra-tight: rem($unit),
   tight: rem($unit * 2),
+  base: rem($unit * 4),
   loose: rem($unit * 6)
 );
 

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

@@ -1,181 +1,48 @@
-$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 text-style-title {
+  color: color(ink);
+  font-size: rem(20px);
+  line-height: rem(24px);
+  font-weight: 400;
 }
 
-@mixin body-text {
-  font-size: type-size(body);
-  line-height: type-line-height(body);
-  font-weight: type-weight(body);
-  color: color(text, primary);
+@mixin text-style-heading {
+  color: color(ink);
+  font-size: rem(18px);
+  line-height: rem(24px);
+  font-weight: 600;
 }
 
-@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 text-style-subheading {
+  color: color(ink);
+  font-size: rem(13px);
+  line-height: rem(20px);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-@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 text-style-body {
+  color: color(ink);
+  font-size: rem(16px);
+  line-height: rem(24px);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-@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 text-style-meta {
+  color: color(ink);
+  font-size: rem(14px);
+  line-height: rem(20px);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-@mixin error-text {
-  color: color(text, error);
+@mixin text-emphasis-strong {
+  font-weight: 600;
 }
 
-@mixin succes-text {
-  color: color(text, success);
+@mixin text-emphasis-subdued {
+  color: color(ink, light);
 }

data/helpers/components/component.rb

@@ -2,6 +2,14 @@ require 'smart_properties'
 
 module Quilt
   module UIHelper
+    def self.logger_callback
+      nil
+    end
+
+    def self.render_fallback
+      false
+    end
+
     class Component < SimpleDelegator
       # rubocop:disable Alias
       alias view_context __getobj__
@@ -9,12 +17,33 @@ module Quilt
 
       include SmartProperties
 
-      def self.fallback
-        Fallback.new
+      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 self.with_airbag
-        Airbag.new(self)
+      def self.new(*args, **attrs, &block)
+        super
+      rescue SmartProperties::AssignmentError => error
+        fallback_error = FallbackError.new(error)
+
+        raise unless Quilt::UIHelper.render_fallback
+        if Quilt::UIHelper.logger_callback.respond_to?(:call)
+          Quilt::UIHelper.logger_callback.call(fallback_error)
+        else
+          Rails.logger.error(fallback_error)
+        end
+
+        fallback(*args, **attrs, &block)
+      end
+
+      def self.fallback(*)
+        Fallback.new
       end
 
       def self.variants
@@ -24,7 +53,7 @@ module Quilt
 
       def self.variant(name, accepts: [true, false], **options)
         @variants ||= {}
-        @variants[name] = Variant.new(name.to_s.dasherize, Set.new(accepts))
+        @variants[name] = Variant.new(name, Set.new(accepts))
         property name, accepts: accepts, **options
       end
 
@@ -32,44 +61,26 @@ module Quilt
         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
+        classes = [base_css_class]
+
+        self.class.variants.each do |variant_key, variant|
+          variant_value = self[variant_key]
+          next unless variant_value
+          classes << base_css_class_variant(variant_key, variant_value, variant)
         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 : {}
+        additional_options = content_or_additional_options.extract_options!
 
-        content = if block_given?
-          capture(&block)
-        else
-          Array(content_or_additional_options).compact.inject(''.html_safe, :<<)
-        end
+        content = block_given? ? capture(&block) : safe_join(Array(content_or_additional_options))
 
         options = base_options.merge(additional_options) do |key, base_value, additional_value|
           case key
@@ -83,6 +94,18 @@ module Quilt
         content.blank? ? ''.html_safe : content_tag(name, options) { content }
       end
 
+      protected
+
+      def base_css_class_variant(variant_key, variant_value, variant)
+        class_name = "#{base_css_class}--#{variant_key}"
+        class_name << "-#{variant_value}" unless variant.boolean?
+        bemerize(class_name)
+      end
+
+      def bemerize(css_class_name)
+        css_class_name.gsub(/(?<!_)_(?!_)/, '-')
+      end
+
       class Variant < Struct.new(:name, :values)
         BOOLEAN = Set.new([true, false]).freeze
 
@@ -91,27 +114,13 @@ module Quilt
         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
+      class FallbackError < RuntimeError; end
     end
   end
 end

data/lib/quilt/version.rb

@@ -1,3 +1,3 @@
 module Quilt
-  VERSION = '0.0.4'
+  VERSION = '0.0.5'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: quilt_ui
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
 platform: ruby
 authors:
 - Chris Sauve
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-04-04 00:00:00.000000000 Z
+date: 2016-04-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: smart_properties
@@ -50,8 +50,10 @@ files:
 - assets/stylesheets/quilt/components.scss
 - assets/stylesheets/quilt/components/badge.scss
 - assets/stylesheets/quilt/foundation.scss
+- assets/stylesheets/quilt/foundation/border-radius.scss
+- assets/stylesheets/quilt/foundation/borders.scss
 - assets/stylesheets/quilt/foundation/colors.scss
-- assets/stylesheets/quilt/foundation/defaults.scss
+- assets/stylesheets/quilt/foundation/shadows.scss
 - assets/stylesheets/quilt/foundation/spacing.scss
 - assets/stylesheets/quilt/foundation/typography.scss
 - assets/stylesheets/quilt/foundation/utilities.scss

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

@@ -1,22 +0,0 @@
-$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)}";
-  }
-}