fix(typography): fix overriding issues

Author: minheq

README.md

@@ -15,22 +15,13 @@ More:
 - Built on TypeScript (typings!)
 - Tree-shaking friendly (ESM)
 - Server-side rendering friendly
-- Accessibility available (You can pass accessibility props on all touchable components)
 - [Styles in JavaScript](https://twitter.com/necolas/status/1058949412284592128)
 
 # Documentation
 
-[Getting started](https://wetrustplatform.github.io/paramount/docs-getting-started)  
-[Customize theme](https://wetrustplatform.github.io/paramount/docs-customize-theme)
+[Getting started](https://github.com/WeTrustPlatform/paramount/blob/master/docs/GettingStarted.mdx)
+[Customize theme](https://github.com/WeTrustPlatform/paramount/blob/master/docs/CustomizeTheme.mdx)
 
 # Contributing
 
 Follow [Contributing guide](CONTRIBUTING.md)
-
-## Sponsors
-
-Special thanks to sponsors that help build paramount.
-
-[![Browserstack](https://i1.wp.com/www.diogonunes.com/blog/wp-content/uploads/2016/07/browserstack-logo.png?w=512&ssl=1)](http://www.browserstack.com/)
-
-Browserstack provides cross-browser testing tools. Used to test paramount components against different browsers including IE10

docs/Introduction.mdx

@@ -17,11 +17,3 @@ More:
 - Built on TypeScript (typings!)
 - Tree-shaking friendly (ESM)
 - [Styles in JavaScript](https://twitter.com/necolas/status/1058949412284592128)
-
-### Sponsors
-
-Special thanks to sponsors that help build paramount.
-
-[![Browserstack](https://i1.wp.com/www.diogonunes.com/blog/wp-content/uploads/2016/07/browserstack-logo.png?w=512&ssl=1)](http://www.browserstack.com/)
-
-Browserstack provides cross-browser testing tools. Used to test paramount components against different browsers including IE10

src/components/Counter/Counter.mdx

@@ -5,7 +5,7 @@ menu: Components
 
 import { Counter as CounterContainer } from 'react-powerplug';
 import { Playground, Props } from 'docz';
-import { Counter } from './Counter';
+import { Counter } from '.';
 import { Spacing } from '../Layout';
 
 # Counter

src/components/Typography/Heading.mdx

@@ -22,6 +22,7 @@ Composes React Native's `Text` component (i.e. you can pass its props)
       align="center"
       size="xxlarge" // small - xxxlarge or number
       color="primary" // or custom
+      weight="600"
       getStyles={(props, theme) => ({
         headingStyle: {},
       })}
@@ -41,3 +42,7 @@ Composes React Native's `Text` component (i.e. you can pass its props)
     <Heading size="small">small</Heading>
   </Box>
 </Playground>
+
+### Props
+
+<Props of={Heading} />

src/components/Typography/Heading.styles.ts

@@ -1,12 +1,13 @@
 import { TextStyle } from 'react-native';
 
 import {
+  FontWeight,
   HeadingSize,
   HeadingSizes,
   TextColor,
   Theme,
 } from '../../theme/ThemeInterface';
-import { getTextColor } from './Text.styles';
+import { getFontWeight, getTextColor } from './Text.styles';
 import { TextAlign } from './types';
 
 export interface HeadingVariables {
@@ -21,6 +22,7 @@ export interface HeadingStylesProps {
   size: HeadingSize;
   align: TextAlign;
   color: TextColor;
+  weight?: FontWeight;
 }
 
 export type GetHeadingStyles = (
@@ -38,15 +40,18 @@ export const getHeadingSize = (headingSizes: HeadingSizes) => (
 };
 
 export const getHeadingStyles: GetHeadingStyles = (
-  { size, align, color },
+  { size, align, color, weight },
   theme,
 ) => {
+  const sizeStyle = getHeadingSize(theme.headingSizes)(size);
+
   return {
     headingStyle: {
-      ...getHeadingSize(theme.headingSizes)(size),
+      ...sizeStyle,
       color: getTextColor(theme.colors.text)(color),
       fontFamily: theme.fontFamilies.heading,
-      fontWeight: '600',
+      fontWeight:
+        getFontWeight(theme.fontWeights)(weight) || sizeStyle.fontWeight,
       textAlign: align,
     },
   };

src/components/Typography/Heading.tsx

@@ -3,7 +3,7 @@ import { Platform, Text, TextProps } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { useTheme } from '../../theme';
-import { HeadingSize, TextColor } from '../../theme/ThemeInterface';
+import { FontWeight, HeadingSize, TextColor } from '../../theme/ThemeInterface';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import {
   GetHeadingStyles,
@@ -17,6 +17,7 @@ export interface HeadingProps extends TextProps {
   size?: HeadingSize;
   align?: TextAlign;
   color?: TextColor;
+  weight?: FontWeight;
   accessibilityLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 
   getStyles?: ReplaceReturnType<GetHeadingStyles, DeepPartial<HeadingStyles>>;
@@ -28,13 +29,14 @@ export const Heading = (props: HeadingProps) => {
     size = 'medium',
     align = 'left',
     color = 'default',
+    weight,
     getStyles,
     ...textProps
   } = props;
   const theme = useTheme();
 
   const { headingStyle } = mergeStyles(getHeadingStyles, getStyles)(
-    { size, align, color },
+    { size, align, color, weight },
     theme,
   );
 

src/components/Typography/Paragraph.mdx

@@ -41,3 +41,7 @@ Composes React Native's `Text` component (i.e. you can pass its props)
     <Paragraph size="large">Lorem ipsum dolar set amet</Paragraph>
   </Box>
 </Playground>
+
+### Props
+
+<Props of={Paragraph} />

src/components/Typography/Paragraph.styles.ts

@@ -24,7 +24,7 @@ export interface ParagraphStylesProps {
   size: ParagraphSize;
   color: TextColor;
   fontFamily: FontFamily;
-  weight: FontWeight;
+  weight?: FontWeight;
 }
 
 export interface ParagraphStyles {
@@ -49,12 +49,15 @@ export const getParagraphStyles: GetParagraphStyles = (
   { size, color, fontFamily, align, weight },
   theme,
 ) => {
+  const sizeStyle = getParagraphSize(theme.paragraphSizes)(size);
+
   return {
     paragraphStyle: {
-      ...getParagraphSize(theme.paragraphSizes)(size),
+      ...sizeStyle,
       color: getTextColor(theme.colors.text)(color),
       fontFamily: getFontFamily(theme.fontFamilies)(fontFamily),
-      fontWeight: getFontWeight(theme.fontWeights)(weight),
+      fontWeight:
+        getFontWeight(theme.fontWeights)(weight) || sizeStyle.fontWeight,
       marginBottom: '1em',
       marginTop: '1em',
       textAlign: align,

src/components/Typography/Paragraph.tsx

@@ -39,7 +39,7 @@ export const Paragraph = (props: ParagraphProps) => {
     fontFamily = 'text',
     size = 'medium',
     align = 'left',
-    weight = 'normal',
+    weight,
     getStyles,
     ...textProps
   } = props;

src/components/Typography/Text.mdx

@@ -51,13 +51,15 @@ Composes React Native's `Text` component (i.e. you can pass its props)
 <Playground>
   <Box flexDirection="column">
     <Text color="#16a054">#16a054</Text>
-    <Text color="dark">dark</Text>
     <Text color="default">default</Text>
     <Text color="muted">muted</Text>
+    <Text color="link">link</Text>
+    <Text color="white">white</Text>
     <Text color="selected">selected</Text>
+    <Text color="primary">primary</Text>
+    <Text color="secondary">secondary</Text>
     <Text color="danger">danger</Text>
     <Text color="info">info</Text>
-    <Text color="none">none</Text>
     <Text color="success">success</Text>
     <Text color="warning">warning</Text>
   </Box>
@@ -102,3 +104,7 @@ Composes React Native's `Text` component (i.e. you can pass its props)
     <Text transform="capitalize">Lorem ipsum dolar set amet</Text>
   </Box>
 </Playground>
+
+### Props
+
+<Props of={Text} />