From bdbd1534e9bd9c3b55a3a71ff57f03b43a2d7e3b Mon Sep 17 00:00:00 2001
From: codebyalex <wilsonc.alexander@gmail.com>
Date: Thu, 11 Apr 2019 22:46:40 -0400
Subject: [PATCH] added badge to make the severity display more accessible

---
 addons/a11y/src/components/Report/Rules.tsx | 27 +++++++++++++++------
 lib/components/src/Badge/Badge.js           |  2 +-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/addons/a11y/src/components/Report/Rules.tsx b/addons/a11y/src/components/Report/Rules.tsx
index 91fb964536e..8d9b8ccdbc2 100644
--- a/addons/a11y/src/components/Report/Rules.tsx
+++ b/addons/a11y/src/components/Report/Rules.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
-
-import { Icons } from '@storybook/components';
+import { Badge, Icons } from '@storybook/components';
 import { CheckResult } from 'axe-core';
 
 const impactColors = {
@@ -19,10 +18,22 @@ const List = styled.div({
   fontWeight: '400',
 } as any);
 
-const Item = styled.div({
+const Item = styled.div(() => {
+  return `
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 6px;
+
+    @media (max-width: 665px) {
+      display: block;
+    }
+  `;
+});
+
+const BadgeWrapper = styled.div({
+  marginBottom: '5px',
+  marginLeft: '5px',
   display: 'flex',
-  flexDirection: 'row',
-  marginBottom: '6px',
 });
 
 const Message = styled.div({
@@ -47,9 +58,9 @@ interface RuleProps {
 
 const Rule: FunctionComponent<RuleProps> = ({ rule, passes }) => (
   <Item>
-    <Status passes={passes || undefined} impact={rule.impact}>
-      {passes ? <Icons icon="check" /> : <Icons icon="cross" />}
-    </Status>
+    <BadgeWrapper>
+      <Badge status={passes ? "positive" : "negative"}>{rule.impact}</Badge>
+    </BadgeWrapper>
     <Message>{rule.message}</Message>
   </Item>
 );
diff --git a/lib/components/src/Badge/Badge.js b/lib/components/src/Badge/Badge.js
index fe3ee497e22..9fd875fef3a 100644
--- a/lib/components/src/Badge/Badge.js
+++ b/lib/components/src/Badge/Badge.js
@@ -3,9 +3,9 @@ import { styled, css } from '@storybook/theming';
 
 const BadgeWrapper = styled.div`
   display: inline-block;
-  vertical-align: top;
   font-size: 11px;
   line-height: 12px;
+  align-self: center;
   padding: 4px 12px;
   border-radius: 3em;
   font-weight: ${props => props.theme.typography.weight.bold};