HTML Lightning Web Component Sample

1<template>
2  <div>
3    <div class="slds-page-header">
4      <div class="slds-page-header__row">
5        <div class="slds-page-header__col-title">
6          <div class="slds-media">
7            <div class="slds-media__figure">
8              <span
9                class="slds-icon_container slds-icon-utility-connected_apps"
10                title="opportunity"
11              >
12                <svg class="slds-icon slds-page-header__icon" aria-hidden="true">
13                  <use
14                    xlink:href="/assets/icons/standard-sprite/svg/utility.svg#connected_apps"
15                  ></use>
16                </svg>
17              </span>
18            </div>
19            <div class="slds-media__body">
20              <div class="slds-page-header__name">
21                <div class="slds-page-header__name-title">
22                  <h1>
23                    <span class="slds-page-header__title slds-truncate" title="CMS Control Panel"
24                      >CMS Control Panel</span
25                    >
26                  </h1>
27                </div>
28              </div>
29            </div>
30          </div>
31        </div>
32      </div>
33    </div>
34
35    <div class="slds-p-top_small slds-grid slds-wrap slds-gutters">
36      <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
37        <lightning-card>
38          <h3 slot="title">
39            <lightning-icon icon-name="standard:marketing_actions" size="small"></lightning-icon>
40            Marketing Cloud
41          </h3>
42
43          <div class="slds-p-horizontal_small">
44            <p>
45              Welcome to the Salesforce CMS Control Panel. Use the buttons below to ensure the CMS
46              content is updated in the appropriate location.
47            </p>
48            <ul class="slds-p-top_small">
49              <li>
50                Use the Refresh Marketing Cloud button to refresh the content that has been sent to
51                Marketing Cloud.
52              </li>
53            </ul>
54
55            <div class="slds-p-top_small">
56              <p>Current Status: {mcStatus}</p>
57              <p if:true="{mcResponse}">Last Marketing Cloud build stats: {mcResponse}</p>
58            </div>
59          </div>
60
61          <div slot="footer">
62            <lightning-button
63              variant="brand"
64              onclick="{handleMarketingCloudRebuildClick}"
65              disabled="{waitingOnMarketingCloud}"
66              label="Refresh Marketing Cloud"
67            >
68            </lightning-button>
69          </div>
70        </lightning-card>
71      </div>
72      <div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2">
73        <lightning-card>
74          <h3 slot="title">
75            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
76            Heroku
77          </h3>
78
79          <div class="slds-p-horizontal_small">
80            <p>
81              Welcome to the Salesforce CMS Control Panel. Use the buttons below to ensure the CMS
82              content is updated in the appropriate location.
83            </p>
84            <ul class="slds-p-top_small">
85              <li>Use the Rebuild Heroku App button to rebuild the blog hosted on Heroku.</li>
86            </ul>
87
88            <div class="slds-p-top_small">
89              <p>Current Status: {herokuStatus}</p>
90              <p if:true="{herokuResponse}">Last Heroku build stats: {herokuResponse}</p>
91            </div>
92          </div>
93
94          <div slot="footer">
95            <lightning-button
96              ing-button
97              variant="brand"
98              onclick="{handleHerokuRebuildClick}"
99              disabled="{waitingOnHeroku}"
100              label="Rebuild Heroku App"
101            >
102            </lightning-button>
103          </div>
104        </lightning-card>
105      </div>
106    </div>
107  </div>
108</template>