LPS-201972 Add FeatureIndicator examples to js-clay-sample-web

modules/apps/frontend-js/frontend-js-clay-sample-web/build.gradle

@@ -1,8 +1,11 @@
 dependencies {
+	compileOnly group: "com.liferay.portal", name: "com.liferay.portal.impl", version: "default"
 	compileOnly group: "com.liferay.portal", name: "com.liferay.portal.kernel", version: "default"
 	compileOnly group: "com.liferay.portal", name: "com.liferay.util.taglib", version: "default"
 	compileOnly group: "javax.portlet", name: "portlet-api", version: "3.0.1"
 	compileOnly group: "org.osgi", name: "org.osgi.service.component.annotations", version: "1.4.0"
+	compileOnly project(":apps:frontend-taglib:frontend-taglib")
 	compileOnly project(":apps:frontend-taglib:frontend-taglib-react")
+	compileOnly project(":apps:learn:learn-api")
 	compileOnly project(":core:petra:petra-string")
 }

modules/apps/frontend-js/frontend-js-clay-sample-web/src/main/resources/META-INF/resources/init.jsp

@@ -4,12 +4,16 @@
  * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
  */
 --%>
-
 <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
 
-<%@ taglib uri="http://liferay.com/tld/react" prefix="react" %><%@
+<%@ taglib uri="http://liferay.com/tld/frontend" prefix="liferay-frontend" %><%@
+taglib uri="http://liferay.com/tld/react" prefix="react" %><%@
 taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
 
+<%@ page import="com.liferay.learn.LearnMessageUtil" %><%@
+page import="com.liferay.portal.kernel.language.LanguageUtil" %><%@
+page import="com.liferay.portal.kernel.util.HashMapBuilder" %>
+
 <liferay-theme:defineObjects />
 
 <portlet:defineObjects />

modules/apps/frontend-js/frontend-js-clay-sample-web/src/main/resources/META-INF/resources/js/App.js

@@ -6,6 +6,8 @@
 import ClayAlert from '@clayui/alert';
 import React from 'react';
 
+import {FeatureIndicator} from 'frontend-js-components-web';
+
 import '../css/main.scss';
 
 export default function App() {
@@ -16,7 +18,27 @@ export default function App() {
 				whatever JS you want to App.js and redeploy.
 			</ClayAlert>
 
-			<div className="clay-test-class">This is where your code goes.</div>
+			<div className="p-3">
+				<div className="h1">Feature Indicator (JS)</div>
+
+				<FeatureIndicator interactive type="beta" />
+
+				<FeatureIndicator type="beta" />
+
+				<FeatureIndicator interactive type="deprecated" />
+
+				<FeatureIndicator type="deprecated" />
+			</div>
+
+			<div className="clay-dark bg-dark p-3">
+				<FeatureIndicator interactive type="beta" />
+
+				<FeatureIndicator type="beta" />
+
+				<FeatureIndicator interactive type="deprecated" />
+
+				<FeatureIndicator type="deprecated" />
+			</div>
 		</div>
 	);
 }

modules/apps/frontend-js/frontend-js-clay-sample-web/src/main/resources/META-INF/resources/view.jsp

@@ -11,4 +11,38 @@
 	<react:component
 		module="js/App"
 	/>
-</div>
+</div>
+
+<div class="h1">Feature Indicator (JSP)</div>
+
+<div class="p-3">
+	<div class="d-inline-block">
+		<react:component
+			module="{FeatureIndicator} from frontend-js-components-web"
+			props='<%=
+				HashMapBuilder.<String, Object>put(
+					"learnResourceContext", LearnMessageUtil.getReactDataJSONObject("frontend-js-components-web")
+				).put(
+					"interactive", "true"
+				).put(
+					"type", "beta"
+				).build()
+			%>'
+		/>
+	</div>
+
+	<div class="d-inline-block">
+		<react:component
+			module="{FeatureIndicator} from frontend-js-components-web"
+			props='<%=
+				HashMapBuilder.<String, Object>put(
+					"learnResourceContext", LearnMessageUtil.getReactDataJSONObject("frontend-js-components-web")
+				).put(
+					"interactive", "true"
+				).put(
+					"type", "deprecated"
+				).build()
+			%>'
+		/>
+	</div>
+</div>