From 87e98772b09b9b317dee020d22115517635a29c8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 10 Oct 2018 00:07:28 +0300
Subject: initial contrast display support

---
 src/components/contrast_ratio/contrast_ratio.vue | 64 ++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/contrast_ratio/contrast_ratio.vue

(limited to 'src/components/contrast_ratio/contrast_ratio.vue')

diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
new file mode 100644
index 00000000..6c4a59b6
--- /dev/null
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -0,0 +1,64 @@
+<template>
+<div class="contrast-ratio">
+  <span class="label">
+    Contrast:
+  </span>
+  <span>
+    <span>
+      {{contrast.text}}
+    </span>
+    <span class="rating">
+      <span v-if="contrast.aaa">
+        AAA
+      </span>
+      <span v-if="!contrast.aaa && contrast.aa">
+        AA
+      </span>
+      <span v-if="!contrast.aaa && !contrast.aa">
+        bad
+      </span>
+    </span>
+  </span>
+  <span v-if="large">
+    <span>
+      18pt+:
+    </span>
+    <span class="rating">
+      <span v-if="contrast.aaa">
+        AAA
+      </span>
+      <span v-if="!contrast.aaa && contrast.aa">
+        AA
+      </span>
+      <span v-if="!contrast.aaa && !contrast.aa">
+        bad
+      </span>
+    </span>
+  </span>
+</div>
+</template>
+
+<script>
+export default {
+  props: [
+    'large', 'contrast'
+  ]
+}
+</script>
+
+<style lang="scss">
+.contrast-ratio {
+  display: flex;
+  justify-content: end;
+
+  .label {
+    margin-right: 1em;
+  }
+
+  .rating {
+    display: inline-block;
+    min-width: 3em;
+    text-align: center;
+  }
+}
+</style>
-- 
cgit v1.2.3-70-g09d2