Skip to content

[FEATURE] add variant toggle button #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lukasniestroj wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[FEATURE] add variant toggle button #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions Classes/Controller/StyleguideController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,14 +69,16 @@ public function __construct(
*
* @return void
*/
public function listAction()
public function listAction(array $arguments = [])
{
$variants = $arguments['variants'] ?? '0';
$allComponents = $this->componentRepository->findWithFixtures();
$componentPackages = $this->groupComponentsByPackage($allComponents);

$this->view->assignMultiple([
'navigation' => $allComponents,
'packages' => $componentPackages
'packages' => $componentPackages,
'showAllVariants' => $variants,
]);
}

Expand All @@ -89,6 +91,7 @@ public function showAction(array $arguments = [])
{
$component = $arguments['component'] ?? '';
$fixture = $arguments['fixture'] ?? 'default';
$variants = $arguments['variants'] ?? '0';

// Sanitize user input
$component = $this->sanitizeComponentIdentifier($component);
Expand Down Expand Up @@ -122,6 +125,7 @@ public function showAction(array $arguments = [])
'navigation' => $this->componentRepository->findWithFixtures(),
'activeComponent' => $component,
'activeFixture' => $fixture,
'showAllVariants' => $variants,
'showQualityIssues' => $showQualityIssues,
'qualityIssues' => $qualityIssues
]);
Expand Down
3 changes: 3 additions & 0 deletions Configuration/Yaml/FluidStyleguide.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ FluidStyleguide:
# uses fluid-components-linter to provide hints to potential problems
CodeQuality: true

# Display all available Variants of the component
VariantsToggle: true

# Markup that will be wrapped around the component output in the styleguide
# This can be overwritten per component fixture by specifying
# "styleguideComponentContext" in the fixture data
Expand Down
6 changes: 4 additions & 2 deletions Resources/Private/Components/Atom/StyleguideRefreshIFrame/StyleguideRefreshIFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { findAll } from '../../../Javascript/Utils';
const button = document.getElementById('styleguideRefreshIframe_button')
const iframe = document.getElementById('componentIframe')

if (button != null) {
button.addEventListener('click', function () {
iframe.contentWindow.location.reload(true)
findAll(`iframe[name="componentIframe"]`).forEach(iframe => {
iframe.contentWindow.location.reload(true)
})
})
}

11 changes: 11 additions & 0 deletions Resources/Private/Components/Atom/VariantsToggleNavigation/VariantsToggleNavigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<fc:component>
<fc:param name="listView" type="boolean" optional="1" default="0"/>
<fc:param name="checked" type="boolean" optional="1" default="0"/>

<fc:renderer>
<div data-component="VariantsToggleNavigation" data-list-view="{listView}" id="variantsToggleNavigation_button" class="variantsToggleNavigation {class}">
<input type="checkbox" id="variantsToggleNavigation_checkbox" {f:if(condition: checked, then: 'checked')}>
<label for="variantsToggleNavigation_checkbox">Display all Variants</label>
</div>
</fc:renderer>
</fc:component>
14 changes: 14 additions & 0 deletions Resources/Private/Components/Atom/VariantsToggleNavigation/VariantsToggleNavigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import {register, find} from '../../../Javascript/Utils';

const VariantsToggleNavigation = el => {
if (el) {
const checkbox = find('input[type="checkbox"]', el);
checkbox.addEventListener('change', event => {
let url = new URL(window.location.href);
url.searchParams.set('variants', event.target.checked ? 1 : 0);
window.location = url.toString();
});
}
}

