@guardian/stand 0.0.9 → 0.0.11

package/dist/styleD/build/typescript/component/button.js

@@ -0,0 +1,521 @@
+const componentButton = {
+  shared: {
+    display: "inline-flex",
+    "-webkit-appearance": "none",
+    "text-align": "inherit",
+    "box-shadow": "none",
+    cursor: "pointer",
+    "justify-content": "center",
+    "align-items": "center",
+    "text-decoration": "none",
+    ":disabled": {
+      cursor: "not-allowed"
+    },
+    ":focus-visible": {
+      outline: "0.125rem solid #0072a9",
+      "outline-offset": "0.125rem"
+    }
+  },
+  "emphasised-primary": {
+    shared: {
+      color: "#ffffff",
+      backgroundColor: "#0d4289",
+      borderRadius: "0.25rem",
+      border: "0.0625rem solid #0d4289",
+      ":hover": {
+        backgroundColor: "#092f62",
+        border: "0.0625rem solid #092f62"
+      },
+      ":active": {
+        backgroundColor: "#061d3c",
+        border: "0.0625rem solid #061d3c"
+      },
+      ":disabled": {
+        color: "#999999",
+        backgroundColor: "#dcdcdc",
+        border: "0.0625rem solid #dcdcdc"
+      }
+    },
+    xs: {
+      height: "1.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.5rem",
+        bottom: "0.25rem",
+        left: "0.5rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.25rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.75rem/1 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.125rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "1.5rem"
+      }
+    },
+    sm: {
+      height: "2rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.625rem",
+        bottom: "0.25rem",
+        left: "0.625rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.5rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.125rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "2rem"
+      }
+    },
+    md: {
+      height: "2.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.75rem",
+        bottom: "0.25rem",
+        left: "0.75rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.5rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.25rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "2.5rem"
+      }
+    },
+    lg: {
+      height: "3rem",
+      padding: {
+        top: "0.25rem",
+        right: "1rem",
+        bottom: "0.25rem",
+        left: "1rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.75rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 1rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.5rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "3rem"
+      }
+    }
+  },
+  "emphasised-secondary": {
+    shared: {
+      color: "#000000",
+      backgroundColor: "none",
+      borderRadius: "0.25rem",
+      border: "0.0625rem solid #0d4289",
+      ":hover": {
+        backgroundColor: "#e8f0fb",
+        border: "0.0625rem solid #0d4289"
+      },
+      ":active": {
+        backgroundColor: "#c5d9f4",
+        border: "0.0625rem solid #0d4289"
+      },
+      ":disabled": {
+        color: "#999999",
+        backgroundColor: "none",
+        border: "0.0625rem solid #dcdcdc"
+      }
+    },
+    xs: {
+      height: "1.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.5rem",
+        bottom: "0.25rem",
+        left: "0.5rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.25rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.75rem/1 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.125rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "1.5rem"
+      }
+    },
+    sm: {
+      height: "2rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.625rem",
+        bottom: "0.25rem",
+        left: "0.625rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.5rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.125rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "2rem"
+      }
+    },
+    md: {
+      height: "2.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.75rem",
+        bottom: "0.25rem",
+        left: "0.75rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.5rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.25rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "2.5rem"
+      }
+    },
+    lg: {
+      height: "3rem",
+      padding: {
+        top: "0.25rem",
+        right: "1rem",
+        bottom: "0.25rem",
+        left: "1rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.75rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 1rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.5rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "3rem"
+      }
+    }
+  },
+  "neutral-primary": {
+    shared: {
+      color: "#ffffff",
+      backgroundColor: "#545454",
+      borderRadius: "0.25rem",
+      border: "0.0625rem solid #545454",
+      ":hover": {
+        backgroundColor: "#333333",
+        border: "0.0625rem solid #333333"
+      },
+      ":active": {
+        backgroundColor: "#121212",
+        border: "0.0625rem solid #121212"
+      },
+      ":disabled": {
+        color: "#999999",
+        backgroundColor: "#dcdcdc",
+        border: "0.0625rem solid #dcdcdc"
+      }
+    },
+    xs: {
+      height: "1.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.5rem",
+        bottom: "0.25rem",
+        left: "0.5rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.25rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.75rem/1 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.125rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "1.5rem"
+      }
+    },
+    sm: {
+      height: "2rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.625rem",
+        bottom: "0.25rem",
+        left: "0.625rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.5rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.125rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "2rem"
+      }
+    },
+    md: {
+      height: "2.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.75rem",
+        bottom: "0.25rem",
+        left: "0.75rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.5rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.25rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "2.5rem"
+      }
+    },
+    lg: {
+      height: "3rem",
+      padding: {
+        top: "0.25rem",
+        right: "1rem",
+        bottom: "0.25rem",
+        left: "1rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.75rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 1rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.5rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "3rem"
+      }
+    }
+  },
+  "neutral-secondary": {
+    shared: {
+      color: "#000000",
+      backgroundColor: "none",
+      borderRadius: "0.25rem",
+      border: "0.0625rem solid #545454",
+      ":hover": {
+        backgroundColor: "#ededed",
+        border: "0.0625rem solid #545454"
+      },
+      ":active": {
+        backgroundColor: "#dcdcdc",
+        border: "0.0625rem solid #545454"
+      },
+      ":disabled": {
+        color: "#999999",
+        backgroundColor: "none",
+        border: "0.0625rem solid #dcdcdc"
+      }
+    },
+    xs: {
+      height: "1.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.5rem",
+        bottom: "0.25rem",
+        left: "0.5rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.25rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.75rem/1 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.125rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "1.5rem"
+      }
+    },
+    sm: {
+      height: "2rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.625rem",
+        bottom: "0.25rem",
+        left: "0.625rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.5rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.125rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "2rem"
+      }
+    },
+    md: {
+      height: "2.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.75rem",
+        bottom: "0.25rem",
+        left: "0.75rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.5rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.25rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "2.5rem"
+      }
+    },
+    lg: {
+      height: "3rem",
+      padding: {
+        top: "0.25rem",
+        right: "1rem",
+        bottom: "0.25rem",
+        left: "1rem",
+        withIcon: {
+          iconLeft: {
+            left: "0.75rem"
+          }
+        }
+      },
+      typography: {
+        font: "normal 700 1rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      },
+      icon: {
+        size: "1.5rem",
+        gap: "0.25rem"
+      },
+      iconButton: {
+        width: "3rem"
+      }
+    }
+  }
+};
+
+export { componentButton };

