@oslokommune/punkt-react 13.0.4 → 13.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.0.4",
+  "version": "13.1.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^13.0.0",
+    "@oslokommune/punkt-elements": "^13.1.0",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -112,5 +112,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "b17a65e093bc83b470feabc13eba6ae162b5b9cb"
+  "gitHead": "eec066758ede7f850bc9f4683957baee56e7abc5"
 }

package/src/components/checkbox/Checkbox.tsx

@@ -13,6 +13,11 @@ export interface IPktCheckbox extends React.InputHTMLAttributes<HTMLInputElement
   isSwitch?: boolean
   hideLabel?: boolean
   labelPosition?: 'right' | 'left'
+  optionalTag?: boolean
+  optionalText?: string
+  requiredTag?: boolean
+  requiredText?: string
+  tagText?: string | null
   onChange?: ChangeEventHandler<HTMLInputElement>
 }
 
@@ -31,6 +36,11 @@ export const PktCheckbox = forwardRef(
       labelPosition = 'right',
       defaultChecked,
       checked,
+      optionalTag,
+      optionalText = 'Valgfritt',
+      requiredTag,
+      requiredText = 'Må fylles ut',
+      tagText,
       ...props
     }: IPktCheckbox,
     ref: ForwardedRef<HTMLInputElement>,
