Merge 05b9dd2 into 731cd07

deprecate · Dec 27, 2017 · 75d264a · 75d264a
2 parents 731cd07 + 05b9dd2
commit 75d264a
Show file tree

Hide file tree

Showing 12 changed files with 445 additions and 225 deletions.
diff --git a/packages/clay-card-grid/src/__tests__/__snapshots__/ClayCardGrid.js.snap b/packages/clay-card-grid/src/__tests__/__snapshots__/ClayCardGrid.js.snap
@@ -127,10 +127,12 @@ exports[`ClayCardGrid should render a ClayCardGrid with all kind items and title
         <div class="card-body">
           <div class="card-row">
             <span class="sticker sticker-unstyled">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
-                <title>folder</title>
-                <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
-              </svg>
+              <span class="sticker-overlay">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <title>folder</title>
+                  <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
+                </svg>
+              </span>
             </span>
             <div class="flex-col flex-col-expand flex-col-gutters">
               <div class="card-title text-truncate" title="Folder 1">Folder 1</div>
@@ -144,10 +146,12 @@ exports[`ClayCardGrid should render a ClayCardGrid with all kind items and title
         <div class="card-body">
           <div class="card-row">
             <span class="sticker sticker-unstyled">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
-                <title>folder</title>
-                <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
-              </svg>
+              <span class="sticker-overlay">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <title>folder</title>
+                  <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
+                </svg>
+              </span>
             </span>
             <div class="flex-col flex-col-expand flex-col-gutters">
               <div class="card-title text-truncate" title="Folder 2">Folder 2</div>
@@ -161,10 +165,12 @@ exports[`ClayCardGrid should render a ClayCardGrid with all kind items and title
         <div class="card-body">
           <div class="card-row">
             <span class="sticker sticker-unstyled">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
-                <title>folder</title>
-                <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
-              </svg>
+              <span class="sticker-overlay">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <title>folder</title>
+                  <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
+                </svg>
+              </span>
             </span>
             <div class="flex-col flex-col-expand flex-col-gutters">
               <div class="card-title text-truncate" title="Folder 3">Folder 3</div>
@@ -177,7 +183,9 @@ exports[`ClayCardGrid should render a ClayCardGrid with all kind items and title
       <div class="card-type-asset card image-card">
         <div class="aspect-ratio card-item-first">
           <img alt="Image Item 1" class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="./image1.jpg">
-          <span class="sticker sticker-primary sticker-bottom-left">JPG</span>
+          <span class="sticker sticker-primary sticker-bottom-left">
+            <span class="sticker-overlay">JPG</span>
+          </span>
         </div>
         <div class="card-body">
           <div class="card-row">
@@ -192,7 +200,9 @@ exports[`ClayCardGrid should render a ClayCardGrid with all kind items and title
       <div class="card-type-asset card image-card">
         <div class="aspect-ratio card-item-first">
           <img alt="Image Item 2" class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="./image1.jpg">
-          <span class="sticker sticker-primary sticker-bottom-left">JPG</span>
+          <span class="sticker sticker-primary sticker-bottom-left">
+            <span class="sticker-overlay">JPG</span>
+          </span>
         </div>
         <div class="card-body">
           <div class="card-row">
@@ -207,7 +217,9 @@ exports[`ClayCardGrid should render a ClayCardGrid with all kind items and title
       <div class="card-type-asset card image-card">
         <div class="aspect-ratio card-item-first">
           <img alt="Image Item 3" class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="./image1.jpg">
-          <span class="sticker sticker-primary sticker-bottom-left">JPG</span>
+          <span class="sticker sticker-primary sticker-bottom-left">
+            <span class="sticker-overlay">JPG</span>
+          </span>
         </div>
         <div class="card-body">
           <div class="card-row">
@@ -419,10 +431,12 @@ exports[`ClayCardGrid should render a ClayCardGrid with folder items 1`] = `
         <div class="card-body">
           <div class="card-row">
             <span class="sticker sticker-unstyled">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
-                <title>folder</title>
-                <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
-              </svg>
+              <span class="sticker-overlay">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <title>folder</title>
+                  <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
+                </svg>
+              </span>
             </span>
             <div class="flex-col flex-col-expand flex-col-gutters">
               <div class="card-title text-truncate" title="Folder 1">Folder 1</div>
@@ -436,10 +450,12 @@ exports[`ClayCardGrid should render a ClayCardGrid with folder items 1`] = `
         <div class="card-body">
           <div class="card-row">
             <span class="sticker sticker-unstyled">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
-                <title>folder</title>
-                <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
-              </svg>
+              <span class="sticker-overlay">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <title>folder</title>
+                  <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
+                </svg>
+              </span>
             </span>
             <div class="flex-col flex-col-expand flex-col-gutters">
               <div class="card-title text-truncate" title="Folder 2">Folder 2</div>
@@ -453,10 +469,12 @@ exports[`ClayCardGrid should render a ClayCardGrid with folder items 1`] = `
         <div class="card-body">
           <div class="card-row">
             <span class="sticker sticker-unstyled">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
-                <title>folder</title>
-                <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
-              </svg>
+              <span class="sticker-overlay">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <title>folder</title>
+                  <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
+                </svg>
+              </span>
             </span>
             <div class="flex-col flex-col-expand flex-col-gutters">
               <div class="card-title text-truncate" title="Folder 3">Folder 3</div>
@@ -478,10 +496,12 @@ exports[`ClayCardGrid should render a ClayCardGrid with folder items and title 1
         <div class="card-body">
           <div class="card-row">
             <span class="sticker sticker-unstyled">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
-                <title>folder</title>
-                <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
-              </svg>
+              <span class="sticker-overlay">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <title>folder</title>
+                  <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
+                </svg>
+              </span>
             </span>
             <div class="flex-col flex-col-expand flex-col-gutters">
               <div class="card-title text-truncate" title="Folder 1">Folder 1</div>
@@ -495,10 +515,12 @@ exports[`ClayCardGrid should render a ClayCardGrid with folder items and title 1
         <div class="card-body">
           <div class="card-row">
             <span class="sticker sticker-unstyled">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
-                <title>folder</title>
-                <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
-              </svg>
+              <span class="sticker-overlay">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <title>folder</title>
+                  <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
+                </svg>
+              </span>
             </span>
             <div class="flex-col flex-col-expand flex-col-gutters">
               <div class="card-title text-truncate" title="Folder 2">Folder 2</div>
@@ -512,10 +534,12 @@ exports[`ClayCardGrid should render a ClayCardGrid with folder items and title 1
         <div class="card-body">
           <div class="card-row">
             <span class="sticker sticker-unstyled">
-              <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
-                <title>folder</title>
-                <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
-              </svg>
+              <span class="sticker-overlay">
+                <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
+                  <title>folder</title>
+                  <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#folder"></use>
+                </svg>
+              </span>
             </span>
             <div class="flex-col flex-col-expand flex-col-gutters">
               <div class="card-title text-truncate" title="Folder 3">Folder 3</div>
@@ -541,7 +565,9 @@ exports[`ClayCardGrid should render a ClayCardGrid with image items 1`] = `
       <div class="card-type-asset card image-card">
         <div class="aspect-ratio card-item-first">
           <img alt="Image Item 1" class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="./image1.jpg">
-          <span class="sticker sticker-primary sticker-bottom-left">JPG</span>
+          <span class="sticker sticker-primary sticker-bottom-left">
+            <span class="sticker-overlay">JPG</span>
+          </span>
         </div>
         <div class="card-body">
           <div class="card-row">
@@ -556,7 +582,9 @@ exports[`ClayCardGrid should render a ClayCardGrid with image items 1`] = `
       <div class="card-type-asset card image-card">
         <div class="aspect-ratio card-item-first">
           <img alt="Image Item 2" class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="./image1.jpg">
-          <span class="sticker sticker-primary sticker-bottom-left">JPG</span>
+          <span class="sticker sticker-primary sticker-bottom-left">
+            <span class="sticker-overlay">JPG</span>
+          </span>
         </div>
         <div class="card-body">
           <div class="card-row">
@@ -571,7 +599,9 @@ exports[`ClayCardGrid should render a ClayCardGrid with image items 1`] = `
       <div class="card-type-asset card image-card">
         <div class="aspect-ratio card-item-first">
           <img alt="Image Item 3" class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="./image1.jpg">
-          <span class="sticker sticker-primary sticker-bottom-left">JPG</span>
+          <span class="sticker sticker-primary sticker-bottom-left">
+            <span class="sticker-overlay">JPG</span>
+          </span>
         </div>
         <div class="card-body">
           <div class="card-row">
@@ -594,7 +624,9 @@ exports[`ClayCardGrid should render a ClayCardGrid with image items and title 1`
       <div class="card-type-asset card image-card">
         <div class="aspect-ratio card-item-first">
           <img alt="Image Item 1" class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="./image1.jpg">
-          <span class="sticker sticker-primary sticker-bottom-left">JPG</span>
+          <span class="sticker sticker-primary sticker-bottom-left">
+            <span class="sticker-overlay">JPG</span>
+          </span>
         </div>
         <div class="card-body">
           <div class="card-row">
@@ -609,7 +641,9 @@ exports[`ClayCardGrid should render a ClayCardGrid with image items and title 1`
       <div class="card-type-asset card image-card">
         <div class="aspect-ratio card-item-first">
           <img alt="Image Item 2" class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="./image1.jpg">
-          <span class="sticker sticker-primary sticker-bottom-left">JPG</span>
+          <span class="sticker sticker-primary sticker-bottom-left">
+            <span class="sticker-overlay">JPG</span>
+          </span>
         </div>
         <div class="card-body">
           <div class="card-row">
@@ -624,7 +658,9 @@ exports[`ClayCardGrid should render a ClayCardGrid with image items and title 1`
       <div class="card-type-asset card image-card">
         <div class="aspect-ratio card-item-first">
           <img alt="Image Item 3" class="aspect-ratio-item-center-middle aspect-ratio-item-fluid" src="./image1.jpg">
-          <span class="sticker sticker-primary sticker-bottom-left">JPG</span>
+          <span class="sticker sticker-primary sticker-bottom-left">
+            <span class="sticker-overlay">JPG</span>
+          </span>
         </div>
         <div class="card-body">
           <div class="card-row">

diff --git a/packages/clay-card/src/ClayUserCard.soy b/packages/clay-card/src/ClayUserCard.soy
@@ -121,25 +121,9 @@
 
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
         {call ClaySticker.render}
-            {param label kind="html"}
-                {if $imageSrc}
-                    {let $imageAttributes kind="attributes"}
-                        alt="
-                            {if $imageAlt}
-                                {$imageAlt}
-                            {/if}
-                        "
-
-                        class="img-fluid"
-                        src="{$imageSrc}"
-                    {/let}
-
-                    <img {$imageAttributes} />
-                {elseif $fileType}
-                    <span class="sticker-overlay">{$fileType}</span>
-                {/if}
-            {/param}
-
+            {param imageAlt: $imageAlt /}
+            {param imageSrc: $imageSrc /}
+            {param label: $fileType /}
             {param shape: 'circle' /}
             {param size: 'xl' /}
             {param style: $fileTypeStyle ?: 'primary' /}

diff --git a/packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap b/packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap
@@ -69,7 +69,9 @@ exports[`ClayFileCard should render a ClayFileCard with file type 1`] = `
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
     </div>
-    <span class="sticker sticker-primary sticker-bottom-left">DOC</span>
+    <span class="sticker sticker-primary sticker-bottom-left">
+      <span class="sticker-overlay">DOC</span>
+    </span>
   </div>
   <div class="card-body">
     <div class="card-row">
@@ -90,7 +92,9 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`danger
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
     </div>
-    <span class="sticker sticker-danger sticker-bottom-left">DOC</span>
+    <span class="sticker sticker-danger sticker-bottom-left">
+      <span class="sticker-overlay">DOC</span>
+    </span>
   </div>
   <div class="card-body">
     <div class="card-row">
@@ -111,7 +115,9 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`dark c
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
     </div>
-    <span class="sticker sticker-dark sticker-bottom-left">DOC</span>
+    <span class="sticker sticker-dark sticker-bottom-left">
+      <span class="sticker-overlay">DOC</span>
+    </span>
   </div>
   <div class="card-body">
     <div class="card-row">
@@ -132,7 +138,9 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`info c
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
     </div>
-    <span class="sticker sticker-info sticker-bottom-left">DOC</span>
+    <span class="sticker sticker-info sticker-bottom-left">
+      <span class="sticker-overlay">DOC</span>
+    </span>
   </div>
   <div class="card-body">
     <div class="card-row">
@@ -153,7 +161,9 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`light
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
     </div>
-    <span class="sticker sticker-light sticker-bottom-left">DOC</span>
+    <span class="sticker sticker-light sticker-bottom-left">
+      <span class="sticker-overlay">DOC</span>
+    </span>
   </div>
   <div class="card-body">
     <div class="card-row">
@@ -174,7 +184,9 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`primar
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
     </div>
-    <span class="sticker sticker-primary sticker-bottom-left">DOC</span>
+    <span class="sticker sticker-primary sticker-bottom-left">
+      <span class="sticker-overlay">DOC</span>
+    </span>
   </div>
   <div class="card-body">
     <div class="card-row">
@@ -195,7 +207,9 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`second
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
     </div>
-    <span class="sticker sticker-secondary sticker-bottom-left">DOC</span>
+    <span class="sticker sticker-secondary sticker-bottom-left">
+      <span class="sticker-overlay">DOC</span>
+    </span>
   </div>
   <div class="card-body">
     <div class="card-row">
@@ -216,7 +230,9 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`succes
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
     </div>
-    <span class="sticker sticker-success sticker-bottom-left">DOC</span>
+    <span class="sticker sticker-success sticker-bottom-left">
+      <span class="sticker-overlay">DOC</span>
+    </span>
   </div>
   <div class="card-body">
     <div class="card-row">
@@ -237,7 +253,9 @@ exports[`ClayFileCard should render a ClayFileCard with file type style \`warnin
         <use xlink:href="icons.svg#documents-and-media"></use>
       </svg>
     </div>
-    <span class="sticker sticker-warning sticker-bottom-left">DOC</span>
+    <span class="sticker sticker-warning sticker-bottom-left">
+      <span class="sticker-overlay">DOC</span>
+    </span>
   </div>
   <div class="card-body">
     <div class="card-row">