OZG-6988 Add styling

alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-container.component.html

@@ -30,9 +30,11 @@
     data-test-id="statistik-fields-form"
   ></admin-statistik-fields-form>
 } @else {
+  <div class="mt-4">
     <ods-button
       text="Weitere Felder auswerten"
       (clickEmitter)="showEvaluateFieldsForm()"
       data-test-id="weitere-felder-auswerten-button"
     ></ods-button>
+  </div>
 }

alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.html

 <h2 class="heading-2" data-test-id="statistik-fields-form-header-text">Felder zur Auswertung hinzufügen</h2>
 
+<div class="flex max-w-4xl flex-col gap-4">
   <ods-text-input
     [fieldControl]="formEngineFormControl"
     label="Formengine"
@@ -23,9 +24,14 @@
     ></ods-text-input>
   }
 
-<ods-button text="Datenfeld hinzufügen" (clickEmitter)="addDataField()" data-test-id="add-data-field-button"> </ods-button>
+  <ods-button text="Datenfeld hinzufügen" (clickEmitter)="addDataField()" data-test-id="add-data-field-button">
+    <ods-plus-icon icon class="fill-whitetext" />
+  </ods-button>
 
+  <div class="mt-4 flex gap-4">
     <ods-button text="Speichern" data-test-id="save-statistik-fields-button"></ods-button>
-<ods-button text="Abbrechen" (clickEmitter)="cancel.emit()" data-test-id="cancel-statistik-fields-button">
-  <ods-close-icon icon></ods-close-icon>
+    <ods-button text="Abbrechen" variant="outline" (clickEmitter)="cancel.emit()" data-test-id="cancel-statistik-fields-button">
+      <ods-close-icon icon class="fill-primary" />
     </ods-button>
+  </div>
+</div>

alfa-client/libs/admin/statistik/src/lib/statistik-container/statistik-fields-form/admin-statistik-fields-form.component.ts

 import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, inject, Output } from '@angular/core';
 import { FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { ButtonComponent, CloseIconComponent, TextInputComponent } from '@ods/system';
+import { ButtonComponent, CloseIconComponent, PlusIconComponent, TextInputComponent } from '@ods/system';
 import { StatistikFieldsFormService } from './statistik-fields.formservice';
 
 @Component({
   selector: 'admin-statistik-fields-form',
   standalone: true,
-  imports: [CommonModule, TextInputComponent, ButtonComponent, CloseIconComponent, ReactiveFormsModule],
+  imports: [CommonModule, TextInputComponent, ButtonComponent, CloseIconComponent, ReactiveFormsModule, PlusIconComponent],
   providers: [StatistikFieldsFormService],
   templateUrl: './admin-statistik-fields-form.component.html',
 })

alfa-client/libs/design-system/src/index.ts

@@ -62,6 +62,7 @@ export * from './lib/icons/office-icon/office-icon.component';
 export * from './lib/icons/orga-unit-icon/orga-unit-icon.component';
 export * from './lib/icons/ozg-logo-icon/ozg-logo-icon.component';
 export * from './lib/icons/person-icon/person-icon.component';
+export * from './lib/icons/plus-icon/plus-icon.component';
 export * from './lib/icons/public-administration-icon/public-administration-icon.component';
 export * from './lib/icons/save-icon/save-icon.component';
 export * from './lib/icons/search-icon/search-icon.component';

alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PlusIconComponent } from './plus-icon.component';
+
+describe('PlusIconComponent', () => {
+  let component: PlusIconComponent;
+  let fixture: ComponentFixture<PlusIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlusIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PlusIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.component.ts

+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-plus-icon',
+  standalone: true,
+  imports: [NgClass],
+  template: `<svg
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-primary', class)]"
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M11 13H5V11H11V5H13V11H19V13H13V19H11V13Z" />
+  </svg>`,
+})
+export class PlusIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = undefined;
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}

alfa-client/libs/design-system/src/lib/icons/plus-icon/plus-icon.stories.ts

+/*
+ * Copyright (C) 2024 Das Land Schleswig-Holstein vertreten durch den
+ * Ministerpräsidenten des Landes Schleswig-Holstein
+ * Staatskanzlei
+ * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
+ *
+ * Lizenziert unter der EUPL, Version 1.2 oder - sobald
+ * diese von der Europäischen Kommission genehmigt wurden -
+ * Folgeversionen der EUPL ("Lizenz");
+ * Sie dürfen dieses Werk ausschließlich gemäß
+ * dieser Lizenz nutzen.
+ * Eine Kopie der Lizenz finden Sie hier:
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Sofern nicht durch anwendbare Rechtsvorschriften
+ * gefordert oder in schriftlicher Form vereinbart, wird
+ * die unter der Lizenz verbreitete Software "so wie sie
+ * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
+ * ausdrücklich oder stillschweigend - verbreitet.
+ * Die sprachspezifischen Genehmigungen und Beschränkungen
+ * unter der Lizenz sind dem Lizenztext zu entnehmen.
+ */
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { PlusIconComponent } from './plus-icon.component';
+
+const meta: Meta<PlusIconComponent> = {
+  title: 'Icons/Plus icon',
+  component: PlusIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<PlusIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};

alfa-client/tsconfig.base.json

@@ -16,8 +16,8 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@admin-client/configuration-shared": ["libs/admin/configuration-shared/src/index.ts"],
       "@admin-client/configuration": ["libs/admin/configuration/src/index.ts"],
+      "@admin-client/configuration-shared": ["libs/admin/configuration-shared/src/index.ts"],
       "@admin-client/organisations-einheit": ["libs/admin/organisations-einheit/src/index.ts"],
       "@admin-client/organisations-einheit-shared": ["libs/admin/organisations-einheit-shared/src/index.ts"],
       "@admin-client/postfach": ["libs/admin/postfach/src/index.ts"],