[WIP] Button

package.json

@@ -39,6 +39,7 @@
     "jest-circus": "^23.6.0",
     "jest-junit": "^5.2.0",
     "lint-staged": "^8.1.0",
+    "lodash": "^4.17.11",
     "prettier": "^1.15.3",
     "rimraf": "^2.6.3",
     "rollup": "^1.1.0",
@@ -87,7 +88,8 @@
     "testMatch": [
       "<rootDir>/**/__tests__/**/*.js?(x)",
       "<rootDir>/**/?(*.)(spec|test).js?(x)",
-      "<rootDir>/**/?(*-)(spec|test).js?(x)"
+      "<rootDir>/**/?(*-)(spec|test).js?(x)",
+      "<rootDir>/**/tests/unit.js?(x)"
     ],
     "transform": {
       "^.+\\.(js|jsx)$": "./tasks/jest/jsTransform.js",

src/components/button/config/demo.js

@@ -0,0 +1,100 @@
+/**
+ * Copyright IBM Corp. 2018, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Configuration for the Button component
+ * @module button/demo
+ */
+import startCase from 'lodash/startCase';
+import { generate } from './generate';
+
+/**
+ * Creates a button template configuration for a variant
+ * @returns {globalTypedefs.fractalDemo} fractal demo object
+ */
+const variantButtons = function() {
+  const variants = {};
+
+  Object.keys(this.selectors.variants).forEach(variant => {
+    variants[variant] = {
+      name: variant,
+      label: startCase(variant),
+      context: generate.apply(this, [
+        {
+          variant,
+        },
+      ]),
+    };
+  });
+
+  return variants;
+};
+
+/**
+ * Modifier: Anchor
+ * @returns {globalTypedefs.fractalDemo} fractal demo object
+ */
+const anchorButton = function() {
+  return {
+    name: 'anchor',
+    label: 'Anchor',
+    context: generate.apply(this, [
+      {
+        element: 'a',
+      },
+    ]),
+  };
+};
+
+/**
+ * Modifier: Small
+ * @returns {globalTypedefs.fractalDemo} fractal demo object
+ */
+const smallButton = function() {
+  return {
+    name: 'small',
+    label: 'Small',
+    context: generate.apply(this, [
+      {
+        size: 'small',
+      },
+    ]),
+  };
+};
+
+/**
+ * State: Disabled
+ * @returns {globalTypedefs.fractalDemo} fractal demo object
+ */
+const disabledButton = function() {
+  return {
+    name: 'disabled',
+    label: 'Disabled',
+    context: generate.apply(this, [
+      {
+        disabled: true,
+      },
+    ]),
+  };
+};
+
+export default function demo() {
+  return {
+    variants: variantButtons.apply(this),
+    modifiers: {
+      types: {
+        anchor: anchorButton.apply(this),
+      },
+      sizes: {
+        small: smallButton.apply(this),
+      },
+    },
+    states: {
+      disabled: disabledButton.apply(this),
+    },
+  };
+}

src/components/button/config/generate.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright IBM Corp. 2018, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Template configuration generate functions for Button component
+ * @module button/generate
+ */
+import cloneDeep from 'lodash/cloneDeep';
+import merge from 'lodash/merge';
+
+// TODO JSDoc
+export function generate(options) {
+  let opts = merge(
+    {
+      element: 'button',
+      content: 'Button',
+      attributes: {},
+      disabled: false,
+      type: 'button',
+      tabIndex: 0,
+      variant: 'primary',
+    },
+    options
+  );
+
+  const selectors = cloneDeep(this.selectors);
+
+  let config = {
+    root: {},
+  };
+
+  Object.keys(selectors.default).forEach(element => {
+    config = merge(config, {
+      [element]: {
+        attributes: {},
+        classNames: selectors.default[element],
+      },
+    });
+  });
+
+  // Element
+
+  config.root.element = opts.element;
+
+  // Content
+
+  config.root.content = opts.content;
+
+  // Classes
+
+  config.root.classNames += ` ${selectors.variants[opts.variant].root}`;
+
+  if (opts.size) {
+    config.root.classNames += ` ${selectors.modifiers.sizes[opts.size].root}`;
+  }
+
+  // Attributes
+
+  if (opts.variant === 'danger') {
+    config.root.attributes['aria-label'] = 'danger';
+  }
+
+  if (opts.element === 'button') {
+    config.root.attributes.type = opts.type;
+
+    if (opts.disabled) {
+      config.root.attributes.disabled = '';
+    }
+  } else if (opts.element === 'a') {
+    config.root.attributes.href = opts.href || '#';
+    config.root.attributes.role = 'button';
+  }
+
+  if (config.icon) {
+    config.icon.attributes['aria-hidden'] = true;
+  }
+
+  return config;
+}

src/components/button/config/selectors.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2018, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Available CSS selectors for Button component
+ * @module button/selectors
+ */
+
+/**
+ * Button component classes
+ * @typedef {object} buttonClasses
+ * @property {string} root - button element
+ * @property {string} content - wrapper element around button content
+ * @property {string} icon - button SVG
+ */
+
+/**
+ * Button component selectors
+ * @typedef {object} buttonSelectors
+ * @property {buttonClasses} default - default button classes
+ * @property {object} variants - button variants
+ * @property {buttonClasses} variants.primary - `primary` variant
+ * @property {buttonClasses} variants.secondary - `secondary` variant
+ * @property {buttonClasses} variants.tertiary - `tertiary` variant
+ * @property {buttonClasses} variants.ghost - `ghost` variant
+ * @property {buttonClasses} variants.danger - `danger` variant
+ * @property {object} modifiers - style modifiers
+ * @property {object} modifiers.sizes - size modifiers
+ * @property {buttonClasses} modifiers.sizes.small - `small` modifier
+ */
+const selectors = {
+  default: {
+    root: 'btn',
+    content: 'btn__content',
+    icon: 'btn__icon',
+  },
+  variants: {
+    primary: {
+      root: 'btn--primary',
+    },
+    secondary: {
+      root: 'btn--secondary',
+    },
+    tertiary: {
+      root: 'btn--tertiary',
+    },
+    ghost: {
+      root: 'btn--ghost',
+    },
+    danger: {
+      root: 'btn--danger',
+    },
+  },
+  modifiers: {
+    sizes: {
+      small: {
+        root: 'btn--sm',
+      },
+    },
+  },
+};
+
+export default selectors;

src/components/button/index.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright IBM Corp. 2018, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Button component
+ * @module button
+ */
+import { prefixSelectors } from '../../tools/component/selectors';
+import demo from './config/demo';
+import { generate } from './config/generate';
+import selectors from './config/selectors';
+
+/**
+ * Button spec
+ * @param {string} prefix - selector prefix
+ * @type {globalTypedefs.componentConfig}
+ */
+const buttonConfig = prefix => {
+  const config = {
+    selectors: prefixSelectors(selectors, prefix),
+  };
+
+  return {
+    label: 'Button',
+    demo: demo.bind(config),
+    generate: generate.bind(config),
+    selectors: config.selectors,
+  };
+};
+
+export default buttonConfig;

src/components/button/index.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

src/components/button/requirements.feature

@@ -0,0 +1,6 @@
+#
+# Copyright IBM Corp. 2018, 2018
+#
+# This source code is licensed under the Apache-2.0 license found in the
+# LICENSE file in the root directory of this source tree.
+#

src/components/button/styles/_mixins.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

src/components/button/styles/_variables.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

src/components/button/tests/context.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright IBM Corp. 2018, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

src/components/button/tests/requirements.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright IBM Corp. 2018, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

src/components/button/tests/template.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright IBM Corp. 2018, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

src/components/button/tests/unit.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2018, 2019
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import buttonConfig from '../';
+
+describe('Button', () => {
+  it('Generates a button', () => {
+    const button = buttonConfig('bx');
+    const myButton = button.generate({
+      disabled: true,
+      size: 'small',
+      variant: 'danger',
+    });
+
+    console.log(JSON.stringify(button.label, null, 2));
+
+    console.log(JSON.stringify(button.demo(), null, 2));
+
+    console.log(JSON.stringify(myButton, null, 2));
+
+    console.log(JSON.stringify(button.selectors, null, 2));
+
+    expect(true).toEqual(true);
+  });
+});