@guardian/stand 0.0.4 → 0.0.6

package/dist/types/components/tag-picker/TagAutocomplete.d.ts

@@ -0,0 +1,117 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ReactElement } from 'react';
+import type { ComponentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete';
+import type { DeepPartial } from '../util';
+import type { Tag } from './types';
+interface TagAutocompleteProps<T extends Tag = Tag> {
+    /** `addTag` - Function called when an option is picked from the dropdown */
+    addTag: (tag: T) => void;
+    /** `loading` - Whether the component is loading options for the dropdown */
+    loading: boolean;
+    /** `onChange` - Function called when the combobox input changes */
+    onChange: (inputText: string) => void;
+    /** `options` - The list of options shown in the dropdown */
+    options: T[];
+    /** `label` - An accessible label for the combobox input */
+    label: string;
+    /** `placeholder` - A placeholder string for the combobox input */
+    placeholder: string;
+    /** `disabled` - Whether the combobox input is disabled */
+    disabled: boolean;
+    /** `value` - The value of the combobox input */
+    value: string;
+    'data-testid'?: string;
+    /** `loadingIcon` - Icon used to show loading happening in the dropdown */
+    loadingIcon?: ReactElement;
+    /** `theme` - Used to customise the look and feel of the TagAutocomplete component */
+    theme?: DeepPartial<ComponentTagAutocomplete>;
+    /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
+    cssOverrides?: SerializedStyles;
+}
+/**
+ * ## TagAutocomplete
+ *
+ * *Status: Testing*
+ *
+ * Part of the overall TagPicker component, the TagAutocomplete provides an accessible
+ * autocomplete input for selecting tags from a list of options, based on the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox) component.
+ *
+ * **Peer dependencies:**
+ * - `react-aria-components`
+ *
+ * See the `peerDependencies` section of the `package.json` for compatible versions to install.
+ *
+ * ## Usage
+ *
+ * *Example with TagAutocomplete and TagTable combined:*
+ *
+ * ```tsx
+ * import { TagAutocomplete, TagTable } from '@guardian/stand';
+ *
+ * const Component = () => {
+ *   const [selectedTags, setSelectedTags] = useState<
+ *     TagManagerObjectData[] // TagManagerObjectData is an internal type representing a Tag
+ *   >([]);
+
+ *   const [options, setOptions] = useState<TagManagerObjectData[]>([]);
+ *   const [value, setValue] = useState('');
+ *   const onChange = (inputText: string) => {
+ *     setValue(inputText);
+ *     if (inputText === '') {
+ *       setOptions([]);
+ *       return;
+ *     }
+ *
+ *     if (inputText === '*') {
+ *       setOptions(exampleTags); // exampleTags is an array of Tags
+ *       return;
+ *     }
+ *
+ *     // Simple filtering against exampleTags
+ *     const filteredItems = exampleTags.filter((t) =>
+ *       t.internalName.toLowerCase().includes(inputText.toLowerCase()),
+ *     );
+ *     return setOptions(filteredItems);
+ *   };
+
+ *   return (
+ *     <>
+ *       <div
+ *         css={css`
+ *             display: flex;
+ *         `}
+ *       >
+ *         <TagAutocomplete
+ *           onChange={onChange}
+ *           options={options}
+ *           label="Tags"
+ *           addTag={(tag) =>
+ *               setSelectedTags((tags) => {
+ *                   return [...tags, tag];
+ *               })
+ *           }
+ *           loading={false}
+ *           placeholder={''}
+ *           disabled={false}
+ *           value={value}
+ *         />
+ *         <select>
+ *            option>All tags</option>
+ *         </select>
+ *       </div>
+ *       <TagTable rows={selectedTags} filterRows={() => true} />
+ *     </>
+ *   );
+ * };
+ * ```
+ *
+ * #### Props
+ *
+ * See {@link TagAutocompleteProps} for a full list of props and descriptions.
+ *
+ * #### Example
+ *
+ * This is currently still in testing phase, so a production implementation is not yet available.
+ */
+export declare function TagAutocomplete<T extends Tag = Tag>({ addTag, loading, onChange, options, label, placeholder, disabled, value, 'data-testid': dataTestId, loadingIcon, theme, cssOverrides, }: TagAutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/tag-picker/TagTable.d.ts

@@ -0,0 +1,126 @@
+import type { SerializedStyles } from '@emotion/react';
+import { type ReactElement } from 'react';
+import { Row } from 'react-aria-components';
+import type { ComponentTagTable } from '../../styleD/build/typescript/component/tagTable';
+import type { DeepPartial } from '../util';
+import type { TagRow } from './types';
+type Row = TagRow | {
+    tag: TagRow;
+};
+export interface TagTableProps<R extends Row> {
+    /** `rows` - The collection of rows */
+    rows: R[];
+    /** `filterRows` - Function to filter rows from `rows` prop from appearing in the table */
+    filterRows: (row: R) => boolean;
+    /** `heading` - The table heading */
+    heading?: string;
+    /** `showTagType` - Whether to show tags' type in table */
+    showTagType?: boolean;
+    /** `showTagSectionName` - Whether to show tags' section name in table */
+    showTagSectionName?: boolean;
+    /** `removeAction` - Function called when the Remove button is pressed on a row */
+    removeAction?: (tag: R) => void;
+    /** `addAction` - Function called when the Add button is pressed on a row */
+    addAction?: (tag: R) => void;
+    /** `onReorder` - Function called when a re-ordering of rows through drag and drop is performed */
+    onReorder?: (tags: R[]) => void;
+    /** `canRemove` - Function to determine if a given row can be removed from the table */
+    canRemove?: (tag: R) => boolean;
+    'data-testid'?: string;
+    /** `removeIcon` - Icon used in the remove row button */
+    removeIcon?: ReactElement;
+    /** `gripIcon` - Icon to indicate that a row can be dragged, used in the accessible drag button */
+    gripIcon?: ReactElement;
+    /** `theme` - Used to customise the look and feel of the TagTable component */
+    theme?: DeepPartial<ComponentTagTable>;
+    /** `cssOverrides` - Escape hatch for styling that doesn't fall into the theme */
+    cssOverrides?: SerializedStyles;
+}
+/**
+ * ## TagTable
+ *
+ * *Status: Testing*
+ *
+ * Part of the overall TagPicker component, the TagTable provides an accessible
+ * table for displaying tags, with options to add, remove, and reorder tags via drag and drop,
+ * based on the [React Aria Table](https://react-spectrum.adobe.com/react-aria/Table) component.
+ *
+ * **Peer dependencies:**
+ * - `react-aria-components`
+ *
+ * See the `peerDependencies` section of the `package.json` for compatible versions to install.
+ *
+ * ## Usage
+ *
+ * *Example with TagAutocomplete and TagTable combined:*
+ *
+ * ```tsx
+ * import { TagAutocomplete, TagTable } from '@guardian/stand';
+ *
+ * const Component = () => {
+ *   const [selectedTags, setSelectedTags] = useState<
+ *     TagManagerObjectData[] // TagManagerObjectData is an internal type representing a Tag
+ *   >([]);
+
+ *   const [options, setOptions] = useState<TagManagerObjectData[]>([]);
+ *   const [value, setValue] = useState('');
+ *   const onChange = (inputText: string) => {
+ *     setValue(inputText);
+ *     if (inputText === '') {
+ *       setOptions([]);
+ *       return;
+ *     }
+ *
+ *     if (inputText === '*') {
+ *       setOptions(exampleTags); // exampleTags is an array of Tags
+ *       return;
+ *     }
+ *
+ *     // Simple filtering against exampleTags
+ *     const filteredItems = exampleTags.filter((t) =>
+ *       t.internalName.toLowerCase().includes(inputText.toLowerCase()),
+ *     );
+ *     return setOptions(filteredItems);
+ *   };
+
+ *   return (
+ *     <>
+ *       <div
+ *         css={css`
+ *             display: flex;
+ *         `}
+ *       >
+ *         <TagAutocomplete
+ *           onChange={onChange}
+ *           options={options}
+ *           label="Tags"
+ *           addTag={(tag) =>
+ *               setSelectedTags((tags) => {
+ *                   return [...tags, tag];
+ *               })
+ *           }
+ *           loading={false}
+ *           placeholder={''}
+ *           disabled={false}
+ *           value={value}
+ *         />
+ *         <select>
+ *            option>All tags</option>
+ *         </select>
+ *       </div>
+ *       <TagTable rows={selectedTags} filterRows={() => true} />
+ *     </>
+ *   );
+ * };
+ * ```
+ *
+ * #### Props
+ *
+ * See {@link TagTableProps} for a full list of props and descriptions.
+ *
+ * #### Example
+ *
+ * This is currently still in testing phase, so a production implementation is not yet available.
+ */
+export declare function TagTable<R extends Row>({ rows, filterRows, heading, showTagType, showTagSectionName, removeAction: removeTag, addAction: addTag, onReorder, canRemove, 'data-testid': dataTestId, removeIcon, gripIcon, theme, cssOverrides, }: TagTableProps<R>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/components/tag-picker/example-tags.d.ts

@@ -0,0 +1,2 @@
+import type { TagManagerObjectData } from './types';
+export declare const exampleTags: TagManagerObjectData[];

package/dist/types/components/tag-picker/styles.d.ts

@@ -0,0 +1,16 @@
+import type { SerializedStyles } from '@emotion/react';
+import { type ComponentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete';
+import { type ComponentTagTable } from '../../styleD/build/typescript/component/tagTable';
+import { type DeepPartial } from '../util';
+export declare const tagAutocompleteInputStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
+export declare const listboxStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
+export declare const listboxItemStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
+export declare const listboxInfoStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
+export declare const tagTableHeadingStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
+export declare const tagTableCellStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
+export declare const tagTableRowStyles: (canDrag: boolean, partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
+export declare const tagTableStyles: (canRemoveTag: boolean, partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
+export declare const tagTableRemoveButtonStyles: SerializedStyles;
+export declare const tagTableAddButtonStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;
+export declare const tagTableDragButtonStyles: SerializedStyles;
+export declare const tagTableTypeBadgeStyles: (partialTheme?: DeepPartial<ComponentTagTable>) => SerializedStyles;

package/dist/types/components/tag-picker/types.d.ts

@@ -0,0 +1,65 @@
+export type Tag = {
+    id: number;
+    internalName: string;
+};
+export type TagRow = Tag & {
+    type: string;
+    section: {
+        name: string;
+    };
+};
+export type TagManagerObjectData = {
+    id: number;
+    type: string;
+    internalName: string;
+    externalName: string;
+    slug: string;
+    section: {
+        id: number;
+        name: string;
+        pathPrefix: string;
+        sectionTagId: number;
+        slug: string;
+    };
+    parents: Array<{
+        uri: string;
+        data?: unknown;
+        links?: Array<{
+            rel: string;
+            href: string;
+            description?: string;
+        }>;
+    }>;
+    externalReferences: Array<{
+        type: string;
+        token?: string | undefined;
+    }>;
+    path: string;
+    contributorInformation: {
+        lastName?: string | undefined;
+        firstName?: string | undefined;
+        twitterHandle?: string | undefined;
+        rcsId?: string | undefined;
+        contactEmail?: string | undefined;
+        bylineImage?: {
+            imageId: string;
+            assets: Array<{
+                imageUrl: string;
+                width: number;
+                height: number;
+                mimeType: string;
+            }>;
+        } | undefined;
+        largeBylineImage?: {
+            imageId: string;
+            assets: Array<{
+                imageUrl: string;
+                width: number;
+                height: number;
+                mimeType: string;
+            }>;
+        } | undefined;
+    } | null;
+    adBlockingLevel?: 'NONE' | 'SUGGEST' | 'FORCE' | undefined;
+    contributionBlockingLevel?: 'NONE' | 'SUGGEST' | 'FORCE' | undefined;
+};

package/dist/types/{byline → components}/util.d.ts

@@ -1,3 +1,4 @@
 export type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: DeepPartial<T[P]>;
 } : T;
+export declare function mergeDeep<A extends object, B extends object>(obj1: A, obj2: B): A & B;

package/dist/types/index.d.ts

@@ -1,2 +1,26 @@
-export { Byline } from './byline/Byline';
-export type { BylineModel } from './byline/lib';
+/**
+ * component exports
+ */
+export { Byline } from './components/byline/Byline';
+export type { BylineModel } from './components/byline/lib';
+export type { PartialBylineTheme } from './components/byline/theme';
+export { TagTable } from './components/tag-picker/TagTable';
+export { TagAutocomplete } from './components/tag-picker/TagAutocomplete';
+/**
+ * style dictionary exports - base
+ */
+export { baseColors } from './styleD/build/typescript/base/colors';
+export type { BaseColors } from './styleD/build/typescript/base/colors';
+export { baseTypography } from './styleD/build/typescript/base/typography';
+export type { BaseTypography } from './styleD/build/typescript/base/typography';
+/**
+ * style dictionary exports - semantic
+ */
+export { semanticColors } from './styleD/build/typescript/semantic/colors';
+export type { SemanticColors } from './styleD/build/typescript/semantic/colors';
+export { semanticTypography } from './styleD/build/typescript/semantic/typography';
+export type { SemanticTypography } from './styleD/build/typescript/semantic/typography';
+/**
+ * utils exports
+ */
+export { convertTypographyToEmotion } from './styleD/utils/semantic/typography';

package/dist/types/styleD/build/typescript/base/colors.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const baseColors: {
+    readonly neutral: {
+        readonly '0': "#000000";
+        readonly '50': "#121212";
+        readonly '100': "#333333";
+        readonly '200': "#545454";
+        readonly '300': "#666666";
+        readonly '400': "#8d8d8d";
+        readonly '500': "#999999";
+        readonly '550': "#aeaeae";
+        readonly '600': "#bababa";
+        readonly '625': "#c1c1c1";
+        readonly '650': "#cccccc";
+        readonly '700': "#dcdcdc";
+        readonly '750': "#e6e6e6";
+        readonly '800': "#ededed";
+        readonly '850': "#f6f6f6";
+        readonly '900': "#ffffff";
+    };
+    readonly red: {
+        readonly '50': "#3d0e08";
+        readonly '100': "#65170e";
+        readonly '200': "#8c2113";
+        readonly '300': "#b42a19";
+        readonly '400': "#db331e";
+        readonly '500': "#e15847";
+        readonly '600': "#e87c6f";
+        readonly '700': "#eea198";
+        readonly '800': "#f5c6c0";
+        readonly '900': "#fbebe9";
+    };
+    readonly blue: {
+        readonly '50': "#061d3c";
+        readonly '100': "#092f62";
+        readonly '200': "#0d4289";
+        readonly '300': "#1054af";
+        readonly '400': "#1467d6";
+        readonly '500': "#3e82dd";
+        readonly '600': "#699ee5";
+        readonly '700': "#93b9ec";
+        readonly '800': "#bdd4f4";
+        readonly '900': "#e8f0fb";
+    };
+    readonly cyan: {
+        readonly '50': "#00202f";
+        readonly '100': "#00344e";
+        readonly '200': "#00496c";
+        readonly '300': "#005d8b";
+        readonly '400': "#0072a9";
+        readonly '500': "#2e8bb8";
+        readonly '600': "#5ca5c8";
+        readonly '700': "#8abed7";
+        readonly '800': "#b8d8e7";
+        readonly '900': "#e6f1f6";
+    };
+    readonly teal: {
+        readonly '50': "#050e0f";
+        readonly '100': "#0e2729";
+        readonly '200': "#174044";
+        readonly '300': "#287279";
+        readonly '400': "#318b94";
+        readonly '500': "#56a0a7";
+        readonly '600': "#7bb5bb";
+        readonly '700': "#a0cace";
+        readonly '800': "#c5dfe1";
+        readonly '900': "#eaf3f4";
+    };
+    readonly green: {
+        readonly '50': "#162c11";
+        readonly '100': "#24491d";
+        readonly '200': "#326528";
+        readonly '300': "#408233";
+        readonly '400': "#4e9e3e";
+        readonly '500': "#6eaf61";
+        readonly '600': "#8ec183";
+        readonly '700': "#aed2a6";
+        readonly '800': "#cde4c9";
+        readonly '900': "#edf5ec";
+    };
+    readonly yellow: {
+        readonly '50': "#433608";
+        readonly '100': "#6f590c";
+        readonly '200': "#9a7c11";
+        readonly '300': "#c69f16";
+        readonly '400': "#f1c21b";
+        readonly '500': "#f4cd44";
+        readonly '600': "#f6d86d";
+        readonly '700': "#f9e396";
+        readonly '800': "#fbeebf";
+        readonly '900': "#fef9e8";
+    };
+    readonly orange: {
+        readonly '50': "#45260e";
+        readonly '100': "#713e17";
+        readonly '200': "#9d5621";
+        readonly '300': "#c96e2a";
+        readonly '400': "#f58633";
+        readonly '500': "#f79c58";
+        readonly '600': "#f9b27c";
+        readonly '700': "#fac7a1";
+        readonly '800': "#fcddc6";
+        readonly '900': "#fef3eb";
+    };
+    readonly magenta: {
+        readonly '50': "#350e20";
+        readonly '100': "#581734";
+        readonly '200': "#7a2048";
+        readonly '300': "#9d295d";
+        readonly '400': "#bf3271";
+        readonly '500': "#cb578b";
+        readonly '600': "#d67ca4";
+        readonly '700': "#e2a1be";
+        readonly '800': "#edc6d7";
+        readonly '900': "#f9ebf1";
+    };
+    readonly 'warm-purple': {
+        readonly '50': "#220b30";
+        readonly '100': "#381350";
+        readonly '200': "#4e1a6f";
+        readonly '300': "#64228e";
+        readonly '400': "#7a29ad";
+        readonly '500': "#9250bc";
+        readonly '600': "#aa76cb";
+        readonly '700': "#c29dd9";
+        readonly '800': "#dac3e8";
+        readonly '900': "#f2eaf7";
+    };
+    readonly 'cool-purple': {
+        readonly '50': "#232740";
+        readonly '100': "#394069";
+        readonly '200': "#505a92";
+        readonly '300': "#6773bb";
+        readonly '400': "#7d8ce4";
+        readonly '500': "#94a1e9";
+        readonly '600': "#acb5ee";
+        readonly '700': "#c3caf3";
+        readonly '800': "#dbdff7";
+        readonly '900': "#f2f4fc";
+    };
+};
+export type BaseColors = typeof baseColors;

package/dist/types/styleD/build/typescript/base/typography.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const baseTypography: {
+    readonly family: {
+        readonly 'Open Sans': "Open Sans";
+        readonly 'Open Sans Compact': "Open Sans";
+        readonly 'Guardian Text Egyptian': "GuardianTextEgyptian";
+        readonly 'Guardian Headline': "GH Guardian Headline";
+    };
+    readonly size: {
+        readonly '12-px': "12px";
+        readonly '14-px': "14px";
+        readonly '16-px': "16px";
+        readonly '18-px': "18px";
+        readonly '20-px': "20px";
+        readonly '24-px': "24px";
+        readonly '28-px': "28px";
+        readonly '32-px': "32px";
+        readonly '36-px': "36px";
+        readonly '42-px': "42px";
+        readonly '48-px': "48px";
+    };
+    readonly weight: {
+        readonly 'Guardian Text Egyptian': {
+            readonly normal: 400;
+            readonly bold: 700;
+        };
+        readonly 'Guardian Headline': {
+            readonly bold: 700;
+        };
+        readonly 'Open Sans': {
+            readonly light: 340;
+            readonly normal: 460;
+            readonly semiBold: 600;
+            readonly bold: 700;
+        };
+        readonly 'Open Sans Compact': {
+            readonly light: 360;
+            readonly normal: 460;
+            readonly semiBold: 600;
+            readonly bold: 700;
+        };
+    };
+    readonly width: {
+        readonly 'Open Sans': 95;
+        readonly 'Open Sans Compact': 88;
+    };
+    readonly style: {
+        readonly normal: "normal";
+        readonly italic: "italic";
+    };
+    readonly 'line-height': {
+        readonly tight: 1.15;
+        readonly normal: 1.3;
+        readonly loose: 1.4;
+    };
+    readonly 'letter-spacing': {
+        readonly 'densest-px': "-1px";
+        readonly 'denser-px': "-0.5px";
+        readonly 'dense-px': "-0.2px";
+        readonly 'default-px': "0px";
+    };
+};
+export type BaseTypography = typeof baseTypography;

package/dist/types/styleD/build/typescript/component/byline.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentByline: {
+    color: string;
+    backgroundColor: string;
+    readonlyBackgroundColor: string;
+    borderColor: string;
+    borderWidth: string;
+    borderStyle: string;
+    lineHeight: number;
+    chip: {
+        color: string;
+        borderColor: string;
+        borderWidth: string;
+        borderStyle: string;
+        borderRadius: string;
+        paddingX: string;
+        paddingY: string;
+        selectedBorderColor: string;
+        taggedBackgroundColor: string;
+        untaggedColor: string;
+    };
+    dropdown: {
+        borderColor: string;
+        borderWidth: string;
+        borderStyle: string;
+        backgroundColor: string;
+        li: {
+            color: string;
+            borderBottomColor: string;
+            borderBottomWidth: string;
+            borderBottomStyle: string;
+            selectedBackgroundColor: string;
+            selectedColor: string;
+        };
+        maxHeight: string;
+    };
+    invisiblesColor: string;
+    placeholderColor: string;
+};
+export type ComponentByline = typeof componentByline;

package/dist/types/styleD/build/typescript/component/tagAutocomplete.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentTagAutocomplete: {
+    input: {
+        color: string;
+        backgroundColor: string;
+        disabledBackgroundColor: string;
+        borderWidth: string;
+        borderStyle: string;
+        borderColor: string;
+        padding: string;
+    };
+    listbox: {
+        borderWidth: string;
+        borderStyle: string;
+        borderColor: string;
+        paddingY: string;
+        paddingX: string;
+        backgroundColor: string;
+        item: {
+            paddingY: string;
+            paddingX: string;
+            backgroundHoverColor: string;
+            backgroundFocusedColor: string;
+        };
+    };
+};
+export type ComponentTagAutocomplete = typeof componentTagAutocomplete;