diff --git a/assets/icons/badge-admin.svg b/assets/avatar-badges/admin.svg similarity index 89% rename from assets/icons/badge-admin.svg rename to assets/avatar-badges/admin.svg index 67631c3c5..3a2e81588 100644 --- a/assets/icons/badge-admin.svg +++ b/assets/avatar-badges/admin.svg @@ -1,6 +1,6 @@ - + - + diff --git a/assets/icons/badge-content-moderator.svg b/assets/avatar-badges/content-moderator.svg similarity index 89% rename from assets/icons/badge-content-moderator.svg rename to assets/avatar-badges/content-moderator.svg index 957d5618d..19e9ee806 100644 --- a/assets/icons/badge-content-moderator.svg +++ b/assets/avatar-badges/content-moderator.svg @@ -1,6 +1,6 @@ - + - + diff --git a/assets/icons/badge-discussion-moderator.svg b/assets/avatar-badges/discussion-moderator.svg similarity index 88% rename from assets/icons/badge-discussion-moderator.svg rename to assets/avatar-badges/discussion-moderator.svg index 53315818e..7501acb71 100644 --- a/assets/icons/badge-discussion-moderator.svg +++ b/assets/avatar-badges/discussion-moderator.svg @@ -1,6 +1,6 @@ - + - + diff --git a/assets/icons/badge-fandom.svg b/assets/avatar-badges/helper.svg similarity index 92% rename from assets/icons/badge-fandom.svg rename to assets/avatar-badges/helper.svg index 6db4bad14..becb350e2 100644 --- a/assets/icons/badge-fandom.svg +++ b/assets/avatar-badges/helper.svg @@ -1,4 +1,4 @@ - + diff --git a/assets/avatar-badges/staff.svg b/assets/avatar-badges/staff.svg new file mode 100644 index 000000000..3c5ae2727 --- /dev/null +++ b/assets/avatar-badges/staff.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/badge-vstf.svg b/assets/avatar-badges/vstf.svg similarity index 90% rename from assets/icons/badge-vstf.svg rename to assets/avatar-badges/vstf.svg index 15d62fc9b..d0c395579 100644 --- a/assets/icons/badge-vstf.svg +++ b/assets/avatar-badges/vstf.svg @@ -1,4 +1,4 @@ - + diff --git a/dist/svg/sprite-avatar-badges.svg b/dist/svg/sprite-avatar-badges.svg new file mode 100644 index 000000000..bc53a3fa8 --- /dev/null +++ b/dist/svg/sprite-avatar-badges.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/svg/sprite-icons.svg b/dist/svg/sprite-icons.svg index dc4e1943a..719bd595b 100644 --- a/dist/svg/sprite-icons.svg +++ b/dist/svg/sprite-icons.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/dist/svg/wds-avatar-badges-admin.svg b/dist/svg/wds-avatar-badges-admin.svg new file mode 100644 index 000000000..ed0614019 --- /dev/null +++ b/dist/svg/wds-avatar-badges-admin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/svg/wds-avatar-badges-content-moderator.svg b/dist/svg/wds-avatar-badges-content-moderator.svg new file mode 100644 index 000000000..d5744098c --- /dev/null +++ b/dist/svg/wds-avatar-badges-content-moderator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/svg/wds-avatar-badges-discussion-moderator.svg b/dist/svg/wds-avatar-badges-discussion-moderator.svg new file mode 100644 index 000000000..b64913751 --- /dev/null +++ b/dist/svg/wds-avatar-badges-discussion-moderator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/svg/wds-avatar-badges-helper.svg b/dist/svg/wds-avatar-badges-helper.svg new file mode 100644 index 000000000..b5567ced7 --- /dev/null +++ b/dist/svg/wds-avatar-badges-helper.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/svg/wds-avatar-badges-staff.svg b/dist/svg/wds-avatar-badges-staff.svg new file mode 100644 index 000000000..6f4e33c77 --- /dev/null +++ b/dist/svg/wds-avatar-badges-staff.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/svg/wds-avatar-badges-vstf.svg b/dist/svg/wds-avatar-badges-vstf.svg new file mode 100644 index 000000000..501e6a4d6 --- /dev/null +++ b/dist/svg/wds-avatar-badges-vstf.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package.json b/package.json index 867ce4d56..7e919c6f8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "design-system", - "version": "0.12.0", + "version": "0.13.0", "description": "Design System developed for Wikia", "scripts": { "build": "gulp", diff --git a/reference-page/components/avatar-badges.md b/reference-page/components/avatar-badges.md new file mode 100644 index 000000000..3aac7d901 --- /dev/null +++ b/reference-page/components/avatar-badges.md @@ -0,0 +1,41 @@ +###Avatar Badges: + @example +

Avatar badges

+
+
+ + + +
admin
+
+
+ + + +
content-moderator
+
+
+ + + +
discussion-moderator
+
+
+ + + +
helper
+
+
+ + + +
staff
+
+
+ + + +
vstf
+
+
diff --git a/reference-page/components/avatar.md b/reference-page/components/avatar.md index 12411db63..2f27f6690 100644 --- a/reference-page/components/avatar.md +++ b/reference-page/components/avatar.md @@ -3,4 +3,4 @@ @example

Avatar

user name - user name + user name \ No newline at end of file diff --git a/reference-page/index.html b/reference-page/index.html index efeac2d7e..1d6d18863 100644 --- a/reference-page/index.html +++ b/reference-page/index.html @@ -1629,26 +1629,6 @@ * div.icon-name arrow * div.icon-preview-card * svg.wds-icon - * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-admin") - * div.icon-name badge-admin - * div.icon-preview-card - * svg.wds-icon - * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-content-moderator") - * div.icon-name badge-content-moderator - * div.icon-preview-card - * svg.wds-icon - * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-discussion-moderator") - * div.icon-name discussion-moderator - * div.icon-preview-card - * svg.wds-icon - * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-fandom") - * div.icon-name badge-fandom - * div.icon-preview-card - * svg.wds-icon - * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-vstf") - * div.icon-name badge-vstf - * div.icon-preview-card - * svg.wds-icon * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-bell") * div.icon-name bell * div.icon-preview-card @@ -2208,8 +2188,15 @@
+ - + + + + + + + @@ -2975,36 +2962,6 @@

