@i-dot-ai-npm/component-library-react 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/package.json +1 -1
  2. package/src/breadcrumbs/BreadcrumbItem.tsx +8 -0
  3. package/src/button/Button.tsx +22 -3
  4. package/src/character-count/CharacterCount.tsx +5 -2
  5. package/src/checkboxes/CheckboxConditional.tsx +24 -0
  6. package/src/date-input/DateInputField.tsx +2 -2
  7. package/src/error-message/ErrorMessage.tsx +5 -4
  8. package/src/error-summary/ErrorSummaryItem.tsx +6 -3
  9. package/src/exit-this-page/ExitThisPage.tsx +40 -0
  10. package/src/feedback/Feedback.tsx +27 -0
  11. package/src/fieldset/FieldsetLegend.tsx +5 -2
  12. package/src/footer/Footer.tsx +203 -0
  13. package/src/govuk-header/GovukHeader.tsx +61 -0
  14. package/src/header/Header.tsx +4 -2
  15. package/src/index.ts +21 -0
  16. package/src/label/Label.tsx +31 -0
  17. package/src/language-navigation/LanguageNavigation.tsx +27 -0
  18. package/src/language-navigation/LanguageNavigationItem.tsx +56 -0
  19. package/src/pagination/PaginationItem.tsx +25 -12
  20. package/src/pagination/PaginationNext.tsx +31 -9
  21. package/src/pagination/PaginationPrev.tsx +30 -9
  22. package/src/panel/Panel.tsx +24 -0
  23. package/src/panel/PanelActions.tsx +17 -0
  24. package/src/panel/PanelBody.tsx +17 -0
  25. package/src/panel/PanelTitle.tsx +17 -0
  26. package/src/phase-banner/PhaseBanner.tsx +1 -1
  27. package/src/phase-banner/PhaseBannerText.tsx +17 -0
  28. package/src/radios/RadioConditional.tsx +24 -0
  29. package/src/radios/RadioLabel.tsx +17 -0
  30. package/src/service-navigation/ServiceNavigation.tsx +84 -8
  31. package/src/service-navigation/ServiceNavigationItem.tsx +28 -6
  32. package/src/summary-card/SummaryCard.tsx +17 -0
  33. package/src/summary-card/SummaryCardAction.tsx +17 -0
  34. package/src/summary-card/SummaryCardActions.tsx +28 -0
  35. package/src/summary-card/SummaryCardContent.tsx +17 -0
  36. package/src/summary-card/SummaryCardTitle.tsx +17 -0
  37. package/src/summary-card/SummaryCardTitleWrapper.tsx +17 -0
  38. package/src/table/TableHeader.tsx +3 -2
  39. package/src/tag/Tag.tsx +2 -2
  40. package/src/textarea/Textarea.tsx +3 -2
package/src/summary-card/SummaryCardContent.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ type SummaryCardContentProps = {
4
+ class?: string;
5
+ children?: ReactNode;
6
+ [key: string]: unknown;
7
+ };
8
+
9
+ export default function SummaryCardContent({ class: className, children, ...rest }: SummaryCardContentProps) {
10
+ const classes = ["govuk-summary-card__content", className ?? ""].filter(Boolean).join(" ");
11
+
12
+ return (
13
+ <div className={classes} {...rest}>
14
+ {children ?? ""}
15
+ </div>
16
+ );
17
+ }
package/src/summary-card/SummaryCardTitle.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ type SummaryCardTitleProps = {
4
+ class?: string;
5
+ children?: ReactNode;
6
+ [key: string]: unknown;
7
+ };
8
+
9
+ export default function SummaryCardTitle({ class: className, children, ...rest }: SummaryCardTitleProps) {
10
+ const classes = ["govuk-summary-card__title", className ?? ""].filter(Boolean).join(" ");
11
+
12
+ return (
13
+ <h2 className={classes} {...rest}>
14
+ {children ?? ""}
15
+ </h2>
16
+ );
17
+ }
package/src/summary-card/SummaryCardTitleWrapper.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ type SummaryCardTitleWrapperProps = {
4
+ class?: string;
5
+ children?: ReactNode;
6
+ [key: string]: unknown;
7
+ };
8
+
9
+ export default function SummaryCardTitleWrapper({ class: className, children, ...rest }: SummaryCardTitleWrapperProps) {
10
+ const classes = ["govuk-summary-card__title-wrapper", className ?? ""].filter(Boolean).join(" ");
11
+
12
+ return (
13
+ <div className={classes} {...rest}>
14
+ {children ?? ""}
15
+ </div>
16
+ );
17
+ }
package/src/table/TableHeader.tsx CHANGED
@@ -4,12 +4,13 @@ import { ReactNode } from 'react';
4
4
 
