@rijkshuisstijl-community/components-angular 1.0.0

package/src/paragraph/paragraph.component.html

@@ -0,0 +1,3 @@
+<p class="{{ computedClass() }}">
+  <ng-content></ng-content>
+</p>

package/src/paragraph/paragraph.component.spec.ts

@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ParagraphComponent } from './paragraph.component';
+
+describe('ParagraphComponent', () => {
+  let component: ParagraphComponent;
+  let fixture: ComponentFixture<ParagraphComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ParagraphComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ParagraphComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should contain the nl-paragraph class', () => {
+    const element = fixture.debugElement.query(By.css('.nl-paragraph'));
+    expect(element).toBeTruthy();
+  });
+
+  it('should apply the css classes conditionally according to appearance', () => {
+    component.appearance = 'lead';
+    fixture.detectChanges();
+    let element = fixture.debugElement.query(By.css('.nl-paragraph--lead'));
+    expect(element).toBeTruthy();
+
+    component.appearance = undefined;
+    fixture.detectChanges();
+    element = fixture.debugElement.query(By.css('.nl-paragraph--lead'));
+    expect(element).toBeFalsy();
+  });
+
+  it('should render rich text content', () => {
+    const paragraphDebugElement = fixture.debugElement.query(By.css('.nl-paragraph'));
+    paragraphDebugElement.nativeElement.innerHTML = '<strong>Breaking</strong> news';
+    expect(fixture.nativeElement).toContainHTML('strong');
+  });
+});

package/src/paragraph/paragraph.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+
+export const appearanceOptions = [undefined, 'lead'] as const;
+export type AppearanceType = (typeof appearanceOptions)[number];
+
+@Component({
+  selector: 'rhc-paragraph',
+  imports: [],
+  templateUrl: './paragraph.component.html',
+  styleUrl: './paragraph.component.css',
+})
+export class ParagraphComponent {
+  @Input() appearance?: AppearanceType;
+
+  computedClass = () => {
+    switch (this.appearance) {
+      case 'lead':
+        return 'nl-paragraph nl-paragraph--lead';
+      default:
+        return 'nl-paragraph';
+    }
+  };
+}

package/src/public-api.ts

@@ -0,0 +1,9 @@
+/*
+ * Public API Surface of components-angular
+ */
+export * from './heading/heading.component';
+export * from './paragraph/paragraph.component';
+export * from './link/link.component';
+export * from './button/button.component';
+export * from './action-group/action-group.component';
+export * from './icon/public-api';

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "paths": {
+      "components-angular": ["./dist/components-angular"]
+    },
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["**/*.spec.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJs",
+    "types": ["jest", "@testing-library/jest-dom"],
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": ["./setup-jest.ts", "src/**/*.spec.ts", "src/**/*.d.ts"],
+  "exclude": ["**/node_modules/*"]
+}