feat(theme): add the console theme and update default theme

BREAKING CHANGE: Theme provider default theme is now DEFAULT, not CONSOLE. If you are not providing a theme prop but want the console theme you must now explicitly set the theme to console
twilio-labs · Dec 19, 2019 · 3951f82 · 3951f82
1 parent 3ee6b5d
commit 3951f82
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 23 deletions.
diff --git a/packages/paste-theme/README.md b/packages/paste-theme/README.md
@@ -11,9 +11,7 @@ You should place the `Theme.Provider` around the root of your React application.
 ```js
 import {Theme} from '@twilio-paste/theme';
 
-<Theme.Provider>
+<Theme.Provider theme="console">...</Theme.Provider>;
-  ...
-</Theme.Provider>
 ```
 
 ## Using tokens in custom components
@@ -33,7 +31,7 @@ import {themeGet} from '@styled-system/theme-get';
 const custom = styled.div`
   background-color: ${themeGet('backgrounds.primary')};
   padding: ${props => props.theme.spacing.spacing20};
-`
+`;
 ```
 
 ### Paste ThemeConsumer
@@ -47,7 +45,7 @@ import {Theme} from '@twilio-paste/theme';
   {({theme}) => {
     return <p>What is the default text color {theme.textColors.colorText}</p>;
   }}
-</Theme.Consumer>
+</Theme.Consumer>;
 ```
 
 ### Paste useTheme Hook
@@ -56,7 +54,7 @@ Paste Theme provides a React Hook called `useTheme` which returns the theme obje
 
 ```js
 import React from 'react';
-import { useTheme } from '@twilio-paste/theme';
+import {useTheme} from '@twilio-paste/theme';
 
 const HookExampleComponent = (): React.ReactElement => {
   const theme = useTheme();
@@ -70,10 +68,8 @@ Paste also provides a HOC Component, which is a wrapper around the Emotion [HOC
 
 ```js
 import React from 'react';
-import { withTheme } from '@twilio-paste/theme';
+import {withTheme} from '@twilio-paste/theme';
 
-const ExampleComponent = ({theme}) => (
+const ExampleComponent = ({theme}) => <p>What is the default text color {theme.textColors.colorText}</p>;
-  <p>What is the default text color {theme.textColors.colorText}</p>
-);
 const ExampleComponentwithTheme = withTheme(ExampleComponent);
 ```
diff --git a/packages/paste-theme/__tests__/themeConsumer.spec.tsx b/packages/paste-theme/__tests__/themeConsumer.spec.tsx
@@ -10,7 +10,7 @@ const ThemeConsumerExampleComponent = (): React.ReactElement => {
 describe('Theme.Consumer', () => {
   it('should render without crashing', (): void => {
     ReactDOM.render(
-      <Theme.Provider>
+      <Theme.Provider theme="console">
         <ThemeConsumerExampleComponent />
       </Theme.Provider>,
       document.createElement('div')
@@ -19,7 +19,7 @@ describe('Theme.Consumer', () => {
 
   it('should be able to access the theme object', () => {
     const wrapper = mount(
-      <Theme.Provider>
+      <Theme.Provider theme="console">
         <ThemeConsumerExampleComponent />
       </Theme.Provider>
     );

diff --git a/packages/paste-theme/__tests__/themeProvider.spec.tsx b/packages/paste-theme/__tests__/themeProvider.spec.tsx
@@ -18,7 +18,7 @@ describe('Theme.Provider', () => {
 
   it('should render the console link text color', (): void => {
     const wrapper = mount(
-      <Theme.Provider>
+      <Theme.Provider theme="console">
         <ThemeConsumerExampleTextColor />
       </Theme.Provider>
     );
@@ -36,7 +36,7 @@ describe('Theme.Provider', () => {
 
   it('should rely on the default breakpoints set on the theme object', () => {
     const wrapper = mount(
-      <Theme.Provider>
+      <Theme.Provider theme="console">
         <ThemeConsumerExampleComponent />
       </Theme.Provider>
     );

diff --git a/packages/paste-theme/__tests__/useTheme.spec.tsx b/packages/paste-theme/__tests__/useTheme.spec.tsx
@@ -11,7 +11,7 @@ const HookExampleComponent = (): React.ReactElement => {
 describe('useTheme', () => {
   it('should render without crashing', (): void => {
     ReactDOM.render(
-      <Theme.Provider>
+      <Theme.Provider theme="console">
         <HookExampleComponent />
       </Theme.Provider>,
       document.createElement('div')
@@ -20,7 +20,7 @@ describe('useTheme', () => {
 
   it('should be able to access the theme object', () => {
     const wrapper = mount(
-      <Theme.Provider>
+      <Theme.Provider theme="console">
         <HookExampleComponent />
       </Theme.Provider>
     );

diff --git a/packages/paste-theme/__tests__/withTheme.spec.tsx b/packages/paste-theme/__tests__/withTheme.spec.tsx
@@ -10,7 +10,7 @@ const MockComponentWithTheme = withTheme(MockComponent);
 describe('withTheme', () => {
   it('should render without crashing', (): void => {
     ReactDOM.render(
-      <Theme.Provider>
+      <Theme.Provider theme="console">
         <MockComponentWithTheme />
       </Theme.Provider>,
       document.createElement('div')
@@ -19,7 +19,7 @@ describe('withTheme', () => {
 
   it('should be able to access the theme object', () => {
     const wrapper = mount(
-      <Theme.Provider>
+      <Theme.Provider theme="console">
         <MockComponentWithTheme />
       </Theme.Provider>
     );

diff --git a/packages/paste-theme/src/themeProvider.tsx b/packages/paste-theme/src/themeProvider.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import {Global, css, SerializedStyles} from '@emotion/core';
 import {themeGet} from '@styled-system/theme-get';
 import {ThemeProvider as StyledThemeProvider} from 'emotion-theming';
-import {DefaultTheme, SendGridTheme} from '@twilio-paste/theme-tokens';
+import {DefaultTheme, SendGridTheme, ConsoleTheme} from '@twilio-paste/theme-tokens';
 import {ThemeVariants} from './constants';
 
 interface GlobalStyleProps {
@@ -40,8 +40,7 @@ export interface ThemeProviderProps {
 
 const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
   customBreakpoints,
-  // theme = 'console' | 'sendgrid' | 'flex' & 'default' eventually
+  theme = ThemeVariants.DEFAULT,
-  theme = ThemeVariants.CONSOLE,
   ...props
 }) => {
   let breakpoints = {};
@@ -52,8 +51,11 @@ const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = ({
       themeObject = SendGridTheme;
       breakpoints = customBreakpoints || SendGridTheme.breakpoints;
       break;
-    case ThemeVariants.FLEX:
     case ThemeVariants.CONSOLE:
+      themeObject = ConsoleTheme;
+      breakpoints = customBreakpoints || ConsoleTheme.breakpoints;
+      break;
+    case ThemeVariants.FLEX:
     case ThemeVariants.DEFAULT:
     default:
       themeObject = DefaultTheme;

diff --git a/packages/paste-theme/stories/index.stories.tsx b/packages/paste-theme/stories/index.stories.tsx
@@ -28,7 +28,7 @@ storiesOf('Overview|Theme', module)
     },
   })
   .add('Provider', () => (
-    <Theme.Provider>
+    <Theme.Provider theme="console">
       <p>Using the Theme Provider to wrap your app</p>
     </Theme.Provider>
   ))