@guardian/stand 0.0.57 → 0.0.59

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 (25) hide show
  1. package/dist/components/RadioGroup/RadioGroup.cjs +5 -2
  2. package/dist/components/RadioGroup/RadioGroup.d.cts +1 -0
  3. package/dist/components/RadioGroup/RadioGroup.d.ts +1 -0
  4. package/dist/components/RadioGroup/RadioGroup.js +5 -2
  5. package/dist/components/RadioGroup/styles.cjs +6 -2
  6. package/dist/components/RadioGroup/styles.js +6 -2
  7. package/dist/components/RadioGroup/types.d.cts +5 -0
  8. package/dist/components/RadioGroup/types.d.ts +5 -0
  9. package/dist/styleD/build/css/component/radioGroup.css +2 -1
  10. package/dist/styleD/build/css/component/textArea.css +1 -1
  11. package/dist/styleD/build/css/component/textInput.css +1 -1
  12. package/dist/styleD/build/css/semantic/colors.css +2 -0
  13. package/dist/styleD/build/typescript/component/radioGroup.cjs +4 -1
  14. package/dist/styleD/build/typescript/component/radioGroup.d.cts +8 -1
  15. package/dist/styleD/build/typescript/component/radioGroup.d.ts +8 -1
  16. package/dist/styleD/build/typescript/component/radioGroup.js +4 -1
  17. package/dist/styleD/build/typescript/component/textArea.cjs +1 -1
  18. package/dist/styleD/build/typescript/component/textArea.js +1 -1
  19. package/dist/styleD/build/typescript/component/textInput.cjs +1 -1
  20. package/dist/styleD/build/typescript/component/textInput.js +1 -1
  21. package/dist/styleD/build/typescript/semantic/colors.cjs +2 -0
  22. package/dist/styleD/build/typescript/semantic/colors.d.cts +2 -0
  23. package/dist/styleD/build/typescript/semantic/colors.d.ts +2 -0
  24. package/dist/styleD/build/typescript/semantic/colors.js +2 -0
  25. package/package.json +1 -1
package/dist/components/RadioGroup/RadioGroup.cjs CHANGED
@@ -7,7 +7,7 @@ react = require_runtime.__toESM(react);
7
7
  let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
8
8
  let react_aria_components = require("react-aria-components");
9
9
  //#region src/components/RadioGroup/RadioGroup.tsx