@@ -54,12 +64,24 @@ export const PktCheckbox = forwardRef(
       .filter(Boolean)
       .join(' ')
 
+    const tagClasses = ['pkt-tag', 'pkt-tag--small', 'pkt-tag--thin-text'].join(' ')
+
+    const renderTags = () => {
+      return (
+        <>
+          {tagText && <span className={tagClasses + ` pkt-tag--gray`}>{tagText}</span>}
+          {optionalTag && <span className={tagClasses + ` pkt-tag--blue-light`}>{optionalText}</span>}
+          {requiredTag && <span className={tagClasses + ` pkt-tag--beige`}>{requiredText}</span>}
+        </>
+      )
+    }
+
     return (
       <div className={classes}>
         <div className={inputTileClasses}>
           {labelPosition === 'left' && (
             <label className={labelClasses} htmlFor={id}>
-              {label}
+              {label} {renderTags()}
               {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
             </label>
           )}
@@ -75,7 +97,7 @@ export const PktCheckbox = forwardRef(
           />
           {labelPosition === 'right' && (
             <label className={labelClasses} htmlFor={id}>
-              {label}
+              {label} {renderTags()}
               {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
             </label>
           )}

package/src/components/inputwrapper/InputWrapper.tsx

@@ -17,6 +17,7 @@ export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
   optionalText?: string
   requiredTag?: boolean
   requiredText?: string
+  tagText?: string | null
   hasError?: boolean
   errorMessage?: string | ReactNode
   disabled?: boolean
@@ -45,6 +46,7 @@ export const PktInputWrapper = forwardRef(
       optionalText = 'Valgfritt',
       requiredTag = false,
       requiredText = 'Må fylles ut',
+      tagText = null,
       hasError = false,
       errorMessage,
       disabled = false,
@@ -61,8 +63,6 @@ export const PktInputWrapper = forwardRef(
   ) => {
     const [isHelpTextOpen, setIsHelpTextOpen] = useState(false)
 
-    const tagText = optionalTag ? optionalText : requiredTag ? requiredText : null
-
     const describedBy = ariaDescribedby || (helptext ? `${forId}-helptext` : undefined)
     const showCounter = !!counter
     const counterTop = showCounter && counterPosition === 'top'
@@ -80,15 +80,7 @@ export const PktInputWrapper = forwardRef(
       .filter(Boolean)
       .join(' ')
 
-    const tagClasses = [
-      'pkt-tag',
-      'pkt-tag--small',
-      'pkt-tag--thin-text',
-      optionalTag && 'pkt-tag--blue-light',
-      !optionalTag && requiredTag && 'pkt-tag--beige',
-    ]
-      .filter(Boolean)
-      .join(' ')
+    const tagClasses = ['pkt-tag', 'pkt-tag--small', 'pkt-tag--thin-text'].join(' ')
 
     const Counter = () =>
       showCounter ? (
@@ -98,10 +90,19 @@ export const PktInputWrapper = forwardRef(
         </div>
       ) : null
 
+    const renderTags = () => {
+      return (
+        <>
+          {tagText && <span className={tagClasses + ` pkt-tag--gray`}>{tagText}</span>}
+          {optionalTag && <span className={tagClasses + ` pkt-tag--blue-light`}>{optionalText}</span>}
+          {requiredTag && <span className={tagClasses + ` pkt-tag--beige`}>{requiredText}</span>}
+        </>
+      )
+    }
     const renderLabel = () => {
       const labelContent = (
         <>
-          {label} {tagText && <span className={tagClasses}>{tagText}</span>}
+          {label} {renderTags()}
         </>
       )
 

package/src/components/radio/RadioButton.tsx

@@ -11,6 +11,11 @@ export interface IPktRadioButton extends React.InputHTMLAttributes<HTMLInputElem
   checked?: boolean
   hasError?: boolean
   value?: string
+  optionalTag?: boolean
+  optionalText?: string
+  requiredTag?: boolean
+  requiredText?: string
+  tagText?: string | null
   onChange?: ChangeEventHandler<HTMLInputElement>
 }
 
@@ -27,6 +32,11 @@ export const PktRadioButton = forwardRef(
       hasError = false,
       defaultChecked,
       checked,
+      optionalTag,
+      optionalText,
+      requiredTag,
+      requiredText,
+      tagText,
       ...props
     }: IPktRadioButton,
     ref: ForwardedRef<HTMLInputElement>,
@@ -52,6 +62,18 @@ export const PktRadioButton = forwardRef(
       .filter(Boolean)
       .join(' ')
 
+    const tagClasses = ['pkt-tag', 'pkt-tag--small', 'pkt-tag--thin-text'].join(' ')
+
+    const renderTags = () => {
+      return (
+        <>
+          {tagText && <span className={tagClasses + ` pkt-tag--gray`}>{tagText}</span>}
+          {optionalTag && <span className={tagClasses + ` pkt-tag--blue-light`}>{optionalText}</span>}
+          {requiredTag && <span className={tagClasses + ` pkt-tag--beige`}>{requiredText}</span>}
+        </>
+      )
+    }
+
     return (
       <div className={classes}>
         <div className={inputTileClasses}>
@@ -66,7 +88,7 @@ export const PktRadioButton = forwardRef(
             {...props}
           />
           <label className={labelClasses} htmlFor={id}>
-            {label}
+            {label} {renderTags()}
             {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
           </label>
         </div>

package/src/components/select/Select.tsx

@@ -30,6 +30,7 @@ export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement>
   optionalText?: string
   requiredTag?: boolean
   requiredText?: string
+  tagText?: string | null
   options?: Array<{ value: string; label: string; disabled?: boolean }>
 }
 
@@ -55,6 +56,7 @@ export const PktSelect = forwardRef(
       optionalText,
       requiredTag = false,
       requiredText,
+      tagText,
       ...props
     }: IPktSelectProps,
     ref: ForwardedRef<HTMLSelectElement>,
@@ -72,6 +74,7 @@ export const PktSelect = forwardRef(
         optionalText={optionalText}
         requiredTag={requiredTag}
         requiredText={requiredText}
+        tagText={tagText}
         hasError={hasError}
         errorMessage={errorMessage}
         disabled={disabled}

package/src/components/textarea/Textarea.tsx

@@ -33,6 +33,7 @@ export interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement
   optionalText?: string
   requiredTag?: boolean
   requiredText?: string
+  tagText?: string | null
   placeholder?: string
   rows?: number
   useWrapper?: boolean
@@ -69,6 +70,7 @@ export const PktTextarea = forwardRef(
       optionalText,
       requiredTag = false,
       requiredText,
+      tagText = null,
       placeholder,
       rows,
       useWrapper = true,
@@ -121,6 +123,7 @@ export const PktTextarea = forwardRef(
         optionalText={optionalText}
         requiredTag={requiredTag}
         requiredText={requiredText}
+        tagText={tagText}
         useWrapper={useWrapper}
         counter={counter}
         counterCurrent={counterCurrent}

package/src/components/textinput/Textinput.tsx

@@ -36,6 +36,7 @@ export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
   optionalText?: string
   requiredTag?: boolean
   requiredText?: string
+  tagText?: string | null
   placeholder?: string
   prefix?: string
   suffix?: string
@@ -81,6 +82,7 @@ export const PktTextinput = forwardRef(
       optionalText,
       requiredTag = false,
       requiredText,
+      tagText = null,
       placeholder,
       prefix,
       suffix,
@@ -144,6 +146,7 @@ export const PktTextinput = forwardRef(
         optionalText={optionalText}
         requiredTag={requiredTag}
         requiredText={requiredText}
+        tagText={tagText}
         useWrapper={useWrapper}
         counter={counter}
         counterCurrent={counterCurrent}