Figma

Row

import { Row } from '@megafon/ui-core';

Варианты использования

<Row title="Title" />
<Row title="Title" subTitle="Subtitle" href="#" backgroundView="stroke" showArrow>
  300 ₽
</Row>
<Row title="Title" subTitle="Subtitle" icon={<AnimalIcon />} showLoader backgroundView="stroke"  />
<Row title="Title" subTitle="Subtitle" showArrow href="#">
  <PromoBadge color="system-blue">Новое</PromoBadge>
</Row>
<Row title="Title" subTitle="Subtitle" showArrow href="#">
  <CounterBadge currentValue={4} totalCount={8} hasIcon isAdaptive />
</Row>
<Row title="Title" subTitle="Subtitle" showArrow href="#">
  <NotificationBadge autoWidth>24 сообщения</NotificationBadge>
</Row>
<Row title="Title" icon={<AnimalIcon />}>
  <Button type="text">
      Изменить
  </Button>
</Row>
<Row title="Title" subTitle="Subtitle" icon={<AnimalIcon />} isIconColored>
  <Switcher checked />
</Row>
<Row title="Title" subTitle="Subtitle">
  <Selector
      value="selector"
      checked
  />
</Row>

Размеры

Big отличается от small размерами отступов и заголовка

<Row size="big" title="Big size (default)" subTitle="Subtitle" icon={<AnimalIcon />} isIconColored showArrow >
  300 ₽
</Row>
<Row size="small" title="Small size" subTitle="Subtitle" icon={<AnimalIcon />} isIconColored showArrow>
  300 ₽
</Row>

Визуальный эффект фона

<Row backgroundView="shadow" title="Shadow (default)" subTitle="Subtitle" icon={<AnimalIcon />} isIconColored showArrow href="#" />
<Row backgroundView="stroke" title="Stroke" subTitle="Subtitle" icon={<AnimalIcon />} isIconColored showArrow href="#" />

Базовое использование

<Row title="Title" subTitle="Subtitle" showArrow href="#" />
<Row title="Title" subTitle="Subtitle">
  300 ₽
</Row>

Иконка

<Row title="Title" subTitle="Subtitle" icon={<AnimalIcon />} />
<Row title="Title" subTitle="Subtitle" icon={<AnimalIcon />} isIconColored />

Лоадер

<Row showLoader title="Title" subTitle="Subtitle" />
<Row showLoader title="Title" subTitle="Subtitle" icon={<AnimalIcon />} />
<Row showLoader title="Title" subTitle="Subtitle" icon={<AnimalIcon />} isIconColored />

Использование с Button

<Row title="Title" subTitle="Subtitle">
  <Button type="text">Изменить</Button>
</Row>
<Row title="Title" subTitle="Subtitle" icon={<AnimalIcon />}>
  <Button type="text">Изменить</Button>
</Row>
<Row title="Title" subTitle="Subtitle" icon={<AnimalIcon />} isIconColored>
  <Button type="text">Изменить</Button>
</Row>

Использование с Badge

<Row title="Title" subTitle="Subtitle" showArrow href="#">
  <PromoBadge color="system-blue">Новое</PromoBadge>
</Row>
<Row title="Title" subTitle="Subtitle" showArrow href="#">
  <CounterBadge currentValue={4} totalCount={8} hasIcon isAdaptive />
</Row>
<Row title="Title" subTitle="Subtitle" showArrow href="#">
  <NotificationBadge autoWidth>24 сообщения</NotificationBadge>
</Row>

Использование с Switcher

Код SwitcherWrapper
const SwitcherWrapper = ({ children }) => {
        const [checked, setChecked] = React.useState<boolean>(false);


        const handleChange = () => {
            setChecked(!checked);
        };


        return <div style={blockStyle}>{children({ checked, onChange: handleChange })}</div>;
    };
<SwitcherWrapper>
  {({ onChange, checked }) => (
      <>
          <Row title="Title" subTitle="Subtitle">
              <Switcher checked={checked} onChange={onChange} />
          </Row>
          <Row title="Title" subTitle="Subtitle" icon={<AnimalIcon />}>
              <Switcher showLoader checked />
          </Row>
          <Row title="Title" subTitle="Subtitle" icon={<AnimalIcon />} isIconColored>
              <Switcher checked disabled />
          </Row>
      </>
  )}
</SwitcherWrapper>

Использование с Selector

Код SelectorWrapper
const SelectorWrapper = ({ children }) => {
        const [selectedOption, setSelectedOption] = React.useState<string>('1');


        const handleChange = (value: string): void => {
            setSelectedOption(value);
        };


        return <div style={blockStyle}>{children({ onChange: handleChange, selectedOption })}</div>;
    };
<SelectorWrapper>
  {({ onChange, selectedOption }) => (
      <>
          <Row title="Title" subTitle="Subtitle">
              <Selector value="1" checked={selectedOption === "1"} onChange={onChange} />
          </Row>
          <Row title="Title" subTitle="Subtitle" icon={<AnimalIcon />}>
              <Selector value="2" checked={selectedOption === "2"} onChange={onChange} />
          </Row>
          <Row title="Title" subTitle="Subtitle" icon={<AnimalIcon />} isIconColored>
              <Selector value="3" checked={selectedOption === "3"} onChange={onChange} />
          </Row>
      </>
  )}
</SelectorWrapper>