@salutejs/plasma-new-hope 0.197.0-canary.1572.11971256317.0 → 0.197.0-canary.1588.11972699441.0

package/styled-components/cjs/components/TextField/TextField.template-doc.mdx

@@ -62,7 +62,7 @@ export function App() {
 ```
 
 ### Статус поля
-Статус поля задается с помощью свойства `status`. 
+Статус поля задается с помощью свойства `status`.
 Возможные значения свойства: `success`, `warning` и `error`.
 На отображение TextField так же влияют свойства `clear` и `hasDivider`:
 
@@ -150,7 +150,7 @@ export function App() {
 ```
 
 ### Режим ввода
-С помощью свойства `enumerationType` можно вводить элементы как теги.
+С помощью свойства `enumerationType` можно вводить элементы как теги. Свойство `chipType` изменяет внешний вид чипа.
 По нажатию Enter, после ввода нужного текста, он преобразуется в Chip:
 
 ```tsx live
@@ -166,7 +166,17 @@ export function App() {
                 size="l"
                 enumerationType="chip"
                 helperText="Подсказка снизу"
-                values={["Значение 1"]}
+                chips={["Значение 1"]}
+            />
+
+            <TextField
+                placeholder="Введите значение"
+                defaultValue="Значение"
+                size="l"
+                enumerationType="chip"
+                helperText="Подсказка снизу"
+                chips={["Значение 1"]}
+                chipType="text"
             />
         </div>
     );

package/styled-components/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.js

@@ -20,14 +20,23 @@ var TextFieldChip = exports.TextFieldChip = /*#__PURE__*/(0, _react.forwardRef)(
     onClick = _ref.onClick,
     onClear = _ref.onClear,
     onKeyDown = _ref.onKeyDown,
-    _forceChipManipulationWithReadonly = _ref._forceChipManipulationWithReadonly;
+    _forceChipManipulationWithReadonly = _ref._forceChipManipulationWithReadonly,
+    chipType = _ref.chipType;
   var onClearHandle = function onClearHandle() {
     return onClear(id);
   };
   var onKeyDownHandle = function onKeyDownHandle(event) {
     onKeyDown === null || onKeyDown === void 0 || onKeyDown(event, id);
   };
-  return /*#__PURE__*/_react["default"].createElement(_TextFieldChip.StyledChip, {
+  var handleClick = function handleClick(e) {
+    if (onClick) {
+      onClick(e);
+    }
+    if (onClear) {
+      onClear(id);
+    }
+  };
+  return chipType === 'default' ? /*#__PURE__*/_react["default"].createElement(_TextFieldChip.StyledChip, {
     ref: ref,
     tabIndex: -1,
     disabled: disabled,
@@ -41,5 +50,10 @@ var TextFieldChip = exports.TextFieldChip = /*#__PURE__*/(0, _react.forwardRef)(
     // @ts-ignore
     ,
     _forceChipManipulationWithReadonly: _forceChipManipulationWithReadonly
-  });
+  }) : /*#__PURE__*/_react["default"].createElement(_TextFieldChip.TextChip, {
+    ref: ref,
+    tabIndex: -1,
+    onClick: handleClick,
+    onKeyDown: onKeyDownHandle
+  }, text);
 });

package/styled-components/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledChip = void 0;
+exports.TextChip = exports.StyledChip = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _Chip = /*#__PURE__*/require("../../../Chip");
 var _engines = /*#__PURE__*/require("../../../../engines");
@@ -22,4 +22,12 @@ var StyledChip = exports.StyledChip = /*#__PURE__*/(0, _styledComponents["defaul
   outlineSize: '0.0625rem',
   outlineRadius: /*#__PURE__*/"calc(var(".concat(_TextField.tokens.chipBorderRadius, ") - 0.1rem)"),
   outlineColor: /*#__PURE__*/"var(".concat(_TextField.tokens.focusColor, ")")
-}), _TextField.tokens.chipOpacityReadonly);
+}), _TextField.tokens.chipOpacityReadonly);
+var TextChip = exports.TextChip = /*#__PURE__*/_styledComponents["default"].button.withConfig({
+  componentId: "plasma-new-hope__sc-1mypbcr-1"
+})(["display:block;flex:none;background:none;border:none;outline:none;padding:0;white-space:nowrap;cursor:pointer;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");", " &:after{content:',';}&:last-child{&:after{content:'';}}"], _TextField.tokens.fontFamily, _TextField.tokens.fontSize, _TextField.tokens.fontStyle, _TextField.tokens.fontWeight, _TextField.tokens.letterSpacing, _TextField.tokens.lineHeight, _TextField.tokens.color, /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '0.0625rem',
+  outlineSize: '0.0625rem',
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(_TextField.tokens.chipBorderRadius, ") - 0.1rem)"),
+  outlineColor: /*#__PURE__*/"var(".concat(_TextField.tokens.focusColor, ")")
+}));

package/styled-components/cjs/components/Typography/Old/Paragraph/Paragraph.styles.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _tokens = /*#__PURE__*/require("../../tokens");
 var _mixins = /*#__PURE__*/require("../../../../mixins");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");margin:0;", ";&.", "{", ";}"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight, _tokens.tokens.typoFontWeight, /*#__PURE__*/String(_mixins.applyHyphensNormal), /*#__PURE__*/String(_tokens.classes.typoWithBreakWord), /*#__PURE__*/String(_mixins.applyHyphens));
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");margin:0;&.", "{white-space:nowrap;}", ";&.", "{", ";}"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight, _tokens.tokens.typoFontWeight, _tokens.classes.typoWithNoWrap, _mixins.applyHyphensNormal, _tokens.classes.typoWithBreakWord, _mixins.applyHyphens);

package/styled-components/cjs/components/Typography/Old/Subtitle/Subtitle.js

@@ -8,8 +8,10 @@ exports.subtitleRoot = exports.subtitleConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _applySpacing = /*#__PURE__*/require("../../../../mixins/applySpacing");
 var _base = /*#__PURE__*/require("../../variations/_size/base");
+var _tokens = /*#__PURE__*/require("../../tokens");
+var _utils = /*#__PURE__*/require("../../../../utils");
 var _Subtitle = /*#__PURE__*/require("./Subtitle.styles");
-var _excluded = ["size", "children", "color", "style"];
+var _excluded = ["size", "children", "color", "noWrap", "className", "style"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -25,11 +27,15 @@ var subtitleRoot = exports.subtitleRoot = function subtitleRoot(Root) {
     var size = props.size,
       children = props.children,
       color = props.color,
+      noWrap = props.noWrap,
+      className = props.className,
       style = props.style,
       rest = _objectWithoutProperties(props, _excluded);
+    var withNoWrap = noWrap ? _tokens.classes.typoWithNoWrap : undefined;
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       size: size,
       ref: ref,
+      className: (0, _utils.cx)(withNoWrap, className),
       style: _objectSpread(_objectSpread({
         color: color
       }, style), (0, _applySpacing.applySpacing)(rest))

package/styled-components/cjs/components/Typography/Old/Subtitle/Subtitle.styles.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _tokens = /*#__PURE__*/require("../../tokens");
 var _mixins = /*#__PURE__*/require("../../../../mixins");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");", ";"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight, _tokens.tokens.typoFontWeight, /*#__PURE__*/String(_mixins.applyHyphens));
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");&.", "{white-space:nowrap;}", ";"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight, _tokens.tokens.typoFontWeight, _tokens.classes.typoWithNoWrap, _mixins.applyHyphens);

package/styled-components/cjs/components/Typography/Old/TypographyOld.js

@@ -9,7 +9,7 @@ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react")
 var _applySpacing = /*#__PURE__*/require("../../../mixins/applySpacing");
 var _tokens = /*#__PURE__*/require("../tokens");
 var _utils = /*#__PURE__*/require("../../../utils");
-var _excluded = ["size", "children", "breakWord", "color", "className", "style"];
+var _excluded = ["size", "children", "breakWord", "noWrap", "color", "className", "style"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -25,15 +25,17 @@ var typographyOldRoot = exports.typographyOldRoot = function typographyOldRoot(R
     var size = props.size,
       children = props.children,
       breakWord = props.breakWord,
+      noWrap = props.noWrap,
       color = props.color,
       className = props.className,
       style = props.style,
       rest = _objectWithoutProperties(props, _excluded);
+    var withNoWrap = noWrap ? _tokens.classes.typoWithNoWrap : undefined;
     var withBreakWord = breakWord ? _tokens.classes.typoWithBreakWord : undefined;
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       size: size,
       ref: ref,
-      className: (0, _utils.cx)(withBreakWord, className),
+      className: (0, _utils.cx)(withNoWrap, withBreakWord, className),
       style: _objectSpread(_objectSpread({
         color: color
       }, style), (0, _applySpacing.applySpacing)(rest))

package/styled-components/cjs/components/Typography/Old/TypographyOld.styles.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _tokens = /*#__PURE__*/require("../tokens");
 var _mixins = /*#__PURE__*/require("../../../mixins");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");", ";&.", "{", ";}"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight, _tokens.tokens.typoFontWeight, /*#__PURE__*/String(_mixins.applyHyphensNormal), /*#__PURE__*/String(_tokens.classes.typoWithBreakWord), /*#__PURE__*/String(_mixins.applyHyphens));
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");&.", "{white-space:nowrap;}", ";&.", "{", ";}"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight, _tokens.tokens.typoFontWeight, _tokens.classes.typoWithNoWrap, _mixins.applyHyphensNormal, _tokens.classes.typoWithBreakWord, _mixins.applyHyphens);

package/styled-components/cjs/components/Typography/Old/Underline/Underline.styles.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _tokens = /*#__PURE__*/require("../../tokens");
 var _mixins = /*#__PURE__*/require("../../../../mixins");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");text-transform:uppercase;", ";&.", "{", ";}"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight, _tokens.tokens.typoFontWeight, /*#__PURE__*/String(_mixins.applyHyphensNormal), /*#__PURE__*/String(_tokens.classes.typoWithBreakWord), /*#__PURE__*/String(_mixins.applyHyphens));
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");text-transform:uppercase;&.", "{white-space:nowrap;}", ";&.", "{", ";}"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight, _tokens.tokens.typoFontWeight, _tokens.classes.typoWithNoWrap, _mixins.applyHyphensNormal, _tokens.classes.typoWithBreakWord, _mixins.applyHyphens);

package/styled-components/cjs/components/Typography/Typography.js

@@ -9,7 +9,7 @@ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react")
 var _applySpacing = /*#__PURE__*/require("../../mixins/applySpacing");
 var _utils = /*#__PURE__*/require("../../utils");
 var _tokens = /*#__PURE__*/require("./tokens");
-var _excluded = ["size", "children", "breakWord", "bold", "color", "className", "style"];
+var _excluded = ["size", "children", "breakWord", "noWrap", "bold", "color", "className", "style"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -26,18 +26,20 @@ var typographyRootCompose = exports.typographyRootCompose = function typographyR
       var size = props.size,
         children = props.children,
         breakWord = props.breakWord,
+        noWrap = props.noWrap,
         _props$bold = props.bold,
         bold = _props$bold === void 0 ? defaultArgs === null || defaultArgs === void 0 ? void 0 : defaultArgs.defaultBold : _props$bold,
         color = props.color,
         className = props.className,
         style = props.style,
         rest = _objectWithoutProperties(props, _excluded);
+      var withNoWrap = noWrap ? _tokens.classes.typoWithNoWrap : undefined;
       var withBreakWord = breakWord ? _tokens.classes.typoWithBreakWord : undefined;
       var typographyBold = bold ? _tokens.classes.typoBold : undefined;
       return /*#__PURE__*/_react["default"].createElement(Root, _extends({
         size: size,
         ref: ref,
-        className: (0, _utils.cx)(withBreakWord, typographyBold, className),
+        className: (0, _utils.cx)(withNoWrap, withBreakWord, typographyBold, className),
         style: _objectSpread(_objectSpread({
           color: color
         }, style), (0, _applySpacing.applySpacing)(rest)),

package/styled-components/cjs/components/Typography/Typography.styles.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _mixins = /*#__PURE__*/require("../../mixins");
 var _tokens = /*#__PURE__*/require("./tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");&.", "{font-weight:var(", ");}", ";&.", "{", ";}"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight, _tokens.tokens.typoFontWeight, /*#__PURE__*/String(_tokens.classes.typoBold), _tokens.tokens.typoFontWeightBold, /*#__PURE__*/String(_mixins.applyHyphensNormal), /*#__PURE__*/String(_tokens.classes.typoWithBreakWord), /*#__PURE__*/String(_mixins.applyHyphens));
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");font-weight:var(", ");&.", "{font-weight:var(", ");}&.", "{white-space:nowrap;}", ";&.", "{", ";}"], _tokens.tokens.typoFontFamily, _tokens.tokens.typoFontSize, _tokens.tokens.typoFontStyle, _tokens.tokens.typoFontLetterSpacing, _tokens.tokens.typoFontLineHeight, _tokens.tokens.typoFontWeight, _tokens.classes.typoBold, _tokens.tokens.typoFontWeightBold, _tokens.classes.typoWithNoWrap, _mixins.applyHyphensNormal, _tokens.classes.typoWithBreakWord, _mixins.applyHyphens);

package/styled-components/cjs/components/Typography/Typography.template-doc.mdx

@@ -19,6 +19,10 @@ title: Typography
 По умолчанию в типографике слова переносятся по слогам.
 Чтобы отключить данный функционал, необходимо установить свойство `breakWord` в значении `false`.
 
+## Пробелы
+По умолчанию в типографике если текст превышает ширину элемента, то слова будут переноситься по пробелам.
+Чтобы запретить перенос по пробелам, необходимо установить свойство `noWrap` в значении `true`.
+
 ## Состав
 
 ### Hero unit

package/styled-components/cjs/components/Typography/tokens.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tokens = exports.classes = void 0;
 var classes = exports.classes = {
+  typoWithNoWrap: 'with-no-wrap',
   typoWithBreakWord: 'with-break-word',
   typoBold: 'typography-bold'
 };

package/styled-components/cjs/examples/plasma_b2c/components/Select/Select.stories.tsx

@@ -104,6 +104,11 @@ const meta: Meta<StorySelectProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
+        chipType: {
+            control: 'select',
+            options: ['default', 'text'],
+            if: { arg: 'target', eq: 'textfield-like' },
+        },
     },
     args: {
         target: 'textfield-like',
@@ -121,6 +126,7 @@ const meta: Meta<StorySelectProps> = {
         optional: false,
         required: false,
         requiredPlacement: 'right',
+        chipType: 'default',
     },
     parameters: {
         controls: {
@@ -144,6 +150,7 @@ const meta: Meta<StorySelectProps> = {
                 'optional',
                 'required',
                 'requiredPlacement',
+                'chipType',
             ],
         },
     },
@@ -382,7 +389,7 @@ const SingleStory = (args: StorySelectProps) => {
 export const Single: StoryObj<StorySelectProps> = {
     parameters: {
         controls: {
-            exclude: ['chipView', 'isTargetAmount'],
+            exclude: ['chipView', 'isTargetAmount', 'chipType'],
         },
     },
     render: (args) => <SingleStory {...args} />,

package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx

@@ -134,6 +134,10 @@ const meta: Meta<typeof TextField> = {
             control: { type: 'text' },
             if: { arg: 'hasHint', truthy: true },
         },
+        chipType: {
+            control: 'select',
+            options: ['default', 'text'],
+        },
     },
 };
 
@@ -233,6 +237,11 @@ export const Default: StoryObj<StoryPropsDefault> = {
         hintWidth: '10rem',
         hintHasArrow: true,
     },
+    parameters: {
+        controls: {
+            exclude: ['chipType'],
+        },
+    },
     render: (args) => <StoryDemo {...args} />,
 };
 
@@ -288,6 +297,7 @@ export const Chips: StoryObj<StoryPropsChips> = {
     args: {
         ...Default.args,
         chips: ['1 value', '2 value', '3 value', '4 value'],
+        chipType: 'default',
     },
     render: (args) => <StoryChips {...args} />,
 };

package/styled-components/cjs/examples/plasma_web/components/Select/Select.stories.tsx

@@ -103,6 +103,11 @@ const meta: Meta<StorySelectProps> = {
             },
             if: { arg: 'required', truthy: false },
         },
+        chipType: {
+            control: 'select',
+            options: ['default', 'text'],
+            if: { arg: 'target', eq: 'textfield-like' },
+        },
     },
     args: {
         target: 'textfield-like',
@@ -120,6 +125,7 @@ const meta: Meta<StorySelectProps> = {
         optional: false,
         required: false,
         requiredPlacement: 'right',
+        chipType: 'default',
     },
     parameters: {
         controls: {
@@ -143,6 +149,7 @@ const meta: Meta<StorySelectProps> = {
                 'optional',
                 'required',
                 'requiredPlacement',
+                'chipType',
             ],
         },
     },
@@ -381,7 +388,7 @@ const SingleStory = (args: StorySelectProps) => {
 export const Single: StoryObj<StorySelectProps> = {
     parameters: {
         controls: {
-            exclude: ['chipView', 'isTargetAmount'],
+            exclude: ['chipView', 'isTargetAmount', 'chipType'],
         },
     },
     render: (args) => <SingleStory {...args} />,

package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx

@@ -134,6 +134,10 @@ const meta: Meta<typeof TextField> = {
             control: { type: 'text' },
             if: { arg: 'hasHint', truthy: true },
         },
+        chipType: {
+            control: 'select',
+            options: ['default', 'text'],
+        },
     },
 };
 
@@ -233,6 +237,11 @@ export const Default: StoryObj<StoryPropsDefault> = {
         hintWidth: '10rem',
         hintHasArrow: true,
     },
+    parameters: {
+        controls: {
+            exclude: ['chipType'],
+        },
+    },
     render: (args) => <StoryDemo {...args} />,
 };
 
@@ -288,6 +297,7 @@ export const Chips: StoryObj<StoryPropsChips> = {
     args: {
         ...Default.args,
         chips: ['1 value', '2 value', '3 value', '4 value'],
+        chipType: 'default',
     },
     render: (args) => <StoryChips {...args} />,
 };

package/styled-components/cjs/examples/typograpy/components/Body/Body.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Body> = {
     title: 'typography/Body',
     decorators: [WithTheme],
     component: Body,
-    argTypes: argTypesFromConfig(mergeConfig(bodyConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(bodyConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
         bold: false,
     },

package/styled-components/cjs/examples/typograpy/components/Dspl/Dspl.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Dspl> = {
     title: 'typography/Dspl',
     decorators: [WithTheme],
     component: Dspl,
-    argTypes: argTypesFromConfig(mergeConfig(dsplConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(dsplConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
         bold: false,
     },

package/styled-components/cjs/examples/typograpy/components/Heading/Heading.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Heading> = {
     title: 'typography/Heading',
     decorators: [WithTheme],
     component: Heading,
-    argTypes: argTypesFromConfig(mergeConfig(dsplConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(dsplConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
         bold: false,
     },

package/styled-components/cjs/examples/typograpy/components/Old/Body/Body.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof OldBody> = {
     title: 'typography/Old/Body',
     decorators: [WithTheme],
     component: OldBody,
-    argTypes: argTypesFromConfig(mergeConfig(oldBodyConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(oldBodyConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
     },
 };

package/styled-components/cjs/examples/typograpy/components/Old/Button/Button.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Button> = {
     title: 'typography/Old/Button',
     decorators: [WithTheme],
     component: Button,
-    argTypes: argTypesFromConfig(mergeConfig(buttonTypographyConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(buttonTypographyConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
     },
 };

package/styled-components/cjs/examples/typograpy/components/Old/Caption/Caption.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Caption> = {
     title: 'typography/Old/Caption',
     decorators: [WithTheme],
     component: Caption,
-    argTypes: argTypesFromConfig(mergeConfig(captionConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(captionConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
     },
 };

package/styled-components/cjs/examples/typograpy/components/Old/Display/Display.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Display> = {
     title: 'typography/Old/Display',
     decorators: [WithTheme],
     component: Display,
-    argTypes: argTypesFromConfig(mergeConfig(displayConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(displayConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
     },
 };

package/styled-components/cjs/examples/typograpy/components/Old/Footnote/Footnote.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Footnote> = {
     title: 'typography/Old/Footnote',
     decorators: [WithTheme],
     component: Footnote,
-    argTypes: argTypesFromConfig(mergeConfig(footnoteConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(footnoteConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
     },
 };

package/styled-components/cjs/examples/typograpy/components/Old/Headline/Headline.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Headline> = {
     title: 'typography/Old/Headline',
     decorators: [WithTheme],
     component: Headline,
-    argTypes: argTypesFromConfig(mergeConfig(headlineConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(headlineConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
     },
 };

package/styled-components/cjs/examples/typograpy/components/Old/Paragraph/Paragraph.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Paragraph> = {
     title: 'typography/Old/Paragraph',
     decorators: [WithTheme],
     component: Paragraph,
-    argTypes: argTypesFromConfig(mergeConfig(paragraphConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(paragraphConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
         resetMargin: false,
         m: 2,

package/styled-components/cjs/examples/typograpy/components/Old/Subtitle/Subtitle.stories.tsx

@@ -12,7 +12,17 @@ const meta: Meta<typeof Subtitle> = {
     title: 'typography/Old/Subtitle',
     decorators: [WithTheme],
     component: Subtitle,
-    argTypes: argTypesFromConfig(mergeConfig(subtitleConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(subtitleConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
+    args: {
+        noWrap: false,
+    },
 };
 
 export default meta;

package/styled-components/cjs/examples/typograpy/components/Old/Underline/Underline.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Underline> = {
     title: 'typography/Old/Underline',
     decorators: [WithTheme],
     component: Underline,
-    argTypes: argTypesFromConfig(mergeConfig(underlineConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(underlineConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
     },
 };

package/styled-components/cjs/examples/typograpy/components/Text/Text.stories.tsx

@@ -12,8 +12,16 @@ const meta: Meta<typeof Text> = {
     title: 'typography/Text',
     decorators: [WithTheme],
     component: Text,
-    argTypes: argTypesFromConfig(mergeConfig(textConfig, config)),
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(textConfig, config)),
+        color: {
+            control: {
+                type: 'color',
+            },
+        },
+    },
     args: {
+        noWrap: false,
         breakWord: true,
         bold: false,
     },