@companycam/slab-web 1.0.0 → 1.2.0

package/lib/Billboard/Billboard.d.ts

@@ -0,0 +1,57 @@
+import { CSSProperties } from 'react';
+import { ButtonProps } from '../Button/Button';
+type IconColor = 'success' | 'caution' | 'destroy' | 'info';
+type Action = Pick<ButtonProps, 'href' | 'onClick' | 'icon'> & {
+    label: string;
+};
+type Image = {
+    src: string;
+    alt: string;
+    imageContainerStyle?: CSSProperties;
+};
+export type BillboardProps = {
+    className?: string;
+    color?: IconColor;
+    iconName?: string;
+    message: string;
+    primaryAction?: Action;
+    secondaryAction?: Action;
+    style?: CSSProperties;
+    title?: string;
+    image?: Image;
+};
+/**
+ * Billboard renders any combination of an icon/image, title, message, and action buttons.
+ * - Use title case for the `title` (e.g., "Something Went Wrong", not "Something went wrong").
+ * - Use `outline` icon variants in Billboard where possible.
+ * - If the `message` is long enough, set a `max-width` by extending Billboard as a `styled-component`: `const StyledBillboard = styled(Billboard)({ maxWidth: '400px'; margin: 0 auto; });`
+ * - Images are sized to 128px by 128px. (Square images work best.)
+ *
+ *
+ * @param [alt] - A label for images used in billboard
+ * @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 [title] - The Billboard heading
+ *
+ * @example
+ *
+ * const clearError = () => {
+ *  setError(null);
+ * };
+ *
+ *<Billboard
+ *    title="Uh-Oh!"
+ *    color="destroy"
+ *    iconName="alert-circle"
+ *    secondaryAction={{
+ *      label: "Try, again",
+ *      onClick: clearError,
+ *    }}
+ *    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 default Billboard;

package/lib/Button/Button.d.ts

@@ -0,0 +1,28 @@
+import React, { ComponentPropsWithRef } from 'react';
+type ButtonColor = 'destroy' | 'primary' | 'secondary' | 'subtle' | 'success';
+type ButtonSize = 'small' | 'medium' | 'large';
+declare const ButtonDesign: {
+    readonly solid: "solid";
+    readonly outline: "outline";
+    readonly minimal: "minimal";
+};
+type Design = (typeof ButtonDesign)[keyof typeof ButtonDesign];
+type BaseButtonProps = ComponentPropsWithRef<'button'> & ComponentPropsWithRef<'a'>;
+export type ButtonProps = BaseButtonProps & {
+    children: React.ReactNode;
+    color?: ButtonColor;
+    design?: Design;
+    href?: string;
+    icon?: {
+        name?: string;
+        position?: 'before' | 'after';
+    };
+    loading?: boolean;
+    size?: ButtonSize;
+    props?: unknown;
+};
+/**
+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 default Button;

package/lib/InputText/InputText.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from 'react';
+type HTMLInputProps = ComponentPropsWithRef<'input'>;
+type InputType = 'email' | 'search' | 'tel' | 'text' | 'url';
+export type InputTextProps = HTMLInputProps & {
+    id: string;
+    label: ReactNode;
+    className?: string;
+    contentBefore?: ReactNode;
+    contentAfter?: ReactNode;
+    error?: boolean;
+    hideLabel?: boolean;
+    message?: ReactNode;
+    name?: string;
+    inputSize?: 'medium' | 'large';
+    style?: CSSProperties;
+    success?: boolean;
+    testId?: string;
+    type?: InputType;
+};
+/**
+ * - 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 default InputText;

package/lib/ScreenReaderContent/ScreenReaderContent.d.ts

@@ -0,0 +1,11 @@
+export type ScreenReaderContentProps = {
+    children: React.ReactNode;
+};
+/**
+
+#### When you're designing or implementing a UI, ask yourself if it could be used if you couldn't see the screen.
+
+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 default ScreenReaderContent;

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

@@ -0,0 +1,15 @@
+import { CSSProperties, ReactNode } from 'react';
+export type FieldProps = {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    id: string;
+    message?: ReactNode;
+    status?: 'default' | 'error' | 'success';
+    style?: CSSProperties;
+};
+/**
+ * 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 default Field;

package/lib/shared/styles.d.ts

@@ -1,6 +1,6 @@
 export declare const systemFontFamily = "font-family: system-ui, -apple-system, BlinkMacSystemFont,\n'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;";
 export declare const headingFontFamily = "font-family: 'Averta', system-ui, -apple-system, BlinkMacSystemFont,\n'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;";
-export declare const focusStyles: import("styled-components").FlattenSimpleInterpolation;
+export declare const focusStyles: (error?: boolean, success?: boolean) => import("styled-components").FlattenSimpleInterpolation;
 export declare const baseButtonStyles: ({ disabled, readOnly }: {
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "@companycam/slab-web",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
     ".": {
-      "import": "./index.mjs",
-      "require": "./index.js"
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./index.mjs"
+      },
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      }
     }
   }
 }