@guardian/stand 0.0.9 → 0.0.11

package/dist/types/util/types.d.ts

@@ -1,3 +1,31 @@
+/// <reference types="react" />
+import type { SerializedStyles } from '@emotion/react';
+export interface DefaultProps<ThemeType, ClassNameType = undefined> {
+    /**
+     * Custom theme overrides for the component, this is the recommended way to
+     * customize the appearance of the component based on the design system tokens
+     */
+    theme?: DeepPartial<ThemeType>;
+    /**
+     * Class name to be applied to the component's root element, for scenarios where
+     * custom styling is needed outside of the design system theming.
+     *
+     * Either use type ClassNameType (when extending a component from react-aria-components)
+     * or optional string if ClassNameType is undefined/not provided.
+     */
+    className?: ClassNameType extends undefined ? string | undefined : ClassNameType;
+    /**
+     * If the theme does not cover all use cases, you can use this prop to
+     * override component styles by passing in the result of [emotion's `css` function/prop](https://emotion.sh/docs/introduction).
+     */
+    cssOverrides?: SerializedStyles | SerializedStyles[];
+}
+export interface DefaultPropsWithChildren<ThemeType, ClassNameType = undefined, ChildrenType = React.ReactNode> extends DefaultProps<ThemeType, ClassNameType> {
+    /**
+     * The content of the component
+     */
+    children?: ChildrenType;
+}
 export type Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};

package/dist/types/utils.d.ts

@@ -4,3 +4,4 @@
  * Utilities for working with design tokens and styles.
  */
 export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle, } from './styleD/utils/semantic/typography';
+export { GlobalResetStyles } from './util/reset';

package/dist/typography.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Typography = require('./components/typography/Typography.cjs');
+var typography = require('./styleD/build/typescript/component/typography.cjs');
+
+
+
+exports.Typography = Typography.Typography;
+exports.componentTypography = typography.componentTypography;

package/dist/typography.js

@@ -0,0 +1,2 @@
+export { Typography } from './components/typography/Typography.js';
+export { componentTypography } from './styleD/build/typescript/component/typography.js';

package/dist/user-menu.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var UserMenu = require('./components/user-menu/UserMenu.cjs');
+var userMenu = require('./styleD/build/typescript/component/userMenu.cjs');
+
+
+
+exports.UserMenu = UserMenu.UserMenu;
+exports.componentUserMenu = userMenu.componentUserMenu;

package/dist/user-menu.js

@@ -0,0 +1,2 @@
+export { UserMenu } from './components/user-menu/UserMenu.js';
+export { componentUserMenu } from './styleD/build/typescript/component/userMenu.js';

package/dist/util/css/reset.css

