@companycam/slab-web 0.0.23-beta.2 → 0.0.23-beta.20

package/lib/Avatar/Avatar.d.ts

@@ -0,0 +1,2 @@
+export declare const Avatar: () => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/lib/Badge/Badge.d.ts

@@ -0,0 +1,34 @@
+import { CSSProperties, ReactNode } from 'react';
+declare const BadgeColor: {
+    readonly add_on: "add_on";
+    readonly assigned: "assigned";
+    readonly caution: "caution";
+    readonly destroy: "destroy";
+    readonly info: "info";
+    readonly success: "success";
+    readonly upgrade: "upgrade";
+};
+declare const BadgeSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+};
+type Size = (typeof BadgeSize)[keyof typeof BadgeSize];
+type Color = (typeof BadgeColor)[keyof typeof BadgeColor];
+export type BadgeProps = {
+    children: ReactNode;
+    color?: Color;
+    className?: string;
+    iconName?: string;
+    size?: Size;
+    style?: CSSProperties;
+    testId?: string;
+};
+/**
+The most common application for a Badge is in a list item, to display the status of an asset, event, or user - or to denote that something is new or is behind an updgraded plan paywall.
+
+- For longer text, use [Notice](http://future.docs.page).
+- 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): import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/lib/Billboard/Billboard.d.ts

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react';
+import { ButtonProps } from '../Button/Button';
+type IconColor = 'success' | 'caution' | 'destroy' | 'info';
+type Action = Omit<ButtonProps, 'children'> & {
+    label: string;
+    'data-testid'?: 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` 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
+ *
+ * const clearError = () => {
+ *  setError(null);
+ * };
+ *
+ *<Billboard
+ *    title="Uh-Oh!"
+ *    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) => import("react/jsx-runtime").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) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/lib/ButtonCondensed/ButtonCondensed.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps } from '../Button/Button';
+export type ButtonCondensedProps = Omit<ButtonProps, 'design'>;
+/**
+A minimal [Button](/docs/button--docs) with styles for situations where you don't need padding, such as inside a table cell.
+
+ButtonCondensed accepts all of the same props as [Button](/docs/button--docs), but defaults to `design="minimal"`.
+*/
+export declare const ButtonCondensed: ({ ...rest }: ButtonCondensedProps) => import("react/jsx-runtime").JSX.Element;
+export default ButtonCondensed;

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): import("react/jsx-runtime").JSX.Element;
+export default InputText;

package/lib/Notice/Notice.d.ts

@@ -0,0 +1,42 @@
+import { CSSProperties, ReactNode } from 'react';
+declare const NoticeColor: {
+    readonly add_on: "add_on";
+    readonly assigned: "assigned";
+    readonly caution: "caution";
+    readonly destroy: "destroy";
+    readonly info: "info";
+    readonly success: "success";
+    readonly upgrade: "upgrade";
+};
+declare const NoticeSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+type Color = (typeof NoticeColor)[keyof typeof NoticeColor];
+type Size = (typeof NoticeSize)[keyof typeof NoticeSize];
+export type NoticeProps = {
+    children: ReactNode;
+    color?: Color;
+    contentAfter?: ReactNode;
+    contentAlign?: string;
+    contentBefore?: ReactNode;
+    hideIcon?: boolean;
+    iconName?: string;
+    size?: Size;
+    style?: CSSProperties;
+    testId?: string;
+};
+export type IconProps = {
+    color?: Color;
+    size?: Size;
+};
+/**
+- `Notice` accepts text or components/HTML as children. It supplies basic styles to format any text inside it, but any other formatting is up to you.
+
+- `Notice` can have a call to action (see `contentAfter` example) or be purely informational.
+
+- `Notice` will display pre-defined default icons depending on the `color` prop, but can be overridden with `iconName`, or hidden entirely with `hideIcon`.
+*/
+export declare function Notice({ children, color, contentBefore, contentAfter, contentAlign, iconName, hideIcon, size, testId, }: NoticeProps): import("react/jsx-runtime").JSX.Element;
+export default Notice;

package/lib/ScreenReaderContent/ScreenReaderContent.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+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) => import("react/jsx-runtime").JSX.Element;
+export default ScreenReaderContent;

package/lib/Spinner/Spinner.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+type Layout = 'vertical' | 'horizontal';
+type Size = number | 'small' | 'medium' | 'large' | 'xsmall';
+export type SpinnerProps = {
+    accessibilityLabel: string;
+    className?: string;
+    testId?: string;
+    label?: string;
+    layout?: Layout;
+    meterColor?: string;
+    size?: Size;
+    style?: React.CSSProperties;
+    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) => import("react/jsx-runtime").JSX.Element;
+export default Spinner;

package/lib/Text/Text.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties } from 'react';
+type Color = 'default' | 'subtle' | 'nonessential' | 'inherit';
+type Size = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
+type AsProp = keyof HTMLElementTagNameMap;
+type TextProps = {
+    as: AsProp;
+    forwardedAs?: string;
+    children?: React.ReactNode;
+    color?: Color;
+    size?: Size;
+    family?: 'heading' | 'system';
+    ccMargin?: string;
+    weight?: string | number;
+    display?: 'inline' | 'block';
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+- Sensible defaults based on size, with the flexibility to render as any HTML element.
+- Automatically nudges sizes up 1px if heading font-family (Averta) is being used.
+- 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, forwardedAs, 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

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+declare const StatusColor: {
+    readonly default: "default";
+    readonly error: "error";
+    readonly success: "success";
+};
+type Status = (typeof StatusColor)[keyof typeof StatusColor];
+export type FieldProps = {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    id: string;
+    message?: ReactNode;
+    status?: Status;
+    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): import("react/jsx-runtime").JSX.Element;
+export default Field;

package/lib/shared/styles.d.ts

@@ -0,0 +1,20 @@
+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: (error?: boolean, success?: boolean) => import("styled-components").RuleSet<object>;
+export declare const baseButtonStyles: ({ disabled, readOnly }: {
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+}) => string;
+export declare const buttonSize: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const visuallyHidden: import("styled-components").RuleSet<object>;
+export declare const spacingTokensToCSS: (spacing: string) => string;
+export declare const avatarSizes: {
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+};

package/package.json

@@ -1,7 +1,18 @@
 {
   "name": "@companycam/slab-web",
-  "version": "0.0.23-beta.2",
-  "module": "./index.esm.js",
-  "type": "module",
-  "main": "./index.esm.js"
+  "version": "0.0.23-beta.20",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./index.mjs"
+      },
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      }
+    }
+  }
 }

package/README.md

@@ -1,7 +0,0 @@
-# slab-web
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test slab-web` to execute the unit tests via [Jest](https://jestjs.io).

package/index.esm.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";