-
Notifications
You must be signed in to change notification settings - Fork 174
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: wip tooltip * docs(tooltip): add tooltip documentation page
- Loading branch information
1 parent
cb465a5
commit f98140d
Showing
33 changed files
with
1,709 additions
and
5 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
83 changes: 83 additions & 0 deletions
83
apps/app/src/app/pages/(components)/components/(tooltip)/tooltip.page.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,83 @@ | ||
| import { RouteMeta } from '@analogjs/router'; | ||
| import { Component } from '@angular/core'; | ||
| import { CodePreviewDirective } from '../../../../shared/code/code-preview.directive'; | ||
| import { CodeComponent } from '../../../../shared/code/code.component'; | ||
| import { MainSectionDirective } from '../../../../shared/layout/main-section.directive'; | ||
| import { PageBottomNavPlaceholderComponent } from '../../../../shared/layout/page-bottom-nav-placeholder.component'; | ||
| import { PageBottomNavLinkComponent } from '../../../../shared/layout/page-bottom-nav/page-bottom-nav-link.component'; | ||
| import { PageBottomNavComponent } from '../../../../shared/layout/page-bottom-nav/page-bottom-nav.component'; | ||
| import { PageNavLinkComponent } from '../../../../shared/layout/page-nav/page-nav-link.component'; | ||
| import { PageNavComponent } from '../../../../shared/layout/page-nav/page-nav.component'; | ||
| import { SectionIntroComponent } from '../../../../shared/layout/section-intro.component'; | ||
| import { SectionSubHeadingComponent } from '../../../../shared/layout/section-sub-heading.component'; | ||
| import { TabsComponent } from '../../../../shared/layout/tabs.component'; | ||
| import { metaWith } from '../../../../shared/meta/meta.util'; | ||
| import { defaultCode, defaultImports, defaultSkeleton, TooltipPreviewComponent } from './tooltip.preview'; | ||
|
|
||
| export const routeMeta: RouteMeta = { | ||
| data: { breadcrumb: 'Tooltip' }, | ||
| meta: metaWith( | ||
| 'spartan/ui - Tooltip', | ||
| 'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.', | ||
| ), | ||
| title: 'spartan/ui - Tooltip', | ||
| }; | ||
| @Component({ | ||
| selector: 'spartan-tooltip', | ||
| standalone: true, | ||
| imports: [ | ||
| MainSectionDirective, | ||
| CodeComponent, | ||
| SectionIntroComponent, | ||
| SectionSubHeadingComponent, | ||
| TabsComponent, | ||
| CodePreviewDirective, | ||
| PageNavLinkComponent, | ||
| PageNavComponent, | ||
| PageBottomNavComponent, | ||
| PageBottomNavLinkComponent, | ||
| TooltipPreviewComponent, | ||
| PageBottomNavPlaceholderComponent, | ||
| ], | ||
| template: ` | ||
| <section spartanMainSection> | ||
| <spartan-section-intro | ||
| name="Tooltip" | ||
| lead="A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it." | ||
| /> | ||
| <spartan-tabs firstTab="Preview" secondTab="Code"> | ||
| <div spartanCodePreview firstTab> | ||
| <spartan-tooltip-preview /> | ||
| </div> | ||
| <spartan-code secondTab [code]="defaultCode" /> | ||
| </spartan-tabs> | ||
| <spartan-section-sub-heading id="installation">Installation</spartan-section-sub-heading> | ||
| <spartan-tabs class="mt-4" firstTab="Nx Plugin" secondTab="Angular CLI"> | ||
| <spartan-code firstTab language="sh" code="npx nx g @spartan-ng/cli:ui tooltip" /> | ||
| <spartan-code secondTab language="sh" code="ng g @spartan-ng/cli:ui tooltip" /> | ||
| </spartan-tabs> | ||
| <spartan-section-sub-heading id="usage">Usage</spartan-section-sub-heading> | ||
| <div class="space-y-4"> | ||
| <spartan-code [code]="defaultImports" /> | ||
| <spartan-code [code]="defaultSkeleton" /> | ||
| </div> | ||
| <spartan-page-bottom-nav> | ||
| <spartan-page-bottom-nav-placeholder /> | ||
| <spartan-page-bottom-nav-link direction="previous" href="toggle" label="Toggle" /> | ||
| </spartan-page-bottom-nav> | ||
| </section> | ||
| <spartan-page-nav> | ||
| <spartan-page-nav-link fragment="installation" label="Installation" /> | ||
| <spartan-page-nav-link fragment="usage" label="Usage" /> | ||
| </spartan-page-nav> | ||
| `, | ||
| }) | ||
| export default class TogglePageComponent { | ||
| protected readonly defaultCode = defaultCode; | ||
| protected readonly defaultSkeleton = defaultSkeleton; | ||
| protected readonly defaultImports = defaultImports; | ||
| } |
61 changes: 61 additions & 0 deletions
61
apps/app/src/app/pages/(components)/components/(tooltip)/tooltip.preview.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,61 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { radixPlus } from '@ng-icons/radix-icons'; | ||
| import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; | ||
| import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm'; | ||
| import { HlmTooltipDirective } from '@spartan-ng/ui-tooltip-helm'; | ||
|
|
||
| @Component({ | ||
| selector: 'spartan-tooltip-preview', | ||
| standalone: true, | ||
| imports: [HlmButtonDirective, HlmTooltipDirective, HlmIconComponent], | ||
| providers: [provideIcons({ radixPlus })], | ||
| template: ` | ||
| <div class="p-40"> | ||
| <button [hlmTooltip]="tpl" aria-describedby="Hello world" hlmBtn variant="outline">Hover</button> | ||
| </div> | ||
| <ng-template #tpl> | ||
| <span class="flex items-center"> | ||
| Add to library | ||
| <hlm-icon class="ml-2" size="sm" name="radixPlus" /> | ||
| </span> | ||
| </ng-template> | ||
| `, | ||
| }) | ||
| export class TooltipPreviewComponent {} | ||
|
|
||
| export const defaultCode = ` | ||
| import { Component } from '@angular/core'; | ||
| import { radixPlus } from '@ng-icons/radix-icons'; | ||
| import { HlmButtonDirective } from '@spartan-ng/ui-button-helm'; | ||
| import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm'; | ||
| import { HlmTooltipDirective } from '@spartan-ng/ui-tooltip-helm'; | ||
| @Component({ | ||
| selector: 'spartan-tooltip-preview', | ||
| standalone: true, | ||
| imports: [HlmButtonDirective, HlmTooltipDirective, HlmIconComponent], | ||
| providers: [provideIcons({ radixPlus })], | ||
| template: \` | ||
| <div class="p-40"> | ||
| <button [hlmTooltip]="tpl" aria-describedby="Hello world" hlmBtn variant="outline">Hover</button> | ||
| </div> | ||
| <ng-template #tpl> | ||
| <span class="flex items-center"> | ||
| Add to library | ||
| <hlm-icon class="ml-2" size="sm" name="radixPlus" /> | ||
| </span> | ||
| </ng-template> | ||
| \`, | ||
| }) | ||
| export class TooltipPreviewComponent {} | ||
| `; | ||
|
|
||
| export const defaultImports = ` | ||
| import { HlmTooltipDirective } from '@spartan-ng/ui-tooltip-helm'; | ||
| `; | ||
| export const defaultSkeleton = ` | ||
| <button [hlmTooltip]="tpl" aria-describedby="Hello world">Hover</button> | ||
| <ng-template #tpl>Add to library</ng-template> | ||
| `; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| { | ||
| "extends": ["../../../../.eslintrc.json"], | ||
| "ignorePatterns": ["!**/*"], | ||
| "overrides": [ | ||
| { | ||
| "files": ["*.ts"], | ||
| "rules": { | ||
| "@angular-eslint/no-host-metadata-property": 0, | ||
| "@angular-eslint/directive-selector": [ | ||
| "error", | ||
| { | ||
| "type": "attribute", | ||
| "prefix": "brn", | ||
| "style": "camelCase" | ||
| } | ||
| ], | ||
| "@angular-eslint/component-selector": [ | ||
| "error", | ||
| { | ||
| "type": "element", | ||
| "prefix": "brn", | ||
| "style": "kebab-case" | ||
| } | ||
| ] | ||
| }, | ||
| "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"] | ||
| }, | ||
| { | ||
| "files": ["*.html"], | ||
| "extends": ["plugin:@nx/angular-template"], | ||
| "rules": {} | ||
| } | ||
| ] | ||
| } |
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,7 @@ | ||
| # ui-tooltip-brain | ||
|
|
||
| This library was generated with [Nx](https://nx.dev). | ||
|
|
||
| ## Running unit tests | ||
|
|
||
| Run `nx test ui-tooltip-brain` to execute the unit tests. |
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,21 @@ | ||
| /* eslint-disable */ | ||
| export default { | ||
| displayName: 'ui-tooltip-brain', | ||
| preset: '../../../../jest.preset.js', | ||
| setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'], | ||
| transform: { | ||
| '^.+\\.(ts|mjs|js|html)$': [ | ||
| 'jest-preset-angular', | ||
| { | ||
| tsconfig: '<rootDir>/tsconfig.spec.json', | ||
| stringifyContentPathRegex: '\\.(html|svg)$', | ||
| }, | ||
| ], | ||
| }, | ||
| transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], | ||
| snapshotSerializers: [ | ||
| 'jest-preset-angular/build/serializers/no-ng-attributes', | ||
| 'jest-preset-angular/build/serializers/ng-snapshot', | ||
| 'jest-preset-angular/build/serializers/html-comment', | ||
| ], | ||
| }; |
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,7 @@ | ||
| { | ||
| "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json", | ||
| "dest": "../../../../dist/libs/ui/tooltip/brain", | ||
| "lib": { | ||
| "entryFile": "src/index.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,14 @@ | ||
| { | ||
| "name": "@spartan-ng/ui-tooltip-brain", | ||
| "version": "0.0.1-alpha.309", | ||
| "peerDependencies": { | ||
| "@angular/core": "17.0.2", | ||
| "@angular/cdk": "17.0.0", | ||
| "rxjs": "~7.8.0" | ||
| }, | ||
| "dependencies": {}, | ||
| "sideEffects": false, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| } | ||
| } |
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,58 @@ | ||
| { | ||
| "name": "ui-tooltip-brain", | ||
| "$schema": "../../../../node_modules/nx/schemas/project-schema.json", | ||
| "sourceRoot": "libs/ui/tooltip/brain/src", | ||
| "prefix": "brain", | ||
| "tags": ["scope:brain"], | ||
| "projectType": "library", | ||
| "targets": { | ||
| "build": { | ||
| "executor": "@nx/angular:package", | ||
| "outputs": ["{workspaceRoot}/dist/{projectRoot}"], | ||
| "options": { | ||
| "project": "libs/ui/tooltip/brain/ng-package.json" | ||
| }, | ||
| "configurations": { | ||
| "production": { | ||
| "tsConfig": "libs/ui/tooltip/brain/tsconfig.lib.prod.json" | ||
| }, | ||
| "development": { | ||
| "tsConfig": "libs/ui/tooltip/brain/tsconfig.lib.json" | ||
| } | ||
| }, | ||
| "defaultConfiguration": "production" | ||
| }, | ||
| "test": { | ||
| "executor": "@nx/jest:jest", | ||
| "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], | ||
| "options": { | ||
| "jestConfig": "libs/ui/tooltip/brain/jest.config.ts", | ||
| "passWithNoTests": true | ||
| }, | ||
| "configurations": { | ||
| "ci": { | ||
| "ci": true, | ||
| "codeCoverage": true | ||
| } | ||
| } | ||
| }, | ||
| "lint": { | ||
| "executor": "@nx/linter:eslint", | ||
| "outputs": ["{options.outputFile}"], | ||
| "options": { | ||
| "lintFilePatterns": [ | ||
| "libs/ui/tooltip/brain/**/*.ts", | ||
| "libs/ui/tooltip/brain/**/*.html", | ||
| "libs/ui/tooltip/brain/package.json", | ||
| "libs/ui/tooltip/brain/project.json" | ||
| ] | ||
| } | ||
| }, | ||
| "release": { | ||
| "executor": "@spartan-ng/tools:build-update-publish", | ||
| "options": { | ||
| "libName": "ui-tooltip-brain" | ||
| } | ||
| } | ||
| } | ||
| } |
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,13 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { BrnTooltipComponent } from './lib/brn-tooltip.component'; | ||
| import { BrnTooltipDirective } from './lib/brn-tooltip.directive'; | ||
|
|
||
| export * from './lib/brn-tooltip.component'; | ||
| export * from './lib/brn-tooltip.directive'; | ||
| export const BrnTooltipImports = [BrnTooltipDirective, BrnTooltipComponent] as const; | ||
|
|
||
| @NgModule({ | ||
| imports: [...BrnTooltipImports], | ||
| exports: [...BrnTooltipImports], | ||
| }) | ||
| export class BrnTooltipModule {} |
Oops, something went wrong.