@primer/components 0.0.0-202110303104 → 0.0.0-2021103082237

package/lib/Token/IssueLabelToken.jsx

@@ -1,125 +0,0 @@
-"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 react_1 = __importStar(require("react"));
-const TokenBase_1 = __importStar(require("./TokenBase"));
-const _RemoveTokenButton_1 = __importDefault(require("./_RemoveTokenButton"));
-const color2k_1 = require("color2k");
-const ThemeProvider_1 = require("../ThemeProvider");
-const _TokenTextContainer_1 = __importDefault(require("./_TokenTextContainer"));
-const tokenBorderWidthPx = 1;
-const lightModeStyles = {
-    '--lightness-threshold': '0.453',
-    '--border-threshold': '0.96',
-    '--border-alpha': 'max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1))',
-    background: 'rgb(var(--label-r), var(--label-g), var(--label-b))',
-    color: 'hsl(0, 0%, calc(var(--lightness-switch) * 100%))',
-    borderWidth: tokenBorderWidthPx,
-    borderStyle: 'solid',
-    borderColor: 'hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha))'
-};
-const darkModeStyles = {
-    '--lightness-threshold': '0.6',
-    '--background-alpha': '0.18',
-    '--border-alpha': '0.3',
-    '--lighten-by': 'calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch))',
-    borderWidth: tokenBorderWidthPx,
-    borderStyle: 'solid',
-    background: 'rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha))',
-    color: 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))',
-    borderColor: 'hsla(var(--label-h), calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%),var(--border-alpha))'
-};
-const IssueLabelToken = react_1.forwardRef((props, forwardedRef) => {
-    const { as, fillColor = '#999', onRemove, id, isSelected, text, size, hideRemoveButton, href, onClick, ...rest } = props;
-    const interactiveTokenProps = {
-        as,
-        href,
-        onClick
-    };
-    const { colorScheme } = ThemeProvider_1.useTheme();
-    const hasMultipleActionTargets = TokenBase_1.isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton;
-    const onRemoveClick = e => {
-        e.stopPropagation();
-        onRemove && onRemove();
-    };
-    const labelStyles = react_1.useMemo(() => {
-        const [r, g, b] = color2k_1.parseToRgba(fillColor);
-        const [h, s, l] = color2k_1.parseToHsla(fillColor);
-        // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108
-        // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon.
-        return {
-            '--label-r': String(r),
-            '--label-g': String(g),
-            '--label-b': String(b),
-            '--label-h': String(Math.round(h)),
-            '--label-s': String(Math.round(s * 100)),
-            '--label-l': String(Math.round(l * 100)),
-            '--perceived-lightness': 'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)',
-            '--lightness-switch': 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))',
-            paddingRight: hideRemoveButton || !onRemove ? undefined : 0,
-            position: 'relative',
-            ...(colorScheme === 'light' ? lightModeStyles : darkModeStyles),
-            ...(isSelected
-                ? {
-                    background: colorScheme === 'light'
-                        ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))'
-                        : darkModeStyles.background,
-                    ':focus': {
-                        outline: 'none'
-                    },
-                    ':after': {
-                        content: '""',
-                        position: 'absolute',
-                        zIndex: 1,
-                        top: `-${tokenBorderWidthPx * 2}px`,
-                        right: `-${tokenBorderWidthPx * 2}px`,
-                        bottom: `-${tokenBorderWidthPx * 2}px`,
-                        left: `-${tokenBorderWidthPx * 2}px`,
-                        display: 'block',
-                        pointerEvents: 'none',
-                        boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${colorScheme === 'light'
-                            ? 'rgb(var(--label-r), var(--label-g), var(--label-b))'
-                            : 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))'}`,
-                        borderRadius: '999px'
-                    }
-                }
-                : {})
-        };
-    }, [colorScheme, fillColor, isSelected, hideRemoveButton, onRemove]);
-    return (<TokenBase_1.default onRemove={onRemove} id={id?.toString()} isSelected={isSelected} text={text} size={size} sx={labelStyles} {...(!hasMultipleActionTargets ? interactiveTokenProps : {})} {...rest} ref={forwardedRef}>
-      <_TokenTextContainer_1.default {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>{text}</_TokenTextContainer_1.default>
-      {!hideRemoveButton && onRemove ? (<_RemoveTokenButton_1.default borderOffset={tokenBorderWidthPx} onClick={onRemoveClick} size={size} aria-hidden={hasMultipleActionTargets ? 'true' : 'false'} isParentInteractive={TokenBase_1.isTokenInteractive(props)} sx={hasMultipleActionTargets
-                ? {
-                    position: 'relative',
-                    zIndex: '1'
-                }
-                : {}}/>) : null}
-    </TokenBase_1.default>);
-});
-IssueLabelToken.defaultProps = {
-    fillColor: '#999',
-    size: TokenBase_1.defaultTokenSize
-};
-IssueLabelToken.displayName = 'IssueLabelToken';
-exports.default = IssueLabelToken;

package/lib/Token/Token.jsx

