Skip to content

Commit 6d6edb7

Browse files
jaredcbaumjaredcbaum
committed
feat(announcement-bar): Hook up to ionic.io announcements
1 parent 5966165 commit 6d6edb7

File tree

9 files changed

+318
-855
lines changed

9 files changed

+318
-855
lines changed

‎package-lock.json

Lines changed: 2 additions & 686 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/img/components/announcement-bar/bg-ioniconf.png

51 KB
Loading

‎src/components.d.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ export namespace Components {
5050
"match"?: MatchResults;
5151
"queue": QueueApi;
5252
}
53+
interface XAnnouncementBar {
54+
}
5355
}
5456
declare global {
5557
interface HTMLAnnouncementBarElement extends Components.AnnouncementBar, HTMLStencilElement {
@@ -112,6 +114,12 @@ declare global {
112114
prototype: HTMLUsagePageElement;
113115
new (): HTMLUsagePageElement;
114116
};
117+
interface HTMLXAnnouncementBarElement extends Components.XAnnouncementBar, HTMLStencilElement {
118+
}
119+
var HTMLXAnnouncementBarElement: {
120+
prototype: HTMLXAnnouncementBarElement;
121+
new (): HTMLXAnnouncementBarElement;
122+
};
115123
interface HTMLElementTagNameMap {
116124
"announcement-bar": HTMLAnnouncementBarElement;
117125
"footer-bar": HTMLFooterBarElement;
@@ -123,6 +131,7 @@ declare global {
123131
"notfound-page": HTMLNotfoundPageElement;
124132
"toast-bar": HTMLToastBarElement;
125133
"usage-page": HTMLUsagePageElement;
134+
"x-announcement-bar": HTMLXAnnouncementBarElement;
126135
}
127136
}
128137
declare namespace LocalJSX {
@@ -172,6 +181,8 @@ declare namespace LocalJSX {
172181
"match"?: MatchResults;
173182
"queue": QueueApi;
174183
}
184+
interface XAnnouncementBar {
185+
}
175186
interface IntrinsicElements {
176187
"announcement-bar": AnnouncementBar;
177188
"footer-bar": FooterBar;
@@ -183,6 +194,7 @@ declare namespace LocalJSX {
183194
"notfound-page": NotfoundPage;
184195
"toast-bar": ToastBar;
185196
"usage-page": UsagePage;
197+
"x-announcement-bar": XAnnouncementBar;
186198
}
187199
}
188200
export { LocalJSX as JSX };
@@ -199,6 +211,7 @@ declare module "@stencil/core" {
199211
"notfound-page": LocalJSX.NotfoundPage & JSXBase.HTMLAttributes<HTMLNotfoundPageElement>;
200212
"toast-bar": LocalJSX.ToastBar & JSXBase.HTMLAttributes<HTMLToastBarElement>;
201213
"usage-page": LocalJSX.UsagePage & JSXBase.HTMLAttributes<HTMLUsagePageElement>;
214+
"x-announcement-bar": LocalJSX.XAnnouncementBar & JSXBase.HTMLAttributes<HTMLXAnnouncementBarElement>;
202215
}
203216
}
204217
}

‎src/components/announcement-bar/announcement-bar.scss

Lines changed: 45 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,64 @@
11
announcement-bar {
2-
background: #F8FAFC;
3-
box-shadow: 0 1px 0px 0 rgba(0,20,56,.06);
4-
position: relative;
5-
z-index: 999;
6-
padding: 6px 0 7px;
7-
text-align: center;
8-
color: #73849A;
2+
display: block;
3+
margin-inline-start: auto;
4+
margin-inline-end: auto;
95

10-
.container {
11-
position: relative;
12-
font-size: 11px;
13-
line-height: 1.8em;
14-
font-weight: 400;
15-
letter-spacing: -.01em;
16-
display: flex;
17-
flex-wrap: wrap;
18-
justify-content: center;
19-
align-content: center;
20-
21-
&:before,
22-
&:after {
23-
display: none;
24-
}
6+
@media (max-width: 48em) {
7+
display: none;
258
}
9+
}
10+
.announcement-bar--ioniconf {
11+
background: #000 var(--asset-path);
12+
background-size: 1800px;
13+
background-position: center;
14+
background-repeat: no-repeat;
15+
background-size: cover;
2616

27-
p {
28-
display: inline;
29-
margin: 4px 0 0;
30-
color: #73849A;
31-
}
17+
.ui-container {
18+
&::before {
19+
content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU1IiBoZWlnaHQ9IjIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNDYuOTMgNy4zM3YtLjVoLTQuNDZWMy45NGwxLjM3LS4xYTQuOTYgNC45NiAwIDAwMi45LS45NiA0LjA4IDQuMDggMCAwMDEuMjgtMi4xMWgzLjF2MTQuOTloMy4zOHYzLjQyaC0xMi4yNXYtMy40Mmg0LjY4VjcuMzN6IiBzdHJva2U9IiMwMEQyODciLz48cGF0aCBkPSJNMTI4LjkzIDguMThoLTQuMDVhNS45MiA1LjkyIDAgMDEtLjItMS41OGMwLTMuNjYgMy4xNi02LjEgNy4wMi02LjEgMi4xMyAwIDMuODIuNjIgNC45OCAxLjY1YTUuNDcgNS40NyAwIDAxMS44IDQuMjFjMCAyLjQzLTEuNDcgNC4yNS0zLjY4IDYuMDUgMCAwIDAgMCAwIDBsLTIuOTggMi40LTEuMS45aDcuNzJ2My40N0gxMjQuOXYtMi45M2w1LjI2LTQuMzNzMCAwIDAgMGMxLjIyLS45OSAyLjIyLTEuODIgMi45MS0yLjYyLjctLjggMS4xMy0xLjYxIDEuMTMtMi41NiAwLS43LS4yMi0xLjM4LS42Ny0xLjlhMi41NyAyLjU3IDAgMDAtMi0uODQgMi42IDIuNiAwIDAwLTIuMDMuOTFjLS40Ny41Ni0uNyAxLjMtLjcgMi4wNyAwIC40Mi4wNC44Mi4xMyAxLjJ6IiBzdHJva2U9IiNGRkNFMzEiLz48bWFzayBpZD0iYSIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTEwNy4xNyAxMGMwIDUuOSAyLjc0IDEwIDcuNjggMTAgNC45NSAwIDcuNjgtNC4xIDcuNjgtMTBzLTIuNzMtMTAtNy42OC0xMGMtNC45NCAwLTcuNjggNC4xLTcuNjggMTB6bTQuOTUgMGMwLTMuMzQuNi01LjkgMi43My01LjkgMS4wNyAwIDEuNzUuNjIgMi4xNiAxLjY3bC00Ljg5IDQuNThWMTB6bTUuNDcgMGMwIDMuMzQtLjYgNS45LTIuNzQgNS45LTEuMDYgMC0xLjc1LS42Mi0yLjE2LTEuNjdsNC45LTQuNTVWMTB6Ii8+PC9tYXNrPjxwYXRoIGQ9Ik0xMTcuMDEgNS43N2wuNjkuNzMuNS0uNDYtLjI2LS42NC0uOTMuMzd6bS00Ljg5IDQuNThoLTF2Mi4zbDEuNjgtMS41Ny0uNjgtLjczem0uNTcgMy44OGwtLjY4LS43My0uNS40Ni4yNS42NC45My0uMzd6bTQuOS00LjU1aDF2LTIuM2wtMS42OCAxLjU2LjY4Ljc0em0tMTEuNDIuMzJjMCAzLjA5LjcyIDUuODIgMi4xOCA3LjhhNy43NyA3Ljc3IDAgMDA2LjUgMy4ydi0yYTUuNzggNS43OCAwIDAxLTQuODktMi4zOGMtMS4xMy0xLjU0LTEuNzktMy44LTEuNzktNi42MmgtMnptOC42OCAxMWMyLjc5IDAgNS4wMS0xLjE3IDYuNS0zLjIgMS40Ny0xLjk4IDIuMTgtNC43MSAyLjE4LTcuOGgtMmMwIDIuODEtLjY1IDUuMDgtMS43OCA2LjYyYTUuNzggNS43OCAwIDAxLTQuOSAyLjM4djJ6bTguNjgtMTFjMC0zLjA5LS43LTUuODItMi4xOC03LjhhNy43NyA3Ljc3IDAgMDAtNi41LTMuMnYyYzIuMTcgMCAzLjc5Ljg4IDQuOSAyLjM4IDEuMTMgMS41NCAxLjc4IDMuOCAxLjc4IDYuNjJoMnptLTguNjgtMTFjLTIuNzggMC01IDEuMTctNi41IDMuMi0xLjQ2IDEuOTgtMi4xOCA0LjcxLTIuMTggNy44aDJjMC0yLjgxLjY2LTUuMDggMS44LTYuNjJBNS43OCA1Ljc4IDAgMDExMTQuODQgMXYtMnptLTEuNzMgMTFjMC0xLjY0LjE1LTIuOTYuNS0zLjg0YTIgMiAwIDAxLjU0LS44NGMuMTctLjEzLjM4LS4yMi43LS4yMnYtMmMtLjc2IDAtMS40Mi4yMy0xLjk3LjY4YTMuOTkgMy45OSAwIDAwLTEuMTMgMS42NSAxMy4wNCAxMy4wNCAwIDAwLS42NCA0LjU3aDJ6bTEuNzMtNC45Yy4zMyAwIC41NC4wOS43LjIyLjE4LjE0LjM3LjQuNTMuODFsMS44Ni0uNzNhMy44OCAzLjg4IDAgMDAtMS4xMy0xLjY0IDMuMDQgMy4wNCAwIDAwLTEuOTYtLjY2djJ6bTEuNDgtLjA2bC00LjkgNC41OCAxLjM3IDEuNDYgNC45LTQuNTgtMS4zNy0xLjQ2em0tMy4yMSA1LjMxdi0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMVYxMCAxMGgtMS0xVjEwLjM2aDJ6bTMuNDctLjM1YzAgMS42NC0uMTYgMi45Ni0uNSAzLjg0LS4xNy40My0uMzYuNjktLjU0Ljg0LS4xNy4xMy0uMzguMjItLjcuMjJ2MmMuNzUgMCAxLjQyLS4yMyAxLjk3LS42OC41Mi0uNDMuODgtMS4wMiAxLjEzLTEuNjUuNDktMS4yNC42NC0yLjg3LjY0LTQuNTdoLTJ6bS0xLjc0IDQuOWMtLjMyIDAtLjUzLS4wOS0uNy0uMjJhMS45IDEuOSAwIDAxLS41Mi0uODFsLTEuODcuNzNjLjI1LjYzLjYgMS4yMSAxLjE0IDEuNjQuNTUuNDQgMS4yMS42NiAxLjk1LjY2di0yem0tMS40Ny4wNmw0Ljg5LTQuNTUtMS4zNi0xLjQ3LTQuOSA0LjU2IDEuMzcgMS40NnptMy4yLTUuMjhWMTBoMnYtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMS0uMDEtLjAxLS4wMWgtMnoiIGZpbGw9IiMyNEEzRkYiIG1hc2s9InVybCgjYSkiLz48cGF0aCBkPSJNOTUuNTggOC4xOGgtNC4wNGE1LjkyIDUuOTIgMCAwMS0uMi0xLjU4YzAtMy42NiAzLjE2LTYuMSA3LjAxLTYuMSAyLjE0IDAgMy44My42MiA0Ljk4IDEuNjVhNS40NyA1LjQ3IDAgMDExLjggNC4yMWMwIDIuNDMtMS40NiA0LjI1LTMuNjcgNi4wNSAwIDAgMCAwIDAgMGwtMi45OCAyLjQtMS4xLjloNy43MXYzLjQ3SDkxLjU3di0yLjkzbDUuMjUtNC4zM3MwIDAgMCAwYTI0LjIgMjQuMiAwIDAwMi45MS0yLjYyYy43LS44IDEuMTMtMS42MSAxLjEzLTIuNTYgMC0uNy0uMjItMS4zOC0uNjctMS45QTIuNTcgMi41NyAwIDAwOTguMTkgNGEyLjYgMi42IDAgMDAtMi4wNC45MWMtLjQ3LjU2LS43IDEuMy0uNyAyLjA3IDAgLjQyLjA0LjgyLjEzIDEuMnoiIHN0cm9rZT0iI0YyNEM1OCIvPjxwYXRoIGQ9Ik0xLjA4IDQuM2MuNjIgMCAxLjA5LS40MyAxLjA5LTEgMC0uNjItLjQ3LTEuMDQtMS4wOS0xLjA0Qy40NSAyLjI2IDAgMi42OCAwIDMuMjljMCAuNTguNDUgMSAxLjA4IDF6TS40MiAxOS4zNWgxLjNWNi4wM0guNDJ2MTMuMzJ6TTEwLjE2IDE5LjY3YzQuNCAwIDcuMDYtMy4zNiA3LjA2LTYuOThhNi44NiA2Ljg2IDAgMDAtNy4wNi02Ljk4IDYuODYgNi44NiAwIDAwLTcuMDcgNi45OCA2Ljg2IDYuODYgMCAwMDcuMDcgNi45OHptLTUuNzQtNi45OGMwLTMuMjMgMi4yMy01Ljg0IDUuNzQtNS44NCAzLjUgMCA1LjczIDIuNjEgNS43MyA1Ljg0IDAgMy4yMi0yLjIzIDUuODQtNS43MyA1Ljg0LTMuNSAwLTUuNzQtMi42Mi01Ljc0LTUuODR6TTIwLjIgNi4wM2gtMS4zdjEzLjMyaDEuM1YxMS4zYzAtMi45OCAyLjE1LTQuNDkgNC42OC00LjQ5IDIuOCAwIDQuMTQgMS42MSA0LjE0IDQuM3Y4LjIzaDEuMzF2LTguNmMwLTIuODctMS44NC01LjA0LTUuMzQtNS4wNC0yLjk4IDAtNC4zNyAxLjcyLTQuNzkgMi40OVY2LjAzek0zMi45NSA0LjNjLjYxIDAgMS4wOS0uNDMgMS4wOS0xIDAtLjYyLS40OC0xLjA0LTEuMDktMS4wNC0uNjQgMC0xLjA4LjQyLTEuMDggMS4wMyAwIC41OC40NCAxIDEuMDggMXptLS42NyAxNS4wNWgxLjMxVjYuMDNoLTEuM3YxMy4zMnpNMzUuMDQgMTIuNWE3IDcgMCAwMDcuMiA3LjE3YzQuMjkgMCA2LjQ2LTIuODMgNi44NS01LjI5aC0zLjRjLS4zOCAxLjQ4LTEuNyAyLjUxLTMuNDcgMi41MS0yLjM3IDAtMy44Ny0xLjgyLTMuODctNC4zOSAwLTIuNTkgMS41LTQuNDEgMy44Ny00LjQxIDEuNzggMCAzLjA5IDEuMDMgMy40OCAyLjUxaDMuMzljLS4zOS0yLjQ2LTIuNTYtNS4yOC02Ljg0LTUuMjgtNC4yNiAwLTcuMjEgMy4yLTcuMjEgNy4xOHpNNTcuMjMgMTkuNjdjNC42MiAwIDcuNTEtMy4zIDcuNTEtNy4xNyAwLTMuODUtMi45LTcuMTgtNy41LTcuMThzLTcuNSAzLjMzLTcuNSA3LjE4YzAgMy44NiAyLjkgNy4xNyA3LjQ5IDcuMTd6bS00LjE3LTcuMTdjMC0yLjY3IDEuNzgtNC40MSA0LjE3LTQuNDEgMi40MiAwIDQuMiAxLjc0IDQuMiA0LjQxIDAgMi42NS0xLjc4IDQuMzktNC4yIDQuMzktMi40IDAtNC4xNy0xLjc0LTQuMTctNC4zOXpNNjkuMyA1LjYzaC0zLjA1djEzLjcyaDMuM3YtNy45NmMwLTIuMTQgMS4zMi0zLjM4IDMuNC0zLjM4IDEuOTggMCAyLjg3IDEuMjQgMi44NyAzLjEydjguMjJoMy4zdi04LjYyYzAtMy4yLTEuODYtNS40MS01LjM2LTUuNDEtMi4zNyAwLTMuODQgMS4wNS00LjQ1IDIuMTRWNS42M3pNODAuNjcgOC4xNHYxMS4yaDMuMzFWOC4xNWgyLjczdi0yLjVoLTIuNzN2LS40N2MwLTEuNS41My0yLjAzIDEuODctMi4wM2guODZWLjQ0cy0uOS0uMS0xLjUzLS4xYy0yLjc2IDAtNC41IDEuNDItNC41IDQuNjV2My4xNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
20+
margin-block-end: -8px;
21+
}
3222

33-
strong {
34-
font-weight: 600;
35-
color: #020814;
23+
min-height: 4.625rem;
24+
display: grid;
25+
align-items: center;
26+
justify-content: center;
27+
column-gap: 2rem;
28+
grid-template-columns: 155px fit-content(100%) fit-content(100%);
3629
}
3730

38-
a {
39-
background-color: var(--color-dodger-blue);
40-
color: #fff;
41-
border-radius: 16px;
42-
margin-left: 12px;
43-
padding: 6px 8px 5px;
31+
p {
4432
font-weight: 600;
45-
font-size: 9px;
46-
line-height: 1em;
47-
text-decoration: none;
48-
text-transform: uppercase;
49-
vertical-align: 0;
50-
white-space: pre;
51-
letter-spacing: .02em;
52-
transition: .2s background-color, .2s box-shadow;
33+
font-size: 14px;
34+
line-height: 17px;
35+
color: #dee3ea;
36+
margin: 0;
5337

54-
&::after {
55-
font-family: 'Ionicons';
56-
content: '\f3d1';
57-
margin-left: 3px;
58-
}
59-
60-
&:hover {
61-
background-color: --color-dodger-blue-light;
62-
// background-color: lighten(#30427e, 5);
63-
box-shadow: 0 1px 2px rgba(black, .1);
38+
strong,
39+
b {
40+
color: #fff;
6441
}
6542
}
6643

67-
@media (max-width: 768px) {
68-
display: none;
69-
}
70-
}
71-
.announcement-bar--studio {
72-
background-color: #0B0C10;
73-
background-image: url('https://ionicframework.com/img/products/studio/preheader-bg-2.png');
74-
background-repeat: no-repeat;
75-
background-size: 1224px 49px;
76-
background-position: center;
77-
color: #B2BECD;
78-
padding: 10px 0 12px;
44+
.button {
45+
font-weight: bold;
46+
font-size: 12px;
47+
line-height: 15px;
48+
letter-spacing: 0.08em;
49+
color: #ffffff;
7950

80-
.container {
81-
font-size: 13px;
82-
}
51+
min-height: 2rem;
8352

84-
.container > div {
85-
display: flex;
86-
align-items: center;
87-
justify-content: center;
88-
}
53+
padding: 8px 12px 9px;
8954

90-
.container > div::before {
91-
display: block;
92-
content: '';
93-
background-image: url('https://ionicframework.com/img/products/studio/studio-logo.svg');
94-
width: 78px;
95-
height: 21px;
96-
margin-right: 24px;
97-
}
55+
border-radius: 0px;
9856

99-
.container p {
100-
margin-bottom: 0;
101-
color: #b2becd;
102-
}
103-
104-
a {
105-
font-size: 11px;
106-
padding: 10px;
107-
margin-left: 24px;
108-
}
57+
white-space: nowrap;
58+
text-transform: uppercase;
10959

110-
a:hover {
111-
background-color: lighten(#3880FF, 5%);
60+
background: linear-gradient(0deg, #ff8753, #ff8753),
61+
linear-gradient(85.46deg, #4cc3ff 0%, #4172ff 100%), #51dddd;
62+
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.06);
11263
}
11364
}

‎src/components/announcement-bar/announcement-bar.tsx

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { Component, State, h } from '@stencil/core';
2-
import Prismic from 'prismic-javascript';
3-
import PrismicDOM from 'prismic-dom';
4-
import { ResponsiveContainer } from '@ionic-internal/ionic-ds';
1+
import { Component, State, h } from "@stencil/core";
2+
import Prismic from "prismic-javascript";
3+
import PrismicDOM from "prismic-dom";
4+
import { ResponsiveContainer } from "@ionic-internal/ionic-ds";
5+
import { slugify } from "../../global/common";
56

67
@Component({
7-
tag: 'announcement-bar',
8-
styleUrl: 'announcement-bar.scss'
8+
tag: "announcement-bar",
9+
styleUrl: "announcement-bar.scss",
10+
assetsDirs: ["announcement-bar-assets"],
911
})
1012
export class AnnouncementBar {
11-
12-
apiURL = 'https://ionicframeworkcom.prismic.io/api/v2';
13+
apiURL = "https://ionicframeworkcom.prismic.io/api/v2";
1314

1415
@State() data: any;
1516

@@ -19,24 +20,33 @@ export class AnnouncementBar {
1920

2021
async getLatest() {
2122
const api = await Prismic.getApi(this.apiURL);
22-
const single = await api.getSingle('ionicons_announcement_bar')
23-
// console.log(single)
23+
const single = await api.getSingle("announcement_bar");
2424
this.data = single.data;
25-
25+
// console.log(single);
2626
}
2727

2828
render() {
29+
if (!this.data || Object.keys(this.data).length === 0) return;
2930

30-
if(!this.data || Object.keys(this.data).length === 0) return;
31+
const theme = slugify(this.data.theme);
3132

3233
return (
33-
<nav class={this.data.theme === 'Studio' ? 'announcement-bar--studio' : ''}>
34-
<ResponsiveContainer>
35-
<div innerHTML={PrismicDOM.RichText.asHtml(this.data.text)}></div>
36-
<a href={this.data.link.url}
37-
target="_blank">{this.data.button_text}</a>
38-
</ResponsiveContainer>
39-
</nav>
40-
)
34+
<a href={this.data.link.url} target="_blank" class="wrapper">
35+
<nav
36+
style={{
37+
"--asset-path": `url('assets/img/components/announcement-bar/bg-${theme}.png')`,
38+
}}
39+
class={`announcement-bar announcement-bar--${theme}`}
40+
>
41+
<ResponsiveContainer>
42+
<div innerHTML={PrismicDOM.RichText.asHtml(this.data.text)}></div>
43+
<a href={this.data.link.url} target="_blank" class="button">
44+
{this.data.button_text}{" "}
45+
<span style={{ letterSpacing: "0" }}>-&gt;</span>
46+
</a>
47+
</ResponsiveContainer>
48+
</nav>
49+
</a>
50+
);
4151
}
42-
}
52+
}

0 commit comments

Comments
 (0)