@comicrelief/component-library 7.11.2 → 7.12.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/dist/components/Organisms/Header/Header.md +67 -1
- package/dist/components/Organisms/Header/assets/icon--mail--2023.svg +3 -0
- package/dist/components/Organisms/Header/assets/icon--search--2023.svg +3 -0
- package/dist/components/Organisms/Header/assets/icon--shop--2023.svg +3 -0
- package/package.json +1 -1
- package/src/components/Organisms/Header/Header.md +67 -1
- package/src/components/Organisms/Header/assets/icon--mail--2023.svg +3 -0
- package/src/components/Organisms/Header/assets/icon--search--2023.svg +3 -0
- package/src/components/Organisms/Header/assets/icon--shop--2023.svg +3 -0
- package/dist/components/Organisms/Header/assets/icon--search.svg +0 -5
- package/src/components/Organisms/Header/assets/icon--search.svg +0 -5
|
@@ -41,7 +41,7 @@ import Link from '../../Atoms/Link/Link';
|
|
|
41
41
|
```js
|
|
42
42
|
import data from './data/data';
|
|
43
43
|
import Link from '../../Atoms/Link/Link';
|
|
44
|
-
import searchIcon from './assets/icon--search.svg';
|
|
44
|
+
import searchIcon from './assets/icon--search--2023.svg';
|
|
45
45
|
import Icon from '../../Atoms/SocialIcons/Icon/Icon';
|
|
46
46
|
import RichText from '../../Atoms/RichText/RichText';
|
|
47
47
|
|
|
@@ -89,3 +89,69 @@ const [success, setSuccess] = React.useState(false);
|
|
|
89
89
|
}
|
|
90
90
|
/>;
|
|
91
91
|
```
|
|
92
|
+
|
|
93
|
+
# Comic Relief header with Search and Shop
|
|
94
|
+
|
|
95
|
+
```js
|
|
96
|
+
import data from './data/data';
|
|
97
|
+
import Link from '../../Atoms/Link/Link';
|
|
98
|
+
import searchIcon from './assets/icon--search--2023.svg';
|
|
99
|
+
import shopIcon from './assets/icon--shop--2023.svg';
|
|
100
|
+
import Icon from '../../Atoms/SocialIcons/Icon/Icon';
|
|
101
|
+
import RichText from '../../Atoms/RichText/RichText';
|
|
102
|
+
|
|
103
|
+
const title = 'Stay in the know!';
|
|
104
|
+
const topCopy = (
|
|
105
|
+
<RichText
|
|
106
|
+
markup={`<p>Get regular email updates and info on what we're up to!</p>`}
|
|
107
|
+
/>
|
|
108
|
+
);
|
|
109
|
+
const privacyCopy = (
|
|
110
|
+
<RichText
|
|
111
|
+
markup={`<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
|
|
112
|
+
/>
|
|
113
|
+
);
|
|
114
|
+
const successCopy = (
|
|
115
|
+
<RichText
|
|
116
|
+
markup={`<p>Thanks! Your first email will be with you shortly</p>`}
|
|
117
|
+
/>
|
|
118
|
+
);
|
|
119
|
+
|
|
120
|
+
initialState = { isSuccess: false };
|
|
121
|
+
const [success, setSuccess] = React.useState(false);
|
|
122
|
+
|
|
123
|
+
<Header
|
|
124
|
+
navItems={data}
|
|
125
|
+
rotate="true"
|
|
126
|
+
metaIcons={
|
|
127
|
+
<>
|
|
128
|
+
<Link color="green" type="button" href="/donation">
|
|
129
|
+
Donate
|
|
130
|
+
</Link>
|
|
131
|
+
|
|
132
|
+
<div>
|
|
133
|
+
<Icon
|
|
134
|
+
icon={searchIcon}
|
|
135
|
+
title="Search"
|
|
136
|
+
target="self"
|
|
137
|
+
role="button"
|
|
138
|
+
href="/search"
|
|
139
|
+
brand="comicrelief"
|
|
140
|
+
tabIndex="0"
|
|
141
|
+
/>
|
|
142
|
+
</div>
|
|
143
|
+
<div>
|
|
144
|
+
<Icon
|
|
145
|
+
icon={shopIcon}
|
|
146
|
+
title="Shop"
|
|
147
|
+
target="_blank"
|
|
148
|
+
role="button"
|
|
149
|
+
href="https://shop.comicrelief.com"
|
|
150
|
+
brand="comicrelief"
|
|
151
|
+
tabIndex="0"
|
|
152
|
+
/>
|
|
153
|
+
</div>
|
|
154
|
+
</>
|
|
155
|
+
}
|
|
156
|
+
/>;
|
|
157
|
+
```
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M22.9707 3.5H2.9707C2.4182 3.5 1.9707 3.9475 1.9707 4.5V19.5C1.9707 20.052 2.4187 20.5 2.9707 20.5H22.9707C23.5227 20.5 23.9707 20.052 23.9707 19.5V4.5C23.9707 3.9475 23.5227 3.5 22.9707 3.5ZM20.9202 5.5L12.9707 12.6545L5.0212 5.5H20.9202ZM3.9707 18.5V7.2455L12.3017 14.7435C12.4917 14.9145 12.7312 15 12.9707 15C13.2102 15 13.4497 14.9145 13.6397 14.7435L21.9707 7.2455V18.5H3.9707Z" fill="#222222"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M22.7073 21.2927L16.0635 14.6493C17.274 13.132 18 11.2122 18 9.125C18 4.23125 14.0188 0.25 9.125 0.25C4.23125 0.25 0.25 4.23125 0.25 9.125C0.25 14.0188 4.23125 18 9.125 18C11.2122 18 13.132 17.274 14.6493 16.0635L21.293 22.7073C21.4882 22.9023 21.744 23 22 23C22.256 23 22.5118 22.9023 22.7073 22.7073C23.0977 22.3165 23.0977 21.6835 22.7073 21.2927ZM9.125 16C5.334 16 2.25 12.916 2.25 9.125C2.25 5.334 5.334 2.25 9.125 2.25C12.916 2.25 16 5.334 16 9.125C16 12.916 12.916 16 9.125 16ZM13.6105 8.994C13.573 8.998 13.5357 9 13.4987 9C12.996 9 12.563 8.62175 12.506 8.11025C12.3812 6.98775 11.0117 5.61825 9.8895 5.49375C9.34075 5.43275 8.94525 4.93825 9.006 4.3895C9.067 3.8405 9.5595 3.445 10.1103 3.506C12.175 3.73525 14.2642 5.82475 14.4937 7.8895C14.5547 8.4385 14.1593 8.93275 13.6105 8.994Z" fill="#222222"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M22.4856 19.8241L19.9856 5.33457C19.8971 4.82257 19.4306 4.46457 18.9136 4.50807L17.1071 4.66507C16.8286 3.61007 16.3466 2.49757 15.5106 1.77757C14.7791 1.14657 13.8611 0.889575 12.8596 1.03157C12.2566 1.11757 11.7461 1.32857 11.3066 1.62207C11.3056 1.62207 11.3051 1.62157 11.3041 1.62107C8.45206 0.708575 6.52456 3.29957 5.74006 5.13257L5.19506 5.02357C4.93206 4.97157 4.65806 5.02657 4.43556 5.17807C4.21406 5.32957 4.06206 5.56357 4.01456 5.82807L1.51456 19.8176C1.46256 20.1091 1.54256 20.4086 1.73256 20.6356C1.92256 20.8626 2.20306 20.9936 2.49906 20.9936H4.38156L5.10456 22.4396C5.11156 22.4536 5.12256 22.4631 5.13006 22.4766C5.15956 22.5291 5.19406 22.5781 5.23306 22.6251C5.25106 22.6466 5.26656 22.6696 5.28556 22.6891C5.29206 22.6956 5.29606 22.7036 5.30306 22.7101C5.35456 22.7601 5.41106 22.8021 5.47056 22.8391C5.48406 22.8476 5.49856 22.8531 5.51256 22.8611C5.57106 22.8941 5.63256 22.9201 5.69606 22.9406C5.71706 22.9471 5.73706 22.9536 5.75856 22.9591C5.83606 22.9781 5.91506 22.9916 5.99606 22.9916C5.99706 22.9916 5.99856 22.9921 5.99956 22.9921C6.00156 22.9921 6.00356 22.9916 6.00556 22.9916C6.04556 22.9916 6.08606 22.9891 6.12656 22.9836L21.6266 20.9851C21.8971 20.9506 22.1411 20.8066 22.3036 20.5871C22.4666 20.3686 22.5316 20.0931 22.4856 19.8241ZM13.1421 3.01157C13.5791 2.94857 13.9061 3.03507 14.2036 3.29107C14.5981 3.63057 14.8771 4.21057 15.0726 4.84207L11.2841 5.17107C11.5666 4.10907 12.1091 3.15907 13.1421 3.01157ZM9.76656 3.50357C9.49856 4.08007 9.31306 4.71257 9.18806 5.35357L7.79706 5.47457C8.17606 4.74507 8.85106 3.74557 9.76656 3.50357ZM3.69456 18.9941L5.80506 7.18507L6.41806 7.30757L5.28206 19.0356C5.19156 19.0091 5.09706 18.9941 5.00006 18.9941H3.69456ZM7.11606 20.8406L8.41506 7.42807L8.98056 7.37907C8.97356 7.80307 8.98556 8.20757 9.01556 8.57107C9.05906 9.09307 9.49656 9.48757 10.0111 9.48757C10.0391 9.48757 10.0666 9.48657 10.0951 9.48407C10.6456 9.43808 11.0546 8.95457 11.0086 8.40407C11.0071 8.38857 10.9726 7.89057 11.0011 7.20257L15.4476 6.81607C15.4736 7.09507 15.4861 7.33357 15.4876 7.49907C15.4916 8.05107 15.9211 8.50957 16.4936 8.49207C17.0456 8.48907 17.4911 8.03857 17.4876 7.48607C17.4871 7.38257 17.4816 7.07307 17.4441 6.64257L18.1711 6.57957L20.3371 19.1346L7.11606 20.8406Z" fill="#222222"/>
|
|
3
|
+
</svg>
|
package/package.json
CHANGED
|
@@ -41,7 +41,7 @@ import Link from '../../Atoms/Link/Link';
|
|
|
41
41
|
```js
|
|
42
42
|
import data from './data/data';
|
|
43
43
|
import Link from '../../Atoms/Link/Link';
|
|
44
|
-
import searchIcon from './assets/icon--search.svg';
|
|
44
|
+
import searchIcon from './assets/icon--search--2023.svg';
|
|
45
45
|
import Icon from '../../Atoms/SocialIcons/Icon/Icon';
|
|
46
46
|
import RichText from '../../Atoms/RichText/RichText';
|
|
47
47
|
|
|
@@ -89,3 +89,69 @@ const [success, setSuccess] = React.useState(false);
|
|
|
89
89
|
}
|
|
90
90
|
/>;
|
|
91
91
|
```
|
|
92
|
+
|
|
93
|
+
# Comic Relief header with Search and Shop
|
|
94
|
+
|
|
95
|
+
```js
|
|
96
|
+
import data from './data/data';
|
|
97
|
+
import Link from '../../Atoms/Link/Link';
|
|
98
|
+
import searchIcon from './assets/icon--search--2023.svg';
|
|
99
|
+
import shopIcon from './assets/icon--shop--2023.svg';
|
|
100
|
+
import Icon from '../../Atoms/SocialIcons/Icon/Icon';
|
|
101
|
+
import RichText from '../../Atoms/RichText/RichText';
|
|
102
|
+
|
|
103
|
+
const title = 'Stay in the know!';
|
|
104
|
+
const topCopy = (
|
|
105
|
+
<RichText
|
|
106
|
+
markup={`<p>Get regular email updates and info on what we're up to!</p>`}
|
|
107
|
+
/>
|
|
108
|
+
);
|
|
109
|
+
const privacyCopy = (
|
|
110
|
+
<RichText
|
|
111
|
+
markup={`<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
|
|
112
|
+
/>
|
|
113
|
+
);
|
|
114
|
+
const successCopy = (
|
|
115
|
+
<RichText
|
|
116
|
+
markup={`<p>Thanks! Your first email will be with you shortly</p>`}
|
|
117
|
+
/>
|
|
118
|
+
);
|
|
119
|
+
|
|
120
|
+
initialState = { isSuccess: false };
|
|
121
|
+
const [success, setSuccess] = React.useState(false);
|
|
122
|
+
|
|
123
|
+
<Header
|
|
124
|
+
navItems={data}
|
|
125
|
+
rotate="true"
|
|
126
|
+
metaIcons={
|
|
127
|
+
<>
|
|
128
|
+
<Link color="green" type="button" href="/donation">
|
|
129
|
+
Donate
|
|
130
|
+
</Link>
|
|
131
|
+
|
|
132
|
+
<div>
|
|
133
|
+
<Icon
|
|
134
|
+
icon={searchIcon}
|
|
135
|
+
title="Search"
|
|
136
|
+
target="self"
|
|
137
|
+
role="button"
|
|
138
|
+
href="/search"
|
|
139
|
+
brand="comicrelief"
|
|
140
|
+
tabIndex="0"
|
|
141
|
+
/>
|
|
142
|
+
</div>
|
|
143
|
+
<div>
|
|
144
|
+
<Icon
|
|
145
|
+
icon={shopIcon}
|
|
146
|
+
title="Shop"
|
|
147
|
+
target="_blank"
|
|
148
|
+
role="button"
|
|
149
|
+
href="https://shop.comicrelief.com"
|
|
150
|
+
brand="comicrelief"
|
|
151
|
+
tabIndex="0"
|
|
152
|
+
/>
|
|
153
|
+
</div>
|
|
154
|
+
</>
|
|
155
|
+
}
|
|
156
|
+
/>;
|
|
157
|
+
```
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M22.9707 3.5H2.9707C2.4182 3.5 1.9707 3.9475 1.9707 4.5V19.5C1.9707 20.052 2.4187 20.5 2.9707 20.5H22.9707C23.5227 20.5 23.9707 20.052 23.9707 19.5V4.5C23.9707 3.9475 23.5227 3.5 22.9707 3.5ZM20.9202 5.5L12.9707 12.6545L5.0212 5.5H20.9202ZM3.9707 18.5V7.2455L12.3017 14.7435C12.4917 14.9145 12.7312 15 12.9707 15C13.2102 15 13.4497 14.9145 13.6397 14.7435L21.9707 7.2455V18.5H3.9707Z" fill="#222222"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M22.7073 21.2927L16.0635 14.6493C17.274 13.132 18 11.2122 18 9.125C18 4.23125 14.0188 0.25 9.125 0.25C4.23125 0.25 0.25 4.23125 0.25 9.125C0.25 14.0188 4.23125 18 9.125 18C11.2122 18 13.132 17.274 14.6493 16.0635L21.293 22.7073C21.4882 22.9023 21.744 23 22 23C22.256 23 22.5118 22.9023 22.7073 22.7073C23.0977 22.3165 23.0977 21.6835 22.7073 21.2927ZM9.125 16C5.334 16 2.25 12.916 2.25 9.125C2.25 5.334 5.334 2.25 9.125 2.25C12.916 2.25 16 5.334 16 9.125C16 12.916 12.916 16 9.125 16ZM13.6105 8.994C13.573 8.998 13.5357 9 13.4987 9C12.996 9 12.563 8.62175 12.506 8.11025C12.3812 6.98775 11.0117 5.61825 9.8895 5.49375C9.34075 5.43275 8.94525 4.93825 9.006 4.3895C9.067 3.8405 9.5595 3.445 10.1103 3.506C12.175 3.73525 14.2642 5.82475 14.4937 7.8895C14.5547 8.4385 14.1593 8.93275 13.6105 8.994Z" fill="#222222"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M22.4856 19.8241L19.9856 5.33457C19.8971 4.82257 19.4306 4.46457 18.9136 4.50807L17.1071 4.66507C16.8286 3.61007 16.3466 2.49757 15.5106 1.77757C14.7791 1.14657 13.8611 0.889575 12.8596 1.03157C12.2566 1.11757 11.7461 1.32857 11.3066 1.62207C11.3056 1.62207 11.3051 1.62157 11.3041 1.62107C8.45206 0.708575 6.52456 3.29957 5.74006 5.13257L5.19506 5.02357C4.93206 4.97157 4.65806 5.02657 4.43556 5.17807C4.21406 5.32957 4.06206 5.56357 4.01456 5.82807L1.51456 19.8176C1.46256 20.1091 1.54256 20.4086 1.73256 20.6356C1.92256 20.8626 2.20306 20.9936 2.49906 20.9936H4.38156L5.10456 22.4396C5.11156 22.4536 5.12256 22.4631 5.13006 22.4766C5.15956 22.5291 5.19406 22.5781 5.23306 22.6251C5.25106 22.6466 5.26656 22.6696 5.28556 22.6891C5.29206 22.6956 5.29606 22.7036 5.30306 22.7101C5.35456 22.7601 5.41106 22.8021 5.47056 22.8391C5.48406 22.8476 5.49856 22.8531 5.51256 22.8611C5.57106 22.8941 5.63256 22.9201 5.69606 22.9406C5.71706 22.9471 5.73706 22.9536 5.75856 22.9591C5.83606 22.9781 5.91506 22.9916 5.99606 22.9916C5.99706 22.9916 5.99856 22.9921 5.99956 22.9921C6.00156 22.9921 6.00356 22.9916 6.00556 22.9916C6.04556 22.9916 6.08606 22.9891 6.12656 22.9836L21.6266 20.9851C21.8971 20.9506 22.1411 20.8066 22.3036 20.5871C22.4666 20.3686 22.5316 20.0931 22.4856 19.8241ZM13.1421 3.01157C13.5791 2.94857 13.9061 3.03507 14.2036 3.29107C14.5981 3.63057 14.8771 4.21057 15.0726 4.84207L11.2841 5.17107C11.5666 4.10907 12.1091 3.15907 13.1421 3.01157ZM9.76656 3.50357C9.49856 4.08007 9.31306 4.71257 9.18806 5.35357L7.79706 5.47457C8.17606 4.74507 8.85106 3.74557 9.76656 3.50357ZM3.69456 18.9941L5.80506 7.18507L6.41806 7.30757L5.28206 19.0356C5.19156 19.0091 5.09706 18.9941 5.00006 18.9941H3.69456ZM7.11606 20.8406L8.41506 7.42807L8.98056 7.37907C8.97356 7.80307 8.98556 8.20757 9.01556 8.57107C9.05906 9.09307 9.49656 9.48757 10.0111 9.48757C10.0391 9.48757 10.0666 9.48657 10.0951 9.48407C10.6456 9.43808 11.0546 8.95457 11.0086 8.40407C11.0071 8.38857 10.9726 7.89057 11.0011 7.20257L15.4476 6.81607C15.4736 7.09507 15.4861 7.33357 15.4876 7.49907C15.4916 8.05107 15.9211 8.50957 16.4936 8.49207C17.0456 8.48907 17.4911 8.03857 17.4876 7.48607C17.4871 7.38257 17.4816 7.07307 17.4441 6.64257L18.1711 6.57957L20.3371 19.1346L7.11606 20.8406Z" fill="#222222"/>
|
|
3
|
+
</svg>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg id="icon--search" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="10 10 20 20" xml:space="preserve">
|
|
2
|
-
<title>Search</title>
|
|
3
|
-
<desc>Opens search box</desc>
|
|
4
|
-
<path id="path--search" d="M29.7,28.3L23.5,22c1-1.3,1.5-2.8,1.5-4.5c0-4.1-3.4-7.5-7.5-7.5S10,13.4,10,17.5s3.4,7.5,7.5,7.5c1.7,0,3.3-0.6,4.5-1.5 l6.3,6.3L29.7,28.3z M12,17.5c0-3,2.5-5.5,5.5-5.5s5.5,2.5,5.5,5.5S20.5,23,17.5,23S12,20.5,12,17.5z"></path>
|
|
5
|
-
</svg>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg id="icon--search" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="10 10 20 20" xml:space="preserve">
|
|
2
|
-
<title>Search</title>
|
|
3
|
-
<desc>Opens search box</desc>
|
|
4
|
-
<path id="path--search" d="M29.7,28.3L23.5,22c1-1.3,1.5-2.8,1.5-4.5c0-4.1-3.4-7.5-7.5-7.5S10,13.4,10,17.5s3.4,7.5,7.5,7.5c1.7,0,3.3-0.6,4.5-1.5 l6.3,6.3L29.7,28.3z M12,17.5c0-3,2.5-5.5,5.5-5.5s5.5,2.5,5.5,5.5S20.5,23,17.5,23S12,20.5,12,17.5z"></path>
|
|
5
|
-
</svg>
|