feat(): Introduce example of Single Page (#116)

imklau · jedrzejchalubek · commit a6f677db7c11 · 2019-10-11T14:39:33.000+02:00
diff --git a/src/_includes/components/media-icon.html b/src/_includes/components/media-icon.html
@@ -1,22 +1,27 @@
-<div  class="media-icon media-icon--{{ include.variant }}">
+<div class="media-icon">
   <a class="media-icon__inner" href="{{ site.baseurl }}{{ include.href }}">
     <span class="media-icon__icon">
-      {% include icons/media/{{ include.icon }} %}
+      {% include icons/{{ include.icon }} %}
     </span>
+
     <h5 class="media-icon__heading">{{ include.title }}</h5>
+
     <div class="media-icon__content">
-      {{ include.content }}
+      <span>{{ include.content }}</span>
+
+      {% if include.variant == 'related' %}
+        <span class="media-icon__related button-link">Read more</span>
+      {% else %}
+        <div class="media-icon__excerpt button-link flex flex--end flex--middle gutter">
+          <span>Go to the page</span>
 
-      {% if include.variant == 'large' %}
-        <span class="media-icon__excerpt">
-          {{ include.excerpt }}
-        </span>
+          {% include icons/anchor.svg %}
+        </div>
       {% endif %}
     </div>
-    {% if include.variant == 'large' %}
-      <div class="media-icon__anchor">
-        {% include icons/anchor.svg %}
-      </div>
-    {% endif %}
+
+    <div class="media-icon__anchor">
+      {% include icons/anchor.svg %}
+    </div>
   </a>
 </div>
diff --git a/src/_includes/components/related.html b/src/_includes/components/related.html
@@ -0,0 +1,5 @@
+{% for related_url in page.related %}
+  {% assign subpage = site.pages | where: 'url', related_url | first %}
+
+  {% include components/media-icon.html variant="related" href=subpage.url icon=subpage.icon title=subpage.title content=subpage.excerpt %}
+{% endfor %}
diff --git a/src/_includes/icons/anchor.svg b/src/_includes/icons/anchor.svg
@@ -1,3 +1,3 @@
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8.333 0c.737 0 1.334.623 1.334 1.391v2.087c0 .384-.299.696-.667.696-.368 0-.667-.312-.667-.696V1.74A.34.34 0 0 0 8 1.391H1.667a.34.34 0 0 0-.334.348v12.522c0 .192.15.348.334.348H8a.34.34 0 0 0 .333-.348v-1.74c0-.383.299-.695.667-.695.368 0 .667.312.667.696v2.087c0 .768-.597 1.391-1.334 1.391h-7C.597 16 0 15.377 0 14.609V1.39C0 .623.597 0 1.333 0zm2.686 4.952a.643.643 0 0 1 .684.035l4 2.782a.704.704 0 0 1 .297.579c0 .232-.111.45-.297.579l-4 2.782a.647.647 0 0 1-.37.117.691.691 0 0 1-.666-.696V9.391h-6A.993.993 0 0 1 3.8 8.87a1.083 1.083 0 0 1 0-1.044.993.993 0 0 1 .866-.522h6V5.565a.7.7 0 0 1 .352-.613z" fill="#1F477D" fill-rule="evenodd"/>
-</svg>
+  <path d="M8.333 0c.737 0 1.334.623 1.334 1.391v2.087c0 .384-.299.696-.667.696-.368 0-.667-.312-.667-.696V1.74A.34.34 0 0 0 8 1.391H1.667a.34.34 0 0 0-.334.348v12.522c0 .192.15.348.334.348H8a.34.34 0 0 0 .333-.348v-1.74c0-.383.299-.695.667-.695.368 0 .667.312.667.696v2.087c0 .768-.597 1.391-1.334 1.391h-7C.597 16 0 15.377 0 14.609V1.39C0 .623.597 0 1.333 0zm2.686 4.952a.643.643 0 0 1 .684.035l4 2.782a.704.704 0 0 1 .297.579c0 .232-.111.45-.297.579l-4 2.782a.647.647 0 0 1-.37.117.691.691 0 0 1-.666-.696V9.391h-6A.993.993 0 0 1 3.8 8.87a1.083 1.083 0 0 1 0-1.044.993.993 0 0 1 .866-.522h6V5.565a.7.7 0 0 1 .352-.613z" fill-rule="evenodd"/>
+</svg>
diff --git a/src/_includes/icons/symbols/connections.svg b/src/_includes/icons/symbols/connections.svg
@@ -0,0 +1 @@
+<svg width="35" height="23" viewBox="0 0 35 23" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M28.474 22.928l-5.693-5.704 5.693-5.705 5.693 5.705zM22.696 17.223l-5.693-5.704 5.693-5.705 5.693 5.705z"/><path d="M17.137 11.519l-5.693-5.705L17.137.109l5.693 5.705z"/><path d="M17.113 22.904l-5.693-5.705 5.693-5.705 5.693 5.705z"/><path d="M11.444 17.309l-5.693-5.705 5.693-5.705 5.693 5.705z"/><path d="M5.75 22.88L.059 17.173l5.693-5.704 5.693 5.704z"/></g></svg>
diff --git a/src/_includes/menu/menu-item.html b/src/_includes/menu/menu-item.html
@@ -43,7 +43,7 @@
 
               <div class="menu-item__chevron flex__column flex__column--shrink">
                 {% include icons/symbols/chevron-down.svg %}
-              </span>
+              </div>
             </button>
 
             <ul class="menu-item__body menu-item__body--nested" data-ref="accordion[body]">
diff --git a/src/_layouts/page.html b/src/_layouts/page.html
@@ -19,5 +19,11 @@ <h1 id="{{ page.title | downcase }}" class="page__heading">
     <div class="markdown" data-headings-anchors>
       {{ content }}
     </div>
+
+    <hr>
+
+    {% include components/feedback.html %}
+
+    {% include components/callout.html %}
   </div>
 </article>
diff --git a/src/_sass/components/_media-icon.scss b/src/_sass/components/_media-icon.scss
@@ -1,17 +1,15 @@
 .media-icon {
   $this: &;
 
-  height: 100%;
   border: 1px solid color(border-gray);
   background-color: color(white);
   transition: 0.3s box-shadow;
   border-radius: 8px;
 
   &__inner {
     position: relative;
-    padding: 10px;
+    padding: 15px;
     width: 100%;
-    height: 100%;
     color: color(secondary-dark);
     display: grid;
     column-gap: 15px;
@@ -28,7 +26,8 @@
     }
   }
 
-  svg > * {
+  svg {
+    color: color(secondary);
     transition: 0.3s fill;
   }
 
@@ -39,7 +38,7 @@
       background-color: rgba(color(primary-light), 0.16);
     }
 
-    svg > * {
+    svg {
       fill: color(primary);
     }
   }
@@ -72,16 +71,19 @@
   }
 
   &__content {
-    font-size: 12px;
+    font-size: 14px;
     color: color(secondary-dark);
     margin-top: 15px;
     grid-area: content;
     line-height: 1.57;
 
+    & > * + * {
+      margin-top: 10px;
+    }
+
     @include breakpoint(large up) {
       margin-top: 0;
       grid-area: content;
-      font-size: 14px;
     }
   }
 
