Component Library scaffolding (#625)
This commit is contained in:
Oscar Hinton
GitHub
parent
fa3a95fed0
commit
67a4fc8591
|
|
@ -1,5 +1,6 @@
|
|||
# Build directories
|
||||
dist
|
||||
.angular
|
||||
coverage
|
||||
|
||||
# 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