@guardian/stand 0.0.65 → 0.0.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/Badge.cjs +5 -0
  2. package/dist/Badge.d.cts +5 -0
  3. package/dist/Badge.d.ts +5 -0
  4. package/dist/Badge.js +3 -0
  5. package/dist/components/Badge/Badge.cjs +17 -0
  6. package/dist/components/Badge/Badge.d.cts +5 -0
  7. package/dist/components/Badge/Badge.d.ts +5 -0
  8. package/dist/components/Badge/Badge.js +17 -0
  9. package/dist/components/Badge/styles.cjs +26 -0
  10. package/dist/components/Badge/styles.d.cts +9 -0
  11. package/dist/components/Badge/styles.d.ts +9 -0
  12. package/dist/components/Badge/styles.js +25 -0
  13. package/dist/components/Badge/types.d.cts +23 -0
  14. package/dist/components/Badge/types.d.ts +23 -0
  15. package/dist/index.cjs +2 -0
  16. package/dist/index.d.cts +2 -1
  17. package/dist/index.d.ts +2 -1
  18. package/dist/index.js +2 -1
  19. package/dist/styleD/build/css/component/badge.css +69 -0
  20. package/dist/styleD/build/typescript/component/badge.cjs +137 -0
  21. package/dist/styleD/build/typescript/component/badge.d.cts +162 -0
  22. package/dist/styleD/build/typescript/component/badge.d.ts +162 -0
  23. package/dist/styleD/build/typescript/component/badge.js +137 -0
  24. package/package.json +15 -1
