@energysage/es-ds-components 3.0.7 → 3.0.9

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.
Files changed (13) hide show
  1. package/components/es-card.vue +9 -2
  2. package/package.json +1 -1
  3. package/components/es-footer.vue +0 -192
  4. package/components/es-nav-bar-account-menu.vue +0 -70
  5. package/components/es-nav-bar-featured-article.vue +0 -60
  6. package/components/es-nav-bar-link.vue +0 -27
  7. package/components/es-nav-bar-product-menu.vue +0 -219
  8. package/components/es-nav-bar-top-level-menu.vue +0 -197
  9. package/components/es-nav-bar-topic-menu.vue +0 -197
  10. package/components/es-nav-bar.vue +0 -408
  11. package/utils/get-es-footer-content.ts +0 -91
  12. package/utils/get-es-nav-bar-account-content.ts +0 -55
  13. package/utils/get-es-nav-bar-global-content.ts +0 -481
package/components/es-nav-bar-top-level-menu.vue DELETED
@@ -1,197 +0,0 @@
1
- <script lang="ts">
2
- export default {
3
- name: 'EsNavBarTopLevelMenu',
4
- props: {
5
- homeName: {
6
- type: String,
7
- required: true,
8
- },
9
- homeLink: {
10
- type: String,
11
- required: true,
12
- },
13
- closeButtonText: {
14
- type: String,
15
- required: true,
16
- },
17
- featuredArticle: {
18
- type: Object,
19
- default: () => ({}),
20
- },
21
- icon: {
22
- type: String,
23
- default: '',
24
- },
25
- topics: {
26
- type: Array,
27
- default: () => [],
28
- },
29
- link: {
30
- type: String,
31
- default: '',
32
- },
33
- mainMenuText: {
34
- type: String,
35
- required: true,
36
- },
37
- newTab: {
38
- type: Boolean,
39
- default: false,
40
- },
41
- name: {
42
- type: String,
43
- required: true,
44
- },
45
- subHeading: {
46
- type: String,
47
- default: '',
48
- },
49
- },
50
- computed: {
51
- checkboxId() {
52
- return `menu-${this.name}`;
53
- },
54
- resolvedEsNavBarLink() {
55
- return resolveComponent('es-nav-bar-link');
56
- },
57
- },
58
- };
59
- </script>
60
-
61
- <template>
62
- <div
63
- class="nav-item top-header mx-0"
64
- :class="{ 'has-dropdown': !link }">
65
- <div class="top-header-inner w-100">
66
- <!-- desktop link and fly-out menu trigger -->
67
- <es-nav-bar-link
68
- class="nav-link d-none d-lg-block py-100 font-weight-bolder"
69
- :class="{ 'dropdown-toggle': !link }"
70
- :href="link || '#'"
71
- :data-toggle="link ? undefined : 'dropdown'"
72
- :aria-haspopup="link ? undefined : true"
73
- :aria-expanded="link ? undefined : false"
74
- :target="link && newTab ? '_blank' : undefined">
75
- <div class="d-lg-flex align-items-center">
76
- {{ name }}
77
- </div>
78
- </es-nav-bar-link>
79
- <!-- mobile link and fly-out menu trigger -->
80
- <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
81
- <component
82
- :is="link ? resolvedEsNavBarLink : 'label'"
83
- class="nav-link d-flex d-lg-none align-items-center w-100 h-100 px-0 py-lg-100 px-100 font-weight-bold justify-content-between"
84
- :class="{ 'dropdown-label': !link }"
85
- :for="link ? undefined : checkboxId"
86
- :href="link || undefined"
87
- :target="newTab ? '_blank' : undefined">
88
- <div class="align-items-center d-flex">
89
- {{ name }}
90
- </div>
91
- <icon-arrow-right
92
- v-if="!link"
93
- class="expand-icon"
94
- style="height: 24px" />
95
- </component>
96
- <input
97
- v-if="!link"
98
- :id="checkboxId"
99
- :name="checkboxId"
100
- type="checkbox"
101
- class="menu-checkbox" />
102
- <!-- fly-out menu -->
103
- <div
104
- v-if="!link"
105
- class="menu">
106
- <!-- mobile menu header -->
107
- <div class="menu-header">
108
- <div class="col-3" />
109
- <div class="col-6 align-self-center text-center py-100">
110
- <div class="nav-es-logo-mobile align-items-center d-flex">
111
- <slot name="logo" />
112
- </div>
113
- <span class="sr-only">
114
- {{ homeName }}
115
- </span>
116
- </div>
117
- <div class="d-flex col-3 justify-content-end">
118
- <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
119
- <label
120
- for="data--main-menu"
121
- class="mb-0">
122
- <icon-x class="menu-toggle align-self-center" />
123
- <span class="sr-only">
124
- {{ closeButtonText }}
125
- </span>
126
- </label>
127
- </div>
128
- </div>
129
- <div class="dropdown-menu dropdown-menu-full-page">
130
- <es-container class="dropdown-menu-primary justify-content-lg-center py-lg-100">
131
- <es-row class="flex-grow-1 justify-content-lg-center">
132
- <div
133
- class="mb-3 mb-lg-0"
134
- :class="{
135
- 'col-lg-9': topics.length >= 3,
136
- 'col-lg-9 col-xl-6 col-xxl-5': topics.length == 2,
137
- 'col-lg-4': topics.length == 1,
138
- }">
139
- <ul class="dropdown-list row w-auto">
140
- <!-- name of top-level menu (won't ever be a link) -->
141
- <li class="nav-item col-lg-12 d-lg-none mb-50 topic-menu-back">
142
- <div class="col-2">
143
- <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
144
- <label
145
- :for="checkboxId"
146
- class="menu-toggle nav-link align-items-center d-flex font-size-sm h-100 mb-0 px-0 text-uppercase w-100">
147
- <icon-arrow-left
148
- class="expand-icon"
149
- style="height: 24px" />
150
- </label>
151
- </div>
152
- <div class="col-8 align-self-center text-center py-100">
153
- <span
154
- class="nav-link justify-content-center align-items-center d-flex font-weight-boldest w-100 h-100"
155
- >{{ name }}</span
156
- >
157
- </div>
158
- <div class="col-2" />
159
- </li>
160
- <!-- @vue-expect-error -->
161
- <es-nav-bar-topic-menu
162
- v-for="topic in topics"
163
- :key="topic.name"
164
- :class="{
165
- 'col-xl-4': topics.length >= 3,
166
- 'col-lg-6': topics.length >= 2,
167
- 'col-lg-12': topics.length == 1,
168
- }"
169
- :home-name="homeName"
170
- :home-link="homeLink"
171
- :close-button-text="closeButtonText"
172
- :items="topic.subtopics"
173
- :link="topic.link"
174
- :new-tab="topic.newTab"
175
- :name="topic.name">
176
- <template #logo>
177
- <slot name="logo" />
178
- </template>
179
- </es-nav-bar-topic-menu>
180
- </ul>
181
- </div>
182
- <!-- article link with image within menu -->
183
- <es-nav-bar-featured-article
184
- class="col-lg-3"
185
- :eyebrow="featuredArticle.linkName"
186
- :link="featuredArticle.linkUrl"
187
- :new-tab="featuredArticle.newTab"
188
- :name="featuredArticle.lede"
189
- :image500="featuredArticle.image500"
190
- :image-alt="featuredArticle.imageAlt" />
191
- </es-row>
192
- </es-container>
193
- </div>
194
- </div>
195
- </div>
196
- </div>
197
- </template>
package/components/es-nav-bar-topic-menu.vue DELETED
@@ -1,197 +0,0 @@
1
- <script lang="ts">
2
- export default {
3
- name: 'EsNavBarTopicMenu',
4
- props: {
5
- homeName: {
6
- type: String,
7
- required: true,
8
- },
9
- homeLink: {
10
- type: String,
11
- required: true,
12
- },
13
- closeButtonText: {
14
- type: String,
15
- required: true,
16
- },
17
- items: {
18
- type: Array,
19
- required: true,
20
- },
21
- link: {
22
- type: String,
23
- default: '',
24
- },
25
- newTab: {
26
- type: Boolean,
27
- default: false,
28
- },
29
- name: {
30
- type: String,
31
- required: true,
32
- },
33
- showItemsOnMobile: {
34
- type: Boolean,
35
- default: true,
36
- },
37
- subHeading: {
38
- type: String,
39
- default: '',
40
- },
41
- },
42
- computed: {
43
- checkboxId() {
44
- return `topMenu-${this.name}`;
45
- },
46
- },
47
- };
48
- </script>
49
-
50
- <template>
51
- <li
52
- class="topic-group border-0 mb-lg-200"
53
- :class="{ 'nav-item': showItemsOnMobile }">
54
- <!-- desktop header, if it's a link -->
55
- <es-nav-bar-link
56
- v-if="link"
57
- class="dropdown-item nav-link topic-menu-header d-none d-lg-block font-size-sm mb-lg-50 position-relative px-lg-0 py-lg-50 text-gray"
58
- :href="link"
59
- :target="newTab ? '_blank' : null">
60
- <span class="align-items-center eyebrow d-flex link-name">
61
- {{ name }}
62
- <icon-arrow-right
63
- class="d-none d-lg-inline-block ml-25"
64
- height="24px"
65
- width="24px" />
66
- </span>
67
- <span
68
- v-if="subHeading"
69
- class="d-block link-subheading">
70
- {{ subHeading }}
71
- </span>
72
- </es-nav-bar-link>
73
- <!-- desktop header, if it's not a link -->
74
- <p
75
- v-else
76
- class="dropdown-toggle topic-menu-header eyebrow align-items-center d-none d-lg-block mb-lg-50 position-relative px-lg-0 py-lg-50">
77
- <span class="d-block">
78
- {{ name }}
79
- </span>
80
- <span
81
- v-if="subHeading"
82
- class="d-block">
83
- {{ subHeading }}
84
- </span>
85
- </p>
86
- <!-- mobile nav item, tapping which drills down to submenu -->
87
- <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
88
- <label
89
- :for="checkboxId"
90
- class="dropdown-label nav-item-border-mobile nav-link align-items-center d-lg-none justify-content-between w-100 h-100 font-weight-bold"
91
- :class="{
92
- 'd-flex': showItemsOnMobile,
93
- 'd-none': !showItemsOnMobile,
94
- }">
95
- {{ name }}
96
- <icon-chevron-right
97
- class="expand-icon"
98
- style="height: 24px" />
99
- </label>
100
- <input
101
- :id="checkboxId"
102
- :name="checkboxId"
103
- type="checkbox"
104
- class="menu-checkbox" />
105
- <div class="menu submenu">
106
- <div class="menu-header">
107
- <div class="col-3" />
108
- <div class="col-6 align-self-center text-center py-100">
109
- <div class="nav-es-logo-mobile align-items-center d-flex">
110
- <slot name="logo" />
111
- </div>
112
- <span class="sr-only">
113
- {{ homeName }}
114
- </span>
115
- </div>
116
- <div class="d-flex col-3 justify-content-end">
117
- <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
118
- <label
119
- for="data--main-menu"
120
- class="mb-0">
121
- <icon-x class="menu-toggle align-self-center" />
122
- <span class="sr-only">
123
- {{ closeButtonText }}
124
- </span>
125
- </label>
126
- </div>
127
- </div>
128
- <ul
129
- class="visible-lg list-unstyled"
130
- style="top: 0">
131
- <li class="nav-item col-lg-12 d-lg-none mb-50">
132
- <div class="col-2">
133
- <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
134
- <label
135
- :for="checkboxId"
136
- class="menu-toggle d-flex w-100 h-100 mb-0 align-items-center font-size-sm">
137
- <icon-arrow-left
138
- class="expand-icon"
139
- style="height: 24px" />
140
- </label>
141
- </div>
142
- <div class="col-8 align-self-center text-center py-100">
143
- <es-nav-bar-link
144
- v-if="link"
145
- class="nav-link font-weight-bold d-flex w-100 h-100 justify-content-center align-items-center"
146
- :href="link"
147
- :target="newTab ? '_blank' : null">
148
- {{ name }}
149
- </es-nav-bar-link>
150
- <div
151
- v-else
152
- class="h-100">
153
- <span
154
- class="nav-item justify-content-center align-items-center d-flex font-weight-boldest h-100 text-decoration-none w-100">
155
- {{ name }}
156
- </span>
157
- </div>
158
- </div>
159
- <div class="col-2">&nbsp;</div>
160
- </li>
161
- <!-- @vue-expect-error -->
162
- <li
163
- v-for="item in items"
164
- :key="item.name">
165
- <!-- @vue-expect-error -->
166
- <es-nav-bar-link
167
- class="dropdown-item nav-item nav-item-border-mobile nav-link d-flex align-items-center ml-lg-0 px-lg-0 py-lg-50"
168
- :class="{ 'font-weight-bold': item.emphasize }"
169
- :href="item.link"
170
- :target="item.newTab ? '_blank' : null">
171
- <!-- @vue-expect-error -->
172
- {{ item.name }}
173
- </es-nav-bar-link>
174
- </li>
175
- </ul>
176
- </div>
177
- <!-- mobile link, shown only if we have a link and don't want to show child items on mobile -->
178
- <es-nav-bar-link
179
- v-if="link"
180
- class="nav-item nav-item-menu nav-item-border-mobile nav-link d-lg-none w-100 text-decoration-none"
181
- :class="{
182
- 'd-none': showItemsOnMobile,
183
- 'd-block': !showItemsOnMobile,
184
- }"
185
- :href="link"
186
- :target="newTab ? '_blank' : null">
187
- <span class="d-block eyebrow link-name">
188
- {{ name }}
189
- </span>
190
- <span
191
- v-if="subHeading"
192
- class="d-block font-size-sm link-subheading">
193
- {{ subHeading }}
194
- </span>
195
- </es-nav-bar-link>
196
- </li>
197
- </template>