Standard Set (24x24)

arrow
-
- - - -
badge-admin
-
-
- - - -
badge-content-moderator
-
-
- - - -
discussion-moderator
-
-
- - - -
badge-fandom
-
-
- - - -
badge-vstf
-
@@ -3361,36 +3318,6 @@

Standard Set (24x24)

</svg> <div class="icon-name">arrow</div> </div> - <div class="icon-preview-card"> - <svg class="wds-icon"> - <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-admin"></use> - </svg> - <div class="icon-name">badge-admin</div> - </div> - <div class="icon-preview-card"> - <svg class="wds-icon"> - <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-content-moderator"></use> - </svg> - <div class="icon-name">badge-content-moderator</div> - </div> - <div class="icon-preview-card"> - <svg class="wds-icon"> - <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-discussion-moderator"></use> - </svg> - <div class="icon-name">discussion-moderator</div> - </div> - <div class="icon-preview-card"> - <svg class="wds-icon"> - <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-fandom"></use> - </svg> - <div class="icon-name">badge-fandom</div> - </div> - <div class="icon-preview-card"> - <svg class="wds-icon"> - <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-vstf"></use> - </svg> - <div class="icon-name">badge-vstf</div> - </div> <div class="icon-preview-card"> <svg class="wds-icon"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-bell"></use> @@ -4398,6 +4325,92 @@

Typescale

</p>
+
+
+

Avatar Badges:

+
+
+
+

Avatar badges