@@ -0,0 +1,124 @@
+/*
+Select CSS resets for use with the stand design system.
+Modified from https://github.com/guardian/csnx/blob/0f68024f6f3bee003b5f95e66d29fb74987a8dec/libs/%40guardian/source/src/foundations/utils/resets.ts
+*/
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+}
+
+html {
+	text-size-adjust: none;
+	-webkit-text-size-adjust: none;
+	-webkit-tap-highlight-color: transparent;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body {
+	text-rendering: optimizeLegibility;
+	font-feature-settings: 'kern';
+	font-kerning: normal; /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21 */
+	font-variant-ligatures: common-ligatures;
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+menu,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+*[hidden] {
+	display: none;
+}
+
+body {
+	min-height: 100svh;
+}

package/dist/util/reset.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var react = require('@emotion/react');
+var reset = require('./reset.css.cjs');
+
+const GlobalResetStyles = react.css`
+	${reset}
+`;
+
+exports.GlobalResetStyles = GlobalResetStyles;

package/dist/util/reset.css.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var reset = "/*\nSelect CSS resets for use with the stand design system.\nModified from https://github.com/guardian/csnx/blob/0f68024f6f3bee003b5f95e66d29fb74987a8dec/libs/%40guardian/source/src/foundations/utils/resets.ts\n*/\n*,\n*::after,\n*::before {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\ttext-size-adjust: none;\n\t-webkit-text-size-adjust: none;\n\t-webkit-tap-highlight-color: transparent;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\nhtml,\nbody {\n\ttext-rendering: optimizeLegibility;\n\tfont-feature-settings: 'kern';\n\tfont-kerning: normal; /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21 */\n\tfont-variant-ligatures: common-ligatures;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nmenu,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n\n*[hidden] {\n\tdisplay: none;\n}\n\nbody {\n\tmin-height: 100svh;\n}\n";
+
+module.exports = reset;

package/dist/util/reset.css.js

@@ -0,0 +1,3 @@
+var reset = "/*\nSelect CSS resets for use with the stand design system.\nModified from https://github.com/guardian/csnx/blob/0f68024f6f3bee003b5f95e66d29fb74987a8dec/libs/%40guardian/source/src/foundations/utils/resets.ts\n*/\n*,\n*::after,\n*::before {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\ttext-size-adjust: none;\n\t-webkit-text-size-adjust: none;\n\t-webkit-tap-highlight-color: transparent;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\nhtml,\nbody {\n\ttext-rendering: optimizeLegibility;\n\tfont-feature-settings: 'kern';\n\tfont-kerning: normal; /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21 */\n\tfont-variant-ligatures: common-ligatures;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nmenu,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n\n*[hidden] {\n\tdisplay: none;\n}\n\nbody {\n\tmin-height: 100svh;\n}\n";
+
+export { reset as default };

package/dist/util/reset.js

@@ -0,0 +1,8 @@
+import { css } from '@emotion/react';
+import reset from './reset.css.js';
+
+const GlobalResetStyles = css`
+	${reset}
+`;
+
+export { GlobalResetStyles };

package/dist/utils.cjs

@@ -1,8 +1,10 @@
 'use strict';
 
 var typography = require('./styleD/utils/semantic/typography.cjs');
+var reset = require('./util/reset.cjs');
 
 
 
 exports.convertTypographyToEmotionObjectStyle = typography.convertTypographyToEmotionObjectStyle;
 exports.convertTypographyToEmotionStringStyle = typography.convertTypographyToEmotionStringStyle;
+exports.GlobalResetStyles = reset.GlobalResetStyles;

package/dist/utils.js

@@ -1 +1,2 @@
 export { convertTypographyToEmotionObjectStyle, convertTypographyToEmotionStringStyle } from './styleD/utils/semantic/typography.js';
+export { GlobalResetStyles } from './util/reset.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
   "exports": {
@@ -9,6 +9,41 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./avatar": {
+      "types": "./dist/types/avatar.d.ts",
+      "import": "./dist/avatar.js",
+      "require": "./dist/avatar.cjs"
+    },
+    "./button": {
+      "types": "./dist/types/button.d.ts",
+      "import": "./dist/button.js",
+      "require": "./dist/button.cjs"
+    },
+    "./link-button": {
+      "types": "./dist/types/link-button.d.ts",
+      "import": "./dist/link-button.js",
+      "require": "./dist/link-button.cjs"
+    },
+    "./icon-button": {
+      "types": "./dist/types/icon-button.d.ts",
+      "import": "./dist/icon-button.js",
+      "require": "./dist/icon-button.cjs"
+    },
+    "./icon-link-button": {
+      "types": "./dist/types/icon-link-button.d.ts",
+      "import": "./dist/icon-link-button.js",
+      "require": "./dist/icon-link-button.cjs"
+    },
+    "./typography": {
+      "types": "./dist/types/typography.d.ts",
+      "import": "./dist/typography.js",
+      "require": "./dist/typography.cjs"
+    },
+    "./icon": {
+      "types": "./dist/types/icon.d.ts",
+      "import": "./dist/icon.js",
+      "require": "./dist/icon.cjs"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -19,12 +54,21 @@
       "import": "./dist/tag-picker.js",
       "require": "./dist/tag-picker.cjs"
     },
+    "./user-menu": {
+      "types": "./dist/types/user-menu.d.ts",
+      "import": "./dist/user-menu.js",
+      "require": "./dist/user-menu.cjs"
+    },
     "./utils": {
       "types": "./dist/types/utils.d.ts",
       "import": "./dist/utils.js",
       "require": "./dist/utils.cjs"
     },
     "./fonts/OpenSans.css": "./dist/fonts/OpenSans.css",
+    "./fonts/MaterialSymbolsOutlined.css": "./dist/fonts/MaterialSymbolsOutlined.css",
+    "./fonts/MaterialSymbolsRound.css": "./dist/fonts/MaterialSymbolsRound.css",
+    "./fonts/MaterialSymbolsSharp.css": "./dist/fonts/MaterialSymbolsSharp.css",
+    "./util/reset.css": "./dist/util/css/reset.css",
     "./base/colors.css": "./dist/styleD/build/css/base/colors.css",
     "./base/typography.css": "./dist/styleD/build/css/base/typography.css",
     "./base/spacing.css": "./dist/styleD/build/css/base/spacing.css",
@@ -35,17 +79,46 @@
     "./semantic/sizing.css": "./dist/styleD/build/css/semantic/sizing.css",
     "./component/byline.css": "./dist/styleD/build/css/component/byline.css",
     "./component/tagAutocomplete.css": "./dist/styleD/build/css/component/tagAutocomplete.css",
-    "./component/tagTable.css": "./dist/styleD/build/css/component/tagTable.css"
+    "./component/tagTable.css": "./dist/styleD/build/css/component/tagTable.css",
+    "./component/userMenu.css": "./dist/styleD/build/css/component/userMenu.css",
+    "./component/avatar.css": "./dist/styleD/build/css/component/avatar.css",
+    "./component/button.css": "./dist/styleD/build/css/component/button.css",
+    "./component/typography.css": "./dist/styleD/build/css/component/typography.css",
+    "./component/icon.css": "./dist/styleD/build/css/component/icon.css"
   },
   "//typesVersions": "Provides backward compatibility for TypeScript moduleResolution: node - maps subpath imports to correct type definition files. When adding new components with their own entry points, ensure to add them here.",
   "typesVersions": {
     "*": {
+      "avatar": [
+        "./dist/types/avatar.d.ts"
+      ],
+      "button": [
+        "./dist/types/button.d.ts"
+      ],
+      "link-button": [
+        "./dist/types/link-button.d.ts"
+      ],
+      "icon-button": [
+        "./dist/types/icon-button.d.ts"
+      ],
+      "icon-link-button": [
+        "./dist/types/icon-link-button.d.ts"
+      ],
+      "typography": [
+        "./dist/types/typography.d.ts"
+      ],
+      "icon": [
+        "./dist/types/icon.d.ts"
+      ],
       "byline": [
         "./dist/types/byline.d.ts"
       ],
       "tag-picker": [
         "./dist/types/tag-picker.d.ts"
       ],
+      "user-menu": [
+        "./dist/types/user-menu.d.ts"
+      ],
       "utils": [
         "./dist/types/utils.d.ts"
       ]
@@ -70,6 +143,7 @@
     "@guardian/prettier": "10.0.0",
     "@guardian/prosemirror-invisibles": "3.1.1",
     "@guardian/tsconfig": "1.0.1",
+    "@material-design-icons/svg": "^0.14.15",
     "@playwright/experimental-ct-react17": "^1.57.0",
     "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-node-resolve": "16.0.3",
@@ -98,16 +172,20 @@
     "react": "17.0.2",
     "react-aria-components": "1.13.0",
     "react-dom": "17.0.2",
+    "remark-gfm": "^4.0.1",
     "rimraf": "6.1.2",
     "rollup": "4.55.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-esbuild": "6.2.1",
+    "rollup-plugin-import-css": "^4.2.0",
     "rollup-plugin-node-externals": "8.1.2",
     "storybook": "^10.1.11",
     "style-dictionary": "^5.1.4",
     "ts-jest": "29.4.6",
     "tslib": "2.8.1",
-    "typescript": "5.1.3"
+    "typescript": "5.1.3",
+    "vite": "^7.3.1",
+    "vite-plugin-svgr": "^4.5.0"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11.4 <=11.14.0",