Commit 89436bda authored by Simon Welsh's avatar Simon Welsh

Add :fnd:block and :fnd:block:item

parent f2356c68
......@@ -18,6 +18,17 @@ echo <x:doctype>
<h1 class="panel">World!</h1>
</fnd:col>
</fnd:row>
<fnd:row>
<fnd:col centered="small" small={12} large={9}>
<fnd:block small-block-grid={3} medium-block-grid={4}>
<fnd:block:item><div class="panel">First item</div></fnd:block:item>
<fnd:block:item><div class="panel">Second item</div></fnd:block:item>
<fnd:block:item><div class="panel">Third item</div></fnd:block:item>
<fnd:block:item><div class="panel">Fourth item</div></fnd:block:item>
<fnd:block:item><div class="panel">Fifth item</div></fnd:block:item>
</fnd:block>
</fnd:col>
</fnd:row>
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
......
<?hh // strict
class :fnd:block extends :fnd:base {
children (:fnd:block:item)*;
attribute
:ul,
int small-block-grid = 1,
int medium-block-grid,
int large-block-grid;
protected function compose(): :ul {
$this->addBlockGrid();
return <ul>
{$this->getChildren()}
</ul>;
}
private function addBlockGrid(): void{
$small = $this->:small-block-grid;
invariant(
$small > 0 && $small < 13,
'Small block-grid size must be in the range 1-12',
);
$this->addClass('small-block-grid-' . $small);
$medium = $this->:medium-block-grid;
if ($medium !== null) {
invariant(
$medium > 0 && $medium < 13,
'Medium block-grid size must be in the range 1-12',
);
$this->addClass('medium-block-grid-' . $medium);
}
$large = $this->:large-block-grid;
if ($large !== null) {
invariant(
$large > 0 && $large < 13,
'Large block-grid size must be in the range 1-12',
);
$this->addClass('large-block-grid-' . $large);
}
}
}
<?hh // strict
class :fnd:block:item extends :fnd:base {
attribute :li;
protected function compose(): :li {
return <li>{$this->getChildren()}</li>;
}
}
<?hh // strict
class BlockTest extends FndTestBase {
public function testBlockGrid(): void {
$block = <fnd:block
small-block-grid={3}
medium-block-grid={5}
large-block-grid={1} />;
$rendered = $this->render($block);
$this->assertHasClass($rendered, 'small-block-grid-3');
$this->assertHasClass($rendered, 'medium-block-grid-5');
$this->assertHasClass($rendered, 'large-block-grid-1');
}
public function testInvalidBlockGrid(): void {
$block = <fnd:block small-block-grid={0} />;
try {
$this->render($block);
$this->fail('Rendered with invalid block grid');
} catch(InvariantException $e) {
$this->assertEquals(
'Small block-grid size must be in the range 1-12',
$e->getMessage(),
);
}
$block->setAttribute('small-block-grid', 13);
try {
$this->render($block);
$this->fail('Rendered with invalid block grid');
} catch(InvariantException $e) {
$this->assertEquals(
'Small block-grid size must be in the range 1-12',
$e->getMessage(),
);
}
$block = <fnd:block medium-block-grid={0} />;
try {
$this->render($block);
$this->fail('Rendered with invalid block grid');
} catch(InvariantException $e) {
$this->assertEquals(
'Medium block-grid size must be in the range 1-12',
$e->getMessage(),
);
}
$block->setAttribute('medium-block-grid', 13);
try {
$this->render($block);
$this->fail('Rendered with invalid block grid');
} catch(InvariantException $e) {
$this->assertEquals(
'Medium block-grid size must be in the range 1-12',
$e->getMessage(),
);
}
$block = <fnd:block large-block-grid={0} />;
try {
$this->render($block);
$this->fail('Rendered with invalid block grid');
} catch(InvariantException $e) {
$this->assertEquals(
'Large block-grid size must be in the range 1-12',
$e->getMessage(),
);
}
$block->setAttribute('large-block-grid', 13);
try {
$this->render($block);
$this->fail('Rendered with invalid block grid');
} catch(InvariantException $e) {
$this->assertEquals(
'Large block-grid size must be in the range 1-12',
$e->getMessage(),
);
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment