@brightspace-ui/labs 2.0.0 → 2.1.0

package/README.md

@@ -36,6 +36,9 @@ npm run lint:style
 # translations
 npm run test:translations
 
+# accessibility tests
+npm run test:axe
+
 # unit tests
 npm run test:unit
 ```

package/package.json

@@ -13,6 +13,7 @@
     "./components/opt-out-flyout.js": "./src/components/opt-in-flyout/opt-out-flyout.js",
     "./components/opt-out-reason.js": "./src/components/opt-in-flyout/opt-out-reason.js",
     "./components/pager-numeric.js": "./src/components/pagination/pager-numeric.js",
+    "./components/status-icon.js": "./src/components/status-icon/status-icon.js",
     "./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
     "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
     "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js"
@@ -24,8 +25,9 @@
     "lint:eslint": "eslint . --ext .js,.html",
     "lint:style": "stylelint \"**/*.{js,html}\"",
     "start": "web-dev-server --node-resolve --open --watch",
-    "test": "npm run lint && npm run test:translations && npm run test:unit",
+    "test": "npm run lint && npm run test:translations && npm run test:unit && npm run test:axe",
     "test:translations": "mfv -e -i untranslated",
+    "test:axe": "d2l-test-runner axe --chrome",
     "test:unit": "d2l-test-runner",
     "test:vdiff": "d2l-test-runner vdiff"
   },
@@ -51,5 +53,5 @@
     "@brightspace-ui/core": "^3",
     "lit": "^3"
   },
-  "version": "2.0.0"
+  "version": "2.1.0"
 }

package/src/components/status-icon/README.md

@@ -0,0 +1,21 @@
+# d2l-labs-status-icon
+
+Displays an icon as well as optional text to show the state/status of some feature or tool
+
+## Usage
+
+```html
+<script type="module">
+    import '@brightspace-ui-labs/status-icon/status-icon.js';
+</script>
+<d2l-labs-status-icon state="failure" message="Failure"></d2l-labs-status-icon>
+```
+
+![Status Icons preview](./StatusIconPreview.PNG)
+
+**Properties:**
+
+| Property | Type | Description |
+|--|--|--|
+| `message` | String | Message to be displayed |
+| `state` | String, default: `'failure'` | State of the status. Can be one of  `failure`, `warning`, `success`. |

package/src/components/status-icon/status-icon.js

@@ -0,0 +1,67 @@
+import '@brightspace-ui/core/components/colors/colors.js';
+import '@brightspace-ui/core/components/icons/icon.js';
+import { css, html, LitElement } from 'lit';
+import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+
+function getIcon(state) {
+	switch (state) {
+		case 'success':
+			return 'tier1:check-circle';
+		case 'warning':
+			return 'tier1:alert';
+		default:
+			return 'tier1:close-circle';
+	}
+}
+
+class StatusIcon extends RtlMixin(LitElement) {
+
+	static get properties() {
+		return {
+			state: { type: String, reflect: true },
+			message: { type: String, reflect: true }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				align-items: center;
+				display: inline-flex;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			:host,
+			d2l-icon {
+				color: var(--d2l-color-cinnabar);
+			}
+			:host([state="warning"]),
+			:host([state="warning"]) d2l-icon {
+				color: var(--d2l-color-citrine);
+			}
+			:host([state="success"]),
+			:host([state="success"]) d2l-icon {
+				color: var(--d2l-color-olivine);
+			}
+			span {
+				margin-inline-start: 0.4em;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.state = 'failure';
+	}
+
+	render() {
+		const icon = getIcon(this.state);
+		return html`
+			<d2l-icon icon="${icon}"></d2l-icon>
+			<span>${this.message} </span>
+		`;
+	}
+
+}
+customElements.define('d2l-labs-status-icon', StatusIcon);