@wix/design-system 1.0.0

package/dist/cjs/Card/Subheader/Subheader.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Text = _interopRequireDefault(require("../../Text"));
+var _Box = _interopRequireDefault(require("../../Box"));
+var _SubheaderSt = require("./Subheader.st.css.js");
+var _StringUtils = require("../../utils/StringUtils");
+var _jsxFileName = "/home/builduser/work/31dad9578a4e06bb/packages/wix-design-system/dist/cjs/Card/Subheader/Subheader.js";
+class Subheader extends _react.default.PureComponent {
+  render() {
+    var {
+      dataHook,
+      title,
+      suffix,
+      skin
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": dataHook,
+      className: (0, _SubheaderSt.st)(_SubheaderSt.classes.root, {
+        skin
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 33,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+      verticalAlign: "middle",
+      flexGrow: 1,
+      overflow: "hidden",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 39,
+        columnNumber: 9
+      }
+    }, (0, _StringUtils.isString)(title) ? /*#__PURE__*/_react.default.createElement(_Text.default, {
+      ellipsis: true,
+      weight: "normal",
+      size: "medium",
+      dataHook: "title",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 41,
+        columnNumber: 13
+      }
+    }, title) : /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": "title-node",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 45,
+        columnNumber: 13
+      }
+    }, title)), suffix && /*#__PURE__*/_react.default.createElement("div", {
+      className: _SubheaderSt.classes.suffix,
+      "data-hook": "suffix-node",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 50,
+        columnNumber: 11
+      }
+    }, suffix));
+  }
+}
+Subheader.displayName = 'Card.Subheader';
+Subheader.defaultProps = {
+  skin: 'standard'
+};
+Subheader.propTypes = {
+  /** Applies a data-hook HTML attribute to be used in the tests */
+  dataHook: _propTypes.default.string,
+  /** Sets a title text value. Title can also be overridden to any other component. */
+  title: _propTypes.default.node.isRequired,
+  /** Adds an empty container on the right side of a subheader. Commonly used to store action buttons or an info icon. */
+  suffix: _propTypes.default.node,
+  /** Controls the background color of a subheader  */
+  skin: _propTypes.default.oneOf(['standard', 'neutral'])
+};
+var _default = Subheader;
+exports.default = _default;
+//# sourceMappingURL=Subheader.js.map

