s-barrah

Keybase proof

I hereby claim:

• I am s-barrah on github.
• I am sbarrah (https://keybase.io/sbarrah) on keybase.
• I have a public key ASBCuuNCKD73I2o9t5wVpKzt4U19REE6v1hNAfZRekthpAo

To claim this, I am signing this object:

s-barrah

module.exports = function (api) {
    api.cache(true);

    const presets = [['react-app', { absoluteRuntime: false }]];
    const plugins = [['babel-plugin-styled-components']];

    return {
        presets,
        plugins,
    };

s-barrah

const path = require('path');
const { version } = require('./package');

module.exports = {
  getComponentPathLine(componentPath) {
    const name = path.basename(componentPath, '.tsx');
    return `import { ${name} } from 'react-component-library';`;
  },
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/styleguide/ThemeWrapper')

s-barrah

React Component Library

This component library is built using react-styleguidist, documenting the layouts, design patterns and components to be used across our sites and products.

s-barrah

import * as React from 'react';
import * as PropTypes from 'prop-types';
import styled, { css } from 'styled-components';


interface ITheme {
  color?: (colorName: string) => string,
  fontSize?: (size: string) => string,
  fontFamily?: (family: string) => string,
  breakpoint?: (size: string) => string,

s-barrah

import * as React from 'react';
import * as PropTypes from 'prop-types';
import styled from 'styled-components';

interface IInnerProps {
  align: string;
}

interface IRichTextProps extends IInnerProps {
  markup: string;

s-barrah

<div>
  <Text tag="h3" height="5">
    Heading 3 high
  </Text>
  <Text tag="h3" weight="1000">
    Heading 3 heavy
  </Text>
 

s-barrah

<RichText
  align={'center'}
  markup={'<p>Some <strong>strong</strong> test markup</p>'}
/>

s-barrah

import * as React from 'react';
import renderer from 'react-test-renderer';

import theme from '../theme/project1/theme';
import ThemeProvider from '../theme/ThemeProvider';

export default function renderWithTheme(component: JSX.Element) {
  return renderer.create(<ThemeProvider theme={theme}>{component}</ThemeProvider>);
}

s-barrah

import * as React from 'react';
import 'jest-styled-components';

import renderWithTheme from '../../../hoc/shallowWithTheme';
import Text from './Text';

it('Atoms/Text component - renders xl yellow paragraph correctly', () => {
  const tree = renderWithTheme(
    <Text tag="p" size="xl" color="yellow">
      My paragraph xl and yellow