Merge fe549dc into e0c4c5a

deprecate · Dec 13, 2017 · f4ee247 · f4ee247
2 parents e0c4c5a + fe549dc
commit f4ee247
Show file tree

Hide file tree

Showing 49 changed files with 611 additions and 470 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-card/demos/index.html b/packages/clay-card/demos/index.html
@@ -77,6 +77,7 @@ <h4>Web Component Image Card</h4>
 						actionItems='[{"label": "Edit"},{"label": "Save"}]'
 						fileType="JPG" 
 						fileTypeStyle="danger" 
+						href="#1"
 						imageAlt="thumbnail" 
 						imageSrc="./image1.jpg" 
 						labels='[{"label": "Approved", "style": "success"}]',
@@ -85,14 +86,14 @@ <h4>Web Component Image Card</h4>
 						spritemap="../../../node_modules/clay/build/images/icons/icons.svg"
 						subtitle="Author Action" 
 						title="thumbnail_kyoto.jpg" 
-						url="#1"
 					></clay-image-card>
 				</div>
 				<div class="col-md-4">
 					<clay-image-card 
 						actionItems='[{"label": "Edit"},{"label": "Save"}]'
 						fileType="SVG" 
 						fileTypeStyle="warning"
+						href="#1"
 						icon="camera"
 						imageAlt="thumbnail" 
 						labels='[{"label": "Approved", "style": "success"},{"label": "Pending", "style": "warning"}]',
@@ -101,22 +102,21 @@ <h4>Web Component Image Card</h4>
 						spritemap="../../../node_modules/clay/build/images/icons/icons.svg"
 						subtitle="Author Action" 
 						title="lexicon_icon_camera_av93ii2oofffmmmsjf2332.svg" 
-						url="#1"
 					></clay-image-card>
 				</div>
 				<div class="col-md-4">
 					<clay-image-card 
 						actionItems='[{"label": "Edit"},{"label": "Save"}]'
 						fileType="PNG" 
 						fileTypeStyle="info" 
+						href="#1"
 						imageAlt="thumbnail" 
 						labels='[{"label": "Approved", "style": "success"},{"label": "Pending", "style": "warning"},{"label": "Canceled", "style": "danger"}]',
 						selectable="true"
 						selected="true"
 						spritemap="../../../node_modules/clay/build/images/icons/icons.svg"
 						subtitle="Author Action" 
 						title="lexicon_icon_camera_av93ii2oofffmmmsjf2332.svg" 
-						url="#1"
 					></clay-image-card>
 				</div>
 			</div>
@@ -207,13 +207,13 @@ <h4>Horizontal card</h4>
 		var image = './image1.jpg';
 		var items = [
 			{
+				href: '#1',
 				label: 'Edit',
 				separator: true,
-				url: '#1'
 			},
 			{
+				href: '#1',
 				label: 'Save',
-				url: '#1'
 			}
 		];
 
@@ -222,12 +222,12 @@ <h4>Horizontal card</h4>
 		 */
 		new metal.ClayImageCard({
 			actionItems: items,
+			href: '#1',
 			imageAlt: 'thumbnail',
 			imageSrc: image,
 			spritemap: spritemap,
 			subtitle: 'Author Action',
 			title: 'thumbnail_kyoto.jpg',
-			url: '#1',
 		}, 
 		'#image-card-block');
 
@@ -255,12 +255,12 @@ <h4>Horizontal card</h4>
 			actionItems: items,
 			fileType: 'JPG',
 			fileTypeStyle: 'danger',
+			href: '#1',
 			imageAlt: 'thumbnail',
 			imageSrc: image,
 			spritemap: spritemap,
 			subtitle: 'Author Action',
 			title: 'thumbnail_kyoto.jpg',
-			url: '#1',
 		}, 
 		'#filetype-image-card-block');
 
@@ -292,6 +292,7 @@ <h4>Horizontal card</h4>
 			actionItems: items,
 			fileType: 'JPG',
 			fileTypeStyle: 'danger',
+			href: '#1',
 			imageAlt: 'thumbnail',
 			imageSrc: image,
 			labels: [
@@ -303,7 +304,6 @@ <h4>Horizontal card</h4>
 			spritemap: spritemap,
 			subtitle: 'Author Action',
 			title: 'thumbnail_kyoto.jpg',
-			url: '#1',
 		}, 
 		'#image-card-one-label-block');
 
@@ -359,6 +359,7 @@ <h4>Horizontal card</h4>
 			actionItems: items,
 			fileType: 'JPG',
 			fileTypeStyle: 'danger',
+			href: '#1',
 			imageAlt: 'thumbnail',
 			imageSrc: image,
 			labels: [
@@ -372,7 +373,6 @@ <h4>Horizontal card</h4>
 			spritemap: spritemap,
 			subtitle: 'Author Action',
 			title: 'thumbnail_kyoto.jpg',
-			url: '#1',
 		}, 
 		'#selectable-image-card-block');
 

