From dac83dd0011e7b46bafa8f7140f15fd58187769a Mon Sep 17 00:00:00 2001
From: Alba Rivas <aazcona@salesforce.com>
Date: Tue, 30 Jan 2024 13:55:45 +0100
Subject: [PATCH] Add stylesheets recipe (#896)

* Add stylesheets recipe

* Add tab to app

* Fix deploy

* Fix deploy
---
 .../applications/LWC_Recipes.app-meta.xml     |  1 +
 .../LWC_Recipes_Console_App.app-meta.xml      | 73 -------------------
 .../Misc_Techniques.flexipage-meta.xml        |  6 --
 .../flexipages/Styling.flexipage-meta.xml     | 36 +++++++++
 .../lwc/miscStylingHooks/miscStylingHooks.js  |  3 -
 .../stylesheets/__tests__/stylesheets.test.js | 21 ++++++
 .../default/lwc/stylesheets/stylesheets.css   |  3 +
 .../default/lwc/stylesheets/stylesheets.html  | 10 +++
 .../default/lwc/stylesheets/stylesheets.js    |  6 ++
 .../stylesheets.js-meta.xml}                  |  0
 .../default/lwc/stylesheets/text-styles.css   |  7 ++
 .../__tests__/stylingHooks.test.js            | 21 ++++++
 .../stylingHooks.css}                         |  0
 .../stylingHooks.html}                        |  4 +-
 .../default/lwc/stylingHooks/stylingHooks.js  |  3 +
 .../lwc/stylingHooks/stylingHooks.js-meta.xml | 10 +++
 .../recipes.permissionset-meta.xml            |  4 +
 .../main/default/tabs/Styling.tab-meta.xml    |  7 ++
 18 files changed, 131 insertions(+), 84 deletions(-)
 create mode 100644 force-app/main/default/flexipages/Styling.flexipage-meta.xml
 delete mode 100644 force-app/main/default/lwc/miscStylingHooks/miscStylingHooks.js
 create mode 100644 force-app/main/default/lwc/stylesheets/__tests__/stylesheets.test.js
 create mode 100644 force-app/main/default/lwc/stylesheets/stylesheets.css
 create mode 100644 force-app/main/default/lwc/stylesheets/stylesheets.html
 create mode 100644 force-app/main/default/lwc/stylesheets/stylesheets.js
 rename force-app/main/default/lwc/{miscStylingHooks/miscStylingHooks.js-meta.xml => stylesheets/stylesheets.js-meta.xml} (100%)
 create mode 100644 force-app/main/default/lwc/stylesheets/text-styles.css
 create mode 100644 force-app/main/default/lwc/stylingHooks/__tests__/stylingHooks.test.js
 rename force-app/main/default/lwc/{miscStylingHooks/miscStylingHooks.css => stylingHooks/stylingHooks.css} (100%)
 rename force-app/main/default/lwc/{miscStylingHooks/miscStylingHooks.html => stylingHooks/stylingHooks.html} (87%)
 create mode 100644 force-app/main/default/lwc/stylingHooks/stylingHooks.js
 create mode 100644 force-app/main/default/lwc/stylingHooks/stylingHooks.js-meta.xml
 create mode 100644 force-app/main/default/tabs/Styling.tab-meta.xml

diff --git a/force-app/main/default/applications/LWC_Recipes.app-meta.xml b/force-app/main/default/applications/LWC_Recipes.app-meta.xml
index 36d423bf6..21fa80198 100644
--- a/force-app/main/default/applications/LWC_Recipes.app-meta.xml
+++ b/force-app/main/default/applications/LWC_Recipes.app-meta.xml
@@ -43,6 +43,7 @@
     <tabs>Record_Picker</tabs>
     <tabs>Misc_Techniques</tabs>
     <tabs>X3rd_Party_Libs</tabs>
+    <tabs>Styling</tabs>
     <uiType>Lightning</uiType>
     <utilityBar>LWC_Recipes_UtilityBar</utilityBar>
 </CustomApplication>
diff --git a/force-app/main/default/applications/LWC_Recipes_Console_App.app-meta.xml b/force-app/main/default/applications/LWC_Recipes_Console_App.app-meta.xml
index 1e065a263..896f97405 100644
--- a/force-app/main/default/applications/LWC_Recipes_Console_App.app-meta.xml
+++ b/force-app/main/default/applications/LWC_Recipes_Console_App.app-meta.xml
@@ -11,85 +11,12 @@
     <isNavTabPersistenceDisabled>false</isNavTabPersistenceDisabled>
     <label>LWC Recipes Console App</label>
     <navType>Console</navType>
