Merge ce0e803 into 7e67869

deprecate · Dec 26, 2017 · d43b916 · d43b916
2 parents 7e67869 + ce0e803
commit d43b916
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 37 deletions.
diff --git a/packages/clay-card/src/ClayUserCard.soy b/packages/clay-card/src/ClayUserCard.soy
@@ -130,11 +130,13 @@
                             {/if}
                         "
 
-                        class="img-fluid"
+                        class="sticker-img"
                         src="{$imageSrc}"
                     {/let}
 
-                    <img {$imageAttributes} />
+                    <span class="sticker-overlay">
+                        <img {$imageAttributes} />
+                    </span>
                 {elseif $fileType}
                     <span class="sticker-overlay">{$fileType}</span>
                 {/if}

diff --git a/packages/clay-card/src/__tests__/__snapshots__/ClayUserCard.js.snap b/packages/clay-card/src/__tests__/__snapshots__/ClayUserCard.js.snap
@@ -110,7 +110,9 @@ exports[`ClayUserCard should render a ClayUserCard with imageSrc 1`] = `
   <div class="aspect-ratio card-item-first">
     <div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
       <span class="sticker sticker-primary rounded-circle sticker-xl">
-        <img alt="" class="img-fluid" src="thumbnail_coffee.jpg">
+        <span class="sticker-overlay">
+          <img alt="" class="sticker-img" src="thumbnail_coffee.jpg">
+        </span>
       </span>
     </div>
   </div>

diff --git a/packages/clay-link/demos/index.html b/packages/clay-link/demos/index.html
@@ -37,7 +37,6 @@ <h4>Link Styles with WebComponents</h4>
 			<clay-link href="#1" label="Secondary" style="secondary"></clay-link>
 			<clay-link href="#1" label="Button Primary" buttonStyle="primary"></clay-link>
 			<clay-link href="#1" label="Button Secondary" buttonStyle="secondary"></clay-link>
-			<clay-link href="#1" label="Button Borderless" buttonStyle="borderless"></clay-link>
 			<clay-link href="#1" label="Button Link" buttonStyle="link"></clay-link>
 		</div>
 	</div>
@@ -85,15 +84,6 @@ <h4>Link with icons</h4>
 			'#link-styles'
 		);
 
-		new metal.ClayLink(
-			{
-				buttonStyle: 'borderless',
-				href: '#1',
-				label: 'Button Borderless',
-			},
-			'#link-styles'
-		);
-
 		new metal.ClayLink(
 			{
 				buttonStyle: 'link',

diff --git a/packages/clay-modal/src/ClayModal.soy b/packages/clay-modal/src/ClayModal.soy
@@ -103,10 +103,12 @@
 					{/switch}
 				{/let}
 
-				{call ClayIcon.render}
-					{param spritemap: $spritemap /}
-					{param symbol: $icon /}
-				{/call}
+				<span class="modal-title-indicator">
+					{call ClayIcon.render}
+						{param spritemap: $spritemap /}
+						{param symbol: $icon /}
+					{/call}
+				</span>
 			{/if}
 
 			<div class="modal-title">{$title}</div>

diff --git a/packages/clay-modal/src/__tests__/__snapshots__/ClayModal.js.snap b/packages/clay-modal/src/__tests__/__snapshots__/ClayModal.js.snap
@@ -204,10 +204,12 @@ exports[`ClayModal should render a modal with status \`danger\` and title 1`] =
   <div class="modal-dialog modal-danger">
     <div class="modal-content">
       <div class="modal-header">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full">
-          <title>exclamation-full</title>
-          <use xlink:href="icons.svg#exclamation-full"></use>
-        </svg>
+        <span class="modal-title-indicator">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full">
+            <title>exclamation-full</title>
+            <use xlink:href="icons.svg#exclamation-full"></use>
+          </svg>
+        </span>
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" type="button">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
@@ -226,10 +228,12 @@ exports[`ClayModal should render a modal with status \`info\` and title 1`] = `
   <div class="modal-dialog modal-info">
     <div class="modal-content">
       <div class="modal-header">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
-          <title>info-circle</title>
-          <use xlink:href="icons.svg#info-circle"></use>
-        </svg>
+        <span class="modal-title-indicator">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle">
+            <title>info-circle</title>
+            <use xlink:href="icons.svg#info-circle"></use>
+          </svg>
+        </span>
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" type="button">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
@@ -248,10 +252,12 @@ exports[`ClayModal should render a modal with status \`success\` and title 1`] =
   <div class="modal-dialog modal-success">
     <div class="modal-content">
       <div class="modal-header">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle">
-          <title>check-circle</title>
-          <use xlink:href="icons.svg#check-circle"></use>
-        </svg>
+        <span class="modal-title-indicator">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle">
+            <title>check-circle</title>
+            <use xlink:href="icons.svg#check-circle"></use>
+          </svg>
+        </span>
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" type="button">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
@@ -270,10 +276,12 @@ exports[`ClayModal should render a modal with status \`warning\` and title 1`] =
   <div class="modal-dialog modal-warning">
     <div class="modal-content">
       <div class="modal-header">
-        <svg aria-hidden="true" class="lexicon-icon lexicon-icon-question-circle-full">
-          <title>question-circle-full</title>
-          <use xlink:href="icons.svg#question-circle-full"></use>
-        </svg>
+        <span class="modal-title-indicator">
+          <svg aria-hidden="true" class="lexicon-icon lexicon-icon-question-circle-full">
+            <title>question-circle-full</title>
+            <use xlink:href="icons.svg#question-circle-full"></use>
+          </svg>
+        </span>
         <div class="modal-title">My Title</div>
         <button class="btn close btn-unstyled" aria-label="times" type="button">
           <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">

diff --git a/packages/clay-sticker/src/ClaySticker.soy b/packages/clay-sticker/src/ClaySticker.soy
@@ -72,7 +72,21 @@
 	{@param? imageAlt: string}
 	{@param? imageSrc: string}
 
-	<img alt="{$imageAlt}" class="img-fluid" src="{$imageSrc}" />
+	{let $attributes kind="attributes"}
+		class="sticker-img"
+
+		{if $imageAlt}
+			alt="{$imageAlt}"
+		{/if}
+
+		{if $imageSrc}
+			src="{$imageSrc}"
+		{/if}
+	{/let}
+
+	<span class="sticker-overlay">
+		<img {$attributes} />
+	</span>
 {/template}
 
 /**
@@ -113,4 +127,4 @@
 	{if $id}
 		id="{$id}"
 	{/if}
-{/template}
+{/template}
diff --git a/packages/clay-sticker/src/__tests__/__snapshots__/ClaySticker.js.snap b/packages/clay-sticker/src/__tests__/__snapshots__/ClaySticker.js.snap
@@ -45,13 +45,17 @@ exports[`ClaySticker should render a sticker with id 1`] = `<span class="sticker
 
 exports[`ClaySticker should render a sticker with image 1`] = `
 <span class="sticker sticker-primary">
-  <img alt="" class="img-fluid" src="imageurl">
+  <span class="sticker-overlay">
+    <img class="sticker-img" src="imageurl">
+  </span>
 </span>
 `;
 
 exports[`ClaySticker should render a sticker with image and imagen alternate text 1`] = `
 <span class="sticker sticker-primary">
-  <img alt="imageAlt" class="img-fluid" src="imageurl">
+  <span class="sticker-overlay">
+    <img class="sticker-img" alt="imageAlt" src="imageurl">
+  </span>
 </span>
 `;