Merge branch 'dev'

USDA-FSA · Nov 30, 2017 · 0071f73 · 0071f73
2 parents cc6df54 + e625e1d
commit 0071f73
Show file tree

Hide file tree

Showing 50 changed files with 2,434 additions and 258 deletions.
diff --git a/src/component_card.html b/src/component_card.html
@@ -20,6 +20,12 @@
 
         <h1>Component: Card</h1>
 
+        <div class="fsa-alert fsa-alert--error" role="alert">
+          <div class="fsa-alert__body">
+            <h3 class="fsa-alert__heading">Deprecated</h3>
+            <p class="fsa-alert__text">This component's use in PCP has been replaced by <a href="component_cardbar.html">Cardbar</a></p>
+          </div>
+        </div>
         <pre class="pcp-code-block"><code>class="<strong style="color:black">pcp-card</strong>"</code></pre>
 
         <div class="fsa-grid">

diff --git a/src/component_cardbar.html b/src/component_cardbar.html
@@ -0,0 +1,60 @@
+{% include: 'includes/html.html' %}
+
+{% include: 'includes/head.html' @title:'Component' %}
+
+<body class="pcp-app">
+
+  {% include: 'includes/fsa-browser-upgrade.html' %}
+
+  {% include: 'includes/skipnav.html' %}
+
+  <header>
+    {% include: 'includes/pcp-header-project.html' %}
+  </header>
+
+  <main id="main-content" tabindex="-1">
+
+    <div class="pcp-section">
+
+      <div class="pcp-section__bd">
+
+        <h1>Component: Cardbar</h1>
+
+        <pre class="pcp-code-block"><code>class="<strong style="color:black">pcp-cardbar</strong>"</code></pre>
+
+        <div class="fsa-grid">
+          <div class="fsa-grid__1/1 fsa-grid__1/2@m">
+            <h2 class="pcp-prototype-title">As seen on</h2>
+            <ul>
+              <li><a href="workflow_mapping.html">Daily Process > Mapping / Adjustment</a></li>
+            </ul>
+          </div>
+          <div class="fsa-grid__1/1 fsa-grid__1/2@m">
+            <h2 class="pcp-prototype-title">FSA Design System References</h2>
+            <ul>
+              <li><a href="http://usda-fsa.github.io/fsa-design-system/?preview">FSA Design System</a></li>
+              <li><a href="http://usda-fsa.github.io/fsa-design-system/visual-style/typography/">Typography</a></li>
+              <li><a href="http://usda-fsa.github.io/fsa-design-system/elements/buttons/">Buttons</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <h2 class="pcp-prototype-title">Sample</h2>
+
+        {% include: 'includes/pcp-map-toolbar.html' %}
+
+      </div>
+
+    </div>
+
+  </main>
+
+  <footer>
+    {% include: 'includes/pcp-footer-project.html' %}
+  </footer>
+
+  {% include: 'includes/scripts.html' %}
+
+</body>
+
+</html>
diff --git a/src/component_icons.html b/src/component_icons.html
@@ -0,0 +1,86 @@
+{% include: 'includes/html.html' %}
+
+{% include: 'includes/head.html' @title:'Component' %}
+
+<body class="pcp-app">
+
+  {% include: 'includes/fsa-browser-upgrade.html' %}
+
+  {% include: 'includes/skipnav.html' %}
+
+  <header>
+    {% include: 'includes/pcp-header-project.html' %}
+  </header>
+
+  <main id="main-content" tabindex="-1">
+
+    <div class="pcp-section">
+
+      <div class="pcp-section__bd">
+
+        <h1>PCP Icons</h1>
+
+        <p class="fsa-text--lead">These are a <strong>limited set of icons</strong> specific to PCP-II, and are not necessarily ones that will become part of the FSA Design System.</p>
+
+        <pre class="pcp-code-block">&lt;svg class="pcp-icon <strong style="color:black">pcp-icon--[variation] pcp-icon--[size]</strong>" role="presentation" aria-hidden="true"&gt;
+  &lt;use xlink:href="img/symbol-defs.svg#<strong style="color:black">pcp-icon--[variation]</strong>"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</pre>
+
+        <div class="fsa-grid">
+          <div class="fsa-grid__1/1 fsa-grid__1/2@m">
+            <h2 class="pcp-prototype-title">As seen on</h2>
+            <ul>
+              <li><a href="link.html">[page]</a></li>
+              <li><a href="link.html">[page]</a></li>
+            </ul>
+          </div>
+          <div class="fsa-grid__1/1 fsa-grid__1/2@m">
+            <h2 class="pcp-prototype-title">FSA Design System References</h2>
+            <ul>
+              <li><a href="http://usda-fsa.github.io/fsa-design-system/">FSA Design System</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <h2 class="pcp-prototype-title">Variations</h2>
+
+        <ul class="fsa-list--inline">
+          <li>
+            <input class="fsa-radio" id="iconSize__small" name="iconSize" type="radio" value="small" data-behavior="icon-size-demo">
+            <label for="iconSize__small">Small</label>
+          </li>
+          <li>
+            <input class="fsa-radio" id="iconSize__default" name="iconSize" type="radio" value="" data-behavior="icon-size-demo" checked>
+            <label for="iconSize__default">Default</label>
+          </li>
+          <li>
+            <input class="fsa-radio" id="iconSize__medium" name="iconSize" type="radio" value="medium" data-behavior="icon-size-demo">
+            <label for="iconSize__medium">Medium</label>
+          </li>
+          <li>
+            <input class="fsa-radio" id="iconSize__large" name="iconSize" type="radio" value="large" data-behavior="icon-size-demo">
+            <label for="iconSize__large">Large</label>
+          </li>
+        </ul>
+
+        <div id="icon-list">
+          {% include: 'includes/pcp-icon-list.html' %}
+        </div>
+
+
+      </div>
+
+    </div>
+
+  </main>
+
+  <footer>
+    {% include: 'includes/pcp-footer-project.html' %}
+  </footer>
+
+  {% include: 'includes/scripts.html' %}
+
+</body>
+
+</html>
diff --git a/src/component_popover.html b/src/component_popover.html
@@ -0,0 +1,93 @@
+{% include: 'includes/html.html' %}
+
+{% include: 'includes/head.html' @title:'Component' %}
+
+<body class="pcp-app">
+
+  {% include: 'includes/fsa-browser-upgrade.html' %}
+
+  {% include: 'includes/skipnav.html' %}
+
+  <header>
+    {% include: 'includes/pcp-header-project.html' %}
+  </header>
+
+  <main id="main-content" tabindex="-1">
+
+    <div class="pcp-section">
+
+      <div class="pcp-section__bd">
+
+        <h1>Component: Popover</h1>
+
+        <p class="fsa-text--lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quia, rem sapiente, ratione exercitationem eveniet voluptatem?</p>
+
+        <pre class="pcp-code-block"><code>&lt;div class="<strong style="color:black">pcp-popover pcp-popover--[direction] pcp-popover--[size]</strong>"&gt; ... &lt;/div&gt;</code></pre>
+
+        <div class="fsa-grid">
+          <div class="fsa-grid__1/1 fsa-grid__1/2@m">
+            <h2 class="pcp-prototype-title">As seen on</h2>
+            <ul>
+              <li>Profile link (name) of <code>.fsa-header-app</code></li>
+              <li><a href="workflow_mapping.html">Adjustments:</a> Map Tools</li>
+            </ul>
+          </div>
+          <div class="fsa-grid__1/1 fsa-grid__1/2@m">
+            <h2 class="pcp-prototype-title">FSA Design System References</h2>
+            <ul>
+              <li><a href="http://usda-fsa.github.io/fsa-design-system/?preview">FSA Design System</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <h2 class="pcp-prototype-title">Variations</h2>
+
+        <p>
+          <span class="fsa-btn-group fsa-btn-group--small fsa-btn-group--block" role="group" aria-label="Popover Direction">
+            <button data-behavior="change-popover-dir button-group-select" data-dir="tl" class="fsa-btn-group__item fsa-btn-group__item--active" type="button">Top-left</button>
+            <button data-behavior="change-popover-dir button-group-select" data-dir="tc" class="fsa-btn-group__item" type="button">Top-center</button>
+            <button data-behavior="change-popover-dir button-group-select" data-dir="tr" class="fsa-btn-group__item" type="button">Top-right</button>
+            <button data-behavior="change-popover-dir button-group-select" data-dir="rt" class="fsa-btn-group__item" type="button">Right-top</button>
+            <button data-behavior="change-popover-dir button-group-select" data-dir="rc" class="fsa-btn-group__item" type="button">Right-center</button>
+            <button data-behavior="change-popover-dir button-group-select" data-dir="rb" class="fsa-btn-group__item" type="button">Right-bottom</button>
+            <button data-behavior="change-popover-dir button-group-select" data-dir="br" class="fsa-btn-group__item" type="button">Bottom-right</button>
+            <button data-behavior="change-popover-dir button-group-select" data-dir="bc" class="fsa-btn-group__item" type="button">Bottom-center</button>
+            <button data-behavior="change-popover-dir button-group-select" data-dir="bl" class="fsa-btn-group__item" type="button">Bottom-left</button>
+            <button data-behavior="change-popover-dir button-group-select" data-dir="lb" class="fsa-btn-group__item" type="button">Left-bottom</button>
+            <button data-behavior="change-popover-dir button-group-select" data-dir="lc" class="fsa-btn-group__item" type="button">Left-center</button>
+            <button data-behavior="change-popover-dir button-group-select" data-dir="lt" class="fsa-btn-group__item" type="button">Left-top</button>
+          </span>
+        </p>
+        <p>
+          <span class="fsa-btn-group fsa-btn-group--small" role="group" aria-label="Popover Size">
+            <button data-behavior="change-popover-size button-group-select" data-size="small" class="fsa-btn-group__item fsa-btn-group__item--active" type="button">Small</button>
+            <button data-behavior="change-popover-size button-group-select" data-size="medium" class="fsa-btn-group__item" type="button">Medium</button>
+            <button data-behavior="change-popover-size button-group-select" data-size="large" class="fsa-btn-group__item" type="button">Large</button>
+          </span>
+        </p>
+        <p>
+          <input data-behavior="toggle-popover-title" class="fsa-checkbox" id="unique-id-foigh" type="checkbox" name="unique-id-foigh" value="yes" checked="checked">
+          <label for="unique-id-foigh">Optional title</label>
+        </p>
+
+        <div class="pcp-prototype-popover-demo">
+          <div style="position: relative;">
+            <button style="height:144px; font-size: " class="fsa-btn fsa-btn--large fsa-btn--secondary fsa-btn--block fsa-text-size--7" type="button" data-behavior="toggle-popover" data-target="popover-demo">Click me!</button>
+            {% include: 'includes/pcp-popover.demo.html' %}
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </main>
+
+  <footer>
+    {% include: 'includes/pcp-footer-project.html' %}
+  </footer>
+
+  {% include: 'includes/scripts.html' %}
+
+</body>
+
+</html>
diff --git a/src/component_stepped-tabs.html b/src/component_stepped-tabs.html
@@ -59,17 +59,25 @@ <h3 class="fsa-font--sans">Justified</h3>
 
         {% include: 'includes/pcp-stepped-tabs.html' @variation:'pcp-stepped-tabs--justified' %}
 
+        <h3 class="fsa-font--sans">No icons</h3>
+
+        {% include: 'includes/pcp-stepped-tabs__no-icons.html' @variation:' ' %}
+
         <h2 class="pcp-prototype-title">Samples</h2>
 
         {% include: 'includes/pcp-stepped-tabs__step-1-of-4.html' %}
         {% include: 'includes/pcp-stepped-tabs__step-2-of-4.html' %}
         {% include: 'includes/pcp-stepped-tabs__step-3-of-4.html' %}
         {% include: 'includes/pcp-stepped-tabs__step-4-of-4.html' %}
 
-        <h3 class="fsa-font--sans">Mapping Adjustments (on step 3 of 4)</h3>
+        <h3 class="fsa-font--sans">Adjustments (on step 4 of 6)</h3>
 
         {% include: 'includes/pcp-stepped-tabs__mapping.html' %}
 
+        <h3 class="fsa-font--sans">Adjustments <em>in progress</em>, but currently viewing <em>completed</em> Price Discovery</h3>
+
+        {% include: 'includes/pcp-stepped-tabs__discovery--at-adjustments.html' %}
+
       </div>
 
     </div>

diff --git a/src/img/map--continental.png b/src/img/map--continental.png