native-forms-design-system/lib/es/index.es.js

Design system for NativeForms.com

import React from 'react';

/*!
  Copyright (c) 2016 Jed Watson.
  Licensed under the MIT License (MIT), see
  http://jedwatson.github.io/classnames
*/

var hasOwn = {}.hasOwnProperty;

function classNames () {
  var classes = [];

  for (var i = 0; i < arguments.length; i++) {
    var arg = arguments[i];
    if (!arg) continue;

    var argType = typeof arg;

    if (argType === 'string' || argType === 'number') {
      classes.push(arg);
    } else if (Array.isArray(arg)) {
      classes.push(classNames.apply(null, arg));
    } else if (argType === 'object') {
      for (var key in arg) {
        if (hasOwn.call(arg, key) && arg[key]) {
          classes.push(key);
        }
      }
    }
  }

  return classes.join(' ');
}

var getMergedClassNames = function (classNames, classNameProperty) {
    if (classNameProperty) {
        return classNames + " " + classNameProperty;
    }
    return classNames;
};

var Header = function (_a) {
    var _b;
    var children = _a.children, className = _a.className, spacing = _a.spacing, spacingVertical = _a.spacingVertical, spacingHorizontal = _a.spacingHorizontal, clipText = _a.clipText, lineHeight = _a.lineHeight, _c = _a.align, align = _c === void 0 ? 'left' : _c, _d = _a.weight, weight = _d === void 0 ? 'bold' : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e;
    var baseClass = 'header';
    var mergedClassNames = getMergedClassNames(classNames((_b = {},
        _b["base-text"] = true,
        _b["base-text--" + baseClass] = true,
        _b["base-text--align-" + align] = true,
        _b["weight--" + weight] = true,
        _b["color--" + variant] = true,
        _b["clip-text"] = clipText,
        _b["line-height--" + lineHeight] = lineHeight,
        _b["spacing--" + spacing] = spacing,
        _b["spacing-vertical--" + spacingVertical] = spacingVertical,
        _b["spacing-horizontal--" + spacingHorizontal] = spacingHorizontal,
        _b)), className);
    return React.createElement("h1", { className: mergedClassNames }, children);
};

var Subheading = function (_a) {
    var _b;
    var children = _a.children, className = _a.className, spacing = _a.spacing, spacingVertical = _a.spacingVertical, spacingHorizontal = _a.spacingHorizontal, clipText = _a.clipText, lineHeight = _a.lineHeight, _c = _a.align, align = _c === void 0 ? 'left' : _c, _d = _a.weight, weight = _d === void 0 ? 'medium' : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e;
    var baseClass = 'subheading';
    var mergedClassNames = getMergedClassNames(classNames((_b = {},
        _b["base-text"] = true,
        _b["base-text--" + baseClass] = true,
        _b["base-text--align-" + align] = true,
        _b["weight--" + weight] = true,
        _b["color--" + variant] = true,
        _b["clip-text"] = clipText,
        _b["line-height--" + lineHeight] = lineHeight,
        _b["spacing--" + spacing] = spacing,
        _b["spacing-vertical--" + spacingVertical] = spacingVertical,
        _b["spacing-horizontal--" + spacingHorizontal] = spacingHorizontal,
        _b)), className);
    return React.createElement("h2", { className: mergedClassNames }, children);
};

var Title = function (_a) {
    var _b;
    var children = _a.children, className = _a.className, spacing = _a.spacing, spacingVertical = _a.spacingVertical, spacingHorizontal = _a.spacingHorizontal, clipText = _a.clipText, lineHeight = _a.lineHeight, _c = _a.align, align = _c === void 0 ? 'left' : _c, _d = _a.weight, weight = _d === void 0 ? 'regular' : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e;
    var baseClass = 'title';
    var mergedClassNames = getMergedClassNames(classNames((_b = {},
        _b["base-text"] = true,
        _b["base-text--" + baseClass] = true,
        _b["base-text--align-" + align] = true,
        _b["weight--" + weight] = true,
        _b["color--" + variant] = true,
        _b["clip-text"] = clipText,
        _b["line-height--" + lineHeight] = lineHeight,
        _b["spacing--" + spacing] = spacing,
        _b["spacing-vertical--" + spacingVertical] = spacingVertical,
        _b["spacing-horizontal--" + spacingHorizontal] = spacingHorizontal,
        _b)), className);
    return React.createElement("h3", { className: mergedClassNames }, children);
};

var Paragraph = function (_a) {
    var _b;
    var children = _a.children, className = _a.className, spacing = _a.spacing, spacingVertical = _a.spacingVertical, spacingHorizontal = _a.spacingHorizontal, clipText = _a.clipText, lineHeight = _a.lineHeight, _c = _a.align, align = _c === void 0 ? 'left' : _c, _d = _a.weight, weight = _d === void 0 ? 'regular' : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e;
    var baseClass = 'paragraph';
    var mergedClassNames = getMergedClassNames(classNames((_b = {},
        _b["base-text"] = true,
        _b["base-text--" + baseClass] = true,
        _b["base-text--align-" + align] = true,
        _b["weight--" + weight] = true,
        _b["color--" + variant] = true,
        _b["clip-text"] = clipText,
        _b["line-height--" + lineHeight] = lineHeight,
        _b["spacing--" + spacing] = spacing,
        _b["spacing-vertical--" + spacingVertical] = spacingVertical,
        _b["spacing-horizontal--" + spacingHorizontal] = spacingHorizontal,
        _b)), className);
    return React.createElement("p", { className: mergedClassNames }, children);
};

