Merge df06a4f into e0c4c5a

deprecate · Dec 13, 2017 · f9845b6 · f9845b6
2 parents e0c4c5a + df06a4f
commit f9845b6
Show file tree

Hide file tree

Showing 11 changed files with 187 additions and 104 deletions.
diff --git a/packages/clay-button/demos/index.html b/packages/clay-button/demos/index.html
@@ -36,8 +36,8 @@ <h4>Button States</h4>
 			<h4>Button States with WebComponents</h4>
 			<clay-button label="Default Button"></clay-button>
 			<clay-button label="Secondary Button" style="secondary"></clay-button>
-			<clay-button label="Borderless Button" style="borderless"></clay-button>
 			<clay-button label="Link Button" style="link"></clay-button>
+			<clay-button label="Unstyled Button" style="unstyled"></clay-button>
 		</div>
 	</div>
 
@@ -105,17 +105,17 @@ <h4>Button monospaced</h4>
 
 		new metal.ClayButton(
 			{
-				style: 'borderless',
-				label: 'Borderless Button'
+				ariaLabel: 'My Description',
+				style: 'link',
+				label: 'Link Button'
 			},
 			'#states-block'
 		);
 
 		new metal.ClayButton(
 			{
-				ariaLabel: 'My Description',
-				style: 'link',
-				label: 'Link Button'
+				style: 'unstyled',
+				label: 'Unstyled Button'
 			},
 			'#states-block'
 		);
@@ -227,22 +227,23 @@ <h4>Button monospaced</h4>
 
  		new metal.ClayButton(
  			{
- 				style: 'borderless',
+ 				ariaLabel: 'My Description',
+ 				style: 'link',
  				label: 'C',
 				monospaced: true
  			},
  			'#monospaced-block'
- 		);
+		 );
 
  		new metal.ClayButton(
  			{
- 				ariaLabel: 'My Description',
- 				style: 'link',
+ 				style: 'unstyled',
  				label: 'D',
 				monospaced: true
  			},
  			'#monospaced-block'
  		);
+
 	</script>
 </body>
 </html>
