Currently, CodeBlock only supports ether rendering a Copy option in the footer (default), or not.
We see a need to add custom functionality to the CodeBlock, such as an option to download the file as displayed, etc.
In order to allow users to pass their own functionality to the CodeBlock while not breaking the component and keeping the API consistent with other, similar components in our system (Modal, which provides a default set-up as well as the option to pass a fully customized footer with custom options), we need to do the following:
Subtasks
Currently,
CodeBlockonly supports ether rendering a Copy option in the footer (default), or not.We see a need to add custom functionality to the
CodeBlock, such as an option to download the file as displayed, etc.In order to allow users to pass their own functionality to the
CodeBlockwhile not breaking the component and keeping the API consistent with other, similar components in our system (Modal, which provides a default set-up as well as the option to pass a fully customized footer with custom options), we need to do the following:Subtasks
CodeBlockby factoring out aCodeBlockFooter(currently adiv.juno-codeblock-bottombar) that can be passed into a slot, set tofalseto not render at all, or set totrueto render the "Copy" option (default), in order to keep the approach and API consistent withModalCustomCodeBlockFooterstory (title: CodeBlock with Custom Options) that adds a custom footer with a Download and a Copy button (in this sequence ltr). For the Download button use the Download icon to align with the Copy buton.