showcase button text

src/component/button/index.js

@@ -6,7 +6,7 @@ import { node } from '../../utility/node';
 
 import './index.css';
 
-export const Button = function ({
+export const Button = function({
   text = 'Button',
   srOnly = false,
   iconName = false,
@@ -21,14 +21,16 @@ export const Button = function ({
 
   this.button = node('button|class:button,tabindex:1,type:button');
 
+  this.buttonText = node('span|class:button-text');
+
   if (text) {
-    const buttonText = node('span:' + text + '|class:button-text');
+    this.buttonText.textContent = text;
 
     if (srOnly) {
-      buttonText.classList.add('sr-only');
+      this.buttonText.classList.add('sr-only');
     }
 
-    this.button.appendChild(buttonText);
+    this.button.appendChild(this.buttonText);
   }
 
   if (iconName) {
@@ -142,6 +144,12 @@ export const Button = function ({
     this.button.classList.add('active');
   };
 
+  this.text = (newText) => {
+
+    this.buttonText.textContent = newText;
+
+  }
+
   this.wrap = () => {
     return form.wrap({
       children: [
@@ -150,4 +158,4 @@ export const Button = function ({
     });
   };
 
-};
+};

src/component/showcase/index.css

@@ -12,7 +12,7 @@
 .showcase {
   display: grid;
   gap: var(--showcase-padding);
-  grid-template-columns: 2fr 5fr;
+  grid-template-columns: 1fr 2fr;
   grid-template-areas:
     "side content";
   justify-items: center;
@@ -22,12 +22,19 @@
   grid-area: side;
   position: sticky;
   top: var(--showcase-padding);
+  width: 100%;
   height: fit-content;
 }
 
 .showcase-content {
   grid-area: content;
-  max-width: 50em;
+}
+
+@media (min-width: 1400px) {
+  .showcase-content {
+    grid-area: content;
+    max-width: 80%;
+  }
 }
 
 .showcase-type h1,

src/component/showcase/index.js

@@ -85,6 +85,7 @@ showcase.disable = () => {
 
   if (showcase.state.disable) {
 
+    showcase.control.side.disable.text('Enable');
     showcase.control.side.disable.active();
 
     showcase.control.input.radio.a.disable();
@@ -115,6 +116,7 @@ showcase.disable = () => {
 
   } else {
 
+    showcase.control.side.disable.text('Disable');
     showcase.control.side.disable.deactive();
 
     showcase.control.input.radio.a.enable();
@@ -149,6 +151,7 @@ showcase.disable = () => {
 
 showcase.control = {
   side: {},
+  shade: {},
   input: {},
   dropdown: {},
   button: {},
@@ -171,7 +174,6 @@ showcase.area.render = () => {
 showcase.area.assemble = () => {
 
   showcase.control.side = {
-    shade: new ShadeBar(),
     style: new Control_radio({
       object: state.get.current(),
       buttonHideInput: true,
@@ -317,6 +319,9 @@ showcase.area.assemble = () => {
     }),
   };
 
+
+  showcase.control.shade = new ShadeBar();
+
   showcase.control.input.radio = {
     a: new Control_radio({
       object: showcase.state.get.current(),
@@ -570,7 +575,6 @@ showcase.area.assemble = () => {
 
   showcase.element.showcase.appendChild(
     node('div|class:showcase-side', [
-      showcase.control.side.shade.shadeBar(),
       form.wrap({
         children: [
           form.inline({
@@ -596,6 +600,12 @@ showcase.area.assemble = () => {
 
   showcase.element.showcase.appendChild(
     node('div|class:showcase-content', [
+      form.wrap({
+        children: [
+          showcase.control.shade.shadeBar(),
+        ]
+      }),
+      node('hr'),
       form.wrap({
         children: [
           form.inline({