5
5
  type TableHeaderProps = {
6
6
  numeric?: boolean;
7
+ scope?: "col" | "row" | "colgroup" | "rowgroup";
7
8
  class?: string;
8
9
  children?: ReactNode;
9
10
  [key: string]: unknown;
10
11
  };
11
12
 
12
- export default function TableHeader({ numeric, class: className, children, ...rest }: TableHeaderProps) {
13
+ export default function TableHeader({ numeric, scope = "col", class: className, children, ...rest }: TableHeaderProps) {
13
14
  const classes = [
14
15
  "govuk-table__header",
15
16
  numeric ? "govuk-table__header--numeric" : "",
@@ -19,7 +20,7 @@ export default function TableHeader({ numeric, class: className, children, ...re
19
20
  .join(" ");
20
21
 
21
22
  return (
22
- <th className={classes} scope="col" {...rest}>
23
+ <th className={classes} scope={scope} {...rest}>
23
24
  {children ?? ""}
24
25
  </th>
25
26
  );
package/src/tag/Tag.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ReactNode } from 'react';
2
2
 
3
3
  type TagProps = {
4
- colour?: "grey" | "green" | "turquoise" | "blue" | "light-blue" | "purple" | "pink" | "red" | "orange" | "yellow";
4
+ colour?: "grey" | "green" | "teal" | "turquoise" | "blue" | "light-blue" | "purple" | "magenta" | "pink" | "red" | "orange" | "yellow";
5
5
  class?: string;
6
6
  children?: ReactNode;
7
7
  [key: string]: unknown;
@@ -10,7 +10,7 @@ type TagProps = {
10
10
  export default function Tag({ colour, class: className, children, ...rest }: TagProps) {
11
11
  const classes = [
12
12
  "govuk-tag",
13
- ({ "grey": "govuk-tag--grey", "green": "govuk-tag--green", "turquoise": "govuk-tag--turquoise", "blue": "govuk-tag--blue", "light-blue": "govuk-tag--light-blue", "purple": "govuk-tag--purple", "pink": "govuk-tag--pink", "red": "govuk-tag--red", "orange": "govuk-tag--orange", "yellow": "govuk-tag--yellow" }[colour] ?? ""),
13
+ ({ "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] ?? ""),
14
14
  className ?? "",
15
15
  ]
16
16
  .filter(Boolean)
package/src/textarea/Textarea.tsx CHANGED
@@ -1,11 +1,12 @@
1
1
  type TextareaProps = {
2
2
  error?: boolean;
3
3
  subtle?: boolean;
4
+ value?: string;
4
5
  class?: string;
5
6
  [key: string]: unknown;
6
7
  };
7
8
 
8
- export default function Textarea({ error, subtle, class: className, ...rest }: TextareaProps) {
9
+ export default function Textarea({ error, subtle, value, class: className, ...rest }: TextareaProps) {
9
10
  const classes = [
10
11
  "govuk-textarea",
11
12
  error ? "govuk-textarea--error" : "",
@@ -16,6 +17,6 @@ export default function Textarea({ error, subtle, class: className, ...rest }: T
16
17
  .join(" ");
17
18
 
18
19
  return (
19
- <textarea className={classes} {...rest}></textarea>
20
+ <textarea className={classes} defaultValue={value} {...rest}></textarea>
20
21
  );
21
22
  }