aether-marketing

Aether-Marketing Component Library

How to add Components to the Aether-marketing Component library

• Clone the app to your local machine
• run npm install
• Create your new component in the /src folder
• Create a new file called MyComponent.test.js at the same level as you component and add a unit test. We use Jest. You can check the other components for example of how we add unit tests.
• Run npm run test to check that all tests pass
• Run npm run lint to make sure that your new componente passes ESLint
• Navigate to the src/index file and export your new component
• Run npm run build to create a /lib folder that contains the packaged components.

Testing components locally

• Run npm pack to generate a .tgz file at the root directory
• Open up any React application that you want to test your new package in, and then run npm install path_to_tgz_file
• Import the component and use it normally.

import {MyCoolButton} from 'aether-marketing'

function App() {
 return (
    <div>
      <MyCoolButton title="Click Me!"/>
    <div>
  )
}
export default App;

Unit Tests and Testing Code Coverage

• Run npm run test to get a report on unit testing.
• Run npm run test-coverage to create a code coverage report in your browser window.
• Once all testing passes, you can proceed to publishing your new component to npm

publish your new component

change the version of the package in the package.json file according to semantic versioning - patch, minor or major run

  npm login
  npm publish

How to add Colors to your React App

• Look for the desired color code and it's name in the brand guide
• then run npm install @postman/aether-marketing
• Navigate to the component that you want to use the color in and import the theme and call the color with props in your styled component:

  import {Theme} from 'aether-marketing';

  const HomePageWrapper = styled.div`
    background-color: ${props => props.theme.colors.blue_70};
    height: calc(100vh - 55px);
    background-position: top right;
    background-image: url("/brand-guide-home.svg");
    background-size: 75%;
    background-repeat: no-repeat;

    @media (min-width: 600px) {
      background-size: 50%;
    }
`;