@jlycc/chronicles-component-ui v1.4.36

chronicles-component-ui

These are the components that can be reusable in various websites

Note: Compile sass before pushing to master

    npm run sass:build

Content Shared API Data

    {
        category: "content",
        contentType: "the type of component to be render, see other examples below",
        tags: "any kind of tag for filtering and separated by comma e.g. card, video",
        gridSize: "width of component container, values are 1x2, 1x4, 1x6 and 1x12"
    }

Slideshow Sample API Data

*Note:

• hPosition and vPosition are: center, left, right, top, bottom

• hPosition and vPosition is where the description of the slide shall be displayed

    {
        category: "content",
        contentType: "slideshow",
        items: [
            {
                category: "content",
                contentType: "slide",
                image: "http://placehold.it/1001x400",
                description: "description 1",
                hPosition: "top",
                vPosition: "right",
                interval: 5,
                link: {
                    ... this is an external link interface ...
                    label: "Google",
                    value: "http://www.google.com",

                    ... this is a content interface ...
                    category: "applicable value is 'content' only",
                    contentType: "applicable value is 'page' only",
                    slug: "Link value",
                    title: "Link label"

                    ... this is a link interface ...
                    target: "e.g. new tab, new window, open window (javascript), same tab"
                }
            },
            {
                category: "content",
                contentType: "slide",
                image: "http://placehold.it/1002x400",
                description: "description 2",
                hPosition: "bottom",
                vPosition: "left",
                interval: 2
           }
    }

Content Block Sample API Data

    {
      category: "content",
      contentType: "contentBlock",
      header: "header is optional",
      body: "<p style=\"text-align:center\">body is required</p>"
    }

Menu Sample API Data

*Note:

• pageType values are: generic and custom

• generic pageType is dynamic

• custom pageType is customize so need to create custom component or module for a specific brand

    {
        category: "menu",
        contentType: "customMenu",
        items: [
            {
                category: "content",
                contentType: "page",
                slug: "about",
                title: "About Us",
                pageType: "generic"
            },
            {
                category: "content",
                contentType: "page",
                slug: "services",
                title: "Services",
                pageType: "generic"
            },
            {
                link: {
                    ... this is an external link interface ...
                    label: "This is an external link",
                    value: "http://www.google.com",
                    
                    ... this is a link interface ...
                    target: "e.g. new tab, new window, open window (javascript), same tab"
                }
            },
            {
                category: "content",
                contentType: "slide",
                link: {
                    ... see slide under slideshow api
                }
            },
            {
                category: "menu",
                contentType: "customMenu",
                items: [
                    {
                        ... multi menu (dropdown)
                    }
                ]
            }
        ]
    }

Reference for CMS

0. Brand and Language

1. Page can only add contentTypes

   • slideshow
   • content block
   • section
   • card

2. Slideshow can only add contentType slide

3. Slide

4. Image

5. Content block

6. Section can only add contentTypes

   • content block
   • slideshow
   • card

7. Video

8. Menu can only add contentTypes

   • menu
   • page
   • slide
   • external link