component: paragraph--step_by_step (Step by step)

[amponce]

Description

A component is needed in the next-build system to render paragraph--step_by_step. This component should be able to be used standalone or to render field data for other nodes and paragraphs.

Tasks

Preview Give feedback

1. component: paragraph--step (Step) #16755
   2 of 2
   Accelerated Publishing Needs refining +2

Supporting detail

Paragraph/Node: paragraph--step_by_step

CMS structure: paragraphs_type/step_by_step/fields

API query: jsonapi/paragraph/step_by_step

Existing template(s):step_by_step.drupal.liquid

Existing/example existing GraphQL:nodeStepByStep.paragraph.graphql.js

Logic notes:

Related to: API query: jsonapi/paragraph/step

Step Data structure

{
    "type": "paragraph--step",
    "id": "72d90a8d-26ca-4c9e-966e-f65e17124987",
    "drupal_internal__id": 12696,
    "drupal_internal__revision_id": 145554,
    "langcode": "en",
    "status": true,
    "created": "2020-08-17T19:02:39+00:00",
    "parent_id": "12702",
    "parent_type": "paragraph",
    "parent_field_name": "field_step",
    "behavior_settings": [],
    "default_langcode": true,
    "revision_translation_affected": null,
    "field_wysiwyg": {
        "value": "<p><strong>Sign in to VA.gov</strong></p>\r\n\r\n<p>You can sign in with your DS Logon, My HealtheVet, or ID.me account. If you don't have an account, we’ll prompt you to create one.</p>\r\n",
        "format": "rich_text_limited",
        "processed": "<p><strong>Sign in to VA.gov</strong></p>\n<p>You can sign in with your DS Logon, My HealtheVet, or ID.me account. If you don't have an account, we’ll prompt you to create one.</p>\n"
    },
    "links": {
        "self": {
            "href": "http://va-gov-cms.ddev.site/jsonapi/paragraph/step/72d90a8d-26ca-4c9e-966e-f65e17124987"
        }
    },
    "paragraph_type": {
        "type": "paragraphs_type--paragraphs_type",
        "id": "5c6e9bb2-33c7-4a89-bd86-b88e6b21de7c",
        "resourceIdObjMeta": {
            "drupal_internal__target_id": "step"
        }
    },
    "field_alert": {
        "type": "paragraph--alert_single",
        "id": "0e71c5cd-a4e2-4dec-9b1e-0ef1c5666f65",
        "resourceIdObjMeta": {
            "target_revision_id": 145553,
            "drupal_internal__target_id": 13070
        }
    },
    "field_media": {
        "type": "media--image",
        "id": "20fadb12-c821-4b86-b366-a92db9fb5484",
        "resourceIdObjMeta": {
            "drupal_internal__target_id": 1231
        }
    },
    "relationshipNames": [
        "paragraph_type",
        "field_alert",
        "field_media"
    ]
}

Example to render collection of objects:

    const paragraph--step_by_step = await getResourceCollectionFromContext(
        'paragraph--step_by_step',
        context,
        {} // params 
    );

Example data structure (subject to refinement):

{
    "type": "paragraph--step_by_step",
    "id": "70ce1da8-8a81-46d2-b2b8-20720277d36e",
    "drupal_internal__id": 13562,
    "drupal_internal__revision_id": 148677,
    "langcode": "en",
    "status": true,
    "created": "2020-10-16T14:10:07+00:00",
    "parent_id": "8474",
    "parent_type": "node",
    "parent_field_name": "field_steps",
    "behavior_settings": [],
    "default_langcode": true,
    "revision_translation_affected": true,
    "field_section_header": "How to change your education direct deposit info by phone or in person",
    "links": {
        "self": {
            "href": "http://va-gov-cms.ddev.site/jsonapi/paragraph/step_by_step/70ce1da8-8a81-46d2-b2b8-20720277d36e"
        }
    },
    "paragraph_type": {
        "type": "paragraphs_type--paragraphs_type",
        "id": "f2ef91ed-930c-49d8-a3f3-b84ebf60c736",
        "resourceIdObjMeta": {
            "drupal_internal__target_id": "step_by_step"
        }
    },
    "field_step": [
        {
            "type": "paragraph--step",
            "id": "ab4298ea-84e3-497b-a681-30b25e5b5197",
            "resourceIdObjMeta": {
                "target_revision_id": 148008,
                "drupal_internal__target_id": 13561
            }
        }
    ],
    "relationshipNames": [
        "paragraph_type",
        "field_step"
    ]
}

Further info:paragraphs/step_by_step.md