@wingsuit-designsystem/storybook/dist/docs/Typeset.js

Wingsuit Storybook Integration.

"use strict";

require("core-js/modules/es.symbol.js");
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.function.bind.js");
require("core-js/modules/es.object.assign.js");
require("core-js/modules/es.object.define-property.js");
require("core-js/modules/es.string.includes.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.Typeset = void 0;
require("core-js/modules/es.array.map.js");
require("core-js/modules/es.object.keys.js");
var _react = _interopRequireDefault(require("react"));
var _theming = require("@storybook/theming");
var _polished = require("polished");
var _excluded = ["fontFamily", "fontSizes", "fontWeight", "sampleText", "classNamePrefix"]; // eslint-disable-next-line import/named
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
var Label = _theming.styled.div(function (_ref) {
  var theme = _ref.theme;
  return {
    marginRight: 30,
    fontSize: "".concat(theme.typography.size.s1, "px"),
    color: theme.base === 'light' ? (0, _polished.transparentize)(0.4, theme.color.defaultText) : (0, _polished.transparentize)(0.6, theme.color.defaultText)
  };
});
var Sample = _theming.styled.div({
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis'
});
var TypeSpecimen = _theming.styled.div({
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'baseline',
  '&:not(:last-child)': {
    marginBottom: '1rem'
  }
});
var Wrapper = _theming.styled.div({}, function (_ref2) {
  var theme = _ref2.theme;
  return {
    border: '1px solid rgba(0, 0, 0, 0.1)',
    boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px',
    margin: '25px 0 40px',
    padding: '30px 20px'
  };
});
/**
 * Convenient styleguide documentation showing examples of type
 * with different sizes and weights and configurable sample text.
 */
var Typeset = exports.Typeset = function Typeset(_ref3) {
  var fontFamily = _ref3.fontFamily,
    fontSizes = _ref3.fontSizes,
    fontWeight = _ref3.fontWeight,
    sampleText = _ref3.sampleText,
    classNamePrefix = _ref3.classNamePrefix,
    props = _objectWithoutProperties(_ref3, _excluded);
  return /*#__PURE__*/_react["default"].createElement(Wrapper, _extends({}, props, {
    className: "docblock-typeset"
  }), Object.keys(fontSizes).map(function (name) {
    return /*#__PURE__*/_react["default"].createElement(TypeSpecimen, {
      key: fontSizes[name],
      style: {
        alignItems: 'center'
      }
    }, /*#__PURE__*/_react["default"].createElement(Label, {
      style: {
        flexShrink: 0,
        width: '40px'
      }
    }, classNamePrefix, name, /*#__PURE__*/_react["default"].createElement("br", null), fontSizes[name]), /*#__PURE__*/_react["default"].createElement(Sample, {
      style: {
        fontFamily: fontFamily,
        fontSize: fontSizes[name],
        fontWeight: fontWeight,
        lineHeight: fontSizes[name]
      }
    }, sampleText));
  }));
};
Typeset.defaultProps = {
  sampleText: 'Was he a beast if music could move him so?',
  fontWeight: 4
};
var _default = exports["default"] = Typeset;