-    <tabs>Hello</tabs>
-    <tabs>Datatable</tabs>
-    <tabs>Apex</tabs>
-    <tabs>standard-Contact</tabs>
-    <tabs>Composition</tabs>
-    <tabs>Events</tabs>
-    <tabs>Parent_to_Child</tabs>
-    <tabs>Message_Service</tabs>
-    <tabs>Refresh_View</tabs>
-    <tabs>Light_DOM</tabs>
-    <tabs>Dynamic_Interactions</tabs>
-    <tabs>Aura_Interoperability</tabs>
-    <tabs>Wire</tabs>
-    <tabs>GraphQL</tabs>
-    <tabs>Navigation</tabs>
-    <tabs>Record_Picker</tabs>
-    <tabs>Misc_Techniques</tabs>
-    <tabs>X3rd_Party_Libs</tabs>
     <tabs>Workspace_API_Tab_Launcher</tabs>
     <uiType>Lightning</uiType>
     <utilityBar>LWC_Recipes_Console_App_UtilityBar</utilityBar>
     <workspaceConfig>
-        <mappings>
-            <tab>Apex</tab>
-        </mappings>
-        <mappings>
-            <tab>Aura_Interoperability</tab>
-        </mappings>
-        <mappings>
-            <tab>Composition</tab>
-        </mappings>
-        <mappings>
-            <tab>Datatable</tab>
-        </mappings>
-        <mappings>
-            <tab>Dynamic_Interactions</tab>
-        </mappings>
-        <mappings>
-            <tab>Events</tab>
-        </mappings>
-        <mappings>
-            <tab>GraphQL</tab>
-        </mappings>
-        <mappings>
-            <tab>Hello</tab>
-        </mappings>
-        <mappings>
-            <tab>Light_DOM</tab>
-        </mappings>
-        <mappings>
-            <tab>Message_Service</tab>
-        </mappings>
-        <mappings>
-            <tab>Misc_Techniques</tab>
-        </mappings>
-        <mappings>
-            <tab>Navigation</tab>
-        </mappings>
-        <mappings>
-            <tab>Parent_to_Child</tab>
-        </mappings>
-        <mappings>
-            <tab>Record_Picker</tab>
-        </mappings>
-        <mappings>
-            <tab>Refresh_View</tab>
-        </mappings>
-        <mappings>
-            <tab>Wire</tab>
-        </mappings>
         <mappings>
             <tab>Workspace_API_Tab_Launcher</tab>
         </mappings>
-        <mappings>
-            <tab>X3rd_Party_Libs</tab>
-        </mappings>
-        <mappings>
-            <fieldName>AccountId</fieldName>
-            <tab>standard-Contact</tab>
-        </mappings>
     </workspaceConfig>
 </CustomApplication>
diff --git a/force-app/main/default/flexipages/Misc_Techniques.flexipage-meta.xml b/force-app/main/default/flexipages/Misc_Techniques.flexipage-meta.xml
index 6f1ced636..57662e09f 100644
--- a/force-app/main/default/flexipages/Misc_Techniques.flexipage-meta.xml
+++ b/force-app/main/default/flexipages/Misc_Techniques.flexipage-meta.xml
@@ -61,12 +61,6 @@
         <type>Region</type>
     </flexiPageRegions>
     <flexiPageRegions>
-        <itemInstances>
-            <componentInstance>
-                <componentName>miscStylingHooks</componentName>
-                <identifier>c_miscStylingHooks1</identifier>
-            </componentInstance>
-        </itemInstances>
         <itemInstances>
             <componentInstance>
                 <componentName>miscStaticResource</componentName>
