@ks-digital/designsystem-angular 0.0.1-alpha.23 → 0.0.1-alpha.25

package/src/components/textarea/textarea.mdx

@@ -0,0 +1,14 @@
+import { Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks'
+
+import * as TextareaStories from './textarea.stories'
+
+<Meta of={TextareaStories} />
+
+# Textarea
+
+`Textarea` brukes når brukeren skal kunne skrive inn tekst som går over flere linjer.
+
+<Primary />
+<Controls />
+
+## Bruk

package/src/components/textarea/textarea.stories.ts

@@ -0,0 +1,52 @@
+import {
+  argsToTemplate,
+  moduleMetadata,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular'
+import { CommonArgs } from '../../../.storybook/default-args'
+import { Field } from '../field/field'
+import { Input } from '../input/input'
+import { Label } from '../label/label'
+
+type TextareaArgs = CommonArgs & {
+  readonly: boolean
+  disabled: boolean
+}
+
+const meta: Meta<TextareaArgs> = {
+  component: Input,
+  title: 'Komponenter/Textarea',
+  decorators: [
+    moduleMetadata({
+      imports: [Label, Field, Input],
+    }),
+  ],
+}
+export default meta
+type Story = StoryObj<TextareaArgs>
+
+export const Preview: Story = {
+  args: {
+    readonly: false,
+    disabled: false,
+  },
+
+  render: (args) => ({
+    props: args,
+    template: `
+    <div style="
+        display: flex;
+        flex-direction: column;
+        gap: var(--ds-size-2);
+        max-width: 100%;
+        width: 20rem
+      " >
+        <ksd-field>
+          <ksd-label>Label</ksd-label>
+          <textarea ksd-input type="text" ${argsToTemplate(args)}></textarea>
+        </ksd-field>
+      </div>
+    `,
+  }),
+}

package/src/components/validation-message/index.ts

@@ -0,0 +1 @@
+export { ValidationMessage } from './validation-message'

package/src/components/validation-message/validation-message.ts

@@ -0,0 +1,11 @@
+import { Directive } from '@angular/core'
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[ksd-validation-message]',
+  host: {
+    class: 'ds-validation-message',
+    'data-field': 'validation',
+  },
+})
+export class ValidationMessage {}

package/src/index.ts

@@ -0,0 +1,14 @@
+export * from './components/alert'
+export * from './components/button'
+export * from './components/card'
+export * from './components/common-inputs'
+export * from './components/details'
+export * from './components/field'
+export * from './components/fieldset'
+export * from './components/input'
+export * from './components/label'
+export * from './components/paragraph'
+export * from './components/popover'
+export * from './components/search'
+export * from './components/spinner'
+export * from './components/validation-message'

package/src/test-setup.ts

@@ -0,0 +1,12 @@
+import '@analogjs/vitest-angular/setup-zone'
+
+import { getTestBed } from '@angular/core/testing'
+import {
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from '@angular/platform-browser/testing'
+
+getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting())
+
+// Need jest-dom for matchers like expect.toHaveAttribute
+import '@testing-library/jest-dom'

package/src/utils/log-if-devmode.ts

@@ -0,0 +1,13 @@
+import { isDevMode } from '@angular/core'
+
+export const logIfDevMode = ({
+  component,
+  message,
+}: {
+  component: string
+  message: string
+}) => {
+  if (isDevMode()) {
+    console.log(`[${component}] ${message}`)
+  }
+}

package/src/utils/random-id.ts

@@ -0,0 +1,3 @@
+export const randomId = () => {
+  return `:${Math.random().toString(36).slice(2, 7)}`
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInputAccessModifiers": true,
+    "strictInjectionParameters": true,
+    "strictTemplates": true,
+    "extendedDiagnostics": {
+      "defaultCategory": "error"
+    }
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts", "src/typings.d.ts"],
+  "exclude": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/test-setup.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,30 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest",
+      "@testing-library/jest-dom"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "files": ["src/test-setup.ts"]
+}

package/vite.config.mts

@@ -0,0 +1,35 @@
+/// <reference types='vitest' />
+import angular from '@analogjs/vite-plugin-angular'
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin'
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'
+import * as path from 'path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/angular',
+  plugins: [
+    angular({
+      inlineStylesExtension: 'scss',
+    }),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    setupFiles: ['src/test-setup.ts'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/packages/angular',
+      provider: 'v8' as const,
+    },
+  },
+}))

package/dist/README.md

@@ -1,55 +0,0 @@
-# 🚧 KS Digital Designsystem for Angular
-
-> This is an experimental POC as for now
-
-This library provides Angular components for KS Digital, designed to align closely with the components from [Designsystemet.no](https://www.designsystemet.no/komponenter).
-
-## Installation (WIP)
-
-Install the required packages using your preferred package manager:
-
-```bash
-pnpm add @ks-digital/designsystem-angular @ks-digital/designsystem-themes
-```
-
-## Setup
-
-### 1. Include the Inter Font
-
-Add the Inter font to your `index.html`. This API supports the same parameters as the Google Fonts API, allowing you to customize the font weights as needed:
-
-```html
-<link href="https://static.fiks.ks.no/googlefonts/googleapis/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
-```
-
-### 2. Import Base Styles and Themes
-
-Import the base styles and the theme you want to use in your application:
-
-```css
-@import url('@ks-digital/designsystem-themes/base.css');
-@import url('@ks-digital/designsystem-themes/forvaltning.css');
-```
-
-### 3. Use Components
-
-```ts
-import { Button } from '@ks-digital/designsystem-angular'
-
-@Component({
-  imports: [Button],
-  template: `
-  <button ksd-button>
-    Click me
-  </button>
-  `,
-})
-```
-
-## Example
-
-A complete example setup is available in the `angular-demo` located under the `apps` folder.
-
-## Development
-
-`pnpm nx run @ks-digital/designsystem-angular:storybook`