Components

The /src/components folder is where you will find most of the code for the site. Each component should have at least one of the following files:

view.php - The component-specific view (PHP) for the component style.styl - The component-specific CSS file for the compoennt 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 has the ability to be placed anywhere on the site and it will reconfigure itself to fit the parent container. A standard component should still be reusable but these are components which are 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: Do not label a component as universal unless 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 simply type node ctgen when in the root of the project folder. It will ask you a few questions and then automatically generate your component for you. It will even update the component register.

Once the component is generated, you will find it in /src/components/c-[component-name], you will then be able to add your own files and content.

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 then perhaps link to a wireframe instead.

We use Google Drive to store links to screenshots. The process has been documented in the video below: