Components

Structure

Markup for a component lives in /templates/components/.

Styling

Styling for a component is broken down into:

1. /src/styles/core/components/{component}.scss
2. /src/styles/theme-{theme}/components/{component}.scss

If any overrides are needed for styling in the Gutenberg editor, add them to the core or theme-specific editor stylesheets right after the component sass partial is included.

Adding a New Component

1. Add /templates/components/{component}.twig and add HTML.
2. Add /src/styles/core/components/{component}.scss for any styling needed.
3. Create additional SCSS files for any modifications needed for themes like so: /src/styles/theme-{theme}/components/{component}.scss
4. Make sure to import the new SCSS files to the main sheets as needed.
5. Include the new component or set up a docs page to preview it.
6. If any custom colors or other school-specific CSS need to be added, make sure to update any child themes.

Adding Component Docs

Add {component}.md and a matching {component}.json to /docs/components/. Optionally, {component}.js may be created if custom JS is needed for a component demo. The component JSON has the following parts:

Sample Data

Each sample variation needs:

Data

Data can be used to map bits of information to the component's properties that get sent directly to the component. If a property's name is content (or includes "content") and it's an array of objects, the compiled preview will automatically include the specified inner components and render them. Each inner object should have name (component name string) and data (properties object). If an inner component's name is set to html, it will pass data as a string instead of trying to render a component.

Template

If a component does not have a .twig file associated with it, or you need to add additional items to properly showcase a component, replace data with template and specify a twig file created in the docs/components directory to be included instead.

Example

{
    "release": "1.0.0",
    "updated": "1.5.0",
    "full_width": false,
    "gutenberg_block": [1, 2],
    "sample_data": [
        {
            "title": "Default",
            "data": {
                "title": "C110 - Course Title",
                "label": "3 Credits",
                "content": [
                    {
                        "name": "html",
                        "data": "<p>Course Description.</p>"
                    },
                    {
                        "name": "button",
                        "data": {
                            "link": {
                                "url": "/url/to/course/",
                                "title": "View Full Course"
                            },
                            "style": "secondary"
                        }
                    }
                ]
            }
        },
        {
            "title": "Custom Template",
            "color_picker": false,
            "template": "accordion-custom.twig"
        }
    ]
}