package/dist/cjs/Card/Subheader/Subheader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Subheader","React","PureComponent","render","dataHook","title","suffix","skin","props","st","classes","root","isString","displayName","defaultProps","propTypes","PropTypes","string","node","isRequired","oneOf"],"sources":["../../../../src/Card/Subheader/Subheader.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Text from '../../Text';\nimport Box from '../../Box';\nimport { st, classes } from './Subheader.st.css';\nimport { isString } from '../../utils/StringUtils';\n\nclass Subheader extends React.PureComponent {\n  static displayName = 'Card.Subheader';\n\n  static defaultProps = {\n    skin: 'standard',\n  };\n\n  static propTypes = {\n    /** Applies a data-hook HTML attribute to be used in the tests */\n    dataHook: PropTypes.string,\n\n    /** Sets a title text value. Title can also be overridden to any other component. */\n    title: PropTypes.node.isRequired,\n\n    /** Adds an empty container on the right side of a subheader. Commonly used to store action buttons or an info icon. */\n    suffix: PropTypes.node,\n\n    /** Controls the background color of a subheader  */\n    skin: PropTypes.oneOf(['standard', 'neutral']),\n  };\n\n  render() {\n    const { dataHook, title, suffix, skin } = this.props;\n\n    return (\n      <div\n        data-hook={dataHook}\n        className={st(classes.root, {\n          skin,\n        })}\n      >\n        <Box verticalAlign=\"middle\" flexGrow={1} overflow=\"hidden\">\n          {isString(title) ? (\n            <Text ellipsis weight=\"normal\" size=\"medium\" dataHook=\"title\">\n              {title}\n            </Text>\n          ) : (\n            <div data-hook=\"title-node\">{title}</div>\n          )}\n        </Box>\n\n        {suffix && (\n          <div className={classes.suffix} data-hook=\"suffix-node\">\n            {suffix}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default Subheader;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAmD;AAEnD,MAAMA,SAAS,SAASC,cAAK,CAACC,aAAa,CAAC;EAqB1CC,MAAM,GAAG;IACP,IAAM;MAAEC,QAAQ;MAAEC,KAAK;MAAEC,MAAM;MAAEC;IAAK,CAAC,GAAG,IAAI,CAACC,KAAK;IAEpD,oBACE;MACE,aAAWJ,QAAS;MACpB,SAAS,EAAE,IAAAK,eAAE,EAACC,oBAAO,CAACC,IAAI,EAAE;QAC1BJ;MACF,CAAC,CAAE;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,gBAEH,6BAAC,YAAG;MAAC,aAAa,EAAC,QAAQ;MAAC,QAAQ,EAAE,CAAE;MAAC,QAAQ,EAAC,QAAQ;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GACvD,IAAAK,qBAAQ,EAACP,KAAK,CAAC,gBACd,6BAAC,aAAI;MAAC,QAAQ;MAAC,MAAM,EAAC,QAAQ;MAAC,IAAI,EAAC,QAAQ;MAAC,QAAQ,EAAC,OAAO;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GAC1DA,KAAK,CACD,gBAEP;MAAK,aAAU,YAAY;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GAAEA,KAAK,CACnC,CACG,EAELC,MAAM,iBACL;MAAK,SAAS,EAAEI,oBAAO,CAACJ,MAAO;MAAC,aAAU,aAAa;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA,GACpDA,MAAM,CAEV,CACG;EAEV;AACF;AAjDMN,SAAS,CACNa,WAAW,GAAG,gBAAgB;AADjCb,SAAS,CAGNc,YAAY,GAAG;EACpBP,IAAI,EAAE;AACR,CAAC;AALGP,SAAS,CAONe,SAAS,GAAG;EACjB;EACAX,QAAQ,EAAEY,kBAAS,CAACC,MAAM;EAE1B;EACAZ,KAAK,EAAEW,kBAAS,CAACE,IAAI,CAACC,UAAU;EAEhC;EACAb,MAAM,EAAEU,kBAAS,CAACE,IAAI;EAEtB;EACAX,IAAI,EAAES,kBAAS,CAACI,KAAK,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC;AAC/C,CAAC;AAAA,eAgCYpB,SAAS;AAAA"}

package/dist/cjs/Card/Subheader/Subheader.st.css

@@ -0,0 +1,34 @@
+:import {
+  -st-from: '../../Foundation/stylable/colors.st.css';
+  -st-named: B50,B30,D60,D10-03;
+}
+
+.root {
+  -st-states: skin(enum(standard, neutral));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  min-height: 42px;
+  padding: 9px 24px;
+}
+
+.root:skin(standard) {
+  background-color: value(B50);
+  border-top: 1px value(B30) solid;
+  border-bottom: 1px value(B30) solid;
+}
+
+.root:skin(neutral) {
+  background-color: value(D10-03);
+  border-top: 1px value(D60) solid;
+  border-bottom: 1px value(D60) solid;
+}
+
+.suffix {
+  height: 0;
+  flex-shrink: 0;
+  margin-left: 12px;
+  display: flex;
+  align-items: center;
+}

package/dist/cjs/Card/Subheader/Subheader.st.css.js

@@ -0,0 +1,24 @@
+
+require("../../Foundation/stylable/colors.st.css.js");
+const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.js");
+
+
+
+var _namespace_ = "wds_1_0_0_Subheader";
+var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
+
+module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
+module.exports.style = /*#__PURE__*/ _style_;
+module.exports.st = /*#__PURE__*/ _style_;
+
+module.exports.namespace = _namespace_;
+module.exports.classes = {"root":"wds_1_0_0_Subheader__root","suffix":"wds_1_0_0_Subheader__suffix"};
+module.exports.keyframes = {}; 
+module.exports.layers = {};
+module.exports.containers = {};
+module.exports.stVars = {}; 
+module.exports.vars = {}; 
+
+
+
+

package/dist/cjs/Card/Subheader/Subheader.uni.driver.d.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=Subheader.uni.driver.d.js.map

package/dist/cjs/Card/Subheader/Subheader.uni.driver.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/Card/Subheader/Subheader.uni.driver.d.ts"],"sourcesContent":["import { BaseUniDriver, UniDriver } from 'wix-ui-test-utils/unidriver';\n\nexport interface CardSubheaderUniDriver extends BaseUniDriver {\n  title(): Promise<string>;\n  titleNode(): UniDriver;\n  suffixNode(): UniDriver;\n}\n"],"mappings":""}

package/dist/cjs/Card/Subheader/Subheader.uni.driver.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.cardSubheaderDriverFactory = void 0;
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _baseDriver = require("wix-ui-test-utils/base-driver");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var cardSubheaderDriverFactory = base => {
+  return _objectSpread(_objectSpread({}, (0, _baseDriver.baseUniDriverFactory)(base)), {}, {
+    /** Returns title text */
+    title: function () {
+      var _title = (0, _asyncToGenerator2.default)(function* () {
+        return base.$('[data-hook="title"]').text();
+      });
+      function title() {
+        return _title.apply(this, arguments);
+      }
+      return title;
+    }(),
+    /** Returns title node */
+    titleNode: function () {
+      var _titleNode = (0, _asyncToGenerator2.default)(function* () {
+        return base.$('[data-hook="title-node"] > *');
+      });
+      function titleNode() {
+        return _titleNode.apply(this, arguments);
+      }
+      return titleNode;
+    }(),
+    /** Returns suffix node */
+    suffixNode: function () {
+      var _suffixNode = (0, _asyncToGenerator2.default)(function* () {
+        return base.$("[data-hook=\"suffix-node\"] > *");
+      });
+      function suffixNode() {
+        return _suffixNode.apply(this, arguments);
+      }
+      return suffixNode;
+    }()
+  });
+};
+exports.cardSubheaderDriverFactory = cardSubheaderDriverFactory;
+//# sourceMappingURL=Subheader.uni.driver.js.map

package/dist/cjs/Card/Subheader/Subheader.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardSubheaderDriverFactory","base","baseUniDriverFactory","title","$","text","titleNode","suffixNode"],"sources":["../../../../src/Card/Subheader/Subheader.uni.driver.js"],"sourcesContent":["import { baseUniDriverFactory } from 'wix-ui-test-utils/base-driver';\n\nexport const cardSubheaderDriverFactory = base => {\n  return {\n    ...baseUniDriverFactory(base),\n    /** Returns title text */\n    title: async () => base.$('[data-hook=\"title\"]').text(),\n    /** Returns title node */\n    titleNode: async () => base.$('[data-hook=\"title-node\"] > *'),\n    /** Returns suffix node */\n    suffixNode: async () => base.$(`[data-hook=\"suffix-node\"] > *`),\n  };\n};\n"],"mappings":";;;;;;;AAAA;AAAqE;AAAA;AAE9D,IAAMA,0BAA0B,GAAGC,IAAI,IAAI;EAChD,uCACK,IAAAC,gCAAoB,EAACD,IAAI,CAAC;IAC7B;IACAE,KAAK;MAAA,6CAAE;QAAA,OAAYF,IAAI,CAACG,CAAC,CAAC,qBAAqB,CAAC,CAACC,IAAI,EAAE;MAAA;MAAA;QAAA;MAAA;MAAA;IAAA;IACvD;IACAC,SAAS;MAAA,iDAAE;QAAA,OAAYL,IAAI,CAACG,CAAC,CAAC,8BAA8B,CAAC;MAAA;MAAA;QAAA;MAAA;MAAA;IAAA;IAC7D;IACAG,UAAU;MAAA,kDAAE;QAAA,OAAYN,IAAI,CAACG,CAAC,mCAAiC;MAAA;MAAA;QAAA;MAAA;MAAA;IAAA;EAAA;AAEnE,CAAC;AAAC"}

package/dist/cjs/Card/Subheader/index.d.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+class Subheader extends React.PureComponent {}
+exports.default = Subheader;
+//# sourceMappingURL=index.d.js.map

package/dist/cjs/Card/Subheader/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Subheader","React","PureComponent"],"sources":["../../../../src/Card/Subheader/index.d.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface SubheaderProps {\n  title: React.ReactNode;\n  suffix?: React.ReactNode;\n  dataHook?: string;\n  skin?: SubheaderSkin;\n}\n\nexport type SubheaderSkin = 'standard' | 'neutral';\n\nexport default class Subheader extends React.PureComponent<SubheaderProps> {}\n"],"mappings":";;;;AAAA;AAA+B;AAAA;AAWhB,MAAMA,SAAS,SAASC,KAAK,CAACC,aAAa,CAAiB;AAAE"}

package/dist/cjs/Card/Subheader/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Subheader = _interopRequireDefault(require("./Subheader.js"));
+exports.default = _Subheader.default;
+//# sourceMappingURL=index.js.map

package/dist/cjs/Card/Subheader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../src/Card/Subheader/index.js"],"sourcesContent":["export { default } from './Subheader.js';\n"],"mappings":";;;;;AAAA;AAAyC"}

package/dist/cjs/Card/index.d.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=index.d.js.map

package/dist/cjs/Card/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/Card/index.d.ts"],"sourcesContent":["import * as React from 'react';\nimport Content from './Content';\nimport Header from './Header';\nimport Subheader from './Subheader';\nimport Divider from './Divider';\n\nexport interface CardProps {\n  children?: React.ReactNode;\n  controls?: React.ReactNode;\n  stretchVertically?: boolean;\n  hideOverflow?: boolean;\n  showShadow?: boolean;\n  dataHook?: string;\n  className?: string;\n}\n\ndeclare const Card: React.FunctionComponent<CardProps> & {\n  Content: typeof Content;\n  Header: typeof Header;\n  Divider: typeof Divider;\n  Subheader: typeof Subheader;\n};\n\nexport default Card;\n"],"mappings":""}

package/dist/cjs/Card/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Card = _interopRequireDefault(require("./Card"));
+exports.default = _Card.default;
+//# sourceMappingURL=index.js.map

package/dist/cjs/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/Card/index.js"],"sourcesContent":["export { default } from './Card';\n"],"mappings":";;;;;AAAA;AAAiC"}

package/dist/cjs/CardFolderTabs/CardFolderTabs.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Text = _interopRequireDefault(require("../Text"));
+var _constants = require("./constants");
+var _Tab = _interopRequireDefault(require("./Tab"));
+var _CardFolderTabsSt = require("./CardFolderTabs.st.css.js");
+var _Focusable = require("../common/Focusable");
+var _jsxFileName = "/home/builduser/work/31dad9578a4e06bb/packages/wix-design-system/dist/cjs/CardFolderTabs/CardFolderTabs.js";
+var tabButton = _ref => {
+  var {
+    className,
+    id,
+    name,
+    disabled,
+    selected,
+    maxTabWidth,
+    onTabChange,
+    focusableOnFocus,
+    focusableOnBlur,
+    fluid,
+    ellipsis,
+    size,
+    beforeSelected,
+    afterSelected
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("button", {
+    "data-hook": _constants.dataHooks.tabButton(id),
+    className: (0, _CardFolderTabsSt.st)(_CardFolderTabsSt.classes.button, {
+      selected,
+      disabled,
+      fluid,
+      beforeSelected,
+      afterSelected
+    }, className),
+    style: fluid ? {} : {
+      [_CardFolderTabsSt.vars['maxWidth']]: maxTabWidth
+    },
+    onClick: () => onTabChange(id),
+    disabled: disabled,
+    key: id,
+    onFocus: focusableOnFocus,
+    onBlur: focusableOnBlur,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    dataHook: _constants.dataHooks.tabText(id),
+    ellipsis: ellipsis,
+    className: _CardFolderTabsSt.classes.buttonText,
+    size: size,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 46,
+      columnNumber: 7
+    }
+  }, name));
+};
+var TabButton = (0, _Focusable.withFocusable)(tabButton);
+class CardFolderTabs extends _react.default.PureComponent {
+  render() {
+    var {
+      dataHook,
+      className,
+      children,
+      activeId,
+      maxTabWidth,
+      onTabChange,
+      fluid,
+      ellipsis,
+      size
+    } = this.props;
+    var cardFolderTabs = Array.isArray(children) ? children : [children];
+    var selectedTabIndex = cardFolderTabs.findIndex(tab => activeId === tab.props.id);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _CardFolderTabsSt.st)(_CardFolderTabsSt.classes.root, {
+        fluid
+      }, className),
+      "data-hook": dataHook,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 78,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": _constants.dataHooks.header,
+      className: _CardFolderTabsSt.classes.headerWrapper,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 82,
+        columnNumber: 9
+      }
+    }, cardFolderTabs.map((_ref2, index) => {
+      var {
+        props
+      } = _ref2;
+      return /*#__PURE__*/_react.default.createElement(TabButton, (0, _extends2.default)({
+        key: props.id
+      }, props, {
+        selected: activeId === props.id,
+        beforeSelected: index === selectedTabIndex - 1,
+        afterSelected: index === selectedTabIndex + 1,
+        maxTabWidth: maxTabWidth,
+        fluid: fluid,
+        ellipsis: ellipsis,
+        size: size,
+        onTabChange: typeof onTabChange === 'function' ? onTabChange : undefined,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 84,
+          columnNumber: 13
+        }
+      }));
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": _constants.dataHooks.content,
+      className: _CardFolderTabsSt.classes.tabContentWrapper,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 100,
+        columnNumber: 9
+      }
+    }, cardFolderTabs.filter(tab => activeId === tab.props.id)));
+  }
+}
+CardFolderTabs.displayName = 'CardFolderTabs';
+CardFolderTabs.propTypes = {
+  /** Applies a data-hook HTML attribute that can be used in the tests. */
+  dataHook: _propTypes.default.string,
+  /** Specifies a CSS class name to be appended to the component’s root element. */
+  className: _propTypes.default.string,
+  /** Specifies an id of a currently visible tab. */
+  activeId: _propTypes.default.string.isRequired,
+  /** Defines a callback function which is called on tab change. An id of a newly selected tab is passed as a parameter. */
+  onTabChange: _propTypes.default.func,
+  /** Defines a maximum width of a tab button. */
+  maxTabWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /** Stretches tabs to fill a 100% of a parent container width */
+  fluid: _propTypes.default.bool,
+  /** Specifies whether text that exceeds tab width is truncated with ellipsis. If false, text will wrap to another line. */
+  ellipsis: _propTypes.default.bool,
+  /** Controls tab label font size */
+  size: _propTypes.default.oneOf(['medium', 'small'])
+};
+CardFolderTabs.defaultProps = {
+  maxTabWidth: '138px',
+  ellipsis: true,
+  size: 'medium',
+  fluid: false
+};
+CardFolderTabs.Tab = _Tab.default;
+var _default = CardFolderTabs;
+exports.default = _default;
+//# sourceMappingURL=CardFolderTabs.js.map

package/dist/cjs/CardFolderTabs/CardFolderTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabButton","className","id","name","disabled","selected","maxTabWidth","onTabChange","focusableOnFocus","focusableOnBlur","fluid","ellipsis","size","beforeSelected","afterSelected","dataHooks","st","classes","button","vars","tabText","buttonText","TabButton","withFocusable","CardFolderTabs","React","PureComponent","render","dataHook","children","activeId","props","cardFolderTabs","Array","isArray","selectedTabIndex","findIndex","tab","root","header","headerWrapper","map","index","undefined","content","tabContentWrapper","filter","displayName","propTypes","PropTypes","string","isRequired","func","oneOfType","number","bool","oneOf","defaultProps","Tab"],"sources":["../../../src/CardFolderTabs/CardFolderTabs.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Text from '../Text';\nimport { dataHooks } from './constants';\nimport Tab from './Tab';\nimport { st, classes, vars } from './CardFolderTabs.st.css';\nimport { withFocusable } from '../common/Focusable';\n\nconst tabButton = ({\n  className,\n  id,\n  name,\n  disabled,\n  selected,\n  maxTabWidth,\n  onTabChange,\n  focusableOnFocus,\n  focusableOnBlur,\n  fluid,\n  ellipsis,\n  size,\n  beforeSelected,\n  afterSelected,\n}) => {\n  return (\n    <button\n      data-hook={dataHooks.tabButton(id)}\n      className={st(\n        classes.button,\n        {\n          selected,\n          disabled,\n          fluid,\n          beforeSelected,\n          afterSelected,\n        },\n        className,\n      )}\n      style={fluid ? {} : { [vars['maxWidth']]: maxTabWidth }}\n      onClick={() => onTabChange(id)}\n      disabled={disabled}\n      key={id}\n      onFocus={focusableOnFocus}\n      onBlur={focusableOnBlur}\n    >\n      <Text\n        dataHook={dataHooks.tabText(id)}\n        ellipsis={ellipsis}\n        className={classes.buttonText}\n        size={size}\n      >\n        {name}\n      </Text>\n    </button>\n  );\n};\n\nconst TabButton = withFocusable(tabButton);\n\nclass CardFolderTabs extends React.PureComponent {\n  render() {\n    const {\n      dataHook,\n      className,\n      children,\n      activeId,\n      maxTabWidth,\n      onTabChange,\n      fluid,\n      ellipsis,\n      size,\n    } = this.props;\n    const cardFolderTabs = Array.isArray(children) ? children : [children];\n    const selectedTabIndex = cardFolderTabs.findIndex(\n      tab => activeId === tab.props.id,\n    );\n    return (\n      <div\n        className={st(classes.root, { fluid }, className)}\n        data-hook={dataHook}\n      >\n        <div data-hook={dataHooks.header} className={classes.headerWrapper}>\n          {cardFolderTabs.map(({ props }, index) => (\n            <TabButton\n              key={props.id}\n              {...props}\n              selected={activeId === props.id}\n              beforeSelected={index === selectedTabIndex - 1}\n              afterSelected={index === selectedTabIndex + 1}\n              maxTabWidth={maxTabWidth}\n              fluid={fluid}\n              ellipsis={ellipsis}\n              size={size}\n              onTabChange={\n                typeof onTabChange === 'function' ? onTabChange : undefined\n              }\n            />\n          ))}\n        </div>\n        <div\n          data-hook={dataHooks.content}\n          className={classes.tabContentWrapper}\n        >\n          {cardFolderTabs.filter(tab => activeId === tab.props.id)}\n        </div>\n      </div>\n    );\n  }\n}\n\nCardFolderTabs.displayName = 'CardFolderTabs';\n\nCardFolderTabs.propTypes = {\n  /** Applies a data-hook HTML attribute that can be used in the tests. */\n  dataHook: PropTypes.string,\n\n  /** Specifies a CSS class name to be appended to the component’s root element. */\n  className: PropTypes.string,\n\n  /** Specifies an id of a currently visible tab. */\n  activeId: PropTypes.string.isRequired,\n\n  /** Defines a callback function which is called on tab change. An id of a newly selected tab is passed as a parameter. */\n  onTabChange: PropTypes.func,\n\n  /** Defines a maximum width of a tab button. */\n  maxTabWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n  /** Stretches tabs to fill a 100% of a parent container width */\n  fluid: PropTypes.bool,\n\n  /** Specifies whether text that exceeds tab width is truncated with ellipsis. If false, text will wrap to another line. */\n  ellipsis: PropTypes.bool,\n\n  /** Controls tab label font size */\n  size: PropTypes.oneOf(['medium', 'small']),\n};\n\nCardFolderTabs.defaultProps = {\n  maxTabWidth: '138px',\n  ellipsis: true,\n  size: 'medium',\n  fluid: false,\n};\n\nCardFolderTabs.Tab = Tab;\n\nexport default CardFolderTabs;\n"],"mappings":"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"}

