@salesforcedevs/dx-components 0.15.0-alpha.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +12 -0
- package/package.json +3 -2
- package/src/assets/svg/docs-empty-state-small.svg +72 -0
- package/src/modules/dx/cardGrid/__tests__/cardMockProps.ts +78 -148
- package/src/modules/dx/emptyState/__tests__/emptyState.test.ts +29 -9
- package/src/modules/dx/emptyState/emptyState.css +14 -0
- package/src/modules/dx/emptyState/emptyState.html +2 -2
- package/src/modules/dx/emptyState/emptyState.stories.ts +8 -0
- package/src/modules/dx/emptyState/emptyState.ts +14 -0
- package/src/modules/dx/footer/links.ts +3 -5
- package/src/modules/dx/headerNav/__tests__/headerNav.test.ts +2 -4
- package/src/modules/dx/headerNav/headerNav.html +8 -6
- package/src/modules/dx/headerNav/headerNav.ts +2 -2
- package/src/modules/dx/newsletterForm/newsletterForm.html +5 -3
- package/src/modules/dx/sidebar/sidebar.html +1 -0
- package/src/modules/dx/{headerNavOption/__tests__/headerNavOption.test.ts → tab/__tests__/tab.test.ts} +40 -24
- package/src/modules/dx/{headerNavOption/headerNavOption.css → tab/tab.css} +24 -9
- package/src/modules/dx/{headerNavOption/headerNavOption.html → tab/tab.html} +5 -1
- package/src/modules/dx/tab/tab.stories.ts +57 -0
- package/src/modules/dx/{headerNavOption/headerNavOption.ts → tab/tab.ts} +26 -5
- package/src/modules/utils/normalizers/normalizers.ts +3 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
Copyright (c) 2020, Salesforce.com, Inc.
|
|
2
|
+
All rights reserved.
|
|
3
|
+
|
|
4
|
+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|
|
5
|
+
|
|
6
|
+
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
|
|
7
|
+
|
|
8
|
+
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
|
9
|
+
|
|
10
|
+
* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
|
|
11
|
+
|
|
12
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/dx-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"description": "DX Lightning web components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -28,5 +28,6 @@
|
|
|
28
28
|
"@types/classnames": "^2.2.10",
|
|
29
29
|
"@types/debounce": "^1.2.0",
|
|
30
30
|
"@types/lodash.get": "^4.4.6"
|
|
31
|
-
}
|
|
31
|
+
},
|
|
32
|
+
"gitHead": "27aac9b260986d3bd145401c4ce66594314c74e9"
|
|
32
33
|
}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="221px" height="313px" viewBox="0 0 221 313" version="1.1">
|
|
2
|
+
|
|
3
|
+
<g id="Scoped-Search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
4
|
+
<g id="Docs-–-Search-Results-None" transform="translate(-75.000000, -250.000000)">
|
|
5
|
+
<g id="Group-4" transform="translate(76.000000, 251.000000)">
|
|
6
|
+
<path d="M201.659495,279.870144 C182.592625,248.683561 148.224271,227.870144 108.994683,227.870144 C69.8859627,227.870144 35.6085672,248.555505 16.5065438,279.582179 L201.659495,279.870144 Z" id="Oval" fill="#E0E5F8"/>
|
|
7
|
+
<line x1="218" y1="279" x2="-4.28615476e-14" y2="279" id="Stroke-142" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
+
<g id="Group" transform="translate(18.051327, 219.000000)" stroke="#3A49DA" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
|
9
|
+
<polyline id="Stroke-47" points="25.3157545 59.4202703 68.8390812 -2.84217094e-14 112.555636 59.4202703"/>
|
|
10
|
+
<line x1="68.8394059" y1="28.7179459" x2="91.5452871" y2="58.9644324" id="Stroke-48"/>
|
|
11
|
+
<line x1="68.8394059" y1="59.9554865" x2="68.8394059" y2="8.10810819e-05" id="Stroke-49"/>
|
|
12
|
+
<polyline id="Stroke-50" points="95.052695 35.4245676 107.6742 18.4218649 138.460735 59.4067297"/>
|
|
13
|
+
<line x1="107.982552" y1="37.2971351" x2="125.273998" y2="59.9552432" id="Stroke-51"/>
|
|
14
|
+
<line x1="107.674119" y1="18.422027" x2="107.674119" y2="52.6341892" id="Stroke-52"/>
|
|
15
|
+
<polyline id="Stroke-53" points="0 58.8580541 30.0046931 18.4221081 42.626198 35.5050811"/>
|
|
16
|
+
<line x1="30.3131267" y1="37.2971351" x2="35.8298594" y2="44.8782162" id="Stroke-54"/>
|
|
17
|
+
<line x1="30.0046931" y1="18.422027" x2="30.0046931" y2="52.6341892" id="Stroke-55"/>
|
|
18
|
+
<line x1="78.2244277" y1="40.1912432" x2="98.127695" y2="40.1912432" id="Stroke-56"/>
|
|
19
|
+
<line x1="39.8757069" y1="40.1912432" x2="68.5156277" y2="40.1912432" id="Stroke-57"/>
|
|
20
|
+
<line x1="9.77821584" y1="46.494" x2="29.1959782" y2="46.494" id="Stroke-58"/>
|
|
21
|
+
<line x1="115.603438" y1="46.9786216" x2="128.570804" y2="46.7864595" id="Stroke-59"/>
|
|
22
|
+
</g>
|
|
23
|
+
<g id="Tree" transform="translate(184.642766, 251.289243)" stroke="#3A49DA" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
|
24
|
+
<path d="M1.68635842,5.76486486 C1.68635842,5.76486486 8.7131901,4.76189189 8.7131901,0" id="Stroke-176"/>
|
|
25
|
+
<path d="M15.7405089,5.76486486 C15.7405089,5.76486486 8.71367723,4.76189189 8.71367723,0" id="Stroke-178"/>
|
|
26
|
+
<path d="M0.280667327,12.9584595 C0.280667327,12.9584595 8.66252871,11.756027 8.66252871,6.04062162" id="Stroke-180"/>
|
|
27
|
+
<path d="M17.1089347,12.9584595 C17.1089347,12.9584595 8.67592475,11.756027 8.67592475,6.04062162" id="Stroke-182"/>
|
|
28
|
+
<path d="M0,20.7791351 C0,20.7791351 8.38267327,19.5758919 8.38267327,13.8612973" id="Stroke-184"/>
|
|
29
|
+
<path d="M16.8282673,20.7791351 C16.8282673,20.7791351 8.39525743,19.5758919 8.39525743,13.8612973" id="Stroke-186"/>
|
|
30
|
+
<line x1="8.6769802" y1="0.674351351" x2="7.94385149" y2="26.7127297" id="Stroke-188"/>
|
|
31
|
+
</g>
|
|
32
|
+
<g id="Tree-Copy" transform="translate(156.801980, 238.316270)" stroke="#3A49DA" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
|
33
|
+
<path d="M3.54694653,5.76486486 C3.54694653,5.76486486 10.5737782,4.76189189 10.5737782,0" id="Stroke-176"/>
|
|
34
|
+
<path d="M17.601097,5.76486486 C17.601097,5.76486486 10.5742653,4.76189189 10.5742653,0" id="Stroke-178"/>
|
|
35
|
+
<path d="M2.14125545,12.9584595 C2.14125545,12.9584595 10.5231168,11.756027 10.5231168,6.04062162" id="Stroke-180"/>
|
|
36
|
+
<path d="M18.9695228,12.9584595 C18.9695228,12.9584595 10.5365129,11.756027 10.5365129,6.04062162" id="Stroke-182"/>
|
|
37
|
+
<path d="M0,22.1007568 C0,22.1007568 10.8656495,20.4791351 10.5544554,13.1161622" id="Stroke-184"/>
|
|
38
|
+
<path d="M22.2349901,22.4664324 C22.2349901,22.4664324 10.8530653,20.4791351 10.5544554,13.1161622" id="Stroke-186"/>
|
|
39
|
+
<line x1="10.5544554" y1="0.143189189" x2="10.5544554" y2="39.8729189" id="Stroke-188"/>
|
|
40
|
+
</g>
|
|
41
|
+
<g id="Group-3" transform="translate(1.000000, 293.000000)" stroke="#3A49DA" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
|
42
|
+
<path d="M217.625688,3.32951755 L216.109563,4.83831755 C212.275375,8.65431755 206.019125,8.66471755 202.171938,4.86151755 L200.47625,3.18631755 C196.653438,-0.592882452 190.444313,-0.609682452 186.601188,3.14791755 L184.805563,4.90311755 C180.960813,8.65991755 174.7525,8.64311755 170.929688,4.86471755 L169.234,3.18871755 C165.386,-0.613682452 159.12975,-0.604082452 155.295563,3.21191755 L153.78025,4.72071755 C149.946063,8.53591755 143.689813,8.54711755 139.842625,4.74471755 L138.158313,3.07991755 C134.330625,-0.703282452 128.113375,-0.714482452 124.271063,3.05431755 L122.605438,4.68791755 C118.733875,8.48471755 112.458938,8.43991755 108.643438,4.58711755 L107.291438,3.22151755 C103.456438,-0.651282452 97.1425,-0.673682452 93.2790625,3.17031755 L91.8393125,4.60391755 C88.005125,8.41991755 81.748875,8.42951755 77.900875,4.62711755 L76.204375,2.95111755 C72.382375,-0.827282452 66.1740625,-0.844082452 62.3293125,2.91351755 L60.5336875,4.66791755 C56.6905625,8.42631755 50.4814375,8.40871755 46.658625,4.62951755 L44.9629375,2.95431755 C41.11575,-0.848882452 34.8595,-0.838482452 31.0253125,2.97751755 L29.5091875,4.48631755 C25.6758125,8.30151755 19.41875,8.31191755 15.5715625,4.50951755 L13.88725,2.84551755 C10.0595625,-0.938482452 3.8423125,-0.949682452 0,2.81911755" id="Stroke-34"/>
|
|
43
|
+
<path d="M217.625688,13.3295175 L216.109563,14.8383175 C212.275375,18.6543175 206.019125,18.6647175 202.171938,14.8615175 L200.47625,13.1863175 C196.653438,9.40711755 190.444313,9.39031755 186.601188,13.1479175 L184.805563,14.9031175 C180.960813,18.6599175 174.7525,18.6431175 170.929688,14.8647175 L169.234,13.1887175 C165.386,9.38631755 159.12975,9.39591755 155.295563,13.2119175 L153.78025,14.7207175 C149.946063,18.5359175 143.689813,18.5471175 139.842625,14.7447175 L138.158313,13.0799175 C134.330625,9.29671755 128.113375,9.28551755 124.271063,13.0543175 L122.605438,14.6879175 C118.733875,18.4847175 112.458938,18.4399175 108.643438,14.5871175 L107.291438,13.2215175 C103.456438,9.34871755 97.1425,9.32631755 93.2790625,13.1703175 L91.8393125,14.6039175 C88.005125,18.4199175 81.748875,18.4295175 77.900875,14.6271175 L76.204375,12.9511175 C72.382375,9.17271755 66.1740625,9.15591755 62.3293125,12.9135175 L60.5336875,14.6679175 C56.6905625,18.4263175 50.4814375,18.4087175 46.658625,14.6295175 L44.9629375,12.9543175 C41.11575,9.15111755 34.8595,9.16151755 31.0253125,12.9775175 L29.5091875,14.4863175 C25.6758125,18.3015175 19.41875,18.3119175 15.5715625,14.5095175 L13.88725,12.8455175 C10.0595625,9.06151755 3.8423125,9.05031755 0,12.8191175" id="Stroke-34"/>
|
|
44
|
+
</g>
|
|
45
|
+
<g id="Group-2" transform="translate(10.000000, 51.000000)">
|
|
46
|
+
<path d="M13,42 C11.0833155,38.0733207 10,33.6162847 10,28.8913505 C10,25.0353854 10.7215678,21.3575658 12.0284858,18" id="Stroke-3" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
47
|
+
<path d="M68.7023096,24 C68.8979942,25.3925735 69,26.8162502 69,28.2639611 C69,44.6871388 55.9314593,58 39.8096834,58 C29.9824295,58 21.28973,53.0531831 16,45.4696661" id="Stroke-5" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
48
|
+
<path d="M14,14.3438343 C19.0920875,5.75263912 28.4041256,0 39.0486337,0 C52.2547842,0 63.4102343,8.85484032 67,21" id="Stroke-7" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
49
|
+
<path d="M16,66.4996586 C16,68.4328358 14.4328358,70 12.4996586,70 C10.5671642,70 9,68.4328358 9,66.4996586 C9,64.5671642 10.5671642,63 12.4996586,63 C14.4328358,63 16,64.5671642 16,66.4996586 Z" id="Stroke-11" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
50
|
+
<path d="M39,14 C39,15.1048 38.1048,16 37,16 C35.8952,16 35,15.1048 35,14 C35,12.8952 35.8952,12 37,12 C38.1048,12 39,12.8952 39,14" id="Fill-13" fill="#3A49DA"/>
|
|
51
|
+
<line x1="61" y1="24.5" x2="71" y2="24.5" id="Stroke-15" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
52
|
+
<line x1="75" y1="24.5" x2="78" y2="24.5" id="Stroke-17" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
53
|
+
<line x1="11" y1="14.5" x2="19" y2="14.5" id="Stroke-19" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
54
|
+
<line x1="0" y1="14.5" x2="4" y2="14.5" id="Stroke-21" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
55
|
+
<path d="M7,14.5 C7,14.776 6.7765,15 6.5,15 C6.224,15 6,14.776 6,14.5 C6,14.2235 6.224,14 6.5,14 C6.7765,14 7,14.2235 7,14.5" id="Fill-23" fill="#3A49DA"/>
|
|
56
|
+
<line x1="7" y1="45.5" x2="18" y2="45.5" id="Stroke-25" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
57
|
+
<path d="M22,45.5 C22,45.776 21.776,46 21.5,46 C21.2235,46 21,45.776 21,45.5 C21,45.2235 21.2235,45 21.5,45 C21.776,45 22,45.2235 22,45.5" id="Fill-27" fill="#3A49DA"/>
|
|
58
|
+
<line x1="49.5" y1="38" x2="49.5" y2="32" id="Stroke-29" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
59
|
+
<line x1="52" y1="35.5" x2="46" y2="35.5" id="Stroke-31" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
60
|
+
</g>
|
|
61
|
+
<path d="M19.2422395,15.5274853 L18.0975569,18.6207328 C18.0155558,18.8420599 17.8415534,19.0160551 17.6202169,19.0973862 L14.5275073,20.2420211 C13.8241642,20.5026805 13.8241642,21.4973195 14.5275073,21.7579789 L17.6202169,22.9026138 C17.8415534,22.9839449 18.0155558,23.1579401 18.0975569,23.3792672 L19.2422395,26.4725147 C19.5029098,27.1758284 20.4975902,27.1758284 20.7569272,26.4725147 L21.9016097,23.3792672 C21.9836109,23.1579401 22.15828,22.9839449 22.3796164,22.9026138 L25.4729927,21.7579789 C26.1756691,21.4973195 26.1756691,20.5026805 25.4729927,20.2420211 L22.3796164,19.0973862 C22.15828,19.0160551 21.9836109,18.8420599 21.9016097,18.6207328 L20.7569272,15.5274853 C20.4975902,14.8241716 19.5029098,14.8241716 19.2422395,15.5274853 Z" id="Stroke-9" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
62
|
+
<path d="M180.814427,180.646154 C182.003186,180.593287 182.808338,180.127553 183.27794,179.222099 C183.637096,178.528952 183.653958,177.846714 183.653958,177.840001 C183.65986,177.374267 184.040937,176.999162 184.508852,177 C184.975925,177.000841 185.354473,177.375106 185.360374,177.839162 C185.365433,178.116924 185.49274,180.528672 188.188945,180.66042 C188.644214,180.683077 189.000842,181.056504 189,181.50965 C188.999155,181.963636 188.640842,182.336224 188.185573,182.356363 C187.017891,182.40923 186.220327,182.85986 185.748196,183.734265 C185.367119,184.437482 185.346042,185.160838 185.346042,185.16839 C185.335082,185.62909 184.955691,186.000838 184.491991,186 L184.486089,186 C184.020703,185.995803 183.643841,185.624055 183.640469,185.159999 C183.63541,184.889789 183.510633,182.473846 180.811898,182.342098 C180.356629,182.320279 179.999158,181.946853 180,181.492867 C180.000845,181.03972 180.360001,180.666294 180.814427,180.646154 Z" id="Stroke-415" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
63
|
+
<path d="M202,14.4971375 C201.99857,15.3248204 202.668896,15.9978497 203.497493,16 C204.325375,16.0014297 204.998565,15.3305483 205,14.5028654 C205.00143,13.6744665 204.331104,13.0014371 203.503223,13 C202.673909,12.9978572 202.001435,13.6687386 202,14.4971375 Z" id="Stroke-419" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
64
|
+
<path d="M151.733547,6.07732562 C149.884876,5.98861776 148.631766,5.21200562 147.902027,3.70313526 C147.343346,2.54825944 147.315882,1.41095782 147.315882,1.40007855 C147.307251,0.623466409 146.714829,-0.000836026166 145.986659,0 C145.260844,0.00167457344 144.671561,0.625140142 144.662145,1.39840482 C144.654298,1.86286575 144.457347,5.88233571 140.262527,6.10075788 C139.554759,6.13758001 138.999216,6.76104558 139,7.51757292 C139.00157,8.27242654 139.559467,8.89421837 140.267235,8.92769303 C142.083735,9.01556402 143.324291,9.7662333 144.060306,11.2232179 C144.651944,12.395668 144.684115,13.6007558 144.6849,13.6133088 C144.700593,14.383226 145.292231,15.0016703 146.013338,15 L146.021185,15 C146.747,14.9933017 147.333145,14.3723467 147.337853,13.599082 C147.3457,13.1488478 147.539512,9.1235198 151.738255,8.90426077 C152.446023,8.86743864 153.001566,8.24397308 153,7.48828259 C152.998427,6.73259211 152.44053,6.11163714 151.733547,6.07732562 Z" id="Stroke-423" stroke="#E0E5F8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
65
|
+
<path d="M22.1855685,198.646154 C20.9976538,198.593287 20.1916591,198.127553 19.7229007,197.222099 C19.3637441,196.529791 19.3460392,195.846714 19.3460392,195.840001 C19.3409807,195.374267 18.9599037,194.999162 18.4911453,195 C18.0249162,195.000841 17.6455254,195.375945 17.6396238,195.839162 C17.6354083,196.117763 17.5081016,198.528672 14.8118978,198.661259 C14.3566288,198.683077 13.9991584,199.056504 14,199.510489 C14.0008446,199.963636 14.3600012,200.337063 14.8152701,200.357203 C15.9829507,200.40923 16.7796713,200.85986 17.2526452,201.735104 C17.6337221,202.438321 17.6539563,203.160838 17.6539563,203.16839 C17.6649165,203.629929 18.0451504,204.000838 18.5088502,204 L18.5139088,204 C18.9792948,203.996642 19.3569994,203.624055 19.3595287,203.159999 C19.3654303,202.889789 19.4902077,200.473846 22.1889409,200.342098 C22.6442098,200.320279 23.0016802,199.946853 23,199.492867 C22.999151,199.03972 22.6408374,198.666294 22.1855685,198.646154 Z" id="Stroke-429-Copy" stroke="#E0E5F8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
66
|
+
<path d="M155.456283,88.4305908 C154.66419,88.3949284 154.126842,88.0842695 153.813985,87.4811791 C153.575163,87.0191533 153.563222,86.5642599 153.563222,86.5595049 C153.560038,86.248846 153.306091,85.9992094 152.993234,86 C152.682766,86.0007944 152.429615,86.2496385 152.425635,86.5595049 C152.42245,86.7449492 152.338067,88.3521335 150.540535,88.4401007 C150.237232,88.4543657 149.999206,88.7047948 150,89.0067362 C150,89.3086776 150.238824,89.5575218 150.542923,89.5702017 C151.321482,89.6050716 151.853259,89.9062205 152.167707,90.4894985 C152.421654,90.9578643 152.435188,91.4404951 152.435984,91.4452501 C152.443148,91.752739 152.696299,92.0007906 153.005175,92 L153.009156,92 C153.318828,91.9976206 153.570387,91.7487765 153.572775,91.4397026 C153.576755,91.2590132 153.658751,89.6486589 155.458671,89.5614843 C155.761974,89.5464268 156,89.2975827 156,88.9948488 C155.999204,88.6929073 155.759586,88.4448557 155.456283,88.4305908 Z" id="Stroke-431" stroke="#E0E5F8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
67
|
+
<path d="M184,52.9996098 C184,55.2089552 182.208955,57 179.99961,57 C177.791045,57 176,55.2089552 176,52.9996098 C176,50.7910448 177.791045,49 179.99961,49 C182.208955,49 184,50.7910448 184,52.9996098 Z" id="Stroke-11" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
68
|
+
|
|
69
|
+
</g>
|
|
70
|
+
</g>
|
|
71
|
+
</g>
|
|
72
|
+
</svg>
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
export default [
|
|
2
2
|
{
|
|
3
3
|
title: "Heroku Dev Center",
|
|
4
|
-
body:
|
|
5
|
-
"Learn about building, deploying, and managing your apps on Heroku.",
|
|
4
|
+
body: "Learn about building, deploying, and managing your apps on Heroku.",
|
|
6
5
|
href: "https://devcenter.heroku.com/",
|
|
7
6
|
brand: "platform",
|
|
8
7
|
links: [
|
|
@@ -25,10 +24,8 @@ export default [
|
|
|
25
24
|
},
|
|
26
25
|
{
|
|
27
26
|
title: "Lightning Web Components",
|
|
28
|
-
body:
|
|
29
|
-
|
|
30
|
-
href:
|
|
31
|
-
"https://developer.salesforce.com/docs/component-library/overview/",
|
|
27
|
+
body: "Learn about building, deploying, and managing your apps on Heroku.",
|
|
28
|
+
href: "https://developer.salesforce.com/docs/component-library/overview/",
|
|
32
29
|
brand: "platform",
|
|
33
30
|
links: [
|
|
34
31
|
{
|
|
@@ -50,8 +47,7 @@ export default [
|
|
|
50
47
|
},
|
|
51
48
|
{
|
|
52
49
|
title: "Lightning Design System",
|
|
53
|
-
body:
|
|
54
|
-
"Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
50
|
+
body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
55
51
|
href: "https://www.lightningdesignsystem.com/",
|
|
56
52
|
brand: "platform",
|
|
57
53
|
links: [
|
|
@@ -74,427 +70,361 @@ export default [
|
|
|
74
70
|
},
|
|
75
71
|
{
|
|
76
72
|
title: "Commerce Cloud APIs",
|
|
77
|
-
body:
|
|
78
|
-
|
|
79
|
-
href: "https://developer.commercecloud.com/",
|
|
73
|
+
body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
|
|
74
|
+
href: "https://developer.commercecloud.com/s/",
|
|
80
75
|
brand: "commerce"
|
|
81
76
|
},
|
|
82
77
|
{
|
|
83
78
|
title: "MuleSoft Documentation",
|
|
84
|
-
body:
|
|
85
|
-
"Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
79
|
+
body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
86
80
|
href: "https://docs.mulesoft.com/",
|
|
87
81
|
brand: "integration"
|
|
88
82
|
},
|
|
89
83
|
{
|
|
90
84
|
title: "Salesforce Extensions for VS Code",
|
|
91
|
-
body:
|
|
92
|
-
"Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
85
|
+
body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
93
86
|
href: "https://developer.salesforce.com/tools/vscode",
|
|
94
87
|
brand: "platform"
|
|
95
88
|
},
|
|
96
89
|
{
|
|
97
90
|
title: "Quip Developer Documentation",
|
|
98
|
-
body:
|
|
99
|
-
"Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
91
|
+
body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
100
92
|
href: "https://quip.com/dev",
|
|
101
93
|
brand: "collaboration"
|
|
102
94
|
},
|
|
103
95
|
{
|
|
104
96
|
title: "Tableau Help",
|
|
105
|
-
body:
|
|
106
|
-
"Tableau brings together data from anywhere to empower your people everywhere.",
|
|
97
|
+
body: "Tableau brings together data from anywhere to empower your people everywhere.",
|
|
107
98
|
href: "https://help.tableau.com/",
|
|
108
99
|
brand: "analytics"
|
|
109
100
|
},
|
|
110
101
|
{
|
|
111
102
|
title: "Einstein Voice & Vision",
|
|
112
|
-
body:
|
|
113
|
-
"Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
103
|
+
body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
114
104
|
href: "https://metamind.readme.io",
|
|
115
105
|
brand: "platform"
|
|
116
106
|
},
|
|
117
107
|
{
|
|
118
108
|
title: "Lightning Web Components",
|
|
119
|
-
body:
|
|
120
|
-
|
|
121
|
-
href:
|
|
122
|
-
"https://developer.salesforce.com/docs/component-library/overview/",
|
|
109
|
+
body: "Learn about building, deploying, and managing your apps on Heroku.",
|
|
110
|
+
href: "https://developer.salesforce.com/docs/component-library/overview/",
|
|
123
111
|
brand: "platform"
|
|
124
112
|
},
|
|
125
113
|
{
|
|
126
114
|
title: "Lightning Design System",
|
|
127
|
-
body:
|
|
128
|
-
"Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
115
|
+
body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
129
116
|
href: "https://www.lightningdesignsystem.com/",
|
|
130
117
|
brand: "platform"
|
|
131
118
|
},
|
|
132
119
|
{
|
|
133
120
|
title: "Commerce Cloud APIs",
|
|
134
|
-
body:
|
|
135
|
-
|
|
136
|
-
href: "https://developer.commercecloud.com/",
|
|
121
|
+
body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
|
|
122
|
+
href: "https://developer.commercecloud.com/s/",
|
|
137
123
|
brand: "commerce"
|
|
138
124
|
},
|
|
139
125
|
{
|
|
140
126
|
title: "MuleSoft Documentation",
|
|
141
|
-
body:
|
|
142
|
-
"Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
127
|
+
body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
143
128
|
href: "https://docs.mulesoft.com/",
|
|
144
129
|
brand: "integration"
|
|
145
130
|
},
|
|
146
131
|
{
|
|
147
132
|
title: "Salesforce Extensions for VS Code",
|
|
148
|
-
body:
|
|
149
|
-
"Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
133
|
+
body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
150
134
|
href: "https://developer.salesforce.com/tools/vscode",
|
|
151
135
|
brand: "platform"
|
|
152
136
|
},
|
|
153
137
|
{
|
|
154
138
|
title: "Quip Developer Documentation",
|
|
155
|
-
body:
|
|
156
|
-
"Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
139
|
+
body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
157
140
|
href: "https://quip.com/dev",
|
|
158
141
|
brand: "collaboration"
|
|
159
142
|
},
|
|
160
143
|
{
|
|
161
144
|
title: "Tableau Help",
|
|
162
|
-
body:
|
|
163
|
-
"Tableau brings together data from anywhere to empower your people everywhere.",
|
|
145
|
+
body: "Tableau brings together data from anywhere to empower your people everywhere.",
|
|
164
146
|
href: "https://help.tableau.com/",
|
|
165
147
|
brand: "analytics"
|
|
166
148
|
},
|
|
167
149
|
{
|
|
168
150
|
title: "Einstein Voice & Vision",
|
|
169
|
-
body:
|
|
170
|
-
"Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
151
|
+
body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
171
152
|
href: "https://metamind.readme.io",
|
|
172
153
|
brand: "platform"
|
|
173
154
|
},
|
|
174
155
|
{
|
|
175
156
|
title: "Lightning Web Components",
|
|
176
|
-
body:
|
|
177
|
-
|
|
178
|
-
href:
|
|
179
|
-
"https://developer.salesforce.com/docs/component-library/overview/",
|
|
157
|
+
body: "Learn about building, deploying, and managing your apps on Heroku.",
|
|
158
|
+
href: "https://developer.salesforce.com/docs/component-library/overview/",
|
|
180
159
|
brand: "platform"
|
|
181
160
|
},
|
|
182
161
|
{
|
|
183
162
|
title: "Lightning Design System",
|
|
184
|
-
body:
|
|
185
|
-
"Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
163
|
+
body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
186
164
|
href: "https://www.lightningdesignsystem.com/",
|
|
187
165
|
brand: "platform"
|
|
188
166
|
},
|
|
189
167
|
{
|
|
190
168
|
title: "Commerce Cloud APIs",
|
|
191
|
-
body:
|
|
192
|
-
|
|
193
|
-
href: "https://developer.commercecloud.com/",
|
|
169
|
+
body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
|
|
170
|
+
href: "https://developer.commercecloud.com/s/",
|
|
194
171
|
brand: "commerce"
|
|
195
172
|
},
|
|
196
173
|
{
|
|
197
174
|
title: "MuleSoft Documentation",
|
|
198
|
-
body:
|
|
199
|
-
"Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
175
|
+
body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
200
176
|
href: "https://docs.mulesoft.com/",
|
|
201
177
|
brand: "integration"
|
|
202
178
|
},
|
|
203
179
|
{
|
|
204
180
|
title: "Salesforce Extensions for VS Code",
|
|
205
|
-
body:
|
|
206
|
-
"Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
181
|
+
body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
207
182
|
href: "https://developer.salesforce.com/tools/vscode",
|
|
208
183
|
brand: "platform"
|
|
209
184
|
},
|
|
210
185
|
{
|
|
211
186
|
title: "Quip Developer Documentation",
|
|
212
|
-
body:
|
|
213
|
-
"Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
187
|
+
body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
214
188
|
href: "https://quip.com/dev",
|
|
215
189
|
brand: "collaboration"
|
|
216
190
|
},
|
|
217
191
|
{
|
|
218
192
|
title: "Tableau Help",
|
|
219
|
-
body:
|
|
220
|
-
"Tableau brings together data from anywhere to empower your people everywhere.",
|
|
193
|
+
body: "Tableau brings together data from anywhere to empower your people everywhere.",
|
|
221
194
|
href: "https://help.tableau.com/",
|
|
222
195
|
brand: "analytics"
|
|
223
196
|
},
|
|
224
197
|
{
|
|
225
198
|
title: "Einstein Voice & Vision",
|
|
226
|
-
body:
|
|
227
|
-
"Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
199
|
+
body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
228
200
|
href: "https://metamind.readme.io",
|
|
229
201
|
brand: "platform"
|
|
230
202
|
},
|
|
231
203
|
{
|
|
232
204
|
title: "Commerce Cloud APIs",
|
|
233
|
-
body:
|
|
234
|
-
|
|
235
|
-
href: "https://developer.commercecloud.com/",
|
|
205
|
+
body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
|
|
206
|
+
href: "https://developer.commercecloud.com/s/",
|
|
236
207
|
brand: "commerce"
|
|
237
208
|
},
|
|
238
209
|
{
|
|
239
210
|
title: "MuleSoft Documentation",
|
|
240
|
-
body:
|
|
241
|
-
"Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
211
|
+
body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
242
212
|
href: "https://docs.mulesoft.com/",
|
|
243
213
|
brand: "integration"
|
|
244
214
|
},
|
|
245
215
|
{
|
|
246
216
|
title: "Salesforce Extensions for VS Code",
|
|
247
|
-
body:
|
|
248
|
-
"Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
217
|
+
body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
249
218
|
href: "https://developer.salesforce.com/tools/vscode",
|
|
250
219
|
brand: "platform"
|
|
251
220
|
},
|
|
252
221
|
{
|
|
253
222
|
title: "Quip Developer Documentation",
|
|
254
|
-
body:
|
|
255
|
-
"Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
223
|
+
body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
256
224
|
href: "https://quip.com/dev",
|
|
257
225
|
brand: "collaboration"
|
|
258
226
|
},
|
|
259
227
|
{
|
|
260
228
|
title: "Tableau Help",
|
|
261
|
-
body:
|
|
262
|
-
"Tableau brings together data from anywhere to empower your people everywhere.",
|
|
229
|
+
body: "Tableau brings together data from anywhere to empower your people everywhere.",
|
|
263
230
|
href: "https://help.tableau.com/",
|
|
264
231
|
brand: "analytics"
|
|
265
232
|
},
|
|
266
233
|
{
|
|
267
234
|
title: "Einstein Voice & Vision",
|
|
268
|
-
body:
|
|
269
|
-
"Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
235
|
+
body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
270
236
|
href: "https://metamind.readme.io",
|
|
271
237
|
brand: "platform"
|
|
272
238
|
},
|
|
273
239
|
{
|
|
274
240
|
title: "Lightning Web Components",
|
|
275
|
-
body:
|
|
276
|
-
|
|
277
|
-
href:
|
|
278
|
-
"https://developer.salesforce.com/docs/component-library/overview/",
|
|
241
|
+
body: "Learn about building, deploying, and managing your apps on Heroku.",
|
|
242
|
+
href: "https://developer.salesforce.com/docs/component-library/overview/",
|
|
279
243
|
brand: "platform"
|
|
280
244
|
},
|
|
281
245
|
{
|
|
282
246
|
title: "Lightning Design System",
|
|
283
|
-
body:
|
|
284
|
-
"Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
247
|
+
body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
285
248
|
href: "https://www.lightningdesignsystem.com/",
|
|
286
249
|
brand: "platform"
|
|
287
250
|
},
|
|
288
251
|
{
|
|
289
252
|
title: "Commerce Cloud APIs",
|
|
290
|
-
body:
|
|
291
|
-
|
|
292
|
-
href: "https://developer.commercecloud.com/",
|
|
253
|
+
body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
|
|
254
|
+
href: "https://developer.commercecloud.com/s/",
|
|
293
255
|
brand: "commerce"
|
|
294
256
|
},
|
|
295
257
|
{
|
|
296
258
|
title: "MuleSoft Documentation",
|
|
297
|
-
body:
|
|
298
|
-
"Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
259
|
+
body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
299
260
|
href: "https://docs.mulesoft.com/",
|
|
300
261
|
brand: "integration"
|
|
301
262
|
},
|
|
302
263
|
{
|
|
303
264
|
title: "Salesforce Extensions for VS Code",
|
|
304
|
-
body:
|
|
305
|
-
"Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
265
|
+
body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
306
266
|
href: "https://developer.salesforce.com/tools/vscode",
|
|
307
267
|
brand: "platform"
|
|
308
268
|
},
|
|
309
269
|
{
|
|
310
270
|
title: "Quip Developer Documentation",
|
|
311
|
-
body:
|
|
312
|
-
"Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
271
|
+
body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
313
272
|
href: "https://quip.com/dev",
|
|
314
273
|
brand: "collaboration"
|
|
315
274
|
},
|
|
316
275
|
{
|
|
317
276
|
title: "Tableau Help",
|
|
318
|
-
body:
|
|
319
|
-
"Tableau brings together data from anywhere to empower your people everywhere.",
|
|
277
|
+
body: "Tableau brings together data from anywhere to empower your people everywhere.",
|
|
320
278
|
href: "https://help.tableau.com/",
|
|
321
279
|
brand: "analytics"
|
|
322
280
|
},
|
|
323
281
|
{
|
|
324
282
|
title: "Einstein Voice & Vision",
|
|
325
|
-
body:
|
|
326
|
-
"Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
283
|
+
body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
327
284
|
href: "https://metamind.readme.io",
|
|
328
285
|
brand: "platform"
|
|
329
286
|
},
|
|
330
287
|
{
|
|
331
288
|
title: "Lightning Web Components",
|
|
332
|
-
body:
|
|
333
|
-
|
|
334
|
-
href:
|
|
335
|
-
"https://developer.salesforce.com/docs/component-library/overview/",
|
|
289
|
+
body: "Learn about building, deploying, and managing your apps on Heroku.",
|
|
290
|
+
href: "https://developer.salesforce.com/docs/component-library/overview/",
|
|
336
291
|
brand: "platform"
|
|
337
292
|
},
|
|
338
293
|
{
|
|
339
294
|
title: "Lightning Design System",
|
|
340
|
-
body:
|
|
341
|
-
"Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
295
|
+
body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
342
296
|
href: "https://www.lightningdesignsystem.com/",
|
|
343
297
|
brand: "platform"
|
|
344
298
|
},
|
|
345
299
|
{
|
|
346
300
|
title: "Commerce Cloud APIs",
|
|
347
|
-
body:
|
|
348
|
-
|
|
349
|
-
href: "https://developer.commercecloud.com/",
|
|
301
|
+
body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
|
|
302
|
+
href: "https://developer.commercecloud.com/s/",
|
|
350
303
|
brand: "commerce"
|
|
351
304
|
},
|
|
352
305
|
{
|
|
353
306
|
title: "MuleSoft Documentation",
|
|
354
|
-
body:
|
|
355
|
-
"Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
307
|
+
body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
356
308
|
href: "https://docs.mulesoft.com/",
|
|
357
309
|
brand: "integration"
|
|
358
310
|
},
|
|
359
311
|
{
|
|
360
312
|
title: "Salesforce Extensions for VS Code",
|
|
361
|
-
body:
|
|
362
|
-
"Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
313
|
+
body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
363
314
|
href: "https://developer.salesforce.com/tools/vscode",
|
|
364
315
|
brand: "platform"
|
|
365
316
|
},
|
|
366
317
|
{
|
|
367
318
|
title: "Quip Developer Documentation",
|
|
368
|
-
body:
|
|
369
|
-
"Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
319
|
+
body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
370
320
|
href: "https://quip.com/dev",
|
|
371
321
|
brand: "collaboration"
|
|
372
322
|
},
|
|
373
323
|
{
|
|
374
324
|
title: "Tableau Help",
|
|
375
|
-
body:
|
|
376
|
-
"Tableau brings together data from anywhere to empower your people everywhere.",
|
|
325
|
+
body: "Tableau brings together data from anywhere to empower your people everywhere.",
|
|
377
326
|
href: "https://help.tableau.com/",
|
|
378
327
|
brand: "analytics"
|
|
379
328
|
},
|
|
380
329
|
{
|
|
381
330
|
title: "Einstein Voice & Vision",
|
|
382
|
-
body:
|
|
383
|
-
"Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
331
|
+
body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
384
332
|
href: "https://metamind.readme.io",
|
|
385
333
|
brand: "platform"
|
|
386
334
|
},
|
|
387
335
|
{
|
|
388
336
|
title: "Commerce Cloud APIs",
|
|
389
|
-
body:
|
|
390
|
-
|
|
391
|
-
href: "https://developer.commercecloud.com/",
|
|
337
|
+
body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
|
|
338
|
+
href: "https://developer.commercecloud.com/s/",
|
|
392
339
|
brand: "commerce"
|
|
393
340
|
},
|
|
394
341
|
{
|
|
395
342
|
title: "MuleSoft Documentation",
|
|
396
|
-
body:
|
|
397
|
-
"Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
343
|
+
body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
398
344
|
href: "https://docs.mulesoft.com/",
|
|
399
345
|
brand: "integration"
|
|
400
346
|
},
|
|
401
347
|
{
|
|
402
348
|
title: "Salesforce Extensions for VS Code",
|
|
403
|
-
body:
|
|
404
|
-
"Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
349
|
+
body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
405
350
|
href: "https://developer.salesforce.com/tools/vscode",
|
|
406
351
|
brand: "platform"
|
|
407
352
|
},
|
|
408
353
|
{
|
|
409
354
|
title: "Quip Developer Documentation",
|
|
410
|
-
body:
|
|
411
|
-
"Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
355
|
+
body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
412
356
|
href: "https://quip.com/dev",
|
|
413
357
|
brand: "collaboration"
|
|
414
358
|
},
|
|
415
359
|
{
|
|
416
360
|
title: "Tableau Help",
|
|
417
|
-
body:
|
|
418
|
-
"Tableau brings together data from anywhere to empower your people everywhere.",
|
|
361
|
+
body: "Tableau brings together data from anywhere to empower your people everywhere.",
|
|
419
362
|
href: "https://help.tableau.com/",
|
|
420
363
|
brand: "analytics"
|
|
421
364
|
},
|
|
422
365
|
{
|
|
423
366
|
title: "Einstein Voice & Vision",
|
|
424
|
-
body:
|
|
425
|
-
"Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
367
|
+
body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
426
368
|
href: "https://metamind.readme.io",
|
|
427
369
|
brand: "platform"
|
|
428
370
|
},
|
|
429
371
|
{
|
|
430
372
|
title: "Lightning Web Components",
|
|
431
|
-
body:
|
|
432
|
-
|
|
433
|
-
href:
|
|
434
|
-
"https://developer.salesforce.com/docs/component-library/overview/",
|
|
373
|
+
body: "Learn about building, deploying, and managing your apps on Heroku.",
|
|
374
|
+
href: "https://developer.salesforce.com/docs/component-library/overview/",
|
|
435
375
|
brand: "platform"
|
|
436
376
|
},
|
|
437
377
|
{
|
|
438
378
|
title: "Lightning Design System",
|
|
439
|
-
body:
|
|
440
|
-
"Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
379
|
+
body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
441
380
|
href: "https://www.lightningdesignsystem.com/",
|
|
442
381
|
brand: "platform"
|
|
443
382
|
},
|
|
444
383
|
{
|
|
445
384
|
title: "Commerce Cloud APIs",
|
|
446
|
-
body:
|
|
447
|
-
|
|
448
|
-
href: "https://developer.commercecloud.com/",
|
|
385
|
+
body: "Unlock and integrate data from any system to deliver critical, time-sensitive projects with MuleSoft.",
|
|
386
|
+
href: "https://developer.commercecloud.com/s/",
|
|
449
387
|
brand: "commerce"
|
|
450
388
|
},
|
|
451
389
|
{
|
|
452
390
|
title: "MuleSoft Documentation",
|
|
453
|
-
body:
|
|
454
|
-
"Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
391
|
+
body: "Explore documentation, APIs, resources, and discussion forums to Develop personalized commerce experiences on a fast, flexible platform.",
|
|
455
392
|
href: "https://docs.mulesoft.com/",
|
|
456
393
|
brand: "integration"
|
|
457
394
|
},
|
|
458
395
|
{
|
|
459
396
|
title: "Salesforce Extensions for VS Code",
|
|
460
|
-
body:
|
|
461
|
-
"Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
397
|
+
body: "Use Salesforce Extensions for Visual Studio Code to optimize building and debugging code on the Salesforce Platform. From the VS Studio code editor, work seamlessly with scratch orgs, sandboxes, and DE orgs, and code intelligently with Apex, Lightning components, and Visualforce.",
|
|
462
398
|
href: "https://developer.salesforce.com/tools/vscode",
|
|
463
399
|
brand: "platform"
|
|
464
400
|
},
|
|
465
401
|
{
|
|
466
402
|
title: "Quip Developer Documentation",
|
|
467
|
-
body:
|
|
468
|
-
"Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
403
|
+
body: "Make more intelligent, data-driven decisions that guide your business forward with Quip.",
|
|
469
404
|
href: "https://quip.com/dev",
|
|
470
405
|
brand: "collaboration"
|
|
471
406
|
},
|
|
472
407
|
{
|
|
473
408
|
title: "Tableau Help",
|
|
474
|
-
body:
|
|
475
|
-
"Tableau brings together data from anywhere to empower your people everywhere.",
|
|
409
|
+
body: "Tableau brings together data from anywhere to empower your people everywhere.",
|
|
476
410
|
href: "https://help.tableau.com/",
|
|
477
411
|
brand: "analytics"
|
|
478
412
|
},
|
|
479
413
|
{
|
|
480
414
|
title: "Einstein Voice & Vision",
|
|
481
|
-
body:
|
|
482
|
-
"Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
415
|
+
body: "Einstein Platform Services allows you to seamlessly integrate custom deep learning models into your CRM workflows.",
|
|
483
416
|
href: "https://metamind.readme.io",
|
|
484
417
|
brand: "platform"
|
|
485
418
|
},
|
|
486
419
|
{
|
|
487
420
|
title: "Lightning Web Components",
|
|
488
|
-
body:
|
|
489
|
-
|
|
490
|
-
href:
|
|
491
|
-
"https://developer.salesforce.com/docs/component-library/overview/",
|
|
421
|
+
body: "Learn about building, deploying, and managing your apps on Heroku.",
|
|
422
|
+
href: "https://developer.salesforce.com/docs/component-library/overview/",
|
|
492
423
|
brand: "platform"
|
|
493
424
|
},
|
|
494
425
|
{
|
|
495
426
|
title: "Lightning Design System",
|
|
496
|
-
body:
|
|
497
|
-
"Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
427
|
+
body: "Create the World's Best Enterprise App Experiences using Salesforce Lightning Design System.",
|
|
498
428
|
href: "https://www.lightningdesignsystem.com/",
|
|
499
429
|
brand: "platform"
|
|
500
430
|
}
|
|
@@ -8,15 +8,12 @@ const render = createRenderComponent(TAG, EmptyState);
|
|
|
8
8
|
describe(TAG, () => {
|
|
9
9
|
it("renders", () => {
|
|
10
10
|
const element = render(mockProps);
|
|
11
|
-
const container: HTMLElement =
|
|
12
|
-
".container"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const renderedSubTitle: HTMLElement = element.shadowRoot.querySelector(
|
|
18
|
-
"p"
|
|
19
|
-
);
|
|
11
|
+
const container: HTMLElement =
|
|
12
|
+
element.shadowRoot.querySelector(".container");
|
|
13
|
+
const renderedTitle: HTMLElement =
|
|
14
|
+
element.shadowRoot.querySelector("h3");
|
|
15
|
+
const renderedSubTitle: HTMLElement =
|
|
16
|
+
element.shadowRoot.querySelector("p");
|
|
20
17
|
const image: HTMLImageElement = element.shadowRoot.querySelector("img");
|
|
21
18
|
|
|
22
19
|
expect(renderedTitle).not.toBeNull();
|
|
@@ -29,4 +26,27 @@ describe(TAG, () => {
|
|
|
29
26
|
|
|
30
27
|
return expect(element).toBeAccessible();
|
|
31
28
|
});
|
|
29
|
+
|
|
30
|
+
it("renders as the large variant by default", () => {
|
|
31
|
+
const element = render(mockProps);
|
|
32
|
+
const container: HTMLElement =
|
|
33
|
+
element.shadowRoot.querySelector(".container");
|
|
34
|
+
const image: HTMLImageElement = element.shadowRoot.querySelector("img");
|
|
35
|
+
expect(container.classList).toContain("size-large");
|
|
36
|
+
expect(container.classList).toHaveLength(2);
|
|
37
|
+
expect(image.src).not.toContain("-small.svg");
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
it("renders as the small variant when specified", () => {
|
|
41
|
+
const element = render({
|
|
42
|
+
...mockProps,
|
|
43
|
+
size: "small"
|
|
44
|
+
});
|
|
45
|
+
const container: HTMLElement =
|
|
46
|
+
element.shadowRoot.querySelector(".container");
|
|
47
|
+
const image: HTMLImageElement = element.shadowRoot.querySelector("img");
|
|
48
|
+
expect(container.classList).toContain("size-small");
|
|
49
|
+
expect(container.classList).toHaveLength(2);
|
|
50
|
+
expect(image.src).toContain("-small.svg");
|
|
51
|
+
});
|
|
32
52
|
});
|
|
@@ -24,6 +24,11 @@ img {
|
|
|
24
24
|
min-width: var(--dx-c-empty-state-image-width);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
.size-small img {
|
|
28
|
+
width: calc(100% - 40px);
|
|
29
|
+
min-width: calc(100% - 40px);
|
|
30
|
+
}
|
|
31
|
+
|
|
27
32
|
.text {
|
|
28
33
|
position: absolute;
|
|
29
34
|
top: 35%;
|
|
@@ -38,10 +43,19 @@ img {
|
|
|
38
43
|
padding: 0 var(--dx-g-spacing-xl);
|
|
39
44
|
}
|
|
40
45
|
|
|
46
|
+
.size-small .text {
|
|
47
|
+
top: 40%;
|
|
48
|
+
}
|
|
49
|
+
|
|
41
50
|
.title {
|
|
42
51
|
font-size: var(--dx-g-text-2xl);
|
|
43
52
|
}
|
|
44
53
|
|
|
54
|
+
.size-small .title {
|
|
55
|
+
font-size: var(--dx-g-text-base);
|
|
56
|
+
white-space: nowrap;
|
|
57
|
+
}
|
|
58
|
+
|
|
45
59
|
.subtitle {
|
|
46
60
|
padding-top: var(--dx-g-spacing-sm);
|
|
47
61
|
color: var(--dx-g-text-heading-color);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class=
|
|
3
|
-
<img src=
|
|
2
|
+
<div class={containerClassName} part="container">
|
|
3
|
+
<img src={imageAssetPath} alt="Mountains" />
|
|
4
4
|
<div class="text">
|
|
5
5
|
<h3 class="title dx-text-heading-3">{title}</h3>
|
|
6
6
|
<p class="subtitle dx-text-body-2" if:true={subtitle}>{subtitle}</p>
|
|
@@ -20,6 +20,9 @@ const createStyles = () => html`
|
|
|
20
20
|
width: 300px;
|
|
21
21
|
display: block;
|
|
22
22
|
}
|
|
23
|
+
.small-container {
|
|
24
|
+
width: 250px;
|
|
25
|
+
}
|
|
23
26
|
</style>
|
|
24
27
|
`;
|
|
25
28
|
|
|
@@ -34,4 +37,9 @@ export const Base = () => html`
|
|
|
34
37
|
|
|
35
38
|
${title("No subtitle and customized with style hooks")}
|
|
36
39
|
<dx-empty-state id="styled" title="No Results"></dx-empty-state>
|
|
40
|
+
|
|
41
|
+
${title("Small variant")}
|
|
42
|
+
<div class="small-container">
|
|
43
|
+
<dx-empty-state title="No Results" size="small"></dx-empty-state>
|
|
44
|
+
</div>
|
|
37
45
|
`;
|
|
@@ -1,6 +1,20 @@
|
|
|
1
1
|
import { LightningElement, api } from "lwc";
|
|
2
|
+
import { EmptyStateSize } from "typings/custom";
|
|
2
3
|
|
|
3
4
|
export default class EmptyState extends LightningElement {
|
|
4
5
|
@api title: string = "";
|
|
5
6
|
@api subtitle?: string | null = null;
|
|
7
|
+
@api size?: EmptyStateSize = "large";
|
|
8
|
+
|
|
9
|
+
get containerClassName() {
|
|
10
|
+
return `container ${
|
|
11
|
+
!this.size || this.size === "large" ? "size-large" : "size-small"
|
|
12
|
+
}`;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
get imageAssetPath() {
|
|
16
|
+
return `/assets/svg/docs-empty-state${
|
|
17
|
+
this.size === "small" ? "-small" : ""
|
|
18
|
+
}.svg`;
|
|
19
|
+
}
|
|
6
20
|
}
|
|
@@ -45,7 +45,7 @@ export const generalLinksRaw = [
|
|
|
45
45
|
label: "Community",
|
|
46
46
|
options: [
|
|
47
47
|
{
|
|
48
|
-
href: "https://
|
|
48
|
+
href: "https://trailhead.salesforce.com/trailblazer-community/feed",
|
|
49
49
|
label: "Trailblazer Community"
|
|
50
50
|
},
|
|
51
51
|
{
|
|
@@ -90,13 +90,11 @@ export const intellectualHref =
|
|
|
90
90
|
export const termsLinks = [
|
|
91
91
|
{ href: privacyHref, label: "Privacy Statement" },
|
|
92
92
|
{
|
|
93
|
-
href:
|
|
94
|
-
"https://trailblazer.me/resource/documents/documents/pdf/TermsOfUse_en_US.pdf",
|
|
93
|
+
href: "https://trailblazer.me/resource/documents/documents/pdf/TermsOfUse_en_US.pdf",
|
|
95
94
|
label: "Terms of Use"
|
|
96
95
|
},
|
|
97
96
|
{
|
|
98
|
-
href:
|
|
99
|
-
"https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
|
|
97
|
+
href: "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
|
|
100
98
|
label: "Use of Cookies"
|
|
101
99
|
},
|
|
102
100
|
{ href: "https://trust.salesforce.com/en/", label: "Trust" }
|
|
@@ -11,9 +11,7 @@ describe(TAG, () => {
|
|
|
11
11
|
const element = render({ navItems });
|
|
12
12
|
|
|
13
13
|
const items = element.shadowRoot.querySelectorAll(".nav-list-item");
|
|
14
|
-
const dropdownItems = element.shadowRoot.querySelectorAll(
|
|
15
|
-
"dx-header-nav-option"
|
|
16
|
-
);
|
|
14
|
+
const dropdownItems = element.shadowRoot.querySelectorAll("dx-tab");
|
|
17
15
|
|
|
18
16
|
// items with more options render something different on mobile and desktop whose display is toggled by `display: none;`
|
|
19
17
|
const expectedItemLength =
|
|
@@ -34,7 +32,7 @@ describe(TAG, () => {
|
|
|
34
32
|
const mockOpenNav = jest.fn();
|
|
35
33
|
element.addEventListener("requestopennavmenu", mockOpenNav);
|
|
36
34
|
const navOption: HTMLElement = element.shadowRoot.querySelector(
|
|
37
|
-
"dx-
|
|
35
|
+
"dx-tab.nav-list-item-nav-menu"
|
|
38
36
|
);
|
|
39
37
|
expect(navOption).not.toBeNull();
|
|
40
38
|
navOption.click();
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
<ul class="nav-list">
|
|
4
4
|
<template for:each={navItems} for:item="navItem">
|
|
5
5
|
<li key={navItem.id}>
|
|
6
|
-
<dx-
|
|
6
|
+
<dx-tab
|
|
7
7
|
if:false={navItem.options}
|
|
8
8
|
is-active={navItem.isActive}
|
|
9
9
|
label={navItem.label}
|
|
10
10
|
href={navItem.link.href}
|
|
11
11
|
variant={variant}
|
|
12
|
-
></dx-
|
|
12
|
+
></dx-tab>
|
|
13
13
|
|
|
14
14
|
<!-- DESKTOP "MORE CONTENT" NAV ITEM -->
|
|
15
15
|
<dx-dropdown
|
|
@@ -23,21 +23,23 @@
|
|
|
23
23
|
value={pathname}
|
|
24
24
|
value-path="link.href"
|
|
25
25
|
>
|
|
26
|
-
<dx-
|
|
26
|
+
<dx-tab
|
|
27
27
|
label={navItem.label}
|
|
28
28
|
variant={variant}
|
|
29
|
-
|
|
29
|
+
use-icon
|
|
30
|
+
></dx-tab>
|
|
30
31
|
</dx-dropdown>
|
|
31
32
|
|
|
32
33
|
<!-- MOBILE "MORE CONTENT" NAV ITEM -->
|
|
33
|
-
<dx-
|
|
34
|
+
<dx-tab
|
|
34
35
|
if:true={navItem.options}
|
|
35
36
|
class="nav-list-item-nav-menu"
|
|
36
37
|
data-id={navItem.id}
|
|
37
38
|
label={navItem.label}
|
|
39
|
+
use-icon
|
|
38
40
|
variant={variant}
|
|
39
41
|
onclick={requestOpenNavMenu}
|
|
40
|
-
></dx-
|
|
42
|
+
></dx-tab>
|
|
41
43
|
</li>
|
|
42
44
|
</template>
|
|
43
45
|
</ul>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { LightningElement, api } from "lwc";
|
|
2
|
-
import {
|
|
2
|
+
import { TabVariant, Option } from "typings/custom";
|
|
3
3
|
export default class HeaderNav extends LightningElement {
|
|
4
4
|
@api pathname: string | null = null;
|
|
5
|
-
@api variant:
|
|
5
|
+
@api variant: TabVariant = "default";
|
|
6
6
|
@api ariaLabel: string = "Navigation Bar";
|
|
7
7
|
|
|
8
8
|
@api
|
|
@@ -4,9 +4,11 @@
|
|
|
4
4
|
onchange={handleChange}
|
|
5
5
|
onkeydown={handleKeyDown}
|
|
6
6
|
>
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
<slot name="form-heading">
|
|
8
|
+
<h4 class="newsletter-form-heading dx-text-heading-8">
|
|
9
|
+
Sign up now to receive the newsletter.
|
|
10
|
+
</h4>
|
|
11
|
+
</slot>
|
|
10
12
|
<dx-input
|
|
11
13
|
name="fname"
|
|
12
14
|
value={firstName}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import Tab from "dx/tab";
|
|
2
2
|
import Icon from "dx/icon";
|
|
3
|
+
import { track } from "dx/instrumentation";
|
|
3
4
|
import { createRenderComponent } from "utils/tests";
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
jest.mock("dx/instrumentation");
|
|
7
|
+
|
|
8
|
+
const TAG = "dx-tab";
|
|
9
|
+
const render = createRenderComponent(TAG, Tab);
|
|
7
10
|
|
|
8
11
|
const PROPS = {
|
|
9
12
|
label: "documentation",
|
|
@@ -14,9 +17,8 @@ describe(TAG, () => {
|
|
|
14
17
|
it("renders a single link with a label", () => {
|
|
15
18
|
const element = render(PROPS);
|
|
16
19
|
|
|
17
|
-
const links: Array<HTMLAnchorElement> =
|
|
18
|
-
"a"
|
|
19
|
-
);
|
|
20
|
+
const links: Array<HTMLAnchorElement> =
|
|
21
|
+
element.shadowRoot.querySelectorAll("a");
|
|
20
22
|
|
|
21
23
|
expect(links.length).toEqual(1);
|
|
22
24
|
const [singleLink] = links;
|
|
@@ -53,9 +55,8 @@ describe(TAG, () => {
|
|
|
53
55
|
const label = "test button";
|
|
54
56
|
const element = render({ label });
|
|
55
57
|
|
|
56
|
-
const buttons: Array<HTMLButtonElement> =
|
|
57
|
-
"button"
|
|
58
|
-
);
|
|
58
|
+
const buttons: Array<HTMLButtonElement> =
|
|
59
|
+
element.shadowRoot.querySelectorAll("button");
|
|
59
60
|
|
|
60
61
|
expect(buttons).toHaveLength(1);
|
|
61
62
|
const [singleButton] = buttons;
|
|
@@ -66,6 +67,23 @@ describe(TAG, () => {
|
|
|
66
67
|
|
|
67
68
|
const span: HTMLElement = singleButton.querySelector("span")!;
|
|
68
69
|
expect(span.textContent).toBe(label);
|
|
70
|
+
|
|
71
|
+
return expect(element).toBeAccessible();
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
it("renders a button with an icon if useIcon is passed as true", () => {
|
|
75
|
+
const label = "test button";
|
|
76
|
+
const element = render({ label, useIcon: true });
|
|
77
|
+
|
|
78
|
+
const buttons: Array<HTMLButtonElement> =
|
|
79
|
+
element.shadowRoot.querySelectorAll("button");
|
|
80
|
+
|
|
81
|
+
expect(buttons).toHaveLength(1);
|
|
82
|
+
const [singleButton] = buttons;
|
|
83
|
+
|
|
84
|
+
const span: HTMLElement = singleButton.querySelector("span")!;
|
|
85
|
+
expect(span.textContent).toBe(label);
|
|
86
|
+
|
|
69
87
|
const icon: Element & Icon = singleButton.querySelector("dx-icon")!;
|
|
70
88
|
expect(icon).not.toBeNull();
|
|
71
89
|
expect(icon.size).toBe("small");
|
|
@@ -75,11 +93,10 @@ describe(TAG, () => {
|
|
|
75
93
|
|
|
76
94
|
it("renders a button with label only if variant is small", () => {
|
|
77
95
|
const label = "test button";
|
|
78
|
-
const element = render({ label, variant: "small" });
|
|
96
|
+
const element = render({ label, variant: "small", useIcon: "true" });
|
|
79
97
|
|
|
80
|
-
const button: HTMLButtonElement =
|
|
81
|
-
"button"
|
|
82
|
-
);
|
|
98
|
+
const button: HTMLButtonElement =
|
|
99
|
+
element.shadowRoot.querySelector("button");
|
|
83
100
|
|
|
84
101
|
expect(button.classList).toHaveLength(2);
|
|
85
102
|
expect(button.classList).toContain("nav-list-item");
|
|
@@ -95,19 +112,18 @@ describe(TAG, () => {
|
|
|
95
112
|
return expect(element).toBeAccessible();
|
|
96
113
|
});
|
|
97
114
|
|
|
98
|
-
it("
|
|
99
|
-
const
|
|
100
|
-
const element = render({
|
|
101
|
-
...PROPS,
|
|
102
|
-
onclick: sendGtmMock
|
|
103
|
-
});
|
|
104
|
-
|
|
105
|
-
const link = element.shadowRoot.querySelector("a");
|
|
115
|
+
it("calls track when the link is clicked", () => {
|
|
116
|
+
const element = render(PROPS);
|
|
106
117
|
|
|
118
|
+
const link: HTMLElement = element.shadowRoot.querySelector("a");
|
|
119
|
+
expect(link).not.toBeNull();
|
|
107
120
|
link.click();
|
|
108
121
|
|
|
109
|
-
expect(
|
|
110
|
-
|
|
111
|
-
|
|
122
|
+
expect(track).toHaveBeenCalledTimes(1);
|
|
123
|
+
expect(track).toBeCalledWith(link, "custEv_topNavLinkClick", {
|
|
124
|
+
navHeading: PROPS.label,
|
|
125
|
+
clickText: PROPS.href,
|
|
126
|
+
pageLocation: window.location.pathname
|
|
127
|
+
});
|
|
112
128
|
});
|
|
113
129
|
});
|
|
@@ -5,7 +5,10 @@ a {
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.nav-list-item {
|
|
8
|
-
--horizontal-spacing: var(
|
|
8
|
+
--horizontal-spacing: var(
|
|
9
|
+
--dx-c-tab-horizontal-spacing,
|
|
10
|
+
var(--dx-g-spacing-md)
|
|
11
|
+
);
|
|
9
12
|
|
|
10
13
|
position: relative;
|
|
11
14
|
display: flex;
|
|
@@ -50,12 +53,15 @@ button.nav-list-item_small > dx-icon {
|
|
|
50
53
|
.nav-list-item_default:hover,
|
|
51
54
|
.nav-list-item_default:active,
|
|
52
55
|
:host([aria-expanded="true"]) button.nav-list-item_default {
|
|
53
|
-
background: var(
|
|
56
|
+
background: var(
|
|
57
|
+
--dx-g-brand-current-button-color-background-inactive,
|
|
58
|
+
var(--dx-g-brand-default-button-color-background-inactive)
|
|
59
|
+
);
|
|
54
60
|
}
|
|
55
61
|
|
|
56
|
-
button.nav-list-item:hover >
|
|
57
|
-
button.nav-list-item:active >
|
|
58
|
-
:host([aria-expanded="true"]) button.nav-list-item >
|
|
62
|
+
button.nav-list-item:hover > dx-icon,
|
|
63
|
+
button.nav-list-item:active > dx-icon,
|
|
64
|
+
:host([aria-expanded="true"]) button.nav-list-item > dx-icon {
|
|
59
65
|
transform: rotateX(180deg);
|
|
60
66
|
}
|
|
61
67
|
|
|
@@ -74,18 +80,27 @@ button.nav-list-item:active > *:last-child,
|
|
|
74
80
|
}
|
|
75
81
|
|
|
76
82
|
.nav-list-item_default.state-active {
|
|
77
|
-
background: var(
|
|
78
|
-
|
|
83
|
+
background: var(
|
|
84
|
+
--dx-g-brand-current-button-color-background-active,
|
|
85
|
+
var(--dx-g-brand-default-button-color-background-active)
|
|
86
|
+
);
|
|
87
|
+
color: var(--dx-g-brand-current-color, var(--dx-g-brand-default-color));
|
|
79
88
|
}
|
|
80
89
|
|
|
81
90
|
@media (max-width: 1160px) {
|
|
82
91
|
.nav-list-item_small {
|
|
83
|
-
--horizontal-spacing: var(
|
|
92
|
+
--horizontal-spacing: var(
|
|
93
|
+
--dx-c-tab-horizontal-spacing,
|
|
94
|
+
var(--dx-g-spacing-smd)
|
|
95
|
+
);
|
|
84
96
|
}
|
|
85
97
|
}
|
|
86
98
|
|
|
87
99
|
@media (max-width: 1090px) {
|
|
88
100
|
.nav-list-item_small {
|
|
89
|
-
--horizontal-spacing: var(
|
|
101
|
+
--horizontal-spacing: var(
|
|
102
|
+
--dx-c-tab-horizontal-spacing,
|
|
103
|
+
var(--dx-g-spacing-sm)
|
|
104
|
+
);
|
|
90
105
|
}
|
|
91
106
|
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { html } from "lit-html";
|
|
2
|
+
import { TabVariant } from "typings/custom";
|
|
3
|
+
|
|
4
|
+
type StoryArgs = {
|
|
5
|
+
isActive: boolean;
|
|
6
|
+
label: string;
|
|
7
|
+
useIcon: boolean;
|
|
8
|
+
variant: TabVariant;
|
|
9
|
+
};
|
|
10
|
+
const VARIANT_OPTIONS: Array<TabVariant> = ["default", "small"];
|
|
11
|
+
|
|
12
|
+
export default {
|
|
13
|
+
title: "dx/dx-tab",
|
|
14
|
+
component: "dx-tab",
|
|
15
|
+
argTypes: {
|
|
16
|
+
variant: {
|
|
17
|
+
control: {
|
|
18
|
+
type: "select",
|
|
19
|
+
options: VARIANT_OPTIONS
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const Template = ({ variant, label, isActive, useIcon }: StoryArgs) => html`
|
|
26
|
+
<dx-tab
|
|
27
|
+
label="${label}"
|
|
28
|
+
is-active="${isActive}"
|
|
29
|
+
variant="${variant}"
|
|
30
|
+
use-icon="${useIcon}"
|
|
31
|
+
></dx-tab>
|
|
32
|
+
`;
|
|
33
|
+
|
|
34
|
+
export const Base = (args: StoryArgs) => Template(args);
|
|
35
|
+
Base.args = {
|
|
36
|
+
isActive: false,
|
|
37
|
+
useIcon: false,
|
|
38
|
+
label: "Banana",
|
|
39
|
+
variant: VARIANT_OPTIONS[0]
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export const TabGroup = ({ variant }: { variant: TabVariant }) => html`
|
|
43
|
+
<style>
|
|
44
|
+
.container {
|
|
45
|
+
display: flex;
|
|
46
|
+
--dx-c-tab-horizontal-spacing: var(--dx-g-spacing-xs);
|
|
47
|
+
}
|
|
48
|
+
</style>
|
|
49
|
+
<nav class="container">
|
|
50
|
+
<dx-tab label="Banana" variant="${variant}"></dx-tab>
|
|
51
|
+
<dx-tab label="Apple" variant="${variant}"></dx-tab>
|
|
52
|
+
</nav>
|
|
53
|
+
`;
|
|
54
|
+
|
|
55
|
+
TabGroup.args = {
|
|
56
|
+
variant: VARIANT_OPTIONS[0]
|
|
57
|
+
};
|
|
@@ -1,19 +1,40 @@
|
|
|
1
1
|
import { LightningElement, api } from "lwc";
|
|
2
2
|
import { track } from "dx/instrumentation";
|
|
3
3
|
import cx from "classnames";
|
|
4
|
-
import {
|
|
4
|
+
import { TabVariant } from "typings/custom";
|
|
5
|
+
import { normalizeBoolean } from "utils/normalizers";
|
|
5
6
|
|
|
6
|
-
export default class
|
|
7
|
-
@api isActive: boolean = false;
|
|
7
|
+
export default class Tab extends LightningElement {
|
|
8
8
|
@api label: string | null = null;
|
|
9
9
|
@api href: string | null = null;
|
|
10
|
-
@api variant:
|
|
10
|
+
@api variant: TabVariant = "default";
|
|
11
|
+
|
|
12
|
+
@api
|
|
13
|
+
get isActive() {
|
|
14
|
+
return this._isActive;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
set isActive(value) {
|
|
18
|
+
this._isActive = normalizeBoolean(value);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@api
|
|
22
|
+
get useIcon() {
|
|
23
|
+
return this._useIcon;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
set useIcon(value) {
|
|
27
|
+
this._useIcon = normalizeBoolean(value);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
_useIcon = false;
|
|
31
|
+
_isActive = false;
|
|
11
32
|
|
|
12
33
|
private sendGtm(e: PointerEvent) {
|
|
13
34
|
track(e.currentTarget!, "custEv_topNavLinkClick", {
|
|
14
35
|
navHeading: this.label || undefined,
|
|
15
36
|
clickText: this.href || undefined,
|
|
16
|
-
pageLocation: window.location.pathname
|
|
37
|
+
pageLocation: window.location.pathname
|
|
17
38
|
});
|
|
18
39
|
}
|
|
19
40
|
|