Modern and default example images (#268)

* assets * conditionals for theme-specific examples
blackbaud · Jun 7, 2021 · 80543d9 · 80543d9
1 parent 19eabc0
commit 80543d9
Show file tree

Hide file tree

Showing 21 changed files with 69 additions and 2 deletions.
diff --git a/src/app/docs/input-box/input-box-docs.component.html b/src/app/docs/input-box/input-box-docs.component.html
@@ -51,24 +51,41 @@
           Use input boxes when users need to enter data in forms. Input boxes provide styling for many types of data entry, including basic text fields, text areas, and SKY UX inputs such as <a href="https://developer.blackbaud.com/skyux-datetime/docs/datepicker">datepicker</a>.
         </p>
         <sky-docs-design-guideline-thumbnail
+          *skyThemeIf="'modern'"
           caption="Do use input boxes for data entry on forms."
           captionType="success"
           imageSource="~/assets/img/guidelines/input-box/input-box-usage-1.png"
         >
         </sky-docs-design-guideline-thumbnail>
+        <sky-docs-design-guideline-thumbnail
+          *skyThemeIf="'default'"
+          caption="Do use input boxes for data entry on forms."
+          captionType="success"
+          imageSource="~/assets/img/guidelines/input-box/input-box-usage-1-default.png"
+        >
+        </sky-docs-design-guideline-thumbnail>
       </sky-docs-design-guideline>
     </sky-docs-demo-page-section>
 
     <sky-docs-demo-page-section
       heading="Anatomy"
     >
       <sky-docs-anatomy
+        *skyThemeIf="'modern'"
         imagePath="~/assets/img/guidelines/input-box/input-box-anatomy.png"
       >
         <sky-docs-anatomy-item>Input container</sky-docs-anatomy-item>
         <sky-docs-anatomy-item>Input label</sky-docs-anatomy-item>
         <sky-docs-anatomy-item>Text value</sky-docs-anatomy-item>
       </sky-docs-anatomy>
+      <sky-docs-anatomy
+        *skyThemeIf="'default'"
+        imagePath="~/assets/img/guidelines/input-box/input-box-anatomy-default.png"
+      >
+        <sky-docs-anatomy-item>Input container</sky-docs-anatomy-item>
+        <sky-docs-anatomy-item>Input label</sky-docs-anatomy-item>
+        <sky-docs-anatomy-item>Text value</sky-docs-anatomy-item>
+      </sky-docs-anatomy>
     </sky-docs-demo-page-section>
 
     <sky-docs-demo-page-section
@@ -81,12 +98,20 @@
           </td>
           <td class="sky-docs-table-cell">
             <sky-docs-design-guideline-thumbnail
+              *skyThemeIf="'modern'"
               imageSource="~/assets/img/guidelines/input-box/input-box-states-base.png"
             >
             </sky-docs-design-guideline-thumbnail>
+            <sky-docs-design-guideline-thumbnail
+              *skyThemeIf="'default'"
+              imageSource="~/assets/img/guidelines/input-box/input-box-states-base-default.png"
+            >
+            </sky-docs-design-guideline-thumbnail>
           </td>
         </tr>
-        <tr>
+        <tr
+          *skyThemeIf="'modern'"    
+        >
           <td class="sky-docs-table-cell">
             Hover
           </td>
@@ -103,12 +128,20 @@
           </td>
           <td class="sky-docs-table-cell">
             <sky-docs-design-guideline-thumbnail
+              *skyThemeIf="'modern'"
               imageSource="~/assets/img/guidelines/input-box/input-box-states-focus.png"
             >
             </sky-docs-design-guideline-thumbnail>
+            <sky-docs-design-guideline-thumbnail
+              *skyThemeIf="'default'"
+              imageSource="~/assets/img/guidelines/input-box/input-box-states-focus-default.png"
+            >
+            </sky-docs-design-guideline-thumbnail>
           </td>
         </tr>
-        <tr>
+        <tr
+          *skyThemeIf="'modern'"    
+        >
           <td class="sky-docs-table-cell sky-docs-table-cell-primary">
             Active
           </td>
@@ -125,9 +158,15 @@
           </td>
           <td class="sky-docs-table-cell">
             <sky-docs-design-guideline-thumbnail
+              *skyThemeIf="'modern'"
               imageSource="~/assets/img/guidelines/input-box/input-box-states-disabled.png"
             >
             </sky-docs-design-guideline-thumbnail>
+            <sky-docs-design-guideline-thumbnail
+              *skyThemeIf="'default'"
+              imageSource="~/assets/img/guidelines/input-box/input-box-states-disabled-default.png"
+            >
+            </sky-docs-design-guideline-thumbnail>
           </td>
         </tr>
         <tr>
@@ -136,9 +175,15 @@
           </td>
           <td class="sky-docs-table-cell">
             <sky-docs-design-guideline-thumbnail
+              *skyThemeIf="'modern'"
               imageSource="~/assets/img/guidelines/input-box/input-box-states-required.png"
             >
             </sky-docs-design-guideline-thumbnail>
+            <sky-docs-design-guideline-thumbnail
+              *skyThemeIf="'default'"
+              imageSource="~/assets/img/guidelines/input-box/input-box-states-required-default.png"
+            >
+            </sky-docs-design-guideline-thumbnail>
           </td>
         </tr>
         <tr>
@@ -147,9 +192,15 @@
           </td>
           <td class="sky-docs-table-cell">
             <sky-docs-design-guideline-thumbnail
+              *skyThemeIf="'modern'"
               imageSource="~/assets/img/guidelines/input-box/input-box-states-error.png"
             >
             </sky-docs-design-guideline-thumbnail>
+            <sky-docs-design-guideline-thumbnail
+              *skyThemeIf="'default'"
+              imageSource="~/assets/img/guidelines/input-box/input-box-states-error-default.png"
+            >
+            </sky-docs-design-guideline-thumbnail>
           </td>
         </tr>
       </table>
@@ -163,17 +214,33 @@
           Make input labels succinct and descriptive. Use nouns for input labels. Don't use verbs or questions.
         </p>
         <sky-docs-design-guideline-thumbnail
+          *skyThemeIf="'modern'"
           caption="Don't use full sentences or questions for input labels."
           captionType="danger"
           imageSource="~/assets/img/guidelines/input-box/input-box-content-1.png"
         >
         </sky-docs-design-guideline-thumbnail>
         <sky-docs-design-guideline-thumbnail
+          *skyThemeIf="'default'"
+          caption="Don't use full sentences or questions for input labels."
+          captionType="danger"
+          imageSource="~/assets/img/guidelines/input-box/input-box-content-1-default.png"
+        >
+        </sky-docs-design-guideline-thumbnail>
+        <sky-docs-design-guideline-thumbnail
+          *skyThemeIf="'modern'"
           caption="Do use succinct input labels."
           captionType="success"
           imageSource="~/assets/img/guidelines/input-box/input-box-content-2.png"
         >
         </sky-docs-design-guideline-thumbnail>
+        <sky-docs-design-guideline-thumbnail
+          *skyThemeIf="'default'"
+          caption="Do use succinct input labels."
+          captionType="success"
+          imageSource="~/assets/img/guidelines/input-box/input-box-content-2-default.png"
+        >
+        </sky-docs-design-guideline-thumbnail>
       </sky-docs-design-guideline>
     </sky-docs-demo-page-section>
 

diff --git a/src/assets/img/guidelines/input-box/input-box-anatomy-default.png b/src/assets/img/guidelines/input-box/input-box-anatomy-default.png
diff --git a/src/assets/img/guidelines/input-box/input-box-anatomy.png b/src/assets/img/guidelines/input-box/input-box-anatomy.png
diff --git a/src/assets/img/guidelines/input-box/input-box-content-1-default.png b/src/assets/img/guidelines/input-box/input-box-content-1-default.png
diff --git a/src/assets/img/guidelines/input-box/input-box-content-1.png b/src/assets/img/guidelines/input-box/input-box-content-1.png
diff --git a/src/assets/img/guidelines/input-box/input-box-content-2-default.png b/src/assets/img/guidelines/input-box/input-box-content-2-default.png
diff --git a/src/assets/img/guidelines/input-box/input-box-content-2.png b/src/assets/img/guidelines/input-box/input-box-content-2.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-base-default.png b/src/assets/img/guidelines/input-box/input-box-states-base-default.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-base.png b/src/assets/img/guidelines/input-box/input-box-states-base.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-click.png b/src/assets/img/guidelines/input-box/input-box-states-click.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-disabled-default.png b/src/assets/img/guidelines/input-box/input-box-states-disabled-default.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-disabled.png b/src/assets/img/guidelines/input-box/input-box-states-disabled.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-error-default.png b/src/assets/img/guidelines/input-box/input-box-states-error-default.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-error.png b/src/assets/img/guidelines/input-box/input-box-states-error.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-focus-default.png b/src/assets/img/guidelines/input-box/input-box-states-focus-default.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-focus.png b/src/assets/img/guidelines/input-box/input-box-states-focus.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-hover.png b/src/assets/img/guidelines/input-box/input-box-states-hover.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-required-default.png b/src/assets/img/guidelines/input-box/input-box-states-required-default.png
diff --git a/src/assets/img/guidelines/input-box/input-box-states-required.png b/src/assets/img/guidelines/input-box/input-box-states-required.png
diff --git a/src/assets/img/guidelines/input-box/input-box-usage-1-default.png b/src/assets/img/guidelines/input-box/input-box-usage-1-default.png
diff --git a/src/assets/img/guidelines/input-box/input-box-usage-1.png b/src/assets/img/guidelines/input-box/input-box-usage-1.png