package/dist/Badge.cjs ADDED
@@ -0,0 +1,5 @@
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
+ const require_badge = require("./styleD/build/typescript/component/badge.cjs");
3
+ const require_Badge = require("./components/Badge/Badge.cjs");
4
+ exports.Badge = require_Badge.Badge;
5
+ exports.componentBadge = require_badge.componentBadge;
package/dist/Badge.d.cts ADDED
@@ -0,0 +1,5 @@
1
+ import { ComponentBadge, componentBadge } from "./styleD/build/typescript/component/badge.cjs";
2
+ import { PartialBadgeTheme } from "./components/Badge/styles.cjs";
3
+ import { BadgeProps } from "./components/Badge/types.cjs";
4
+ import { Badge } from "./components/Badge/Badge.cjs";
5
+ export { Badge, type BadgeProps, type PartialBadgeTheme as BadgeTheme, type ComponentBadge, componentBadge };
package/dist/Badge.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { ComponentBadge, componentBadge } from "./styleD/build/typescript/component/badge.js";
2
+ import { PartialBadgeTheme } from "./components/Badge/styles.js";
3
+ import { BadgeProps } from "./components/Badge/types.js";
4
+ import { Badge } from "./components/Badge/Badge.js";
5
+ export { Badge, type BadgeProps, type PartialBadgeTheme as BadgeTheme, type ComponentBadge, componentBadge };
package/dist/Badge.js ADDED
@@ -0,0 +1,3 @@
1
+ import { componentBadge } from "./styleD/build/typescript/component/badge.js";
2
+ import { Badge } from "./components/Badge/Badge.js";
3
+ export { Badge, componentBadge };
package/dist/components/Badge/Badge.cjs ADDED
@@ -0,0 +1,17 @@
1
+ const require_mergeDeep = require("../../util/mergeDeep.cjs");
2
+ const require_styles = require("./styles.cjs");
3
+ let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
4
+ //#region src/components/Badge/Badge.tsx
5
+ const Badge = ({ size = "md", color = "green", weight = "strong", theme = {}, cssOverrides, children, ...props }) => {
6
+ return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
7
+ css: [require_styles.badgeStyles(require_mergeDeep.mergeDeep(require_styles.defaultBadgeTheme, theme), {
8
+ color,
9
+ size,
10
+ weight
11
+ }), cssOverrides],
12
+ ...props,
13
+ children
14
+ });
15
+ };
16
+ //#endregion
17
+ exports.Badge = Badge;
package/dist/components/Badge/Badge.d.cts ADDED
@@ -0,0 +1,5 @@
1
+ import { BadgeProps } from "./types.cjs";
2
+ //#region src/components/Badge/Badge.d.ts
3
+ declare const Badge: ({ size, color, weight, theme, cssOverrides, children, ...props }: BadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
4
+ //#endregion
5
+ export { Badge };
package/dist/components/Badge/Badge.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { BadgeProps } from "./types.js";
2
+ //#region src/components/Badge/Badge.d.ts
3
+ declare const Badge: ({ size, color, weight, theme, cssOverrides, children, ...props }: BadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
4
+ //#endregion
5
+ export { Badge };
package/dist/components/Badge/Badge.js ADDED
@@ -0,0 +1,17 @@
1
+ import { mergeDeep } from "../../util/mergeDeep.js";
2
+ import { badgeStyles, defaultBadgeTheme } from "./styles.js";
3
+ import { jsx } from "@emotion/react/jsx-runtime";
4
+ //#region src/components/Badge/Badge.tsx
5
+ const Badge = ({ size = "md", color = "green", weight = "strong", theme = {}, cssOverrides, children, ...props }) => {
6
+ return /* @__PURE__ */ jsx("span", {
7
+ css: [badgeStyles(mergeDeep(defaultBadgeTheme, theme), {
8
+ color,
9
+ size,
10
+ weight
11
+ }), cssOverrides],
12
+ ...props,
13
+ children
14
+ });
15
+ };
16
+ //#endregion
17
+ export { Badge };
package/dist/components/Badge/styles.cjs ADDED
@@ -0,0 +1,26 @@
1
+ const require_typography = require("../../styleD/utils/semantic/typography.cjs");
2
+ const require_badge = require("../../styleD/build/typescript/component/badge.cjs");
3
+ let _emotion_react = require("@emotion/react");
4
+ //#region src/components/Badge/styles.ts
5
+ const defaultBadgeTheme = require_badge.componentBadge;
6
+ const badgeStyles = (theme, { size = "md", color = "green", weight = "strong" }) => {
7
+ const sizeVariant = theme.size[size];
8
+ const padding = sizeVariant.padding;
9
+ const typography = sizeVariant.weight[weight].typography;
10
+ const colorVariant = theme.color[color].weight[weight];
11
+ return _emotion_react.css`
12
+ display: ${theme.shared.display};
13
+ align-items: ${theme.shared.alignItems};
14
+ justify-content: ${theme.shared.justifyContent};
15
+ padding-top: ${padding.top};
16
+ padding-right: ${padding.right};
17
+ padding-bottom: ${padding.bottom};
18
+ padding-left: ${padding.left};
19
+ ${require_typography.convertTypographyToEmotionStringStyle(typography)}
20
+ color: ${colorVariant.color};
21
+ background-color: ${colorVariant.background};
22
+ `;
23
+ };
24
+ //#endregion
25
+ exports.badgeStyles = badgeStyles;
26
+ exports.defaultBadgeTheme = defaultBadgeTheme;
package/dist/components/Badge/styles.d.cts ADDED
@@ -0,0 +1,9 @@
1
+ import { DeepPartial, Prettify } from "../../util/types.cjs";
2
+ import { ComponentBadge } from "../../styleD/build/typescript/component/badge.cjs";
3
+ import "./types.cjs";
4
+ import { SerializedStyles } from "@emotion/react";
5
+ //#region src/components/Badge/styles.d.ts
6
+ type BadgeTheme = Prettify<Pick<ComponentBadge, 'size' | 'color' | 'shared'>>;
7
+ type PartialBadgeTheme = Prettify<DeepPartial<BadgeTheme>>;
8
+ //#endregion
9
+ export { BadgeTheme, PartialBadgeTheme };
package/dist/components/Badge/styles.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { DeepPartial, Prettify } from "../../util/types.js";
2
+ import { ComponentBadge } from "../../styleD/build/typescript/component/badge.js";
3
+ import "./types.js";
4
+ import { SerializedStyles } from "@emotion/react";
5
+ //#region src/components/Badge/styles.d.ts
6
+ type BadgeTheme = Prettify<Pick<ComponentBadge, 'size' | 'color' | 'shared'>>;
7
+ type PartialBadgeTheme = Prettify<DeepPartial<BadgeTheme>>;
8
+ //#endregion
9
+ export { BadgeTheme, PartialBadgeTheme };
package/dist/components/Badge/styles.js ADDED
@@ -0,0 +1,25 @@
1
+ import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
2
+ import { componentBadge } from "../../styleD/build/typescript/component/badge.js";
3
+ import { css } from "@emotion/react";
4
+ //#region src/components/Badge/styles.ts
5
+ const defaultBadgeTheme = componentBadge;
6
+ const badgeStyles = (theme, { size = "md", color = "green", weight = "strong" }) => {
7
+ const sizeVariant = theme.size[size];
8
+ const padding = sizeVariant.padding;
9
+ const typography = sizeVariant.weight[weight].typography;
10
+ const colorVariant = theme.color[color].weight[weight];
11
+ return css`
12
+ display: ${theme.shared.display};
13
+ align-items: ${theme.shared.alignItems};
14
+ justify-content: ${theme.shared.justifyContent};
15
+ padding-top: ${padding.top};
16
+ padding-right: ${padding.right};
17
+ padding-bottom: ${padding.bottom};
18
+ padding-left: ${padding.left};
19
+ ${convertTypographyToEmotionStringStyle(typography)}
20
+ color: ${colorVariant.color};
21
+ background-color: ${colorVariant.background};
22
+ `;
23
+ };
24
+ //#endregion
25
+ export { badgeStyles, defaultBadgeTheme };
package/dist/components/Badge/types.d.cts ADDED
@@ -0,0 +1,23 @@
1
+ import { DefaultPropsWithChildren } from "../../util/types.cjs";
2
+ import { componentBadge } from "../../styleD/build/typescript/component/badge.cjs";
3
+ import { BadgeTheme } from "./styles.cjs";
4
+ //#region src/components/Badge/types.d.ts
5
+ type BadgeColors = keyof typeof componentBadge.color;
6
+ type BadgeSizes = keyof typeof componentBadge.size;
7
+ type BadgeWeights = keyof typeof componentBadge.size.md.weight;
8
+ interface BadgeProps extends DefaultPropsWithChildren<BadgeTheme> {
9
+ /**
10
+ * Size variant of the badge
11
+ */
12
+ size?: BadgeSizes;
13
+ /**
14
+ * Color variant of the badge
15
+ */
16
+ color?: BadgeColors;
17
+ /**
18
+ * The weight of the badge can affect both size and color CSS values
19
+ */
20
+ weight?: BadgeWeights;
21
+ }
22
+ //#endregion
23
+ export { BadgeColors, BadgeProps, BadgeSizes, BadgeWeights };
package/dist/components/Badge/types.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { DefaultPropsWithChildren } from "../../util/types.js";
2
+ import { componentBadge } from "../../styleD/build/typescript/component/badge.js";
3
+ import { BadgeTheme } from "./styles.js";
4
+ //#region src/components/Badge/types.d.ts
5
+ type BadgeColors = keyof typeof componentBadge.color;
6
+ type BadgeSizes = keyof typeof componentBadge.size;
7
+ type BadgeWeights = keyof typeof componentBadge.size.md.weight;
8
+ interface BadgeProps extends DefaultPropsWithChildren<BadgeTheme> {
9
+ /**
10
+ * Size variant of the badge
11
+ */
12
+ size?: BadgeSizes;
13
+ /**
14
+ * Color variant of the badge
15
+ */
16
+ color?: BadgeColors;
17
+ /**
18
+ * The weight of the badge can affect both size and color CSS values
19
+ */
20
+ weight?: BadgeWeights;
21
+ }
22
+ //#endregion
23
+ export { BadgeColors, BadgeProps, BadgeSizes, BadgeWeights };
package/dist/index.cjs CHANGED
@@ -4,6 +4,7 @@ const require_button = require("./styleD/build/typescript/component/button.cjs")
4
4
  const require_alertBanner = require("./styleD/build/typescript/component/alertBanner.cjs");
5
5
  const require_breakpoints = require("./styleD/build/typescript/semantic/breakpoints.cjs");
6
6
  const require_avatar = require("./styleD/build/typescript/component/avatar.cjs");
7
+ const require_badge = require("./styleD/build/typescript/component/badge.cjs");
7
8
  const require_buttonGroup = require("./styleD/build/typescript/component/buttonGroup.cjs");
8
9
  const require_byline = require("./styleD/build/typescript/component/byline.cjs");
9
10
  const require_checkbox = require("./styleD/build/typescript/component/checkbox.cjs");
@@ -49,6 +50,7 @@ exports.baseTypography = require_typography$1.baseTypography;
49
50
  exports.componentAlertBanner = require_alertBanner.componentAlertBanner;
50
51
  exports.componentAutocomplete = require_autocomplete.componentAutocomplete;
51
52
  exports.componentAvatar = require_avatar.componentAvatar;
53
+ exports.componentBadge = require_badge.componentBadge;
52
54
  exports.componentButton = require_button.componentButton;
53
55
  exports.componentButtonGroup = require_buttonGroup.componentButtonGroup;
54
56
  exports.componentByline = require_byline.componentByline;
package/dist/index.d.cts CHANGED
@@ -2,6 +2,7 @@ import { ComponentIcon, componentIcon } from "./styleD/build/typescript/componen
2
2
  import { ComponentButton, componentButton } from "./styleD/build/typescript/component/button.cjs";
3
3
  import { ComponentAlertBanner, componentAlertBanner } from "./styleD/build/typescript/component/alertBanner.cjs";
4
4
  import { ComponentAvatar, componentAvatar } from "./styleD/build/typescript/component/avatar.cjs";
5
+ import { ComponentBadge, componentBadge } from "./styleD/build/typescript/component/badge.cjs";
5
6
  import { ComponentButtonGroup, componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.cjs";
6
7
  import { ComponentByline, componentByline } from "./styleD/build/typescript/component/byline.cjs";
7
8
  import { ComponentForm, componentForm } from "./styleD/build/typescript/component/form.cjs";
@@ -40,4 +41,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
40
41
  import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.cjs";
41
42
  import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.cjs";
42
43
  import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.cjs";
43
- export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
44
+ export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
package/dist/index.d.ts CHANGED
@@ -2,6 +2,7 @@ import { ComponentIcon, componentIcon } from "./styleD/build/typescript/componen
2
2
  import { ComponentButton, componentButton } from "./styleD/build/typescript/component/button.js";
3
3
  import { ComponentAlertBanner, componentAlertBanner } from "./styleD/build/typescript/component/alertBanner.js";
4
4
  import { ComponentAvatar, componentAvatar } from "./styleD/build/typescript/component/avatar.js";
5
+ import { ComponentBadge, componentBadge } from "./styleD/build/typescript/component/badge.js";
5
6
  import { ComponentButtonGroup, componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.js";
6
7
  import { ComponentByline, componentByline } from "./styleD/build/typescript/component/byline.js";
7
8
  import { ComponentForm, componentForm } from "./styleD/build/typescript/component/form.js";
@@ -40,4 +41,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
40
41
  import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
41
42
  import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
42
43
  import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
43
- export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
44
+ export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentBadge, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserFeedbackSummary, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
package/dist/index.js CHANGED
@@ -3,6 +3,7 @@ import { componentButton } from "./styleD/build/typescript/component/button.js";
3
3
  import { componentAlertBanner } from "./styleD/build/typescript/component/alertBanner.js";
4
4
  import { semanticBreakpoints } from "./styleD/build/typescript/semantic/breakpoints.js";
5
5
  import { componentAvatar } from "./styleD/build/typescript/component/avatar.js";
6
+ import { componentBadge } from "./styleD/build/typescript/component/badge.js";
6
7
  import { componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.js";
7
8
  import { componentByline } from "./styleD/build/typescript/component/byline.js";
8
9
  import { componentCheckbox } from "./styleD/build/typescript/component/checkbox.js";
@@ -40,4 +41,4 @@ import { semanticSizing } from "./styleD/build/typescript/semantic/sizing.js";
40
41
  import { semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
41
42
  import { semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
42
43
  import { semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
43
- export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
44
+ export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentBadge, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserFeedbackSummary, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
package/dist/styleD/build/css/component/badge.css ADDED
@@ -0,0 +1,69 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --component-badge-shared-display: inline-flex;
7
+ --component-badge-shared-align-items: center;
8
+ --component-badge-shared-justify-content: center;
9
+ --component-badge-size-md-padding-top: 4px;
10
+ --component-badge-size-md-padding-right: 12px;
11
+ --component-badge-size-md-padding-bottom: 4px;
12
+ --component-badge-size-md-padding-left: 12px;
13
+ --component-badge-size-md-weight-strong-typography-font: normal 700 1rem/1.15
14
+ 'Open Sans';
15
+ --component-badge-size-md-weight-strong-typography-letter-spacing: -0.03125rem;
16
+ --component-badge-size-md-weight-strong-typography-font-width: 95;
17
+ --component-badge-size-md-weight-light-typography-font: normal 460 1rem/1.3
18
+ 'Open Sans';
19
+ --component-badge-size-md-weight-light-typography-letter-spacing: 0rem;
20
+ --component-badge-size-md-weight-light-typography-font-width: 95;
21
+ --component-badge-size-sm-padding-top: 4px;
22
+ --component-badge-size-sm-padding-right: 8px;
23
+ --component-badge-size-sm-padding-bottom: 4px;
24
+ --component-badge-size-sm-padding-left: 8px;
25
+ --component-badge-size-sm-weight-strong-typography-font: normal 700
26
+ 0.875rem/1.15 'Open Sans';
27
+ --component-badge-size-sm-weight-strong-typography-letter-spacing: -0.0125rem;
28
+ --component-badge-size-sm-weight-strong-typography-font-width: 95;
29
+ --component-badge-size-sm-weight-light-typography-font: normal 460
30
+ 0.875rem/1.3 'Open Sans';
31
+ --component-badge-size-sm-weight-light-typography-letter-spacing: 0rem;
32
+ --component-badge-size-sm-weight-light-typography-font-width: 95;
33
+ --component-badge-size-xs-padding-top: 1px;
34
+ --component-badge-size-xs-padding-right: 6px;
35
+ --component-badge-size-xs-padding-bottom: 3px;
36
+ --component-badge-size-xs-padding-left: 6px;
37
+ --component-badge-size-xs-weight-strong-typography-font: normal 700
38
+ 0.75rem/1.15 'Open Sans';
39
+ --component-badge-size-xs-weight-strong-typography-letter-spacing: 0rem;
40
+ --component-badge-size-xs-weight-strong-typography-font-width: 95;
41
+ --component-badge-size-xs-weight-light-typography-font: normal 460 0.75rem/1.3
42
+ 'Open Sans';
43
+ --component-badge-size-xs-weight-light-typography-letter-spacing: 0rem;
44
+ --component-badge-size-xs-weight-light-typography-font-width: 95;
45
+ --component-badge-color-green-weight-strong-background: #aed2a6;
46
+ --component-badge-color-green-weight-strong-color: #000000;
47
+ --component-badge-color-green-weight-light-background: #cde4c9;
48
+ --component-badge-color-green-weight-light-color: #24491d;
49
+ --component-badge-color-yellow-weight-strong-background: #f1c21b;
50
+ --component-badge-color-yellow-weight-strong-color: #000000;
51
+ --component-badge-color-yellow-weight-light-background: #ffedac;
52
+ --component-badge-color-yellow-weight-light-color: #5b4a0b;
53
+ --component-badge-color-grey-weight-strong-background: #dcdcdc;
54
+ --component-badge-color-grey-weight-strong-color: #000000;
55
+ --component-badge-color-grey-weight-light-background: #dcdcdc;
56
+ --component-badge-color-grey-weight-light-color: #000000;
57
+ --component-badge-color-orange-weight-strong-background: #fac7a1;
58
+ --component-badge-color-orange-weight-strong-color: #000000;
59
+ --component-badge-color-orange-weight-light-background: #fcddc6;
60
+ --component-badge-color-orange-weight-light-color: #693c16;
61
+ --component-badge-color-warm-purple-weight-strong-background: #dac3e8;
62
+ --component-badge-color-warm-purple-weight-strong-color: #000000;
63
+ --component-badge-color-warm-purple-weight-light-background: #dac3e8;
64
+ --component-badge-color-warm-purple-weight-light-color: #381350;
65
+ --component-badge-color-red-weight-strong-background: #eea198;
66
+ --component-badge-color-red-weight-strong-color: #000000;
67
+ --component-badge-color-red-weight-light-background: #f5c6c0;
68
+ --component-badge-color-red-weight-light-color: #65170e;
69
+ }
package/dist/styleD/build/typescript/component/badge.cjs ADDED
@@ -0,0 +1,137 @@
1
+ //#region src/styleD/build/typescript/component/badge.ts
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ const componentBadge = {
6
+ shared: {
7
+ display: "inline-flex",
8
+ alignItems: "center",
9
+ justifyContent: "center"
10
+ },
11
+ size: {
12
+ md: {
13
+ padding: {
14
+ top: "4px",
15
+ right: "12px",
16
+ bottom: "4px",
17
+ left: "12px"
18
+ },
19
+ weight: {
20
+ strong: { typography: {
21
+ font: "normal 700 1rem/1.15 Open Sans",
22
+ letterSpacing: "-0.03125rem",
23
+ fontWidth: 95
24
+ } },
25
+ light: { typography: {
26
+ font: "normal 460 1rem/1.3 Open Sans",
27
+ letterSpacing: "0rem",
28
+ fontWidth: 95
29
+ } }
30
+ }
31
+ },
32
+ sm: {
33
+ padding: {
34
+ top: "4px",
35
+ right: "8px",
36
+ bottom: "4px",
37
+ left: "8px"
38
+ },
39
+ weight: {
40
+ strong: { typography: {
41
+ font: "normal 700 0.875rem/1.15 Open Sans",
42
+ letterSpacing: "-0.0125rem",
43
+ fontWidth: 95
44
+ } },
45
+ light: { typography: {
46
+ font: "normal 460 0.875rem/1.3 Open Sans",
47
+ letterSpacing: "0rem",
48
+ fontWidth: 95
49
+ } }
50
+ }
51
+ },
52
+ xs: {
53
+ padding: {
54
+ top: "1px",
55
+ right: "6px",
56
+ bottom: "3px",
57
+ left: "6px"
58
+ },
59
+ weight: {
60
+ strong: { typography: {
61
+ font: "normal 700 0.75rem/1.15 Open Sans",
62
+ letterSpacing: "0rem",
63
+ fontWidth: 95
64
+ } },
65
+ light: { typography: {
66
+ font: "normal 460 0.75rem/1.3 Open Sans",
67
+ letterSpacing: "0rem",
68
+ fontWidth: 95
69
+ } }
70
+ }
71
+ }
72
+ },
73
+ color: {
74
+ green: { weight: {
75
+ strong: {
76
+ background: "#aed2a6",
77
+ color: "#000000"
78
+ },
79
+ light: {
80
+ background: "#cde4c9",
81
+ color: "#24491d"
82
+ }
83
+ } },
84
+ yellow: { weight: {
85
+ strong: {
86
+ background: "#f1c21b",
87
+ color: "#000000"
88
+ },
89
+ light: {
90
+ background: "#ffedac",
91
+ color: "#5b4a0b"
92
+ }
93
+ } },
94
+ grey: { weight: {
95
+ strong: {
96
+ background: "#dcdcdc",
97
+ color: "#000000"
98
+ },
99
+ light: {
100
+ background: "#dcdcdc",
101
+ color: "#000000"
102
+ }
103
+ } },
104
+ orange: { weight: {
105
+ strong: {
106
+ background: "#fac7a1",
107
+ color: "#000000"
108
+ },
109
+ light: {
110
+ background: "#fcddc6",
111
+ color: "#693c16"
112
+ }
113
+ } },
114
+ warmPurple: { weight: {
115
+ strong: {
116
+ background: "#dac3e8",
117
+ color: "#000000"
118
+ },
119
+ light: {
120
+ background: "#dac3e8",
121
+ color: "#381350"
122
+ }
123
+ } },
124
+ red: { weight: {
125
+ strong: {
126
+ background: "#eea198",
127
+ color: "#000000"
128
+ },
129
+ light: {
130
+ background: "#f5c6c0",
131
+ color: "#65170e"
132
+ }
133
+ } }
134
+ }
135
+ };
136
+ //#endregion
137
+ exports.componentBadge = componentBadge;
package/dist/styleD/build/typescript/component/badge.d.cts ADDED
@@ -0,0 +1,162 @@
1
+ //#region src/styleD/build/typescript/component/badge.d.ts
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ declare const componentBadge: {
6
+ shared: {
7
+ display: string;
8
+ alignItems: string;
9
+ justifyContent: string;
10
+ };
11
+ size: {
12
+ md: {
13
+ padding: {
14
+ top: string;
15
+ right: string;
16
+ bottom: string;
17
+ left: string;
18
+ };
19
+ weight: {
20
+ strong: {
21
+ typography: {
22
+ font: string;
23
+ letterSpacing: string;
24
+ fontWidth: number;
25
+ };
26
+ };
27
+ light: {
28
+ typography: {
29
+ font: string;
30
+ letterSpacing: string;
31
+ fontWidth: number;
32
+ };
33
+ };
34
+ };
35
+ };
36
+ sm: {
37
+ padding: {
38
+ top: string;
39
+ right: string;
40
+ bottom: string;
41
+ left: string;
42
+ };
43
+ weight: {
44
+ strong: {
45
+ typography: {
46
+ font: string;
47
+ letterSpacing: string;
48
+ fontWidth: number;
49
+ };
50
+ };
51
+ light: {
52
+ typography: {
53
+ font: string;
54
+ letterSpacing: string;
55
+ fontWidth: number;
56
+ };
57
+ };
58
+ };
59
+ };
60
+ xs: {
61
+ padding: {
62
+ top: string;
63
+ right: string;
64
+ bottom: string;
65
+ left: string;
66
+ };
67
+ weight: {
68
+ strong: {
69
+ typography: {
70
+ font: string;
71
+ letterSpacing: string;
72
+ fontWidth: number;
73
+ };
74
+ };
75
+ light: {
76
+ typography: {
77
+ font: string;
78
+ letterSpacing: string;
79
+ fontWidth: number;
80
+ };
81
+ };
82
+ };
83
+ };
84
+ };
85
+ color: {
86
+ green: {
87
+ weight: {
88
+ strong: {
89
+ background: string;
90
+ color: string;
91
+ };
92
+ light: {
93
+ background: string;
94
+ color: string;
95
+ };
96
+ };
97
+ };
98
+ yellow: {
99
+ weight: {
100
+ strong: {
101
+ background: string;
102
+ color: string;
103
+ };
104
+ light: {
105
+ background: string;
106
+ color: string;
107
+ };
108
+ };
109
+ };
110
+ grey: {
111
+ weight: {
112
+ strong: {
113
+ background: string;
114
+ color: string;
115
+ };
116
+ light: {
117
+ background: string;
118
+ color: string;
119
+ };
120
+ };
121
+ };
122
+ orange: {
123
+ weight: {
124
+ strong: {
125
+ background: string;
126
+ color: string;
127
+ };
128
+ light: {
129
+ background: string;
130
+ color: string;
131
+ };
132
+ };
133
+ };
134
+ warmPurple: {
135
+ weight: {
136
+ strong: {
137
+ background: string;
138
+ color: string;
139
+ };
140
+ light: {
141
+ background: string;
142
+ color: string;
143
+ };
144
+ };
145
+ };
146
+ red: {
147
+ weight: {
148
+ strong: {
149
+ background: string;
150
+ color: string;
151
+ };
152
+ light: {
153
+ background: string;
154
+ color: string;
155
+ };
156
+ };
157
+ };
158
+ };
159
+ };
160
+ type ComponentBadge = typeof componentBadge;
161
+ //#endregion
162
+ export { ComponentBadge, componentBadge };
package/dist/styleD/build/typescript/component/badge.d.ts ADDED
@@ -0,0 +1,162 @@
1
+ //#region src/styleD/build/typescript/component/badge.d.ts
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ declare const componentBadge: {
6
+ shared: {
7
+ display: string;
8
+ alignItems: string;
9
+ justifyContent: string;
10
+ };
11
+ size: {
12
+ md: {
13
+ padding: {
14
+ top: string;
15
+ right: string;
16
+ bottom: string;
17
+ left: string;
18
+ };
19
+ weight: {
20
+ strong: {
21
+ typography: {
22
+ font: string;
23
+ letterSpacing: string;
24
+ fontWidth: number;
25
+ };
26
+ };
27
+ light: {
28
+ typography: {
29
+ font: string;
30
+ letterSpacing: string;
31
+ fontWidth: number;
32
+ };
33
+ };
34
+ };
35
+ };
36
+ sm: {
37
+ padding: {
38
+ top: string;
39
+ right: string;
40
+ bottom: string;
41
+ left: string;
42
+ };
43
+ weight: {
44
+ strong: {
45
+ typography: {
46
+ font: string;
47
+ letterSpacing: string;
48
+ fontWidth: number;
49
+ };
50
+ };
51
+ light: {
52
+ typography: {
53
+ font: string;
54
+ letterSpacing: string;
55
+ fontWidth: number;
56
+ };
57
+ };
58
+ };
59
+ };
60
+ xs: {
61
+ padding: {
62
+ top: string;
63
+ right: string;
64
+ bottom: string;
65
+ left: string;
66
+ };
67
+ weight: {
68
+ strong: {
69
+ typography: {
70
+ font: string;
71
+ letterSpacing: string;
72
+ fontWidth: number;
73
+ };
74
+ };
75
+ light: {
76
+ typography: {
77
+ font: string;
78
+ letterSpacing: string;
79
+ fontWidth: number;
80
+ };
81
+ };
82
+ };
83
+ };
84
+ };
85
+ color: {
86
+ green: {
87
+ weight: {
88
+ strong: {
89
+ background: string;
90
+ color: string;
91
+ };
92
+ light: {
93
+ background: string;
94
+ color: string;
95
+ };
96
+ };
97
+ };
98
+ yellow: {
99
+ weight: {
100
+ strong: {
101
+ background: string;
102
+ color: string;
103
+ };
104
+ light: {
105
+ background: string;
106
+ color: string;
107
+ };
108
+ };
109
+ };
110
+ grey: {
111
+ weight: {
112
+ strong: {
113
+ background: string;
114
+ color: string;
115
+ };
116
+ light: {
117
+ background: string;
118
+ color: string;
119
+ };
120
+ };
121
+ };
122
+ orange: {
123
+ weight: {
124
+ strong: {
125
+ background: string;
126
+ color: string;
127
+ };
128
+ light: {
129
+ background: string;
130
+ color: string;
131
+ };
132
+ };
133
+ };
134
+ warmPurple: {
135
+ weight: {
136
+ strong: {
137
+ background: string;
138
+ color: string;
139
+ };
140
+ light: {
141
+ background: string;
142
+ color: string;
143
+ };
144
+ };
145
+ };
146
+ red: {
147
+ weight: {
148
+ strong: {
149
+ background: string;
150
+ color: string;
151
+ };
152
+ light: {
153
+ background: string;
154
+ color: string;
155
+ };
156
+ };
157
+ };
158
+ };
159
+ };
160
+ type ComponentBadge = typeof componentBadge;
161
+ //#endregion
162
+ export { ComponentBadge, componentBadge };
package/dist/styleD/build/typescript/component/badge.js ADDED
@@ -0,0 +1,137 @@
1
+ //#region src/styleD/build/typescript/component/badge.ts
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ const componentBadge = {
6
+ shared: {
7
+ display: "inline-flex",
8
+ alignItems: "center",
9
+ justifyContent: "center"
10
+ },
11
+ size: {
12
+ md: {
13
+ padding: {
14
+ top: "4px",
15
+ right: "12px",
16
+ bottom: "4px",
17
+ left: "12px"
18
+ },
19
+ weight: {
20
+ strong: { typography: {
21
+ font: "normal 700 1rem/1.15 Open Sans",
22
+ letterSpacing: "-0.03125rem",
23
+ fontWidth: 95
24
+ } },
25
+ light: { typography: {
26
+ font: "normal 460 1rem/1.3 Open Sans",
27
+ letterSpacing: "0rem",
28
+ fontWidth: 95
29
+ } }
30
+ }
31
+ },
32
+ sm: {
33
+ padding: {
34
+ top: "4px",
35
+ right: "8px",
36
+ bottom: "4px",
37
+ left: "8px"
38
+ },
39
+ weight: {
40
+ strong: { typography: {
41
+ font: "normal 700 0.875rem/1.15 Open Sans",
42
+ letterSpacing: "-0.0125rem",
43
+ fontWidth: 95
44
+ } },
45
+ light: { typography: {
46
+ font: "normal 460 0.875rem/1.3 Open Sans",
47
+ letterSpacing: "0rem",
48
+ fontWidth: 95
49
+ } }
50
+ }
51
+ },
52
+ xs: {
53
+ padding: {
54
+ top: "1px",
55
+ right: "6px",
56
+ bottom: "3px",
57
+ left: "6px"
58
+ },
59
+ weight: {
60
+ strong: { typography: {
61
+ font: "normal 700 0.75rem/1.15 Open Sans",
62
+ letterSpacing: "0rem",
63
+ fontWidth: 95
64
+ } },
65
+ light: { typography: {
66
+ font: "normal 460 0.75rem/1.3 Open Sans",
67
+ letterSpacing: "0rem",
68
+ fontWidth: 95
69
+ } }
70
+ }
71
+ }
72
+ },
73
+ color: {
74
+ green: { weight: {
75
+ strong: {
76
+ background: "#aed2a6",
77
+ color: "#000000"
78
+ },
79
+ light: {
80
+ background: "#cde4c9",
81
+ color: "#24491d"
82
+ }
83
+ } },
84
+ yellow: { weight: {
85
+ strong: {
86
+ background: "#f1c21b",
87
+ color: "#000000"
88
+ },
89
+ light: {
90
+ background: "#ffedac",
91
+ color: "#5b4a0b"
92
+ }
93
+ } },
94
+ grey: { weight: {
95
+ strong: {
96
+ background: "#dcdcdc",
97
+ color: "#000000"
98
+ },
99
+ light: {
100
+ background: "#dcdcdc",
101
+ color: "#000000"
102
+ }
103
+ } },
104
+ orange: { weight: {
105
+ strong: {
106
+ background: "#fac7a1",
107
+ color: "#000000"
108
+ },
109
+ light: {
110
+ background: "#fcddc6",
111
+ color: "#693c16"
112
+ }
113
+ } },
114
+ warmPurple: { weight: {
115
+ strong: {
116
+ background: "#dac3e8",
117
+ color: "#000000"
118
+ },
119
+ light: {
120
+ background: "#dac3e8",
121
+ color: "#381350"
122
+ }
123
+ } },
124
+ red: { weight: {
125
+ strong: {
126
+ background: "#eea198",
127
+ color: "#000000"
128
+ },
129
+ light: {
130
+ background: "#f5c6c0",
131
+ color: "#65170e"
132
+ }
133
+ } }
134
+ }
135
+ };
136
+ //#endregion
137
+ export { componentBadge };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guardian/stand",
3
- "version": "0.0.65",
3
+ "version": "0.0.66",
4
4
  "repository": {
5
5
  "url": "https://github.com/guardian/stand"
6
6
  },
@@ -47,6 +47,16 @@
47
47
  "default": "./dist/AvatarButton.cjs"
48
48
  }
49
49
  },
50
+ "./Badge": {
51
+ "import": {
52
+ "types": "./dist/Badge.d.ts",
53
+ "default": "./dist/Badge.js"
54
+ },
55
+ "require": {
56
+ "types": "./dist/Badge.d.cts",
57
+ "default": "./dist/Badge.cjs"
58
+ }
59
+ },
50
60
  "./Button": {
51
61
  "import": {
52
62
  "types": "./dist/Button.d.ts",
@@ -390,6 +400,7 @@
390
400
  "./component/tagTable.css": "./dist/styleD/build/css/component/tagTable.css",
391
401
  "./component/userMenu.css": "./dist/styleD/build/css/component/userMenu.css",
392
402
  "./component/avatar.css": "./dist/styleD/build/css/component/avatar.css",
403
+ "./component/badge.css": "./dist/styleD/build/css/component/badge.css",
393
404
  "./component/button.css": "./dist/styleD/build/css/component/button.css",
394
405
  "./component/buttonGroup.css": "./dist/styleD/build/css/component/buttonGroup.css",
395
406
  "./component/typography.css": "./dist/styleD/build/css/component/typography.css",
@@ -429,6 +440,9 @@
429
440
  "AvatarLink": [
430
441
  "./dist/AvatarLink.d.ts"
431
442
  ],
443
+ "Badge": [
444
+ "./dist/Badge.d.ts"
445
+ ],
432
446
  "Button": [
433
447
  "./dist/Button.d.ts"
434
448
  ],