npm - @guardian/stand - Versions diffs - 0.0.37 → 0.0.39 - Mend

@guardian/stand 0.0.37 → 0.0.39

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 (489) hide show

package/dist/styleD/build/typescript/component/favicon.cjs CHANGED Viewed

@@ -7,9 +7,9 @@ const componentFavicon = {
   },
   size: "2rem",
   display: "inline-flex",
-  "align-items": "center",
-  "justify-content": "center",
-  "user-select": "none",
+  alignItems: "center",
+  justifyContent: "center",
+  userSelect: "none",
   typography: {
     font: "normal 700 1.25rem/1.15 GH Guardian Headline",
     letterSpacing: "0rem",

package/dist/styleD/build/typescript/component/favicon.js CHANGED Viewed

@@ -5,9 +5,9 @@ const componentFavicon = {
   },
   size: "2rem",
   display: "inline-flex",
-  "align-items": "center",
-  "justify-content": "center",
-  "user-select": "none",
+  alignItems: "center",
+  justifyContent: "center",
+  userSelect: "none",
   typography: {
     font: "normal 700 1.25rem/1.15 GH Guardian Headline",
     letterSpacing: "0rem",

package/dist/styleD/build/typescript/component/form.cjs CHANGED Viewed

@@ -5,7 +5,7 @@ const componentForm = {
     shared: {
       container: {
         display: "flex",
-        "flex-direction": "column",
+        flexDirection: "column",
         gap: "0.25rem",
         width: "100%"
       },

package/dist/styleD/build/typescript/component/form.js CHANGED Viewed

@@ -3,7 +3,7 @@ const componentForm = {
     shared: {
       container: {
         display: "flex",
-        "flex-direction": "column",
+        flexDirection: "column",
         gap: "0.25rem",
         width: "100%"
       },

package/dist/styleD/build/typescript/component/grid.cjs CHANGED Viewed

@@ -4,12 +4,25 @@ const componentGrid = {
   shared: {
     display: "flex",
     width: "100%",
-    columns: 12,
-    gap: "8px",
     direction: "row",
     wrap: "wrap",
     justifyContent: "flex-start",
     alignItems: "stretch"
+  },
+  sm: {
+    columns: 12,
+    gap: "16px",
+    padding: "16px"
+  },
+  md: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
+  },
+  lg: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
   }
 };

package/dist/styleD/build/typescript/component/grid.js CHANGED Viewed

@@ -2,12 +2,25 @@ const componentGrid = {
   shared: {
     display: "flex",
     width: "100%",
-    columns: 12,
-    gap: "8px",
     direction: "row",
     wrap: "wrap",
     justifyContent: "flex-start",
     alignItems: "stretch"
+  },
+  sm: {
+    columns: 12,
+    gap: "16px",
+    padding: "16px"
+  },
+  md: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
+  },
+  lg: {
+    columns: 12,
+    gap: "16px",
+    padding: "24px"
   }
 };

package/dist/styleD/build/typescript/component/icon.cjs CHANGED Viewed

@@ -3,7 +3,7 @@
 const componentIcon = {
   shared: {
     display: "inline-flex",
-    "user-select": "none"
+    userSelect: "none"
   },
   sm: {
     size: "1.125rem"

package/dist/styleD/build/typescript/component/icon.js CHANGED Viewed

@@ -1,7 +1,7 @@
 const componentIcon = {
   shared: {
     display: "inline-flex",
-    "user-select": "none"
+    userSelect: "none"
   },
   sm: {
     size: "1.125rem"

package/dist/styleD/build/typescript/component/inlineMessage.cjs CHANGED Viewed

@@ -4,10 +4,10 @@ const componentInlineMessage = {
   shared: {
     display: "inline-flex",
     gap: "0.25rem",
-    "align-items": "center",
+    alignItems: "center",
     icon: {
       size: "1.25rem",
-      "align-self": "flex-start"
+      alignSelf: "flex-start"
     },
     typography: {
       font: "normal 460 0.875rem/1.3 Open Sans",

package/dist/styleD/build/typescript/component/inlineMessage.js CHANGED Viewed

@@ -2,10 +2,10 @@ const componentInlineMessage = {
   shared: {
     display: "inline-flex",
     gap: "0.25rem",
-    "align-items": "center",
+    alignItems: "center",
     icon: {
       size: "1.25rem",
-      "align-self": "flex-start"
+      alignSelf: "flex-start"
     },
     typography: {
       font: "normal 460 0.875rem/1.3 Open Sans",

package/dist/styleD/build/typescript/component/intendedAudienceSignifier.cjs CHANGED Viewed

@@ -15,8 +15,8 @@ const componentIntendedAudienceSignifier = {
   width: "fit-content",
   gap: "4px",
   svg: {
-    height: "unset",
-    width: "unset"
+    height: "12px",
+    width: "16px"
   },
   chevron: {
     fill: "#545454",

package/dist/styleD/build/typescript/component/intendedAudienceSignifier.js CHANGED Viewed

@@ -13,8 +13,8 @@ const componentIntendedAudienceSignifier = {
   width: "fit-content",
   gap: "4px",
   svg: {
-    height: "unset",
-    width: "unset"
+    height: "12px",
+    width: "16px"
   },
   chevron: {
     fill: "#545454",

package/dist/styleD/build/typescript/component/layout.cjs CHANGED Viewed

@@ -5,10 +5,7 @@ const componentLayout = {
     shared: {
       display: "grid",
       minHeight: "100svh",
-      width: "100%",
-      "max-width": "1584px",
-      "margin-left": "auto",
-      "margin-right": "auto"
+      width: "100%"
     },
     sm: {
       gridTemplateAreas: "'alertbanner'\n'topbar'\n'sidebar'\n'main'",
@@ -40,8 +37,13 @@ const componentLayout = {
       width: "200px"
     },
     lg: {
-      width: "320px"
+      width: "280px"
     }
+  },
+  main: {
+    maxWidth: "1584px",
+    marginLeft: "auto",
+    marginRight: "auto"
   }
 };

package/dist/styleD/build/typescript/component/layout.js CHANGED Viewed

@@ -3,10 +3,7 @@ const componentLayout = {
     shared: {
       display: "grid",
       minHeight: "100svh",
-      width: "100%",
-      "max-width": "1584px",
-      "margin-left": "auto",
-      "margin-right": "auto"
+      width: "100%"
     },
     sm: {
       gridTemplateAreas: "'alertbanner'\n'topbar'\n'sidebar'\n'main'",
@@ -38,8 +35,13 @@ const componentLayout = {
       width: "200px"
     },
     lg: {
-      width: "320px"
+      width: "280px"
     }
+  },
+  main: {
+    maxWidth: "1584px",
+    marginLeft: "auto",
+    marginRight: "auto"
   }
 };

package/dist/styleD/build/typescript/component/menu.cjs CHANGED Viewed

@@ -4,8 +4,8 @@ const componentMenu = {
   menu: {
     shared: {
       display: "flex",
-      "flex-direction": "column",
-      "background-color": "#ffffff",
+      flexDirection: "column",
+      backgroundColor: "#ffffff",
       border: "0.0625rem solid #cccccc"
     }
   },
@@ -13,14 +13,14 @@ const componentMenu = {
     header: {
       shared: {
         display: "flex",
-        "align-items": "center",
+        alignItems: "center",
         padding: {
           top: "0",
           right: "0.5rem",
           bottom: "0",
           left: "0.5rem"
         },
-        "background-color": "#ededed",
+        backgroundColor: "#ededed",
         color: "#000000"
       },
       sm: {
@@ -44,26 +44,26 @@ const componentMenu = {
   menuItem: {
     shared: {
       display: "grid",
-      "grid-template-areas": "'icon label aside'",
-      "grid-template-areas-with-description": "'icon label aside' '. description .'",
-      "grid-template-columns": "auto 6fr 1fr",
+      gridTemplateAreas: "'icon label aside'",
+      gridTemplateAreasWithDescription: "'icon label aside' '. description .'",
+      gridTemplateColumns: "auto 6fr 1fr",
       gap: "0.25rem",
-      "align-items": "center",
+      alignItems: "center",
       padding: {
         top: "0.75rem",
         right: "1rem",
         bottom: "0.75rem",
         left: "1rem"
       },
-      "border-bottom": "0.0625rem solid #cccccc",
-      "background-color": "#ffffff",
+      borderBottom: "0.0625rem solid #cccccc",
+      backgroundColor: "#ffffff",
       icon: {
-        "grid-area": "icon",
-        "align-self": "start",
+        gridArea: "icon",
+        alignSelf: "start",
         color: "#545454"
       },
       label: {
-        "grid-area": "label",
+        gridArea: "label",
         color: "#000000",
         typography: {
           font: "normal 460 1rem/1.3 Open Sans",
@@ -72,7 +72,7 @@ const componentMenu = {
         }
       },
       description: {
-        "grid-area": "description",
+        gridArea: "description",
         color: "#545454",
         typography: {
           font: "normal 460 0.875rem/1.3 Open Sans",
@@ -81,9 +81,9 @@ const componentMenu = {
         }
       },
       aside: {
-        "grid-area": "aside",
-        "justify-self": "end",
-        "align-self": "start",
+        gridArea: "aside",
+        justifySelf: "end",
+        alignSelf: "start",
         color: "#000000",
         typography: {
           font: "normal 460 1rem/1.3 Open Sans",
@@ -91,37 +91,37 @@ const componentMenu = {
           fontWidth: 95
         }
       },
-      ":last-child": {
-        "border-bottom": "none"
+      lastChild: {
+        borderBottom: "none"
       },
-      ":hover": {
-        "background-color": "#f6f6f6",
+      hover: {
+        backgroundColor: "#f6f6f6",
         outline: "none"
       },
-      ":focus-visible": {
+      focusVisible: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "-0.125rem"
+        outlineOffset: "-0.125rem"
       },
-      ":pressed": {
-        "background-color": "#ededed"
+      pressed: {
+        backgroundColor: "#ededed"
       }
     },
     sm: {
       icon: {
         size: "1.125rem",
-        "line-height": 1.3
+        lineHeight: 1.3
       }
     },
     md: {
       icon: {
         size: "1.25rem",
-        "line-height": 1.3
+        lineHeight: 1.3
       }
     }
   },
   menuSeparator: {
     shared: {
-      "background-color": "#ededed",
+      backgroundColor: "#ededed",
       height: "0.5rem",
       width: "100%"
     }
@@ -132,11 +132,11 @@ const componentMenu = {
       shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
     },
     sm: {
-      "max-width": "200px",
+      maxWidth: "200px",
       width: "100%"
     },
     md: {
-      "max-width": "320px",
+      maxWidth: "320px",
       width: "100%"
     }
   }

package/dist/styleD/build/typescript/component/menu.js CHANGED Viewed

@@ -2,8 +2,8 @@ const componentMenu = {
   menu: {
     shared: {
       display: "flex",
-      "flex-direction": "column",
-      "background-color": "#ffffff",
+      flexDirection: "column",
+      backgroundColor: "#ffffff",
       border: "0.0625rem solid #cccccc"
     }
   },
@@ -11,14 +11,14 @@ const componentMenu = {
     header: {
       shared: {
         display: "flex",
-        "align-items": "center",
+        alignItems: "center",
         padding: {
           top: "0",
           right: "0.5rem",
           bottom: "0",
           left: "0.5rem"
         },
-        "background-color": "#ededed",
+        backgroundColor: "#ededed",
         color: "#000000"
       },
       sm: {
@@ -42,26 +42,26 @@ const componentMenu = {
   menuItem: {
     shared: {
       display: "grid",
-      "grid-template-areas": "'icon label aside'",
-      "grid-template-areas-with-description": "'icon label aside' '. description .'",
-      "grid-template-columns": "auto 6fr 1fr",
+      gridTemplateAreas: "'icon label aside'",
+      gridTemplateAreasWithDescription: "'icon label aside' '. description .'",
+      gridTemplateColumns: "auto 6fr 1fr",
       gap: "0.25rem",
-      "align-items": "center",
+      alignItems: "center",
       padding: {
         top: "0.75rem",
         right: "1rem",
         bottom: "0.75rem",
         left: "1rem"
       },
-      "border-bottom": "0.0625rem solid #cccccc",
-      "background-color": "#ffffff",
+      borderBottom: "0.0625rem solid #cccccc",
+      backgroundColor: "#ffffff",
       icon: {
-        "grid-area": "icon",
-        "align-self": "start",
+        gridArea: "icon",
+        alignSelf: "start",
         color: "#545454"
       },
       label: {
-        "grid-area": "label",
+        gridArea: "label",
         color: "#000000",
         typography: {
           font: "normal 460 1rem/1.3 Open Sans",
@@ -70,7 +70,7 @@ const componentMenu = {
         }
       },
       description: {
-        "grid-area": "description",
+        gridArea: "description",
         color: "#545454",
         typography: {
           font: "normal 460 0.875rem/1.3 Open Sans",
@@ -79,9 +79,9 @@ const componentMenu = {
         }
       },
       aside: {
-        "grid-area": "aside",
-        "justify-self": "end",
-        "align-self": "start",
+        gridArea: "aside",
+        justifySelf: "end",
+        alignSelf: "start",
         color: "#000000",
         typography: {
           font: "normal 460 1rem/1.3 Open Sans",
@@ -89,37 +89,37 @@ const componentMenu = {
           fontWidth: 95
         }
       },
-      ":last-child": {
-        "border-bottom": "none"
+      lastChild: {
+        borderBottom: "none"
       },
-      ":hover": {
-        "background-color": "#f6f6f6",
+      hover: {
+        backgroundColor: "#f6f6f6",
         outline: "none"
       },
-      ":focus-visible": {
+      focusVisible: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "-0.125rem"
+        outlineOffset: "-0.125rem"
       },
-      ":pressed": {
-        "background-color": "#ededed"
+      pressed: {
+        backgroundColor: "#ededed"
       }
     },
     sm: {
       icon: {
         size: "1.125rem",
-        "line-height": 1.3
+        lineHeight: 1.3
       }
     },
     md: {
       icon: {
         size: "1.25rem",
-        "line-height": 1.3
+        lineHeight: 1.3
       }
     }
   },
   menuSeparator: {
     shared: {
-      "background-color": "#ededed",
+      backgroundColor: "#ededed",
       height: "0.5rem",
       width: "100%"
     }
@@ -130,11 +130,11 @@ const componentMenu = {
       shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
     },
     sm: {
-      "max-width": "200px",
+      maxWidth: "200px",
       width: "100%"
     },
     md: {
-      "max-width": "320px",
+      maxWidth: "320px",
       width: "100%"
     }
   }

package/dist/styleD/build/typescript/component/select.cjs CHANGED Viewed

@@ -29,7 +29,7 @@ const componentSelect = {
       },
       focused: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "0.125rem"
+        outlineOffset: "0.125rem"
       },
       disabled: {
         backgroundColor: "#ffffff",
@@ -48,7 +48,7 @@ const componentSelect = {
       paddingBottom: "0.75rem",
       focused: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "0",
+        outlineOffset: "0",
         backgroundColor: "inherit"
       }
     },

package/dist/styleD/build/typescript/component/select.js CHANGED Viewed

@@ -27,7 +27,7 @@ const componentSelect = {
       },
       focused: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "0.125rem"
+        outlineOffset: "0.125rem"
       },
       disabled: {
         backgroundColor: "#ffffff",
@@ -46,7 +46,7 @@ const componentSelect = {
       paddingBottom: "0.75rem",
       focused: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "0",
+        outlineOffset: "0",
         backgroundColor: "inherit"
       }
     },

package/dist/styleD/build/typescript/component/textArea.cjs CHANGED Viewed

@@ -11,10 +11,10 @@ const componentTextArea = {
       left: "0.75rem"
     },
     height: "144px",
-    "margin-top": "0.5rem",
-    "border-radius": "0.25rem",
+    marginTop: "0.5rem",
+    borderRadius: "0.25rem",
     border: "0.0625rem solid #545454",
-    "background-color": "#ffffff",
+    backgroundColor: "#ffffff",
     placeholderColor: "#545454",
     disabled: {
       backgroundColor: "#ffffff",

package/dist/styleD/build/typescript/component/textArea.js CHANGED Viewed

@@ -9,10 +9,10 @@ const componentTextArea = {
       left: "0.75rem"
     },
     height: "144px",
-    "margin-top": "0.5rem",
-    "border-radius": "0.25rem",
+    marginTop: "0.5rem",
+    borderRadius: "0.25rem",
     border: "0.0625rem solid #545454",
-    "background-color": "#ffffff",
+    backgroundColor: "#ffffff",
     placeholderColor: "#545454",
     disabled: {
       backgroundColor: "#ffffff",

package/dist/styleD/build/typescript/component/textInput.cjs CHANGED Viewed

@@ -10,10 +10,10 @@ const componentTextInput = {
       bottom: "0",
       left: "0.75rem"
     },
-    "margin-top": "0.5rem",
-    "border-radius": "0.25rem",
+    marginTop: "0.5rem",
+    borderRadius: "0.25rem",
     border: "0.0625rem solid #545454",
-    "background-color": "#ffffff",
+    backgroundColor: "#ffffff",
     placeholderColor: "#545454",
     disabled: {
       backgroundColor: "#ffffff",

package/dist/styleD/build/typescript/component/textInput.js CHANGED Viewed

@@ -8,10 +8,10 @@ const componentTextInput = {
       bottom: "0",
       left: "0.75rem"
     },
-    "margin-top": "0.5rem",
-    "border-radius": "0.25rem",
+    marginTop: "0.5rem",
+    borderRadius: "0.25rem",
     border: "0.0625rem solid #545454",
-    "background-color": "#ffffff",
+    backgroundColor: "#ffffff",
     placeholderColor: "#545454",
     disabled: {
       backgroundColor: "#ffffff",