Skip to content

Commit

Permalink
Fix(web-twig): Blank spaces in class props
Browse files Browse the repository at this point in the history
  • Loading branch information
@janicekt
janicekt committed Sep 14, 2022
1 parent ef7de03 commit 2e6f047
Show file tree
Hide file tree
Showing 19 changed files with 49 additions and 32 deletions.
4 changes: 3 additions & 1 deletion packages/web-twig/src/Twig/PropsExtension.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,10 @@ public function renderInputProps(Environment $environment, array $props): string
*/
public function renderClassProp(Environment $environment, array $classNames): string
{
$filteredClassNames = array_values(array_filter($classNames , fn($value) => !is_null($value) && $value !== ''));

return $environment->render('@partials/classProp.twig', [
'classNames' => $classNames,
'classNames' => $filteredClassNames,
]);
}
}
2 changes: 1 addition & 1 deletion packages/web-twig/tests/ComponentTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ public function testShouldRenderComponentWithCamelCaseName(): void
$this->assertEquals(
<<<HTML
<a
class="Button Button--primary Button--medium"
class="Button Button--primary Button--medium"
href="#"
>Link Button</a>
HTML,
Expand Down
13 changes: 12 additions & 1 deletion packages/web-twig/tests/Twig/PropsExtensionTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ public function renderInputPropsDataProvider(): array
* @param array<string> $classNames
* @param array<string, mixed> $expectedRenderClass
*/
public function testShouldRenderclassProp(array $classNames, array $expectedRenderClass): void
public function testShouldRenderClassProp(array $classNames, array $expectedRenderClass): void
{
$expectedResponse = '';
$environment = m::mock(Environment::class);
Expand Down Expand Up @@ -183,6 +183,17 @@ public function renderClassNamesDataProvider(): array
'another-test-class',
],
]],
'multiple class names without empty values ' => [[
'test-class',
null,
'another-test-class',
null,
], [
'classNames' => [
'test-class',
'another-test-class',
],
]],
];
}
}
8 changes: 4 additions & 4 deletions ...s/__snapshots__/ComponentsSnapshotTest__test with data set breadcrumbsCustom.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<html><body>
<nav class="Breadcrumbs" aria-label="Breadcrumb">
<ol>
<li class="d-none d-tablet-flex"><a aria-current="false" href="#rootUrl" class="link-primary link-underlined">Root</a></li>
<li class="d-none d-tablet-flex"><a aria-current="false" href="#categoryUrl" class="link-primary link-underlined">Category</a></li>
<li class="d-tablet-none"><a href="#subcategoryUrl" class="link-primary link-underlined"></a></li>
<li class="d-none d-tablet-flex"><a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a></li>
<li class="d-none d-tablet-flex"><a aria-current="false" href="#rootUrl" class="link-primary link-underlined">Root</a></li>
<li class="d-none d-tablet-flex"><a aria-current="false" href="#categoryUrl" class="link-primary link-underlined">Category</a></li>
<li class="d-tablet-none"><a href="#subcategoryUrl" class="link-primary link-underlined"></a></li>
<li class="d-none d-tablet-flex"><a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a></li>
<li class="d-none d-tablet-flex"><a aria-current="page" href="#currentUrl" class="link-secondary">Current page</a></li>
</ol></nav>
</body></html>
8 changes: 4 additions & 4 deletions .../__snapshots__/ComponentsSnapshotTest__test with data set breadcrumbsDefault.twig__1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<nav class="Breadcrumbs" aria-label="Breadcrumb">
<ol>
<li class="d-none d-tablet-flex">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="df26744430af4aa0758c272de1191fe3" class="Icon "><path d="M9.29006 7.0545C8.90006 7.4445 8.90006 8.0745 9.29006 8.4645L13.1701 12.3445L9.29006 16.2245C8.90006 16.6145 8.90006 17.2445 9.29006 17.6345C9.68006 18.0245 10.3101 18.0245 10.7001 17.6345L15.2901 13.0445C15.6801 12.6545 15.6801 12.0245 15.2901 11.6345L10.7001 7.0445C10.3201 6.6645 9.68006 6.6645 9.29006 7.0545Z" fill="#132930"></path></svg><a aria-current="false" href="#rootUrl" class="link-primary link-underlined">Root</a>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="df26744430af4aa0758c272de1191fe3" class="Icon "><path d="M9.29006 7.0545C8.90006 7.4445 8.90006 8.0745 9.29006 8.4645L13.1701 12.3445L9.29006 16.2245C8.90006 16.6145 8.90006 17.2445 9.29006 17.6345C9.68006 18.0245 10.3101 18.0245 10.7001 17.6345L15.2901 13.0445C15.6801 12.6545 15.6801 12.0245 15.2901 11.6345L10.7001 7.0445C10.3201 6.6645 9.68006 6.6645 9.29006 7.0545Z" fill="#132930"></path></svg><a aria-current="false" href="#rootUrl" class="link-primary link-underlined">Root</a>
</li>
<li class="d-none d-tablet-flex">
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon "><use href="#df26744430af4aa0758c272de1191fe3"></use></svg><a aria-current="false" href="#categoryUrl" class="link-primary link-underlined">Category</a>
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon "><use href="#df26744430af4aa0758c272de1191fe3"></use></svg><a aria-current="false" href="#categoryUrl" class="link-primary link-underlined">Category</a>
</li>
<li class="d-tablet-none">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="bf49b4c841f6d98add4cbe87ee7f63d4" class="Icon "><path d="M14.71 7.05471C14.32 6.66471 13.69 6.66471 13.3 7.05471L8.70998 11.6447C8.31998 12.0347 8.31998 12.6647 8.70998 13.0547L13.3 17.6447C13.69 18.0347 14.32 18.0347 14.71 17.6447C15.1 17.2547 15.1 16.6247 14.71 16.2347L10.83 12.3447L14.71 8.46471C15.1 8.07471 15.09 7.43471 14.71 7.05471Z" fill="#132930"></path></svg><a href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="bf49b4c841f6d98add4cbe87ee7f63d4" class="Icon "><path d="M14.71 7.05471C14.32 6.66471 13.69 6.66471 13.3 7.05471L8.70998 11.6447C8.31998 12.0347 8.31998 12.6647 8.70998 13.0547L13.3 17.6447C13.69 18.0347 14.32 18.0347 14.71 17.6447C15.1 17.2547 15.1 16.6247 14.71 16.2347L10.83 12.3447L14.71 8.46471C15.1 8.07471 15.09 7.43471 14.71 7.05471Z" fill="#132930"></path></svg><a href="#subcategoryUrl" class="link-primary link-underlined">Back</a>
</li>
<li class="d-none d-tablet-flex">
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon "><use href="#df26744430af4aa0758c272de1191fe3"></use></svg><a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon "><use href="#df26744430af4aa0758c272de1191fe3"></use></svg><a aria-current="false" href="#subcategoryUrl" class="link-primary link-underlined">Subcategory</a>
</li>
<li class="d-none d-tablet-flex">
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon "><use href="#df26744430af4aa0758c272de1191fe3"></use></svg><a aria-current="page" href="#currentUrl" class="link-secondary">Current page</a>
Expand Down
3 changes: 3 additions & 0 deletions ...shots__/ComponentsSnapshotTest__test with data set buttonLinkDisabledDefault.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<html><body>
<a class="Button Button--primary Button--disabled Button--medium" href="#" disabled>Disabled button link</a>
</body></html>
4 changes: 2 additions & 2 deletions ..._snapshots__/ComponentsSnapshotTest__test with data set checkboxFieldDefault.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<html><body>
<label for="example" class="CheckboxField CheckboxField--error">
<label for="example" class="CheckboxField CheckboxField--error">
<input type="checkbox" id="example" name="example" class="CheckboxField__input" checked required>
<span class="CheckboxField__text">
<span class="CheckboxField__label CheckboxField__label--required"></span>
<span class="CheckboxField__label CheckboxField__label--required"></span>
</span>
</label>
</body></html>
4 changes: 2 additions & 2 deletions ...pshots__/ComponentsSnapshotTest__test with data set checkboxFieldDefaultPure.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<html><body>
<label for="example" class="CheckboxField CheckboxField--error">
<label for="example" class="CheckboxField CheckboxField--error">
<input type="checkbox" id="example" name="example" class="CheckboxField__input" required>
<span class="CheckboxField__text">
<span class="CheckboxField__label CheckboxField__label--required">some label</span>
<span class="CheckboxField__label CheckboxField__label--required">some label</span>
<span class="CheckboxField__message">validation failed</span> </span>
</label>
</body></html>
2 changes: 1 addition & 1 deletion ...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set gridDefault.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<html><body>
<div class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"> <span>col 1</span>
<div class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"> <span>col 1</span>
<span>col 2</span>
<span>col 3</span>
<span>col 4</span>
Expand Down
2 changes: 1 addition & 1 deletion ...sts/__snapshots__/ComponentsSnapshotTest__test with data set gridDefaultPure.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<html><body>
<div class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"> <span>col 1</span>
<div class="Grid Grid--cols-2 Grid--tablet--cols-3 Grid--desktop--cols-4"> <span>col 1</span>
<span>col 2</span>
<span>col 3</span>
<span>col 4</span>
Expand Down
2 changes: 1 addition & 1 deletion ...__/ComponentsSnapshotTest__test with data set gridLayoutWithResetPropDefault.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<html><body>
<div class="Grid Grid--cols-3"> <span>col 1</span>
<div class="Grid Grid--cols-3"> <span>col 1</span>
<span>col 2</span>
<span>col 3</span>
<span>col 4</span>
Expand Down
8 changes: 4 additions & 4 deletions ...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set headerFull.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<html><body>
<header class="Header Header--inverted">
<header class="Header Header--inverted">
<a href="/">
<img src="https://www.example.com/logo.png" width="65" height="24" alt="Spirit">
</a>

