Skip to content

Commit

Permalink
Add stylesheets recipe (#896)
Browse files Browse the repository at this point in the history
* Add stylesheets recipe

* Add tab to app

* Fix deploy

* Fix deploy
  • Loading branch information
albarivas authored Jan 30, 2024
1 parent b2079d2 commit dac83dd
Show file tree
Hide file tree
Showing 18 changed files with 131 additions and 84 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
36 changes: 36 additions & 0 deletions force-app/main/default/flexipages/Styling.flexipage-meta.xml
Original file line number Diff line number Diff line change
@@ -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>

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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();
});
});
3 changes: 3 additions & 0 deletions force-app/main/default/lwc/stylesheets/stylesheets.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.card-body {
background-color: yellow;
}
10 changes: 10 additions & 0 deletions force-app/main/default/lwc/stylesheets/stylesheets.html
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 6 additions & 0 deletions force-app/main/default/lwc/stylesheets/stylesheets.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { LightningElement } from 'lwc';
import textStyles from './text-styles.css';

export default class Stylesheets extends LightningElement {
static stylesheets = [textStyles];
}
7 changes: 7 additions & 0 deletions force-app/main/default/lwc/stylesheets/text-styles.css
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions force-app/main/default/lwc/stylingHooks/stylingHooks.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { LightningElement } from 'lwc';

export default class StylingHooks extends LightningElement {}
10 changes: 10 additions & 0 deletions force-app/main/default/lwc/stylingHooks/stylingHooks.js-meta.xml
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions force-app/main/default/tabs/Styling.tab-meta.xml
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit dac83dd

Please sign in to comment.