Merge pull request #845 from liferay/develop

v2.0.0-rc.12

.eslintignore

@@ -1 +1,2 @@
-*.soy.js
+*.soy.js
+clay-css

.soycriticrc.json

@@ -7,9 +7,13 @@
     {
       "regex": "(\\S+)",
       "replace": "{$1}"
+    },
+    {
+      "regex": "Clay(\\S+)",
+      "replace": "{$1}"
     }
   ],
   "implicitParams": {
     "Chart*": ["_loading"]
   }
-}
+}

packages/clay-alert/demos/a11y.html

@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Demo: Alert</title>
 
-	<link rel="stylesheet" href="../../../node_modules/clay/lib/css/atlas.css">
+	<link rel="stylesheet" href="../../../node_modules/clay-css/lib/css/atlas.css">
 
 	<script src="../build/globals/clay-alert.js"></script>
 
@@ -146,7 +146,7 @@ <h4>Auto Closeable Toast Alerts (Destroyed on dismiss)</h4>
 	</div>
 
 	<script type="text/javascript">
-		let spritemap = '../../../node_modules/clay/lib/images/icons/icons.svg';
+		let spritemap = '../../../node_modules/clay-css/lib/images/icons/icons.svg';
 
 		/*
 		 * Regular Alerts

packages/clay-alert/demos/index.html

@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Demo: Alert</title>
 
-	<link rel="stylesheet" href="../../../node_modules/clay/lib/css/atlas.css">
+	<link rel="stylesheet" href="../../../node_modules/clay-css/lib/css/atlas.css">
 
 	<script src="../build/globals/clay-alert.js"></script>
 
@@ -146,7 +146,7 @@ <h4>Auto Closeable Toast Alerts (Destroyed on dismiss)</h4>
 	</div>
 
 	<script type="text/javascript">
-		let spritemap = '../../../node_modules/clay/lib/images/icons/icons.svg';
+		let spritemap = '../../../node_modules/clay-css/lib/images/icons/icons.svg';
 
 		/*
 		 * Regular Alerts

packages/clay-alert/package.json

@@ -42,7 +42,7 @@
     "babel-plugin-transform-node-env-inline": "^0.1.1",
     "babel-preset-env": "^1.6.0",
     "browserslist-config-clay-components": "^2.0.0-rc.10",
-    "clay": "^2.0.0-rc.11",
+    "clay-css": "^2.0.0-rc.11",
     "metal-tools-soy": "^6.0.0",
     "webpack": "^3.0.0"
   },

packages/clay-alert/src/ClayAlertBase.soy

@@ -59,7 +59,7 @@
 
 	<div {$attributes}>
 		{if $type == 'stripe'}
-			<div class="container">
+			<div class="container-fluid container-fluid-max-xl">
 				{$content}
 			</div>
 		{else}

packages/clay-alert/src/__tests__/ClayAlert.js

@@ -2,7 +2,7 @@ import ClayAlert from '../ClayAlert';
 
 let consoleErrorReference;
 let alert;
-const spritemap = '../node_modules/clay/lib/images/icons/icons.svg';
+const spritemap = '../node_modules/clay-css/lib/images/icons/icons.svg';
 
 /**
  * Stubs console.error

packages/clay-alert/src/__tests__/ClayStripe.js

@@ -2,7 +2,7 @@ import ClayStripe from '../ClayStripe';
 
 let consoleErrorReference;
 let stripe;
-const spritemap = '../node_modules/clay/lib/images/icons/icons.svg';
+const spritemap = '../node_modules/clay-css/lib/images/icons/icons.svg';
 
 /**
  * Stubs console.error

packages/clay-alert/src/__tests__/ClayToast.js

@@ -2,7 +2,7 @@ import ClayToast from '../ClayToast';
 
 let consoleErrorReference;
 let toast;
-const spritemap = '../node_modules/clay/lib/images/icons/icons.svg';
+const spritemap = '../node_modules/clay-css/lib/images/icons/icons.svg';
 
 /**
  * Stubs console.error

packages/clay-alert/src/__tests__/__snapshots__/ClayAlert.js.snap

@@ -5,7 +5,7 @@ exports[`ClayAlert should render a "danger" style alert 1`] = `
   <span class="alert-indicator">
     <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full" focusable="false">
       <title>exclamation-full</title>
-      <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-full"></use>
+      <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#exclamation-full"></use>
     </svg>
   </span>
   <strong class="lead">Danger!</strong>message</div>
@@ -16,7 +16,7 @@ exports[`ClayAlert should render a "success" style alert 1`] = `
   <span class="alert-indicator">
     <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full" focusable="false">
       <title>check-circle-full</title>
-      <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#check-circle-full"></use>
+      <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#check-circle-full"></use>
     </svg>
   </span>
   <strong class="lead">Success!</strong>message</div>
@@ -27,7 +27,7 @@ exports[`ClayAlert should render a "warning" style alert 1`] = `
   <span class="alert-indicator">
     <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full" focusable="false">
       <title>warning-full</title>
-      <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#warning-full"></use>
+      <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#warning-full"></use>
     </svg>
   </span>
   <strong class="lead">Warning!</strong>message</div>
@@ -38,13 +38,13 @@ exports[`ClayAlert should render a closeable alert 1`] = `
   <button class="btn close btn-unstyled" aria-label="Close" type="button">
     <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
       <title>times</title>
-      <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
+      <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
     <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full" focusable="false">
       <title>warning-full</title>
-      <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#warning-full"></use>
+      <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#warning-full"></use>
     </svg>
   </span>
   <strong class="lead">Warning!</strong>message</div>
@@ -55,7 +55,7 @@ exports[`ClayAlert should render an "info" style alert 1`] = `
   <span class="alert-indicator">
     <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
-      <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
+      <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>
   <strong class="lead">Info</strong>message</div>
@@ -66,7 +66,7 @@ exports[`ClayAlert should render an alert with classes 1`] = `
   <span class="alert-indicator">
     <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
-      <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
+      <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>
   <strong class="lead">info</strong>message</div>
@@ -77,7 +77,7 @@ exports[`ClayAlert should render an alert with id 1`] = `
   <span class="alert-indicator">
     <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
-      <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
+      <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>
   <strong class="lead">info</strong>message</div>
@@ -88,7 +88,7 @@ exports[`ClayAlert should render default markup 1`] = `
   <span class="alert-indicator">
     <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
       <title>info-circle</title>
-      <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
+      <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>
   <strong class="lead">info</strong>message</div>

packages/clay-alert/src/__tests__/__snapshots__/ClayStripe.js.snap

@@ -2,17 +2,17 @@
 
 exports[`ClayStripe should render a "danger" style stripe 1`] = `
 <div class="alert alert-danger fade alert-dismissible alert-fluid show" role="alert">
-  <div class="container">
+  <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full" focusable="false">
         <title>exclamation-full</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#exclamation-full"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#exclamation-full"></use>
       </svg>
     </span>
     <strong class="lead">Danger!</strong>message</div>
@@ -21,17 +21,17 @@ exports[`ClayStripe should render a "danger" style stripe 1`] = `
 
 exports[`ClayStripe should render a "success" style stripe 1`] = `
 <div class="alert alert-success fade alert-dismissible alert-fluid show" role="alert">
-  <div class="container">
+  <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full" focusable="false">
         <title>check-circle-full</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#check-circle-full"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#check-circle-full"></use>
       </svg>
     </span>
     <strong class="lead">Success!</strong>message</div>
@@ -40,17 +40,17 @@ exports[`ClayStripe should render a "success" style stripe 1`] = `
 
 exports[`ClayStripe should render a "warning" style stripe 1`] = `
 <div class="alert alert-warning fade alert-dismissible alert-fluid show" role="alert">
-  <div class="container">
+  <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full" focusable="false">
         <title>warning-full</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#warning-full"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#warning-full"></use>
       </svg>
     </span>
     <strong class="lead">Warning!</strong>message</div>
@@ -59,17 +59,17 @@ exports[`ClayStripe should render a "warning" style stripe 1`] = `
 
 exports[`ClayStripe should render an "info" style stripe 1`] = `
 <div class="alert alert-info fade alert-dismissible alert-fluid show" role="alert">
-  <div class="container">
+  <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
         <title>info-circle</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
       </svg>
     </span>
     <strong class="lead">Info</strong>message</div>
@@ -78,17 +78,17 @@ exports[`ClayStripe should render an "info" style stripe 1`] = `
 
 exports[`ClayStripe should render an stripe with classes 1`] = `
 <div class="alert alert-info fade alert-dismissible my-custom-class alert-fluid show" role="alert">
-  <div class="container">
+  <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
         <title>info-circle</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
       </svg>
     </span>
     <strong class="lead">info</strong>message</div>
@@ -97,17 +97,17 @@ exports[`ClayStripe should render an stripe with classes 1`] = `
 
 exports[`ClayStripe should render an stripe with id 1`] = `
 <div class="alert alert-info fade alert-dismissible alert-fluid show" id="myId" role="alert">
-  <div class="container">
+  <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
         <title>info-circle</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
       </svg>
     </span>
     <strong class="lead">info</strong>message</div>
@@ -116,17 +116,17 @@ exports[`ClayStripe should render an stripe with id 1`] = `
 
 exports[`ClayStripe should render default markup 1`] = `
 <div class="alert alert-info fade alert-dismissible alert-fluid show" role="alert">
-  <div class="container">
+  <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="Close" type="button">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
         <title>times</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#times"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
       <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
         <title>info-circle</title>
-        <use xlink:href="../node_modules/clay/lib/images/icons/icons.svg#info-circle"></use>
+        <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
       </svg>
     </span>
     <strong class="lead">info</strong>message</div>