register('VariantsToggleNavigation', VariantsToggleNavigation);
40 changes: 40 additions & 0 deletions Resources/Private/Components/Atom/VariantsToggleNavigation/VariantsToggleNavigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
.variantsToggleNavigation {
font-size: 13px;
font-family: $styleguide-font;
color: $white;

display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;

label {
display: inline-block;
white-space: nowrap;
cursor: pointer;
}

input {
width: 2em;
height: 1em;
vertical-align: top;
margin-right: .5em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
background-position: left center;
background-size: contain;
background-color: #fff;
background-repeat: no-repeat;
border-radius: 2em;
border: 1px solid rgba(0,0,0,.25);
transition: background-position .15s ease-in-out;
appearance: none;
color-adjust: exact;

&:checked {
background-color: $highlight;
border-color: $highlight;
background-position: right center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
}
}
1 change: 1 addition & 0 deletions Resources/Private/Javascript/Styleguide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import '../Components/Organism/StyleguideToolbar/StyleguideToolbar';
import '../Components/Atom/StyleguideScrollTop/StyleguideScrollTop';
import '../Components/Atom/ViewportNavigation/ViewportNavigation';
import '../Components/Atom/LanguageNavigation/LanguageNavigation';
import '../Components/Atom/VariantsToggleNavigation/VariantsToggleNavigation';
import '../Components/Molecule/EditFixtures/EditFixtures';

iFrameResize({ heightCalculationMethod: 'taggedElement', warningTimeout: 0 }, '.iframeResize');
7 changes: 7 additions & 0 deletions Resources/Private/Scss/Main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@import '../Components/Atom/StyleguideScrollTop/StyleguideScrollTop';
@import '../Components/Atom/ViewportNavigation/ViewportNavigation';
@import '../Components/Atom/LanguageNavigation/LanguageNavigation';
@import '../Components/Atom/VariantsToggleNavigation/VariantsToggleNavigation';
@import '../Components/Molecule/EditFixtures/EditFixtures';
@import '../Components/Organism/StyleguideToolbar/StyleguideToolbar';

Expand All @@ -27,3 +28,9 @@ body {
pre {
margin: 0 !important;
}

.fluidStyleguideFixtureName {
font-size: 18px;
font-family: $styleguide-font;
color: $dark-grey-0;
}
16 changes: 16 additions & 0 deletions Resources/Private/Scss/StyleguideShow.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,22 @@
right: 0;
bottom: 16px;

&.showAllVariants {
position: relative;
inset: unset;

width: 100%;
padding-top: 55px;
margin-bottom: 2rem;
padding-bottom: 2rem;

& ~ .showAllVariants {
padding-top: 0;
margin-top: 2rem;
border-top: 2px solid;
}
}

.fluidStyleguideComponent {
height: 100%;
width: 100%;
Expand Down
59 changes: 45 additions & 14 deletions Resources/Private/Templates/Styleguide/List.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
<fsc:Atom.languageNavigation listView="1" languages="{styleguideConfiguration.languages}" />
</f:if>
</f:comment>
<f:if condition="{styleguideConfiguration.Features.VariantsToggle}">
<fsc:Atom.variantsToggleNavigation listView="1" checked="{showAllVariants}"/>
</f:if>
<f:if condition="{styleguideConfiguration.Features.ResponsiveBreakpoints}">
<fsc:Atom.viewportNavigation listView="1" viewPorts="{styleguideConfiguration.responsiveBreakpoints}" />
</f:if>
Expand All @@ -30,21 +33,49 @@ <h1 class="fluidStyleguideTitle">{styleguideConfiguration.brandingTitle}</h1>
<h2 class="fluidStyleguidePackageName">Package: {namespace}</h2>
<div class="fluidStyleguideComponent-items">
<f:for each="{components}" as="component">
<f:variable name="iframeUri" value="{fsv:uri.styleguide(
action: 'component',
arguments: {component: component.name.identifier}
)}" />
<div class="fluidStyleguideComponentVariants">
<div class="fluidStyleguideComponentExample">
<h3 class="fluidStyleguideComponentName">{component.name.displayName}</h3>
<div class="fluidStyleguideListIframeWrapper">
<iframe class="fluidStyleguideComponent iframeResize" src="{iframeUri}" loading="lazy"></iframe>
<f:if condition="{showAllVariants}">
<f:then>
<div class="fluidStyleguideComponentVariants">
<div class="fluidStyleguideComponentExample">
<h3 class="fluidStyleguideComponentName">{component.name.displayName}</h3>
<f:for each="{component.fixtures}" as="fixture">
<f:variable name="iframeUri" value="{fsv:uri.styleguide(
action: 'component',
arguments: {
component: component.name.identifier,
fixture: fixture.name
}
)}" />
<div class="fluidStyleguideListIframeWrapper ">
<h4 class="fluidStyleguideFixtureName">{fixture.name}</h4>
<iframe class="fluidStyleguideComponent iframeResize" src="{iframeUri}" loading="lazy"></iframe>
</div>
<a style="margin-bottom: 2rem" href="{fsv:uri.styleguide(action: 'show', arguments: {component: component.name.identifier, fixture: fixture.name})}" class="fluidStyleguideBtn">
<span>Show</span>
</a>
</f:for>
</div>
</div>
</f:then>
<f:else>
<f:variable name="iframeUri" value="{fsv:uri.styleguide(
action: 'component',
arguments: {component: component.name.identifier}
)}" />
<div class="fluidStyleguideComponentVariants">
<div class="fluidStyleguideComponentExample">
<h3 class="fluidStyleguideComponentName">{component.name.displayName}</h3>
<div class="fluidStyleguideListIframeWrapper">
<iframe class="fluidStyleguideComponent iframeResize" src="{iframeUri}" loading="lazy"></iframe>
</div>
<a href="{fsv:uri.styleguide(action: 'show', arguments: {component: component.name.identifier, fixture: fixture.name})}" class="fluidStyleguideBtn">
<span>Show</span>
</a>
</div>
</div>
<a href="{fsv:uri.styleguide(action: 'show', arguments: {component: component.name.identifier})}" class="fluidStyleguideBtn">
<span>Show</span>
</a>
</div>
</div>
</f:else>
</f:if>

