AAQ progress bars added

kitsune/questions/jinja2/questions/includes/aaq_macros.html

@@ -19,6 +19,35 @@
 {%- endmacro  %}
 
 {% macro select_product(products) -%}
+  <ul class="progress">
+    <li class="progress--item is-current">
+      <a class="progress--link" href="#" aria-current="page">
+        <span class="progress--link-inner">
+          <span class="progress--dot"></span>
+          <span class="progress--label">Select Product</span>
+        </span>
+      </a>
+    </li>
+    <li class="progress--item">
+      <a class="progress--link" href="#" disabled>
+        <span class="progress--link-inner">
+          <span class="progress--dot"></span>
+          <span class="progress--label">Explore Solutions</span>
+        </span>
+      </a>
+    </li>
+    <li class="progress--item">
+      <a class="progress--link" href="#" disabled>
+        <span class="progress--link-inner">
+          <span class="progress--dot"></span>
+          <span class="progress--label">Create Question</span>
+        </span>
+      </a>
+    </li>
+  </ul>
+
+
+
   <h1 class="sumo-page-heading">{{ _('Ask the Community') }}</h1>
   <h2 class="sumo-page-subheading">{{ _('Which product do you need help with?') }}</h2>
   <div class="sumo-page-section--inner">
@@ -50,6 +79,9 @@
           </div>
         </div>
         {% endfor %}
+        <div class="card card--centered-button">
+          <a class="sumo-button primary-button button-lg" href="{{ url('questions.home') }}">{{ _('See All Product Forums')}}</a>
+        </div>
       </div>
     </div>
   </div>
@@ -74,17 +106,36 @@
 {% macro select_category(product, search_box) -%}
 <section class="sumo-page-section hide-when-search-is-active shade-bg">
   <div class="mzp-l-content">
+
+    <ul class="progress">
+      <li class="progress--item is-complete">
+        <a class="progress--link" href="{{ url('questions.aaq_step1') }}">
+          <span class="progress--link-inner">
+            <span class="progress--dot"></span>
+            <span class="progress--label">Select Product</span>
+          </span>
+        </a>
+      </li>
+      <li class="progress--item is-current">
+        <a class="progress--link" href="#" aria-current="page">
+          <span class="progress--link-inner">
+            <span class="progress--dot"></span>
+            <span class="progress--label">Explore Solutions</span>
+          </span>
+        </a>
+      </li>
+      <li class="progress--item">
+        <a class="progress--link" href="#" disabled>
+          <span class="progress--link-inner">
+            <span class="progress--dot"></span>
+            <span class="progress--label">Create Question</span>
+          </span>
+        </a>
+      </li>
+    </ul>
+
     <div class="sumo-l-two-col sidebar-on-right align-center cols-on-medium">
       <div class="sumo-l-two-col--main">
-
-        <div class="breadcrumbs">
-          <ol class="breadcrumbs--list">
-            <li><a href="#TODO">{{ _('Select Product')}}</a></li>
-            <li>{{ product.name }} (TODO - needs proper breadcrumb config)</li>
-          </ol>
-        </div>
-
-
         <img class="page-heading--logo" src="{{ product.image }}" alt="{{ product.name }} logo #TODO">
         <h1 class="sumo-page-heading ">
           <span class="product-title-text">{{ product.name }} {{ _('Solutions') }}</span>

kitsune/questions/jinja2/questions/includes/question_editing_frame.html

@@ -24,6 +24,9 @@ we can compute the edit-title URL.
   {% endblock %}
 
   <article class="main mzp-l-content sumo-page-section--inner">
+    {% block progress_bar %}
+    {% endblock %}
+
     {% block product %}
     {% endblock %}
 

kitsune/questions/jinja2/questions/new_question.html

@@ -78,6 +78,35 @@
 
 {% endblock %}
 
+{% block progress_bar %}
+<ul class="progress">
+  <li class="progress--item is-complete">
+    <a class="progress--link" href="#TODO">
+      <span class="progress--link-inner">
+        <span class="progress--dot"></span>
+        <span class="progress--label">Select Product</span>
+      </span>
+    </a>
+  </li>
+  <li class="progress--item is-complete">
+    <a class="progress--link" href="#TODO">
+      <span class="progress--link-inner">
+        <span class="progress--dot"></span>
+        <span class="progress--label">Explore Solutions</span>
+      </span>
+    </a>
+  </li>
+  <li class="progress--item is-current">
+    <a class="progress--link" href="#3" disabled>
+      <span class="progress--link-inner">
+        <span class="progress--dot"></span>
+        <span class="progress--label">Create Question</span>
+      </span>
+    </a>
+  </li>
+</ul>
+{% endblock %}
+
 {% block major_detail_instructions %}
   <h2 class="sumo-callout-heading">{{ _('Ask your question to our community of users') }}</h2>
 {% endblock %}

kitsune/sumo/static/sumo/scss/base/forms/_simple-search-form.scss

@@ -24,6 +24,10 @@
       (left, auto, 6px),
     ));
   }
+
+  + .page-heading--intro-text {
+    margin-top: p.$spacing-lg;
+  }
 }
 
 .search-button {

kitsune/sumo/static/sumo/scss/components/_card.scss

@@ -300,6 +300,12 @@
     color: var(--color-text);
   }
 
