Adds pattern definition and consumer classes for nacho-button, nacho-filter-rail and nacho-global-search components

wherehows-web/app/serializers/application.js

@@ -0,0 +1,6 @@
+import DS from 'ember-data';
+import DataTableSerializerMixin from 'ember-data-table/mixins/serializer';
+
+export default DS.JSONAPISerializer.extend(DataTableSerializerMixin, {
+
+});

wherehows-web/app/styles/components/_nacho-button.scss

@@ -0,0 +1,93 @@
+@import "restyle";
+
+@include restyle-define(button, (
+  // Button Component Variables
+        restyle-var(height): 32px,
+        restyle-var(horizontal-padding): 16px,
+        restyle-var(main-color): $secondary-color,
+        restyle-var(background-color): $secondary-color,
+        restyle-var(font-size): 1.7rem,
+        restyle-var(font-weight): 600,
+        restyle-var(text-color): $text-color,
+        restyle-var(border-radius): 2px,
+        background-color: restyle-var(background-color),
+        border: 0,
+        border-radius: restyle-var(border-radius),
+        box-sizing: border-box,
+        color: restyle-var(text-color),
+        cursor: pointer,
+        display: inline-block,
+        font-size: restyle-var(font-size),
+        font-weight: restyle-var(font-weight),
+        font-family: inherit,
+        height: restyle-var(height),
+        line-height: restyle-var(height),
+        overflow: hidden,
+        outline: 0,
+        padding: 0 restyle-var(horizontal-padding),
+        position: relative,
+        text-align: center,
+        text-decoration: none,
+        vertical-align: middle,
+        z-index: z(default),
+        restyle-modifiers: (
+                small: (
+                        restyle-var(font-size): 1.5rem,
+                        restyle-var(height): 24px,
+                        restyle-var(horizontal-padding): 16px,
+                ),
+                medium: (
+                  // Default
+                ),
+                large: (
+                        restyle-var(font-size): 1.7rem,
+                        restyle-var(height): 40px,
+                        restyle-var(horizontal-padding): 24px
+                ),
+                x-large: (
+                        restyle-var(font-size): 2.1rem,
+                        restyle-var(height): 48px,
+                        restyle-var(horizontal-padding): 32px,
+                        restyle-var(font-weight): normal
+                ),
+                tertiary: (
+                        restyle-var(main-color): transparent
+                ),
+                secondary: (
+                        restyle-var(background-color): transparent,
+                        restyle-var(text-color): $text-invert-color,
+                        restyle-var(box-shadow-size): inset 0 0 0 1px,
+                        restyle-var(box-shadow-size-hover): inset 0 0 0 2px,
+                        restyle-var(box-shadow-size-active): inset 0 0 0 3px,
+                        restyle-var(font-weight): 300,
+                        box-shadow: (
+                                restyle-var(box-shadow-size) restyle-var(main-color),
+                                restyle-var(box-shadow-size-hover) transparent,
+                                restyle-var(box-shadow-size-active) transparent
+                        )
+                )
+        )
+));
+
+.nacho-button {
+  @include restyle(button);
+
+  &--x-large {
+    @include restyle(x-large button);
+  }
+
+  &--large {
+    @include restyle(large button);
+  }
+
+  &--small {
+    @include restyle(small button);
+  }
+
+  &--secondary {
+    @include restyle(secondary button);
+  }
+  &--tertiary {
+    @include restyle(tertiary button);
+  }
+}

wherehows-web/app/styles/components/_nacho-filter-rail.scss

@@ -0,0 +1,92 @@
+@import "restyle";
+
+$pad-width: 16px;
+
+@include restyle-define(filter-card, (
+        restyle-var(horizontal-padding): $pad-width,
+        background-color: set-color(white, base),
+        padding: restyle-var(horizontal-padding),
+        position: relative,
+        border-bottom: 1px solid set-color(grey, light)
+));
+
+@include restyle-define(filter-rail, (
+        list-style-type: none,
+        padding: 0,
+        border: 1px solid set-color(grey, light)
+));
+
+.nacho-filter-rail {
+  @include restyle(filter-rail);
+  // Temporary rule to counteract margin on bs `.pager` class in search results
+  //   page view
+  margin: 20px 0;
+
+  &__header {
+    color: set-color(blue, oxford);
+    background-color: set-color(white, base);
+    padding: $pad-width;
+    font-size: 17px;
+    font-weight: 600;
+  }
+}
+
+.nacho-filter-card {
+  @include restyle(filter-card);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &__label, .ember-radio-button {
+    display: block;
+  }
+
+  &__header {
+    padding: 0 0 $pad-width/2;
+  }
+}
+
+// TODO: DSS-6628 ember-radio-button component does not currently support styles
+//   on <label> element. There might be a work around:
+//   https://github.com/yapplabs/ember-radio-button/issues/13
+//   Investigate and find a way to apply a class to the <label> without
+//   the override used below
+//   Override ember-radio-button styles
+.ember-radio-button {
+  position: relative;
+  left: 26px;
+
+  &:before,
+  &:after {
+    content: " ";
+    height: 20px;
+    width: 20px;
+    position: absolute;
+    top: 0;
+    left: -26px;
+    display: block;
+    box-sizing: border-box;
+    border-radius: 50%;
+  }
+
+  &:before {
+    border: 1px solid set_color(grey, mid);
+  }
+
+  &:after {
+    border: 0 solid set-color(blue, curious);
+    transition: border-width 167ms cubic-bezier(0, 0, 0.2, 1);
+    border-width: 0px;
+  }
+
+  &.checked:after {
+    border-width: 6px;
+  }
+
+  input[type=radio] {
+    opacity: 0;
+    margin: 16px 2px 0 0;
+    position: absolute;
+  }
+}

wherehows-web/app/styles/components/_nacho-global-search.scss

@@ -0,0 +1,10 @@
+/// Search bar height
+$height: 40px;
+
+.nacho-global-search {
+  color: $text-color;
+
+  &__text-input {
+    height: $height;
+  }
+}