Majalengka Design System0.1.0
Memulai

Angular

Panduan instalasi dan penggunaan Majalengka Design System di proyek Angular (v17 ke atas).

Majalengka Design System dapat dipasang dengan mudah pada proyek Angular modern (v17, v18, v19+) yang menggunakan arsitektur Standalone Components.

Pemasangan

Jalankan perintah instalasi paket @majalengka/css di proyek Angular Anda:

pnpm add @majalengka/css @majalengka/tokens

Konfigurasi Global CSS

Pilih salah satu metode berikut untuk memuat stylesheet Majalengka:

Opsi 1: Lewat angular.json (Disarankan)

Buka berkas angular.json di root proyek Anda, lalu daftarkan berkas CSS minified ke dalam array styles:

angular.json
{
  "projects": {
    "portal-majalengka": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/@majalengka/css/dist/majalengka.min.css",
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}

Opsi 2: Lewat src/styles.css atau src/styles.scss

Anda juga dapat mengimpor langsung dari berkas stylesheet global:

src/styles.css
/* Memuat Majalengka Design System */
@import "@majalengka/css";

Contoh Standalone Component Angular

Berikut contoh implementasi komponen layanan publik menggunakan Angular Standalone Components dan Signals:

src/app/components/service-card.component.ts
import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-service-card',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="mjl-card p-6 max-w-md mx-auto shadow-mjl-sm">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold font-['Plus_Jakarta_Sans'] text-neutral-900">
          Status Antrean Layanan
        </h2>
        <span class="mjl-badge" [ngClass]="badgeClass()">
          {{ statusText() }}
        </span>
      </div>

      <p class="text-sm text-neutral-600 mb-6">
        Nomor antrean aktif saat ini di Mal Pelayanan Publik (MPP) Majalengka.
      </p>

      <div class="flex gap-3">
        <button
          type="button"
          class="mjl-btn mjl-btn--primary mjl-btn--md"
          (click)="ambilAntrean()"
        >
          Ambil Nomor Baru
        </button>

        <button
          type="button"
          class="mjl-btn mjl-btn--outline mjl-btn--md"
          (click)="refreshStatus()"
        >
          Perbarui
        </button>
      </div>
    </div>
  `
})
export class ServiceCardComponent {
  status = signal<'buka' | 'penuh'>('buka');

  badgeClass() {
    return this.status() === 'buka'
      ? 'bg-emerald-100 text-emerald-800'
      : 'bg-rose-100 text-rose-800';
  }

  statusText() {
    return this.status() === 'buka' ? 'Loket Dibuka' : 'Antrean Penuh';
  }

  ambilAntrean() {
    alert('Nomor antrean berhasil diambil!');
  }

  refreshStatus() {
    this.status.set(this.status() === 'buka' ? 'penuh' : 'buka');
  }
}

Template Root Angular (src/app/app.component.html)

Pastikan layout utama menyertakan skip-link dan container standar Majalengka:

src/app/app.component.html
<!-- Aksesibilitas WCAG 2.1 AA -->
<a href="#main" class="mjl-skip-link">Langsung ke konten utama</a>

<header class="border-b border-neutral-200 py-4 bg-white">
  <div class="mjl-container flex justify-between items-center">
    <span class="font-bold text-lg text-primary-700">Majalengka Public Services</span>
  </div>
</header>

<main id="main" class="mjl-container py-8">
  <router-outlet></router-outlet>
</main>

Svelte & SvelteKit

Cara integrasi Majalengka Design System di proyek Svelte 5 dan SvelteKit.

Warna

Skala warna primer Biru Majalengka (#0014A8), netral, status, dan aksen lokal mangga.

Copyright © 2026