var Label = function (_a) {
    var _b;
    var children = _a.children, className = _a.className, spacing = _a.spacing, spacingVertical = _a.spacingVertical, spacingHorizontal = _a.spacingHorizontal, clipText = _a.clipText, lineHeight = _a.lineHeight, _c = _a.align, align = _c === void 0 ? 'left' : _c, _d = _a.weight, weight = _d === void 0 ? 'regular' : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e;
    var baseClass = 'label';
    var mergedClassNames = getMergedClassNames(classNames((_b = {},
        _b["base-text"] = true,
        _b["base-text--" + baseClass] = true,
        _b["base-text--align-" + align] = true,
        _b["weight--" + weight] = true,
        _b["color--" + variant] = true,
        _b["clip-text"] = clipText,
        _b["line-height--" + lineHeight] = lineHeight,
        _b["spacing--" + spacing] = spacing,
        _b["spacing-vertical--" + spacingVertical] = spacingVertical,
        _b["spacing-horizontal--" + spacingHorizontal] = spacingHorizontal,
        _b)), className);
    return React.createElement("span", { className: mergedClassNames }, children);
};

var Caption = function (_a) {
    var _b;
    var children = _a.children, className = _a.className, spacing = _a.spacing, spacingVertical = _a.spacingVertical, spacingHorizontal = _a.spacingHorizontal, clipText = _a.clipText, lineHeight = _a.lineHeight, _c = _a.align, align = _c === void 0 ? 'left' : _c, _d = _a.weight, weight = _d === void 0 ? 'regular' : _d, _e = _a.variant, variant = _e === void 0 ? 'secondary' : _e;
    var baseClass = 'caption';
    var mergedClassNames = getMergedClassNames(classNames((_b = {},
        _b["base-text"] = true,
        _b["base-text--" + baseClass] = true,
        _b["base-text--align-" + align] = true,
        _b["weight--" + weight] = true,
        _b["color--" + variant] = true,
        _b["clip-text"] = clipText,
        _b["line-height--" + lineHeight] = lineHeight,
        _b["spacing--" + spacing] = spacing,
        _b["spacing-vertical--" + spacingVertical] = spacingVertical,
        _b["spacing-horizontal--" + spacingHorizontal] = spacingHorizontal,
        _b)), className);
    return React.createElement("span", { className: mergedClassNames }, children);
};

var Column = function (_a) {
    var _b;
    var children = _a.children, className = _a.className, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, margin = _a.margin, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, wrap = _a.wrap, stretch = _a.stretch, flex = _a.flex, _c = _a.align, align = _c === void 0 ? 'flex-start' : _c, _d = _a.justify, justify = _d === void 0 ? 'flex-start' : _d;
    var baseClass = 'base-column';
    var mergedClassNames = getMergedClassNames(classNames((_b = {},
        _b["" + baseClass] = true,
        _b["view-align--" + align] = true,
        _b["view-justify--" + justify] = true,
        _b["view-flex--" + flex] = flex,
        _b["padding--" + padding] = padding,
        _b["padding-vertical--" + paddingVertical] = paddingVertical,
        _b["padding-horizontal--" + paddingHorizontal] = paddingHorizontal,
        _b["margin--" + margin] = margin,
        _b["margin-vertical--" + marginVertical] = marginVertical,
        _b["margin-horizontal--" + marginHorizontal] = marginHorizontal,
        _b['container-fill'] = stretch,
        _b['wrap-items'] = wrap,
        _b)), className);
    return React.createElement("div", { className: mergedClassNames }, children);
};

var Row = function (_a) {
    var _b;
    var children = _a.children, className = _a.className, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, margin = _a.margin, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, wrap = _a.wrap, stretch = _a.stretch, flex = _a.flex, _c = _a.align, align = _c === void 0 ? 'flex-start' : _c, _d = _a.justify, justify = _d === void 0 ? 'flex-start' : _d;
    var baseClass = 'base-row';
    var mergedClassNames = getMergedClassNames(classNames((_b = {},
        _b["" + baseClass] = true,
        _b["view-align--" + align] = true,
        _b["view-justify--" + justify] = true,
        _b["view-flex--" + flex] = flex,
        _b["padding--" + padding] = padding,
        _b["padding-vertical--" + paddingVertical] = paddingVertical,
        _b["padding-horizontal--" + paddingHorizontal] = paddingHorizontal,
        _b["margin--" + margin] = margin,
        _b["margin-vertical--" + marginVertical] = marginVertical,
        _b["margin-horizontal--" + marginHorizontal] = marginHorizontal,
        _b['container-fill'] = stretch,
        _b['wrap-items'] = wrap,
        _b)), className);
    return React.createElement("div", { className: mergedClassNames }, children);
};

var Container = function (_a) {
    var _b;
    var children = _a.children, className = _a.className, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, margin = _a.margin, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical;
    var baseClass = 'base-container';
    var mergedClassNames = getMergedClassNames(classNames((_b = {},
        _b["" + baseClass] = true,
        _b["padding--" + padding] = padding,
        _b["padding-vertical--" + paddingVertical] = paddingVertical,
        _b["padding-horizontal--" + paddingHorizontal] = paddingHorizontal,
        _b["margin--" + margin] = margin,
        _b["margin-vertical--" + marginVertical] = marginVertical,
        _b["margin-horizontal--" + marginHorizontal] = marginHorizontal,
        _b)), className);
    return React.createElement("div", { className: mergedClassNames }, children);
};

export { Caption, Column, Container, Header, Label, Paragraph, Row, Subheading, Title };