feat(order-summary): Add order-summary component (#215)

* feat(order-summary): add order summary * feat(order-summary): add order summary with categories * feat(order-summary): uncomment code * fix(order-summary): remove min-height, standardize margin * fix(order-summary): small changes * fix(order-summary): make button type=submit * fix(order-summary): remove type=submit from secondary
carbon-design-system · Jul 12, 2017 · 631f38e · 631f38e
1 parent 1432ddc
commit 631f38e
Show file tree

Hide file tree

Showing 4 changed files with 291 additions and 0 deletions.
diff --git a/src/components/order-summary/_order-summary.scss b/src/components/order-summary/_order-summary.scss
@@ -0,0 +1,147 @@
+.bx--order-summary {
+  @include font-size('14');
+  background-color: $ui-01;
+  padding-bottom: 1.25rem;
+  width: 18rem;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.bx--order-header {
+  display: flex;
+  align-items: center;
+  padding: 0 0 0 1.25rem;
+  border-bottom: 1px solid $ui-05;
+
+  .bx--dropdown {
+    flex: 1;
+    background-color: $ui-01;
+    margin-right: rem(1px);
+  }
+
+  .bx--dropdown-text {
+    max-width: rem(100px);
+  }
+
+  .bx--dropdown-link {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bx--dropdown[data-value=''] .bx--dropdown-text,
+   .bx--dropdown-text {
+    color: $brand-01;
+  }
+}
+
+.bx--order-header-title {
+  @include font-size('14');
+  font-weight: 700;
+  flex: 2;
+}
+
+.bx--order-list {
+  padding: 1.25rem 0;
+  margin: 0 1.25rem;
+  border-bottom: 1px solid $ui-05;
+}
+
+.bx--order-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.125rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.bx--order-detail {
+  @include font-size('14');
+  color: $text-02;
+  padding-right: 1.25rem;
+  line-height: 1.25;
+}
+
+.bx--order-price {
+  @include font-size('12');
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.bx--order-total-container {
+  padding: 1.125rem 1.25rem 0;
+}
+
+.bx--order-total {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.bx--order-total-text {
+  font-weight: 700;
+}
+
+.bx--order-total-price {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-weight: 700;
+
+  span {
+    @include font-size('12');
+    color: $text-02;
+    font-weight: 400;
+  }
+}
+
+.bx--order-total-subtitle {
+  @include font-size('11');
+  color: $text-02;
+  font-style: italic;
+}
+
+.bx--btn {
+  width: 100%;
+  margin-top: 1rem;
+
+  &:first-of-type {
+    margin-top: 2rem;
+  }
+
+  &:last-of-type {
+    margin-bottom: 2rem;
+  }
+}
+
+.bx--order-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: auto;
+  padding-right: 1.25rem;
+}
+
+.bx--order-footer-text {
+  @include font-size('14');
+  color: $text-02;
+  line-height: 1;
+}
+
+.bx--order-category {
+  margin-bottom: 2rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.bx--order-category-title {
+  @include font-size('12');
+  font-weight: 700;
+  margin-bottom: rem(4px);
+  text-transform: uppercase;
+}
diff --git a/src/components/order-summary/order-summary-category.html b/src/components/order-summary/order-summary-category.html
@@ -0,0 +1,90 @@
+<div class="bx--order-summary">
+  <section class="bx--order-header">
+    <p class="bx--order-header-title">Order Summary</p>
+    <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
+      <li class="bx--dropdown-text">USD</li>
+      <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+      <li>
+        <ul class="bx--dropdown-list">
+          <li data-option data-value="all" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">USD</a></li>
+          <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">NOK</a></li>
+          <li data-option data-value="staging" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">GBP</a></li>
+          <li data-option data-value="dea" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">EUR</a></li>
+        </ul>
+      </li>
+    </ul>
+
+  </section>
+  <ul class="bx--order-list">
+    <li class="bx--order-category">
+      <p class="bx--order-category-title">Category Label</p>
+      <ul>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">$10.00 /mo</p>
+        </li>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">$20.00</p>
+        </li>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">$20.00</p>
+        </li>
+      </ul>
+    </li>
+    <li class="bx--order-category">
+      <p class="bx--order-category-title">Category Label</p>
+      <ul>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Extra long detail to show what a long line is like</p>
+          <p class="bx--order-price">$20000.00</p>
+        </li>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">$20.00</p>
+        </li>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">$20.00</p>
+        </li>
+      </ul>
+    </li>
+    <li class="bx--order-category">
+      <p class="bx--order-category-title">Category Label</p>
+      <ul>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">$20.00</p>
+        </li>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">$20.00</p>
+        </li>
+        <li class="bx--order-item">
+          <p class="bx--order-detail">Detail one</p>
+          <p class="bx--order-price">$20.00</p>
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <section class="bx--order-total-container">
+    <div class="bx--order-total">
+      <p class="bx--order-total-text">Total due now</p>
+      <p class="bx--order-total-price">
+        $0.00
+        <span>estimated</span>
+      </p>
+    </div>
+    <p class="bx--order-total-subtitle"> * This is an estimated price based on a customer’s average usage, includes monthly and hourly pricing.</p>
+    <button class="bx--btn bx--btn--primary" type="submit">Create Cluster</button>
+    <button class="bx--btn bx--btn--secondary">Cancel</button>
+  </section>
+  <section class="bx--order-footer">
+    <p class="bx--order-footer-text">Need Help?</p>
+    &nbsp;
+    <a href="" class="bx--link">Contact Bluemix Sales</a>
+  </section>
+</div>
diff --git a/src/components/order-summary/order-summary.html b/src/components/order-summary/order-summary.html
@@ -0,0 +1,53 @@
+<div class="bx--order-summary">
+  <section class="bx--order-header">
+    <p class="bx--order-header-title">Order Summary</p>
+    <ul data-dropdown data-value class="bx--dropdown" tabindex="0">
+      <li class="bx--dropdown-text">USD</li>
+      <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+        <path d="M10 0L5 5 0 0z"></path>
+      </svg>
+      <li>
+        <ul class="bx--dropdown-list">
+          <li data-option data-value="all" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">USD</a></li>
+          <li data-option data-value="cloudFoundry" class="bx--dropdown-item"><a class="bx--dropdown-link" title="NOKNOKNOKNOKNOK" ref="javascript:void(0)">NOKNOKNOKNOKNOK</a></li>
+          <li data-option data-value="staging" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">GBP</a></li>
+          <li data-option data-value="dea" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">WWW</a></li>
+        </ul>
+      </li>
+    </ul>
+
+  </section>
+  <ul class="bx--order-list">
+    <li class="bx--order-item">
+      <p class="bx--order-detail">Detail one</p>
+      <p class="bx--order-price">$20.00</p>
+    </li>
+    <li class="bx--order-item">
+      <p class="bx--order-detail">Detail one</p>
+      <p class="bx--order-price">$20.00</p>
+    </li>
+    <li class="bx--order-item">
+      <p class="bx--order-detail">Detail one</p>
+      <p class="bx--order-price">-</p>
+    </li>
+    <li class="bx--order-item">
+      <p class="bx--order-detail">Detail one</p>
+      <p class="bx--order-price">-</p>
+    </li>
+  </ul>
+  <section class="bx--order-total-container">
+    <div class="bx--order-total">
+      <p class="bx--order-total-text">Total due now</p>
+      <p class="bx--order-total-price">
+        $0.00
+        <span>estimated</span>
+      </p>
+    </div>
+    <button class="bx--btn bx--btn--primary" type="submit">Create Cluster</button>
+  </section>
+  <section class="bx--order-footer">
+    <p class="bx--order-footer-text">Need Help?</p>
+    &nbsp;
+    <a href="" class="bx--link">Contact Bluemix Sales</a>
+  </section>
+</div>
diff --git a/src/globals/scss/styles.scss b/src/globals/scss/styles.scss
@@ -67,6 +67,7 @@ $css--typography: true !default;
 @import '../../components/toolbar/toolbar';
 @import '../../components/time-picker/time-picker';
 @import '../../components/slider/slider';
+@import '../../components/order-summary/order-summary';
 
 //-------------------------------------
 // 🙈 Hidden (Not exposed on website)