Core Tech
Nova
Style Guide
Component Library
Component Structure

Component Structure

Every Nova component has the following structure,

├── example-component
│   ├── __mocks__
│   │   └── data.js
│   │
│   ├── __tests__
│   │   └── test.js
│   │
│   ├── brands
│   │   ├── {brand-name}.module.scss
│   │   └── {brand-name}.json
│   │
│   ├── class-controller.php
│   ├── class-model.php
│   ├── defaults.json
│   ├── documentation.mdx
│   ├── index.js
│   ├── meta.js
│   ├── schema.json
│   ├── styles.module.scss
│   └── template.php
ℹ️

The /brands/ folder, defaults.json and styles.module.scss are not required files, and only need to be created for components when needed.

Details

__mocks__/data.js

Mock data for the component used by the style guide for component documentation and usage outside of a WordPress context.

Keep reading

__tests__/test.js

JavaScript tests for the React component.

ℹ️

JavaScript test coverage for the component library is currently non-existent. These files are placeholders for future testing.

brands/{brand-name}.json

Optional. Brand-specific component defaults.

Read more about component defaults for brands.

brands/{brand-name}.module.scss

Optional. Brand-specific styles.

Read more about styling components for brands.

class-controller.php

Required. Controller class that handles calling the template renderer.

class-model.php

Required. Model class that handles settings the variables required for the template.

schema.json

Required. JSON Schema for the component. When values are missing in either the model, mock, or defaults, the schema defaults will apply.

defaults.json

Optional. Default values for hydrating the component/model. Must validate against the schema. Superceded by valuesin the brand specific files, i.e. brands/${brand-name}.json

documentation.mdx

Required. Documentation and component usage examples.

index.js

Required. React component.

meta.js

Required. An "entry-point" for extra information about the component, such as additional UI for documentation.

styles.module.scss

Optional. Styles that will always load

template.php

Required. PHP template for component. Transpiled from the return statement belonging to the React component in index.js.

Scaffold a new componentReact Component