diff --git a/force-app/main/default/flexipages/Styling.flexipage-meta.xml b/force-app/main/default/flexipages/Styling.flexipage-meta.xml
new file mode 100644
index 000000000..9da51882b
--- /dev/null
+++ b/force-app/main/default/flexipages/Styling.flexipage-meta.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
+    <flexiPageRegions>
+        <name>region1</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <flexiPageRegions>
+        <itemInstances>
+            <componentInstance>
+                <componentName>stylesheets</componentName>
+                <identifier>c_stylesheets</identifier>
+            </componentInstance>
+        </itemInstances>
+        <name>region2</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <flexiPageRegions>
+        <itemInstances>
+            <componentInstance>
+                <componentName>stylingHooks</componentName>
+                <identifier>c_stylingHooks</identifier>
+            </componentInstance>
+        </itemInstances>
+        <name>region3</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <flexiPageRegions>
+        <name>region4</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <masterLabel>Styling</masterLabel>
+    <template>
+        <name>flexipage:appHomeTemplateHeaderThreeColumns</name>
+    </template>
+    <type>AppPage</type>
+</FlexiPage>
diff --git a/force-app/main/default/lwc/miscStylingHooks/miscStylingHooks.js b/force-app/main/default/lwc/miscStylingHooks/miscStylingHooks.js
deleted file mode 100644
index 731fcea77..000000000
--- a/force-app/main/default/lwc/miscStylingHooks/miscStylingHooks.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class MiscStylingHooks extends LightningElement {}
diff --git a/force-app/main/default/lwc/stylesheets/__tests__/stylesheets.test.js b/force-app/main/default/lwc/stylesheets/__tests__/stylesheets.test.js
new file mode 100644
index 000000000..8e08443d7
--- /dev/null
+++ b/force-app/main/default/lwc/stylesheets/__tests__/stylesheets.test.js
@@ -0,0 +1,21 @@
+import { createElement } from 'lwc';
+import Stylesheets from 'c/stylesheets';
+
+describe('c-misc-stylesheets', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('is accessible', async () => {
+        const element = createElement('c-stylesheets', {
+            is: Stylesheets
+        });
+        document.body.appendChild(element);
+
+        // Check accessibility
+        await expect(element).toBeAccessible();
+    });
+});
diff --git a/force-app/main/default/lwc/stylesheets/stylesheets.css b/force-app/main/default/lwc/stylesheets/stylesheets.css
new file mode 100644
index 000000000..265ffcaf4
--- /dev/null
+++ b/force-app/main/default/lwc/stylesheets/stylesheets.css
@@ -0,0 +1,3 @@
+.card-body {
+    background-color: yellow;
+}
diff --git a/force-app/main/default/lwc/stylesheets/stylesheets.html b/force-app/main/default/lwc/stylesheets/stylesheets.html
new file mode 100644
index 000000000..f538facbf
--- /dev/null
+++ b/force-app/main/default/lwc/stylesheets/stylesheets.html
@@ -0,0 +1,10 @@
+<template>
+    <lightning-card title="Stylesheets" icon-name="custom:custom3">
+        <div class="card-body">
+            <p class="fancy-text">This is a paragraph with style!</p>
+        </div>
+        <c-view-source source="lwc/stylesheets" slot="footer">
+            Add additional stylesheets scoped to your component.
+        </c-view-source>
+    </lightning-card>
+</template>
diff --git a/force-app/main/default/lwc/stylesheets/stylesheets.js b/force-app/main/default/lwc/stylesheets/stylesheets.js
new file mode 100644
index 000000000..a218f3a57
--- /dev/null
+++ b/force-app/main/default/lwc/stylesheets/stylesheets.js
@@ -0,0 +1,6 @@
+import { LightningElement } from 'lwc';
+import textStyles from './text-styles.css';
+
+export default class Stylesheets extends LightningElement {
+    static stylesheets = [textStyles];
+}
diff --git a/force-app/main/default/lwc/miscStylingHooks/miscStylingHooks.js-meta.xml b/force-app/main/default/lwc/stylesheets/stylesheets.js-meta.xml
similarity index 100%
rename from force-app/main/default/lwc/miscStylingHooks/miscStylingHooks.js-meta.xml
rename to force-app/main/default/lwc/stylesheets/stylesheets.js-meta.xml
diff --git a/force-app/main/default/lwc/stylesheets/text-styles.css b/force-app/main/default/lwc/stylesheets/text-styles.css
new file mode 100644
index 000000000..2cba565cb
--- /dev/null
+++ b/force-app/main/default/lwc/stylesheets/text-styles.css
@@ -0,0 +1,7 @@
+.fancy-text {
+    color: #d54d7b;
+    font-family: 'Great Vibes', cursive;
+    font-weight: normal;
+    text-align: center;
+    text-shadow: 0 1px 1px #fff;
+}
diff --git a/force-app/main/default/lwc/stylingHooks/__tests__/stylingHooks.test.js b/force-app/main/default/lwc/stylingHooks/__tests__/stylingHooks.test.js
new file mode 100644
index 000000000..cbe539f26
--- /dev/null
+++ b/force-app/main/default/lwc/stylingHooks/__tests__/stylingHooks.test.js
@@ -0,0 +1,21 @@
+import { createElement } from 'lwc';
+import StylingHooks from 'c/stylingHooks';
+
+describe('c-misc-stylesheets', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('is accessible', async () => {
+        const element = createElement('c-styling-hooks', {
+            is: StylingHooks
+        });
+        document.body.appendChild(element);
+
+        // Check accessibility
+        await expect(element).toBeAccessible();
+    });
+});
diff --git a/force-app/main/default/lwc/miscStylingHooks/miscStylingHooks.css b/force-app/main/default/lwc/stylingHooks/stylingHooks.css
similarity index 100%
rename from force-app/main/default/lwc/miscStylingHooks/miscStylingHooks.css
rename to force-app/main/default/lwc/stylingHooks/stylingHooks.css
diff --git a/force-app/main/default/lwc/miscStylingHooks/miscStylingHooks.html b/force-app/main/default/lwc/stylingHooks/stylingHooks.html
similarity index 87%
rename from force-app/main/default/lwc/miscStylingHooks/miscStylingHooks.html
rename to force-app/main/default/lwc/stylingHooks/stylingHooks.html
index d697d2233..e34738b26 100644
--- a/force-app/main/default/lwc/miscStylingHooks/miscStylingHooks.html
+++ b/force-app/main/default/lwc/stylingHooks/stylingHooks.html
@@ -1,5 +1,5 @@
 <template>