10
- function RadioGroup({ size = "md", isInvalid = false, theme = {}, children, ...props }) {
10
+ function RadioGroup({ size = "md", orientation = "vertical", isInvalid = false, theme = {}, children, ...props }) {
11
11
  const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultRadioGroupTheme, theme);
12
12
  const radios = [];
13
13
  react.default.Children.forEach(children, (child) => {
@@ -24,7 +24,10 @@ function RadioGroup({ size = "md", isInvalid = false, theme = {}, children, ...p
24
24
  isInvalid,
25
25
  ...props,
26
26
  children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
27
- css: require_styles.radioGroupStyles(mergedTheme, { size }),
27
+ css: require_styles.radioGroupStyles(mergedTheme, {
28
+ size,
29
+ orientation
30
+ }),
28
31
  children: radios
29
32
  })
30
33
  });
package/dist/components/RadioGroup/RadioGroup.d.cts CHANGED
@@ -3,6 +3,7 @@ import { RadioGroupProps, RadioProps } from "./types.cjs";
3
3
  //#region src/components/RadioGroup/RadioGroup.d.ts
4
4
  declare function RadioGroup({
5
5
  size,
6
+ orientation,
6
7
  isInvalid,
7
8
  theme,
8
9
  children,
package/dist/components/RadioGroup/RadioGroup.d.ts CHANGED
@@ -3,6 +3,7 @@ import { RadioGroupProps, RadioProps } from "./types.js";
3
3
  //#region src/components/RadioGroup/RadioGroup.d.ts
4
4
  declare function RadioGroup({
5
5
  size,
6
+ orientation,
6
7
  isInvalid,
7
8
  theme,
8
9
  children,
package/dist/components/RadioGroup/RadioGroup.js CHANGED
@@ -5,7 +5,7 @@ import React from "react";
5
5
  import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
6
6
  import { Radio, RadioGroup, composeRenderProps } from "react-aria-components";
7
7
  //#region src/components/RadioGroup/RadioGroup.tsx
8
- function RadioGroup$1({ size = "md", isInvalid = false, theme = {}, children, ...props }) {
8
+ function RadioGroup$1({ size = "md", orientation = "vertical", isInvalid = false, theme = {}, children, ...props }) {
9
9
  const mergedTheme = mergeDeep(defaultRadioGroupTheme, theme);
10
10
  const radios = [];
11
11
  React.Children.forEach(children, (child) => {
@@ -22,7 +22,10 @@ function RadioGroup$1({ size = "md", isInvalid = false, theme = {}, children, ..
22
22
  isInvalid,
23
23
  ...props,
24
24
  children: /* @__PURE__ */ jsx("div", {
25
- css: radioGroupStyles(mergedTheme, { size }),
25
+ css: radioGroupStyles(mergedTheme, {
26
+ size,
27
+ orientation
28
+ }),
26
29
  children: radios
27
30
  })
28
31
  });
package/dist/components/RadioGroup/styles.cjs CHANGED
@@ -3,13 +3,17 @@ const require_radioGroup = require("../../styleD/build/typescript/component/radi
3
3
  let _emotion_react = require("@emotion/react");
4
4
  //#region src/components/RadioGroup/styles.ts
5
5
  const defaultRadioGroupTheme = require_radioGroup.componentRadioGroup;
6
- const radioGroupStyles = (theme, { size }) => {
6
+ const radioGroupStyles = (theme, { size, orientation }) => {
7
7
  return _emotion_react.css`
8
8
  display: ${theme.shared.display};
9
- flex-direction: ${theme.shared.flexDirection};
9
+ flex-direction: ${theme.shared.orientation.vertical.flexDirection};
10
10
  gap: ${theme[size].gap};
11
11
  margin-top: ${theme.shared.marginTop};
12
12
  margin-bottom: ${theme.shared.marginBottom};
13
+
14
+ ${orientation === "horizontal" && _emotion_react.css`
15
+ flex-direction: ${theme.shared.orientation.horizontal.flexDirection};
16
+ `}
13
17
  `;
14
18
  };
15
19
  const radioStyles = (theme, { size, isInvalid }) => {
package/dist/components/RadioGroup/styles.js CHANGED
@@ -3,13 +3,17 @@ import { componentRadioGroup } from "../../styleD/build/typescript/component/rad
3
3
  import { css } from "@emotion/react";
4
4
  //#region src/components/RadioGroup/styles.ts
5
5
  const defaultRadioGroupTheme = componentRadioGroup;
6
- const radioGroupStyles = (theme, { size }) => {
6
+ const radioGroupStyles = (theme, { size, orientation }) => {
7
7
  return css`
8
8
  display: ${theme.shared.display};
9
- flex-direction: ${theme.shared.flexDirection};
9
+ flex-direction: ${theme.shared.orientation.vertical.flexDirection};
10
10
  gap: ${theme[size].gap};
11
11
  margin-top: ${theme.shared.marginTop};
12
12
  margin-bottom: ${theme.shared.marginBottom};
13
+
14
+ ${orientation === "horizontal" && css`
15
+ flex-direction: ${theme.shared.orientation.horizontal.flexDirection};
16
+ `}
13
17
  `;
14
18
  };
15
19
  const radioStyles = (theme, { size, isInvalid }) => {
package/dist/components/RadioGroup/types.d.cts CHANGED
@@ -7,6 +7,11 @@ import { RadioGroupProps, RadioProps } from "react-aria-components";
7
7
  type RadioGroupProps$1 = FormInputContainerDefaultProps<RadioGroupProps, RadioGroupTheme>;
8
8
  interface RadioProps$1 extends DefaultProps<RadioGroupTheme, RadioProps['className']>, RadioProps {
9
9
  size?: keyof Omit<RadioGroupTheme, 'shared'>;
10
+ /**
11
+ * Orientation of the radio buttons. Can be either 'horizontal' or 'vertical'.
12
+ * @default 'vertical'
13
+ */
14
+ orientation?: 'horizontal' | 'vertical';
10
15
  /** Whether the input value is invalid. */
11
16
  isInvalid?: boolean;
12
17
  }
package/dist/components/RadioGroup/types.d.ts CHANGED
@@ -7,6 +7,11 @@ import { RadioGroupProps, RadioProps } from "react-aria-components";
7
7
  type RadioGroupProps$1 = FormInputContainerDefaultProps<RadioGroupProps, RadioGroupTheme>;
8
8
  interface RadioProps$1 extends DefaultProps<RadioGroupTheme, RadioProps['className']>, RadioProps {
9
9
  size?: keyof Omit<RadioGroupTheme, 'shared'>;
10
+ /**
11
+ * Orientation of the radio buttons. Can be either 'horizontal' or 'vertical'.
12
+ * @default 'vertical'
13
+ */
14
+ orientation?: 'horizontal' | 'vertical';
10
15
  /** Whether the input value is invalid. */
11
16
  isInvalid?: boolean;
12
17
  }
package/dist/styleD/build/css/component/radioGroup.css CHANGED
@@ -6,7 +6,8 @@
6
6
  --component-radio-group-shared-margin-top: 0.5rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
7
7
  --component-radio-group-shared-margin-bottom: 0.5rem; /** spacing between the input itself and the next element (error text) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
8
8
  --component-radio-group-shared-display: flex;
9
- --component-radio-group-shared-flex-direction: column;
9
+ --component-radio-group-shared-orientation-vertical-flex-direction: column;
10
+ --component-radio-group-shared-orientation-horizontal-flex-direction: row;
10
11
  --component-radio-group-shared-radio-color: #000000;
11
12
  --component-radio-group-shared-radio-disabled-color: #999999;
12
13
  --component-radio-group-shared-radio-display: flex;
package/dist/styleD/build/css/component/textArea.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --component-text-area-shared-padding-bottom: 0.5rem;
11
11
  --component-text-area-shared-padding-left: 0.75rem;
12
12
  --component-text-area-shared-height: 144px;
13
- --component-text-area-shared-margin-top: 0.5rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
13
+ --component-text-area-shared-margin-top: 0.25rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 8px, then margin-top should be 4px */
14
14
  --component-text-area-shared-border-radius: 0.25rem;
15
15
  --component-text-area-shared-border: 0.0625rem solid #545454;
16
16
  --component-text-area-shared-background-color: #ffffff;
package/dist/styleD/build/css/component/textInput.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --component-text-input-shared-padding-right: 0.75rem;
10
10
  --component-text-input-shared-padding-bottom: 0;
11
11
  --component-text-input-shared-padding-left: 0.75rem;
12
- --component-text-input-shared-margin-top: 0.5rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
12
+ --component-text-input-shared-margin-top: 0.25rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 8px, then margin-top should be 4px */
13
13
  --component-text-input-shared-border-radius: 0.25rem;
14
14
  --component-text-input-shared-border: 0.0625rem solid #545454;
15
15
  --component-text-input-shared-background-color: #ffffff;
package/dist/styleD/build/css/semantic/colors.css CHANGED
@@ -14,6 +14,7 @@
14
14
  --semantic-colors-text-success-inverse: #cde4c9;
15
15
  --semantic-colors-text-information: #00344e;
16
16
  --semantic-colors-text-disabled: #999999;
17
+ --semantic-colors-text-link: #00496c;
17
18
  --semantic-colors-text-green: #24491d;
18
19
  --semantic-colors-text-blue: #092f62;
19
20
  --semantic-colors-text-red: #65170e;
@@ -78,6 +79,7 @@
78
79
  --semantic-colors-fill-warning-weak: #fbeebf;
79
80
  --semantic-colors-fill-information-weak: #e8f0fb;
80
81
  --semantic-colors-fill-error-weak: #f5c6c0;
82
+ --semantic-colors-fill-error-weaker: #fbebe9;
81
83
  --semantic-colors-fill-error-strong: #b42a19;
82
84
  --semantic-colors-fill-success-weak: #cde4c9;
83
85
  --semantic-colors-fill-success-strong: #326528;
package/dist/styleD/build/typescript/component/radioGroup.cjs CHANGED
@@ -7,7 +7,10 @@ const componentRadioGroup = {
7
7
  marginTop: "0.5rem",
8
8
  marginBottom: "0.5rem",
9
9
  display: "flex",
10
- flexDirection: "column",
10
+ orientation: {
11
+ vertical: { flexDirection: "column" },
12
+ horizontal: { flexDirection: "row" }
13
+ },
11
14
  radio: {
12
15
  color: "#000000",
13
16
  disabled: { color: "#999999" },
package/dist/styleD/build/typescript/component/radioGroup.d.cts CHANGED
@@ -7,7 +7,14 @@ declare const componentRadioGroup: {
7
7
  marginTop: string;
8
8
  marginBottom: string;
9
9
  display: string;
10
- flexDirection: string;
10
+ orientation: {
11
+ vertical: {
12
+ flexDirection: string;
13
+ };
14
+ horizontal: {
15
+ flexDirection: string;
16
+ };
17
+ };
11
18
  radio: {
12
19
  color: string;
13
20
  disabled: {
package/dist/styleD/build/typescript/component/radioGroup.d.ts CHANGED
@@ -7,7 +7,14 @@ declare const componentRadioGroup: {
7
7
  marginTop: string;
8
8
  marginBottom: string;
9
9
  display: string;
10
- flexDirection: string;
10
+ orientation: {
11
+ vertical: {
12
+ flexDirection: string;
13
+ };
14
+ horizontal: {
15
+ flexDirection: string;
16
+ };
17
+ };
11
18
  radio: {
12
19
  color: string;
13
20
  disabled: {
package/dist/styleD/build/typescript/component/radioGroup.js CHANGED
@@ -7,7 +7,10 @@ const componentRadioGroup = {
7
7
  marginTop: "0.5rem",
8
8
  marginBottom: "0.5rem",
9
9
  display: "flex",
10
- flexDirection: "column",
10
+ orientation: {
11
+ vertical: { flexDirection: "column" },
12
+ horizontal: { flexDirection: "row" }
13
+ },
11
14
  radio: {
12
15
  color: "#000000",
13
16
  disabled: { color: "#999999" },
package/dist/styleD/build/typescript/component/textArea.cjs CHANGED
@@ -13,7 +13,7 @@ const componentTextArea = {
13
13
  left: "0.75rem"
14
14
  },
15
15
  height: "144px",
16
- marginTop: "0.5rem",
16
+ marginTop: "0.25rem",
17
17
  borderRadius: "0.25rem",
18
18
  border: "0.0625rem solid #545454",
19
19
  backgroundColor: "#ffffff",
package/dist/styleD/build/typescript/component/textArea.js CHANGED
@@ -13,7 +13,7 @@ const componentTextArea = {
13
13
  left: "0.75rem"
14
14
  },
15
15
  height: "144px",
16
- marginTop: "0.5rem",
16
+ marginTop: "0.25rem",
17
17
  borderRadius: "0.25rem",
18
18
  border: "0.0625rem solid #545454",
19
19
  backgroundColor: "#ffffff",
package/dist/styleD/build/typescript/component/textInput.cjs CHANGED
@@ -12,7 +12,7 @@ const componentTextInput = {
12
12
  bottom: "0",
13
13
  left: "0.75rem"
14
14
  },
15
- marginTop: "0.5rem",
15
+ marginTop: "0.25rem",
16
16
  borderRadius: "0.25rem",
17
17
  border: "0.0625rem solid #545454",
18
18
  backgroundColor: "#ffffff",
package/dist/styleD/build/typescript/component/textInput.js CHANGED
@@ -12,7 +12,7 @@ const componentTextInput = {
12
12
  bottom: "0",
13
13
  left: "0.75rem"
14
14
  },
15
- marginTop: "0.5rem",
15
+ marginTop: "0.25rem",
16
16
  borderRadius: "0.25rem",
17
17
  border: "0.0625rem solid #545454",
18
18
  backgroundColor: "#ffffff",
package/dist/styleD/build/typescript/semantic/colors.cjs CHANGED
@@ -15,6 +15,7 @@ const semanticColors = {
15
15
  successInverse: "#cde4c9",
16
16
  information: "#00344e",
17
17
  disabled: "#999999",
18
+ link: "#00496c",
18
19
  green: "#24491d",
19
20
  blue: "#092f62",
20
21
  red: "#65170e",
@@ -85,6 +86,7 @@ const semanticColors = {
85
86
  warningWeak: "#fbeebf",
86
87
  informationWeak: "#e8f0fb",
87
88
  errorWeak: "#f5c6c0",
89
+ errorWeaker: "#fbebe9",
88
90
  errorStrong: "#b42a19",
89
91
  successWeak: "#cde4c9",
90
92
  successStrong: "#326528",
package/dist/styleD/build/typescript/semantic/colors.d.cts CHANGED
@@ -15,6 +15,7 @@ declare const semanticColors: {
15
15
  successInverse: string;
16
16
  information: string;
17
17
  disabled: string;
18
+ link: string;
18
19
  green: string;
19
20
  blue: string;
20
21
  red: string;
@@ -85,6 +86,7 @@ declare const semanticColors: {
85
86
  warningWeak: string;
86
87
  informationWeak: string;
87
88
  errorWeak: string;
89
+ errorWeaker: string;
88
90
  errorStrong: string;
89
91
  successWeak: string;
90
92
  successStrong: string;
package/dist/styleD/build/typescript/semantic/colors.d.ts CHANGED
@@ -15,6 +15,7 @@ declare const semanticColors: {
15
15
  successInverse: string;
16
16
  information: string;
17
17
  disabled: string;
18
+ link: string;
18
19
  green: string;
19
20
  blue: string;
20
21
  red: string;
@@ -85,6 +86,7 @@ declare const semanticColors: {
85
86
  warningWeak: string;
86
87
  informationWeak: string;
87
88
  errorWeak: string;
89
+ errorWeaker: string;
88
90
  errorStrong: string;
89
91
  successWeak: string;
90
92
  successStrong: string;
package/dist/styleD/build/typescript/semantic/colors.js CHANGED
@@ -15,6 +15,7 @@ const semanticColors = {
15
15
  successInverse: "#cde4c9",
16
16
  information: "#00344e",
17
17
  disabled: "#999999",
18
+ link: "#00496c",
18
19
  green: "#24491d",
19
20
  blue: "#092f62",
20
21
  red: "#65170e",
@@ -85,6 +86,7 @@ const semanticColors = {
85
86
  warningWeak: "#fbeebf",
86
87
  informationWeak: "#e8f0fb",
87
88
  errorWeak: "#f5c6c0",
89
+ errorWeaker: "#fbebe9",
88
90
  errorStrong: "#b42a19",
89
91
  successWeak: "#cde4c9",
90
92
  successStrong: "#326528",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guardian/stand",
3
- "version": "0.0.57",
3
+ "version": "0.0.59",
4
4
  "repository": {
5
5
  "url": "https://github.com/guardian/stand"
6
6
  },