+  &--centered-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   @media #{p.$mq-md} {
     &--callout {
       &-wrap-narrow {

kitsune/sumo/static/sumo/scss/components/_index.scss

@@ -17,6 +17,7 @@
 @forward 'product-picker-dropdown';
 @forward 'ff-alert-banner';
 @forward 'gallery-modal';
+@forward 'progress-bar';
 
 // for https://support.mozilla.org/en-US/kb/dashboard/metrics/aggregated
 @forward 'jqueryui';

kitsune/sumo/static/sumo/scss/components/_progress-bar.scss

@@ -0,0 +1,186 @@
+@use '../config' as c;
+@use '../protocol' as p;
+
+// Progress Bar
+//
+// This is the progress bar used in the 'ask a question' flow.
+//
+// Markup: ../../../../../../styleguide/styleguide-examples/progress.njk
+//
+// Weight: 5
+//
+// Style guide: progress
+
+.progress {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  list-style: none;
+  margin: -24px 0 40px;
+  padding: 0;
+  overflow: hidden;
+  @include c.text-body-sm;
+
+  &--item {
+    position: relative;
+    flex: 1 1 0;
+
+    &:first-child,
+    &:last-child {
+      .progress--link {
+        align-items: flex-start;
+        @include p.bidi((
+          (padding-left, 0, 8px),
+          (padding-right, 8px, 0),
+        ));
+      }
+
+      .progress--link-inner {
+        &:after {
+          position: absolute;
+          top: 12px;
+          left: 0;
+          z-index: 2;
+          width: 50%;
+          height: 3px;
+          background: var(--page-bg);
+          content: "";
+        }
+      }
+    }
+
+    &:last-child {
+      .progress--link {
+        align-items: flex-end;
+        @include p.bidi((
+          (padding-right, 0, 8px),
+          (padding-left, 8px, 0),
+        ));
+      }
+
+      .progress--link-inner {
+        &:after {
+          left: auto;
+          right: 0;
+        }
+      }
+    }
+
+    &.is-complete {
+      .progress--dot {
+        background-image: c.svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="#FFF" stroke-width="2" d="M20 6L9 17l-5-5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+        background-color: var(--color-green-06);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: 18px 18px;
+        border-color: var(--color-green-06);
+        content: "";
+      }
+    }
+
+    &.is-current {
+      display: block;
+
+      .progress--dot:before {
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        border-radius: 50%;
+        background-color: var(--color-marketing-gray-03);
+        content: "";
+      }
+    }
+
+    &:after {
+      position: absolute;
+      top: 20px;
+      left: 0;
+      z-index: 1;
+      width: 120%;
+      height: 3px;
+      background: var(--color-marketing-gray-03);
+      content: "";
+    }
+  }
+
+  &--link-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+  }
+
+  &--link {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 8px;
+    text-align: center;
+    text-decoration: none;
+    color: var(--color-text);
+
+    &:visited {
+      color: var(--color-text);
+    }
+
+    &:hover {
+      color: var(--color-heading);
+    }
+
+    &:active {
+      background: transparent;
+    }
+
+    &[disabled],
+    &[aria-current="page"] {
+      cursor: default;
+
+      &:hover {
+        color: var(--color-text);
+      }
+    }
+  }
+
+  &--dot {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    z-index: 3;
+    margin-bottom: 8px;
+    border: 4px solid var(--color-marketing-gray-03);
+    border-radius: 50%;
+    background-color: var(--page-bg);
+    font-size: 0;
+    color: transparent;
+  }
+
+  @at-root .shade-bg & {
+    .progress--item:first-child .progress--link-inner::after,
+    .progress--item:last-child .progress--link-inner::after,
+    .progress--item:not(.is-complete) .progress--dot {
+      background-color: var(--color-shade-bg);
+    }
+  }
+
+  @at-root .sumo-page-section & {
+    margin: -24px 0 0;
+  }
+
+  @media #{p.$mq-md} {
+    margin: -32px 0 60px;
+
+    @at-root .sumo-page-section & {
+      margin: 0;
+    }
+
+    &--item {
+      &:after {
+        width: 100%;
+      }
+    }
+  }
+}

styleguide/styleguide-examples/progress.njk

@@ -0,0 +1,26 @@
+<ul class="progress">
+  <li class="progress--item is-complete">
+    <a class="progress--link" href="#1">
+      <span class="progress--link-inner">
+        <span class="progress--dot"></span>
+        <span class="progress--label">Select Product</span>
+      </span>
+    </a>
+  </li>
+  <li class="progress--item is-current">
+    <a class="progress--link" href="#2">
+      <span class="progress--link-inner">
+        <span class="progress--dot"></span>
+        <span class="progress--label">Explore Solutions</span>
+      </span>
+    </a>
+  </li>
+  <li class="progress--item">
+    <a class="progress--link" href="#3">
+      <span class="progress--link-inner">
+        <span class="progress--dot"></span>
+        <span class="progress--label">Create Question</span>
+      </span>
+    </a>
+  </li>
+</ul>