@salutejs/plasma-new-hope 0.67.0-canary.1148.8444175533.0 → 0.67.0-canary.1148.8449317874.0

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

@@ -0,0 +1,153 @@
+---
+id: toast
+title: Toast
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Toast
+<Description name="Toast" />
+<PropsTable name="Toast" />
+
+## Система подсказок
+Существует готовая система текстовых подсказок, для использования которой необходимо обернуть приложение в `ToastProvider`:
+
+```jsx title="App.tsx"
+import React from 'react';
+import { ToastProvider } from '@salutejs/{{ package }}';
+
+export const App = () => (
+    <ToastProvider>
+        <div className="App">Hello, world!</div>
+    </ToastProvider>
+);
+```
+
+После этого, с помощью хука `useToast` можно получить доступ к управлению подсказками.
+
+```jsx title="MyComponent.tsx"
+import React from 'react'
+import { useToast, Button } from '@salutejs/{{ package }}'
+
+export const MyComponent = () => {
+    const { showToast, hideToast } = useToast()
+
+    const onHide = () => {}
+
+    return (
+        <Button onClick={() => showToast({ text, position, timeout, fade, contentLeft, role, onHide })} />
+    )
+}
+```
+
+`showToast` имеет необязательный аргумент `position`, отвечающий за позиционирование подсказки.
+
+```ts
+type Position = 'top' | 'bottom';
+```
+
+`showToast` имеет необязательный аргумент `timeout`, отвечающий за время отображения подсказки.
+Если аргумент не передается, по умолчанию подсказка отображается пока пользователь ее не закроет.
+
+Скрыть текущую подсказку в любой момент можно с помощью функции `hideToast`.
+
+## Аргументы функции `showToast`
+| Название | Тип             | Значение | Описание           |
+|----------|-----------------|----------|--------------------|
+| `args`   | `ShowToastArgs` |          | Конфигурация toast |
+
+```ts
+import type { ReactNode } from 'react';
+
+export interface ShowToastArgs {
+    /**
+     * Текстовая надпись
+     */
+    text?: string;
+    /**
+     * Слот для контента слева, например `Icon`
+     */
+    contentLeft?: ReactNode;
+    /**
+     * Место отображения подсказки
+     */
+    position?: ToastPosition;
+    /**
+     * WAI-ARIA роль
+     */
+    role?: ToastRole;
+    /**
+     * Отображать ли подложку блока подсказки
+     */
+    fade?: boolean;
+    /**
+     * Значение для дополнительно отступа блока подсказки, считается в rem.
+     */
+    offset?: number;
+    /**
+     * Блок подсказки c округлым border-radius
+     */
+    pilled?: boolean;
+    /**
+     * Отображать ли иконку закрытия
+     */
+    hasClose?: boolean;
+    /**
+     * Размер блока подсказки
+     */
+    size?: string;
+    /**
+     * Вид блока подсказки
+     */
+    view?: string;
+    /**
+     * Время отображения подсказки. Если не передать значение, подсказка будет отображаться пока ее не закроют.
+     */
+    timeout?: number;
+    /**
+     * callback срабатывающий в момент события hideToast
+     */
+    onHide?: () => void;
+    /**
+     * callback срабатывающий в момент события showToast
+     */
+    onShow?: () => void;
+}
+```
+
+## Пример использования
+
+```jsx live
+import React from 'react'
+import { useToast, ToastProvider, Button } from '@salutejs/{{ package }}'
+
+export function App() {
+
+    const ToastExample = () => {
+        const { showToast, hideToast } = useToast()
+
+        const onShow = () => {}
+        const onHide = () => {}
+        const toastData = {
+            text: 'Подсказка вызванная showToast',
+            position: 'bottom',
+            role: 'status',
+            hasClose: true,
+            fade: false,
+            size: 'm',
+            view: 'dark',
+            timeout: 3000,
+            onShow,
+            onHide
+        }
+
+        return <Button onClick={() => showToast(toastData)} text="Вызвать подсказку" />
+    }
+
+    return (
+        <ToastProvider>
+            <ToastExample />
+        </ToastProvider>
+    )
+}
+```

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

