@companycam/slab-web 1.2.0 → 1.3.0

package/index.js

@@ -349,7 +349,7 @@ See https://s-c.sh/2BAXzed for more info.`),window["__styled-components-init__"]
   flex-direction: column;
   gap: var(--cc_size_spacing_s);
   margin-block-start: var(--cc_size_spacing_m);
-`,Rs=({image:e,className:r,color:t="info",iconName:n,message:o="",primaryAction:a,secondaryAction:i,style:d,title:p})=>{var v,b,$,R;const _=()=>e!=null&&e.src?T.jsx(As,{style:e.imageContainerStyle,children:T.jsx($s,{src:e.src,alt:e.alt})}):T.jsx(zs,{className:`mdi mdi-${n}`,iconColor:t,"aria-hidden":"true"});return T.jsxs(Es,{className:r,style:d,children:[_(),T.jsxs(ks,{children:[T.jsx(Ze,{as:"h3",family:"heading",size:"xl",weight:"800",ccMargin:"none none xs",children:p}),T.jsx(Ze,{as:"p",color:"subtle",children:o})]}),T.jsxs(Ts,{children:[a?T.jsx(Xe,{href:a.href,onClick:a.onClick,color:t==="destroy"?"destroy":"primary",icon:{name:(v=a.icon)==null?void 0:v.name,position:(b=a.icon)==null?void 0:b.position},children:a.label}):null,i?T.jsx(Xe,{href:i.href,onClick:i.onClick,color:"subtle",icon:{name:($=i.icon)==null?void 0:$.name,position:(R=i.icon)==null?void 0:R.position},children:i.label}):null]})]})},Ps=Y.span`
+`,Rs=({image:e,className:r,color:t="info",iconName:n,message:o="",primaryAction:a,secondaryAction:i,style:d,title:p})=>{var v,b,$,R;const _=()=>e!=null&&e.src?T.jsx(As,{style:e.imageContainerStyle,children:T.jsx($s,{src:e.src,alt:e.alt})}):T.jsx(zs,{className:`mdi mdi-${n}`,iconColor:t,"aria-hidden":"true"});return T.jsxs(Es,{className:r,style:d,children:[_(),T.jsxs(ks,{children:[T.jsx(Ze,{as:"h3",family:"heading",size:"xl",weight:"800",ccMargin:"none none xs",children:p}),T.jsx(Ze,{as:"p",color:"subtle",children:o})]}),T.jsxs(Ts,{children:[a?T.jsx(Xe,{...a,"data-testid":a["data-testid"],color:t==="destroy"?"destroy":"primary",icon:{name:(v=a.icon)==null?void 0:v.name,position:(b=a.icon)==null?void 0:b.position},children:a.label}):null,i?T.jsx(Xe,{...i,"datatest-id":i["data-testid"],color:"subtle",icon:{name:($=i.icon)==null?void 0:$.name,position:(R=i.icon)==null?void 0:R.position},children:i.label}):null]})]})},Ps=Y.span`
   width: 1px;
   height: 1px;
   margin: -1px;

package/index.mjs

