Merge pull request #2294 from boltdesignsystem/feature/DS-329-grapejs…

…-button-color

DS-329 Remove Button from Micro Journey Editor

docs-site/src/pages/pattern-lab/_patterns/60-experiments/micro-journeys/15-character-kitchen-sink.twig

@@ -1,5 +1,5 @@
 {% set content %}
-  <bolt-button onclick="triggerAnimateCharactersIn()">Trigger Characters Animate In</bolt-button>
+  <button type="button" class="e-bolt-button" onclick="triggerAnimateCharactersIn()" style="margin-bottom: 2rem;">Trigger Characters Animate In</button>
 
   <h2>Official Editor Starters</h2>
   <div class="demo__two-char-starter">

docs-site/src/pages/pattern-lab/_patterns/60-experiments/micro-journeys/_shadow-dom-demo.twig

@@ -1,4 +1,4 @@
-<bolt-button onclick="changeTheme()" style="margin-bottom: 2rem;">Toggle light/dark theme</bolt-button>
+<button type="button" class="e-bolt-button" onclick="changeTheme()" style="margin-bottom: 2rem;">Toggle light/dark theme</button>
 
 {% if addAnimateButtons %}
   {% set content %}

packages/experimental/editor/src/editor.twig

@@ -11,11 +11,11 @@
         {{ config | json_encode | raw }}
       {% endautoescape %}
     </script>
-    <bolt-button color="primary" size="xsmall" class="js-pega-editor__trigger">Edit</bolt-button>
-    <bolt-button color="secondary" size="xsmall" class="js-pega-editor__feedback">Submit Feedback</bolt-button>
+    <button type="button" class="e-bolt-button e-bolt-button--xsmall js-pega-editor__trigger">Edit</button>
+    <button type="button" class="e-bolt-button e-bolt-button--xsmall e-bolt-button--secondary js-pega-editor__feedback">Submit Feedback</button>
     <br>
     <div class="js-pega-editor__space">
       {{ content }}
     </div>
   </div>
-</bolt-editor>
+</bolt-editor>

packages/experimental/editor/src/setup-bolt.js

@@ -1,7 +1,5 @@
 import * as grapesjs from 'grapesjs'; // eslint-disable-line no-unused-vars
 // @ts-ignore
-import buttonSchema from '@bolt/components-button/button.schema';
-// @ts-ignore
 import textSchema from '@bolt/components-text/text.schema';
 import iconSchema from '@bolt/components-icon/icon.schema.json';
 // @ts-ignore
@@ -26,12 +24,6 @@ import { isChildOfEl, convertSchemaPropToTrait, getStepsLorem } from './utils';
 
 class EditorRegisterBoltError extends Error {}
 
-const smallButton = {
-  id: 'bolt-button--small',
-  title: 'Button',
-  content: `<bolt-button size="small">Button</bolt-button>`,
-};
-
 const basicText = {
   id: 'bolt-text',
   title: 'Text',
@@ -130,7 +122,6 @@ const basicSlottableComponents = [
   statusBar,
   statusBarAlert,
   icon,
-  smallButton,
   basicText,
   cta,
   link,
@@ -195,7 +186,7 @@ export function setupBolt(editor) {
 
   /**
    * @param {Object} opt
-   * @param {string} opt.name i.e. `bolt-button`
+   * @param {string} opt.name i.e. `bolt-link`
    * @param {string} [opt.blockTitle] only used if `registerBlock` is `true`
    * @param {import('./utils').JsonSchema} [opt.schema]
    * @param {string[]} [opt.initialContent] HTML for when block is added
@@ -211,7 +202,7 @@ export function setupBolt(editor) {
    * @param {string[]} [opt.propsToTraits=[]] Json Schema properties keys to auto-add to traits via `convertSchemaPropToTrait`
    * @param {grapesjs.GrapeTrait[]} [opt.extraTraits=[]] Full Trait objects that need more custom attention than `propsToTraits`
    * @param {(el: HTMLElement) => boolean} [opt.isComponent] - function to determine if an HTMLElement is this component. Defaults to seeing if tag name is component name
-   * @param {Object.<string, boolean|string>} [opt.slots={ default: true }] - Which slots are available and what can go in them. For example `{ default: true, top: 'bolt-text, bolt-button' }` would let any element be placed as a direct child (the `default` slot) and the `top` slot would only accept `<bolt-text>` or `<bolt-button>`. Those values are passed right to Grape JS's `droppable`.
+   * @param {Object.<string, boolean|string>} [opt.slots={ default: true }] - Which slots are available and what can go in them. For example `{ default: true, top: 'bolt-text, bolt-link' }` would let any element be placed as a direct child (the `default` slot) and the `top` slot would only accept `<bolt-text>` or `<bolt-link>`. Those values are passed right to Grape JS's `droppable`.
    * @param {SlotControl[]} [opt.slotControls]
    * @param {removalEventsToFireOnParents[]} [opt.removalEventsToFireOnParents=[]]
    * @returns {{ component: Object, block: Object }} instances from registering @todo fill out types
@@ -359,48 +350,6 @@ export function setupBolt(editor) {
     };
   }
 
-  // schema has it as `style` but web component uses it as `color` since `style` is a reserved HTML attribute; see http://vjira2:8080/browse/BDS-721 & http://vjira2:8080/browse/BDS-1104
-  const colorTrait = convertSchemaPropToTrait({
-    prop: buttonSchema.properties.style,
-    name: 'color',
-  });
-  colorTrait.label = 'Color';
-
-  registerBoltComponent({
-    name: 'bolt-button',
-    registerBlock: true,
-    schema: buttonSchema,
-    extend: 'text',
-    initialContent: ['<span>Button</span>'],
-    propsToTraits: ['size', 'width', 'border_radius'],
-    extraTraits: [
-      colorTrait,
-      {
-        label: 'On Click',
-        name: 'on-click',
-        type: 'select',
-        options: ['none', 'show'],
-        default: 'none',
-      },
-      {
-        label: 'On Click Target',
-        name: 'on-click-target',
-        type: 'string',
-      },
-      {
-        label: 'Url',
-        name: 'url',
-        type: 'string',
-      },
-      {
-        label: 'Disabled',
-        name: 'disabled',
-        type: 'checkbox',
-        default: false,
-      },
-    ],
-  });
-
   registerBoltComponent({
     name: 'bolt-text',
     registerBlock: true,