@i-dot-ai-npm/component-library-react 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@i-dot-ai-npm/component-library-react",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "React components for i.AI GOV.UK (auto-generated from HTML specs).",
   "type": "module",
   "exports": {

package/src/date-input/DateInputField.tsx

@@ -7,7 +7,7 @@ type DateInputFieldProps = {
 export default function DateInputField({ width, class: className, ...rest }: DateInputFieldProps) {
     const classes = [
         "govuk-input govuk-date-input__input",
-        ({ "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4" }[width ?? ""] ?? ""),
+        (width ? { "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4" }[width] : ""),
         className ?? "",
     ]
         .filter(Boolean)

package/src/fieldset/FieldsetLegend.tsx

@@ -11,7 +11,7 @@ type FieldsetLegendProps = {
 export default function FieldsetLegend({ size, isPageHeading, class: className, children, ...rest }: FieldsetLegendProps) {
     const classes = [
         "govuk-fieldset__legend",
-        ({ "small": "govuk-fieldset__legend--s", "medium": "govuk-fieldset__legend--m", "large": "govuk-fieldset__legend--l", "xl": "govuk-fieldset__legend--xl" }[size] ?? ""),
+        (size ? { "small": "govuk-fieldset__legend--s", "medium": "govuk-fieldset__legend--m", "large": "govuk-fieldset__legend--l", "xl": "govuk-fieldset__legend--xl" }[size] : ""),
         className ?? "",
     ]
         .filter(Boolean)

package/src/input/Input.tsx

@@ -13,7 +13,7 @@ export default function Input({ error, extraLetterSpacing, subtle, width, class:
         error ? "govuk-input--error" : "",
         extraLetterSpacing ? "govuk-input--extra-letter-spacing" : "",
         subtle ? "govuk-input--subtle" : "",
-        ({ "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4", "5": "govuk-input--width-5", "10": "govuk-input--width-10", "20": "govuk-input--width-20", "30": "govuk-input--width-30" }[width] ?? ""),
+        (width ? { "2": "govuk-input--width-2", "3": "govuk-input--width-3", "4": "govuk-input--width-4", "5": "govuk-input--width-5", "10": "govuk-input--width-10", "20": "govuk-input--width-20", "30": "govuk-input--width-30" }[width] : ""),
         className ?? "",
     ]
         .filter(Boolean)

package/src/input-label/InputLabel.tsx

@@ -10,7 +10,7 @@ type InputLabelProps = {
 export default function InputLabel({ size, class: className, children, ...rest }: InputLabelProps) {
     const classes = [
         "govuk-label",
-        ({ "small": "govuk-label--s", "medium": "govuk-label--m", "large": "govuk-label--l", "xl": "govuk-label--xl" }[size] ?? ""),
+        (size ? { "small": "govuk-label--s", "medium": "govuk-label--m", "large": "govuk-label--l", "xl": "govuk-label--xl" }[size] : ""),
         className ?? "",
     ]
         .filter(Boolean)

package/src/label/Label.tsx

@@ -11,7 +11,7 @@ type LabelProps = {
 export default function Label({ size, isPageHeading = false, class: className, children, ...rest }: LabelProps) {
     const classes = [
         "govuk-label",
-        ({ "small": "govuk-label--s", "medium": "govuk-label--m", "large": "govuk-label--l", "xl": "govuk-label--xl" }[size] ?? ""),
+        (size ? { "small": "govuk-label--s", "medium": "govuk-label--m", "large": "govuk-label--l", "xl": "govuk-label--xl" }[size] : ""),
         className ?? "",
     ]
         .filter(Boolean)

package/src/link/Link.tsx

@@ -14,7 +14,7 @@ export default function Link({ noUnderline, noVisitedState, variant, class: clas
         "govuk-link",
         noUnderline ? "govuk-link--no-underline" : "",
         noVisitedState ? "govuk-link--no-visited-state" : "",
-        ({ "warning": "govuk-link--warning", "inverse": "govuk-link--inverse" }[variant] ?? ""),
+        (variant ? { "warning": "govuk-link--warning", "inverse": "govuk-link--inverse" }[variant] : ""),
         className ?? "",
     ]
         .filter(Boolean)

package/src/table/TableCaption.tsx

@@ -12,7 +12,7 @@ type TableCaptionProps = {
 export default function TableCaption({ size, class: className, children, ...rest }: TableCaptionProps) {
     const classes = [
         "govuk-table__caption",
-        ({ "small": "govuk-table__caption--s", "medium": "govuk-table__caption--m", "large": "govuk-table__caption--l", "xl": "govuk-table__caption--xl" }[size] ?? ""),
+        (size ? { "small": "govuk-table__caption--s", "medium": "govuk-table__caption--m", "large": "govuk-table__caption--l", "xl": "govuk-table__caption--xl" }[size] : ""),
         className ?? "",
     ]
         .filter(Boolean)

package/src/tag/Tag.tsx

@@ -10,7 +10,7 @@ type TagProps = {
 export default function Tag({ colour, class: className, children, ...rest }: TagProps) {
     const classes = [
         "govuk-tag",
-        ({ "grey": "govuk-tag--grey", "green": "govuk-tag--green", "teal": "govuk-tag--teal", "turquoise": "govuk-tag--turquoise", "blue": "govuk-tag--blue", "light-blue": "govuk-tag--light-blue", "purple": "govuk-tag--purple", "magenta": "govuk-tag--magenta", "pink": "govuk-tag--pink", "red": "govuk-tag--red", "orange": "govuk-tag--orange", "yellow": "govuk-tag--yellow" }[colour] ?? ""),
+        (colour ? { "grey": "govuk-tag--grey", "green": "govuk-tag--green", "teal": "govuk-tag--teal", "turquoise": "govuk-tag--turquoise", "blue": "govuk-tag--blue", "light-blue": "govuk-tag--light-blue", "purple": "govuk-tag--purple", "magenta": "govuk-tag--magenta", "pink": "govuk-tag--pink", "red": "govuk-tag--red", "orange": "govuk-tag--orange", "yellow": "govuk-tag--yellow" }[colour] : ""),
         className ?? "",
     ]
         .filter(Boolean)