Component Library scaffolding (#625)
This commit is contained in:
Oscar Hinton
GitHub
parent
fa3a95fed0
commit
67a4fc8591
|
|
@ -1,5 +1,6 @@
|
||||||
# Build directories
|
# Build directories
|
||||||
dist
|
dist
|
||||||
|
.angular
|
||||||
coverage
|
coverage
|
||||||
|
|
||||||
# Github Workflows
|
# Github Workflows
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||||
|
# For additional information regarding the format and rule options, please see:
|
||||||
|
# https://github.com/browserslist/browserslist#queries
|
||||||
|
|
||||||
|
# For the full list of supported browsers by the Angular framework, please see:
|
||||||
|
# https://angular.io/guide/browser-support
|
||||||
|
|
||||||
|
# You can see what browsers were selected by your queries by running:
|
||||||
|
# npx browserslist
|
||||||
|
|
||||||
|
last 1 Chrome version
|
||||||
|
last 1 Firefox version
|
||||||
|
last 2 Edge major versions
|
||||||
|
last 2 Safari major versions
|
||||||
|
last 2 iOS major versions
|
||||||
|
Firefox ESR
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# Compiled output
|
||||||
|
/dist
|
||||||
|
/tmp
|
||||||
|
/out-tsc
|
||||||
|
/bazel-out
|
||||||
|
|
||||||
|
documentation.json
|
||||||
|
|
||||||
|
# Node
|
||||||
|
/node_modules
|
||||||
|
npm-debug.log
|
||||||
|
yarn-error.log
|
||||||
|
|
||||||
|
# IDEs and editors
|
||||||
|
.idea/
|
||||||
|
.project
|
||||||
|
.classpath
|
||||||
|
.c9/
|
||||||
|
*.launch
|
||||||
|
.settings/
|
||||||
|
*.sublime-workspace
|
||||||
|
|
||||||
|
# Visual Studio Code
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/tasks.json
|
||||||
|
!.vscode/launch.json
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.history/*
|
||||||
|
|
||||||
|
# Miscellaneous
|
||||||
|
/.angular/cache
|
||||||
|
.sass-cache/
|
||||||
|
/connect.lock
|
||||||
|
/coverage
|
||||||
|
/libpeerconnection.log
|
||||||
|
testem.log
|
||||||
|
/typings
|
||||||
|
|
||||||
|
# System files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
module.exports = {
|
||||||
|
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
|
||||||
|
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
|
||||||
|
framework: "@storybook/angular",
|
||||||
|
core: {
|
||||||
|
builder: "webpack5",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { setCompodocJson } from "@storybook/addon-docs/angular";
|
||||||
|
import { componentWrapperDecorator, addDecorator } from "@storybook/angular";
|
||||||
|
|
||||||
|
import docJson from "../documentation.json";
|
||||||
|
setCompodocJson(docJson);
|
||||||
|
|
||||||
|
export const parameters = {
|
||||||
|
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||||
|
controls: {
|
||||||
|
matchers: {
|
||||||
|
color: /(background|color)$/i,
|
||||||
|
date: /Date$/,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
docs: { inlineStories: true },
|
||||||
|
};
|
||||||
|
|
||||||
|
const decorator = componentWrapperDecorator(
|
||||||
|
(story) => `
|
||||||
|
<div class="theme_light tw-px-5 tw-py-10 tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff]">${story}</div>
|
||||||
|
<div class="theme_dark tw-mt-5 tw-px-5 tw-py-10 tw-bg-[#1f242e]">${story}</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
addDecorator(decorator);
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"extends": "../tsconfig.app.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"types": ["node"],
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
|
||||||
|
"include": ["../src/**/*", "../projects/**/*"],
|
||||||
|
"files": ["./typings.d.ts"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
declare module "*.md" {
|
||||||
|
const content: string;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
# Components
|
||||||
|
|
||||||
|
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.3.
|
||||||
|
|
||||||
|
## Development server
|
||||||
|
|
||||||
|
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||||
|
|
||||||
|
## Code scaffolding
|
||||||
|
|
||||||
|
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||||
|
|
||||||
|
## Running unit tests
|
||||||
|
|
||||||
|
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||||
|
|
||||||
|
## Running end-to-end tests
|
||||||
|
|
||||||
|
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||||
|
|
||||||
|
## Further help
|
||||||
|
|
||||||
|
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
|
"version": 1,
|
||||||
|
"newProjectRoot": "projects",
|
||||||
|
"projects": {
|
||||||
|
"components": {
|
||||||
|
"projectType": "application",
|
||||||
|
"schematics": {
|
||||||
|
"@schematics/angular:application": {
|
||||||
|
"strict": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "",
|
||||||
|
"sourceRoot": "src",
|
||||||
|
"prefix": "app",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:browser",
|
||||||
|
"options": {
|
||||||
|
"outputPath": "dist/components",
|
||||||
|
"index": "src/index.html",
|
||||||
|
"main": "src/main.ts",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"tsConfig": "tsconfig.app.json",
|
||||||
|
"assets": ["src/favicon.ico", "src/assets"],
|
||||||
|
"styles": ["src/styles.scss", "src/styles.css"],
|
||||||
|
"stylePreprocessorOptions": {
|
||||||
|
"includePaths": ["src/styles"]
|
||||||
|
},
|
||||||
|
"scripts": []
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"budgets": [
|
||||||
|
{
|
||||||
|
"type": "initial",
|
||||||
|
"maximumWarning": "500kb",
|
||||||
|
"maximumError": "1mb"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "anyComponentStyle",
|
||||||
|
"maximumWarning": "2kb",
|
||||||
|
"maximumError": "4kb"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"outputHashing": "all"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"buildOptimizer": false,
|
||||||
|
"optimization": false,
|
||||||
|
"vendorChunk": true,
|
||||||
|
"extractLicenses": false,
|
||||||
|
"sourceMap": true,
|
||||||
|
"namedChunks": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
|
},
|
||||||
|
"serve": {
|
||||||
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"browserTarget": "components:build:production"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"browserTarget": "components:build:development"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "development"
|
||||||
|
},
|
||||||
|
"extract-i18n": {
|
||||||
|
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||||
|
"options": {
|
||||||
|
"browserTarget": "components:build"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"main": "src/test.ts",
|
||||||
|
"polyfills": "src/polyfills.ts",
|
||||||
|
"tsConfig": "tsconfig.spec.json",
|
||||||
|
"karmaConfig": "karma.conf.js",
|
||||||
|
"assets": ["src/favicon.ico", "src/assets"],
|
||||||
|
"styles": ["src/styles.css"],
|
||||||
|
"scripts": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultProject": "components"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
// Karma configuration file, see link for more information
|
||||||
|
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||||
|
|
||||||
|
module.exports = function (config) {
|
||||||
|
config.set({
|
||||||
|
basePath: "",
|
||||||
|
frameworks: ["jasmine", "@angular-devkit/build-angular"],
|
||||||
|
plugins: [
|
||||||
|
require("karma-jasmine"),
|
||||||
|
require("karma-chrome-launcher"),
|
||||||
|
require("karma-jasmine-html-reporter"),
|
||||||
|
require("karma-coverage"),
|
||||||
|
require("@angular-devkit/build-angular/plugins/karma"),
|
||||||
|
],
|
||||||
|
client: {
|
||||||
|
jasmine: {
|
||||||
|
// you can add configuration options for Jasmine here
|
||||||
|
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
|
||||||
|
// for example, you can disable the random execution with `random: false`
|
||||||
|
// or set a specific seed with `seed: 4321`
|
||||||
|
},
|
||||||
|
clearContext: false, // leave Jasmine Spec Runner output visible in browser
|
||||||
|
},
|
||||||
|
jasmineHtmlReporter: {
|
||||||
|
suppressAll: true, // removes the duplicated traces
|
||||||
|
},
|
||||||
|
coverageReporter: {
|
||||||
|
dir: require("path").join(__dirname, "./coverage/components"),
|
||||||
|
subdir: ".",
|
||||||
|
reporters: [{ type: "html" }, { type: "text-summary" }],
|
||||||
|
},
|
||||||
|
reporters: ["progress", "kjhtml"],
|
||||||
|
port: 9876,
|
||||||
|
colors: true,
|
||||||
|
logLevel: config.LOG_INFO,
|
||||||
|
autoWatch: true,
|
||||||
|
browsers: ["Chrome"],
|
||||||
|
singleRun: false,
|
||||||
|
restartOnFileChange: true,
|
||||||
|
});
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,55 @@
|
||||||
|
{
|
||||||
|
"name": "components",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng serve",
|
||||||
|
"build": "ng build",
|
||||||
|
"watch": "ng build --watch --configuration development",
|
||||||
|
"test": "ng test",
|
||||||
|
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
|
||||||
|
"storybook": "npm run docs:json && start-storybook -p 6006",
|
||||||
|
"build-storybook": "npm run docs:json && build-storybook"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/animations": "^12.2.13",
|
||||||
|
"@angular/cdk": "^12.2.13",
|
||||||
|
"@angular/common": "^12.2.13",
|
||||||
|
"@angular/compiler": "^12.2.13",
|
||||||
|
"@angular/core": "^12.2.13",
|
||||||
|
"@angular/forms": "^12.2.13",
|
||||||
|
"@angular/platform-browser": "^12.2.13",
|
||||||
|
"@angular/platform-browser-dynamic": "^12.2.13",
|
||||||
|
"@bitwarden/jslib-angular": "file:../angular",
|
||||||
|
"tslib": "^2.3.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular-devkit/build-angular": "^12.2.13",
|
||||||
|
"@angular/cli": "^12.2.13",
|
||||||
|
"@angular/compiler-cli": "^12.2.13",
|
||||||
|
"@angular/elements": "^12.2.13",
|
||||||
|
"@babel/core": "^7.16.10",
|
||||||
|
"@compodoc/compodoc": "^1.1.16",
|
||||||
|
"@storybook/addon-actions": "^6.4.18",
|
||||||
|
"@storybook/addon-essentials": "^6.4.18",
|
||||||
|
"@storybook/addon-links": "^6.4.18",
|
||||||
|
"@storybook/angular": "^6.4.18",
|
||||||
|
"@storybook/builder-webpack5": "^6.4.18",
|
||||||
|
"@storybook/manager-webpack5": "^6.4.18",
|
||||||
|
"@types/jasmine": "~3.10.0",
|
||||||
|
"@types/node": "^12.11.1",
|
||||||
|
"@webcomponents/custom-elements": "^1.5.0",
|
||||||
|
"autoprefixer": "^10.4.2",
|
||||||
|
"babel-loader": "^8.2.3",
|
||||||
|
"jasmine-core": "~3.10.0",
|
||||||
|
"karma": "~6.3.0",
|
||||||
|
"karma-chrome-launcher": "~3.1.0",
|
||||||
|
"karma-coverage": "~2.1.0",
|
||||||
|
"karma-jasmine": "~4.0.0",
|
||||||
|
"karma-jasmine-html-reporter": "~1.7.0",
|
||||||
|
"postcss": "^8.4.6",
|
||||||
|
"tailwindcss": "^3.0.18",
|
||||||
|
"typescript": "~4.3.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { Component } from "@angular/core";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "app-root",
|
||||||
|
template: "",
|
||||||
|
})
|
||||||
|
export class AppComponent {
|
||||||
|
title = "components";
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { CommonModule } from "@angular/common";
|
||||||
|
import { NgModule } from "@angular/core";
|
||||||
|
import { BrowserModule } from "@angular/platform-browser";
|
||||||
|
|
||||||
|
import { AppComponent } from "./app.component";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [AppComponent],
|
||||||
|
imports: [BrowserModule, CommonModule],
|
||||||
|
providers: [{ provide: "WINDOW", useValue: window }],
|
||||||
|
bootstrap: [AppComponent],
|
||||||
|
})
|
||||||
|
export class AppModule {}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { Component, Input } from "@angular/core";
|
||||||
|
|
||||||
|
type BadgeTypes = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
|
||||||
|
|
||||||
|
const styles: Record<BadgeTypes, string[]> = {
|
||||||
|
primary: ["tw-bg-primary-500", "hover:tw-bg-primary-700"],
|
||||||
|
secondary: ["tw-bg-secondary-500", "hover:tw-bg-secondary-700"],
|
||||||
|
success: ["tw-bg-success-500", "hover:tw-bg-success-700"],
|
||||||
|
danger: ["tw-bg-danger-500", "hover:tw-bg-danger-700"],
|
||||||
|
warning: ["tw-bg-warning-500", "hover:tw-bg-warning-700"],
|
||||||
|
info: ["tw-bg-info-500", "hover:tw-bg-info-700"],
|
||||||
|
};
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "bit-badge",
|
||||||
|
template: `<span [ngClass]="classes"><ng-content></ng-content></span>`,
|
||||||
|
})
|
||||||
|
export class BadgeComponent {
|
||||||
|
@Input()
|
||||||
|
type: BadgeTypes = "primary";
|
||||||
|
|
||||||
|
get classes() {
|
||||||
|
return [
|
||||||
|
"tw-inline-block",
|
||||||
|
"tw-py-0.5",
|
||||||
|
"tw-px-1",
|
||||||
|
"tw-font-bold",
|
||||||
|
"tw-leading-none",
|
||||||
|
"tw-text-center",
|
||||||
|
"tw-text-contrast",
|
||||||
|
"tw-align-baseline",
|
||||||
|
"tw-rounded",
|
||||||
|
"tw-border-collapse",
|
||||||
|
"tw-box-border",
|
||||||
|
"tw-whitespace-no-wrap",
|
||||||
|
"tw-text-xs",
|
||||||
|
].concat(styles[this.type]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { CommonModule } from "@angular/common";
|
||||||
|
import { NgModule } from "@angular/core";
|
||||||
|
|
||||||
|
import { BadgeComponent } from "./badge.component";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [CommonModule],
|
||||||
|
exports: [BadgeComponent],
|
||||||
|
declarations: [BadgeComponent],
|
||||||
|
})
|
||||||
|
export class BadgeModule {}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import { Meta, Story } from "@storybook/angular";
|
||||||
|
|
||||||
|
import { BadgeComponent } from "./badge.component";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: "Jslib/Badge",
|
||||||
|
component: BadgeComponent,
|
||||||
|
args: {
|
||||||
|
type: "primary",
|
||||||
|
},
|
||||||
|
} as Meta;
|
||||||
|
|
||||||
|
const Template: Story<BadgeComponent> = (args: BadgeComponent) => ({
|
||||||
|
props: args,
|
||||||
|
template: `
|
||||||
|
<span class="tw-text-main">Test </span><bit-badge [type]="type">Content</bit-badge>
|
||||||
|
`,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Primary = Template.bind({});
|
||||||
|
Primary.args = {};
|
||||||
|
|
||||||
|
export const Secondary = Template.bind({});
|
||||||
|
Secondary.args = {
|
||||||
|
type: "secondary",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Success = Template.bind({});
|
||||||
|
Success.args = {
|
||||||
|
type: "success",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Danger = Template.bind({});
|
||||||
|
Danger.args = {
|
||||||
|
type: "danger",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Warning = Template.bind({});
|
||||||
|
Warning.args = {
|
||||||
|
type: "warning",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Info = Template.bind({});
|
||||||
|
Info.args = {
|
||||||
|
type: "info",
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from "./badge.component";
|
||||||
|
export * from "./badge.module";
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
import { Meta, Story } from "@storybook/angular";
|
||||||
|
|
||||||
|
import { ButtonComponent } from "./button.component";
|
||||||
|
|
||||||
|
// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
|
||||||
|
export default {
|
||||||
|
title: "Jslib/Button",
|
||||||
|
component: ButtonComponent,
|
||||||
|
args: {
|
||||||
|
buttonType: "primary",
|
||||||
|
},
|
||||||
|
// More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
|
||||||
|
} as Meta;
|
||||||
|
|
||||||
|
// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
|
||||||
|
const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
|
||||||
|
props: args,
|
||||||
|
template: `<button bit-button [buttonType]="buttonType" [block]="block">Test</button>`,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Primary = Template.bind({});
|
||||||
|
// More on args: https://storybook.js.org/docs/angular/writing-stories/args
|
||||||
|
Primary.args = {
|
||||||
|
buttonType: "primary",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Secondary = Template.bind({});
|
||||||
|
Secondary.args = {
|
||||||
|
buttonType: "secondary",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Danger = Template.bind({});
|
||||||
|
Danger.args = {
|
||||||
|
buttonType: "danger",
|
||||||
|
};
|
||||||
|
|
||||||
|
const DisabledTemplate: Story = (args) => ({
|
||||||
|
props: args,
|
||||||
|
template: `
|
||||||
|
<button bit-button disabled buttonType="primary" class="tw-mr-2">Primary</button>
|
||||||
|
<button bit-button disabled buttonType="secondary" class="tw-mr-2">Secondary</button>
|
||||||
|
<button bit-button disabled buttonType="danger" class="tw-mr-2">Danger</button>
|
||||||
|
`,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Disabled = DisabledTemplate.bind({});
|
||||||
|
Disabled.args = {
|
||||||
|
size: "small",
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { Component } from "@angular/core";
|
||||||
|
import { TestBed, waitForAsync } from "@angular/core/testing";
|
||||||
|
import { By } from "@angular/platform-browser";
|
||||||
|
|
||||||
|
import { ButtonModule } from "./index";
|
||||||
|
|
||||||
|
describe("Button", () => {
|
||||||
|
beforeEach(
|
||||||
|
waitForAsync(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
imports: [ButtonModule],
|
||||||
|
declarations: [TestApp],
|
||||||
|
});
|
||||||
|
|
||||||
|
TestBed.compileComponents();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
it("should apply classes based on type", () => {
|
||||||
|
const fixture = TestBed.createComponent(TestApp);
|
||||||
|
|
||||||
|
const testAppComponent: TestApp = fixture.debugElement.componentInstance;
|
||||||
|
const buttonDebugElement = fixture.debugElement.query(By.css("button"));
|
||||||
|
const linkDebugElement = fixture.debugElement.query(By.css("a"));
|
||||||
|
|
||||||
|
testAppComponent.buttonType = "primary";
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(buttonDebugElement.nativeElement.classList.contains("tw-bg-primary-500")).toBe(true);
|
||||||
|
expect(linkDebugElement.nativeElement.classList.contains("tw-bg-primary-500")).toBe(true);
|
||||||
|
|
||||||
|
testAppComponent.buttonType = "secondary";
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
|
||||||
|
expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
|
||||||
|
|
||||||
|
testAppComponent.buttonType = "danger";
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(buttonDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);
|
||||||
|
expect(linkDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);
|
||||||
|
|
||||||
|
testAppComponent.buttonType = null;
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
|
||||||
|
expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "test-app",
|
||||||
|
template: `
|
||||||
|
<button type="button" bit-button [buttonType]="buttonType">Button</button>
|
||||||
|
<a href="#" bit-button [buttonType]="buttonType"> Link </a>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
class TestApp {
|
||||||
|
buttonType: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
import { Input, HostBinding, OnChanges, Directive } from "@angular/core";
|
||||||
|
|
||||||
|
export type ButtonTypes = "primary" | "secondary" | "danger";
|
||||||
|
|
||||||
|
const buttonStyles: Record<ButtonTypes, string> = {
|
||||||
|
primary: [
|
||||||
|
"tw-border-primary-500",
|
||||||
|
"tw-bg-primary-500",
|
||||||
|
"!tw-text-contrast",
|
||||||
|
"hover:tw-bg-primary-700",
|
||||||
|
"hover:tw-border-primary-700",
|
||||||
|
"focus:tw-bg-primary-700",
|
||||||
|
"focus:tw-border-primary-700",
|
||||||
|
].join(" "),
|
||||||
|
secondary: [
|
||||||
|
"tw-bg-transparent",
|
||||||
|
"tw-border-text-muted",
|
||||||
|
"!tw-text-muted",
|
||||||
|
"hover:tw-bg-secondary-500",
|
||||||
|
"hover:tw-border-secondary-500",
|
||||||
|
"hover:tw-text-contrast",
|
||||||
|
"focus:tw-bg-secondary-500",
|
||||||
|
"focus:tw-border-secondary-500",
|
||||||
|
"focus:tw-text-contrast",
|
||||||
|
].join(" "),
|
||||||
|
danger: [
|
||||||
|
"tw-bg-transparent",
|
||||||
|
"tw-border-danger-500",
|
||||||
|
"!tw-text-danger",
|
||||||
|
"hover:tw-bg-danger-500",
|
||||||
|
"hover:tw-border-danger-500",
|
||||||
|
"hover:tw-text-contrast",
|
||||||
|
"focus:tw-bg-danger-500",
|
||||||
|
"focus:tw-border-danger-500",
|
||||||
|
"focus:tw-text-contrast",
|
||||||
|
].join(" "),
|
||||||
|
};
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: "button[bit-button], a[bit-button]",
|
||||||
|
})
|
||||||
|
export class ButtonComponent implements OnChanges {
|
||||||
|
@HostBinding("class") @Input("class") classList = "";
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
buttonType: ButtonTypes = "secondary";
|
||||||
|
|
||||||
|
@Input()
|
||||||
|
block = false;
|
||||||
|
|
||||||
|
ngOnChanges() {
|
||||||
|
this.classList = this.classes.join(" ");
|
||||||
|
}
|
||||||
|
|
||||||
|
get classes(): string[] {
|
||||||
|
return [
|
||||||
|
"tw-font-semibold",
|
||||||
|
"tw-py-1.5",
|
||||||
|
"tw-px-3",
|
||||||
|
"tw-rounded",
|
||||||
|
"tw-transition",
|
||||||
|
"tw-border",
|
||||||
|
"tw-border-solid",
|
||||||
|
"tw-text-center",
|
||||||
|
"hover:tw-no-underline",
|
||||||
|
"disabled:tw-bg-secondary-100",
|
||||||
|
"disabled:tw-border-secondary-100",
|
||||||
|
"disabled:!tw-text-main",
|
||||||
|
"focus:tw-outline-none",
|
||||||
|
"focus:tw-ring",
|
||||||
|
"focus:tw-ring-offset-2",
|
||||||
|
"focus:tw-ring-primary-700",
|
||||||
|
this.block ? "tw-w-full tw-block" : "",
|
||||||
|
buttonStyles[this.buttonType ?? "secondary"],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { CommonModule } from "@angular/common";
|
||||||
|
import { NgModule } from "@angular/core";
|
||||||
|
|
||||||
|
import { ButtonComponent } from "./button.component";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [CommonModule],
|
||||||
|
exports: [ButtonComponent],
|
||||||
|
declarations: [ButtonComponent],
|
||||||
|
})
|
||||||
|
export class ButtonModule {}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from "./button.component";
|
||||||
|
export * from "./button.module";
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<div
|
||||||
|
class="tw-py-3 tw-px-5 tw-mb-4 tw-leading-5 tw-rounded tw-bg-background-elevation tw-border tw-border-secondary-300 tw-border-solid tw-box-border tw-border-l-8 tw-text-main"
|
||||||
|
[ngClass]="calloutClass"
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
class="tw-mt-0 tw-mb-2 tw-text-base tw-font-bold tw-uppercase"
|
||||||
|
[ngClass]="headerClass"
|
||||||
|
*ngIf="title"
|
||||||
|
>
|
||||||
|
<i class="bwi {{ icon }}" *ngIf="icon" aria-hidden="true"></i>
|
||||||
|
{{ title }}
|
||||||
|
</h3>
|
||||||
|
<ng-content></ng-content>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { ComponentFixture, TestBed } from "@angular/core/testing";
|
||||||
|
import { I18nMockService } from "src/utils/i18n-mock.service";
|
||||||
|
|
||||||
|
import { I18nService } from "jslib-common/abstractions/i18n.service";
|
||||||
|
|
||||||
|
import { CalloutComponent } from ".";
|
||||||
|
|
||||||
|
describe("Callout", () => {
|
||||||
|
let component: CalloutComponent;
|
||||||
|
let fixture: ComponentFixture<CalloutComponent>;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [CalloutComponent],
|
||||||
|
providers: [
|
||||||
|
{
|
||||||
|
provide: I18nService,
|
||||||
|
useFactory: () =>
|
||||||
|
new I18nMockService({
|
||||||
|
warning: "Warning",
|
||||||
|
error: "Error",
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
fixture = TestBed.createComponent(CalloutComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("default state", () => {
|
||||||
|
it("success", () => {
|
||||||
|
component.type = "success";
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.title).toBeUndefined();
|
||||||
|
expect(component.icon).toBe("bwi-check");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("info", () => {
|
||||||
|
component.type = "info";
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.title).toBeUndefined();
|
||||||
|
expect(component.icon).toBe("bwi-info-circle");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("warning", () => {
|
||||||
|
component.type = "warning";
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.title).toBe("Warning");
|
||||||
|
expect(component.icon).toBe("bwi-exclamation-triangle");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("danger", () => {
|
||||||
|
component.type = "danger";
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(component.title).toBe("Error");
|
||||||
|
expect(component.icon).toBe("bwi-error");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
import { Component, Input, OnInit } from "@angular/core";
|
||||||
|
|
||||||
|
import { I18nService } from "jslib-common/abstractions/i18n.service";
|
||||||
|
|
||||||
|
type CalloutTypes = "success" | "info" | "warning" | "danger";
|
||||||
|
|
||||||
|
const defaultIcon: Record<CalloutTypes, string> = {
|
||||||
|
success: "bwi-check",
|
||||||
|
info: "bwi-info-circle",
|
||||||
|
warning: "bwi-exclamation-triangle",
|
||||||
|
danger: "bwi-error",
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultI18n: Partial<Record<CalloutTypes, string>> = {
|
||||||
|
warning: "warning",
|
||||||
|
danger: "error",
|
||||||
|
};
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: "bit-callout",
|
||||||
|
templateUrl: "callout.component.html",
|
||||||
|
})
|
||||||
|
export class CalloutComponent implements OnInit {
|
||||||
|
@Input() type: CalloutTypes = "info";
|
||||||
|
@Input() icon: string;
|
||||||
|
@Input() title: string;
|
||||||
|
@Input() useAlertRole = false;
|
||||||
|
|
||||||
|
constructor(private i18nService: I18nService) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.icon ??= defaultIcon[this.type];
|
||||||
|
if (this.title == null && defaultI18n[this.type] != null) {
|
||||||
|
this.title = this.i18nService.t(defaultI18n[this.type]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get calloutClass() {
|
||||||
|
switch (this.type) {
|
||||||
|
case "danger":
|
||||||
|
return "tw-border-l-danger-500";
|
||||||
|
case "info":
|
||||||
|
return "tw-border-l-info-500";
|
||||||
|
case "success":
|
||||||
|
return "tw-border-l-success-500";
|
||||||
|
case "warning":
|
||||||
|
return "tw-border-l-warning-500";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get headerClass() {
|
||||||
|
switch (this.type) {
|
||||||
|
case "danger":
|
||||||
|
return "tw-text-danger";
|
||||||
|
case "info":
|
||||||
|
return "tw-text-info";
|
||||||
|
case "success":
|
||||||
|
return "tw-text-success";
|
||||||
|
case "warning":
|
||||||
|
return "tw-text-warning";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { CommonModule } from "@angular/common";
|
||||||
|
import { NgModule } from "@angular/core";
|
||||||
|
|
||||||
|
import { CalloutComponent } from "./callout.component";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [CommonModule],
|
||||||
|
exports: [CalloutComponent],
|
||||||
|
declarations: [CalloutComponent],
|
||||||
|
})
|
||||||
|
export class CalloutModule {}
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { Meta, moduleMetadata, Story } from "@storybook/angular";
|
||||||
|
|
||||||
|
import { I18nService } from "jslib-common/abstractions/i18n.service";
|
||||||
|
|
||||||
|
import { I18nMockService } from "../utils/i18n-mock.service";
|
||||||
|
|
||||||
|
import { CalloutComponent } from "./callout.component";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: "Jslib/Callout",
|
||||||
|
component: CalloutComponent,
|
||||||
|
decorators: [
|
||||||
|
moduleMetadata({
|
||||||
|
providers: [
|
||||||
|
{
|
||||||
|
provide: I18nService,
|
||||||
|
useFactory: () => {
|
||||||
|
return new I18nMockService({
|
||||||
|
warning: "Warning",
|
||||||
|
error: "Error",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
args: {
|
||||||
|
type: "warning",
|
||||||
|
},
|
||||||
|
} as Meta;
|
||||||
|
|
||||||
|
const Template: Story<CalloutComponent> = (args: CalloutComponent) => ({
|
||||||
|
props: args,
|
||||||
|
template: `
|
||||||
|
<bit-callout [type]="type" [title]="title">Content</bit-callout>
|
||||||
|
`,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const Success = Template.bind({});
|
||||||
|
Success.args = {
|
||||||
|
type: "success",
|
||||||
|
title: "Success",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Info = Template.bind({});
|
||||||
|
Info.args = {
|
||||||
|
type: "info",
|
||||||
|
title: "Info",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Warning = Template.bind({});
|
||||||
|
Warning.args = {
|
||||||
|
type: "warning",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Danger = Template.bind({});
|
||||||
|
Danger.args = {
|
||||||
|
type: "danger",
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from "./callout.module";
|
||||||
|
export * from "./callout.component";
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Components</title>
|
||||||
|
<base href="/" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<app-root></app-root>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export * from "./badge";
|
||||||
|
export * from "./button";
|
||||||
|
export * from "./callout";
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
|
||||||
|
|
||||||
|
import { AppModule } from "./app/app.module";
|
||||||
|
|
||||||
|
platformBrowserDynamic()
|
||||||
|
.bootstrapModule(AppModule)
|
||||||
|
.catch((err) => console.error(err)); // eslint-disable-line
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
/**
|
||||||
|
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||||
|
* You can add your own extra polyfills to this file.
|
||||||
|
*
|
||||||
|
* This file is divided into 2 sections:
|
||||||
|
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||||
|
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||||
|
* file.
|
||||||
|
*
|
||||||
|
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||||
|
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
||||||
|
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
||||||
|
*
|
||||||
|
* Learn more in https://angular.io/guide/browser-support
|
||||||
|
*/
|
||||||
|
|
||||||
|
/***************************************************************************************************
|
||||||
|
* BROWSER POLYFILLS
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||||
|
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||||
|
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||||
|
* will put import in the top of bundle, so user need to create a separate file
|
||||||
|
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||||
|
* into that file, and then add the following code before importing zone.js.
|
||||||
|
* import './zone-flags';
|
||||||
|
*
|
||||||
|
* The flags allowed in zone-flags.ts are listed here.
|
||||||
|
*
|
||||||
|
* The following flags will work for all browsers.
|
||||||
|
*
|
||||||
|
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||||
|
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||||
|
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||||
|
*
|
||||||
|
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||||
|
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||||
|
*
|
||||||
|
* (window as any).__Zone_enable_cross_context_check = true;
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/***************************************************************************************************
|
||||||
|
* Zone JS is required by default for Angular itself.
|
||||||
|
*/
|
||||||
|
import "zone.js"; // Included with Angular CLI.
|
||||||
|
|
||||||
|
/***************************************************************************************************
|
||||||
|
* APPLICATION IMPORTS
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,195 @@
|
||||||
|
import { Meta } from "@storybook/addon-docs";
|
||||||
|
|
||||||
|
<Meta title="Jslib/Introduction" />
|
||||||
|
|
||||||
|
<style>{`
|
||||||
|
.subheading {
|
||||||
|
--mediumdark: '#999999';
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
line-height: 24px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
row-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 620px) {
|
||||||
|
.link-list {
|
||||||
|
row-gap: 20px;
|
||||||
|
column-gap: 20px;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (-ms-high-contrast:none) {
|
||||||
|
.link-list {
|
||||||
|
display: -ms-grid;
|
||||||
|
-ms-grid-columns: 1fr 1fr;
|
||||||
|
-ms-grid-rows: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-item {
|
||||||
|
display: block;
|
||||||
|
padding: 20px 30px 20px 15px;
|
||||||
|
border: 1px solid #00000010;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
|
||||||
|
color: #333333;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-item:hover {
|
||||||
|
border-color: #1EA7FD50;
|
||||||
|
transform: translate3d(0, -3px, 0);
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-item:active {
|
||||||
|
border-color: #1EA7FD;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-item strong {
|
||||||
|
font-weight: 700;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-item img {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
margin-right: 15px;
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-item span {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 1em;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
background: #E7FDD8;
|
||||||
|
color: #66BF3C;
|
||||||
|
padding: 4px 12px;
|
||||||
|
margin-right: 10px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-wrapper {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-wrapper code {
|
||||||
|
font-size: 12px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
`}</style>
|
||||||
|
|
||||||
|
# Welcome to Storybook
|
||||||
|
|
||||||
|
Storybook helps you build UI components in isolation from your app's business logic, data, and context.
|
||||||
|
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
|
||||||
|
|
||||||
|
Browse example stories now by navigating to them in the sidebar.
|
||||||
|
View their code in the `src/stories` directory to learn how they work.
|
||||||
|
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
|
||||||
|
|
||||||
|
<div className="subheading">Configure</div>
|
||||||
|
|
||||||
|
<div className="link-list">
|
||||||
|
<a
|
||||||
|
className="link-item"
|
||||||
|
href="https://storybook.js.org/docs/react/addons/addon-types"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<strong>Presets for popular tools</strong>
|
||||||
|
Easy setup for TypeScript, SCSS and more.
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="link-item"
|
||||||
|
href="https://storybook.js.org/docs/react/configure/webpack"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<strong>Build configuration</strong>
|
||||||
|
How to customize webpack and Babel
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="link-item"
|
||||||
|
href="https://storybook.js.org/docs/react/configure/styling-and-css"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<strong>Styling</strong>
|
||||||
|
How to load and configure CSS libraries
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="link-item"
|
||||||
|
href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<strong>Data</strong>
|
||||||
|
Providers and mocking for data libraries
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="subheading">Learn</div>
|
||||||
|
|
||||||
|
<div className="link-list">
|
||||||
|
<a className="link-item" href="https://storybook.js.org/docs" target="_blank">
|
||||||
|
<span>
|
||||||
|
<strong>Storybook documentation</strong>
|
||||||
|
Configure, customize, and extend
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
|
||||||
|
<span>
|
||||||
|
<strong>In-depth guides</strong>
|
||||||
|
Best practices from leading teams
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
|
||||||
|
<span>
|
||||||
|
<strong>GitHub project</strong>
|
||||||
|
View the source and add issues
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a className="link-item" href="https://discord.gg/storybook" target="_blank">
|
||||||
|
<span>
|
||||||
|
<strong>Discord chat</strong>
|
||||||
|
Chat with maintainers and the community
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="tip-wrapper">
|
||||||
|
<span className="tip">Tip</span>Edit the Markdown in{" "}
|
||||||
|
<code>src/stories/Introduction.stories.mdx</code>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* You can add global styles to this file, and also import other style files */
|
||||||
|
|
||||||
|
@import "./tw-theme.css";
|
||||||
|
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
@import "../../angular/src/scss/webfonts.css";
|
||||||
|
@import "./../../../src/scss/variables";
|
||||||
|
@import "../../angular/src/scss/bwicons/styles/style.scss";
|
||||||
|
@import "../../angular/src/scss/icons.scss";
|
||||||
|
|
||||||
|
@import "~bootstrap/scss/_functions";
|
||||||
|
@import "~bootstrap/scss/_variables";
|
||||||
|
@import "~bootstrap/scss/_mixins";
|
||||||
|
@import "~bootstrap/scss/_root";
|
||||||
|
@import "~bootstrap/scss/_reboot";
|
||||||
|
@import "~bootstrap/scss/_type";
|
||||||
|
@import "~bootstrap/scss/_images";
|
||||||
|
@import "~bootstrap/scss/_code";
|
||||||
|
@import "~bootstrap/scss/_grid";
|
||||||
|
@import "~bootstrap/scss/_tables";
|
||||||
|
@import "~bootstrap/scss/_forms";
|
||||||
|
@import "~bootstrap/scss/_buttons";
|
||||||
|
@import "~bootstrap/scss/_transitions";
|
||||||
|
@import "~bootstrap/scss/_dropdown";
|
||||||
|
@import "~bootstrap/scss/_button-group";
|
||||||
|
@import "~bootstrap/scss/_input-group";
|
||||||
|
@import "~bootstrap/scss/_custom-forms";
|
||||||
|
@import "~bootstrap/scss/_nav";
|
||||||
|
@import "~bootstrap/scss/_navbar";
|
||||||
|
@import "~bootstrap/scss/_card";
|
||||||
|
@import "~bootstrap/scss/_breadcrumb";
|
||||||
|
@import "~bootstrap/scss/_pagination";
|
||||||
|
@import "~bootstrap/scss/_badge";
|
||||||
|
@import "~bootstrap/scss/_jumbotron";
|
||||||
|
@import "~bootstrap/scss/_alert";
|
||||||
|
@import "~bootstrap/scss/_progress";
|
||||||
|
@import "~bootstrap/scss/_media";
|
||||||
|
@import "~bootstrap/scss/_list-group";
|
||||||
|
@import "~bootstrap/scss/_close";
|
||||||
|
//@import "~bootstrap/scss/_toasts";
|
||||||
|
@import "~bootstrap/scss/_modal";
|
||||||
|
@import "~bootstrap/scss/_tooltip";
|
||||||
|
@import "~bootstrap/scss/_popover";
|
||||||
|
@import "~bootstrap/scss/_carousel";
|
||||||
|
@import "~bootstrap/scss/_spinners";
|
||||||
|
@import "~bootstrap/scss/_utilities";
|
||||||
|
@import "~bootstrap/scss/_print";
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||||
|
// eslint-disable-next-line
|
||||||
|
import "zone.js/testing";
|
||||||
|
|
||||||
|
import { getTestBed } from "@angular/core/testing";
|
||||||
|
import {
|
||||||
|
BrowserDynamicTestingModule,
|
||||||
|
platformBrowserDynamicTesting,
|
||||||
|
} from "@angular/platform-browser-dynamic/testing";
|
||||||
|
|
||||||
|
declare const require: {
|
||||||
|
context(
|
||||||
|
path: string,
|
||||||
|
deep?: boolean,
|
||||||
|
filter?: RegExp
|
||||||
|
): {
|
||||||
|
<T>(id: string): T;
|
||||||
|
keys(): string[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// First, initialize the Angular testing environment.
|
||||||
|
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
|
||||||
|
|
||||||
|
// Then we find all the tests.
|
||||||
|
const context = require.context("./", true, /\.spec\.ts$/);
|
||||||
|
// And load the modules.
|
||||||
|
context.keys().map(context);
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
:root {
|
||||||
|
--color-background: #ffffff;
|
||||||
|
--color-background-elevation: #fbfbfb;
|
||||||
|
|
||||||
|
--color-primary-300: #6795e8;
|
||||||
|
--color-primary-500: #175ddc;
|
||||||
|
--color-primary-700: #1252a3;
|
||||||
|
|
||||||
|
--color-secondary-100: #f0f0f0;
|
||||||
|
--color-secondary-300: #ced4dc;
|
||||||
|
--color-secondary-500: #89929f;
|
||||||
|
--color-secondary-700: #212529;
|
||||||
|
|
||||||
|
--color-success-500: #017e45;
|
||||||
|
--color-success-700: #003f23;
|
||||||
|
|
||||||
|
--color-danger-500: #c83522;
|
||||||
|
--color-danger-700: #641a11;
|
||||||
|
|
||||||
|
--color-warning-500: #8b6609;
|
||||||
|
--color-warning-700: #463304;
|
||||||
|
|
||||||
|
--color-info-500: #555555;
|
||||||
|
--color-info-700: #2b2b2b;
|
||||||
|
|
||||||
|
--color-text-main: #212529;
|
||||||
|
--color-text-muted: #6d757e;
|
||||||
|
--color-text-contrast: #ffffff;
|
||||||
|
--tw-ring-offset-color: #1f242e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_light {
|
||||||
|
/* should be left empty as white is the default */
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme_dark {
|
||||||
|
--color-background: #1f242e;
|
||||||
|
--color-background-elevation: #161c26;
|
||||||
|
|
||||||
|
--color-primary-300: #175ddc;
|
||||||
|
--color-primary-500: #6a99f0;
|
||||||
|
--color-primary-700: #b4ccf9;
|
||||||
|
|
||||||
|
--color-secondary-100: #2f343d;
|
||||||
|
--color-secondary-300: #6e7689;
|
||||||
|
--color-secondary-500: #bac0ce;
|
||||||
|
--color-secondary-700: #ffffff;
|
||||||
|
|
||||||
|
--color-success-500: #52e07c;
|
||||||
|
--color-success-700: #a8efbe;
|
||||||
|
|
||||||
|
--color-danger-500: #ff8d85;
|
||||||
|
--color-danger-700: #ffbfbb;
|
||||||
|
|
||||||
|
--color-warning-500: #ffeb66;
|
||||||
|
--color-warning-700: #fff5b3;
|
||||||
|
|
||||||
|
--color-info-500: #a4b0c6;
|
||||||
|
--color-info-700: #d1d7e2;
|
||||||
|
|
||||||
|
--color-text-main: #ffffff;
|
||||||
|
--color-text-muted: #bac0ce;
|
||||||
|
--color-text-contrast: #191e26;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { I18nService } from "jslib-common/abstractions/i18n.service";
|
||||||
|
|
||||||
|
export class I18nMockService implements I18nService {
|
||||||
|
locale: string;
|
||||||
|
supportedTranslationLocales: string[];
|
||||||
|
translationLocale: string;
|
||||||
|
collator: Intl.Collator;
|
||||||
|
localeNames: Map<string, string>;
|
||||||
|
|
||||||
|
constructor(private lookupTable: Record<string, string>) {}
|
||||||
|
|
||||||
|
t(id: string, p1?: string, p2?: string, p3?: string) {
|
||||||
|
return this.lookupTable[id];
|
||||||
|
}
|
||||||
|
|
||||||
|
translate(id: string, p1?: string, p2?: string, p3?: string) {
|
||||||
|
return this.t(id, p1, p2, p3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
const colors = require("tailwindcss/colors");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
prefix: "tw-",
|
||||||
|
content: ["./src/**/*.{html,ts}", "./jslib/components/src/**/*.{html,ts}"],
|
||||||
|
safelist: [],
|
||||||
|
corePlugins: { preflight: false },
|
||||||
|
theme: {
|
||||||
|
colors: {
|
||||||
|
transparent: colors.transparent,
|
||||||
|
current: colors.current,
|
||||||
|
primary: {
|
||||||
|
300: "var(--color-primary-300)",
|
||||||
|
500: "var(--color-primary-500)",
|
||||||
|
700: "var(--color-primary-700)",
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
100: "var(--color-secondary-100)",
|
||||||
|
300: "var(--color-secondary-300)",
|
||||||
|
500: "var(--color-secondary-500)",
|
||||||
|
700: "var(--color-secondary-700)",
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
500: "var(--color-success-500)",
|
||||||
|
700: "var(--color-success-700)",
|
||||||
|
},
|
||||||
|
danger: {
|
||||||
|
500: "var(--color-danger-500)",
|
||||||
|
700: "var(--color-danger-700)",
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
500: "var(--color-warning-500)",
|
||||||
|
700: "var(--color-warning-700)",
|
||||||
|
},
|
||||||
|
info: {
|
||||||
|
500: "var(--color-info-500)",
|
||||||
|
700: "var(--color-info-700)",
|
||||||
|
},
|
||||||
|
"text-muted": "var(--color-text-muted)",
|
||||||
|
background: "var(--color-background)",
|
||||||
|
"background-elevation": "var(--color-background-elevation)",
|
||||||
|
},
|
||||||
|
textColor: {
|
||||||
|
main: "var(--color-text-main)",
|
||||||
|
muted: "var(--color-text-muted)",
|
||||||
|
contrast: "var(--color-text-contrast)",
|
||||||
|
success: "var(--color-success-500)",
|
||||||
|
danger: "var(--color-danger-500)",
|
||||||
|
warning: "var(--color-warning-500)",
|
||||||
|
info: "var(--color-info-500)",
|
||||||
|
},
|
||||||
|
ringOffsetColor: ({ theme }) => ({
|
||||||
|
DEFAULT: theme("colors.background"),
|
||||||
|
...theme("colors"),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
const config = require("./tailwind.config.base");
|
||||||
|
|
||||||
|
config.content = ["./src/**/*.{html,ts}", "./.storybook/preview.js"];
|
||||||
|
|
||||||
|
module.exports = config;
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./out-tsc/app",
|
||||||
|
"types": []
|
||||||
|
},
|
||||||
|
"files": ["src/main.ts", "src/polyfills.ts"],
|
||||||
|
"include": ["src/**/*.d.ts"],
|
||||||
|
"exclude": ["**/*.stories.*"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
|
{
|
||||||
|
"compileOnSave": false,
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "./",
|
||||||
|
"outDir": "./dist/out-tsc",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"strict": false,
|
||||||
|
"noImplicitOverride": true,
|
||||||
|
"noPropertyAccessFromIndexSignature": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"declaration": false,
|
||||||
|
"downlevelIteration": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"importHelpers": true,
|
||||||
|
"target": "es2017",
|
||||||
|
"module": "es2020",
|
||||||
|
"lib": ["es2020", "dom"],
|
||||||
|
"paths": {
|
||||||
|
"jslib-common/*": ["../common/src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"angularCompilerOptions": {
|
||||||
|
"enableI18nLegacyMessageIdFormat": false,
|
||||||
|
"strictInjectionParameters": true,
|
||||||
|
"strictInputAccessModifiers": true,
|
||||||
|
"strictTemplates": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./out-tsc/spec",
|
||||||
|
"types": ["jasmine"]
|
||||||
|
},
|
||||||
|
"files": ["src/test.ts", "src/polyfills.ts"],
|
||||||
|
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue