UNPKG

@spark-web/text-list

Version:

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

159 lines (152 loc) 4.81 kB
'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;