</f:for>
</div>
</div>
Expand Down
34 changes: 26 additions & 8 deletions Resources/Private/Templates/Styleguide/Show.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,14 @@
</fsc:Atom.StyleguideSelect>
</div>


<div class="actions">
<fsc:atom.StyleguideRefreshIFrame />
<f:if condition="{styleguideConfiguration.Features.Languages}">
<fsc:Atom.languageNavigation languages="{styleguideConfiguration.languages}" />
</f:if>
<f:if condition="{styleguideConfiguration.Features.VariantsToggle}">
<fsc:Atom.variantsToggleNavigation checked="{showAllVariants}"/>
</f:if>
<f:if condition="{styleguideConfiguration.Features.ResponsiveBreakpoints}">
<fsc:Atom.viewportNavigation viewPorts="{styleguideConfiguration.responsiveBreakpoints}" />
</f:if>
Expand All @@ -37,14 +39,30 @@
</f:section>

<f:section name="Content">
<f:variable name="iframeUri" value="{fsv:uri.styleguide(
action: 'component',
arguments: {component: activeComponent.name.identifier, fixture: activeFixture}
)}" />
<f:if condition="{showAllVariants}">
<f:then>
<f:for each="{activeComponent.fixtures}" as="fixture">
<f:variable name="iframeUri" value="{fsv:uri.styleguide(
action: 'component',
arguments: { component: activeComponent.name.identifier, fixture: fixture.name}
)}" />
<div class="fluidStyleguideShow showAllVariants">
<h4 class="fluidStyleguideFixtureName">{fixture.name}</h4>
<iframe class="fluidStyleguideComponent iframeResize" name="componentIframe" src="{iframeUri}" loading="lazy"></iframe>
</div>
</f:for>
</f:then>
<f:else>
<f:variable name="iframeUri" value="{fsv:uri.styleguide(
action: 'component',
arguments: {component: activeComponent.name.identifier, fixture: activeFixture}
)}" />

<div class="fluidStyleguideShow">
<iframe class="fluidStyleguideComponent" name="componentIframe" id="componentIframe" src="{iframeUri}" loading="lazy"></iframe>
</div>
<div class="fluidStyleguideShow">
<iframe class="fluidStyleguideComponent" name="componentIframe" id="componentIframe" src="{iframeUri}" loading="lazy"></iframe>
</div>
</f:else>
</f:if>

<fsc:organism.styleguideToolbar
iframeUri="{iframeUri}"
Expand Down
2 changes: 1 addition & 1 deletion Resources/Public/Css/Styleguide.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/Public/Css/Styleguide.min.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/Public/Javascript/Styleguide.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion Resources/Public/Javascript/Styleguide.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.