@oslokommune/punkt-react 12.2.0 → 12.3.0

package/CHANGELOG.md

@@ -5,6 +5,30 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [12.3.0](https://github.com/oslokommune/punkt/compare/12.2.0...12.3.0) (2024-10-03)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+* Eksperimentell release av Punkt Elements. EKSPERIMENTELL! (#1940). * feat(all): Eksperimentell release av Punkt Elements. EKSPERIMENTELL!
+  
+  * feat(all): Eksperimentell release av Punkt Elements. EKSPERIMENTELL!
+  
+  Tvinger bygg
+* Eksperimentell release av Punkt Elements. EKSPERIMENTELL! (#1939). 
+* Eksperimentell release for Punkt Elements. EKSPERIMENTELL!. Denne release bør kun brukes til testing av nye custom elements (web components) og skal helst ikke brukes i produksjon. Når vi er *ferdig testet* vil ny release bli neste major-release.
+
+
+### Bug Fixes
+Ingen
+
+### Chores
+Ingen
+
+---
+
+
 ## [12.2.0](https://github.com/oslokommune/punkt/compare/12.1.0...12.2.0) (2024-09-30)
 
 ### ⚠ BREAKING CHANGES

package/README.md

@@ -2,7 +2,7 @@
 
 <a href="https://www.npmjs.com/package/@oslokommune/punkt-react" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-react?logo=react&label=react&style=for-the-badge&color=61dafb" alt="React komponenter" /></a>
 
-Dette repoet inneholder Punkt sine UI-komponenter for React. Komponentene er laget for å fungere sammen med `@oslokommune/punkt-assets` og `@oslokommune/punkt-css`.
+Dette repoet inneholder Punkt sine UI-komponenter for React. Komponentene er laget for å fungere sammen med `@oslokommune/punkt-assets` og `@oslokommune/punkt-css`. Enkelte komponenter tar i bruk custom elements fra `@oslokommune/punkt-elements`. Enn så lenge støtter vi ikke full bruk i server-side-genererte apper.
 
 ## 📝 Forutsetninger
 

package/dist/index.d.ts

@@ -2,11 +2,13 @@
 
 import { Context } from 'react';
 import { default as default_2 } from 'react';
+import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { HTMLProps } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { PktElType } from '../../interfaces/IPktElements';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -104,6 +106,21 @@ declare interface IPktButton extends default_2.ButtonHTMLAttributes<HTMLButtonEl
     onClick?: (event: default_2.MouseEvent<HTMLButtonElement>) => void;
 }
 
+declare interface IPktCard extends PktElType {
+    direction?: 'portrait' | 'landscape';
+    skin?: 'outlined' | 'gray' | 'beige' | 'green' | 'blue';
+    heading?: string;
+    subheading?: string;
+    tags?: (Omit<IPktTag, 'closeTag'> & {
+        text: string;
+    })[];
+    image?: {
+        src: string;
+        alt: string;
+    };
+    children?: ReactNode | ReactNode[];
+}
+
 declare interface IPktCheckbox extends default_2.InputHTMLAttributes<HTMLInputElement> {
     id: string;
     hasTile?: boolean;
@@ -118,6 +135,40 @@ declare interface IPktCheckbox extends default_2.InputHTMLAttributes<HTMLInputEl
     value?: string;
 }
 
+declare interface IPktDatepicker extends PktElType {
+    value?: string | string[];
+    label?: string;
+    id?: string;
+    dateformat?: string;
+    multiple?: boolean;
+    maxlength?: number;
+    disabled?: boolean;
+    range?: boolean;
+    weeknumbers?: boolean;
+    withcontrols?: boolean;
+    fullWidth?: boolean;
+    min?: string | number | undefined;
+    max?: string | number | undefined;
+    excludedates?: string[];
+    excludeweekdays?: string[];
+    currentmonth?: string;
+    calendarOpen?: boolean;
+    required?: boolean;
+    requiredTag?: boolean;
+    requiredText?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    helptext?: string;
+    helptextDropdown?: string;
+    helptextDropdownButton?: string;
+    hasError?: boolean;
+    errorMessage?: string;
+    strings?: any;
+    onChange?: (e: Event) => void;
+    onValueChange?: (e: CustomEvent) => void;
+    onToggleHelpText?: (e: CustomEvent) => void;
+}
+
 declare interface IPktFooter extends default_2.HTMLAttributes<HTMLDivElement> {
     columnOne: Column;
     columnTwo: Column;
@@ -180,6 +231,15 @@ declare interface IPktInputWrapper extends RefAttributes<HTMLElement> {
     hasFieldset?: boolean;
 }
 
+declare interface IPktLink extends PktElType {
+    href?: string;
+    iconName?: string | undefined;
+    iconPosition?: string | undefined;
+    external?: boolean;
+    onClick?: (e: CustomEvent) => void;
+    children?: default_2.ReactNode | default_2.ReactNode[];
+}
+
 declare interface IPktLinkCard extends default_2.HTMLAttributes<HTMLAnchorElement> {
     skin?: 'normal' | 'blue' | 'beige' | 'beige-outline' | 'green' | 'grey' | 'gray' | 'grey-outline' | 'gray-outline';
     title?: string;
@@ -410,6 +470,7 @@ declare interface ISpecObject {
     name?: string;
     'css-class'?: string;
     'dark-mode'?: boolean;
+    isElement?: boolean;
     props?: Record<string, PropObject | string[]>;
     events?: Record<string, PropObject>;
     slots?: Record<string, any>;
@@ -475,8 +536,12 @@ export declare const PktBreadcrumbs: default_2.ForwardRefExoticComponent<IPktBre
 
 export declare const PktButton: default_2.ForwardRefExoticComponent<IPktButton & default_2.RefAttributes<HTMLButtonElement>>;
 
+export declare const PktCard: FC<IPktCard>;
+
 export declare const PktCheckbox: default_2.ForwardRefExoticComponent<IPktCheckbox & default_2.RefAttributes<HTMLInputElement>>;
 
+export declare const PktDatepicker: FC<IPktDatepicker>;
+
 export declare const PktFooter: default_2.FC<IPktFooter>;
 
 export declare const PktFooterSimple: default_2.FC<IPktFooterSimple>;
@@ -508,6 +573,8 @@ export declare const PktInput: default_2.ForwardRefExoticComponent<InputProps &
 
 export declare const PktInputWrapper: default_2.ForwardRefExoticComponent<Omit<IPktInputWrapper, "ref"> & default_2.RefAttributes<HTMLDivElement>>;
 
+export declare const PktLink: FC<IPktLink>;
+
 export declare const PktLinkCard: default_2.ForwardRefExoticComponent<IPktLinkCard & default_2.RefAttributes<HTMLAnchorElement>>;
 
 export declare const PktLoader: default_2.ForwardRefExoticComponent<IPktLoader & default_2.RefAttributes<HTMLDivElement>>;
@@ -558,6 +625,7 @@ declare type PropObject = {
     name?: string;
     description?: string;
     type?: string | string[];
+    variant?: string;
     converter?: string;
     reflect?: boolean;
     default?: any;