@@ -0,0 +1,30 @@
+---
+id: Tooltip
+title: Tooltip
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Tooltip
+<Description name="Tooltip" />
+<PropsTable name="Tooltip" />
+
+## Базовое применение
+
+`Tooltip` оборачивает собой любой компонент и открывается в заданную сторону(причем можно передавать массив, тогда сторона будет определяться автоматически из переданных).
+
+Предполагается оборачивать иконки из пакета `@salutejs/plasma-icons`
+
+```tsx live
+import React from 'react';
+import { Tooltip } from '@salutejs/{{ package }}';
+import { IconApps } from '@salutejs/plasma-icons';
+
+export function App() {
+    return (
+        <div style=\{{marginLeft: '100px',marginBottom: '35px'}}>
+            <Tooltip target={( <IconApps />)} text="Высокое качество воспроизведения" placement="bottom" hasArrow isOpen />
+        </div>
+    );
+}
+```

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

@@ -0,0 +1,127 @@
+---
+id: typography
+title: Typography
+---
+
+# Typography
+В состав Plasma Web входят компоненты, реализующие типографическую систему [типографическую систему Plasma](../../design/typography).
+Они заменяют обычные HTML-теги, такие, как `h1`, `h2`, `h3`, `h4`, `p`, etc.
+
+## Установка шрифта
+Компоненты типографики используют фирменный шрифт **SB Sans Text**.
+О том, как установить данный шрифт, смотрите на странице [Типографическая система](../../design/typography#установка-шрифта).
+
+## Отступы
+По умолчанию типографика поддерживает стандартные отступы.
+О том, как использовать отступы, читайте на странице [Стандартные отступы](../../design/spacing#встроенные-отступы-в-типографике).
+
+## Переносы
+По умолчанию в типографике слова переносятся по слогам.
+Чтобы отключить данный функционал, необходимо установить свойство `breakWord` в значении `false`.
+
+## Состав
+
+### Hero unit
+
+```tsx live
+import React from 'react';
+import { DsplL, DsplM, DsplS } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{ display: 'block' }}>
+            <DsplL bold={false}>DsplL</DsplL>
+            <DsplL>DsplL Bold</DsplL>
+
+            <DsplM bold={false}>DsplM</DsplM>
+            <DsplM>DsplM Bold</DsplM>
+
+            <DsplS bold={false}>DsplS</DsplS>
+            <DsplS>DsplS Bold</DsplS>
+        </div>
+    );
+}
+```
+
+### Заголовки
+
+```tsx live
+import React from 'react';
+import { H1, H2, H3, H4, H5 } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{ display: 'block' }}>
+            <H1 bold={false}>H1</H1>
+            <H1>H1 Bold</H1>
+
+            <H2 bold={false}>H2</H2>
+            <H2>H2 Bold</H2>
+
+            <H3 bold={false}>H3</H3>
+            <H3>H3 Bold</H3>
+
+            <H4 bold={false}>H4</H4>
+            <H4>H4 Bold</H4>
+
+            <H5 bold={false}>H5</H5>
+            <H5>H5 Bold</H5>
+        </div>
+    );
+}
+```
+
+### Интерфейсы
+Типографика для таких частей интерфейса, как button, label, подписи, и т.п.
+
+```tsx live
+import React from 'react';
+import { BodyL, BodyM, BodyS, BodyXS, BodyXXS } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{ display: 'block' }}>
+            <BodyL>BodyL</BodyL>
+            <BodyL bold>BodyL полужирный</BodyL>
+
+            <BodyM>BodyM</BodyM>
+            <BodyM bold>BodyM полужирный</BodyM>
+
+            <BodyS>BodyS</BodyS>
+            <BodyS bold>BodyS полужирный</BodyS>
+
+            <BodyXS>BodyXS</BodyXS>
+            <BodyXS bold>BodyXS полужирный</BodyXS>
+
+            <BodyXXS>BodyXXS</BodyXXS>
+            <BodyXXS bold>BodyXXS полужирный</BodyXXS>
+        </div>
+    );
+}
+```
+
+### Текст
+Типографические элементы для описаний к статьям, дополнительной информации и т.д.
+
+```tsx live
+import React from 'react';
+import { TextL, TextM, TextS, TextXS } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{ display: 'block' }}>
+            <TextL>TextL</TextL>
+            <TextL bold>TextL полужирный</TextL>
+
+            <TextM>TextM</TextM>
+            <TextM bold>TextM полужирный</TextM>
+
+            <TextS>TextS</TextS>
+            <TextS bold>TextS полужирный</TextS>
+
+            <TextXS>TextXS</TextXS>
+            <TextXS bold>TextXS полужирный</TextXS>
+        </div>
+    );
+}
+```

package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.config.js

@@ -8,7 +8,7 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Cell = /*#__PURE__*/require("../../../../components/Cell");
 var config = exports.config = {
   defaults: {
-    view: 'primary',
+    view: 'default',
     size: 'm',
     stretching: 'filled'
   },
@@ -17,10 +17,10 @@ var config = exports.config = {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], _Cell.cellTokens.cellColor, _Cell.cellTokens.cellLabelColor, _Cell.cellTokens.cellTitleColor, _Cell.cellTokens.cellSubtitleColor, _Cell.cellTokens.cellBackgroundColor)
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-regular-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-regular-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-regular-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-regular-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-regular-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-regular-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-regular-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight)
     },
     stretching: {
       auto: /*#__PURE__*/(0, _styledComponents.css)([""]),

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

@@ -9,18 +9,21 @@ import { IconChevronLeft } from '../../../../components/_Icon';
 
 import { Cell, Textbox, TextLabel, TextTitle, TextSubtitle } from './Cell';
 
-type StoryProps = ComponentProps<typeof Cell> & { itemsCount?: number };
+type StoryProps = ComponentProps<typeof Cell> & {
+    itemsCount?: number;
+    enableLeftContent?: boolean;
+    enableRightContent?: boolean;
+};
 type Story = StoryObj<StoryProps>;
 
-const views = ['default'];
 const sizes = ['l', 'm', 's', 'xs'];
-const stretchingValues = ['fixed', 'filled'];
+const stretchingValues = ['fixed', 'filled', 'auto'];
 
-type sizesCell = 'xs' | 'l' | 'm' | 's';
-type sizesAvatar = 'l' | 'm' | 's';
+type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined;
+type SizesAvatar = 'l' | 'm' | 's';
 
-const getSize = (size: sizesCell): sizesAvatar => {
-    if (size === 'xs') {
+const getSize = (size: SizesCell): SizesAvatar => {
+    if (size === 'xs' || !size) {
         return 's';
     }
 
@@ -37,12 +40,6 @@ const meta: Meta<typeof Cell> = {
                 type: 'select',
             },
         },
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
         stretching: {
             options: stretchingValues,
             control: {
@@ -61,17 +58,20 @@ const ChevronRight = styled(IconChevronLeft)`
 
 export const Default: Story = {
     args: {
-        view: 'default',
         size: 'm',
         stretching: 'filled',
+        enableLeftContent: false,
+        enableRightContent: false,
     },
     render: ({ ...args }: StoryProps) => {
         return (
             <Cell
                 contentLeft={
-                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                    !args.enableLeftContent && (
+                        <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                    )
                 }
-                contentRight={<ChevronRight color="inherit" size="xs" />}
+                contentRight={!args.enableRightContent && <ChevronRight color="inherit" size="xs" />}
                 title="Title"
                 subtitle="Subtitle"
                 label="Label"
@@ -83,7 +83,6 @@ export const Default: Story = {
 
 export const WithContentTextbox: Story = {
     args: {
-        view: 'default',
         size: 'm',
         stretching: 'filled',
     },
@@ -104,7 +103,6 @@ export const WithContentTextbox: Story = {
 
 export const WithContentTextboxWithTags: Story = {
     args: {
-        view: 'default',
         size: 'm',
         stretching: 'filled',
     },
@@ -129,7 +127,6 @@ export const WithContentTextboxWithTags: Story = {
 
 export const WithContentTextboxCustom: Story = {
     args: {
-        view: 'default',
         size: 'm',
         stretching: 'filled',
     },

package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.config.js

@@ -8,7 +8,7 @@ var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Cell = /*#__PURE__*/require("../../../../components/Cell");
 var config = exports.config = {
   defaults: {
-    view: 'primary',
+    view: 'default',
     size: 'm',
     stretching: 'filled'
   },
@@ -17,10 +17,10 @@ var config = exports.config = {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], _Cell.cellTokens.cellColor, _Cell.cellTokens.cellLabelColor, _Cell.cellTokens.cellTitleColor, _Cell.cellTokens.cellSubtitleColor, _Cell.cellTokens.cellBackgroundColor)
     },
     size: {
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-regular-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-regular-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-regular-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-regular-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-regular-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-regular-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-regular-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-regular-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight)
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellGap, _Cell.cellTokens.cellLabelFontFamily, _Cell.cellTokens.cellLabelFontSize, _Cell.cellTokens.cellLabelFontStyle, _Cell.cellTokens.cellLabelFontWeight, _Cell.cellTokens.cellLabelLetterSpacing, _Cell.cellTokens.cellLabelLineHeight, _Cell.cellTokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Cell.cellTokens.cellSubtitleFontFamily, _Cell.cellTokens.cellSubtitleFontSize, _Cell.cellTokens.cellSubtitleFontStyle, _Cell.cellTokens.cellSubtitleFontWeight, _Cell.cellTokens.cellSubtitleLetterSpacing, _Cell.cellTokens.cellSubtitleLineHeight)
     },
     stretching: {
       auto: /*#__PURE__*/(0, _styledComponents.css)([""]),

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

@@ -9,18 +9,21 @@ import { IconChevronLeft } from '../../../../components/_Icon';
 
 import { Cell, Textbox, TextLabel, TextTitle, TextSubtitle } from './Cell';
 
-type StoryProps = ComponentProps<typeof Cell> & { itemsCount?: number };
+type StoryProps = ComponentProps<typeof Cell> & {
+    itemsCount?: number;
+    enableLeftContent?: boolean;
+    enableRightContent?: boolean;
+};
 type Story = StoryObj<StoryProps>;
 
-const views = ['default'];
 const sizes = ['l', 'm', 's', 'xs'];
-const stretchingValues = ['fixed', 'filled'];
+const stretchingValues = ['fixed', 'filled', 'auto'];
 
-type sizesCell = 'xs' | 'l' | 'm' | 's';
-type sizesAvatar = 'l' | 'm' | 's';
+type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined | undefined;
+type SizesAvatar = 'l' | 'm' | 's';
 
-const getSize = (size: sizesCell): sizesAvatar => {
-    if (size === 'xs') {
+const getSize = (size: SizesCell): SizesAvatar => {
+    if (size === 'xs' || !size) {
         return 's';
     }
 
@@ -37,12 +40,6 @@ const meta: Meta<typeof Cell> = {
                 type: 'select',
             },
         },
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
         stretching: {
             options: stretchingValues,
             control: {
@@ -61,17 +58,20 @@ const ChevronRight = styled(IconChevronLeft)`
 
 export const Default: Story = {
     args: {
-        view: 'default',
         size: 'm',
         stretching: 'filled',
+        enableLeftContent: false,
+        enableRightContent: false,
     },
     render: ({ ...args }: StoryProps) => {
         return (
             <Cell
                 contentLeft={
-                    <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                    !args.enableLeftContent && (
+                        <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
+                    )
                 }
-                contentRight={<ChevronRight color="inherit" size="xs" />}
+                contentRight={!args.enableRightContent && <ChevronRight color="inherit" size="xs" />}
                 title="Title"
                 subtitle="Subtitle"
                 label="Label"
@@ -83,7 +83,6 @@ export const Default: Story = {
 
 export const WithContentTextbox: Story = {
     args: {
-        view: 'default',
         size: 'm',
         stretching: 'filled',
     },
@@ -104,7 +103,6 @@ export const WithContentTextbox: Story = {
 
 export const WithContentTextboxWithTags: Story = {
     args: {
-        view: 'default',
         size: 'm',
         stretching: 'filled',
     },
@@ -129,7 +127,6 @@ export const WithContentTextboxWithTags: Story = {
 
 export const WithContentTextboxCustom: Story = {
     args: {
-        view: 'default',
         size: 'm',
         stretching: 'filled',
     },