@guardian/stand 0.0.4 → 0.0.6

package/dist/styleD/build/typescript/semantic/typography.js

@@ -0,0 +1,460 @@
+const semanticTypography = {
+  "title-sm": {
+    font: {
+      fontFamily: "GH Guardian Headline",
+      fontWeight: 700,
+      fontSize: "18px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 100
+  },
+  "title-md": {
+    font: {
+      fontFamily: "GH Guardian Headline",
+      fontWeight: 700,
+      fontSize: "20px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 100
+  },
+  "title-lg": {
+    font: {
+      fontFamily: "GH Guardian Headline",
+      fontWeight: 700,
+      fontSize: "24px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 100
+  },
+  "title-xl": {
+    font: {
+      fontFamily: "GH Guardian Headline",
+      fontWeight: 700,
+      fontSize: "32px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 100
+  },
+  "heading-xs": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "12px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 95
+  },
+  "heading-sm": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "14px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "-0.2px"
+    },
+    letterSpacing: "-0.2px",
+    fontWidth: 95
+  },
+  "heading-md": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "16px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "-0.5px"
+    },
+    letterSpacing: "-0.5px",
+    fontWidth: 95
+  },
+  "heading-lg": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "18px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "-0.5px"
+    },
+    letterSpacing: "-0.5px",
+    fontWidth: 95
+  },
+  "heading-xl": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "20px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "-0.5px"
+    },
+    letterSpacing: "-0.5px",
+    fontWidth: 95
+  },
+  "heading-2xl": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "24px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "-1px"
+    },
+    letterSpacing: "-1px",
+    fontWidth: 95
+  },
+  "heading-compact-xs": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "12px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 88
+  },
+  "heading-compact-sm": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "14px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 88
+  },
+  "heading-compact-md": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "16px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "-0.2px"
+    },
+    letterSpacing: "-0.2px",
+    fontWidth: 88
+  },
+  "heading-compact-lg": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "18px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "-0.2px"
+    },
+    letterSpacing: "-0.2px",
+    fontWidth: 88
+  },
+  "heading-compact-xl": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "20px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "-0.5px"
+    },
+    letterSpacing: "-0.5px",
+    fontWidth: 88
+  },
+  "heading-compact-2xl": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 700,
+      fontSize: "24px",
+      fontStyle: "normal",
+      lineHeight: 1.15,
+      letterSpacing: "-0.5px"
+    },
+    letterSpacing: "-0.5px",
+    fontWidth: 88
+  },
+  "body-sm": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "14px",
+      fontStyle: "normal",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 95
+  },
+  "body-md": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "16px",
+      fontStyle: "normal",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 95
+  },
+  "body-lg": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "18px",
+      fontStyle: "normal",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 95
+  },
+  "body-xl": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "20px",
+      fontStyle: "normal",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 95
+  },
+  "body-italic-sm": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "14px",
+      fontStyle: "italic",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 95
+  },
+  "body-italic-md": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "16px",
+      fontStyle: "italic",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 95
+  },
+  "body-italic-lg": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "18px",
+      fontStyle: "italic",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 95
+  },
+  "body-italic-xl": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "20px",
+      fontStyle: "italic",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 95
+  },
+  "body-compact-sm": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "14px",
+      fontStyle: "normal",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 88
+  },
+  "body-compact-md": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "16px",
+      fontStyle: "normal",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 88
+  },
+  "body-compact-lg": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "18px",
+      fontStyle: "normal",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 88
+  },
+  "body-compact-xl": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "20px",
+      fontStyle: "normal",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 88
+  },
+  "body-compact-italic-sm": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "14px",
+      fontStyle: "italic",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 88
+  },
+  "body-compact-italic-md": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "16px",
+      fontStyle: "italic",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 88
+  },
+  "body-compact-italic-lg": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "18px",
+      fontStyle: "italic",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 88
+  },
+  "body-compact-italic-xl": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "20px",
+      fontStyle: "italic",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 88
+  },
+  "meta-md": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "12px",
+      fontStyle: "normal",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 95
+  },
+  "meta-compact-md": {
+    font: {
+      fontFamily: "Open Sans",
+      fontWeight: 460,
+      fontSize: "12px",
+      fontStyle: "normal",
+      lineHeight: 1.3,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 88
+  },
+  "article-body-md": {
+    font: {
+      fontFamily: "GuardianTextEgyptian",
+      fontWeight: 400,
+      fontSize: "16px",
+      fontStyle: "normal",
+      lineHeight: 1.4,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 100
+  },
+  "article-body-bold-md": {
+    font: {
+      fontFamily: "GuardianTextEgyptian",
+      fontWeight: 700,
+      fontSize: "16px",
+      fontStyle: "normal",
+      lineHeight: 1.4,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 100
+  },
+  "article-body-italic-md": {
+    font: {
+      fontFamily: "GuardianTextEgyptian",
+      fontWeight: 400,
+      fontSize: "16px",
+      fontStyle: "italic",
+      lineHeight: 1.4,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 100
+  },
+  "article-body-bold-italic-md": {
+    font: {
+      fontFamily: "GuardianTextEgyptian",
+      fontWeight: 700,
+      fontSize: "16px",
+      fontStyle: "italic",
+      lineHeight: 1.4,
+      letterSpacing: "0px"
+    },
+    letterSpacing: "0px",
+    fontWidth: 100
+  }
+};
+
+export { semanticTypography };

package/dist/styleD/utils/semantic/typography.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var react = require('@emotion/react');
+
+const convertTypographyToEmotion = (typography) => {
+  return react.css`
+		font-family: ${typography.font.fontFamily};
+		font-weight: ${typography.font.fontWeight};
+		font-size: ${typography.font.fontSize};
+		font-style: ${typography.font.fontStyle};
+		line-height: ${typography.font.lineHeight};
+		letter-spacing: ${typography.letterSpacing};
+		font-variation-settings: \"wdth\" ${typography.fontWidth};
+	`;
+};
+
+exports.convertTypographyToEmotion = convertTypographyToEmotion;

package/dist/styleD/utils/semantic/typography.js

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+
+const convertTypographyToEmotion = (typography) => {
+  return css`
+		font-family: ${typography.font.fontFamily};
+		font-weight: ${typography.font.fontWeight};
+		font-size: ${typography.font.fontSize};
+		font-style: ${typography.font.fontStyle};
+		line-height: ${typography.font.lineHeight};
+		letter-spacing: ${typography.letterSpacing};
+		font-variation-settings: \"wdth\" ${typography.fontWidth};
+	`;
+};
+
+export { convertTypographyToEmotion };

package/dist/types/components/byline/Byline.d.ts

@@ -0,0 +1,83 @@
+import type { FocusEventHandler } from 'react';
+import type { ComponentByline } from '../../styleD/build/typescript/component/byline';
+import type { DeepPartial } from '../util';
+import type { BylineModel, TaggedContributor } from './lib';
+type BylineProps = {
+    /** `theme` - Used to customise the look and feel of the Byline component */
+    theme?: DeepPartial<ComponentByline>;
+    /** `allowUntaggedContributors` - Whether to allow untagged contributors in the byline */
+    allowUntaggedContributors?: boolean;
+    /** `contributorLimit` - Maximum number of tagged/untagged contributors allowed in the byline */
+    contributorLimit?: number;
+    /** `enablePreview` - Whether to show the byline preview below the editor */
+    enablePreview?: boolean;
+    /** `placeholder` - Placeholder text for the byline editor */
+    placeholder?: string;
+    /** `initialValue` - Initial value for the byline editor */
+    initialValue?: BylineModel;
+    /** `readOnly` - Whether the byline editor is in read-only mode */
+    readOnly?: boolean;
+    /** `handleSave` - Callback function to handle saving the byline value */
+    handleSave: (newValue: BylineModel) => void;
+    /** `searchContributors` - Function to search for contributors based on selected text, results will appear on the dropdown */
+    searchContributors?: (selectedText: string) => Promise<TaggedContributor[]>;
+    /** `onBlur` - Optional blur event handler for the byline editor */
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+};
+/**
+ * ## Byline
+ *
+ * *Status: Production*
+ *
+ * A flexible byline editor component built in ProseMirror and React with usability and accessibility in mind.
+ *
+ * **Peer dependencies:**
+ *
+ * You'll need to install the following peer dependencies in your project to use the `Byline` component:
+ * - `@guardian/prosemirror-invisibles`
+ * - `prosemirror-dropcursor`
+ * - `prosemirror-history`
+ * - `prosemirror-keymap`
+ * - `prosemirror-model`
+ * - `prosemirror-state`
+ * - `prosemirror-view`
+ *
+ * See the `peerDependencies` section of `package.json` for compatible versions to install.
+ *
+ * #### Usage
+ *
+ * ```tsx
+ * import type { BylineModel } from '@guardian/stand';
+ * import { Byline } from '@guardian/stand';
+ *
+ * const Component = () => {
+ *     const bylineModel: BylineModel = {
+ *         // ...set up your byline model here
+ *     };
+ *     ...
+ * 	return (
+ *         <>
+ *         ...
+ *             <Byline initialValue={bylineModel} />
+ *         ...
+ *         </>
+ *     );
+ * };
+ * ```
+ *
+ * By itself the `Byline` component is just the editor UI.
+ * You will need to set up the ProseMirror editor state, schema, and plugins to get a fully functioning byline editor.
+ * See the props and example below for a more complete implementation.
+ * The `BylineModel` type defines the structure of the byline data which is agnostic from any other data structure. You must convert to/from this model when integrating with your application's data structures.
+ *
+ * #### Props
+ *
+ * See {@link BylineProps} for the full list of props, usage example can be seen in Storybook.
+ *
+ * #### Example
+ *
+ * The `ContentByline` component in `flexible-frontend` has a detailed example of how to use the `Byline` component from Stand.
+ * See [ContentByline.tsx](https://github.com/guardian/flexible-content/blob/1d537615a18ae24a4a5410a3f945b2b9db1dbb47/flexible-frontend/src/app/components/furniture/content-byline/ContentByline.tsx#L72-L205).
+ */
+export declare const Byline: ({ theme, allowUntaggedContributors, contributorLimit, enablePreview, placeholder, initialValue, readOnly, handleSave, searchContributors, onBlur, }: BylineProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/byline/styles.d.ts

@@ -0,0 +1,13 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { Node } from 'prosemirror-model';
+import { type ComponentByline } from '../../styleD/build/typescript/component/byline';
+import type { DeepPartial } from '../util';
+export declare const bylineContainerStyles: SerializedStyles;
+export declare const bylineEditorStyles: (partialTheme?: DeepPartial<ComponentByline>) => SerializedStyles;
+export declare const dropdownContainerStyles: (showDropdown: boolean, partialTheme?: DeepPartial<ComponentByline['dropdown']>) => SerializedStyles;
+export declare const dropdownUlStyles: SerializedStyles;
+export declare const dropdownLiStyles: (partialTheme?: DeepPartial<ComponentByline['dropdown']>) => SerializedStyles;
+export declare const selectedDropdownLiStyles: (partialTheme?: DeepPartial<ComponentByline['dropdown']>) => SerializedStyles;
+export declare const previewStyles: SerializedStyles;
+export declare const previewFreeTextStyles: SerializedStyles;
+export declare const previewContributorStyles: (node: Node) => SerializedStyles;

package/dist/types/components/byline/theme.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentByline } from '../../styleD/build/typescript/component/byline';
+import type { DeepPartial } from '../util';
+export type PartialBylineTheme = DeepPartial<ComponentByline>;