update Banner into MessageBar (#981)

* update Banner into MessageBar
* Consolidate logic for Status and MessageBar appropriately
* Update snapshots

Author: laraharrow

CHANGELOG.md

@@ -18,6 +18,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - `Button*` font sizes updated to match design specifications
 - `theme.colors` shape has been significantly refactored (documentation updates to follow)
+- `Banner` is now `MessageBar`
+  - Major style changes to be more Material-esque
+  - `warning` is now `warn`
+  - `error` is now `critical`
+  - `info` is now `inform`
+  - `confirmation` is now `positive`
+- ``
+- `Badge` - `default` intent is now `key`
 - `CheckboxGroup` and `RadioGroup` `name` is now optional
 - Updated `LookerLogo` and `LogoRings` to match new branding
 

packages/components/src/Badge/Badge.test.tsx

@@ -37,8 +37,8 @@ test('Badge renders all sizes', () => {
 test('Badge renders all intents', () => {
   assertSnapshot(<Badge intent="plain">plain</Badge>)
   assertSnapshot(<Badge intent="positive">positive</Badge>)
-  assertSnapshot(<Badge intent="info">info</Badge>)
+  assertSnapshot(<Badge intent="inform">info</Badge>)
   assertSnapshot(<Badge intent="neutral">neutral</Badge>)
-  assertSnapshot(<Badge intent="warning">warning</Badge>)
+  assertSnapshot(<Badge intent="warn">warning</Badge>)
   assertSnapshot(<Badge intent="critical">critical</Badge>)
 })

packages/components/src/Badge/Badge.tsx

@@ -49,13 +49,13 @@ export interface BadgeProps
    *  @default `default`
    **/
   intent?:
-    | 'warning'
+    | 'warn'
     | 'positive'
     | 'critical'
-    | 'info'
+    | 'inform'
     | 'neutral'
     | 'plain'
-    | 'default'
+    | 'key'
   /**
    * Defines the size of Badge diameter.
    * @default "medium"
@@ -89,7 +89,7 @@ const intent = variant({
   prop: 'intent',
   variants: {
     critical: { bg: 'palette.red100', color: 'palette.red600' },
-    default: { bg: 'palette.purple100', color: 'palette.purple600' },
+    key: { bg: 'palette.purple100', color: 'palette.purple600' },
     info: { bg: 'palette.blue100', color: 'palette.blue600' },
     neutral: { bg: 'palette.charcoal200', color: 'palette.charcoal600' },
     plain: { bg: 'palette.white', color: 'palette.purple500' },
@@ -116,6 +116,6 @@ export const Badge = styled(BadgeLayout).attrs({ fontWeight: 'semiBold' })`
 `
 
 Badge.defaultProps = {
-  intent: 'default',
+  intent: 'key',
   size: 'medium',
 }

packages/components/src/Badge/__snapshots__/Badge.test.tsx.snap

@@ -59,8 +59,6 @@ exports[`Badge renders all intents 3`] = `
   line-height: 24px;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
-  background-color: #e0f2ff;
-  color: #0059b2;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -71,7 +69,7 @@ exports[`Badge renders all intents 3`] = `
 <span
   className="c0"
   fontWeight="semiBold"
-  intent="info"
+  intent="inform"
   size="medium"
 >
   info
@@ -111,8 +109,6 @@ exports[`Badge renders all intents 5`] = `
   line-height: 24px;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
-  background-color: #FFEBC4;
-  color: #724B00;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -123,7 +119,7 @@ exports[`Badge renders all intents 5`] = `
 <span
   className="c0"
   fontWeight="semiBold"
-  intent="warning"
+  intent="warn"
   size="medium"
 >
   warning
@@ -175,7 +171,7 @@ exports[`Badge renders all sizes 1`] = `
 <span
   className="c0"
   fontWeight="semiBold"
-  intent="default"
+  intent="key"
   size="medium"
 >
   default (medium)
@@ -201,7 +197,7 @@ exports[`Badge renders all sizes 2`] = `
 <span
   className="c0"
   fontWeight="semiBold"
-  intent="default"
+  intent="key"
   size="small"
 >
   small
@@ -227,7 +223,7 @@ exports[`Badge renders all sizes 3`] = `
 <span
   className="c0"
   fontWeight="semiBold"
-  intent="default"
+  intent="key"
   size="medium"
 >
   medium
@@ -253,7 +249,7 @@ exports[`Badge renders all sizes 4`] = `
 <span
   className="c0"
   fontWeight="semiBold"
-  intent="default"
+  intent="key"
   size="large"
 >
   large

packages/components/src/Banner/Banner.tsx

@@ -27,44 +27,44 @@
 import 'jest-styled-components'
 import React from 'react'
 import { assertSnapshot } from '@looker/components-test-utils'
-import { Banner } from './Banner'
+import { MessageBar } from './MessageBar'
 
-test('Warning banner', () => {
+test('Warn MessageBar', () => {
   assertSnapshot(
-    <Banner intent="warning" id="test-banner">
-      Warning
-    </Banner>
+    <MessageBar intent="warn" id="test-message-bar">
+      Warn
+    </MessageBar>
   )
 })
 
-test('Error banner', () => {
+test('Error MessageBar', () => {
   assertSnapshot(
-    <Banner intent="error" id="test-banner">
+    <MessageBar intent="critical" id="test-message-bar">
       Error
-    </Banner>
+    </MessageBar>
   )
 })
 
-test('Info banner', () => {
+test('Info MessageBar', () => {
   assertSnapshot(
-    <Banner intent="info" id="test-banner">
+    <MessageBar intent="inform" id="test-message-bar">
       Info
-    </Banner>
+    </MessageBar>
   )
 })
 
-test('Confirmation banner', () => {
+test('Confirmation MessageBar', () => {
   assertSnapshot(
-    <Banner intent="confirmation" id="test-banner">
-      Confirmation
-    </Banner>
+    <MessageBar intent="positive" id="test-message-bar">
+      Positive
+    </MessageBar>
   )
 })
 
-test('Banner can be dismissed', () => {
+test('MessageBar can be dismissed', () => {
   assertSnapshot(
-    <Banner intent="info" id="test-banner" canDismiss>
+    <MessageBar intent="inform" id="test-message-bar" canDismiss>
       Info!
-    </Banner>
+    </MessageBar>
   )
 })