@cambly/syntax-core 6.4.0 → 6.5.0

package/dist/index.d.ts

@@ -389,7 +389,7 @@ type ButtonType = {
      *
      * @defaultValue "primary"
      */
-    color?: (typeof Color)[number];
+    color?: "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success";
     /**
      * The size of the button
      *
@@ -503,6 +503,51 @@ type CardType = {
  */
 declare function Card({ children, size, "data-testid": dataTestId, }: CardType): JSX.Element;
 
+/**
+ * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.
+ */
+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
+     */
+    onChange: React__default.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Whether or not the box is disabled
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The size of the checkbox and icon
+     *
+     * * `sm`: 16px
+     * * `md`: 24px
+     *
+     * @defaultValue "md"
+     */
+    size?: "sm" | "md" | undefined;
+    /**
+     * The text accompanying the checkbox
+     */
+    label: string;
+    /**
+     * Whether or not there is an error with the input
+     *
+     * @defaultValue false
+     */
+    error?: boolean | undefined;
+}) => ReactElement;
+
 /**
  * [Divider](https://cambly-syntax.vercel.app/?path=/docs/components-divider--docs) is a thin horizontal line to group content in lists and layouts.
  */
@@ -538,7 +583,7 @@ declare const Heading: ({ align, as, children, color, size, }: {
      *
      * @defaultValue "gray900"
      */
-    color?: "gray200" | "gray900" | "gray700" | "gray800" | "white" | "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "inherit" | undefined;
+    color?: "gray200" | "gray900" | "gray700" | "gray800" | "white" | "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "inherit" | undefined;
     /**
      * Size of the text.
      *
@@ -604,49 +649,66 @@ type IconButtonType = {
 declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonType & React__default.RefAttributes<HTMLButtonElement>>;
 
 /**
- * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.
+ * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a "variation" of Button that should look identical to Button, but should be used to render links instead.
  */
-declare const Checkbox: ({ checked, "data-testid": dataTestId, disabled, size, label, error, onChange, }: {
+declare function LinkButton({ text, href, target, "data-testid": dataTestId, color, size, fullWidth, startIcon: StartIcon, endIcon: EndIcon, onClick, }: {
     /**
-     * Whether or not the box has been clicked
-     *
-     * @defaultValue false
+     * Test id for the button
      */
-    checked: boolean;
+    "data-testid"?: string;
     /**
-     * Test id for the checkbox
+     * The text to be displayed inside the button
      */
-    "data-testid"?: string | undefined;
+    text: string;
     /**
-     * The callback to be called when the checkbox value changes
+     * The link that the LinkButton should route to.
+     *
      */
-    onChange: React__default.ChangeEventHandler<HTMLInputElement>;
+    href?: string;
     /**
-     * Whether or not the box is disabled
+     * The target attribute specifies where to open the linked document.
      *
-     * @defaultValue false
      */
-    disabled?: boolean | undefined;
+    target?: "_blank" | "_self" | "_parent" | "_top";
     /**
-     * The size of the checkbox and icon
-     *
-     * * `sm`: 16px
-     * * `md`: 24px
+     * The color of the button
      *
-     * @defaultValue "md"
+     * @defaultValue "primary"
      */
-    size?: "sm" | "md" | undefined;
+    color?: "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success";
     /**
-     * The text accompanying the checkbox
+     * The size of the button
+     *
+     * * `sm`: 32px
+     * * `md`: 40px
+     * * `lg`: 48px
+     *
+     * @defaultValue "md"
      */
-    label: string;
+    size?: (typeof Size)[number];
     /**
-     * Whether or not there is an error with the input
+     * If `true`, the button will take up the full width of its container
      *
      * @defaultValue false
      */
-    error?: boolean | undefined;
-}) => ReactElement;
+    fullWidth?: boolean;
+    /**
+     * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
+     */
+    startIcon?: React__default.ComponentType<{
+        className: string;
+    }>;
+    /**
+     * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
+     */
+    endIcon?: React__default.ComponentType<{
+        className: string;
+    }>;
+    /**
+     * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).
+     */
+    onClick?: React__default.MouseEventHandler<HTMLAnchorElement>;
+}): JSX.Element;
 
 /**
  * [MiniActionCard](https://cambly-syntax.vercel.app/?path=/docs/components-miniactioncard--docs) is component that alerts users to a call to action.
@@ -940,7 +1002,7 @@ declare const Typography: ({ align, as, children, color, inline, lineClamp, size
      *
      * @defaultValue "gray900"
      */
-    color?: "gray200" | "gray900" | "gray700" | "gray800" | "white" | "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "inherit" | undefined;
+    color?: "gray200" | "gray900" | "gray700" | "gray800" | "white" | "primary" | "secondary" | "tertiary" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "branded" | "success" | "inherit" | undefined;
     /**
      * Whether the text should flow inline with other elements.
      *
@@ -989,4 +1051,4 @@ declare const Typography: ({ align, as, children, color, inline, lineClamp, size
     weight?: "regular" | "semiBold" | "bold" | "heavy" | undefined;
 }) => ReactElement;
 
-export { Avatar, Badge, Box, Button, ButtonGroup, Card, Checkbox, Divider, Heading, IconButton, MiniActionCard, Modal, RadioButton, SelectList, TextField, Typography };
+export { Avatar, Badge, Box, Button, ButtonGroup, Card, Checkbox, Divider, Heading, IconButton, LinkButton, MiniActionCard, Modal, RadioButton, SelectList, TextField, Typography };