Added new custom tags tip, warning and danger

[divyaxdv]

GitHub Issue: #239
Resolves: #239

Summary:

In this PR, I have added new custom tags namely Tip, Warning and Danger

Do you think resolving this issue might require an Architectural Decision Record (ADR)? (significant or noteworthy)

No

[divyaxdv]

@benjagm Please review and let me know if any other changes required.

[gregsdennis]

Do these always need the title tab, e.g. the "Draft specific info"? Potentially we want to be able to omit that.

[divyaxdv]

It is already optional, if we dont pass the label prop it will be automatically omited.

[gregsdennis]

What's the markdown syntax for these? For example, if I want to use this in a blog post, how do I do that? (This was the original ask that inspired the issue.)

The Chirpy syntax is

> This text looks like a block quote, but the following line makes it tender in a styled box.
{: .prompt-info }

My (non-web-developer) guess is that the content of the {: } is a set of CSS styles that then apply the visuals.

[Relequestual]

What's the markdown syntax for these? For example, if I want to use this in a blog post, how do I do that?

Looks like you can use the component name as HTML in the markdown. I believe the main site content and the blog posts are processed the same from markdown.

website/pages/understanding-json-schema/basics.md

Lines 122 to 127 in 350b997

	<Infobox label="Draft-specific info">
	In Draft 4, a `$schema` value of
	`http://json-schema.org/schema#` referred to the latest version
	of JSON Schema. This usage has since been deprecated and the use
	of specific version URIs is required.
	</Infobox>

[benjagm]

Looks like you can use the component name as HTML in the markdown

That is right Ben. We have a set of those custom HTML tags and the intend of this issue is to create some more.
I think we need those tags to be documented. I'll create an issue for it.

[gregsdennis]

@Relequestual that example helps, but it only shows a label. How is this new config value specified? I don't see that. Examples of usage would be great.

[Relequestual]

@Relequestual that example helps, but it only shows a label. How is this new config value specified? I don't see that. Examples of usage would be great. - @gregsdennis

Assuming that by "config value", you're assuming that you pass an attribute to specify the type of box being used, you'd be incorrect in that assumption, although reasonable.

In the opening comment, they said they have added the tags Tip, Warning, and Danger. Literally, you can now use those as HTML tags in the markdown which will be converted to the component during compliation.

Want to use a "Tip" box, use the HTML tag <Tip></Tip>, and everything else is the same as the example above.

I know the code could be refactored to reduce duplication, but it does the job.

@divyaxdv Did you want to have a go at refactoring this to reduce duplication? You'd want to do something similar as in this article I think.

[divyaxdv]

Sure, I will update it.

[divyaxdv]

I have created an Information component and is refactoring new tags using it . I have passed the imgSrc and bgcolor prop but for some reason bgcolor prop is not updating colors for tip, warning and danger. I have inspected the elements to check classname and they are fine but still colors are not getting updated. @Relequestual @gregsdennis @benjagm .
I have tried a few things and looking into it, but any kind of help is much appreciated.

[benjagm]

help is much appreciated.

You have done an amazing job @divyaxdv!! Huge thanks! I just pushed some changes to fix the issues with colours. I needed to try different things and finally I fixed it. I also added some other changes.

Please, help let me know if now the issue is fixed.

[divyaxdv]

Thanks! @benjagm for your time and help.

But I still dont see the colors being updated for tip, danger and warning . It is working fine for Infobox as mentioned.

[benjagm]

But I still dont see the colors being updated

Are you sure you are testing the code I pushed?

[divyaxdv]

It is very Strange. I have checked multiple times and also with different browsers like chrome, firefox , edge but the issue persists.
I am trying to validate it by changing the usage of Infobox in array.md at line 127 to Tip like this:

<Tip label="Draft-specific info">
In Draft 4 - 2019-09, tuple validation was handled by an alternate
   form of the `items` keyword. When `items` was an array of
   schemas instead of a single schema, it behaved the way
   `prefixItems` behaves.
</Tip>

Can you please confirm if I am using this in a right way and also can you please make sure that all the changes are pushed ?
Thankyou so much. @benjagm

[divyaxdv]

Hello @gregsdennis @Relequestual when you get a chance can you also kindly check on your local if the latest changes are working as expected.

[gregsdennis]

I'm not currently set up to run the site.

[benjagm]

Hello @gregsdennis @Relequestual when you get a chance can you also kindly check on your local if the latest changes are working as expected.

You where right, that version was not working as expected. I am pushing another version adding all the code inside StyledMarkdown and not using the Information component, and this seems to work. The previous solution was cleaner but for any reason the styles didn't work.

[benjagm]

@divyaxdv How do you feel with the solution I pushed?

[divyaxdv]

This totally works, but I was still figuring how it can be done using the component(information). Until then I think we should merge this PR and it could be refactored later if we find a better solution.
Thanks so much for the help!@benjagm

[gregsdennis]

Until then I think we should merge this PR and it could be refactored later if we find a better solution.

My concern with this is that if we merge now and new content is written that uses these features, when we refactor, we'll have to either remember to go everywhere and update the content or we'll have to refactor in a backwards compatible way.

If we're happy to do that, sure, but we need to be aware that this is an outcome of merging now.

[divyaxdv]

The way we are trying to refactor will not effect the usage of these tags. Newer content will also use only the label props and other props like color and the icon, that is our design choice so these props will not be exposed for the users to change which will keep the usage consistent throughout the app even though we refactor. @gregsdennis

What are your view ? @benjagm

[benjagm]

@gregsdennis @divyaxdv I think it is ok to merge this. The tagging will be the same with indepence of the implementation we choose. What I tink is worth is create a md file with the annotations we can use when writing markdown.

[benjagm]

great work @divyaxdv !!