-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #908 from mobi/dev
v1.15.1
- Loading branch information
Showing
17 changed files
with
421 additions
and
150 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
projects/go-lib/src/lib/components/go-badge/go-badge.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 6 additions & 0 deletions
6
projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <span class="go-pill-badge-container"> | ||
| <ng-content></ng-content> | ||
| <span class="go-pill-badge" [ngClass]="badgeStyles"> | ||
| {{ badgeData | uppercase }} | ||
| </span> | ||
| </span> |
30 changes: 30 additions & 0 deletions
30
projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| @import '../../../../styles/variables'; | ||
| @import '../../../../styles/mixins'; | ||
|
|
||
| .go-pill-badge-container { | ||
| display: inline-flex; | ||
| } | ||
|
|
||
| .go-pill-badge { | ||
| border-radius: .75rem; | ||
| font-size: 10px; | ||
| font-weight: 500; | ||
| margin-bottom: 0.5rem; | ||
| margin-right: 0.5rem; | ||
| padding: 6px 8px; | ||
|
|
||
| &--info { | ||
| border: 1px solid $ui-color-neutral; | ||
| color: $ui-color-neutral; | ||
| } | ||
|
|
||
| &--success { | ||
| border: 1px solid $ui-color-positive; | ||
| color: $ui-color-positive; | ||
| } | ||
|
|
||
| &--error { | ||
| border: 1px solid $ui-color-negative; | ||
| color: $ui-color-negative; | ||
| } | ||
| } |
54 changes: 54 additions & 0 deletions
54
projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { async, ComponentFixture, TestBed } from "@angular/core/testing"; | ||
|
|
||
| import { GoPillBadgeComponent } from "./go-pill-badge.component"; | ||
|
|
||
| describe("GoPillBadgeComponent", () => { | ||
| let component: GoPillBadgeComponent; | ||
| let fixture: ComponentFixture<GoPillBadgeComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [GoPillBadgeComponent], | ||
| }).compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(GoPillBadgeComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it("should create", () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
|
|
||
| describe("badgeClasses()", () => { | ||
| beforeEach(() => { | ||
| component.badgeStyles = {}; | ||
| }); | ||
|
|
||
| it("returns an object that sets go-pill-badge--success to true based on type", () => { | ||
| expect(component.badgeStyles["go-pill-badge--success"]).toBeFalsy(); | ||
|
|
||
| component.type = "success"; | ||
| component.ngOnChanges(); | ||
| expect(component.badgeStyles["go-pill-badge--success"]).toBe(true); | ||
| }); | ||
|
|
||
| it("returns an object that set go-pill-badge--error to true based on type", () => { | ||
| expect(component.badgeStyles["go-pill-badge--error"]).toBeFalsy(); | ||
|
|
||
| component.type = "error"; | ||
| component.ngOnChanges(); | ||
| expect(component.badgeStyles["go-pill-badge--error"]).toBe(true); | ||
| }); | ||
|
|
||
| it("returns an object that set go-pill-badge--info to true based on type", () => { | ||
| expect(component.badgeStyles["go-pill-badge--info"]).toBeFalsy(); | ||
|
|
||
| component.type = "info"; | ||
| component.ngOnChanges(); | ||
| expect(component.badgeStyles["go-pill-badge--info"]).toBe(true); | ||
| }); | ||
| }); | ||
| }); |
25 changes: 25 additions & 0 deletions
25
projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { Component, Input, OnChanges } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'go-pill-badge', | ||
| templateUrl: './go-pill-badge.component.html', | ||
| styleUrls: ['./go-pill-badge.component.scss'], | ||
| }) | ||
| export class GoPillBadgeComponent implements OnChanges { | ||
| badgeStyles: object; | ||
|
|
||
| @Input() badgeData: string; | ||
| @Input() type: string = 'info'; | ||
|
|
||
| ngOnChanges(): void { | ||
| this.badgeStyles = this.badgeClasses(); | ||
| } | ||
|
|
||
| badgeClasses(): object { | ||
| return { | ||
| 'go-pill-badge--success': this.type === 'success', | ||
| 'go-pill-badge--error': this.type === 'error', | ||
| 'go-pill-badge--info': this.type === 'info', | ||
| }; | ||
| } | ||
| } |
10 changes: 10 additions & 0 deletions
10
projects/go-lib/src/lib/components/go-pill-badge/go-pill-badge.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { GoPillBadgeComponent } from './go-pill-badge.component'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [GoPillBadgeComponent], | ||
| imports: [CommonModule], | ||
| exports: [GoPillBadgeComponent], | ||
| }) | ||
| export class GoBadgePillModule {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
140 changes: 1 addition & 139 deletions
140
...ts/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,139 +1 @@ | ||
| <header class="go-page-title"> | ||
| <h1 class="go-heading-1">{{ pageTitle }}</h1> | ||
| <a | ||
| [href]="linkToSource" | ||
| target="_blank"> | ||
| <go-button buttonVariant="neutral"> View on GitHub </go-button> | ||
| </a> | ||
| </header> | ||
|
|
||
| <section class="go-container"> | ||
| <go-card class="go-column go-column--100" id="usage"> | ||
| <ng-container go-card-header> | ||
| <h2 class="go-heading-2 go-heading--no-wrap">Usage</h2> | ||
| <go-copy cardId="usage" goCopyCardLink></go-copy> | ||
| </ng-container> | ||
| <ng-container class="go-container" go-card-content> | ||
|
|
||
| <div class="go-column go-column--100"> | ||
| <!-- Intro --> | ||
| <p class="go-body-copy"> | ||
| The <code class="code-block--inline"><go-badge></code> | ||
| component should be used for times when we want to show a short notification | ||
| to a user over an icon for more information. A good example of this would be | ||
| the number of notifications a user has over an icon that goes to their | ||
| notifications. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="go-column go-column--100"> | ||
| <!-- Bindings --> | ||
| <h3 class="go-heading-3">Bindings</h3> | ||
| <code [highlight]="componentBindings"></code> | ||
| </div> | ||
|
|
||
| <div class="go-column go-column--100"> | ||
| <h4 class="go-heading-4">badgeData</h4> | ||
| <p class="go-body-copy"> | ||
| This is the text or data that we want to show up inside of the badge | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="go-column go-column--100"> | ||
| <h4 class="go-heading-4">badgeColor</h4> | ||
| <p class="go-body-copy"> | ||
| The color can be one of three things <code class="code-block--inline">neutral</code>, | ||
| <code class="code-block--inline">positive</code> or <code class="code-block--inline">negative</code>. | ||
| These will denote what type of badge it is whether it's a good thing, bad thing or just information. The badgeColor | ||
| defaults to `neutral` | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="go-column go-column--100 go-column--no-padding"> | ||
| <h4 class="go-heading-4">displayData</h4> | ||
| <p class="go-body-copy"> | ||
| This can be used to override whether the information inside of the badge shows up or not. | ||
| Setting this to false will cause the badge to just be an empty circle without displaying | ||
| the `badgeData`. | ||
| </p> | ||
| </div> | ||
|
|
||
| </ng-container> | ||
| </go-card> | ||
|
|
||
| <go-card class="go-column go-column--100" id="basic-example"> | ||
| <ng-container go-card-header> | ||
| <h2 class="go-heading-2 go-heading--no-wrap">Basic Example</h2> | ||
| <go-copy cardId="basic-example" goCopyCardLink></go-copy> | ||
| </ng-container> | ||
| <ng-container go-card-content> | ||
| <p class="go-body-copy"> | ||
| The badge uses content projection to apply itself to an inline element inside of it. You | ||
| can apply it to any element by wrapping the element in the <code class="code-block--inline">go-badge</code> | ||
| </p> | ||
|
|
||
| <h3 class="go-heading-3">Icon</h3> | ||
| <section class="go-container"> | ||
| <div class="go-column go-column--50 go-column--no-padding"> | ||
| <code [highlight]="iconBadge"></code> | ||
| </div> | ||
| <div class="go-column go-column--50 go-column--no-padding"> | ||
| <go-badge badgeData="12"> | ||
| <go-icon icon="notifications"></go-icon> | ||
| </go-badge> | ||
| </div> | ||
| </section> | ||
| </ng-container> | ||
| </go-card> | ||
|
|
||
| <go-card class="go-column go-column--100" id="badge-color"> | ||
| <ng-container go-card-header> | ||
| <h2 class="go-heading-2 go-heading--no-wrap">Badge Color</h2> | ||
| <go-copy cardId="badge-color" goCopyCardLink></go-copy> | ||
| </ng-container> | ||
| <ng-container go-card-content> | ||
| <h3 class="go-heading-3">Positive</h3> | ||
| <section class="go-container"> | ||
| <div class="go-column go-column--50"> | ||
| <code [highlight]="iconBadgePositive"></code> | ||
| </div> | ||
| <div class="go-column go-column--50"> | ||
| <go-badge badgeData="12" badgeColor="positive"> | ||
| <go-icon icon="notifications"></go-icon> | ||
| </go-badge> | ||
| </div> | ||
| </section> | ||
|
|
||
| <h3 class="go-heading-3">Negative</h3> | ||
| <section class="go-container"> | ||
| <div class="go-column go-column--50 go-column--no-padding"> | ||
| <code [highlight]="iconBadgeNegative"></code> | ||
| </div> | ||
| <div class="go-column go-column--50 go-column--no-padding"> | ||
| <go-badge badgeData="12" badgeColor="negative"> | ||
| <go-icon icon="notifications"></go-icon> | ||
| </go-badge> | ||
| </div> | ||
| </section> | ||
| </ng-container> | ||
| </go-card> | ||
|
|
||
| <go-card class="go-column go-column--100" id="display-data"> | ||
| <ng-container go-card-header> | ||
| <h2 class="go-heading-2 go-heading--no-wrap">Display Data</h2> | ||
| <go-copy cardId="display-data" goCopyCardLink></go-copy> | ||
| </ng-container> | ||
| <ng-container go-card-content> | ||
| <section class="go-container"> | ||
| <div class="go-column go-column--75 go-column--no-padding"> | ||
| <code [highlight]="iconBadgeDisplay"></code> | ||
| </div> | ||
| <div class="go-column go-column--25 go-column--no-padding"> | ||
| <go-badge badgeData="really long text that we want to hide" [displayData]="false"> | ||
| <go-icon icon="notifications"></go-icon> | ||
| </go-badge> | ||
| </div> | ||
| </section> | ||
| </ng-container> | ||
| </go-card> | ||
| </section> | ||
| <app-sub-nav [menuItems]="menuItems"></app-sub-nav> |
17 changes: 17 additions & 0 deletions
17
...ects/go-style-guide/src/app/features/ui-kit/components/badge-docs/badge-docs.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { NavGroup } from '../../../../../../../go-lib/src/public_api'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-badge-docs', | ||
| templateUrl: './badge-docs.component.html' | ||
| }) | ||
| export class BadgeDocsComponent { | ||
| menuItems: Array<NavGroup> = [ | ||
| { | ||
| routeTitle: 'Badges', subRoutes: [ | ||
| { route: './', routeTitle: 'Positioned' }, | ||
| { route: './pill', routeTitle: 'Pill' }, | ||
| ] | ||
| } | ||
| ]; | ||
| } |
Oops, something went wrong.