@spark-web/text-list/dist/spark-web-text-list.cjs.dev.js

--- title: Text List storybookPath: data-display-textlist--default isExperimentalPackage: false ---

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var react$1 = require('@emotion/react');
var box = require('@spark-web/box');
var stack = require('@spark-web/stack');
var text = require('@spark-web/text');
var theme = require('@spark-web/theme');
var react = require('react');
var jsxRuntime = require('@emotion/react/jsx-runtime');

var _excluded = ["children", "data", "icon", "gap", "size", "tone", "type"];
var typeToElement = {
  bullet: 'ul',
  number: 'ol'
};
/** Organize and emphasize information quickly and effectively in a list of text elements. */
var TextList = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
  var children = _ref.children,
    data = _ref.data,
    icon = _ref.icon,
    _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? 'large' : _ref$gap,
    sizeProp = _ref.size,
    toneProp = _ref.tone,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'bullet' : _ref$type,
    consumerProps = _objectWithoutProperties(_ref, _excluded);
  var _useDefaultTextProps = text.useDefaultTextProps({
      size: sizeProp,
      tone: toneProp
    }),
    size = _useDefaultTextProps.size,
    tone = _useDefaultTextProps.tone;
  var listItems = react.Children.toArray(children); // remove falsy values before mapping, keeps the index in sync
  var element = typeToElement[type];
  return jsxRuntime.jsx(text.DefaultTextPropsProvider, {
    size: size,
    tone: tone,
    children: jsxRuntime.jsx(stack.Stack, _objectSpread(_objectSpread({
      as: element,
      ref: forwardedRef,
      gap: gap,
      data: data
    }, consumerProps), {}, {
      children: listItems.map(function (listItem, index) {
        return jsxRuntime.jsxs(box.Box, {
          display: "flex",
          as: "li",
          gap: "small",
          children: [jsxRuntime.jsx(IndicatorContainer, {
            size: size,
            children: function () {
              if (icon) {
                return icon;
              }
              if (type === 'number') {
                return jsxRuntime.jsx(Character, {
                  length: listItems.length.toString().length,
                  value: String(index + 1)
                });
              }
              return jsxRuntime.jsx(Bullet, {
                size: size,
                tone: tone
              });
            }()
          }), jsxRuntime.jsx(box.Box, {
            flex: 1,
            children: listItem
          })]
        }, listItem.key || index);
      })
    }))
  });
});
TextList.displayName = 'TextList';

// Styled components
// ------------------------------

var bulletSize = {
  xsmall: 4,
  small: 4,
  standard: 5,
  large: 5,
  xlarge: 7,
  xxlarge: 7
};
var IndicatorContainer = function IndicatorContainer(_ref2) {
  var _ref2$size = _ref2.size,
    size = _ref2$size === void 0 ? 'standard' : _ref2$size,
    children = _ref2.children;
  var theme$1 = theme.useTheme();
  var _theme$typography$tex = theme$1.typography.text[size],
    mobile = _theme$typography$tex.mobile,
    tablet = _theme$typography$tex.tablet;
  var responsiveStyles = theme$1.utils.responsiveStyles({
    mobile: {
      height: mobile.capHeight
    },
    tablet: {
      height: tablet.capHeight
    }
  });
  return jsxRuntime.jsx(box.Box, {
    display: "flex",
    alignItems: "center",
    "aria-hidden": true,
    cursor: "default",
    flexShrink: 0,
    css: react$1.css(responsiveStyles),
    children: children
  });
};
var Bullet = function Bullet(_ref3) {
  var _ref3$size = _ref3.size,
    size = _ref3$size === void 0 ? 'standard' : _ref3$size,
    _ref3$tone = _ref3.tone,
    tone = _ref3$tone === void 0 ? 'neutral' : _ref3$tone;
  var backgroundColor = text.useForegroundTone(tone);
  var dimensions = bulletSize[size];
  return jsxRuntime.jsx("div", {
    css: react$1.css({
      width: '1ex'
    }),
    children: jsxRuntime.jsx("div", {
      css: react$1.css({
        backgroundColor: backgroundColor,
        borderRadius: dimensions,
        height: dimensions,
        width: dimensions
      })
    })
  });
};
var Character = function Character(_ref4) {
  var length = _ref4.length,
    value = _ref4.value;
  // Offset characters to meet the "longest" value in the list. Hidden from
  // sighted and assistive tech users.
  var offset = length - value.length;
  var offsetElement = offset ? jsxRuntime.jsx(box.Box, {
    as: "span",
    opacity: 0,
    children: '0'.repeat(offset)
  }) : null;
  return jsxRuntime.jsxs(text.Text, {
    tabularNumbers: true,
    children: [offsetElement, value, "."]
  });
};

exports.IndicatorContainer = IndicatorContainer;
exports.TextList = TextList;