2015-04-27 14:05:31 +00:00
|
|
|
<?php
|
|
|
|
|
2015-07-01 16:03:57 +00:00
|
|
|
class PortableInfoboxRenderServiceTest extends WikiaBaseTest {
|
2015-07-29 11:51:55 +00:00
|
|
|
|
2015-05-04 14:43:53 +00:00
|
|
|
protected function setUp() {
|
|
|
|
$this->setupFile = dirname( __FILE__ ) . '/../PortableInfobox.setup.php';
|
2015-04-27 14:05:31 +00:00
|
|
|
parent::setUp();
|
2015-07-10 11:19:08 +00:00
|
|
|
}
|
2015-04-27 14:05:31 +00:00
|
|
|
|
2015-07-29 08:58:39 +00:00
|
|
|
private function mockInfoboxRenderServiceHelper( $input ) {
|
2016-12-29 10:28:26 +00:00
|
|
|
$extendImageData = isset( $input['extendImageData'] ) ? $input['extendImageData'] : null;
|
2015-07-22 13:28:39 +00:00
|
|
|
|
2016-12-29 10:58:27 +00:00
|
|
|
$mock = $this->getMockBuilder( 'Wikia\PortableInfobox\Helpers\PortableInfoboxImagesHelper' )
|
2017-01-11 09:00:21 +00:00
|
|
|
->setMethods( [ 'extendImageData' ] )
|
2015-07-10 12:10:03 +00:00
|
|
|
->getMock();
|
2015-07-20 09:52:32 +00:00
|
|
|
$mock->expects( $this->any() )
|
2015-07-29 08:58:39 +00:00
|
|
|
->method( 'extendImageData' )
|
|
|
|
->will( $this->returnValue( $extendImageData ) );
|
2015-04-27 14:05:31 +00:00
|
|
|
|
2016-12-29 10:58:27 +00:00
|
|
|
$this->mockClass( 'Wikia\PortableInfobox\Helpers\PortableInfoboxImagesHelper', $mock );
|
2015-05-20 11:56:56 +00:00
|
|
|
}
|
2015-04-27 14:05:31 +00:00
|
|
|
|
2015-07-13 08:56:19 +00:00
|
|
|
/**
|
|
|
|
* @param $html
|
|
|
|
* @return string
|
2015-07-22 13:28:39 +00:00
|
|
|
*/
|
2015-07-13 08:56:19 +00:00
|
|
|
private function normalizeHTML( $html ) {
|
2016-12-14 14:20:10 +00:00
|
|
|
if ( empty( $html ) ) {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
|
2016-03-29 10:57:07 +00:00
|
|
|
$DOM = new DOMDocument( '1.0' );
|
2015-07-10 14:57:57 +00:00
|
|
|
$DOM->formatOutput = true;
|
|
|
|
$DOM->preserveWhiteSpace = false;
|
2015-07-13 08:56:19 +00:00
|
|
|
$DOM->loadXML( $html );
|
2015-05-04 14:16:35 +00:00
|
|
|
|
2015-07-10 14:57:57 +00:00
|
|
|
return $DOM->saveXML();
|
2015-04-27 14:05:31 +00:00
|
|
|
}
|
|
|
|
|
2016-03-29 10:57:07 +00:00
|
|
|
public function testEuropaThemeEnabled() {
|
|
|
|
$wrapper = new \Wikia\Util\GlobalStateWrapper( [ 'wgEnablePortableInfoboxEuropaTheme' => true ] );
|
|
|
|
|
|
|
|
$infoboxRenderService = new PortableInfoboxRenderService();
|
|
|
|
$output = $wrapper->wrap( function () use ( $infoboxRenderService ) {
|
|
|
|
return $infoboxRenderService->renderInfobox(
|
2016-12-27 13:35:48 +00:00
|
|
|
[ [ 'type' => 'title', 'data' => [ 'value' => 'Test' ] ] ], '', '', '', '' );
|
2016-03-29 10:57:07 +00:00
|
|
|
} );
|
|
|
|
|
|
|
|
$expected = $this->normalizeHTML( '<aside class="portable-infobox pi-background pi-europa">
|
2016-12-28 11:10:57 +00:00
|
|
|
<h2 class="pi-item pi-item-spacing pi-title">Test</h2>
|
2016-03-29 10:57:07 +00:00
|
|
|
</aside>' );
|
|
|
|
$result = $this->normalizeHTML( $output );
|
|
|
|
$this->assertEquals( $expected, $result );
|
|
|
|
}
|
|
|
|
|
2017-02-03 16:05:52 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @param $data
|
|
|
|
* @param $expected
|
|
|
|
*
|
2017-03-15 18:07:51 +00:00
|
|
|
* @dataProvider filterImagesDataProvider
|
2017-02-03 16:05:52 +00:00
|
|
|
*/
|
|
|
|
public function testFilterImages( $data, $expected ) {
|
|
|
|
$method = ( new ReflectionClass( 'PortableInfoboxRenderService' ) )->getMethod( 'filterImageData' );
|
|
|
|
$method->setAccessible( true );
|
|
|
|
|
|
|
|
$renderService = new PortableInfoboxRenderService();
|
|
|
|
|
|
|
|
$this->assertEquals( $expected, $method->invokeArgs( $renderService, [ $data ] ) );
|
|
|
|
}
|
|
|
|
|
2017-03-15 18:07:51 +00:00
|
|
|
public function filterImagesDataProvider() {
|
2017-02-03 16:05:52 +00:00
|
|
|
return [
|
|
|
|
[
|
|
|
|
'data' => [
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name1',
|
|
|
|
'key' => 'key1',
|
|
|
|
'alt' => 'alt1',
|
|
|
|
'caption' => 'caption1',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name2',
|
|
|
|
'key' => 'key2',
|
|
|
|
'alt' => 'alt2',
|
|
|
|
'caption' => 'caption2',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
],
|
|
|
|
'expected' => [
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name1',
|
|
|
|
'key' => 'key1',
|
|
|
|
'alt' => 'alt1',
|
|
|
|
'caption' => 'caption1',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name2',
|
|
|
|
'key' => 'key2',
|
|
|
|
'alt' => 'alt2',
|
|
|
|
'caption' => 'caption2',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'data' => [
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name1',
|
|
|
|
'key' => 'key1',
|
|
|
|
'alt' => 'alt1',
|
|
|
|
'caption' => '',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name2',
|
|
|
|
'key' => 'key2',
|
|
|
|
'alt' => 'alt2',
|
|
|
|
'caption' => 'caption2',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name3',
|
|
|
|
'key' => 'key3',
|
|
|
|
'alt' => 'alt3',
|
|
|
|
'caption' => 'caption3',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
],
|
|
|
|
'expected' => [
|
|
|
|
1 => [
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name2',
|
|
|
|
'key' => 'key2',
|
|
|
|
'alt' => 'alt2',
|
|
|
|
'caption' => 'caption2',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
2 => [
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name3',
|
|
|
|
'key' => 'key3',
|
|
|
|
'alt' => 'alt3',
|
|
|
|
'caption' => 'caption3',
|
|
|
|
'isVideo' => false,
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'data' => [
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name1',
|
|
|
|
'key' => 'key1',
|
|
|
|
'alt' => 'alt1',
|
|
|
|
'caption' => 'caption1',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name2',
|
|
|
|
'key' => 'key2',
|
|
|
|
'alt' => 'alt2',
|
|
|
|
'caption' => '',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
],
|
|
|
|
'expected' => [
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name1',
|
|
|
|
'key' => 'key1',
|
|
|
|
'alt' => 'alt1',
|
|
|
|
'caption' => 'caption1',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
],
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'data' => [
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name1',
|
|
|
|
'key' => 'key1',
|
|
|
|
'alt' => 'alt1',
|
|
|
|
'caption' => '',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name2',
|
|
|
|
'key' => 'key2',
|
|
|
|
'alt' => 'alt2',
|
|
|
|
'caption' => '',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
],
|
|
|
|
'expected' => [
|
|
|
|
[
|
|
|
|
'url' => 'some.url.com',
|
|
|
|
'name' => 'name1',
|
|
|
|
'key' => 'key1',
|
|
|
|
'alt' => 'alt1',
|
|
|
|
'caption' => '',
|
|
|
|
'isVideo' => false,
|
|
|
|
],
|
|
|
|
]
|
|
|
|
],
|
|
|
|
];
|
|
|
|
}
|
|
|
|
|
2015-05-20 11:56:56 +00:00
|
|
|
/**
|
|
|
|
* @param $input
|
|
|
|
* @param $expectedOutput
|
|
|
|
* @param $description
|
2015-11-03 16:19:29 +00:00
|
|
|
* @param $mockParams
|
2016-12-29 09:16:53 +00:00
|
|
|
* @param $accentColor
|
|
|
|
* @param $accentColorText
|
2017-03-15 18:07:51 +00:00
|
|
|
* @dataProvider renderInfoboxDataProvider
|
2015-05-20 11:56:56 +00:00
|
|
|
*/
|
2016-12-28 12:36:57 +00:00
|
|
|
public function testRenderInfobox( $input, $expectedOutput, $description, $mockParams, $accentColor, $accentColorText ) {
|
2015-07-29 08:58:39 +00:00
|
|
|
$this->mockInfoboxRenderServiceHelper( $mockParams );
|
|
|
|
|
|
|
|
$infoboxRenderService = new PortableInfoboxRenderService();
|
2016-12-28 12:36:57 +00:00
|
|
|
$actualOutput = $infoboxRenderService->renderInfobox( $input, '', '', $accentColor, $accentColorText );
|
2016-03-29 10:57:07 +00:00
|
|
|
$expectedHtml = $this->normalizeHTML( $expectedOutput );
|
2015-07-13 08:56:19 +00:00
|
|
|
$actualHtml = $this->normalizeHTML( $actualOutput );
|
2015-05-20 11:56:56 +00:00
|
|
|
|
|
|
|
$this->assertEquals( $expectedHtml, $actualHtml, $description );
|
|
|
|
}
|
|
|
|
|
2017-03-15 18:07:51 +00:00
|
|
|
public function renderInfoboxDataProvider() {
|
2015-07-01 14:34:34 +00:00
|
|
|
return [
|
|
|
|
[
|
2016-03-29 10:57:07 +00:00
|
|
|
'input' => [ ],
|
2015-04-27 14:05:31 +00:00
|
|
|
'output' => '',
|
2016-12-29 09:16:53 +00:00
|
|
|
'description' => 'Empty data should yield no infobox markup',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
2016-12-29 09:16:53 +00:00
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-07-01 16:03:57 +00:00
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'title',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'Test Title'
|
|
|
|
]
|
2015-04-27 14:05:31 +00:00
|
|
|
]
|
2015-07-01 16:03:57 +00:00
|
|
|
],
|
2015-07-29 15:40:21 +00:00
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2016-12-28 11:10:57 +00:00
|
|
|
<h2 class="pi-item pi-item-spacing pi-title">Test Title</h2>
|
2015-07-01 16:03:57 +00:00
|
|
|
</aside>',
|
2016-12-29 09:16:53 +00:00
|
|
|
'description' => 'Only title',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
2016-12-29 09:16:53 +00:00
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-07-01 16:03:57 +00:00
|
|
|
],
|
2016-12-28 12:36:57 +00:00
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'title',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'Test Title'
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<h2 class="pi-item pi-item-spacing pi-title" style="background-color:#FFF;color:#000;">Test Title</h2>
|
|
|
|
</aside>',
|
|
|
|
'description' => 'Only title with custom colors',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
2016-12-28 12:36:57 +00:00
|
|
|
'accentColor' => '#FFF',
|
|
|
|
'accentColorText' => '#000'
|
|
|
|
],
|
2015-07-01 16:03:57 +00:00
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'image',
|
|
|
|
'data' => [
|
2015-10-16 01:15:52 +00:00
|
|
|
[
|
|
|
|
'alt' => 'image alt',
|
|
|
|
'url' => 'http://image.jpg',
|
|
|
|
'name' => 'image',
|
|
|
|
'key' => 'image',
|
|
|
|
'caption' => 'Lorem ipsum dolor',
|
|
|
|
'isVideo' => false
|
|
|
|
]
|
2015-07-01 16:03:57 +00:00
|
|
|
]
|
2015-05-20 11:56:56 +00:00
|
|
|
]
|
2015-07-01 16:03:57 +00:00
|
|
|
],
|
2015-07-29 15:40:21 +00:00
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<figure class="pi-item pi-image">
|
|
|
|
<a href="http://image.jpg" class="image image-thumbnail" title="image alt">
|
2016-11-03 14:40:21 +00:00
|
|
|
<img src="http://thumbnail.jpg" srcset="http://thumbnail.jpg 1x, http://thumbnail2x.jpg 2x" class="pi-image-thumbnail" alt="image alt"
|
2015-07-29 15:40:21 +00:00
|
|
|
width="400" height="200" data-image-key="image" data-image-name="image"/>
|
|
|
|
</a>
|
|
|
|
<figcaption class="pi-item-spacing pi-caption">Lorem ipsum dolor</figcaption>
|
|
|
|
</figure>
|
2015-07-01 16:03:57 +00:00
|
|
|
</aside>',
|
2015-07-29 08:58:39 +00:00
|
|
|
'description' => 'Only image',
|
|
|
|
'mockParams' => [
|
|
|
|
'extendImageData' => [
|
|
|
|
'alt' => 'image alt',
|
|
|
|
'url' => 'http://image.jpg',
|
|
|
|
'caption' => 'Lorem ipsum dolor',
|
|
|
|
'name' => 'image',
|
|
|
|
'key' => 'image',
|
|
|
|
'width' => '400',
|
|
|
|
'height' => '200',
|
2015-07-29 13:22:28 +00:00
|
|
|
'thumbnail' => 'http://thumbnail.jpg',
|
2016-11-03 14:40:21 +00:00
|
|
|
'thumbnail2x' => 'http://thumbnail2x.jpg',
|
2015-07-29 13:22:28 +00:00
|
|
|
'media-type' => 'image',
|
|
|
|
'isVideo' => false
|
|
|
|
]
|
2016-12-29 09:16:53 +00:00
|
|
|
],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-07-29 13:22:28 +00:00
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'image',
|
|
|
|
'data' => [
|
2015-10-16 01:15:52 +00:00
|
|
|
[
|
|
|
|
'alt' => 'image alt',
|
|
|
|
'url' => 'http://image.jpg',
|
|
|
|
'caption' => 'Lorem ipsum dolor',
|
|
|
|
'isVideo' => true,
|
|
|
|
'duration' => '1:20',
|
|
|
|
'name' => 'test',
|
|
|
|
'key' => 'test'
|
|
|
|
]
|
2015-07-29 13:22:28 +00:00
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
2015-07-29 15:40:21 +00:00
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<figure class="pi-item pi-image">
|
|
|
|
<a href="http://image.jpg"
|
|
|
|
class="image image-thumbnail video video-thumbnail small"
|
|
|
|
title="image alt">
|
2016-11-03 14:40:21 +00:00
|
|
|
<img src="http://thumbnail.jpg" srcset="http://thumbnail.jpg 1x, http://thumbnail2x.jpg 2x" class="pi-image-thumbnail"
|
2015-07-29 15:40:21 +00:00
|
|
|
alt="image alt" width="400" height="200" data-video-key="image"
|
|
|
|
data-video-name="image"/>
|
|
|
|
<span class="duration" itemprop="duration">1:20</span>
|
|
|
|
<span class="play-circle"></span>
|
|
|
|
</a>
|
|
|
|
<figcaption class="pi-item-spacing pi-caption">Lorem ipsum dolor</figcaption>
|
|
|
|
</figure>
|
2015-07-29 13:22:28 +00:00
|
|
|
</aside>',
|
|
|
|
'description' => 'Only video',
|
|
|
|
'mockParams' => [
|
|
|
|
'extendImageData' => [
|
|
|
|
'alt' => 'image alt',
|
|
|
|
'url' => 'http://image.jpg',
|
|
|
|
'caption' => 'Lorem ipsum dolor',
|
|
|
|
'name' => 'image',
|
|
|
|
'key' => 'image',
|
|
|
|
'width' => '400',
|
|
|
|
'height' => '200',
|
|
|
|
'thumbnail' => 'http://thumbnail.jpg',
|
2016-11-03 14:40:21 +00:00
|
|
|
'thumbnail2x' => 'http://thumbnail2x.jpg',
|
2015-07-29 13:22:28 +00:00
|
|
|
'media-type' => 'video',
|
|
|
|
'isVideo' => true,
|
|
|
|
'duration' => '1:20'
|
2015-07-29 08:58:39 +00:00
|
|
|
]
|
2016-12-29 09:16:53 +00:00
|
|
|
],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-07-01 16:03:57 +00:00
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
2015-07-01 14:19:31 +00:00
|
|
|
'type' => 'navigation',
|
2015-07-01 16:03:57 +00:00
|
|
|
'data' => [
|
2015-07-01 14:19:31 +00:00
|
|
|
'value' => 'navigation value',
|
2015-07-01 16:03:57 +00:00
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
2015-07-29 15:40:21 +00:00
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<nav class="pi-navigation pi-item-spacing pi-secondary-background pi-secondary-font">navigation value</nav>
|
2015-07-01 16:03:57 +00:00
|
|
|
</aside>',
|
2016-12-29 09:16:53 +00:00
|
|
|
'description' => 'navigation only',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
2016-12-29 09:16:53 +00:00
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-07-01 16:03:57 +00:00
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'test label',
|
|
|
|
'value' => 'test value'
|
|
|
|
]
|
2015-05-04 14:30:40 +00:00
|
|
|
]
|
2015-07-01 16:03:57 +00:00
|
|
|
],
|
2015-07-29 15:40:21 +00:00
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2015-07-31 12:54:10 +00:00
|
|
|
<div class="pi-item pi-data pi-item-spacing pi-border-color">
|
2015-07-29 15:40:21 +00:00
|
|
|
<h3 class="pi-data-label pi-secondary-font">test label</h3>
|
|
|
|
<div class="pi-data-value pi-font">test value</div>
|
2015-07-01 16:03:57 +00:00
|
|
|
</div>
|
|
|
|
</aside>',
|
2016-12-29 09:16:53 +00:00
|
|
|
'description' => 'Only pair',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
2016-12-29 09:16:53 +00:00
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-07-01 16:03:57 +00:00
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'title',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'Test Title'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'image',
|
|
|
|
'data' => [
|
2015-10-16 01:15:52 +00:00
|
|
|
[
|
|
|
|
'alt' => 'image alt',
|
|
|
|
'url' => 'http://image.jpg',
|
|
|
|
'name' => 'image',
|
|
|
|
'key' => 'image',
|
|
|
|
'isVideo' => false
|
|
|
|
]
|
2015-07-01 16:03:57 +00:00
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'test label',
|
|
|
|
'value' => 'test value'
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
2015-07-29 15:40:21 +00:00
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2016-12-28 11:10:57 +00:00
|
|
|
<h2 class="pi-item pi-item-spacing pi-title">Test Title</h2>
|
2015-07-29 15:40:21 +00:00
|
|
|
<figure class="pi-item pi-image">
|
|
|
|
<a href="http://image.jpg" class="image image-thumbnail" title="image alt">
|
2016-11-03 14:40:21 +00:00
|
|
|
<img src="http://thumbnail.jpg" srcset="http://thumbnail.jpg 1x, http://thumbnail2x.jpg 2x" class="pi-image-thumbnail" alt="image alt"
|
2015-07-29 15:40:21 +00:00
|
|
|
width="400" height="200" data-image-key="image" data-image-name="image"/>
|
|
|
|
</a>
|
|
|
|
</figure>
|
2015-07-31 12:54:10 +00:00
|
|
|
<div class="pi-item pi-data pi-item-spacing pi-border-color">
|
2015-07-29 15:40:21 +00:00
|
|
|
<h3 class="pi-data-label pi-secondary-font">test label</h3>
|
|
|
|
<div class="pi-data-value pi-font">test value</div>
|
2015-05-07 12:36:30 +00:00
|
|
|
</div>
|
|
|
|
</aside>',
|
2015-07-29 08:58:39 +00:00
|
|
|
'description' => 'Simple infobox with title, image and key-value pair',
|
|
|
|
'mockParams' => [
|
|
|
|
'extendImageData' => [
|
|
|
|
'alt' => 'image alt',
|
|
|
|
'url' => 'http://image.jpg',
|
|
|
|
'name' => 'image',
|
|
|
|
'key' => 'image',
|
|
|
|
'width' => '400',
|
|
|
|
'height' => '200',
|
2015-07-29 13:22:28 +00:00
|
|
|
'thumbnail' => 'http://thumbnail.jpg',
|
2016-11-03 14:40:21 +00:00
|
|
|
'thumbnail2x' => 'http://thumbnail2x.jpg',
|
2015-07-29 13:22:28 +00:00
|
|
|
'media-type' => 'image',
|
|
|
|
'isVideo' => false
|
2015-07-21 11:33:24 +00:00
|
|
|
]
|
2016-12-29 09:16:53 +00:00
|
|
|
],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-07-21 11:33:24 +00:00
|
|
|
],
|
2015-04-27 14:05:31 +00:00
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'title',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'Test Title'
|
2015-05-07 13:25:26 +00:00
|
|
|
]
|
2015-04-27 14:05:31 +00:00
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'image',
|
2016-03-29 10:57:07 +00:00
|
|
|
'data' => [ ]
|
2015-04-27 14:05:31 +00:00
|
|
|
],
|
|
|
|
[
|
2015-05-04 10:48:57 +00:00
|
|
|
'type' => 'data',
|
2015-04-27 14:05:31 +00:00
|
|
|
'data' => [
|
|
|
|
'label' => 'test label',
|
|
|
|
'value' => 'test value'
|
2015-05-07 13:25:26 +00:00
|
|
|
]
|
2015-04-27 14:05:31 +00:00
|
|
|
]
|
|
|
|
],
|
2015-07-29 15:40:21 +00:00
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2016-12-28 11:10:57 +00:00
|
|
|
<h2 class="pi-item pi-item-spacing pi-title">Test Title</h2>
|
2015-07-31 12:54:10 +00:00
|
|
|
<div class="pi-item pi-data pi-item-spacing pi-border-color">
|
2015-07-29 15:40:21 +00:00
|
|
|
<h3 class="pi-data-label pi-secondary-font">test label</h3>
|
|
|
|
<div class="pi-data-value pi-font">test value</div>
|
2015-05-07 12:36:30 +00:00
|
|
|
</div>
|
|
|
|
</aside>',
|
2016-12-29 09:16:53 +00:00
|
|
|
'description' => 'Simple infobox with title, INVALID image and key-value pair',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
2016-12-29 09:16:53 +00:00
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-04-27 14:05:31 +00:00
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'title',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'Test Title'
|
2015-05-07 13:25:26 +00:00
|
|
|
]
|
2015-04-27 14:05:31 +00:00
|
|
|
],
|
|
|
|
[
|
2015-05-04 10:48:57 +00:00
|
|
|
'type' => 'data',
|
2015-04-27 14:05:31 +00:00
|
|
|
'data' => [
|
|
|
|
'label' => 'test label',
|
|
|
|
'value' => 'test value'
|
2015-05-07 13:25:26 +00:00
|
|
|
]
|
2015-04-27 14:05:31 +00:00
|
|
|
]
|
|
|
|
],
|
2015-07-29 15:40:21 +00:00
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2016-12-28 11:10:57 +00:00
|
|
|
<h2 class="pi-item pi-item-spacing pi-title">Test Title</h2>
|
2015-07-31 12:54:10 +00:00
|
|
|
<div class="pi-item pi-data pi-item-spacing pi-border-color">
|
2015-07-29 15:40:21 +00:00
|
|
|
<h3 class="pi-data-label pi-secondary-font">test label</h3>
|
|
|
|
<div class="pi-data-value pi-font">test value</div>
|
2015-05-04 14:30:40 +00:00
|
|
|
</div>
|
|
|
|
</aside>',
|
2016-12-29 09:16:53 +00:00
|
|
|
'description' => 'Simple infobox with title, empty image and key-value pair',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
2016-12-29 09:16:53 +00:00
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-05-04 14:30:40 +00:00
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'title',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'Test Title'
|
2015-05-07 13:25:26 +00:00
|
|
|
]
|
2015-05-04 14:30:40 +00:00
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'header',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'Test Header'
|
2015-05-07 13:25:26 +00:00
|
|
|
]
|
2015-05-04 14:30:40 +00:00
|
|
|
],
|
|
|
|
[
|
2015-05-07 12:36:30 +00:00
|
|
|
'type' => 'data',
|
2015-05-04 14:30:40 +00:00
|
|
|
'data' => [
|
|
|
|
'label' => 'test label',
|
|
|
|
'value' => 'test value'
|
2015-05-07 13:25:26 +00:00
|
|
|
]
|
2015-05-04 14:30:40 +00:00
|
|
|
],
|
|
|
|
[
|
2015-05-07 12:36:30 +00:00
|
|
|
'type' => 'data',
|
2015-05-04 14:30:40 +00:00
|
|
|
'data' => [
|
|
|
|
'label' => 'test label',
|
|
|
|
'value' => 'test value'
|
2015-05-07 13:25:26 +00:00
|
|
|
]
|
2015-05-04 14:30:40 +00:00
|
|
|
]
|
2016-12-29 09:16:53 +00:00
|
|
|
],
|
|
|
|
'layout' => 'default',
|
|
|
|
'collapse' => null,
|
2017-01-11 09:00:21 +00:00
|
|
|
'row-items' => null
|
2015-05-07 13:25:26 +00:00
|
|
|
]
|
2015-05-04 14:30:40 +00:00
|
|
|
]
|
|
|
|
],
|
2015-07-29 15:40:21 +00:00
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<h2 class="pi-item pi-item-spacing pi-title">Test Title</h2>
|
2015-07-31 12:54:10 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
2015-07-29 15:40:21 +00:00
|
|
|
<h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Test Header</h2>
|
2015-07-31 12:54:10 +00:00
|
|
|
<div class="pi-item pi-data pi-item-spacing pi-border-color">
|
2015-07-29 15:40:21 +00:00
|
|
|
<h3 class="pi-data-label pi-secondary-font">test label</h3>
|
|
|
|
<div class="pi-data-value pi-font">test value</div>
|
2015-05-04 14:30:40 +00:00
|
|
|
</div>
|
2015-07-31 12:54:10 +00:00
|
|
|
<div class="pi-item pi-data pi-item-spacing pi-border-color">
|
2015-07-29 15:40:21 +00:00
|
|
|
<h3 class="pi-data-label pi-secondary-font">test label</h3>
|
|
|
|
<div class="pi-data-value pi-font">test value</div>
|
2015-05-04 14:30:40 +00:00
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</aside>',
|
2016-12-29 09:16:53 +00:00
|
|
|
'description' => 'Infobox with title, group with header and two key-value pairs',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
2016-12-29 09:16:53 +00:00
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-05-04 14:30:40 +00:00
|
|
|
],
|
2016-12-28 12:36:57 +00:00
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'title',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'Test Title'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'header',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'Test Header'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'test label',
|
|
|
|
'value' => 'test value'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'test label',
|
|
|
|
'value' => 'test value'
|
|
|
|
]
|
|
|
|
]
|
2016-12-29 09:16:53 +00:00
|
|
|
],
|
|
|
|
'layout' => 'default',
|
|
|
|
'collapse' => null,
|
2017-01-11 09:00:21 +00:00
|
|
|
'row-items' => null
|
2016-12-28 12:36:57 +00:00
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<h2 class="pi-item pi-item-spacing pi-title" style="background-color:#FFF;color:#000;">Test Title</h2>
|
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background" style="background-color:#FFF;color:#000;">Test Header</h2>
|
|
|
|
<div class="pi-item pi-data pi-item-spacing pi-border-color">
|
|
|
|
<h3 class="pi-data-label pi-secondary-font">test label</h3>
|
|
|
|
<div class="pi-data-value pi-font">test value</div>
|
|
|
|
</div>
|
|
|
|
<div class="pi-item pi-data pi-item-spacing pi-border-color">
|
|
|
|
<h3 class="pi-data-label pi-secondary-font">test label</h3>
|
|
|
|
<div class="pi-data-value pi-font">test value</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</aside>',
|
|
|
|
'description' => 'Infobox with title, group with header and two key-value pairs, custom accent color and accent text color',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
2016-12-28 12:36:57 +00:00
|
|
|
'accentColor' => '#FFF',
|
|
|
|
'accentColorText' => '#000'
|
|
|
|
],
|
2015-06-11 17:28:49 +00:00
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'header',
|
|
|
|
'data' => [
|
2015-07-29 08:58:39 +00:00
|
|
|
'value' => 'Test header'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'test label',
|
|
|
|
'value' => 'test value'
|
2015-06-11 17:28:49 +00:00
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'test label',
|
|
|
|
'value' => 'test value'
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
2016-12-29 09:16:53 +00:00
|
|
|
'layout' => 'horizontal',
|
|
|
|
'collapse' => null,
|
2017-01-11 09:00:21 +00:00
|
|
|
'row-items' => null
|
2015-06-11 17:28:49 +00:00
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
2015-07-29 15:40:21 +00:00
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2015-07-31 12:54:10 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
2015-07-29 15:40:21 +00:00
|
|
|
<table class="pi-horizontal-group">
|
2015-07-29 08:58:39 +00:00
|
|
|
<caption
|
2015-07-29 15:40:21 +00:00
|
|
|
class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Test header</caption>
|
2015-07-29 08:58:39 +00:00
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th
|
2015-08-04 10:06:14 +00:00
|
|
|
class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing">test label</th>
|
2015-07-29 08:58:39 +00:00
|
|
|
<th
|
2015-08-04 10:06:14 +00:00
|
|
|
class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing">test label</th>
|
2015-07-29 08:58:39 +00:00
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
2015-07-31 12:54:10 +00:00
|
|
|
<td
|
2015-08-04 10:06:14 +00:00
|
|
|
class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing">test value</td>
|
2015-07-31 12:54:10 +00:00
|
|
|
<td
|
2015-08-04 10:06:14 +00:00
|
|
|
class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing">test value</td>
|
2015-07-29 08:58:39 +00:00
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
2015-06-11 17:28:49 +00:00
|
|
|
</section>
|
|
|
|
</aside>',
|
2015-09-07 11:26:07 +00:00
|
|
|
'description' => 'Infobox with horizontal group',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
2016-12-29 09:16:53 +00:00
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-09-07 11:26:07 +00:00
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => '',
|
|
|
|
'value' => 'test value'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => '',
|
|
|
|
'value' => 'test value'
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
2016-12-29 09:16:53 +00:00
|
|
|
'layout' => 'horizontal',
|
|
|
|
'collapse' => null,
|
2017-01-11 09:00:21 +00:00
|
|
|
'row-items' => null
|
2015-09-07 11:26:07 +00:00
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<section class="pi-item pi-group pi-border-color">
|
2016-03-09 14:51:51 +00:00
|
|
|
<table class="pi-horizontal-group pi-horizontal-group-no-labels">
|
2015-09-07 11:26:07 +00:00
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td
|
|
|
|
class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing">test value</td>
|
|
|
|
<td
|
|
|
|
class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing">test value</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</section>
|
|
|
|
</aside>',
|
|
|
|
'description' => 'Infobox with horizontal group without header and labels',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
2016-12-29 09:16:53 +00:00
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2015-06-11 17:28:49 +00:00
|
|
|
],
|
2015-05-04 14:30:40 +00:00
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
2015-07-01 14:19:31 +00:00
|
|
|
'type' => 'navigation',
|
2015-05-04 14:30:40 +00:00
|
|
|
'data' => [
|
2015-05-07 12:36:30 +00:00
|
|
|
'value' => '<p>Links</p>'
|
2015-05-07 13:25:26 +00:00
|
|
|
]
|
2015-05-04 14:30:40 +00:00
|
|
|
]
|
|
|
|
],
|
2015-07-29 15:40:21 +00:00
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<nav class="pi-navigation pi-item-spacing pi-secondary-background pi-secondary-font">
|
2015-05-04 14:30:40 +00:00
|
|
|
<p>Links</p>
|
2015-07-01 14:19:31 +00:00
|
|
|
</nav>
|
2015-05-04 14:30:40 +00:00
|
|
|
</aside>',
|
2016-12-29 09:16:53 +00:00
|
|
|
'description' => 'Infobox with navigation',
|
2016-12-29 10:28:26 +00:00
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
// horizontal group tests
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'test label 1',
|
|
|
|
'value' => 'test value 1'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'test label 2',
|
|
|
|
'value' => 'test value 2'
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => 'horizontal',
|
|
|
|
'collapse' => null,
|
2017-01-11 09:00:21 +00:00
|
|
|
'row-items' => null
|
2016-12-29 10:28:26 +00:00
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<table class="pi-horizontal-group">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing">test label 1</th>
|
|
|
|
<th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing">test label 2</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing">test value 1</td>
|
|
|
|
<td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing">test value 2</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</section>
|
|
|
|
</aside>',
|
|
|
|
'description' => 'Horizontal group data without header',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'header',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'test header'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => '',
|
|
|
|
'value' => 'test value 1'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'test label 2',
|
|
|
|
'value' => 'test value 2'
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => 'horizontal',
|
|
|
|
'collapse' => null,
|
2017-01-11 09:00:21 +00:00
|
|
|
'row-items' => null
|
2016-12-29 10:28:26 +00:00
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<table class="pi-horizontal-group">
|
|
|
|
<caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">test header</caption>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing"/>
|
|
|
|
<th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing">test label 2</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing">test value 1</td>
|
|
|
|
<td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing">test value 2</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</section>
|
|
|
|
</aside>',
|
|
|
|
'description' => 'Horizontal group data with empty label',
|
|
|
|
'mockParams' => [ ],
|
2016-12-29 09:16:53 +00:00
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
2016-12-29 10:28:26 +00:00
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => '',
|
|
|
|
'value' => 'test value 1'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => '',
|
|
|
|
'value' => 'test value 2'
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => 'horizontal',
|
|
|
|
'collapse' => null,
|
2017-01-11 09:00:21 +00:00
|
|
|
'row-items' => null
|
2016-12-29 10:28:26 +00:00
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<table class="pi-horizontal-group pi-horizontal-group-no-labels">
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing">test value 1</td>
|
|
|
|
<td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing">test value 2</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</section>
|
|
|
|
</aside>',
|
|
|
|
'description' => 'Horizontal group data with empty label',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
2017-01-11 09:00:21 +00:00
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 1',
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 2',
|
|
|
|
'value' => 'test value 2',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 3',
|
|
|
|
'value' => 'test value 3',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 4',
|
|
|
|
'value' => 'test value 4',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 5',
|
|
|
|
'value' => 'test value 5',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 3
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 1</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 2</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 3</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 1</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 2</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 3</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 4</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 5</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 4</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 5</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
</aside>',
|
|
|
|
'description' => 'Flex wrapped group of 5 elements with row size 3',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 1',
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 2',
|
|
|
|
'value' => 'test value 2',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 3',
|
|
|
|
'value' => 'test value 3',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 4',
|
|
|
|
'value' => 'test value 4',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 3
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 1</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 2</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 3</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 1</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 2</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 3</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">Test 4</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">test value 4</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
</aside>',
|
|
|
|
'description' => 'Flex wrapped group of 4 elements with row size 3',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 1',
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 3
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">Test 1</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">test value 1</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
</aside>',
|
|
|
|
'description' => 'Flex wrapped group of a single element with row size 3',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 1',
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 2,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 2',
|
|
|
|
'value' => 'test value 2',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 3
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(2 / 3 * 100%);">Test 1</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 2</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(2 / 3 * 100%);">test value 1</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 2</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
</aside>',
|
|
|
|
'description' => 'Flex wrapped group of 2 + 1 with row size 3',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 1',
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 2,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 2',
|
|
|
|
'value' => 'test value 2',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 7
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(2 / 3 * 100%);">Test 1</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 2</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(2 / 3 * 100%);">test value 1</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 2</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
</aside>',
|
|
|
|
'description' => 'Flex wrapped group of 2 + 1 with row size 7',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 1',
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 2,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 2',
|
|
|
|
'value' => 'test value 2',
|
|
|
|
'span' => 2,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 3',
|
|
|
|
'value' => 'test value 3',
|
|
|
|
'span' => 2,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 3
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">Test 1</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">test value 1</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">Test 2</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">test value 2</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">Test 3</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(2 / 2 * 100%);">test value 3</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
</aside>',
|
|
|
|
'description' => 'Flex wrapped group of 2 + 2 + 2 with row size 3',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 1',
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 2',
|
|
|
|
'value' => 'test value 2',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 3',
|
|
|
|
'value' => 'test value 3',
|
|
|
|
'span' => null,
|
|
|
|
'layout' => 'default'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 4',
|
|
|
|
'value' => 'test value 4',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 5',
|
|
|
|
'value' => 'test value 5',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 6',
|
|
|
|
'value' => 'test value 6',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 3
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 1</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 2</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 1</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 2</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<div class="pi-item pi-data pi-item-spacing pi-border-color">
|
|
|
|
<h3 class="pi-data-label pi-secondary-font">Test 3</h3>
|
|
|
|
<div class="pi-data-value pi-font">test value 3</div>
|
|
|
|
</div>
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 4</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 5</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 6</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 4</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 5</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 6</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
</aside>',
|
|
|
|
'description' => 'Flex wrapped group of 1 + 1 + default + 1 + 1 + 1 with row size 3',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 1',
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 2',
|
|
|
|
'value' => 'test value 2',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 3',
|
|
|
|
'value' => 'test value 3',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 4',
|
|
|
|
'value' => 'test value 4',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 5',
|
|
|
|
'value' => 'test value 5',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 6',
|
|
|
|
'value' => 'test value 6',
|
|
|
|
'span' => null,
|
|
|
|
'layout' => 'default'
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 3
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 1</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 2</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Test 3</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 1</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 2</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">test value 3</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 4</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 5</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 4</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 5</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
<div class="pi-item pi-data pi-item-spacing pi-border-color">
|
2017-01-12 13:11:46 +00:00
|
|
|
<h3 class="pi-data-label pi-secondary-font">Test 6</h3>
|
|
|
|
<div class="pi-data-value pi-font">test value 6</div>
|
2017-01-11 09:00:21 +00:00
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</aside>',
|
|
|
|
'description' => 'Flex wrapped group of 1 + 1 + 1 + 1 + 1 + default with row size 3',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 1',
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 40,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 2',
|
|
|
|
'value' => 'test value 2',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 3',
|
|
|
|
'value' => 'test value 3',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 3
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(40 / 40 * 100%);">Test 1</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(40 / 40 * 100%);">test value 1</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 2</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 3</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 2</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 3</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
</section>
|
|
|
|
</aside>',
|
|
|
|
'description' => 'Flex wrapped group of 40 + 1 + 1 with row size 3',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 1',
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 2',
|
|
|
|
'value' => 'test value 2',
|
|
|
|
'span' => 40,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 3',
|
|
|
|
'value' => 'test value 3',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 3
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">Test 1</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">test value 1</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(40 / 40 * 100%);">Test 2</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(40 / 40 * 100%);">test value 2</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">Test 3</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">test value 3</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
</section>
|
|
|
|
</aside>',
|
|
|
|
'description' => 'Flex wrapped group of 1 + 40 + 1 with row size 3',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 1',
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 2',
|
|
|
|
'value' => 'test value 2',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'title',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'title value'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 3',
|
|
|
|
'value' => 'test value 3',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 3
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 1</h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 2</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 1</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 2</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
<h2 class="pi-item pi-item-spacing pi-title">title value</h2>
|
2017-01-12 13:11:46 +00:00
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">Test 3</h3>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 1 * 100%);">test value 3</div>
|
2017-01-12 13:11:46 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
2017-01-11 09:00:21 +00:00
|
|
|
</section>
|
|
|
|
</aside>',
|
|
|
|
'description' => 'Flex wrapped group of 1 + 1 + title + 1 with row size 3',
|
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
2017-01-12 13:14:58 +00:00
|
|
|
[
|
|
|
|
'input' => [
|
|
|
|
[
|
|
|
|
'type' => 'group',
|
|
|
|
'data' => [
|
|
|
|
'value' => [
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => null,
|
|
|
|
'value' => 'test value 1',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => null,
|
|
|
|
'value' => 'test value 2',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'title',
|
|
|
|
'data' => [
|
|
|
|
'value' => 'title value'
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => null,
|
|
|
|
'value' => 'test value 3',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'type' => 'data',
|
|
|
|
'data' => [
|
|
|
|
'label' => 'Test 4',
|
|
|
|
'value' => 'test value 4',
|
|
|
|
'span' => 1,
|
|
|
|
'layout' => null
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'layout' => null,
|
|
|
|
'collapse' => null,
|
|
|
|
'row-items' => 3
|
|
|
|
]
|
|
|
|
]
|
|
|
|
],
|
|
|
|
'output' => '<aside class="portable-infobox pi-background">
|
|
|
|
<section class="pi-item pi-group pi-border-color">
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 1</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 2</div>
|
2017-01-12 13:14:58 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
<h2 class="pi-item pi-item-spacing pi-title">title value</h2>
|
|
|
|
<section class="pi-item pi-smart-group pi-border-color">
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-head">
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);"></h3>
|
|
|
|
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Test 4</h3>
|
2017-01-12 13:14:58 +00:00
|
|
|
</section>
|
2017-01-13 08:30:53 +00:00
|
|
|
<section class="pi-smart-group-body">
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 3</div>
|
|
|
|
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">test value 4</div>
|
2017-01-12 13:14:58 +00:00
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
</aside>',
|
2017-01-12 13:15:48 +00:00
|
|
|
'description' => 'Flex wrapped group of 1 (no label) + 1 (no label) + title + 1 (no label) + 1 with row size 3',
|
2017-01-12 13:14:58 +00:00
|
|
|
'mockParams' => [ ],
|
|
|
|
'accentColor' => '',
|
|
|
|
'accentColorText' => ''
|
|
|
|
],
|
2015-04-27 14:05:31 +00:00
|
|
|
];
|
|
|
|
}
|
|
|
|
}
|