package/dist/cjs/CardFolderTabs/CardFolderTabs.meta.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.testkitTests = exports.ssrTests = exports.requiredProps = exports.a11yTests = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ = _interopRequireDefault(require("."));
+var _react = _interopRequireDefault(require("react"));
+var _jsxFileName = "/home/builduser/work/31dad9578a4e06bb/packages/wix-design-system/dist/cjs/CardFolderTabs/CardFolderTabs.meta.tsx";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// This object should contain a mock value for each required prop of this component
+var requiredProps = {
+  activeId: '1',
+  children: /*#__PURE__*/_react.default.createElement(_.default.Tab, {
+    id: "1",
+    key: "1",
+    name: "Some tab",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 8,
+      columnNumber: 5
+    }
+  }, "xxx")
+};
+
+// This array should contain an object only for tests you wish to run on all compliance tests
+exports.requiredProps = requiredProps;
+var sharedTests = [{
+  title: 'render',
+  props: _objectSpread({}, requiredProps)
+}];
+var testkitTests = [...sharedTests];
+exports.testkitTests = testkitTests;
+var ssrTests = [...sharedTests];
+exports.ssrTests = ssrTests;
+var a11yTests = [...sharedTests];
+exports.a11yTests = a11yTests;
+//# sourceMappingURL=CardFolderTabs.meta.js.map

