Components

The /web/apps/themes/clarity/src/components directory is where you will find most of the code for the site. Each component should have the following files:

view.php - The component-specific view (PHP) for the component style.styl - The component-specific CSS file for the component script.js - The component-specific javascript for the component

Each component, even if it is just a container for another component, should also contain a component.json file formatting like so:

    {
    "name": "Basic Link List",
    "class": "c-basic-link-list",
    "version": "1.0.0",
    "creator": {
        "name": "Alex Foxleigh",
        "github_username": "foxleigh81"
    },
    "description": "A list of links",
    "standard_or_universal": "universal",
    "parents": "",
    "children": "No Child components",
    "notes": {
        "backend": "",
        "frontend": ""
    },
    "has_js": false,
    "integrated": false,
    "screenshot": "https://lh3.googleusercontent.com/XI615zOlqiVYOJg2Qh8eGQCLjZpRgKWaMWAAkaI8w7CVIlJA27v1nL58RSdcPoIVBzMUR19zhUCZAFA=w2572-h1428",
    "example_link": "https://intranet.dev.wp.dsd.io/",
    "changelog": [{
        "date": "02/02/17",
        "author": "Alex Foxleigh",
        "description": "Created component"
    }]
   }

There are two types of components, a standard component and a universal component. A universal component can be placed anywhere on the site, and it will reconfigure itself to fit the parent container. A standard component should still be reusable, but remember; these are components designed for a limited number of specific places. Standard components should have their available parent components or layouts specified in the components.json file.

Note: Only label a component as universal if you have thoroughly tested it.

To make a new component

Although you can create a new component manually, the preferred (and easier) way is to use the 'ctgen' package. To use it, type node ctgen when in the root of the project folder. It will ask you a few questions and automatically generate your component. It will even update the component register.

Once the component is generated, you will find it in /src/components/c-[component-name]; add your files and content to this directory.

Ideally, the component.json file would contain both a link to a page the component can be found and a link to a screenshot that illustrates what it looks like. This makes it easier for anyone working on it to identify it quickly. If the component is brand new, link to a wireframe instead.