Merge pull request #461 from Wikia/pills

Pills

Author: ustczanka

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fandom/design-system",
-  "version": "23.24.0",
+  "version": "23.24.1-test.3",
   "description": "Design System developed for Fandom",
   "keywords": [
     "ember-addon"

style-guide/styles/wds-components/_pills.scss

@@ -0,0 +1,43 @@
+@import '../wds-mixins/pill-theming';
+
+.wds-pills {
+	display: flex;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	flex-wrap: wrap;
+}
+
+.wds-pill {
+	@include pill-theming($wds-fandom-color-black, $wds-fandom-color-middle-gray, $wds-fandom-color-button-background);
+
+	border-style: solid;
+	border-width: 1px;
+	border-radius: 27px;
+	display: inline-block;
+	font-size: $wds-font-size-s;
+	font-weight: $wds-font-weight-medium;
+	letter-spacing: 0.25px;
+	line-height: $wds-line-height-none;
+	margin: 3px 6px 3px 0;
+
+	&__label {
+		align-items: center;
+		display: inline-flex;
+		padding: 9px 12px;
+		white-space: nowrap;
+
+		.wds-icon {
+			margin-right: 6px;
+		}
+	}
+
+	&.wds-is-active {
+		cursor: default;
+		font-weight: $wds-font-weight-bold;
+	}
+
+	&:last-child {
+		margin-right: 0;
+	}
+}

style-guide/styles/wds-components/index.scss

@@ -15,6 +15,7 @@
 @import 'menu-chevron';
 @import 'no-scroll';
 @import 'on-site-notifications';
+@import 'pills';
 @import 'player';
 @import 'search-modal';
 @import 'spinner';

style-guide/styles/wds-mixins/_dropdown-theming.scss

@@ -26,7 +26,7 @@
 				color: $color-text;
 			}
 
-			&:hover {
+			&:hover, &.wds-is-selected {
 				> a:not(.wds-button) {
 					background-color: rgba($color-links, .1);
 					color: $color-links;

style-guide/styles/wds-mixins/_pill-theming.scss

@@ -0,0 +1,13 @@
+@mixin pill-theming($text-color, $border-color, $active-color) {
+	background-color: rgba($text-color, 0.05);
+	border-color: $border-color;
+
+	.wds-pill__label {
+		color: $text-color;
+	}
+
+	&.wds-is-active {
+		background-color: rgba($active-color, 0.15);
+		border-color: $active-color;
+	}
+}

style-guide/styles/wds-mixins/index.scss

@@ -8,6 +8,7 @@
 @import 'is-disabled';
 @import 'is-right-aligned';
 @import 'link-theming';
+@import 'pill-theming';
 @import 'scrollable-list';
 @import 'square';
 @import 'tabs-theming';

tests/dummy/app/controllers/application.js

@@ -99,6 +99,10 @@ export default Controller.extend({
 						name: 'Toggles',
 						location: 'route-components.toggles'
 					},
+					{
+						name: 'Pills',
+						location: 'route-components.pills'
+					},
 					{
 						name: 'Dropdowns',
 						location: 'route-components.dropdowns'

tests/dummy/app/router.js

@@ -42,6 +42,7 @@ Router.map(function () {
 		this.route('floating-buttons');
 		this.route('dialogs');
 		this.route('toggles');
+		this.route('pills');
 		this.route('dropdowns');
 		this.route('lists');
 		this.route('progress-indicators');

tests/dummy/app/templates/route-components/pills.hbs

@@ -0,0 +1,49 @@
+<h1>Pills</h1>
+<p>
+  Use pills for elements like tags and other kinds of metadata.
+</p>
+
+<section>
+  <h2 id="pills">Pills</h2>
+
+  <p>
+    Add <code class="format-code">.wds-is-active</code> class to
+    <code class="format-code">.wds-pill</code> element to mark it as active.
+  </p>
+
+  <div class="component-demo">
+    <div class="component-demo__rendered">
+      <ul class="wds-pills">
+        <li class="wds-pill">
+          <a href="#" class="wds-pill__label">
+            <Icon @name="poll" @size="tiny" />
+            Default pill
+          </a>
+        </li>
+        <li class="wds-pill wds-is-active">
+          <span class="wds-pill__label">
+            <Icon @name="quiz" @size="tiny" />
+            Active pill
+          </span>
+        </li>
+      </ul>
+    </div>
+
+    <pre>
+      &lt;ul class="wds-pills"&gt;
+        &lt;li class="wds-pill"&gt;
+          &lt;a href="#" class="wds-pill__label"&gt;
+            &lt;Icon @name="poll" @size="tiny" /&gt;
+            Default pill
+          &lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li class="wds-pill wds-is-active"&gt;
+          &lt;span class="wds-pill__label"&gt;
+            &lt;Icon @name="quiz" @size="tiny" /&gt;
+            Active pill
+          &lt;/span&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    </pre>
+  </div>
+</section>