Merge pull request #27 from alexaveldanez/dynamic-code-block

(#440) Created dynamic code block component

Author: st3phhays

README.md

@@ -37,6 +37,7 @@ The Chocolatey Design System has all information relating to Astro Components an
 * Learn about Astro and how to use [Components in `.mdx` and `.astro`](https://design.chocolatey.org/foundations/astro) file types.
 * Learn how to use the [`<Callout />` Component](https://design.chocolatey.org/components/callouts) to display notes and important information.
 * Learn how to use the [`<CollapseButton />` Component](https://design.chocolatey.org/collapse-button) to display a button that triggers a collapsed element.
+* Learn how to use the [`<DynamicCodeBlock />` and `<DynamicCodeBlockInput />` Components](https://design.chocolatey.org/components/dynamic-code-block) to display a code block with variables that can be replaced with values from inputs.
 * Learn how to use the [`<Iframe />` Component](https://design.chocolatey.org/components/iframe) to display videos with defined aspect ratios.
 * Learn how to use the [`<Tabs />` Component](https://design.chocolatey.org/components/tabs) to display content in tabbed interface.
 * Learn how to use the [`<Xref />` Component](https://design.chocolatey.org/components/xref) to link to other documents within this repository.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choco-astro",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "packageManager": "yarn@4.2.2",
   "type": "module",
   "description": "A global set of dependencies to be used on Chocolatey Software Astro projects.",

src/components/dynamicCodeBlock/DynamicCodeBlock.astro

@@ -0,0 +1,12 @@
+---
+const generateRandomClass = () => {
+    const randomNumber = Math.floor(Math.random() * 1000);
+    return `dynamic-code-block-${randomNumber}`;
+};
+---
+
+<div class="dynamic-code-block-container copy-command">
+    <pre class="language-powershell"><code class={generateRandomClass()}>
+        <slot />
+    </code></pre>
+</div>

src/components/dynamicCodeBlock/DynamicCodeBlockInput.astro

@@ -0,0 +1,5 @@
+---
+const { name, defaultValue, placeholder } = Astro.props;
+---
+
+<input class="form-control w-50 mb-3 dynamic-code-block-input" type="text" name={name} data-default-value={defaultValue} placeholder={placeholder} />