wix-style-react/dist/es/stories/Grid/ExampleAutoAdjustedRow.js

wix-style-react

import React from 'react';

import { Container, AutoAdjustedRow } from 'wix-style-react/Grid';
import Button from 'wix-style-react/Button';
import Card from 'wix-style-react/Card';
import Tooltip from 'wix-style-react/Tooltip';

export default (function () {
  return React.createElement(
    'div',
    { style: { background: '#F0F4F7', padding: 30 } },
    React.createElement(
      Container,
      null,
      React.createElement(
        AutoAdjustedRow,
        null,
        React.createElement(
          Card,
          { stretchVertically: true },
          React.createElement(Card.Header, {
            title: 'Stretched Card 1',
            suffix: React.createElement(
              Tooltip,
              { placement: 'top', alignment: 'center', content: 'Hi there!' },
              React.createElement(
                Button,
                {
                  theme: 'whiteblueprimary',
                  onClick: function onClick() {
                    return alert('Clicked!');
                  }
                },
                'Tooltip button!'
              )
            )
          }),
          React.createElement(
            Card.Content,
            null,
            'Here comes some AMAZING content that will blow your mind. Or just show you that the card next to me got my height.'
          )
        ),
        React.createElement(
          Card,
          { stretchVertically: true },
          React.createElement(Card.Header, {
            title: 'Stretched Card 2',
            suffix: React.createElement(
              Tooltip,
              { placement: 'top', alignment: 'center', content: 'Hi there!' },
              React.createElement(
                Button,
                {
                  theme: 'whiteblueprimary',
                  onClick: function onClick() {
                    return alert('Clicked!');
                  }
                },
                'Tooltip button!'
              )
            )
          })
        )
      ),
      React.createElement(
        AutoAdjustedRow,
        null,
        React.createElement(
          Card,
          null,
          React.createElement(Card.Header, { title: 'Card 1' })
        ),
        React.createElement(
          Card,
          null,
          React.createElement(Card.Header, { title: 'Card 2' })
        ),
        React.createElement(
          Card,
          null,
          React.createElement(Card.Header, { title: 'Card 3' })
        ),
        React.createElement(
          Card,
          null,
          React.createElement(Card.Header, { title: 'Card 4' })
        )
      )
    )
  );
});