Skip to content

Commit

Permalink
Merge pull request #274 from mobi/chore_theme_slim_docs_accordion
Browse files Browse the repository at this point in the history 
[Chore] Theme & Slim Accordion Documentation
  • Loading branch information
@grahamhency
grahamhency authored Oct 14, 2019
2 parents cb31eba + 35b7a8e commit 94fa1f0
Show file tree
Hide file tree
Showing 14 changed files with 496 additions and 400 deletions.
1 change: 0 additions & 1 deletion projects/go-style-guide/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export class AppComponent {
]},
{ route: 'ui-kit', routeIcon: 'widgets', routeTitle: 'Components', subRoutes: [
{ route: 'ui-kit/accordion', routeTitle: 'Accordion' },
{ route: 'ui-kit/accordion-panel', routeTitle: 'Accordion Panel' },
{ route: 'ui-kit/action-sheet', routeTitle: 'Action Sheet' },
{ route: 'ui-kit/badge', routeTitle: 'Badge' },
{ route: 'ui-kit/button', routeTitle: 'Button' },
Expand Down
175 changes: 1 addition & 174 deletions ...yle-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,174 +1 @@
<header class="go-page-title">
<h1 class="go-heading-3">{{ pageTitle }}</h1>
</header>

<section class="go-container">
<go-card [showHeader]="false" class="go-column go-column--100">
<div go-card-content>
<!-- Intro -->
<h1 class="go-heading-5">Usage</h1>
<p class="go-body-copy">The Go Accordion Component should be used when multiple sets of data need to be rendered, but vertical space is a concern.</p>

<p class="go-body-copy">
The <code class="code-block--inline">go-accordion</code> element must be accompanied by
<code class="code-block--inline">go-accordion-panel</code> children.
See <a [routerLink]="['/ui-kit/accordion-panel']">Accordion Panel</a> for details.
</p>

<!-- Bindings -->
<h1 class="go-heading-5">Bindings</h1>
<code [highlight]="componentBindings"></code>

<!-- expandAll -->
<h2 class="go-heading-6">expandAll</h2>
<p class="go-body-copy">
<code class="code-block--inline">expandAll</code>
will ensure each panel in the accordion is expanded on first render.
<code class="code-block--inline">expandAll</code> will also override
<code class="code-block--inline">multiExpand</code> and set it to true.
</p>

<!-- multiExpand -->
<h2 class="go-heading-6">multiExpand</h2>
<p class="go-body-copy">
<code class="code-block--inline">multiExpand</code>
will allow for multiple panels to be expanded at any given time.
</p>

<!-- showIcons -->
<h2 class="go-heading-6">showIcons</h2>
<p class="go-body-copy">
This will enable each panel to have an icon shown to the left of the heading.
</p>
<caption>
Note: even if the <code class="code-block--inline">icon</code> binding is passed to an
<code class="code-block--inline">accordion-panel</code>, it will not be displayed unless
<code class="code-block--inline">showIcons</code> is set to <code class="code-block--inline">true</code>.
This is to encourage a consistent UI. If one <code class="code-block--inline">accordion-panel</code>
has an icon, they all should.
</caption>

<!-- theme -->
<!-- <h6>theme</h6>
<code [highlight]="themeOptions"></code>
<p class="go-body-copy">
This will set the appearance of the <code class="code-block--inline">accordion</code>. <code class="code-block--inline">light</code>
is the default <code class="code-block--inline">theme</code> and should be used in most places. The only time the
<code class="code-block--inline">dark</code> theme should be used is when the accordion
lives inside a UI element that has a dark themed background by default. (ex: off-canvas)
</p> -->
</div>
</go-card>

<go-card class="go-column go-column--100">
<header go-card-header>
<h1 class="go-heading-5">Default</h1>
</header>
<div go-card-content>
<div class="go-container">
<div class="go-column go-column--50">
<h2 class="go-heading-6">Code</h2>
<code [highlight]="defaultExample"></code>
</div>
<div class="go-column go-column--50">
<h2 class="go-heading-6">View</h2>
<go-accordion>
<go-accordion-panel heading="Test 1" [expanded]="true">
This is some content for <b>Test 1</b>.
</go-accordion-panel>
<go-accordion-panel heading="Test 2">
This is a second thing.
</go-accordion-panel>
<go-accordion-panel heading="Test 3">
This is a third thing.
</go-accordion-panel>
</go-accordion>
</div>
</div>
</div>
</go-card>

<go-card class="go-column go-column--100">
<header go-card-header>
<h1 class="go-heading-5">Expand All</h1>
</header>
<div go-card-content>
<div class="go-container">
<div class="go-column go-column--50">
<h2 class="go-heading-6">Code</h2>
<code [highlight]="expandAllExample"></code>
</div>
<div class="go-column go-column--50">
<h2 class="go-heading-6">View</h2>
<go-accordion [expandAll]="true">
<go-accordion-panel heading="Test 1">
This is some content for <b>Test 1</b>.
</go-accordion-panel>
<go-accordion-panel heading="Test 2">
This is a second thing.
</go-accordion-panel>
<go-accordion-panel heading="Test 3">
This is a third thing.
</go-accordion-panel>
</go-accordion>
</div>
</div>
</div>
</go-card>

<go-card class="go-column go-column--100">
<header go-card-header>
<h1 class="go-heading-5">Multiple Expansion</h1>
</header>
<div go-card-content>
<div class="go-container">
<div class="go-column go-column--50">
<h2 class="go-heading-6">Code</h2>
<code [highlight]="multiExpandExample"></code>
</div>
<div class="go-column go-column--50">
<h2 class="go-heading-6">View</h2>
<go-accordion [multiExpand]="true">
<go-accordion-panel heading="Test 1" [expanded]="true">
This is some content for <b>Test 1</b>.
</go-accordion-panel>
<go-accordion-panel heading="Test 2" [expanded]="true">
This is a second thing.
</go-accordion-panel>
<go-accordion-panel heading="Test 3">
This is a third thing.
</go-accordion-panel>
</go-accordion>
</div>
</div>
</div>
</go-card>

<go-card class="go-column go-column--100">
<header go-card-header>
<h1 class="go-heading-5">With Icons</h1>
</header>
<div go-card-content>
<div class="go-container">
<div class="go-column go-column--50">
<h2 class="go-heading-6">Code</h2>
<code [highlight]="showIconsExample"></code>
</div>
<div class="go-column go-column--50">
<h2 class="go-heading-6">View</h2>
<go-accordion [showIcons]="true">
<go-accordion-panel heading="Test 1" icon="home" [expanded]="true">
This is some content for <b>Test 1</b>.
</go-accordion-panel>
<go-accordion-panel heading="Test 2" icon="settings">
This is a second thing.
</go-accordion-panel>
<go-accordion-panel heading="Test 3" icon="landscape">
This is a third thing.
</go-accordion-panel>
</go-accordion>
</div>
</div>
</div>
</go-card>
</section>
<app-sub-nav [menuItems]="menuItems"></app-sub-nav>
89 changes: 12 additions & 77 deletions ...style-guide/src/app/features/ui-kit/components/accordion-docs/accordion-docs.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,17 @@
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { NavGroup } from 'projects/go-lib/src/public_api';

@Component({
templateUrl: './accordion-docs.component.html'
})
export class AccordionDocsComponent implements OnInit {

pageTitle: String;

defaultExample: string = `
<go-accordion>
<go-accordion-panel heading="Test 1" [expanded]="true">
This is some content for Test 1.
</go-accordion-panel>
<go-accordion-panel heading="Test 2">
This is a second thing.
</go-accordion-panel>
<go-accordion-panel heading="Test 3">
This is a third thing.
</go-accordion-panel>
</go-accordion>
`;

expandAllExample: string = `
<go-accordion [expandAll]="true">
<go-accordion-panel heading="Test 1">
This is some content for Test 1.
</go-accordion-panel>
<go-accordion-panel heading="Test 2">
This is a second thing.
</go-accordion-panel>
<go-accordion-panel heading="Test 3">
This is a third thing.
</go-accordion-panel>
</go-accordion>
`;

multiExpandExample: string = `
<go-accordion [multiExpand]="true">
<go-accordion-panel heading="Test 1" [expanded]="true">
This is some content for Test 1.
</go-accordion-panel>
<go-accordion-panel heading="Test 2" [expanded]="true">
This is a second thing.
</go-accordion-panel>
<go-accordion-panel heading="Test 3">
This is a third thing.
</go-accordion-panel>
</go-accordion>
`;

showIconsExample: string = `
<go-accordion [showIcons]="true">
<go-accordion-panel heading="Test 1" icon="home" [expanded]="true">
This is some content for Test 1.
</go-accordion-panel>
<go-accordion-panel heading="Test 2" icon="settings">
This is a second thing.
</go-accordion-panel>
<go-accordion-panel heading="Test 3" icon="landscape">
This is a third thing.
</go-accordion-panel>
</go-accordion>
`;

componentBindings: string = `
@Input() expandAll: boolean = false;
@Input() multiExpand: boolean = false;
@Input() showIcons: boolean = false;
@Input() theme: string = 'light';
`;

themeOptions: string = `
// valid options
- 'light'
- 'dark'
`;

ngOnInit(): void {
this.pageTitle = 'Accordion';
}
export class AccordionDocsComponent {

menuItems: Array<NavGroup> = [
{
routeTitle: 'Accordion', subRoutes: [
{ route: './', routeTitle: 'Overview' },
{ route: './panel', routeTitle: 'Panel' }
]
}
];
}
Loading

0 comments on commit 94fa1f0

Please sign in to comment.