@cambly/syntax-core 5.0.0 → 5.2.0

package/dist/index.d.ts

@@ -372,6 +372,10 @@ declare const Color: readonly ["primary", "secondary", "tertiary", "branded", "d
 declare const Size: readonly ["sm", "md", "lg"];
 
 type ButtonType = {
+    /**
+     * Test id for the button
+     */
+    "data-testid"?: string;
     /**
      * The text to be displayed inside the button
      */
@@ -533,6 +537,10 @@ type IconButtonType = {
      * @defaultValue "primary"
      */
     color?: (typeof Color)[number];
+    /**
+     * Test id for the button
+     */
+    "data-testid"?: string;
     /**
      * The size of the button
      *
@@ -576,13 +584,17 @@ declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonTyp
 /**
  * Checkbox is a clickable element that will show if an option has been selected or not
  */
-declare const Checkbox: ({ checked, disabled, size, label, error, onChange, }: {
+declare const Checkbox: ({ checked, "data-testid": dataTestId, disabled, size, label, error, onChange, }: {
     /**
      * Whether or not the box has been clicked
      *
      * @defaultValue false
      */
     checked: boolean;
+    /**
+     * Test id for the checkbox
+     */
+    "data-testid"?: string | undefined;
     /**
      * The callback to be called when the checkbox value changes
      */
@@ -627,13 +639,17 @@ declare const MiniActionCard: ({ children, }: {
 /**
  * RadioButton is a radio button with accompanying text
  */
-declare const RadioButton: ({ checked, disabled, error, label, name, onChange, size, value, }: {
+declare const RadioButton: ({ checked, "data-testid": dataTestId, disabled, error, id, label, name, onChange, size, value, }: {
     /**
      * Whether or not the radio button is checked
      *
      * @defaultValue false
      */
     checked?: boolean | undefined;
+    /**
+     * Test id for the radio button
+     */
+    "data-testid"?: string | undefined;
     /**
      * Whether or not the radio button is disabled
      *
@@ -646,6 +662,10 @@ declare const RadioButton: ({ checked, disabled, error, label, name, onChange, s
      * @defaultValue false
      */
     error?: boolean | undefined;
+    /**
+     * Id for the the radio button
+     */
+    id?: string | undefined;
     /**
      * Value to show end user
      */
@@ -674,11 +694,15 @@ declare const RadioButton: ({ checked, disabled, error, label, name, onChange, s
 }) => ReactElement;
 
 declare const SelectList: {
-    ({ children, disabled, errorText, helperText, label, onChange, placeholderText, selectedValue, size, }: {
+    ({ children, "data-testid": dataTestId, disabled, errorText, helperText, label, onChange, placeholderText, selectedValue, size, }: {
         /**
          * One or more SelectList.Option components.
          */
         children: ReactNode;
+        /**
+         * Test id for the select element
+         */
+        "data-testid"?: string | undefined;
         /**
          * true if the select dropdown is disabled
          * @defaultValue false
@@ -720,7 +744,8 @@ declare const SelectList: {
          */
         size?: "sm" | "md" | "lg" | undefined;
     }): ReactElement;
-    Option: ({ value, label, disabled, }: {
+    Option: ({ "data-testid": dataTestId, value, label, disabled, }: {
+        "data-testid"?: string | undefined;
         value: string;
         label: string;
         disabled?: boolean | undefined;

package/dist/index.js

@@ -516,6 +516,7 @@ var iconSize = {
 };
 var Button = (0, import_react2.forwardRef)(
   ({
+    "data-testid": dataTestId,
     text,
     loadingText,
     color = "primary",
@@ -532,6 +533,7 @@ var Button = (0, import_react2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
       {
+        "data-testid": dataTestId,
         ref,
         "aria-label": accessibilityLabel,
         type: "button",
@@ -655,6 +657,7 @@ var IconButton = (0, import_react3.forwardRef)(
   ({
     accessibilityLabel,
     color = "primary",
+    "data-testid": dataTestId,
     disabled = false,
     icon: Icon,
     size = "md",
@@ -665,6 +668,7 @@ var IconButton = (0, import_react3.forwardRef)(
       "button",
       {
         "aria-label": accessibilityLabel,
+        "data-testid": dataTestId,
         type: "button",
         title: tooltip,
         disabled,
@@ -796,6 +800,7 @@ var iconWidth = {
 };
 var Checkbox = ({
   checked = false,
+  "data-testid": dataTestId,
   disabled = false,
   size = "md",
   label,
@@ -820,6 +825,7 @@ var Checkbox = ({
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "input",
         {
+          "data-testid": dataTestId,
           type: "checkbox",
           className: (0, import_classnames7.default)(Checkbox_module_default.inputOverlay, Checkbox_module_default[size]),
           checked,
@@ -874,8 +880,10 @@ var RadioButton_module_default = { "radioBaseContainer": "_radioBaseContainer_ne
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var RadioButton = ({
   checked = false,
+  "data-testid": dataTestId,
   disabled = false,
   error = false,
+  id,
   label,
   name,
   onChange,
@@ -900,7 +908,9 @@ var RadioButton = ({
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "input",
           {
+            "data-testid": dataTestId,
             type: "radio",
+            id,
             name,
             className: (0, import_classnames8.default)(RadioButton_module_default.radioStyleOverride, {
               [RadioButton_module_default.smOverride]: size === "sm",
@@ -927,7 +937,7 @@ var RadioButton = ({
             })
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_classnames8.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Typography_default,
           {
             size: size === "md" ? 200 : 100,
@@ -955,18 +965,11 @@ var SelectList_module_default = { "selectContainer": "_selectContainer_1e7f9_1",
 // src/SelectList/SelectOption.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var SelectOption = ({
+  "data-testid": dataTestId,
   value,
   label,
   disabled = false
-}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-  "option",
-  {
-    "data-testid": `syntax-select-${value}`,
-    value,
-    disabled,
-    children: label
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { "data-testid": dataTestId, value, disabled, children: label });
 var SelectOption_default = SelectOption;
 
 // src/SelectList/SelectList.tsx
@@ -978,6 +981,7 @@ var iconSize3 = {
 };
 var SelectList = ({
   children,
+  "data-testid": dataTestId,
   disabled = false,
   errorText,
   helperText,
@@ -1003,7 +1007,7 @@ var SelectList = ({
             "select",
             {
               id,
-              "data-testid": "syntax-select",
+              "data-testid": dataTestId,
               disabled,
               className: (0, import_classnames9.default)(SelectList_module_default.selectBox, SelectList_module_default[size], {
                 [SelectList_module_default.unselected]: !selectedValue && !errorText,