@primer/components 0.0.0-2021113144816 → 0.0.0-2021113174023

package/lib/UnderlineNav.js

@@ -24,8 +24,8 @@ const SELECTED_CLASS = 'selected';
 
 const UnderlineNavBase = _styledComponents.default.nav.withConfig({
   displayName: "UnderlineNav__UnderlineNavBase",
-  componentId: "sc-zrnxqt-0"
-})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.3'), _sx.default);
+  componentId: "zrnxqt-0"
+})(["display:flex;justify-content:space-between;border-bottom:1px solid ", ";&.UnderlineNav--right{justify-content:flex-end;.UnderlineNav-item{margin-right:0;margin-left:", ";}.UnderlineNav-actions{flex:1 1 auto;}}&.UnderlineNav--full{display:block;}.UnderlineNav-body{display:flex;margin-bottom:-1px;}.UnderlineNav-actions{align-self:center;}", ";", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.3'), _constants.COMMON, _sx.default);
 
 function UnderlineNav({
   actions,
@@ -56,8 +56,8 @@ const UnderlineNavLink = _styledComponents.default.a.attrs(props => ({
   className: (0, _classnames.default)(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
 })).withConfig({
   displayName: "UnderlineNav__UnderlineNavLink",
-  componentId: "sc-zrnxqt-1"
-})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.primer.border.active'), (0, _constants.get)('colors.fg.default'), _sx.default);
+  componentId: "zrnxqt-1"
+})(["padding:", " ", ";margin-right:", ";font-size:", ";line-height:", ";color:", ";text-align:center;border-bottom:2px solid transparent;text-decoration:none;&:hover,&:focus{color:", ";text-decoration:none;border-bottom-color:", ";transition:0.2s ease;.UnderlineNav-octicon{color:", ";}}&.selected{color:", ";border-bottom-color:", ";.UnderlineNav-octicon{color:", ";}}", ";", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('lineHeights.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.primer.border.active'), (0, _constants.get)('colors.fg.default'), _constants.COMMON, _sx.default);
 
 UnderlineNavLink.displayName = 'UnderlineNav.Link';
 

package/lib/UnderlineNav.jsx

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const ITEM_CLASS = 'UnderlineNav-item';
+const SELECTED_CLASS = 'selected';
+const UnderlineNavBase = styled_components_1.default.nav `
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid ${constants_1.get('colors.border.muted')};
+  &.UnderlineNav--right {
+    justify-content: flex-end;
+
+    .UnderlineNav-item {
+      margin-right: 0;
+      margin-left: ${constants_1.get('space.3')};
+    }
+
+    .UnderlineNav-actions {
+      flex: 1 1 auto;
+    }
+  }
+  &.UnderlineNav--full {
+    display: block;
+  }
+
+  .UnderlineNav-body {
+    display: flex;
+    margin-bottom: -1px;
+  }
+
+  .UnderlineNav-actions {
+    align-self: center;
+  }
+
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+function UnderlineNav({ actions, className, align, children, full, label, theme, ...rest }) {
+    const classes = classnames_1.default(className, 'UnderlineNav', align && `UnderlineNav--${align}`, full && 'UnderlineNav--full');
+    return (<UnderlineNavBase className={classes} aria-label={label} theme={theme} {...rest}>
+      <div className="UnderlineNav-body">{children}</div>
+      {actions && <div className="UnderlineNav-actions">{actions}</div>}
+    </UnderlineNavBase>);
+}
+const UnderlineNavLink = styled_components_1.default.a.attrs(props => ({
+    activeClassName: typeof props.to === 'string' ? 'selected' : '',
+    className: classnames_1.default(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
+})) `
+  padding: ${constants_1.get('space.3')} ${constants_1.get('space.2')};
+  margin-right: ${constants_1.get('space.3')};
+  font-size: ${constants_1.get('fontSizes.1')};
+  line-height: ${constants_1.get('lineHeights.default')};
+  color: ${constants_1.get('colors.fg.default')};
+  text-align: center;
+  border-bottom: 2px solid transparent;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: ${constants_1.get('colors.fg.default')};
+    text-decoration: none;
+    border-bottom-color: ${constants_1.get('colors.neutral.muted')};
+    transition: 0.2s ease;
+
+    .UnderlineNav-octicon {
+      color: ${constants_1.get('colors.fg.muted')};
+    }
+  }
+
+  &.selected {
+    color: ${constants_1.get('colors.fg.default')};
+    border-bottom-color: ${constants_1.get('colors.primer.border.active')};
+
+    .UnderlineNav-octicon {
+      color: ${constants_1.get('colors.fg.default')};
+    }
+  }
+
+  ${constants_1.COMMON};
+  ${sx_1.default};
+`;
+UnderlineNavLink.displayName = 'UnderlineNav.Link';
+exports.default = Object.assign(UnderlineNav, { Link: UnderlineNavLink });

package/lib/_TextInputWrapper.jsx

@@ -0,0 +1,120 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importStar(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const constants_1 = require("./constants");
+const sx_1 = __importDefault(require("./sx"));
+const sizeVariants = styled_system_1.variant({
+    variants: {
+        small: {
+            minHeight: '28px',
+            px: 2,
+            py: '3px',
+            fontSize: 0,
+            lineHeight: '20px'
+        },
+        large: {
+            px: 2,
+            py: '10px',
+            fontSize: 3
+        }
+    }
+});
+const TextInputWrapper = styled_components_1.default.span `
+  display: inline-flex;
+  align-items: stretch;
+  min-height: 34px;
+  font-size: ${constants_1.get('fontSizes.1')};
+  line-height: 20px;
+  color: ${constants_1.get('colors.fg.default')};
+  vertical-align: middle;
+  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
+  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
+  border: 1px solid ${constants_1.get('colors.border.default')};
+  border-radius: ${constants_1.get('radii.2')};
+  outline: none;
+  box-shadow: ${constants_1.get('shadows.primer.shadow.inset')};
+  cursor: text;
+
+  ${props => {
+    if (props.hasIcon) {
+        return styled_components_1.css `
+        padding: 0;
+      `;
+    }
+    else {
+        return styled_components_1.css `
+        padding: 6px 12px;
+      `;
+    }
+}}
+
+  .TextInput-icon {
+    align-self: center;
+    color: ${constants_1.get('colors.fg.muted')};
+    margin: 0 ${constants_1.get('space.2')};
+    flex-shrink: 0;
+  }
+
+  &:focus-within {
+    border-color: ${constants_1.get('colors.accent.emphasis')};
+    box-shadow: ${constants_1.get('shadows.primer.shadow.focus')};
+  }
+
+  ${props => props.contrast &&
+    styled_components_1.css `
+      background-color: ${constants_1.get('colors.canvas.inset')};
+    `}
+
+  ${props => props.disabled &&
+    styled_components_1.css `
+      color: ${constants_1.get('colors.primer.fg.disabled')};
+      background-color: ${constants_1.get('colors.input.disabledBg')};
+      border-color: ${constants_1.get('colors.border.default')};
+    `}
+  
+    ${props => props.block &&
+    styled_components_1.css `
+      display: block;
+      width: 100%;
+    `}
+
+    ${props => props.block &&
+    props.hasIcon &&
+    styled_components_1.css `
+      display: flex;
+    `}
+  
+    // Ensures inputs don't zoom on mobile but are body-font size on desktop
+    @media (min-width: ${constants_1.get('breakpoints.1')}) {
+    font-size: ${constants_1.get('fontSizes.1')};
+  }
+  ${styled_system_1.width}
+  ${styled_system_1.minWidth}
+    ${styled_system_1.maxWidth}
+    ${sizeVariants}
+    ${sx_1.default};
+`;
+exports.default = TextInputWrapper;

package/lib/_UnstyledTextInput.jsx

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const sx_1 = __importDefault(require("./sx"));
+const UnstyledTextInput = styled_components_1.default.input `
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+  color: inherit;
+  width: 100%;
+  &:focus {
+    outline: 0;
+  }
+
+  ${sx_1.default};
+`;
+exports.default = UnstyledTextInput;