@@ -1,103 +0,0 @@
-"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 react_1 = __importStar(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const TokenBase_1 = __importStar(require("./TokenBase"));
-const _RemoveTokenButton_1 = __importDefault(require("./_RemoveTokenButton"));
-const _TokenTextContainer_1 = __importDefault(require("./_TokenTextContainer"));
-const tokenBorderWidthPx = 1;
-const DefaultTokenStyled = styled_components_1.default(TokenBase_1.default) `
-  background-color: ${constants_1.get('colors.neutral.subtle')};
-  border-color: ${props => (props.isSelected ? constants_1.get('colors.fg.default') : constants_1.get('colors.border.subtle'))};
-  border-style: solid;
-  border-width: ${tokenBorderWidthPx}px;
-  color: ${props => (props.isSelected ? constants_1.get('colors.fg.default') : constants_1.get('colors.fg.muted'))};
-  max-width: 100%;
-  padding-right: ${props => (!props.hideRemoveButton ? 0 : undefined)};
-  position: relative;
-  ${sx_1.default}
-
-  ${props => {
-    if (props.isTokenInteractive) {
-        return styled_components_1.css `
-        &:hover {
-          background-color: ${constants_1.get('colors.neutral.muted')};
-          box-shadow: ${constants_1.get('colors.shadow.medium')};
-          color: ${constants_1.get('colors.fg.default')};
-        }
-      `;
-    }
-}}
-`;
-const LeadingVisualContainer = styled_components_1.default('span') `
-  flex-shrink: 0;
-  line-height: 0;
-
-  ${props => {
-    switch (props.size) {
-        case 'large':
-        case 'extralarge':
-            return styled_components_1.css `
-          margin-right: ${constants_1.get('space.2')};
-        `;
-        default:
-            return styled_components_1.css `
-          margin-right: ${constants_1.get('space.1')};
-        `;
-    }
-}}
-`;
-const Token = react_1.forwardRef((props, forwardedRef) => {
-    const { as, onRemove, id, leadingVisual: LeadingVisual, text, size, hideRemoveButton, href, onClick, ...rest } = props;
-    const hasMultipleActionTargets = TokenBase_1.isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton;
-    const onRemoveClick = e => {
-        e.stopPropagation();
-        onRemove && onRemove();
-    };
-    const interactiveTokenProps = {
-        as,
-        href,
-        onClick
-    };
-    return (<DefaultTokenStyled onRemove={onRemove} hideRemoveButton={hideRemoveButton || !onRemove} id={id?.toString()} text={text} size={size} isTokenInteractive={TokenBase_1.isTokenInteractive(props)} {...(!hasMultipleActionTargets ? interactiveTokenProps : {})} {...rest} ref={forwardedRef}>
-        {LeadingVisual ? (<LeadingVisualContainer size={size}>
-            <LeadingVisual />
-          </LeadingVisualContainer>) : null}
-        <_TokenTextContainer_1.default {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>{text}</_TokenTextContainer_1.default>
-        {!hideRemoveButton && onRemove ? (<_RemoveTokenButton_1.default borderOffset={tokenBorderWidthPx} onClick={onRemoveClick} size={size} isParentInteractive={TokenBase_1.isTokenInteractive(props)} aria-hidden={hasMultipleActionTargets ? 'true' : 'false'} sx={hasMultipleActionTargets
-                ? {
-                    position: 'relative',
-                    zIndex: '1'
-                }
-                : {}}/>) : null}
-      </DefaultTokenStyled>);
-});
-Token.displayName = 'Token';
-Token.defaultProps = {
-    size: TokenBase_1.defaultTokenSize
-};
-exports.default = Token;

package/lib/Token/TokenBase.jsx

@@ -1,88 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTokenInteractive = exports.defaultTokenSize = exports.tokenSizes = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const styled_system_1 = require("styled-system");
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-exports.tokenSizes = {
-    small: '16px',
-    medium: '20px',
-    large: '24px',
-    extralarge: '32px'
-};
-exports.defaultTokenSize = 'medium';
-const isTokenInteractive = ({ as = 'span', onClick, onFocus, tabIndex = -1 }) => Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as));
-exports.isTokenInteractive = isTokenInteractive;
-const variants = styled_system_1.variant({
-    prop: 'size',
-    variants: {
-        small: {
-            fontSize: 0,
-            height: exports.tokenSizes.small,
-            // without setting lineHeight to match height, the "x" appears vertically mis-aligned
-            lineHeight: exports.tokenSizes.small,
-            paddingLeft: 1,
-            paddingRight: 1,
-            // need to explicitly set padding top and bottom to "0" to override default `<button>` element styles
-            // without setting these, the "x" appears vertically mis-aligned
-            paddingTop: 0,
-            paddingBottom: 0
-        },
-        medium: {
-            fontSize: 0,
-            height: exports.tokenSizes.medium,
-            lineHeight: exports.tokenSizes.medium,
-            paddingLeft: 2,
-            paddingRight: 2,
-            paddingTop: 0,
-            paddingBottom: 0
-        },
-        large: {
-            fontSize: 0,
-            height: exports.tokenSizes.large,
-            lineHeight: exports.tokenSizes.large,
-            paddingLeft: 2,
-            paddingRight: 2,
-            paddingTop: 0,
-            paddingBottom: 0
-        },
-        extralarge: {
-            fontSize: 1,
-            height: exports.tokenSizes.extralarge,
-            lineHeight: exports.tokenSizes.extralarge,
-            paddingLeft: 3,
-            paddingRight: 3,
-            paddingTop: 0,
-            paddingBottom: 0
-        }
-    }
-});
-const TokenBase = styled_components_1.default.span.attrs(({ text, onRemove, onKeyDown }) => ({
-    onKeyDown: (event) => {
-        onKeyDown && onKeyDown(event);
-        if ((event.key === 'Backspace' || event.key === 'Delete') && onRemove) {
-            onRemove();
-        }
-    },
-    'aria-label': onRemove ? `${text}, press backspace or delete to remove` : undefined
-})) `
-  align-items: center;
-  border-radius: 999px;
-  cursor: ${props => (exports.isTokenInteractive(props) ? 'pointer' : 'auto')};
-  display: inline-flex;
-  font-weight: ${constants_1.get('fontWeights.bold')};
-  font-family: inherit;
-  text-decoration: none;
-  white-space: nowrap;
-  ${variants}
-  ${sx_1.default}
-`;
-TokenBase.defaultProps = {
-    as: 'span',
-    size: exports.defaultTokenSize
-};
-exports.default = TokenBase;

