# HubSpot Development Helper <!-- omit in toc -->

![0.2.6](https://img.shields.io/badge/Version-0.2.6-brightgreen)

Provides code partials to assist when building your Hubspot CMS files.

Designed for use with WebPack, Boostrap 5.1 and [HubSpot FieldsJs by iGoMoon](https://github.com/igomoon/hubspot-tools/tree/main/packages/hubspot-fields-js)

**Included**
- Build Tools
- Dynamic Loading JS "Fragments"
- Partial Fields Library
- HubL Macros that correspond to the Field Partials

## Table of Contents <!-- omit in toc -->

- [Dynamic Loading JS "Fragments"](#dynamic-loading-js-fragments)
	- [How to use JS fragments](#how-to-use-js-fragments)
- [Partial Fields Library](#partial-fields-library)
	- [How to use partial fields](#how-to-use-partials-fields)
- [HubL Macros](#hubl-macros)
	- [Configure Webpack Config](#configure-webpack-config)
- [Contributing](#contributing)
- [License](#license)


## Dynamic Loading JS "Fragments"

### How to use JS fragments

**Included**
- Video (using the VideoJS library)
- Carousel (using the SwiperJS library)
- Scroll Links (create scrollable links with #hash links)
- Number Animation

## FieldJS Tools

- Pulls in default exports from 

## Partial Fields Library
- setGlobalFieldsDirPath
- setEnablePackageFields
- loadFromFieldsDir
- loadFromPackageFieldsDir

### Config
- setConfigSrc
- setEnablePackageConfig
- getConfig
- config

### Accessing the Library
- Set your custom library `setFieldLibrarySrc`
- Enable the included Library `setEnablePackageLibrary`
- Get the library `library`
- loadFromLibrary
- LibraryField

### Other Helpers
- getOrCreateId


## Partial Fields
https://github.com/iGoMoon/hubspot-tools/tree/main/packages/hubspot-fields-js#advanced-usage

### How to use partial fields

groups/Button.js
groups/Buttons.js
groups/Form.js
groups/Header.js
groups/Icon.js
groups/Image.js
groups/Layout.js
groups/Logos.js
groups/Meeting.js
groups/Padding.js
groups/Settings.js
groups/Style.js
groups/SwiperJsSettings.js
groups/Testimonial.js
groups/Testimonials.js
groups/Theme.js
groups/Video.js

Alignment.js
BasicText.js
Colors.js
Columns.js
ColumnWidth.js
ContentWidth.js
CssClass.js
CssId.js
FlexDirection.js
Heading.js
HeadingInherit.js
HeadingType.js
JustifyContent.js
MediaLayout.js
Padding.js
SubHeading.js


## HubL Macros

### Configure Webpack Config

```javascript
patterns: [
	{ from: '@hs-dev-helper/hubl', to: 'hubl' },
	...
```

/hubl/macros/components

```javascript
patterns: [
	{ from: '@hs-dev-helper/hubl/macros/components', to: 'my-macros' },
	...
```

/my-macros/button.html

### Available Macros
- button.html
- carousel.html
- form.html
- header.html
- image-icon.html
- link.html
- logos.html
- meeting.html
- testimonial.html
- text.html
- video.html

## License

Apache 2.0