ribbons statements and theme

src/scss/ribbons.scss

@@ -5,29 +5,92 @@
 @import 'utils/enables';
 @import 'utils/syntaxes';
 @import 'utils/trowel-variables';
-@import 'utils/mixin-example';
+@import 'utils/mixin-ribbons';
+@import 'utils/mixin-ribbons-band';
 
-$ribbon--selector: selector(new 'ribbon' with $ribbons--syntax);
 
 @if $ribbons--enabled {
+  $ribbon--selector: selector(new 'ribbon' with $ribbons--syntax);
+
   @include statement($ribbon--selector, (
-    ('@include ribbons--mixin-example', null),
     ('font-size', $ribbons--font-size),
     ('font-family', $ribbons--font-family),
     ('font-weight', $ribbons--font-weight),
     ('text-transform', $ribbons--text-transform),
     ('letter-spacing', $ribbons--letter-spacing),
     ('line-height', $ribbons--line-height),
-    ('text-align', $ribbons--text-align),
     ('text-decoration', $ribbons--text-decoration),
     ('margin', $ribbons--margin),
-    ('border-width', $ribbons--border-width),
-    ('border-style', $ribbons--border-style),
-    ('border-color', $ribbons--border-color),
-    ('border-radius', $ribbons--border-radius),
     ('color', $ribbons--color),
     ('box-shadow', $ribbons--box-shadow),
     ('background', $ribbons--background),
+    ('position', relative),
+    ('width', $ribbons--size),
+    ('height', $ribbons--size),
+    ('overflow', hidden),
+    ('pointer-events', none),
+    ('display', block),
+  ));
+
+
+  $ribbon-band--selector: selector(set $ribbon--selector element 'band');
+
+  @include statement($ribbon-band--selector, (
+    ('@include ribbons--position', $ribbons--position),
+    ('@include ribbons-band--width', $ribbons--gutter),
+    ('background-color', $ribbons--background-color),
+    ('position', absolute),
+    ('top', 0),
+    ('height', $ribbons--height),
+    ('text-align', center),
+    ('user-select', none),
+    ('display', block),
+  ));
+
+
+  $ribbon-band-before--selector: selector(set $ribbon-band--selector pseudo-element 'before');
+
+  @include statement($ribbon-band-before--selector, (
+    ('@include ribbons-band-pseudos--commons', ''),
     ('background-color', $ribbons--background-color),
+    ('left', 100%),
   ));
+
+
+  $ribbon-band-after--selector: selector(set $ribbon-band--selector pseudo-element 'after');
+
+  @include statement($ribbon-band-after--selector, (
+    ('@include ribbons-band-pseudos--commons', ''),
+    ('background-color', $ribbons--background-color),
+    ('right', 100%),
+  ));
+
+
+  $ribbon-content--selector: selector(set $ribbon--selector element 'content');
+
+  @include statement($ribbon-content--selector, (
+    ('position', absolute),
+    ('top', 50%),
+    ('left', 50%),
+    ('transform', translate(-50%, -50%)),
+    ('z-index', 1),
+    ('white-space', nowrap),
+    ('overflow', hidden),
+    ('display', block),
+  ));
+
+
+  $ribbon-content-before--selector: selector(set $ribbon-content--selector pseudo-element 'before');
+
+  @include statement($ribbon-content-before--selector, (
+    ('content', ''),
+    ('background-color', $ribbons--background-color),
+    ('position', absolute),
+    ('top', -1px),
+    ('bottom', -1px),
+    ('left', -1px),
+    ('right', -1px),
+    ('z-index', -1),
+    ('overflow', hidden),
+  ))
 }

src/scss/utils/_get-hypotenuse.scss

@@ -0,0 +1,28 @@
+@function square-root($r) {
+  $x0: 1;
+  $x1: $x0;
+
+  @for $i from 1 through 10 {
+    $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
+    $x0: $x1;
+  }
+
+  @return $x1;
+}
+
+@function strip-units($number) {
+  @return $number / ($number * 0 + 1);
+}
+
+@function square($number) {
+  $unitless: strip-units($number);
+  @return ($unitless * $unitless);
+}
+
+@function get-hypotenuse($ab, $ac) {
+  @if unit($ab) == unit($ac) {
+    @return square-root(square($ab) + square($ac)) + unquote(unit($ab));
+  } @else {
+    @error 'The two value into the get-hypotenuse() function must share the same unit type';
+  }
+}

src/scss/utils/_mixin-ribbons-band.scss