<div class="Header__mobileOnlyActions">
<button aria-expanded="false" class="Button Button--inverted Button--medium Button--square" type="button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="6eaf1a71b2f68249cc6fdca0ecd5752d" class="Icon ">
<button aria-expanded="false" class="Button Button--inverted Button--medium Button--square" type="button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="6eaf1a71b2f68249cc6fdca0ecd5752d" class="Icon ">
<path d="M4 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H4C3.45 6 3 6.45 3 7Z" fill="#132930"></path>
</svg>

Expand Down Expand Up @@ -61,8 +61,8 @@
</div>

<div class="Header__actions Header__actions--secondary">
<a class="Button Button--primary Button--medium" href="/">Login</a>
<a class="Button Button--inverted Button--medium" href="/">Login for Companies</a>
<a class="Button Button--primary Button--medium" href="/">Login</a>
<a class="Button Button--inverted Button--medium" href="/">Login for Companies</a>
</div>
</div>
</nav>
Expand Down
2 changes: 1 addition & 1 deletion ..._snapshots__/ComponentsSnapshotTest__test with data set headerSimpleInverted.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<html><body>
<header class="Header Header--inverted">
<header class="Header Header--inverted">
<a href="/">
<img src="https://www.example.com/logo.png" width="65" height="24" alt="Spirit">
</a>
Expand Down
2 changes: 1 addition & 1 deletion ...g/tests/__snapshots__/ComponentsSnapshotTest__test with data set linkDefault.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<html><body>
<a href="/" class="link-primary"> Example link
</a>
<a href="/" class="link-secondary link-underlined"> Example link
<a href="/" class="link-secondary link-underlined"> Example link
</a>
<a href="/" class="link-primary link-disabled link-underlined"> Example link
</a>
Expand Down
4 changes: 2 additions & 2 deletions .../tests/__snapshots__/ComponentsSnapshotTest__test with data set modalDefault.twig__1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="Modal__content">
<div class="Modal__dialog">
<div class="Modal__header">
<button aria-controls="modal-example" aria-expanded="false" data-dismiss="modal" data-target="#modal-example" class="Button Button--tertiary Button--medium Button--square" type="button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="1717b24b944c2906a0fe418d63414994" class="Icon " aria-hidden="true">
<button aria-controls="modal-example" aria-expanded="false" data-dismiss="modal" data-target="#modal-example" class="Button Button--tertiary Button--medium Button--square" type="button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="1717b24b944c2906a0fe418d63414994" class="Icon " aria-hidden="true">
<path d="M18.3002 5.71022C17.9102 5.32022 17.2802 5.32022 16.8902 5.71022L12.0002 10.5902L7.11022 5.70021C6.72022 5.31021 6.09021 5.31021 5.70021 5.70021C5.31021 6.09021 5.31021 6.72022 5.70021 7.11022L10.5902 12.0002L5.70021 16.8902C5.31021 17.2802 5.31021 17.9102 5.70021 18.3002C6.09021 18.6902 6.72022 18.6902 7.11022 18.3002L12.0002 13.4102L16.8902 18.3002C17.2802 18.6902 17.9102 18.6902 18.3002 18.3002C18.6902 17.9102 18.6902 17.2802 18.3002 16.8902L13.4102 12.0002L18.3002 7.11022C18.6802 6.73022 18.6802 6.09022 18.3002 5.71022Z" fill="#132930"></path>
</svg>