-    <lightning-card title="MiscStylingHooks" icon-name="custom:custom3">
+    <lightning-card title="StylingHooks" icon-name="custom:custom3">
         <div class="slds-var-m-around_medium">
             <lightning-input
                 type="toggle"
@@ -24,7 +24,7 @@
             <lightning-button label="A button"></lightning-button>
         </div>
 
-        <c-view-source source="lwc/miscStylingHooks" slot="footer">
+        <c-view-source source="lwc/stylingHooks" slot="footer">
             Use Styling Hooks to customize the appearance of Lightning base
             components and custom components.
         </c-view-source>
diff --git a/force-app/main/default/lwc/stylingHooks/stylingHooks.js b/force-app/main/default/lwc/stylingHooks/stylingHooks.js
new file mode 100644
index 000000000..dff0293c4
--- /dev/null
+++ b/force-app/main/default/lwc/stylingHooks/stylingHooks.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class StylingHooks extends LightningElement {}
diff --git a/force-app/main/default/lwc/stylingHooks/stylingHooks.js-meta.xml b/force-app/main/default/lwc/stylingHooks/stylingHooks.js-meta.xml
new file mode 100644
index 000000000..b67524848
--- /dev/null
+++ b/force-app/main/default/lwc/stylingHooks/stylingHooks.js-meta.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>59.0</apiVersion>
+    <isExposed>true</isExposed>
+    <targets>
+        <target>lightning__AppPage</target>
+        <target>lightning__RecordPage</target>
+        <target>lightning__HomePage</target>
+    </targets>
+</LightningComponentBundle>
diff --git a/force-app/main/default/permissionsets/recipes.permissionset-meta.xml b/force-app/main/default/permissionsets/recipes.permissionset-meta.xml
index 1c1b7e408..18fae2182 100644
--- a/force-app/main/default/permissionsets/recipes.permissionset-meta.xml
+++ b/force-app/main/default/permissionsets/recipes.permissionset-meta.xml
@@ -224,6 +224,10 @@
         <tab>Refresh_View</tab>
         <visibility>Visible</visibility>
     </tabSettings>
+    <tabSettings>
+        <tab>Styling</tab>
+        <visibility>Visible</visibility>
+    </tabSettings>
     <tabSettings>
         <tab>Wire</tab>
         <visibility>Visible</visibility>
diff --git a/force-app/main/default/tabs/Styling.tab-meta.xml b/force-app/main/default/tabs/Styling.tab-meta.xml
new file mode 100644
index 000000000..484cecbc6
--- /dev/null
+++ b/force-app/main/default/tabs/Styling.tab-meta.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<CustomTab xmlns="http://soap.sforce.com/2006/04/metadata">
+    <description>Created by Lightning App Builder</description>
+    <flexiPage>Styling</flexiPage>
+    <label>Styling</label>
+    <motif>Custom86: Red Cross</motif>
+</CustomTab>