diff --git a/packages/clay-button/src/ClayButton.js b/packages/clay-button/src/ClayButton.js
@@ -143,13 +143,9 @@ ClayButton.STATE = {
 	 * @type {?string|undefined}
 	 * @default primary
 	 */
-	style: Config.oneOf([
-		'borderless',
-		'link',
-		'primary',
-		'secondary',
-		'unstyled',
-	]).value('primary'),
+	style: Config.oneOf(['link', 'primary', 'secondary', 'unstyled']).value(
+		'primary'
+	),
 
 	/**
 	 * The type attribute value of the element.

diff --git a/packages/clay-dropdown/src/ClayDropdownBase.js b/packages/clay-dropdown/src/ClayDropdownBase.js
@@ -287,13 +287,9 @@ ClayDropdownBase.STATE = {
 	 * @type {?string}
 	 * @default unstyled
 	 */
-	style: Config.oneOf([
-		'borderless',
-		'link',
-		'primary',
-		'secondary',
-		'unstyled',
-	]).value('unstyled'),
+	style: Config.oneOf(['link', 'primary', 'secondary', 'unstyled']).value(
+		'unstyled'
+	),
 
 	/**
 	 * CSS classes to be applied to the trigger element.

diff --git a/packages/clay-link/demos/index.html b/packages/clay-link/demos/index.html
@@ -106,24 +106,20 @@ <h4>Link with icons</h4>
 		new metal.ClayLink(
 			{
 				href: '#1',
-				icon: {
-					spritemap: '../../../node_modules/clay/build/images/icons/icons.svg',
-					symbol: 'add-cell'
-				},
-				label: '<span>My Other Link Label</span>'
+				icon: 'add-cell',
+				label: '<span>My Other Link Label</span>',
+				spritemap: '../../../node_modules/clay/build/images/icons/icons.svg',
 			},
 			'#link-icons'
 		);
 
 		new metal.ClayLink(
 			{
 				href: '#1',
-				icon: {
-					alignment: 'right',
-					spritemap: '../../../node_modules/clay/build/images/icons/icons.svg',
-					symbol: 'add-cell'
-				},
-				label: '<span>My Other Link Label</span>'
+				icon: 'add-cell',
+				iconAlignment: 'right',
+				label: '<span>My Other Link Label</span>',
+				spritemap: '../../../node_modules/clay/build/images/icons/icons.svg',
 			},
 			'#link-icons'
 		);
@@ -132,11 +128,9 @@ <h4>Link with icons</h4>
 			{
 				ariaLabel: 'My Link',
 				href: '#1',
-				icon: {
-					alignment: 'right',
-					spritemap: '../../../node_modules/clay/build/images/icons/icons.svg',
-					symbol: 'add-cell'
-				}
+				icon: 'add-cell',
+				iconAlignment: 'right',
+				spritemap: '../../../node_modules/clay/build/images/icons/icons.svg',
 			},
 			'#link-icons'
 		);

diff --git a/packages/clay-link/src/ClayLink.js b/packages/clay-link/src/ClayLink.js
@@ -43,7 +43,7 @@ ClayLink.STATE = {
 	 * @type {?string|undefined}
 	 * @default undefined
 	 */
-	buttonStyle: Config.oneOf(['borderless', 'link', 'primary', 'secondary']),
+	buttonStyle: Config.oneOf(['link', 'primary', 'secondary']),
 
 	/**
 	 * Data to add to the element.
@@ -108,6 +108,24 @@ ClayLink.STATE = {
 	 */
 	id: Config.string(),
 
+	/**
+	 * Alternative text of the image to be rendered inside the link.
+	 * @instance
+	 * @memberof ClayLink
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	imageAlt: Config.string(),
+
+	/**
+	 * Source of the image to be rendered inside the link.
+	 * @instance
+	 * @memberof ClayLink
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	imageSrc: Config.string(),
+
 	/**
 	 * Sets the text or HTML to be rendered inside the anchor tag.
 	 * @instance

diff --git a/packages/clay-link/src/ClayLink.soy b/packages/clay-link/src/ClayLink.soy
@@ -13,6 +13,8 @@
 	{@param? icon: string}
 	{@param? iconAlignment: string}
 	{@param? id: string}
+	{@param? imageAlt: string}
+	{@param? imageSrc: string}
 	{@param? label: html|string}
 	{@param? spritemap: string}
 	{@param? style: string}
@@ -36,6 +38,8 @@
 		{call .content}
 			{param icon: $icon /}
 			{param iconAlignment: $iconAlignment ?: 'left' /}
+			{param imageAlt: $imageAlt /}
+			{param imageSrc: $imageSrc /}
 			{param label: $label /}
 			{param spritemap: $spritemap /}
 		{/call}
@@ -48,23 +52,29 @@
 {template .content}
 	{@param? icon: string}
 	{@param? iconAlignment: string}
+	{@param? imageAlt: string}
+	{@param? imageSrc: string}
 	{@param? label: html|string}
 	{@param? spritemap: string}
 
-	{if $icon and $iconAlignment == 'left' and $spritemap}
-		{call .icon}
-			{param icon: $icon /}
-			{param spritemap: $spritemap /}
-		{/call}
-	{/if}
+	{if $imageSrc}
+		<img alt="{$imageAlt}" class="img-fluid" src="{$imageSrc}" />
+	{else}
+		{if $icon and $iconAlignment == 'left' and $spritemap}
+			{call .icon}
+				{param icon: $icon /}
+				{param spritemap: $spritemap /}
+			{/call}
+		{/if}
 
-	{$label ?: ''}
+		{$label ?: ''}
 
-	{if $icon and $iconAlignment == 'right' and $spritemap}
-		{call .icon}
-			{param icon: $icon /}
-			{param spritemap: $spritemap /}
-		{/call}
+		{if $icon and $iconAlignment == 'right' and $spritemap}
+			{call .icon}
+				{param icon: $icon /}
+				{param spritemap: $spritemap /}
+			{/call}
+		{/if}
 	{/if}
 {/template}
 

diff --git a/packages/clay-link/src/__tests__/ClayLink.js b/packages/clay-link/src/__tests__/ClayLink.js
@@ -115,33 +115,42 @@ describe('ClayLink', function() {
 		expect(link).toMatchSnapshot();
 	});
 
-	it('should render a link with secondary style', () => {
+	it('should render a link with image', () => {
 		link = new ClayLink({
-			style: 'secondary',
+			imageSrc: 'image.jpg',
 		});
 
 		expect(link).toMatchSnapshot();
 	});
 
-	it('should render a link with button primary style', () => {
+	it('should render a link with image and image alt', () => {
 		link = new ClayLink({
-			buttonStyle: 'primary',
+			imageAlt: 'my image',
+			imageSrc: 'image.jpg',
 		});
 
 		expect(link).toMatchSnapshot();
 	});
 
-	it('should render a link with button secondary style', () => {
+	it('should render a link with secondary style', () => {
 		link = new ClayLink({
-			buttonStyle: 'secondary',
+			style: 'secondary',
+		});
+
+		expect(link).toMatchSnapshot();
+	});
+
+	it('should render a link with button primary style', () => {
+		link = new ClayLink({
+			buttonStyle: 'primary',
 		});
 
 		expect(link).toMatchSnapshot();
 	});
 
-	it('should render a link with button borderless style', () => {
+	it('should render a link with button secondary style', () => {
 		link = new ClayLink({
-			buttonStyle: 'borderless',
+			buttonStyle: 'secondary',
 		});
 
 		expect(link).toMatchSnapshot();

diff --git a/packages/clay-link/src/__tests__/__snapshots__/ClayLink.js.snap b/packages/clay-link/src/__tests__/__snapshots__/ClayLink.js.snap
@@ -8,8 +8,6 @@ exports[`ClayLink should render a link with aria expanded 1`] = `<a aria-expande
 
 exports[`ClayLink should render a link with aria label 1`] = `<a aria-label="My Link"></a>`;
 
-exports[`ClayLink should render a link with button borderless style 1`] = `<a class="btn btn-borderless"></a>`;
-
 exports[`ClayLink should render a link with button link style 1`] = `<a class="btn btn-link"></a>`;
 
 exports[`ClayLink should render a link with button primary style 1`] = `<a class="btn btn-primary"></a>`;
@@ -39,6 +37,18 @@ exports[`ClayLink should render a link with icon and label 1`] = `
 
 exports[`ClayLink should render a link with id 1`] = `<a id="myId"></a>`;
 
+exports[`ClayLink should render a link with image 1`] = `
+<a>
+  <img class="img-fluid" src="image.jpg">
+</a>
+`;
+
+exports[`ClayLink should render a link with image and image alt 1`] = `
+<a>
+  <img alt="my image" class="img-fluid" src="image.jpg">
+</a>
+`;
+
 exports[`ClayLink should render a link with label and icon 1`] = `
 <a>My Link
   <svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">

diff --git a/packages/clay-modal/src/ClayModal.js b/packages/clay-modal/src/ClayModal.js
@@ -216,13 +216,7 @@ ClayModal.STATE = {
 		Config.shapeOf({
 			alignment: Config.oneOf(['left', 'right']).value('right'),
 			label: Config.string().required(),
-			style: Config.oneOf([
-				'borderless',
-				'link',
-				'primary',
-				'secondary',
-				'unstyled',
-			]),
+			style: Config.oneOf(['link', 'primary', 'secondary', 'unstyled']),
 			type: Config.oneOf(['button', 'close', 'reset', 'submit']).value(
 				'button'
 			),