Expand All @@ -20,7 +20,7 @@
<div class="Modal__content">
<div class="Modal__dialog">
<div class="Modal__header">
<button aria-controls="modal-example-dismiss" aria-expanded="false" data-dismiss="modal" data-target="#modal-example-dismiss" class="Button Button--tertiary Button--medium Button--square" type="button"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon " aria-hidden="true"><use href="#1717b24b944c2906a0fe418d63414994"></use></svg>
<button aria-controls="modal-example-dismiss" aria-expanded="false" data-dismiss="modal" data-target="#modal-example-dismiss" class="Button Button--tertiary Button--medium Button--square" type="button"> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" class="Icon " aria-hidden="true"><use href="#1717b24b944c2906a0fe418d63414994"></use></svg>

<span class="accessibility-hidden">Dismiss</span>
</button>
Expand Down
4 changes: 2 additions & 2 deletions ..._snapshots__/ComponentsSnapshotTest__test with data set passwordFieldDefault.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<html><body>
<div class="TextField TextField--error">
<label for="example2" class="TextField__label TextField__label--required">
<div class="TextField TextField--error">
<label for="example2" class="TextField__label TextField__label--required">
Password field
</label>
<input type="password" id="example2" name="example2" class="TextField__input" required>
Expand Down
4 changes: 2 additions & 2 deletions ...ts/__snapshots__/ComponentsSnapshotTest__test with data set textFieldDefault.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<html><body>
<div class="TextField TextField--error">
<label for="example" class="TextField__label TextField__label--required">
<div class="TextField TextField--error">
<label for="example" class="TextField__label TextField__label--required">
Text field
</label>
<input minlength="6" type="text" id="example" name="example" class="TextField__input" required>
Expand Down
4 changes: 2 additions & 2 deletions ..._snapshots__/ComponentsSnapshotTest__test with data set textFieldDefaultPure.twig__1.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<html><body>
<div class="TextField TextField--error">
<label for="example" class="TextField__label TextField__label--required">
<div class="TextField TextField--error">
<label for="example" class="TextField__label TextField__label--required">

</label>
<input type="text" id="example" name="example" class="TextField__input" required>
Expand Down
1 change: 1 addition & 0 deletions packages/web-twig/tests/components-fixtures/buttonLinkDisabledDefault.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<ButtonLink href="#" color="primary" isDisabled>Disabled button link</ButtonLink>

0 comments on commit 2e6f047

Please sign in to comment.