@salesforcedevs/dx-components 1.2.2-avatar-button-6 → 1.2.3

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 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/lwc.config.json CHANGED
@@ -1,7 +1,6 @@
1
1
  {
2
2
  "modules": [{ "dir": "src/modules" }],
3
3
  "expose": [
4
- "dx/avatarButton",
5
4
  "dx/banner",
6
5
  "dx/brandThemeProvider",
7
6
  "dx/breadcrumbs",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.2.2-avatar-button-6",
3
+ "version": "1.2.3",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -17,18 +17,16 @@
17
17
  "classnames": "^2.2.6",
18
18
  "coveo-search-ui": "^2.10082.5",
19
19
  "debounce": "^1.2.0",
20
- "js-cookie": "^3.0.1",
21
20
  "lodash.get": "^4.4.2",
22
21
  "lodash.kebabcase": "^4.1.1",
23
- "microtip": "0.2.2",
24
- "salesforce-oauth2": "^0.2.0"
22
+ "microtip": "0.2.2"
25
23
  },
26
24
  "devDependencies": {
27
25
  "@types/classnames": "^2.2.10",
28
26
  "@types/debounce": "^1.2.0",
29
- "@types/js-cookie": "^3.0.2",
30
27
  "@types/lodash.get": "^4.4.6",
31
28
  "@types/lodash.kebabcase": "^4.1.7",
32
29
  "@types/vimeo__player": "^2.16.2"
33
- }
30
+ },
31
+ "gitHead": "06bc22f5a093070bf9122649f638030a43d9cfb1"
34
32
  }
@@ -19,9 +19,6 @@
19
19
  onstatechange={handleStateChange}
20
20
  ></dx-header-search>
21
21
  </div>
22
- <div if:true={showTbidLogin} class="header-tbid-login">
23
- <dx-avatar-button></dx-avatar-button>
24
- </div>
25
22
  <div if:true={showSignup} class="header-login-signup">
26
23
  <dx-button
27
24
  aria-label="Sign Up For Salesforce Developer Edition"
@@ -1,10 +1,6 @@
1
1
  import { HeaderBase } from "dxBaseElements/headerBase";
2
2
 
3
3
  export default class Header extends HeaderBase {
4
- private get showTbidLogin(): boolean {
5
- return this.showSignup;
6
- }
7
-
8
4
  private get showSignup(): boolean {
9
5
  return this.signupLink
10
6
  ? (this.mobile && !this.isSearchOpen) || !this.mobile
@@ -13,7 +13,7 @@ h2 {
13
13
  font-family: var(--dx-g-font-display);
14
14
  font-size: var(--dx-g-text-sm);
15
15
  color: var(--dx-g-blue-vibrant-20);
16
- text-transform: uppercase;
16
+ text-transform: capitalize;
17
17
  letter-spacing: 0;
18
18
  line-height: 18px;
19
19
  }
@@ -42,7 +42,7 @@ h2::after {
42
42
  dx-button {
43
43
  display: flex;
44
44
  width: 100%;
45
- text-transform: uppercase;
45
+ text-transform: capitalize;
46
46
  padding: 0 var(--dx-c-hr-padding-horizontal);
47
47
  }
48
48
 
@@ -3,6 +3,6 @@ import { LightningElement, api } from "lwc";
3
3
  export default class Logo extends LightningElement {
4
4
  @api href: string = "/";
5
5
  @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
6
- @api imgAlt: string = "Salesforce logo";
6
+ @api imgAlt: string = "Salesforce log";
7
7
  @api label!: string;
8
8
  }
@@ -109,14 +109,12 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
109
109
  margin-left: var(--dx-g-spacing-sm);
110
110
  }
111
111
 
112
- .header-login-signup,
113
- .header-tbid-login {
112
+ .header-login-signup {
114
113
  display: flex;
115
114
  align-items: center;
116
115
  }
117
116
 
118
- .header-login-signup dx-button,
119
- .header-tbid-login dx-avatar-button {
117
+ .header-login-signup dx-button {
120
118
  margin-left: var(--dx-g-spacing-smd);
121
119
  }
122
120
 
Binary file
@@ -1,129 +0,0 @@
1
- :host {
2
- --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
3
- --dx-c-button-custom-background: transparent;
4
- --dx-c-button-custom-border: 1px solid transparent;
5
- --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-50);
6
- --dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
7
- --dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-90);
8
- --dx-c-slot-empty-width: max-content;
9
- }
10
-
11
- .avatar-small-container {
12
- padding: 2px 0;
13
- }
14
-
15
- .avatar {
16
- border-radius: 100%;
17
- border: 2px solid #0d9dda;
18
- }
19
-
20
- .avatar.avatar-small {
21
- display: block;
22
- height: var(--dx-g-spacing-lg);
23
- width: var(--dx-g-spacing-lg);
24
- }
25
-
26
- .avatar.avatar-medium {
27
- margin-bottom: 14px;
28
- width: var(--dx-g-spacing-2xl);
29
- }
30
-
31
- .login-container {
32
- padding: 16px;
33
- }
34
-
35
- .login-container.logged-in {
36
- padding-top: 68px;
37
- }
38
-
39
- .header-img {
40
- left: 0;
41
- position: absolute;
42
- top: 0;
43
- width: 100%;
44
- z-index: -1;
45
- }
46
-
47
- .heading {
48
- color: var(--dx-g-blue-vibrant-20);
49
- display: block;
50
- font-family: var(--dx-g-font-display);
51
- font-size: var(--dx-g-text-lg);
52
- line-height: 28px;
53
- }
54
-
55
- .sub-heading {
56
- color: var(--dx-g-blue-vibrant-20);
57
- display: block;
58
- font-family: var(--dx-g-font-sans);
59
- font-size: 12px;
60
- line-height: 18px;
61
- padding: 8px 0;
62
- }
63
-
64
- ul {
65
- list-style: none;
66
- margin: 0;
67
- padding: 0;
68
- }
69
-
70
- .login-list-item {
71
- padding-bottom: 10px;
72
- }
73
-
74
- .login-section ~ .login-section {
75
- border-top: 1px solid var(--dx-g-gray-90);
76
- margin-top: 12px;
77
- }
78
-
79
- .login-section-title {
80
- color: var(--dx-g-gray-30);
81
- display: inline-block;
82
- font-family: var(--dx-g-font-sans);
83
- font-size: 14px;
84
- line-height: 20px;
85
- padding: 20px 0 12px;
86
- }
87
-
88
- .login-link {
89
- color: var(--dx-g-blue-vibrant-20);
90
- display: block;
91
- }
92
-
93
- .login-link-label {
94
- display: inline-block;
95
- font-family: var(--dx-g-font-display);
96
- font-size: 16px;
97
- line-height: 24px;
98
- }
99
-
100
- .login-link-img {
101
- display: inline-block;
102
- height: 16px;
103
- margin-left: 6px;
104
- vertical-align: middle;
105
- }
106
-
107
- .login-link-icon {
108
- display: inline-block;
109
- margin-left: 6px;
110
- vertical-align: baseline;
111
- }
112
-
113
- .login-link-blurb {
114
- font-family: var(--dx-g-font-sans);
115
- font-size: 14px;
116
- line-height: 20px;
117
- padding-top: 4px;
118
- }
119
-
120
- .heading-links {
121
- color: var(--dx-g-gray-90);
122
- font-family: var(--dx-g-font-sans);
123
- font-size: 14px;
124
- line-height: 20px;
125
- }
126
-
127
- a.inline-link {
128
- color: var(--dx-g-blue-vibrant-50);
129
- }
@@ -1,155 +0,0 @@
1
- <template>
2
- <div if:true={isLoggedIn}>
3
- <dx-popover offset="small" width="320px" open-on-hover>
4
- <div slot="control" class="avatar-small-container login-control">
5
- <img src={userInfo.avatarImgSrc} class="avatar avatar-small" />
6
- </div>
7
- <div slot="content">
8
- <div class="login-container logged-in">
9
- <img
10
- src="/assets/svg/login-widget-bg.png"
11
- class="header-img"
12
- />
13
- <img
14
- src={userInfo.avatarImgSrc}
15
- class="avatar avatar-medium"
16
- />
17
- <span class="heading">{userInfo.fullName}</span>
18
- <span class="sub-heading">{userInfo.username}</span>
19
- <div class="heading-links">
20
- <!--
21
- <a href="#" class="inline-link">Switch account</a>
22
- &nbsp;&nbsp;|&nbsp;&nbsp;
23
- -->
24
- <a
25
- href="#"
26
- onclick={handleComponentLogout}
27
- class="inline-link"
28
- >
29
- Logout
30
- </a>
31
- </div>
32
- <div class="login-section">
33
- <span class="login-section-title">Trailblazer.me</span>
34
- <ul>
35
- <li class="login-list-item">
36
- <a href={settingsUrl} class="login-link">
37
- <span class="login-link-label">
38
- Settings
39
- </span>
40
- <dx-icon
41
- class="login-link-icon"
42
- symbol="new_window"
43
- size="xsmall"
44
- ></dx-icon>
45
- </a>
46
- </li>
47
- <li class="login-list-item">
48
- <a href={profileUrl} class="login-link">
49
- <span class="login-link-label">
50
- Profile
51
- </span>
52
- <dx-icon
53
- class="login-link-icon"
54
- symbol="new_window"
55
- size="xsmall"
56
- ></dx-icon>
57
- </a>
58
- </li>
59
- <li class="login-list-item">
60
- <a href="#" class="login-link">
61
- <span class="login-link-label">
62
- Developer Forums
63
- </span>
64
- <dx-icon
65
- class="login-link-icon"
66
- symbol="new_window"
67
- size="xsmall"
68
- ></dx-icon>
69
- </a>
70
- <div class="login-link-blurb">
71
- Our Developer Forums have a new home!&nbsp;
72
- <a href="#" class="inline-link">
73
- Learn more
74
- </a>
75
- </div>
76
- </li>
77
- </ul>
78
- </div>
79
- </div>
80
- </div>
81
- </dx-popover>
82
- </div>
83
- <div if:false={isLoggedIn}>
84
- <dx-popover offset="small" width="320px" open-on-hover>
85
- <dx-button
86
- slot="control"
87
- class="login-control"
88
- icon-symbol="user"
89
- icon-position="left"
90
- loading={isLoading}
91
- variant="custom"
92
- >
93
- Login
94
- </dx-button>
95
- <div slot="content">
96
- <div class="login-container">
97
- <span class="heading">Login</span>
98
- <div class="login-section">
99
- <span class="login-section-title">Products</span>
100
- <ul>
101
- <li class="login-list-item">
102
- <a href="#" class="login-link">
103
- <span class="login-link-label">
104
- Salesforce
105
- </span>
106
- <img
107
- class="login-link-img"
108
- src="/assets/svg/salesforce-cloud.svg"
109
- alt="Salesforce logo"
110
- />
111
- <dx-icon
112
- class="login-link-icon"
113
- symbol="new_window"
114
- size="xsmall"
115
- ></dx-icon>
116
- </a>
117
- </li>
118
- <li class="login-list-item">
119
- <a href="#" class="login-link">
120
- <span class="login-link-label">
121
- Marketing Cloud
122
- </span>
123
- <dx-icon
124
- class="login-link-icon"
125
- symbol="new_window"
126
- size="xsmall"
127
- ></dx-icon>
128
- </a>
129
- </li>
130
- </ul>
131
- </div>
132
- <div class="login-section">
133
- <span class="login-section-title">
134
- Community & Resources
135
- </span>
136
- <ul>
137
- <li class="login-list-item">
138
- <a href={loginUrl} class="login-link">
139
- <span class="login-link-label">
140
- Trailblazer.me
141
- </span>
142
- </a>
143
- <div class="login-link-blurb">
144
- Login into access a rich community of
145
- Salesforce Developers, get ideas, and find
146
- solutions.
147
- </div>
148
- </li>
149
- </ul>
150
- </div>
151
- </div>
152
- </div>
153
- </dx-popover>
154
- </div>
155
- </template>