@@ -2185,8 +2185,8 @@ const $a = {
       s ? /* @__PURE__ */ V(
         vt,
         {
-          href: s.href,
-          onClick: s.onClick,
+          ...s,
+          "data-testid": s["data-testid"],
           color: t === "destroy" ? "destroy" : "primary",
           icon: {
             name: (v = s.icon) == null ? void 0 : v.name,
@@ -2198,8 +2198,8 @@ const $a = {
       i ? /* @__PURE__ */ V(
         vt,
         {
-          href: i.href,
-          onClick: i.onClick,
+          ...i,
+          "datatest-id": i["data-testid"],
           color: "subtle",
           icon: {
             name: ($ = i.icon) == null ? void 0 : $.name,

package/lib/Badge/Badge.d.ts

@@ -30,5 +30,5 @@ The most common application for a Badge is in a list item, to display the status
 - Use `outline` icons inside Badge where possible.
 - Badge should not be clickable itself, but can be part of a clickable element containing other items.
 */
-export declare function Badge({ children, color, className, iconName, size, style, testId, }: BadgeProps): JSX.Element;
+export declare function Badge({ children, color, className, iconName, size, style, testId, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/lib/Billboard/Billboard.d.ts

@@ -1,8 +1,9 @@
 import { CSSProperties } from 'react';
 import { ButtonProps } from '../Button/Button';
 type IconColor = 'success' | 'caution' | 'destroy' | 'info';
-type Action = Pick<ButtonProps, 'href' | 'onClick' | 'icon'> & {
+type Action = Omit<ButtonProps, 'children'> & {
     label: string;
+    'data-testid'?: string;
 };
 type Image = {
     src: string;
@@ -32,8 +33,8 @@ export type BillboardProps = {
  * @param [color] - Determines the color of the icon (and primary button, if color is "destroy")
  * @param [iconName] - Display a CompanyCam icon as the featured image
  * @param [message] - The main text content
- * @param [primaryAction] - Object with `label`, `onClick`, `href`, and `icon` for primary action button that pulls types from ```<Button />```
- * @param [secondaryAction] - Object with `label`, `onClick`, `href`, and `icon` for secondary action button that pulls types from ```<Button />```
+ * @param [primaryAction] - Object with `label` and any property of type ButtonProps for primary action button that pulls types from ```<Button />```
+ * @param [secondaryAction] - Object with `label` and any property of type ButtonProps for secondary action button that pulls types from ```<Button />```
  * @param [title] - The Billboard heading
  *
  * @example
@@ -47,11 +48,13 @@ export type BillboardProps = {
  *    color="destroy"
  *    iconName="alert-circle"
  *    secondaryAction={{
+ *      'data-testid': "my_test_id",
  *      label: "Try, again",
  *      onClick: clearError,
+ *      type: "button"
  *    }}
  *    message="Sorry, something seems to have happened on our end."
  * />
  */
-export declare const Billboard: ({ image, className, color, iconName, message, primaryAction, secondaryAction, style, title, }: BillboardProps) => JSX.Element;
+export declare const Billboard: ({ image, className, color, iconName, message, primaryAction, secondaryAction, style, title, }: BillboardProps) => import("react/jsx-runtime").JSX.Element;
 export default Billboard;

package/lib/Button/Button.d.ts

@@ -24,5 +24,5 @@ export type ButtonProps = BaseButtonProps & {
 /**
 Defaults to rendering as a `<button type="button" />`, but will render as a link if an href prop is provided.
 */
-export declare const Button: ({ children, color, design, href, icon, loading, size, type, ...props }: ButtonProps) => JSX.Element;
+export declare const Button: ({ children, color, design, href, icon, loading, size, type, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/lib/InputText/InputText.d.ts

@@ -21,5 +21,5 @@ export type InputTextProps = HTMLInputProps & {
  * - InputText is a controlled component: You must provide an `onChange` handler to update the value.
  * - Use title case for the required `label` (e.g., "Project Name", not "Project name").
  */
-export declare function InputText({ className, contentBefore, contentAfter, error, hideLabel, id, label, message, name, inputSize, style, success, testId, type, ...props }: InputTextProps): JSX.Element;
+export declare function InputText({ className, contentBefore, contentAfter, error, hideLabel, id, label, message, name, inputSize, style, success, testId, type, ...props }: InputTextProps): import("react/jsx-runtime").JSX.Element;
 export default InputText;

package/lib/ScreenReaderContent/ScreenReaderContent.d.ts

@@ -7,5 +7,5 @@ export type ScreenReaderContentProps = {
 
 For example, is being able to see an icon important for the user to understand context or functionality? If so, always add explanatory text for screen readers, wrapped inside a `<ScreenReaderContent />` component.
 */
-export declare const ScreenReaderContent: ({ children }: ScreenReaderContentProps) => JSX.Element;
+export declare const ScreenReaderContent: ({ children }: ScreenReaderContentProps) => import("react/jsx-runtime").JSX.Element;
 export default ScreenReaderContent;

package/lib/Spinner/Spinner.d.ts

@@ -10,5 +10,5 @@ export type SpinnerProps = {
     trackColor?: string;
 };
 /** Use Spinner when something's happening and the user needs to wait. Versatile and customizable.  */
-export declare const Spinner: ({ accessibilityLabel, testId, className, label, layout, meterColor, size, style, trackColor, }: SpinnerProps) => JSX.Element;
+export declare const Spinner: ({ accessibilityLabel, testId, className, label, layout, meterColor, size, style, trackColor, }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default Spinner;

package/lib/Text/Text.d.ts

@@ -20,5 +20,5 @@ type TextProps = {
 - Margins reset to 0 by default (we don't do a lot of long-form text in the app itself). Add margin when you need it via the `ccMargin` prop.
 - Can be extended as a styled-component.
 */
-export declare function Text({ as, children, color, size, family, ccMargin, weight, display, className, style, ...props }: TextProps): JSX.Element;
+export declare function Text({ as, children, color, size, family, ccMargin, weight, display, className, style, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
 export default Text;

package/lib/shared/Field/Field.d.ts

@@ -11,5 +11,5 @@ export type FieldProps = {
 /**
  * Field is used inside forms components like InputText as a DRY way of rendering a message below the input / label UI.
  * */
-export declare function Field({ children, className, disabled, id, message, status, style, }: FieldProps): JSX.Element;
+export declare function Field({ children, className, disabled, id, message, status, style, }: FieldProps): import("react/jsx-runtime").JSX.Element;
 export default Field;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companycam/slab-web",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {