feat(CodeSnippet): add support for word wrap

[echarpibm]

Closes #6473

Adds support for text wrapping on a type multi CodeSnippet

Changelog

New

• New boolean property wrapText

<CodeSnipper type="multi" wrapText=true>
the code in here
</CodeSnippet>

Changed

• Nothing

Removed

• Nothing

Testing / Reviewing

In storybook, the CodeSnippet will show a new story for the Longline as well as the new property in the knobs which can be turned on or off to see the behaviour.

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 6c87622

https://deploy-preview-6960--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 6c87622

https://deploy-preview-6960--carbon-components-react.netlify.app

[emyarod]

looks good to me, just pending visual review (the text may need to be updated in the storybook example)

also in order to pass CI you will need to update the component snapshots (yarn test -u)

[dakahn]

this actually may be a needed accessibility enhancement given the coming WCAG requirements around text reflow 👍 🏄

[laurenmrice]

I think the story longline should be represented as a prop or knob? because it is not a distinct variant like inline, single line and mutli-line code snippet. @emyarod do you agree?

[echarpibm]

I think the story longline should be represented as a prop or knob? because it is not a distinct variant like inline, single line and mutli-line code snippet. @emyarod do you agree?

I considered that when I created the story, but essentially the existing stories do not show "long lines" and the actual text is not configurable. So I chose to leave the existing stories as they were and to add one that showed long lines in it. I considered it to be "more documentation" and more clear than to "hide" the behaviour in one of the existing stories.

[emyarod]

@laurenmrice @echarpibm I think it's fine to expose it as a storybook knob and just update the existing code snippets to contain long lines of text. My original question was around the actual code snippet example content: do we have something else we would rather use in place of thisisasecondlinethatisverylongbuthasnospacestoseehowitbehavesinthissituationwillitwrapanywaythisiswhatweneedotseeherethisisasecondlinethatisverylongbuthasnospacestoseehowitbehavesinthissituationwillitwrapanywaythisiswhatweneedotseehere for example?

[echarpibm]

@laurenmrice @echarpibm I think it's fine to expose it as a storybook knob and just update the existing code snippets to contain long lines of text. My original question was around the actual code snippet example content: do we have something else we would rather use in place of thisisasecondlinethatisverylongbuthasnospacestoseehowitbehavesinthissituationwillitwrapanywaythisiswhatweneedotseeherethisisasecondlinethatisverylongbuthasnospacestoseehowitbehavesinthissituationwillitwrapanywaythisiswhatweneedotseehere for example?

Like this? Or do you want actual code?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur varius molestie feugiat. Morbi ut lectus vel urna auctor congue. Vivamus pellentesque pulvinar justo, vitae sodales sapien volutpat sed. Quisque blandit nisi eu erat dapibus posuere. Integer mattis suscipit neque. Phasellus sed pulvinar leo, vitae tristique magna. Donec ex nisl, lobortis nec tincidunt at, suscipit ac risus. Ut vestibulum porta est. Mauris justo justo, blandit id congue id, egestas a felis. Suspendisse condimentum mauris vel rutrum scelerisque. Cras massa leo, interdum at libero at, tincidunt tincidunt nunc.

[laurenmrice]

I think if you had a real usecase example it would be great , like actual code.

[echarpibm]

I think if you had a real use case example it would be great , like actual code.

I removed the extra example and modified the Multiline to be half the width of the screen and update the content of the code snippet with a package.json extract that allows to show the new functionality. Let me know if that works.

[laurenmrice]

Looks good to me! thank you 🙌🏻

[emyarod]

looks good to me, just need to update snapshots to pass CI now (yarn test -u)

[echarpibm]

looks good to me, just need to update snapshots to pass CI now (yarn test -u)

So I'm not sure if that is directed to me or not. But for some reason, I never got the tests to pass fully on my computer (and still don't) so I am not sure what would be expected of me in this case. Sorry.