dha-assets

dha-assets

This module is used for background image and audio assets.

How to use

Installing the module

Use the following command to install from npm:

• npm install dha-assets

Importing the module

Once you have the module installed you can import the exported components/modules into your code like so:

import Background, { audioFiles, createAudio, pauseAudio, playAudio, stopAudio } from 'dha-assets';

Using the module

Example of using Background component:

<Background
  image="dha.png"
  alt="DHA logo"
  scale={1}
  styles={{ maxWidth: '500px', position: 'static', zIndex: '0' }}
/>

<Background
  image="dha.png"
  alt="DHA logo"
  scale={1}
  styles={{ maxWidth: '500px', position: 'static', zIndex: '0' }}
>
  <p>Add nested div or React component</p>
</Background>

• image: Background image full path and file
• alt: Alternate text
• scale: Image scale with transform
• styles: Custom css styles

Example of using audio module:

componentDidMount() {
  createAudio('example', 'http://www.example.com/audio/example.mp3');
}

play = () => {
  playAudio('example');
};

pause = () => {
  pauseAudio('example');
};

stop = () => {
  stopAudio('example');
};

Testing

• Tests can be ran with the npm test command.
• Tests are ran using Jest with Enzyme - More information about getting started with Jest can be found here.

Example render test:

test('renders without crashing', () => {
  shallow(<Background image="image.jpg" alt="Image" scale={2} styles={{ height: '50%' }} />);
});

How to contribute

Setting up the module

• SSH: git clone [e-mail]:wmtp/dha-assets.git
• HTTPS: git clone https://[e-mail]/wmtp/dha-assets.git
• cd dha-assets
• npm install

Building the module

The module uses Typescript compiler (TSC) to compile the source code. To build the project run the following command:

• npm run build

Installing the module in app for testing

You can install the module into your own React project as a dependency. After you clone the module you can install using the following command:

• npm install /absolute/path/to/dha-assets
• i.e. -> npm install /Users/dha/Documents/projects/npm/dha-assets

Viewing API docs

You can generate and view the API docs by running the following commands:

• npm run styleguide:build
• npm run typedocs

This will start a development server on localhost:6060 showing all the properties for the Background component.

You can also view the docs which are hosted here:

Audio: https://dhasdk.bitbucket.io/TypescriptModules/docs/dha-assets/docs

Background: https://dhasdk.bitbucket.io/ReactModules/docs/#/Background

Viewing source code

https://bitbucket.org/wmtp/dha-assets

Published module

Here is where the module is currently published:

https://www.npmjs.com/package/dha-assets

License

This project is licensed under the MIT License.