From 93f3bcd30e47e18a4618a774adbfacd13e5d8ac4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CPatrick=E2=80=9C?=
Date: Thu, 8 Jun 2023 14:06:41 -0400
Subject: [PATCH 01/21] feat:error messages from array
---
.../FormAlertMessage/FormAlertMessage.js | 69 +++++++++++++++++++
.../FormAlertMessage.stories.js | 24 +++++++
.../Media/VideoPlayer/Video.stories.js | 2 +-
src/index.ts | 1 +
4 files changed, 95 insertions(+), 1 deletion(-)
create mode 100644 src/components/FormAlertMessage/FormAlertMessage.js
create mode 100644 src/components/FormAlertMessage/FormAlertMessage.stories.js
diff --git a/src/components/FormAlertMessage/FormAlertMessage.js b/src/components/FormAlertMessage/FormAlertMessage.js
new file mode 100644
index 00000000..e8413032
--- /dev/null
+++ b/src/components/FormAlertMessage/FormAlertMessage.js
@@ -0,0 +1,69 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { ContextualAlert } from "../ContextualAlert/ContextualAlert";
+
+export function FormAlertMessage(props) {
+ const {
+ message_heading,
+ id,
+ alert_icon_id,
+ alert_icon_alt_text,
+ error_list,
+ whiteBG,
+ } = props;
+
+ return (
+
+ {error_list.map((line, i) => (
+
+
+ {line}
+
+
+ ))}
+ ,
+ ]}
+ />
+ );
+}
+
+FormAlertMessage.propTypes = {
+ /**
+ * component id
+ */
+ id: PropTypes.string.isRequired,
+
+ /**
+ * id for the alert icon
+ */
+ alert_icon_id: PropTypes.string.isRequired,
+
+ /**
+ * Alternate text for the alert icon
+ */
+ alert_icon_alt_text: PropTypes.string.isRequired,
+
+ /**
+ * heading text
+ */
+ message_heading: PropTypes.string.isRequired,
+
+ /**
+ * A list of plaintext error messages
+ */
+ error_list: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string)])
+ .isRequired,
+
+ /**
+ * If true the background will be white, default is transparent.
+ */
+ whiteBG: PropTypes.bool,
+};
diff --git a/src/components/FormAlertMessage/FormAlertMessage.stories.js b/src/components/FormAlertMessage/FormAlertMessage.stories.js
new file mode 100644
index 00000000..ab4c2c7e
--- /dev/null
+++ b/src/components/FormAlertMessage/FormAlertMessage.stories.js
@@ -0,0 +1,24 @@
+import { FormAlertMessage } from "./FormAlertMessage";
+export default {
+ title: "Components/FormAlertMessage",
+ component: FormAlertMessage,
+};
+
+const Template = (args) => ;
+
+export const Default = Template.bind({});
+
+Default.args = {
+ id: "formerrors",
+ error_list: [
+ "Last name is required",
+ "Email address must be in the format of example@email.com",
+ "Password must include both numbers and letters",
+ "A valid postal code is required for your selected city",
+ ],
+ message_heading:
+ "The form could not be submitted because 4 errors were found",
+ alert_icon_alt_text: "danger icon",
+ alert_icon_id: "danger icon",
+ whiteBG: false,
+};
diff --git a/src/components/Media/VideoPlayer/Video.stories.js b/src/components/Media/VideoPlayer/Video.stories.js
index a40fdd3f..dfa57954 100644
--- a/src/components/Media/VideoPlayer/Video.stories.js
+++ b/src/components/Media/VideoPlayer/Video.stories.js
@@ -30,7 +30,7 @@ VideoPlayer.args = {
],
trackProps: {
kind: "subtitles",
- src: exampleCaps,
+ src: "https://raw.githubusercontent.com/vidstack/media-files/main/subs/english.vtt",
srcLang: "en",
},
crossOrigin: false,
diff --git a/src/index.ts b/src/index.ts
index 2c926114..52772976 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -29,6 +29,7 @@ export { TextField } from "./components/TextField/TextField";
export { FormError } from "./components/FormError/FormError";
export { FormLabel } from "./components/FormLabel/FormLabel";
export { AccordionForm } from "./components/AccordionForm/AccordionForm";
+export { FormAlertMessage } from "./components/FormAlertMessage/FormAlertMessage";
export { FormRadioButton } from "./components/FormRadioButton/FormRadioButton";
export { FormCheckBox } from "./components/FormCheckBox/FormCheckBox";
export { FormMultiTextField } from "./components/FormMultiTextField/FormMultiTextField";
From 3129fe68c6ce20abcba738f02d12925f1e1a36b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CPatrick=E2=80=9C?=
Date: Tue, 20 Jun 2023 16:54:07 -0400
Subject: [PATCH 02/21] feat:added IDs for anchor links
---
src/components/FormAlertMessage/FormAlertMessage.js | 2 +-
src/components/FormCheckBox/FormCheckBox.js | 1 +
src/components/FormDatePicker/FormDatePicker.js | 5 +++--
src/components/FormDropdown/FormDropdown.js | 5 +++--
src/components/FormError/FormError.js | 2 +-
src/components/FormLabel/FormLabel.js | 1 +
.../FormMultiTextField/FormMultiTextField.js | 4 ++--
.../FormMultiTextField/FormMultiTextField.test.js | 10 +++++-----
src/components/FormRadioButton/FormRadioButton.js | 4 ++--
src/components/FormTextField/FormTextField.js | 3 +--
src/components/FormTextField/FormTextField.test.js | 10 +++++-----
11 files changed, 25 insertions(+), 22 deletions(-)
diff --git a/src/components/FormAlertMessage/FormAlertMessage.js b/src/components/FormAlertMessage/FormAlertMessage.js
index e8413032..382f604d 100644
--- a/src/components/FormAlertMessage/FormAlertMessage.js
+++ b/src/components/FormAlertMessage/FormAlertMessage.js
@@ -14,7 +14,7 @@ export function FormAlertMessage(props) {
return (
{checkBoxList.map((value, index) => {
let style = index === size - 1 ? "ds-pb-0" : "md:ds-pb-8px ds-pb-24px";
diff --git a/src/components/FormDatePicker/FormDatePicker.js b/src/components/FormDatePicker/FormDatePicker.js
index e0cbbc7e..fcfc41b3 100644
--- a/src/components/FormDatePicker/FormDatePicker.js
+++ b/src/components/FormDatePicker/FormDatePicker.js
@@ -137,7 +137,7 @@ export function FormDatePicker(props) {
: "ds-border-multi-neutrals-grey85a focus:ds-border-multi-blue-blue60f focus:ds-shadow-text-input";
return (
- <>
+
{hasLabel ? (
) : null}
@@ -219,7 +220,7 @@ export function FormDatePicker(props) {
{hasError ? (
) : null}
- >
+
);
}
diff --git a/src/components/FormDropdown/FormDropdown.js b/src/components/FormDropdown/FormDropdown.js
index 61a4ff7e..8c66c5bb 100644
--- a/src/components/FormDropdown/FormDropdown.js
+++ b/src/components/FormDropdown/FormDropdown.js
@@ -40,7 +40,7 @@ export const FormDropdown = (props) => {
}, [isOpen]);
return (
- <>
+
{props.hasLabel && (
{
{props.hasError &&
}
- >
+
);
};
@@ -126,6 +126,7 @@ FormDropdown.propTypes = {
options: PropTypes.arrayOf(
PropTypes.shape({ id: PropTypes.string, value: PropTypes.string })
),
+ id: PropTypes.string,
defaultValue: PropTypes.string,
disabled: PropTypes.bool,
onChange: PropTypes.func,
diff --git a/src/components/FormError/FormError.js b/src/components/FormError/FormError.js
index 50ce1706..27c66441 100644
--- a/src/components/FormError/FormError.js
+++ b/src/components/FormError/FormError.js
@@ -8,7 +8,7 @@ import errorImage from "../../assets/error.svg";
export function FormError(props) {
return (
diff --git a/src/components/FormLabel/FormLabel.js b/src/components/FormLabel/FormLabel.js
index 529a3ded..7ee56206 100644
--- a/src/components/FormLabel/FormLabel.js
+++ b/src/components/FormLabel/FormLabel.js
@@ -8,6 +8,7 @@ export function FormLabel(props) {