@carbonplan/components 10.1.1 → 10.4.0

package/dst/index.modern.js

@@ -76,6 +76,11 @@ const event = ({
   label,
   value
 }) => {
+  if (typeof window.gtag !== 'function') {
+    console.warn(`Missing window.gtag, skipping analytics action: '${action}'.`);
+    return;
+  }
+
   window.gtag('event', action, {
     event_category: category,
     event_label: label,
@@ -830,7 +835,6 @@ const Settings = (_ref) => {
       fill: 'none',
       strokeWidth: '2px',
       stroke: 'text',
-      fill: 'background',
       '.paren': {
         opacity: '0'
       },
@@ -854,22 +858,22 @@ const Settings = (_ref) => {
     x1: "24",
     y1: "2.1",
     x2: "24",
+    y2: "6.1"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "24",
+    y1: "24.1",
+    x2: "24",
     y2: "33.9"
   }), /*#__PURE__*/React.createElement("line", {
     x1: "44",
     y1: "2.1",
     x2: "44",
+    y2: "12.1"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "44",
+    y1: "30.1",
+    x2: "44",
     y2: "33.9"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "24",
-    cy: "15.1",
-    r: "9",
-    stroke: "none"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "44",
-    cy: "21.1",
-    r: "9",
-    stroke: "none"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: "24",
     cy: "15.1",
@@ -1382,6 +1386,77 @@ const Footer = () => {
   }))));
 };
 
+const GitSha = () => {
+  const sha = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
+  const owner = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER;
+  const slug = process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG;
+  const {
+    theme
+  } = useThemeUI();
+  const color = theme.rawColors.secondary;
+
+  if (sha && owner && slug) {
+    const shortSha = sha.substring(0, 7);
+    const href = 'https://github.com/' + owner + '/' + slug + '/tree/' + sha;
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(Separator, {
+      color: color
+    }), /*#__PURE__*/React.createElement(Link$1, {
+      href: href,
+      sx: {
+        whiteSpace: 'nowrap',
+        display: 'inline-block',
+        ml: [2],
+        fontFamily: 'mono',
+        letterSpacing: 'body',
+        color: color,
+        fontSize: [1],
+        textTransform: 'uppercase',
+        textDecoration: 'none'
+      }
+    }, shortSha));
+  } else {
+    // fallback
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(Separator, {
+      color: color
+    }), /*#__PURE__*/React.createElement(Text, {
+      sx: {
+        whiteSpace: 'nowrap',
+        display: 'inline-block',
+        ml: [2],
+        fontFamily: 'mono',
+        letterSpacing: 'body',
+        color: color,
+        fontSize: [1],
+        textTransform: 'uppercase'
+      }
+    }, color));
+  }
+};
+
+const Separator = ({
+  color
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    fill: color,
+    opacity: "0.8",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, /*#__PURE__*/React.createElement("circle", {
+    r: 5,
+    cx: 19,
+    cy: 19
+  }));
+};
+
 const Value = ({
   mode
 }) => {
@@ -1429,10 +1504,6 @@ const Value = ({
 const Metadata = ({
   mode
 }) => {
-  const {
-    theme
-  } = useThemeUI();
-  const color = theme.rawColors.secondary;
   return /*#__PURE__*/React.createElement(Box, {
     sx: {
       userSelect: 'none',
@@ -1445,28 +1516,7 @@ const Metadata = ({
     }
   }, /*#__PURE__*/React.createElement(Value, {
     mode: mode
-  }), /*#__PURE__*/React.createElement("svg", {
-    fill: color,
-    opacity: "0.8",
-    viewBox: "0 0 24 24",
-    width: "24",
-    height: "24"
-  }, /*#__PURE__*/React.createElement("circle", {
-    r: 5,
-    cx: 19,
-    cy: 19
-  })), /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      whiteSpace: 'nowrap',
-      display: 'inline-block',
-      ml: [2],
-      fontFamily: 'mono',
-      letterSpacing: 'body',
-      color: 'secondary',
-      fontSize: [1],
-      textTransform: 'uppercase'
-    }
-  }, color));
+  }), /*#__PURE__*/React.createElement(GitSha, null));
 };
 
 function init(mode) {
@@ -2416,7 +2466,7 @@ const Tray = ({
       ml: [-3, -4, -5, -6],
       pl: [3, 4, 5, 6],
       pr: [3, 4, 5, 6],
-      transform: expanded ? 'translateY(0)' : 'translateY(-400px)'
+      transform: expanded ? 'translateY(0)' : 'translateY(-100%)'
     }, sx)
   }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
     start: [1, 1, 1, 1],
@@ -2424,15 +2474,36 @@ const Tray = ({
   }, children))));
 };
 
-const formatDate = date => {
-  let d = new Date(date.replace(/-/g, '/'));
-  let month = d.toLocaleString('default', {
-    month: 'short'
+const defaultOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric'
+};
+
+const formatDateElement = (date, element, option) => {
+  if (!option) {
+    return null;
+  }
+
+  const format = typeof option === 'string' ? option : defaultOptions[element];
+  const result = date.toLocaleString('default', {
+    [element]: format
   });
-  let day = String(d.getDate()).padStart(2, '0');
-  let year = d.getFullYear();
-  return month + ' ' + day + ' ' + year;
+
+  if (format === 'numeric' && element === 'day') {
+    return result.padStart(2, '0');
+  } else {
+    return result;
+  }
+};
+
+const formatDate = (date, options = defaultOptions) => {
+  const d = new Date(date.replace(/-/g, '/'));
+  const month = formatDateElement(d, 'month', options.month);
+  const day = formatDateElement(d, 'day', options.day);
+  const year = formatDateElement(d, 'year', options.year);
+  return [month, day, year].filter(Boolean).join(' ');
 };
 
-export { Badge, Button, Callout, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, Input, Layout, Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Slider, Table, Tag, Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
+export { Badge, Button, Callout, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, Input, Layout, Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Settings, Slider, Table, Tag, Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
 //# sourceMappingURL=index.modern.js.map