Add anchor tag for hash link

[PeterYusuke]

PR for issue #416.

All Submissions:

• Have you followed the guidelines stated in CONTRIBUTING.md file?
• Have you checked to ensure there aren't any other open Pull Requests for the desired changed?

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

New Feature Submission:

• Does your submission pass the tests?
• Have you linted your code locally prior to submission?

After these steps, you're ready to open a pull request.

Added anchor tag that created with key property at any component.
This allows us to jump to to a specific place using hash in URL like "destination/url/#target".

Usage:

    pc.box(
        pc.text("This is target"),
        key="target",
    )

Above code creates this.
Anchor tag is placed at the first child tag.

    <Box key="target">
        <a name="target" id="target"></a>
        <Text>{`This is target`}</Text>
    </Box>

[Lendemor]

Is it not possible to add the id directly to the <Box> tag in this case?

[PeterYusuke]

Is it not possible to add the id directly to the <Box> tag in this case?

I think it's possible. Should I change this?

[Alek99]

Is it not possible to add the id directly to the <Box> tag in this case?

I think it's possible. Should I change this?

Yeah it would simplify the compiled code a bit, can you try this and see if it works. Thanks for the contribution

[PeterYusuke]

I changed to add id directly to component.
This works as hash link.

Usage :

    pc.box(
        id="target",
        pc.text("some text"),
    )

Above code creates this js code.

    <Box id="target">
        <Text>{`some text`}</Text>
    </Box>

[picklelo]

Good calling adding this id field . I'm a bit confused though - looks like the Anchor class got reverted? Don't we need that?

[picklelo]

Nvm, tried this locally and it works great - awesome work!

[Lendemor]

Good calling adding this id field . I'm a bit confused though - looks like the Anchor class got reverted? Don't we need that?

I think it was just there as a support for the id prop, but the Anchor itself didn't have a purpose.
Adding the id directly on the component work the same.

[mister-rao]

was looking for anchor hash navigation. Adding id to components work, but is there any way to make the scrolling smooth ?