diff --git a/packages/clay-card/src/ClayCard.js b/packages/clay-card/src/ClayCard.js
@@ -85,6 +85,15 @@ ClayCard.STATE = {
 		'warning',
 	]).value('primary'),
 
+	/**
+	 * Url to be applied to the title of the card.
+	 * @instance
+	 * @memberof ClayCard
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	href: Config.string(),
+
 	/**
 	 * Icon to be rendered in the visual area of the card.
 	 * @instance
@@ -203,15 +212,6 @@ ClayCard.STATE = {
 	 * @default undefined
 	 */
 	title: Config.string().required(),
-
-	/**
-	 * Url to be applied to the title of the card.
-	 * @instance
-	 * @memberof ClayCard
-	 * @type {?string|undefined}
-	 * @default undefined
-	 */
-	url: Config.string(),
 };
 
 defineWebComponent('clay-card', ClayCard);

diff --git a/packages/clay-card/src/ClayCard.soy b/packages/clay-card/src/ClayCard.soy
@@ -6,15 +6,16 @@
 {template .render}
 	{@param title: string}
 	{@param? actionItems: list<[
+		href: string,
 		label: string,
-		separator: bool,
-		url: string
+		separator: bool
 	]>}
 	{@param? contentRenderer: string}
 	{@param? disabled: bool}
 	{@param? elementClasses: string}
 	{@param? fileType: string}
 	{@param? fileTypeStyle: string}
+	{@param? href: string}
 	{@param? icon: string}
 	{@param? id: string}
 	{@param? imageAlt: string}
@@ -29,7 +30,6 @@
 	{@param? selected: bool}
 	{@param? spritemap: string}
 	{@param? subtitle: string}
-	{@param? url: string}
 
 	{let $attributes kind="attributes"}
 		class="card-type-asset
@@ -52,11 +52,11 @@
 	{let $descriptiveArea kind="html"}
 		{delcall ClayCard.DescriptiveArea variant="$contentRenderer"}
 			{param actionItems: $actionItems /}
+			{param href: $href /}
 			{param labels: $labels /}
 			{param spritemap: $spritemap /}
 			{param subtitle: $subtitle /}
 			{param title: $title /}
-			{param url: $url /}
 		{/delcall}
 	{/let}
 
@@ -105,25 +105,25 @@
 {deltemplate ClayCard.DescriptiveArea}
 	{@param title: string}
 	{@param? actionItems: list<[
+		href: string,
 		label: string,
-		separator: bool,
-		url: string
+		separator: bool
 	]>}
+	{@param? href: string}
 	{@param? labels: list<[
 		label: string,
 		style: string
 	]>}
 	{@param? spritemap: string}
 	{@param? subtitle: string}
-	{@param? url: string}
 
 	<div class="card-body">
 		<div class="card-row">
 			<div class="flex-col flex-col-expand">
-				{if $url}
+				{if $href}
 					{call ClayLink.render}
 						{param elementClasses: 'card-title text-truncate' /}
-						{param href: $url /}
+						{param href: $href /}
 						{param label: $title /}
 					{/call}
 				{else}

diff --git a/packages/clay-card/src/ClayFileCard.js b/packages/clay-card/src/ClayFileCard.js
@@ -74,6 +74,15 @@ ClayFileCard.STATE = {
 		'warning',
 	]).value('primary'),
 
+	/**
+	 * Url to be applied to the title of the card.
+	 * @instance
+	 * @memberof ClayFileCard
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	href: Config.string(),
+
 	/**
 	 * Icon to be rendered in the visual area of the card.
 	 * @instance
@@ -174,15 +183,6 @@ ClayFileCard.STATE = {
 	 * @default undefined
 	 */
 	title: Config.string().required(),
-
-	/**
-	 * Url to be applied to the title of the card.
-	 * @instance
-	 * @memberof ClayFileCard
-	 * @type {?string|undefined}
-	 * @default undefined
-	 */
-	url: Config.string(),
 };
 
 defineWebComponent('clay-file-card', ClayFileCard);

diff --git a/packages/clay-card/src/ClayFileCard.soy b/packages/clay-card/src/ClayFileCard.soy
@@ -7,14 +7,15 @@
     {@param spritemap: string}
     {@param title: string}
     {@param? actionItems: list<[
+        href: string,
         label: string,
-        separator: bool,
-        url: string
+        separator: bool
     ]>}
     {@param? disabled: bool}
     {@param? elementClasses: string}
     {@param? fileType: string}
     {@param? fileTypeStyle: string}
+    {@param? href: string}
     {@param? icon: string}
     {@param? id: string}
     {@param? inputName: string}
@@ -26,7 +27,6 @@
     {@param? selectable: bool}
     {@param? selected: bool}
     {@param? subtitle: string}
-    {@param? url: string}
 
     {let $classes kind="text"}
         file-card
@@ -53,7 +53,7 @@
         {param spritemap: $spritemap /}
         {param subtitle: $subtitle /}
         {param title: $title /}
-        {param url: $url /}
+        {param href: $href /}
     {/call}
 {/template}