package/dist/cjs/CardFolderTabs/CardFolderTabs.meta.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["requiredProps","activeId","children","sharedTests","title","props","testkitTests","ssrTests","a11yTests"],"sources":["../../../src/CardFolderTabs/CardFolderTabs.meta.tsx"],"sourcesContent":["import CardFolderTabs, { CardFolderTabsProps } from '.';\nimport React from \"react\";\n\n// This object should contain a mock value for each required prop of this component\nexport const requiredProps: CardFolderTabsProps = {\n  activeId: '1',\n  children: (\n    <CardFolderTabs.Tab id=\"1\" key=\"1\" name=\"Some tab\">\n      xxx\n    </CardFolderTabs.Tab>\n  ),\n};\n\n// This array should contain an object only for tests you wish to run on all compliance tests\nconst sharedTests = [\n  {\n    title: 'render',\n    props: {\n      ...requiredProps,\n    } as CardFolderTabsProps,\n  },\n];\n\nexport const testkitTests = [...sharedTests];\n\nexport const ssrTests = [...sharedTests];\n\nexport const a11yTests = [...sharedTests];\n"],"mappings":";;;;;;AAAA;AACA;AAA0B;AAAA;AAAA;AAE1B;AACO,IAAMA,aAAkC,GAAG;EAChDC,QAAQ,EAAE,GAAG;EACbC,QAAQ,eACN,6BAAC,SAAc,CAAC,GAAG;IAAC,EAAE,EAAC,GAAG;IAAC,GAAG,EAAC,GAAG;IAAC,IAAI,EAAC,UAAU;IAAA;IAAA;MAAA;MAAA;MAAA;IAAA;EAAA,GAAC,KAEnD;AAEJ,CAAC;;AAED;AAAA;AACA,IAAMC,WAAW,GAAG,CAClB;EACEC,KAAK,EAAE,QAAQ;EACfC,KAAK,oBACAL,aAAa;AAEpB,CAAC,CACF;AAEM,IAAMM,YAAY,GAAG,CAAC,GAAGH,WAAW,CAAC;AAAC;AAEtC,IAAMI,QAAQ,GAAG,CAAC,GAAGJ,WAAW,CAAC;AAAC;AAElC,IAAMK,SAAS,GAAG,CAAC,GAAGL,WAAW,CAAC;AAAC"}