package/lib/Token/_RemoveTokenButton.jsx

@@ -1,108 +0,0 @@
-"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 react_1 = __importDefault(require("react"));
-const octicons_react_1 = require("@primer/octicons-react");
-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 TokenBase_1 = require("./TokenBase");
-const variants = styled_system_1.variant({
-    prop: 'size',
-    variants: {
-        small: {
-            height: TokenBase_1.tokenSizes.small,
-            width: TokenBase_1.tokenSizes.small
-        },
-        medium: {
-            height: TokenBase_1.tokenSizes.medium,
-            width: TokenBase_1.tokenSizes.medium
-        },
-        large: {
-            height: TokenBase_1.tokenSizes.large,
-            width: TokenBase_1.tokenSizes.large
-        },
-        extralarge: {
-            height: TokenBase_1.tokenSizes.extralarge,
-            width: TokenBase_1.tokenSizes.extralarge
-        }
-    }
-});
-const getTokenButtonIconSize = (size) => parseInt(TokenBase_1.tokenSizes[size || TokenBase_1.defaultTokenSize], 10) * 0.75;
-const StyledTokenButton = styled_components_1.default.span `
-  background-color: transparent;
-  font-family: inherit;
-  color: currentColor;
-  cursor: pointer;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  user-select: none;
-  appearance: none;
-  text-decoration: none;
-  padding: 0;
-  transform: ${props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`};
-  align-self: baseline;
-  border: 0;
-  border-radius: 999px;
-
-  ${props => {
-    switch (props.size) {
-        case 'large':
-        case 'extralarge':
-            return styled_components_1.css `
-          margin-left: ${constants_1.get('space.2')};
-        `;
-        default:
-            return styled_components_1.css `
-          margin-left: ${constants_1.get('space.1')};
-        `;
-    }
-}}
-
-  &:hover,
-  &:focus {
-    // TODO: choose a better functional color variable for this
-    background-color: ${constants_1.get('colors.neutral.muted')};
-  }
-
-  &:active {
-    // TODO: choose a better functional color variable for this
-    background-color: ${constants_1.get('colors.neutral.subtle')};
-  }
-
-  ${variants}
-  ${sx_1.default}
-`;
-const RemoveTokenButton = ({ 'aria-label': ariaLabel, isParentInteractive, size, ...rest }) => {
-    delete rest.children;
-    return (<StyledTokenButton as={isParentInteractive ? 'span' : 'button'} tabIndex={isParentInteractive ? -1 : undefined} aria-label={!isParentInteractive ? 'Remove token' : ariaLabel} size={size} {...rest}>
-      <octicons_react_1.XIcon size={getTokenButtonIconSize(size)}/>
-    </StyledTokenButton>);
-};
-RemoveTokenButton.defaultProps = {
-    size: TokenBase_1.defaultTokenSize
-};
-exports.default = RemoveTokenButton;

package/lib/Token/_TokenTextContainer.jsx

@@ -1,49 +0,0 @@
-"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 TokenTextContainer = styled_components_1.default('span') `
-  flex-grow: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  // reset button styles, make the cursor a pointer, and add line-height
-  background: transparent;
-  border: none;
-  color: inherit;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  padding: 0;
-  width: auto;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  line-height: 1;
-
-  // reset anchor styles
-  color: currentColor;
-  text-decoration: none;
-
-  // Position psuedo-element above text content, but below the
-  // remove button.
-  // This ensures the <a> or <button> receives the click no
-  // matter where on the token the user clicks.
-  &:is(a, button, [tabIndex='0']) {
-    cursor: pointer;
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-    }
-  }
-`;
-exports.default = TokenTextContainer;