Merge pull request #269 from FirefoxUX/staging

v0.6.6

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Photon Design System Releases
 
+## [[0.6.6] - 2018-02-06](https://github.com/firefoxux/photon/releases/tag/v0.6.6)
+
+### Fix
+
+- [#244](https://github.com/firefoxux/photon/issues/244) Component card: Describe
+- [#261](https://github.com/firefoxux/photon/issues/261) Added a tooltip for 👍 👎
+- [#251](https://github.com/firefoxux/photon/issues/251) Add a JS event listener to the interactive radio button example
+
 ## [[0.6.5] - 2018-01-30](https://github.com/firefoxux/photon/releases/tag/v0.6.5)
 
 ### Fix

contents/components/card.html

@@ -0,0 +1,58 @@
+<header>
+  <%- include('../includes/global/message-bar.html', {type: 'Warning', text: 'This is a working draft', button: 'Report Issue'}); %>
+  <h1>Card</h1>
+  <p>
+    Card is a component to visually group related information and controls.
+  </p>
+</header>
+
+<section>
+  <h2>Usage</h2>
+  <div class="cf nr2 nl2 mb3">
+    <div class="fl-ns w-50-ns ph2">
+      <img src="../images/components/card/card-usage.svg" alt="TestPilot website uses the card component">
+    </div>
+    <div class="fl-ns w-50-ns ph2">
+      <p>
+        When there are collections of images and components that need to be presented on the same page, use cards to help users quickly scan the information from collections to collections.
+      </p>
+    </div>
+  </div>
+</section>
+
+<section> 
+  <h2>Styles</h2>
+  <h3>Borders</h3>
+  <div class="cf nr2 nl2 mb3">
+    <div class="fl-ns w-50-ns ph2">
+      <img src="../images/components/card/borders.png" alt="visual examples of border radius and highlight">
+    </div>
+    <div class="fl-ns w-50-ns ph2">
+      <p class="mb2">Border radius: <code>4px</code></p>
+      <p class="mb2">Highlight border: Grey 30 <code>#D7D7DB</code>, <code>5px</code> (outside)</p>
+    </div>
+  </div>
+
+  <h3>Shadow</h3>
+  <div class="cf nr2 nl2 mb3">
+    <div class="fl-ns w-50-ns ph2">
+      <img src="../images/components/card/shadow.svg" alt="a visual example of shadow 10">
+    </div>
+    <div class="fl-ns w-50-ns ph2">
+      <p>Shadow is optional for cards.</p>
+      <p>If there’s a need of adding a shadow, use <a href="../patterns/shadows.html">shadow 10</a> to highlight elevation.</p>
+    </div>
+  </div>
+
+  <h3>Padding</h3>
+  <p>Use the same padding on the left & right to keep the visual balance.</p>
+  <div class="cf nr2 nl2 mb3">
+    <div class="fl-ns w-50-ns ph2">
+      <img src="../images/components/card/padding.svg" alt="The activity stream example of left right padding">
+    </div>
+    <div class="fl-ns w-50-ns ph2">
+      <p class="mb2">Default padding: <code>16px</code></p>      
+      <p class="mb2">Large padding: <code>20px</code></p>
+    </div>
+  </div>
+</section>

contents/components/radio-buttons.html

@@ -213,7 +213,27 @@ <h4>Unselected</h4>
   <h4>Focused</h4>
   <div class="cf nr2 nl2">
     <div class="fl-ns w-50-ns ph2 mb3">
-      <iframe class="db w-100" height="180" src="https://designakt.github.io/PDS/components/radio-buttons/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+      <div class="interactive">
+        <div id="focus-example" class="interactive-example">
+          <div class="container-demo">
+            <div class="radiobutton-wrapper">
+              <span>When Nightly Starts</span>
+              <div class="group-radio-buttons">
+                <input name="group2" class="track-clicks" id="radio-focus-1" checked="" type="radio">
+                <label for="radio-focus-1">Show your home page</label>
+              </div>
+              <div class="group-radio-buttons">
+                <input name="group2" class="track-clicks" id="radio-focus-2" type="radio">
+                <label for="radio-focus-2">Show a blank page</label>
+              </div>
+              <div class="group-radio-buttons">
+                <input name="group2" class="track-clicks" id="radio-focus-3" type="radio">
+                <label for="radio-focus-3">Show your windows and tabs from last time</label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <figcaption>
         Interactive example (Currently only renders correctly in Firefox.)
       </figcaption>

contents/includes/copy/capitalization/uppercase-usage.html

@@ -6,7 +6,7 @@
   </div>
   <div class="fl-ns w-50-ns ph2">
     <figure>
-      <img class="db w-100-ns outline outline--black-01 outline-offset--1" src="../images/copy/capitalization/capitalization-all-caps-dekstop.svg" alt="an Activity Stream card using uppercase for a title">
+      <img class="db w-100-ns outline outline--black-01 outline-offset--1" src="../images/copy/capitalization/capitalization-all-caps-dekstop.png" alt="an Activity Stream card using uppercase for a title">
       <figcaption>
         Card with secondary text elements in all caps
       </figcaption>

contents/includes/introduction/introduction-uncanny-valley.html

@@ -14,12 +14,12 @@
   </div>
   <div class="fl-ns w-50-m w-25-l ph2">
     <p class="small lh-title">
-      <strong>3. Uncanny Valley</strong><br>So much platform that people do not feel the product, but not enough for it to feel it fully native
+      <strong>3. Uncanny Valley</strong><br>So much platform that people do not feel the product, but not enough for it to feel fully native
     </p>
   </div>
   <div class="fl-ns w-50-m w-25-l ph2">
     <p class="small lh-title">
       <strong>4. No Brand</strong><br>So much platform that people do not feel the product
     </p>
   </div>
-</div>
+</div>

contents/index.json

@@ -97,6 +97,9 @@
         "file": "buttons.html"},
       {"title": "Checkboxes",
         "file": "checkboxes.html"},
+      {"title": "Card",
+        "file": "card.html",
+        "draft":"true"},
       {"title": "Doorhangers",
         "file": "doorhangers.html",
         "draft": "true"},

contents/visuals/color.html

@@ -23,10 +23,6 @@ <h3>Blue</h3>
     Firefox Blue is one of our primary colors. We use blue as accent color for highlighting buttons, links, and active states like the active tab in Firefox default theme.
   </p>
   <% include ../includes/color/color-blue.html %>
-  <p>
-    Blue 50 can be used with an alpha channel in elements like the focus state of a component.
-  </p>
-  <% include ../includes/color/color-blue-alpha.html %>
 
   <h3>Teal</h3>
   <p>
@@ -81,10 +77,6 @@ <h3>Grey</h3>
      Firefox Grey is commonly used for interfaces (e.g., Firefox light theme).
   </p>
   <% include ../includes/color/color-grey.html %>
-  <p>
-    Grey 90 can be used with an alpha channel in elements like icons, default buttons, overlays and shadows.
-  </p>
-  <% include ../includes/color/color-grey-alpha.html %>
 
   <h3>White</h3>
   <p>