Merge pull request #64 from lifeomic/PHC-4075-add-basic-wireframe-sty…

…ling PHC-4075 - Add base style [OAuthLoginButton]
lifeomic · Mar 3, 2023 · e7871f5 · e7871f5
2 parents 63c7389 + 6fd59da
commit e7871f5
Show file tree

Hide file tree

Showing 15 changed files with 213 additions and 89 deletions.
diff --git a/example/storybook/stories/BrandConfigProvider/BrandConfigProvider.stories.tsx b/example/storybook/stories/BrandConfigProvider/BrandConfigProvider.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { View, ViewStyle } from 'react-native';
 import { storiesOf } from '@storybook/react-native';
-import { object, color } from '@storybook/addon-knobs';
+import { object } from '@storybook/addon-knobs';
 import { BrandConfigProvider, Theme } from 'src';
 import { ThemeExampleScreen } from './ThemeExampleScreen';
 import * as baseTheme from 'src/components/BrandConfigProvider/theme/base';
@@ -12,21 +12,6 @@ import { BrandConfigProviderStyles } from 'src/components/BrandConfigProvider/ty
 storiesOf('BrandConfigProvider', module)
   .addDecorator((story) => <View style={centerView}>{story()}</View>)
 
-  .add('Basic Theme Colors', () => {
-    const customColors: Record<string, string> = {};
-    Object.entries(baseTheme.colors).forEach(([key, value]) => {
-      customColors[key] = color(key, value);
-    });
-
-    const theme = new Theme({ colors: customColors });
-
-    return (
-      <BrandConfigProvider theme={theme}>
-        <ThemeExampleScreen />
-      </BrandConfigProvider>
-    );
-  })
-
   .add('Default Theme', () => {
     const customColors = object('theme.colors', baseTheme.colors);
     const customSpacing = object('theme.spacing', baseTheme.spacing);

diff --git a/example/storybook/stories/BrandConfigProvider/ExampleBox.tsx b/example/storybook/stories/BrandConfigProvider/ExampleBox.tsx
@@ -24,13 +24,14 @@ const defaultStyles = (theme: Theme) => {
     width: '63%',
     margin: theme.spacing.large,
     padding: theme.spacing.small,
-    borderColor: theme.colors.border,
+    borderColor: theme.colors.onSurface,
+    backgroundColor: theme.colors.surface,
     borderWidth: 1,
     borderRadius: 8,
   };
 
   const text: TextStyle = {
-    color: theme.colors.text,
+    color: theme.colors.onSurface,
   };
 
   return {

diff --git a/example/storybook/stories/BrandConfigProvider/ThemeExampleScreen.tsx b/example/storybook/stories/BrandConfigProvider/ThemeExampleScreen.tsx
@@ -6,19 +6,20 @@ import { useTheme } from 'src/hooks/useTheme';
 export function ThemeExampleScreen() {
   const { theme } = useTheme();
 
-  const centerView: ViewStyle = {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+  const containerView: ViewStyle = {
     backgroundColor: theme.colors.background,
   };
 
-  const blackText: TextStyle = {
-    color: theme.colors.black,
+  const primaryText: TextStyle = {
+    color: theme.colors.onPrimary,
+  };
+
+  const secondaryText: TextStyle = {
+    color: theme.colors.onSecondary,
   };
 
-  const whiteText: TextStyle = {
-    color: theme.colors.white,
+  const tertiaryText: TextStyle = {
+    color: theme.colors.onTertiary,
   };
 
   const primaryView: ViewStyle = {
@@ -29,59 +30,68 @@ export function ThemeExampleScreen() {
     backgroundColor: theme.colors.secondary,
   };
 
+  const tertiaryView: ViewStyle = {
+    backgroundColor: theme.colors.tertiary,
+  };
+
   const tileView: ViewStyle = {
-    width: '63%',
+    minWidth: 200,
     margin: theme.spacing.large,
     padding: theme.spacing.small,
-    borderColor: theme.colors.border,
     borderWidth: 1,
-    borderRadius: 8,
+    borderRadius: theme.roundness,
+    alignItems: 'center',
   };
 
   const normalText: TextStyle = {
-    color: theme.colors.text,
+    color: theme.colors.onBackground,
   };
 
-  const dimText: TextStyle = {
-    color: theme.colors.textDim,
+  const disabledText: TextStyle = {
+    color: theme.colors.onSurfaceDisabled,
   };
 
   const separatorView: ViewStyle = {
     margin: theme.spacing.large,
     width: '80%',
     height: 1,
-    backgroundColor: theme.colors.separator,
+    backgroundColor: theme.colors.outline,
   };
 
   const errorView: ViewStyle = {
     margin: theme.spacing.large,
     padding: theme.spacing.small,
-    backgroundColor: theme.colors.errorBackground,
-    borderColor: theme.colors.error,
+    backgroundColor: theme.colors.error,
+    borderColor: theme.colors.onErrorContainer,
     borderWidth: 1,
     borderRadius: 32,
+    alignItems: 'center',
   };
 
   const errorText: TextStyle = {
-    color: theme.colors.error,
+    color: theme.colors.onError,
   };
 
   return (
-    <View style={centerView}>
+    <View style={containerView}>
       <View style={[tileView, primaryView]}>
-        <Text style={whiteText}>Primary color (white text)</Text>
+        <Text style={primaryText}>Primary</Text>
       </View>
 
       <View style={[tileView, secondaryView]}>
-        <Text style={blackText}>Secondary color (black text)</Text>
+        <Text style={secondaryText}>Secondary</Text>
+      </View>
+
+      <View style={[tileView, tertiaryView]}>
+        <Text style={tertiaryText}>Tertiary</Text>
       </View>
 
       <View style={tileView}>
         <Text style={normalText}>This is normal text color</Text>
       </View>
 
       <View style={tileView}>
-        <Text style={dimText}>This is dim text color</Text>
+        <Text style={disabledText}>This is dim text color</Text>
       </View>
 
       <View style={separatorView} />

diff --git a/example/storybook/stories/ExampleApp.stories.tsx b/example/storybook/stories/ExampleApp.stories.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { authConfig } from './OAuth.stories';
+import { RootProviders, RootStack } from 'src';
+
+storiesOf('Example App', module).add('DemoApp', () => (
+  <RootProviders authConfig={authConfig}>
+    <RootStack />
+  </RootProviders>
+));
diff --git a/example/storybook/stories/OAuth.stories.tsx b/example/storybook/stories/OAuth.stories.tsx
@@ -55,9 +55,8 @@ storiesOf('OAuth', module).add('demo', () => {
           onSuccess={loginOnSuccess}
           onFail={onFail}
           style={buttonStyle}
-        >
-          <Text style={textStyle}>{loginButtonText}</Text>
-        </OAuthLoginButton>
+          label={loginButtonText}
+        />
         <OAuthLogoutButton
           onSuccess={logoutOnSuccess}
           onFail={onFail}

diff --git a/example/storybook/stories/index.ts b/example/storybook/stories/index.ts
@@ -1,5 +1,6 @@
 import './BrandConfigProvider/BrandConfigProvider.stories';
 import './Welcome/Welcome.stories';
 import './OAuth.stories';
+import './ExampleApp.stories';
 import './Tile.stories';
 import './NoInternetToastProvider.stories';
diff --git a/src/components/BrandConfigProvider/index.ts b/src/components/BrandConfigProvider/index.ts
@@ -1,2 +1,3 @@
 export { BrandConfigProvider } from './BrandConfigProvider';
 export { Theme } from './theme/Theme';
+export { NamedStylesProp } from './types';
diff --git a/src/components/BrandConfigProvider/theme/Theme.test.tsx b/src/components/BrandConfigProvider/theme/Theme.test.tsx
@@ -17,7 +17,7 @@ describe('Theme', () => {
     const theme = new Theme({ colors: customColors });
 
     expect(theme.colors.background).toBe('pink');
-    expect(theme.colors.text).toBe(baseColors.text);
+    expect(theme.colors.onBackground).toBe(baseColors.onBackground);
   });
 
   test('merges custom spacing with default', () => {

diff --git a/src/components/BrandConfigProvider/theme/Theme.ts b/src/components/BrandConfigProvider/theme/Theme.ts
@@ -3,15 +3,18 @@ import * as baseTheme from './base';
 interface Props {
   colors?: Partial<baseTheme.Colors>;
   spacing?: Partial<baseTheme.Spacing>;
+  roundness?: number;
 }
 
 export class Theme {
   colors: baseTheme.Colors = { ...baseTheme.colors };
   spacing: baseTheme.Spacing = { ...baseTheme.spacing };
+  roundness: number;
 
-  constructor({ colors, spacing }: Props = {}) {
+  constructor({ colors, spacing, roundness }: Props = {}) {
     this.mergeColors(colors || {});
     this.mergeSpacing(spacing || {});
+    this.roundness = roundness || baseTheme.roundness;
   }
 
   mergeColors(colors: Partial<baseTheme.Colors>) {

diff --git a/src/components/BrandConfigProvider/theme/base/colors.ts b/src/components/BrandConfigProvider/theme/base/colors.ts
@@ -1,32 +1,61 @@
-const palette = {
-  neutral200: '#F4F2F1',
-  neutral300: '#D7CEC9',
-  neutral400: '#B6ACA6',
-  neutral600: '#564E4A',
-  neutral800: '#191015',
-
-  blueGray200: '#B0BEC5',
-  blueGray800: '#37474F',
-
-  error100: '#F2D6CD',
-  error500: '#C03403',
-};
-
+/**
+ * Base (wireFrame-like) color scheme
+ *
+ * The base color scheme uses a popular design system to
+ * dynamically generate all color tokens from the HTML color:
+ * "gray" - #808080	- rgb(128,128,128)
+ */
 export const colors = {
-  white: '#FFFFFF',
-  black: '#000000',
+  primary: 'rgb(0, 104, 116)',
+  onPrimary: 'rgb(255, 255, 255)',
+  primaryContainer: 'rgb(151, 240, 255)',
+  onPrimaryContainer: 'rgb(0, 31, 36)',
+
+  secondary: 'rgb(74, 98, 103)',
+  onSecondary: 'rgb(255, 255, 255)',
+  secondaryContainer: 'rgb(205, 231, 236)',
+  onSecondaryContainer: 'rgb(5, 31, 35)',
+
+  tertiary: 'rgb(82, 94, 125)',
+  onTertiary: 'rgb(255, 255, 255)',
+  tertiaryContainer: 'rgb(218, 226, 255)',
+  onTertiaryContainer: 'rgb(14, 27, 55)',
+
+  error: 'rgb(186, 26, 26)',
+  onError: 'rgb(255, 255, 255)',
+  errorContainer: 'rgb(255, 218, 214)',
+  onErrorContainer: 'rgb(65, 0, 2)',
+
+  background: 'rgb(250, 253, 253)',
+  onBackground: 'rgb(25, 28, 29)',
+
+  surface: 'rgb(250, 253, 253)',
+  onSurface: 'rgb(25, 28, 29)',
+  surfaceVariant: 'rgb(219, 228, 230)',
+  onSurfaceVariant: 'rgb(63, 72, 74)',
+
+  outline: 'rgb(111, 121, 122)',
+  outlineVariant: 'rgb(191, 200, 202)',
+
+  shadow: 'rgb(0, 0, 0)',
+  scrim: 'rgb(0, 0, 0)',
+  inverseSurface: 'rgb(46, 49, 50)',
+  inverseOnSurface: 'rgb(239, 241, 241)',
+  inversePrimary: 'rgb(79, 216, 235)',
 
-  text: palette.neutral800,
-  textDim: palette.neutral600,
-  border: palette.neutral400,
-  separator: palette.neutral300,
-  background: palette.neutral200,
+  elevation: {
+    level0: 'transparent',
+    level1: 'rgb(238, 246, 246)',
+    level2: 'rgb(230, 241, 242)',
+    level3: 'rgb(223, 237, 238)',
+    level4: 'rgb(220, 235, 237)',
+    level5: 'rgb(215, 232, 234)',
+  },
 
-  primary: palette.blueGray800,
-  secondary: palette.blueGray200,
+  surfaceDisabled: 'rgba(25, 28, 29, 0.12)',
+  onSurfaceDisabled: 'rgba(25, 28, 29, 0.38)',
 
-  error: palette.error500,
-  errorBackground: palette.error100,
+  backdrop: 'rgba(41, 50, 52, 0.4)',
 };
 
 export type Colors = typeof colors;
diff --git a/src/components/BrandConfigProvider/theme/base/index.ts b/src/components/BrandConfigProvider/theme/base/index.ts
@@ -1,2 +1,4 @@
 export * from './colors';
 export * from './spacing';
+
+export const roundness = 4;
diff --git a/src/components/OAuthLoginButton.test.tsx b/src/components/OAuthLoginButton.test.tsx
@@ -20,14 +20,14 @@ beforeEach(() => {
 
 test('renders', () => {
   const screen = render(
-    <OAuthLoginButton onSuccess={onSuccess} onFail={onFail} />,
+    <OAuthLoginButton onSuccess={onSuccess} onFail={onFail} label="login" />,
   );
   expect(screen.getByTestId('oauth-login-button')).toBeDefined();
 });
 
 test('login utilizes useOAuthFlow', async () => {
   const screen = render(
-    <OAuthLoginButton onSuccess={onSuccess} onFail={onFail} />,
+    <OAuthLoginButton onSuccess={onSuccess} onFail={onFail} label="login" />,
   );
   await waitFor(async () => {
     const loginButton = screen.getByTestId('oauth-login-button');