package/dist/styleD/build/typescript/component/byline.cjs

@@ -16,7 +16,7 @@ const componentByline = {
     borderRadius: "8px",
     paddingX: "4px",
     paddingY: "2px",
-    selectedBorderColor: "#bdd4f4",
+    selectedBorderColor: "#c5d9f4",
     taggedBackgroundColor: "#dcdcdc",
     untaggedColor: "#000000"
   },

package/dist/styleD/build/typescript/component/byline.js

@@ -14,7 +14,7 @@ const componentByline = {
     borderRadius: "8px",
     paddingX: "4px",
     paddingY: "2px",
-    selectedBorderColor: "#bdd4f4",
+    selectedBorderColor: "#c5d9f4",
     taggedBackgroundColor: "#dcdcdc",
     untaggedColor: "#000000"
   },

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const componentIcon = {
+  shared: {
+    display: "inline-flex",
+    "user-select": "none"
+  },
+  sm: {
+    size: "1.125rem"
+  },
+  md: {
+    size: "1.25rem"
+  },
+  lg: {
+    size: "1.5rem"
+  }
+};
+
+exports.componentIcon = componentIcon;

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

@@ -0,0 +1,17 @@
+const componentIcon = {
+  shared: {
+    display: "inline-flex",
+    "user-select": "none"
+  },
+  sm: {
+    size: "1.125rem"
+  },
+  md: {
+    size: "1.25rem"
+  },
+  lg: {
+    size: "1.5rem"
+  }
+};
+
+export { componentIcon };

package/dist/styleD/build/typescript/component/typography.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+const componentTypography = {
+  color: "#000000"
+};
+
+exports.componentTypography = componentTypography;

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

@@ -0,0 +1,5 @@
+const componentTypography = {
+  color: "#000000"
+};
+
+export { componentTypography };

package/dist/styleD/build/typescript/component/userMenu.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+const componentUserMenu = {
+  container: {
+    backgroundColor: "#dcdcdc",
+    width: "300px",
+    paddingY: "0.25rem",
+    paddingX: "0.25rem"
+  },
+  heading: {
+    fontWeight: 700,
+    fontSize: "1.125rem",
+    paddingTop: "0px",
+    paddingRight: "0px",
+    paddingBottom: "0px",
+    paddingLeft: "0px",
+    textAlign: "left"
+  },
+  label: {
+    fontWeight: 700,
+    fontSize: "0.875rem",
+    paddingTop: "15px",
+    paddingRight: "0px",
+    paddingBottom: "0.375rem",
+    paddingLeft: "0px",
+    textAlign: "left"
+  },
+  toggleButton: {
+    baseBackgroundColor: "#ededed",
+    disabledBackgroundColor: "#dcdcdc",
+    baseBorderColor: "#dcdcdc",
+    selectedBorderColor: "#0d4289",
+    gap: "0.25rem"
+  }
+};
+
+exports.componentUserMenu = componentUserMenu;

package/dist/styleD/build/typescript/component/userMenu.js

@@ -0,0 +1,35 @@
+const componentUserMenu = {
+  container: {
+    backgroundColor: "#dcdcdc",
+    width: "300px",
+    paddingY: "0.25rem",
+    paddingX: "0.25rem"
+  },
+  heading: {
+    fontWeight: 700,
+    fontSize: "1.125rem",
+    paddingTop: "0px",
+    paddingRight: "0px",
+    paddingBottom: "0px",
+    paddingLeft: "0px",
+    textAlign: "left"
+  },
+  label: {
+    fontWeight: 700,
+    fontSize: "0.875rem",
+    paddingTop: "15px",
+    paddingRight: "0px",
+    paddingBottom: "0.375rem",
+    paddingLeft: "0px",
+    textAlign: "left"
+  },
+  toggleButton: {
+    baseBackgroundColor: "#ededed",
+    disabledBackgroundColor: "#dcdcdc",
+    baseBorderColor: "#dcdcdc",
+    selectedBorderColor: "#0d4289",
+    gap: "0.25rem"
+  }
+};
+
+export { componentUserMenu };