+
+
+ + + +
admin
+
+
+ + + +
content-moderator
+
+
+ + + +
discussion-moderator
+
+
+ + + +
helper
+
+
+ + + +
staff
+
+
+ + + +
vstf
+
+
+
<h4>Avatar badges</h4>
+<div class="icon-preview-group">
+  <div class="icon-preview-card">
+    <svg class="wds-icon-small">
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-avatar-badges-admin">
+    </svg>
+    <div class="icon-name">admin</div>
+  </div>
+  <div class="icon-preview-card">
+    <svg class="wds-icon-small">
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-avatar-badges-content-moderator">
+    </svg>
+    <div class="icon-name">content-moderator</div>
+  </div>
+  <div class="icon-preview-card">
+    <svg class="wds-icon-small">
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-avatar-badges-discussion-moderator">
+    </svg>
+    <div class="icon-name">discussion-moderator</div>
+  </div>
+  <div class="icon-preview-card">
+    <svg class="wds-icon-small">
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-avatar-badges-helper">
+    </svg>
+    <div class="icon-name">helper</div>
+  </div>
+  <div class="icon-preview-card">
+    <svg class="wds-icon-small">
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-avatar-badges-staff">
+    </svg>
+    <div class="icon-name">staff</div>
+  </div>
+  <div class="icon-preview-card">
+    <svg class="wds-icon-small">
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-avatar-badges-vstf">
+    </svg>
+    <div class="icon-name">vstf</div>
+  </div>
+</div>
+
+

Avatar:

diff --git a/reference-page/styles/_icons.scss b/reference-page/styles/_icons.scss index 7787acb1c..a597f4674 100644 --- a/reference-page/styles/_icons.scss +++ b/reference-page/styles/_icons.scss @@ -13,26 +13,6 @@ * div.icon-name arrow * div.icon-preview-card * svg.wds-icon - * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-admin") - * div.icon-name badge-admin - * div.icon-preview-card - * svg.wds-icon - * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-content-moderator") - * div.icon-name badge-content-moderator - * div.icon-preview-card - * svg.wds-icon - * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-discussion-moderator") - * div.icon-name discussion-moderator - * div.icon-preview-card - * svg.wds-icon - * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-fandom") - * div.icon-name badge-fandom - * div.icon-preview-card - * svg.wds-icon - * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-badge-vstf") - * div.icon-name badge-vstf - * div.icon-preview-card - * svg.wds-icon * use(xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wds-icons-bell") * div.icon-name bell * div.icon-preview-card diff --git a/reference-page/visuals/reference-page/reference-page.chrome-mobile.baseline.png b/reference-page/visuals/reference-page/reference-page.chrome-mobile.baseline.png index 9b4256df5..0dc119706 100644 Binary files a/reference-page/visuals/reference-page/reference-page.chrome-mobile.baseline.png and b/reference-page/visuals/reference-page/reference-page.chrome-mobile.baseline.png differ diff --git a/reference-page/visuals/reference-page/reference-page.chrome.1000px.baseline.png b/reference-page/visuals/reference-page/reference-page.chrome.1000px.baseline.png index 137cd383e..2b62e1f05 100644 Binary files a/reference-page/visuals/reference-page/reference-page.chrome.1000px.baseline.png and b/reference-page/visuals/reference-page/reference-page.chrome.1000px.baseline.png differ diff --git a/reference-page/visuals/reference-page/reference-page.chrome.1300px.baseline.png b/reference-page/visuals/reference-page/reference-page.chrome.1300px.baseline.png index 89e3052c5..7089b34e2 100644 Binary files a/reference-page/visuals/reference-page/reference-page.chrome.1300px.baseline.png and b/reference-page/visuals/reference-page/reference-page.chrome.1300px.baseline.png differ diff --git a/reference-page/visuals/reference-page/reference-page.firefox.1000px.baseline.png b/reference-page/visuals/reference-page/reference-page.firefox.1000px.baseline.png index 137cd383e..2b62e1f05 100644 Binary files a/reference-page/visuals/reference-page/reference-page.firefox.1000px.baseline.png and b/reference-page/visuals/reference-page/reference-page.firefox.1000px.baseline.png differ diff --git a/reference-page/visuals/reference-page/reference-page.firefox.1300px.baseline.png b/reference-page/visuals/reference-page/reference-page.firefox.1300px.baseline.png index 89e3052c5..7089b34e2 100644 Binary files a/reference-page/visuals/reference-page/reference-page.firefox.1300px.baseline.png and b/reference-page/visuals/reference-page/reference-page.firefox.1300px.baseline.png differ