@@ -0,0 +1,26 @@
+@import './get-hypotenuse';
+
+@function ribbons-band--width($gutter, $flags) {
+  @return (
+    ('width', get-hypotenuse($gutter, $gutter), $flags),
+  );
+}
+
+
+// (1) Big static value in order to make sure that for any gutter value the
+//     before and after goes off the thumbnail element
+// (2) We set a negative margin on x axis in order to avoid a very thin band
+//     where the `::after` and `::before` pseudo elements are not perfectly
+//     sticked to the `.thumbnail__ribbon`.
+
+@function ribbons-band-pseudos--commons($nothing, $flags) {
+  @return (
+    ('content', ''),
+    ('display', block),
+    ('position', absolute),
+    ('top', 0),
+    ('height', 100%),
+    ('width', 10000px), // (1)
+    ('margin', 0 -1px), // (2)
+  );
+}

src/scss/utils/_mixin-ribbons.scss

@@ -0,0 +1,19 @@
+@function ribbons--position($orientation, $flags) {
+  $property-affected: if($orientation == 'right', 'left', 'right');
+
+  @if $orientation == 'right' or $orientation == 'left' {
+    $rotate-direction: if($orientation == 'left', -1, 1);
+
+    @return (
+      ($property-affected, 100%, $flags),
+      ($orientation, auto, $flags),
+      ('margin-#{$property-affected}', value($ribbons--gutter, $flags) * -1, $flags),
+      ('margin-#{$orientation}', 0, $flags),
+      ('transform-origin', top #{$property-affected}, $flags),
+      ('transform', rotate(45deg * $rotate-direction), $flags),
+    );
+  } @else {
+    @error "The parameter `$orientation` must be a string value that can only be 'right' or 'left'";
+  }
+
+}

src/scss/utils/_trowel-variables.scss

@@ -1,17 +1,25 @@
-$ribbons--font-size: 1rem !default;
+$ribbons--font-size: trwl-theme-size('md') !default;
 $ribbons--font-family: null !default;
 $ribbons--font-weight: null !default;
 $ribbons--text-transform: null !default;
 $ribbons--letter-spacing: null !default;
 $ribbons--line-height: null !default;
-$ribbons--text-align: null !default;
 $ribbons--text-decoration: null !default;
 $ribbons--margin: null !default;
-$ribbons--border-width: null !default;
-$ribbons--border-style: null !default;
-$ribbons--border-color: null !default;
-$ribbons--border-radius: null !default;
-$ribbons--color: null !default;
+$ribbons--color: rgb(255, 255, 255) !default;
 $ribbons--box-shadow: null !default;
 $ribbons--background: null !default;
-$ribbons--background-color: null !default;
+$ribbons--background-color: (
+  'default': trwl-theme-color('gray-darker'),
+  '-primary': trwl-theme-color('primary'),
+  '-success': trwl-theme-color('success'),
+  '-warning': trwl-theme-color('warning'),
+  '-danger': trwl-theme-color('danger'),
+) !default;
+$ribbons--size: 7.5em !default;
+$ribbons--position: (
+  'default': 'left',
+  '-right': 'right',
+) !default; // 'left' or 'right'
+$ribbons--gutter: 3.75em !default;
+$ribbons--height: 1.875em !default;

src/twig/ribbon.html.twig

@@ -9,6 +9,13 @@
 
 {% set blockSelector = syntax.prefix|default(false) ? syntax.prefix ~ syntax.separator.prefix ~ 'ribbon' : 'ribbon' %}
 
-<div class="{{ blockSelector }}">
-    {{ block('body') }}
-</div>
+{% set modifiersClass = '' %}
+{% for modifier in modifiers|default([]) %}
+    {% set modifiersClass = modifiersClass ~ ' ' ~ blockSelector ~ syntax.separator.modifier ~ modifier %}
+{% endfor %}
+
+<span class="{{ blockSelector }}{{ modifiersClass }}">
+    <span class="{{ blockSelector }}__band">
+        <span class="{{ blockSelector }}__content">{{ block('content') }}</span>
+    </span>
+</span>

test/src/index.html.twig

@@ -16,9 +16,17 @@
     </h1>
 
     {% embed '../../src/twig/ribbon.html.twig' %}
-        {% block body %}hello world !{% endblock %}
+        {% block content %}default{% endblock %}
     {% endembed %}
 
-
+    {% embed '../../src/twig/ribbon.html.twig' with { modifiers: ['right'] } %}
+        {% block content %}on right{% endblock %}
+    {% endembed %}
+
+    {% for theme in ['primary', 'success', 'warning', 'danger'] %}
+        {% embed '../../src/twig/ribbon.html.twig' with { modifiers: [theme] } %}
+            {% block content %}{{ theme }}{% endblock %}
+        {% endembed %}
+    {% endfor %}
   </body>
 </html>