@@ -107,49 +109,25 @@
 
   &__excerpt {
     font-size: 14px;
-    font-weight: 500;
     line-height: 1.43;
     color: color(primary);
-    text-decoration: underline;
+    text-align: right;
+
+    svg {
+      height: 16px;
+      color: color(primary);
+    }
 
     @include breakpoint(large up) {
       display: none;
     }
   }
 
-  &--small {
-    #{$this}__inner {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      @include breakpoint(large up) {
-        display: grid;
-        grid-template-columns: auto 1fr auto;
-        grid-template-rows: repeat(3, auto);
-        grid-template-areas: "icon heading" "icon content" "content-mobile content-mobile";
-      }
-    }
-
-    #{$this}__content {
-      text-align: center;
-      line-height: 1.57;
-      margin-top: 10px;
-
-      @include breakpoint(large up) {
-        text-align: left;
-        margin-top: 0;
-      }
-    }
-
-    #{$this}__heading {
-      line-height: 1.33;
-      padding-top: 15px;
+  &__related {
+    color: color(primary);
 
-      @include breakpoint(large up) {
-        text-align: left;
-        padding-top: 0;
-      }
+    @include breakpoint(large up) {
+      display: none;
     }
   }
 }
diff --git a/src/_sass/elements/_code.scss b/src/_sass/elements/_code.scss
@@ -1,3 +1,7 @@
+code {
+  font-size: 14px;
+}
+
 :not(pre) > code {
   background-color: color(code-background);
   border-radius: 4px;
diff --git a/src/connections/sources/catalog/index.md b/src/connections/sources/catalog/index.md
@@ -2,6 +2,8 @@
 title: Sources catalog
 hide_toc: true
 landing: true
+icon: symbols/connections.svg
+excerpt: Detailed information about each destination. Learn how our API methods are implemented for that destination.
 ---
 
 <div class="l-chiclet-collection">
diff --git a/src/connections/sources/faq/index.md b/src/connections/sources/faq/index.md
@@ -1,3 +1,5 @@
 ---
 title: Sources FAQ
+icon: media/icon-academy.svg
+excerpt: Detailed information about each destination. Learn how our API methods are implemented for that destination.
 ---
diff --git a/src/connections/sources/guides/index.md b/src/connections/sources/guides/index.md
@@ -1,6 +1,8 @@
 ---
 title: Platforms
 hidden: true
+icon: media/icon-guides.svg
+excerpt: Detailed information about each destination. Learn how our API methods are implemented for that destination.
 ---
 
 
@@ -23,7 +25,7 @@ We currently offer free plugins for the following platforms:
 
 ## Guides
 
-> **NOTE**: Official Segment support for the following guides are deprecated. These guides may be out of date and thus we recommend using third party guides to integrate with these tools. 
+> **NOTE**: Official Segment support for the following guides are deprecated. These guides may be out of date and thus we recommend using third party guides to integrate with these tools.
 
 In addition to native plugins we have written detailed guides for other popular platforms to get you up and running without needing any technical documentation:
 
diff --git a/src/connections/sources/index.md b/src/connections/sources/index.md
diff --git a/src/styleguide.md b/src/styleguide.md