package/dist/cjs/CardFolderTabs/CardFolderTabs.st.css

@@ -0,0 +1,150 @@
+:import {
+  -st-from: '../Foundation/stylable/colors.st.css';
+  -st-named: B10, F00, D10, D60, D80, D10-30, D10-10, D10-05;
+}
+
+:import {
+  -st-from: '../Foundation/stylable/shadows.st.css';
+  -st-named: s1, s3;
+}
+
+:import {
+  -st-from: '../common/Focusable/Focusable.st.css';
+  -st-default: Focusable;
+}
+
+:import {
+  -st-from: '../Text/Text.st.css';
+  -st-default: Text;
+}
+
+.root {
+  --maxWidth: 138px;
+  -st-states: fluid;
+}
+
+.root:fluid {
+  --maxWidth: 100%;
+}
+
+.headerWrapper {
+  display: flex;
+  margin-inline-end: 30px;
+}
+
+.root:fluid .headerWrapper {
+  margin-inline-end: 0;
+}
+
+.button {
+  -st-extends: Focusable;
+  -st-states: selected, disabled, beforeSelected, afterSelected;
+
+  display: flex;
+  flex: 1 1 66px;
+  justify-content: center;
+  align-items: center;
+  padding: 18px;
+  min-width: 66px;
+  max-width: var(--maxWidth);
+  border-radius: 8px 8px 0 0;
+  border: 0;
+  background-color: value(D80);
+  color: value(D10);
+  outline: none;
+  margin: 0;
+  box-shadow: inset -1px 0px 0px value(D60), inset 0px -1px 0px value(D10-10);
+}
+
+:global([dir='rtl']) .button {
+  border-width: 0 0 1px 1px;
+}
+
+.buttonText {
+  -st-extends: Text;
+}
+
+.button:hover {
+  cursor: pointer;
+}
+
+.button:hover:disabled, .button:hover:selected {
+  cursor: default;
+}
+
+.button:hover:not(:disabled) .buttonText,
+.button:selected .buttonText {
+  color: value(B10);
+}
+
+.button:disabled .buttonText {
+  color: value(D10-30);
+}
+
+.button:focus-visible {
+  border: 3px solid value(F00) !important;
+  padding: 15px 16px 16px 15px;
+  height: 60px !important;
+}
+
+.button:selected {
+  margin-bottom: -2px;
+  border-width: 0 1px 2px 0;
+  border-bottom: solid transparent;
+  z-index: 1;
+  box-shadow: 0px 0px 6px value(D10-10), 0px 0px 12px value(D10-05);
+}
+
+.button:selected:first-child {
+  box-shadow: 3px 0px 3px value(D10-10), 3px 0px 6px value(D10-05);
+}
+
+.button:selected:last-child {
+  box-shadow: -3px 0px 3px value(D10-10), -3px 0px 6px value(D10-05);
+}
+
+.button:afterSelected {
+  box-shadow: inset 42px 4px 24px -24px value(D10-05), inset -1px 0px 0px value(D60), inset 0px -1px 0px value(D10-10);
+}
+.button:beforeSelected {
+  box-shadow: inset -42px 4px 24px -24px value(D10-05), inset 0px -1px 0px value(D10-10);
+}
+
+:global([dir='rtl']) .button {
+  box-shadow: inset 1px 0px 0px value(D60), inset 0px -1px 0px value(D10-10);
+}
+
+:global([dir='rtl']) .button:selected {
+  border-width: 0 0 2px 1px;
+  box-shadow: 0px 0px 6px value(D10-10), 0px 0px 12px value(D10-05);
+}
+
+:global([dir='rtl']) .button:selected:first-child {
+  box-shadow: -3px 0px 3px value(D10-10), -3px 0px 6px value(D10-05);
+}
+
+:global([dir='rtl']) .button:selected:last-child {
+  box-shadow: 3px 0px 3px value(D10-10), 3px 0px 6px value(D10-05);
+}
+
+:global([dir='rtl']) .button:afterSelected {
+  box-shadow: inset -42px 4px 24px -24px value(D10-05), inset 1px 0px 0px value(D60), inset 0px -1px 0px value(D10-10);
+}
+:global([dir='rtl']) .button:beforeSelected {
+  box-shadow: inset 42px 4px 24px -24px value(D10-05), inset 0px -1px 0px value(D10-10);
+}
+
+.tabContentWrapper {
+  background-color: value(D80);
+  border-radius: 0 8px 8px 8px;
+  z-index: 1;
+  position: relative;
+}
+
+.root:fluid .tabContentWrapper {
+  border-radius: 0 0 8px 8px;
+}
+
+:global([dir='rtl']) .tabContentWrapper {
+  border-radius: 8px 0 8px 8px;
+}