Add icons grid story

[divyanshu013]

Add a story to showcase all icons so it makes it easier to identify which already exist

[YashasviChaurasia]

@chaitanyadeorukhkar @divyanshu013 I would like to work on this issue. Could you please assign it to me, Thank you.

[YashasviChaurasia]

@chaitanyadeorukhkar @divyanshu013 Can this issue be marked for hacktoberfest?

[divyanshu013]

Yeah, we can add a hacktoberfest-accepted label to the PR

[YashasviChaurasia]

Could you please describe the issue a little bit and how should I implement it. Thank you

[YashasviChaurasia]

@divyanshu013 @chaitanyadeorukhkar I would like to know what exactly a story is. I am new to this hence I don't know the exact meaning of the task. Sorry for the inconvenience, could you please elaborate on the task? Thank you

[chaitanyadeorukhkar]

@YashasviChaurasia you can learn more about Storybook & what a story is here.

In this issue we want to add a grid of icons to showcase the available icons on blade. Something similar to this.

[divyanshu013]

You may check packages/blade/src/components/Icons/Icons.stories.tsx for what we've on the existing stories. You'll likely need to add a story that adds support for a grid layout so we can see all icons at a glance. Please refer to the contributing guidelines at the repo root for any setup related instructions.

[divyanshu013]

Really awesome 🎉 Could you try to use ellipsis and truncate the text if it overflows? If not then we can have lesser columns per grid

[divyanshu013]

This works. Right now we don't have a way to override styles on Text.

[kamleshchandnani]

@harshcut can you try setting truncateAfterLines: 1 on the Text component and see?

[harshcut]

can you try setting truncateAfterLines: 1 on the Text component and see?

Tried this; doesn't work. The truncateAfterLines only works when the text is separated by space(s). If it is a single long word, it just clips the end.