@salesforcedevs/dx-components 0.24.0 → 0.24.1
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/package.json +2 -2
- package/src/modules/dx/slackButton/__tests__/slackButton.test.ts +20 -0
- package/src/modules/dx/slackButton/slackButton.css +43 -0
- package/src/modules/dx/slackButton/slackButton.html +14 -0
- package/src/modules/dx/slackButton/slackButton.stories.ts +21 -0
- package/src/modules/dx/slackButton/slackButton.ts +3 -0
- package/src/modules/dx/{slackAdd/__tests__/slackAdd.test.ts → slackCta/__tests__/slackCta.test.ts} +6 -6
- package/src/modules/dx/slackCta/slackCta.css +46 -0
- package/src/modules/dx/slackCta/slackCta.html +6 -0
- package/src/modules/dx/{slackAdd/slackAdd.stories.ts → slackCta/slackCta.stories.ts} +5 -5
- package/src/modules/dx/{slackAdd/slackAdd.ts → slackCta/slackCta.ts} +0 -0
- package/src/assets/svg/slack-cta-blog-background-left.svg +0 -14
- package/src/assets/svg/slack-cta-blog-background-right.svg +0 -11
- package/src/modules/dx/slackAdd/slackAdd.css +0 -93
- package/src/modules/dx/slackAdd/slackAdd.html +0 -17
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/dx-components",
|
|
3
|
-
"version": "0.24.
|
|
3
|
+
"version": "0.24.1",
|
|
4
4
|
"description": "DX Lightning web components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -29,5 +29,5 @@
|
|
|
29
29
|
"@types/debounce": "^1.2.0",
|
|
30
30
|
"@types/lodash.get": "^4.4.6"
|
|
31
31
|
},
|
|
32
|
-
"gitHead": "
|
|
32
|
+
"gitHead": "e658d28b81079529279b62fa98087020336ede4f"
|
|
33
33
|
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import slackButton from "dx/slackButton";
|
|
2
|
+
import { createRenderComponent } from "utils/tests";
|
|
3
|
+
|
|
4
|
+
const TAG = "dx-slack-button";
|
|
5
|
+
const render = createRenderComponent(TAG, slackButton);
|
|
6
|
+
|
|
7
|
+
describe(TAG, () => {
|
|
8
|
+
it("renders the button linking to slack", () => {
|
|
9
|
+
const element = render();
|
|
10
|
+
|
|
11
|
+
const slackBtn = element.shadowRoot.querySelectorAll(".slack-btn a");
|
|
12
|
+
expect(slackBtn).not.toBe(undefined);
|
|
13
|
+
return expect(slackBtn.length).toBe(1);
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
it("renders a button meeting all accesibilty requirements", () => {
|
|
17
|
+
const element = render();
|
|
18
|
+
return expect(element).toBeAccessible();
|
|
19
|
+
});
|
|
20
|
+
});
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
@import "helpers/reset";
|
|
2
|
+
@import "helpers/text";
|
|
3
|
+
|
|
4
|
+
.slack-cta-button {
|
|
5
|
+
align-items: center;
|
|
6
|
+
background-color: #fff;
|
|
7
|
+
border: 2px solid rgb(1, 118, 211);
|
|
8
|
+
border-radius: 4px;
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
height: 48px;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
text-decoration: none;
|
|
13
|
+
padding: 10px;
|
|
14
|
+
color: rgb(1, 118, 211);
|
|
15
|
+
font-size: 14px;
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
letter-spacing: 0;
|
|
18
|
+
line-height: 20px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@media screen and (max-width: 768px) {
|
|
22
|
+
.slack-btn a {
|
|
23
|
+
display: inline-flex;
|
|
24
|
+
margin: 4px auto;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.slack-btn img {
|
|
28
|
+
height: 20px;
|
|
29
|
+
padding-right: 10px;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@media screen and (min-width: 768px) {
|
|
34
|
+
.slack-btn a {
|
|
35
|
+
display: inline-flex;
|
|
36
|
+
margin: 22px 13px 8px 13px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.slack-btn img {
|
|
40
|
+
height: 20px;
|
|
41
|
+
padding-right: 10px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="slack-btn">
|
|
3
|
+
<a
|
|
4
|
+
class="slack-cta-button"
|
|
5
|
+
href="https://slack.com/oauth/v2/authorize?scope=chat%3Awrite%2Ccommands&user_scope=&redirect_uri=https%3A%2F%2Fdsc-slack-app.herokuapp.com%2Fslack%2Foauth_redirect&client_id=1814240140212.2864842743411"
|
|
6
|
+
>
|
|
7
|
+
<img
|
|
8
|
+
src="/assets/svg/slack-logo.svg"
|
|
9
|
+
alt="install slack extension"
|
|
10
|
+
/>
|
|
11
|
+
<slot></slot>
|
|
12
|
+
</a>
|
|
13
|
+
</div>
|
|
14
|
+
</template>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
title: "dx/dx-slack-button",
|
|
3
|
+
component: "dx-slack-button"
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
const createStyles = () => `
|
|
7
|
+
<style>
|
|
8
|
+
h2 {
|
|
9
|
+
font-weight: bold;
|
|
10
|
+
font-size: 24px;
|
|
11
|
+
margin: 10px 0 30px 0;
|
|
12
|
+
}
|
|
13
|
+
</style>
|
|
14
|
+
`;
|
|
15
|
+
|
|
16
|
+
export const Base = () => `
|
|
17
|
+
${createStyles()}
|
|
18
|
+
<h2>Slack Button</h2>
|
|
19
|
+
|
|
20
|
+
<dx-slack-button>Slack</dx-slack-button>
|
|
21
|
+
`;
|
package/src/modules/dx/{slackAdd/__tests__/slackAdd.test.ts → slackCta/__tests__/slackCta.test.ts}
RENAMED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import
|
|
1
|
+
import slackCta from "dx/slackCta";
|
|
2
2
|
import { createRenderComponent } from "utils/tests";
|
|
3
3
|
|
|
4
|
-
const TAG = "dx-slack-
|
|
5
|
-
const render = createRenderComponent(TAG,
|
|
4
|
+
const TAG = "dx-slack-cta";
|
|
5
|
+
const render = createRenderComponent(TAG, slackCta);
|
|
6
6
|
|
|
7
7
|
describe(TAG, () => {
|
|
8
8
|
it("renders the button linking to slack", () => {
|
|
9
9
|
const element = render();
|
|
10
10
|
|
|
11
|
-
const slackBtn = element.shadowRoot.querySelectorAll(".slack-btn
|
|
11
|
+
const slackBtn = element.shadowRoot.querySelectorAll(".slack-cta-btn");
|
|
12
12
|
expect(slackBtn).not.toBe(undefined);
|
|
13
13
|
return expect(slackBtn.length).toBe(1);
|
|
14
14
|
});
|
|
@@ -29,7 +29,7 @@ describe(TAG, () => {
|
|
|
29
29
|
expect(header.textContent).toBe("Follow along with Slackfoobar");
|
|
30
30
|
|
|
31
31
|
const slackBtn = element.shadowRoot
|
|
32
|
-
.querySelectorAll(".slack-btn
|
|
32
|
+
.querySelectorAll(".slack-cta-btn")
|
|
33
33
|
.item(0);
|
|
34
34
|
return expect(slackBtn.textContent).toBe("foobar");
|
|
35
35
|
});
|
|
@@ -40,7 +40,7 @@ describe(TAG, () => {
|
|
|
40
40
|
});
|
|
41
41
|
|
|
42
42
|
const slackBtn = element.shadowRoot
|
|
43
|
-
.querySelectorAll(".slack-btn
|
|
43
|
+
.querySelectorAll(".slack-cta-btn")
|
|
44
44
|
.item(0);
|
|
45
45
|
expect(slackBtn.textContent).toBe("Add to Slack");
|
|
46
46
|
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
@import "helpers/reset";
|
|
2
|
+
@import "helpers/text";
|
|
3
|
+
|
|
4
|
+
.container {
|
|
5
|
+
background-repeat: no-repeat;
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
flex-wrap: wrap;
|
|
9
|
+
align-items: center;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
text-align: center;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.podcast {
|
|
15
|
+
background-image: url("/assets/svg/slack-cta-podcast-background-left.svg"),
|
|
16
|
+
url("/assets/svg/slack-cta-podcast-background-right.svg");
|
|
17
|
+
background-size: 40% 40%;
|
|
18
|
+
background-position: 5% 25%, 95% 75%;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.dx-text-heading-4 {
|
|
22
|
+
font-size: var(--dx-g-text-lg);
|
|
23
|
+
max-width: 40%;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@media screen and (max-width: 768px) {
|
|
27
|
+
.container {
|
|
28
|
+
background-position: -100% 25%, 180% 75%;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.podcast.container {
|
|
32
|
+
background-size: 75% 60%;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.dx-text-heading-4 {
|
|
36
|
+
max-width: 28ex;
|
|
37
|
+
font-size: var(--dx-g-text-lg);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@media screen and (min-width: 768px) {
|
|
42
|
+
.container {
|
|
43
|
+
min-height: 242px;
|
|
44
|
+
padding-top: 22px;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export default {
|
|
2
|
-
title: "dx/dx-slack-
|
|
3
|
-
component: "dx-slack-
|
|
2
|
+
title: "dx/dx-slack-cta",
|
|
3
|
+
component: "dx-slack-cta"
|
|
4
4
|
};
|
|
5
5
|
|
|
6
6
|
const createStyles = () => `
|
|
@@ -17,9 +17,9 @@ export const Base = () => `
|
|
|
17
17
|
${createStyles()}
|
|
18
18
|
<h2>Add to Slack</h2>
|
|
19
19
|
|
|
20
|
-
<dx-slack-
|
|
20
|
+
<dx-slack-cta header-text="Get notified of new episodes with the new Salesforce Developers Slack app" background="podcast"></dx-slack-cta>
|
|
21
21
|
|
|
22
|
-
<dx-slack-
|
|
22
|
+
<dx-slack-cta header-text="Get the latest Salesforce Developer posts exactly how you want." inner-text="Send posts to Slack" background="blog"></dx-slack-cta>
|
|
23
23
|
|
|
24
|
-
<dx-slack-
|
|
24
|
+
<dx-slack-cta header-text="Get notified of new events with the new Salesforce Developers Slack app"></dx-slack-cta>
|
|
25
25
|
`;
|
|
File without changes
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<svg width="45px" height="34px" viewBox="0 0 45 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
3
|
-
<title>blog-cta-graphic-left</title>
|
|
4
|
-
<g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
5
|
-
<g id="Blog---v1" transform="translate(-424.000000, -2216.000000)" stroke-width="2">
|
|
6
|
-
<g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
|
|
7
|
-
<g id="blog-cta-graphic-left" transform="translate(373.000000, 47.500000)">
|
|
8
|
-
<circle id="Oval-Copy-12" stroke="#90D1FF" cx="39.5" cy="4.5" r="3.5"></circle>
|
|
9
|
-
<path d="M7.42619649,16.2472709 L5.80463043,20.6293714 C5.68941141,20.9429183 5.44197383,21.1894114 5.12842699,21.3046304 L0.747270909,22.9271409 C-0.249090303,23.295464 -0.249090303,24.704536 0.747270909,25.0738035 L5.12842699,26.6953696 C5.44197383,26.8105886 5.68941141,27.0570817 5.80463043,27.3706286 L7.42619649,31.7527291 C7.79546401,32.7490903 9.20453599,32.7490903 9.57285909,31.7527291 L11.1944252,27.3706286 C11.3096442,27.0570817 11.5570817,26.8105886 11.8706286,26.6953696 L16.2527291,25.0738035 C17.2481459,24.704536 17.2481459,23.295464 16.2527291,22.9271409 L11.8706286,21.3046304 C11.5570817,21.1894114 11.3096442,20.9429183 11.1944252,20.6293714 L9.57285909,16.2472709 C9.20453599,15.2509097 7.79546401,15.2509097 7.42619649,16.2472709 Z" id="Stroke-7-Copy-2" stroke="#8FD0FE" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
10
|
-
</g>
|
|
11
|
-
</g>
|
|
12
|
-
</g>
|
|
13
|
-
</g>
|
|
14
|
-
</svg>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<svg width="23px" height="22px" viewBox="0 0 23 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
3
|
-
<title>blog-cta-graphic-right</title>
|
|
4
|
-
<g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
|
5
|
-
<g id="Blog---v1" transform="translate(-936.000000, -2378.000000)" stroke="#8FD0FE" stroke-width="2">
|
|
6
|
-
<g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
|
|
7
|
-
<path d="M894.236764,210.879142 L892.329039,216.034555 C892.193488,216.403433 891.902385,216.693425 891.533506,216.828977 L886.379205,218.737813 C885.207015,219.171134 885.207015,220.828866 886.379205,221.263298 L891.533506,223.171023 C891.902385,223.306575 892.193488,223.596567 892.329039,223.965445 L894.236764,229.120858 C894.671197,230.293047 896.328928,230.293047 896.76225,229.120858 L898.669974,223.965445 C898.805526,223.596567 899.096629,223.306575 899.465508,223.171023 L904.62092,221.263298 C905.791999,220.828866 905.791999,219.171134 904.62092,218.737813 L899.465508,216.828977 C899.096629,216.693425 898.805526,216.403433 898.669974,216.034555 L896.76225,210.879142 C896.328928,209.706953 894.671197,209.706953 894.236764,210.879142 Z" id="blog-cta-graphic-right"></path>
|
|
8
|
-
</g>
|
|
9
|
-
</g>
|
|
10
|
-
</g>
|
|
11
|
-
</svg>
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
@import "helpers/reset";
|
|
2
|
-
@import "helpers/text";
|
|
3
|
-
|
|
4
|
-
.container {
|
|
5
|
-
background-repeat: no-repeat;
|
|
6
|
-
display: flex;
|
|
7
|
-
flex-direction: column;
|
|
8
|
-
flex-wrap: wrap;
|
|
9
|
-
align-items: center;
|
|
10
|
-
justify-content: center;
|
|
11
|
-
text-align: center;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.slack-cta-button {
|
|
15
|
-
align-items: center;
|
|
16
|
-
background-color: #fff;
|
|
17
|
-
border: 2px solid rgb(1, 118, 211);
|
|
18
|
-
border-radius: 4px;
|
|
19
|
-
display: inline-flex;
|
|
20
|
-
height: 48px;
|
|
21
|
-
justify-content: center;
|
|
22
|
-
text-decoration: none;
|
|
23
|
-
padding: 10px;
|
|
24
|
-
color: rgb(1, 118, 211);
|
|
25
|
-
font-size: 14px;
|
|
26
|
-
font-weight: 500;
|
|
27
|
-
letter-spacing: 0;
|
|
28
|
-
line-height: 20px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.podcast {
|
|
32
|
-
background-image: url("/assets/svg/slack-cta-podcast-background-left.svg"),
|
|
33
|
-
url("/assets/svg/slack-cta-podcast-background-right.svg");
|
|
34
|
-
background-size: 40% 40%;
|
|
35
|
-
background-position: 5% 25%, 95% 75%;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.blog {
|
|
39
|
-
background-image: url("/assets/svg/slack-cta-blog-background-left.svg"),
|
|
40
|
-
url("/assets/svg/slack-cta-blog-background-right.svg");
|
|
41
|
-
background-position: 20% 25%, 80% 75%;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.dx-text-heading-4 {
|
|
45
|
-
font-size: var(--dx-g-text-lg);
|
|
46
|
-
max-width: 40%;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
@media screen and (max-width: 768px) {
|
|
50
|
-
.container {
|
|
51
|
-
background-position: -100% 25%, 180% 75%;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.podcast.container {
|
|
55
|
-
background-size: 75% 60%;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.blog.container {
|
|
59
|
-
background-size: 75% 20%;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.dx-text-heading-4 {
|
|
63
|
-
max-width: 28ex;
|
|
64
|
-
font-size: var(--dx-g-text-lg);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.slack-btn a {
|
|
68
|
-
display: inline-flex;
|
|
69
|
-
margin: 4px auto;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.slack-btn img {
|
|
73
|
-
height: 20px;
|
|
74
|
-
padding-right: 10px;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
@media screen and (min-width: 768px) {
|
|
79
|
-
.container {
|
|
80
|
-
min-height: 242px;
|
|
81
|
-
padding-top: 22px;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.slack-btn a {
|
|
85
|
-
display: inline-flex;
|
|
86
|
-
margin: 22px 13px 8px 13px;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.slack-btn img {
|
|
90
|
-
height: 20px;
|
|
91
|
-
padding-right: 10px;
|
|
92
|
-
}
|
|
93
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class={containerClass}>
|
|
3
|
-
<h2 class="dx-text-heading-4">{headerText}</h2>
|
|
4
|
-
<div class="slack-btn">
|
|
5
|
-
<a
|
|
6
|
-
class="slack-cta-button"
|
|
7
|
-
href="https://slack.com/oauth/v2/authorize?scope=chat%3Awrite%2Ccommands&user_scope=&redirect_uri=https%3A%2F%2Fdsc-slack-app.herokuapp.com%2Fslack%2Foauth_redirect&client_id=1814240140212.2864842743411"
|
|
8
|
-
>
|
|
9
|
-
<img
|
|
10
|
-
src="/assets/svg/slack-logo.svg"
|
|
11
|
-
alt="install slack extension"
|
|
12
|
-
/>
|
|
13
|
-
{innerText}
|
|
14
|
-
</a>
|
|
15
|
-
</div>
|
|
16
|
-
</div>
|
|
17
|
-
</template>
|