@oslokommune/punkt-react 13.0.3 → 13.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.0.3",
+  "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": "9e0607440983576ee5baff7f3304e13857fa11d1"
+  "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>
 }
 
@@ -28,18 +33,58 @@ export const PktCheckbox = forwardRef(
       className,
       isSwitch = false,
       hideLabel = false,
-      labelPosition,
+      labelPosition = 'right',
       defaultChecked,
       checked,
+      optionalTag,
+      optionalText = 'Valgfritt',
+      requiredTag,
+      requiredText = 'Må fylles ut',
+      tagText,
       ...props
     }: IPktCheckbox,
     ref: ForwardedRef<HTMLInputElement>,
   ): React.ReactElement => {
     const classes = [className, 'pkt-input-check'].filter(Boolean).join(' ')
 
+    const labelClasses = [
+      'pkt-input-check__input-label',
+      disabled ? 'pkt-input-check__input-label--disabled' : '',
+      `pkt-input-check__input-label--${labelPosition}`,
+      hideLabel ? 'pkt-sr-only' : '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+
+    const inputTileClasses = [
+      'pkt-input-check__input',
+      hasTile ? 'pkt-input-check__input--tile' : '',
+      disabled && hasTile ? 'pkt-input-check__input--tile-disabled' : '',
+    ]
+      .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={`pkt-input-check__input ${hasTile ? 'pkt-input-check__input--tile' : ''}`}>
+        <div className={inputTileClasses}>
+          {labelPosition === 'left' && (
+            <label className={labelClasses} htmlFor={id}>
+              {label} {renderTags()}
+              {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
+            </label>
+          )}
           <input
             role={isSwitch ? 'switch' : 'checkbox'}
             ref={ref}
@@ -50,10 +95,12 @@ export const PktCheckbox = forwardRef(
             {...(checked !== undefined ? { checked } : { defaultChecked })}
             {...props}
           />
-          <label className="pkt-input-check__input-label" htmlFor={id}>
-            {label}
-            {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
-          </label>
+          {labelPosition === 'right' && (
+            <label className={labelClasses} htmlFor={id}>
+              {label} {renderTags()}
+              {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
+            </label>
+          )}
         </div>
       </div>
     )

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,31 +32,63 @@ export const PktRadioButton = forwardRef(
       hasError = false,
       defaultChecked,
       checked,
+      optionalTag,
+      optionalText,
+      requiredTag,
+      requiredText,
+      tagText,
       ...props
     }: IPktRadioButton,
     ref: ForwardedRef<HTMLInputElement>,
   ): React.ReactElement => {
     const classes = [className, 'pkt-input-check'].filter(Boolean).join(' ')
 
+    const inputTileClasses = [
+      'pkt-input-check__input',
+      hasTile ? 'pkt-input-check__input--tile' : '',
+      disabled && hasTile ? 'pkt-input-check__input--tile-disabled' : '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+
+    const inputCheckBoxClasses = [
+      'pkt-input-check__input-checkbox',
+      hasError ? 'pkt-input-check__input-checkbox--error' : '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+
+    const labelClasses = ['pkt-input-check__input-label', disabled ? 'pkt-input-check__input-label--disabled' : '']
+      .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={`pkt-input-check__input ${hasTile ? 'pkt-input-check__input--tile' : ''} ${
-            disabled && hasTile ? 'pkt-input-check__input--tile-disabled' : ''
-          }`}
-        >
+        <div className={inputTileClasses}>
           <input
             ref={ref}
             id={id}
             type="radio"
             name={name}
             disabled={disabled}
-            className={`pkt-input-check__input-checkbox ${hasError ? 'pkt-input-check__input-checkbox--error' : ''}`}
+            className={inputCheckBoxClasses}
             {...(checked !== undefined ? { checked } : { defaultChecked })}
             {...props}
           />
-          <label className="pkt-input-check__input-label" htmlFor={id}>
-            {label}
+          <label className={labelClasses} htmlFor={id}>
+            {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}