@instructure/ui-text 11.6.0 → 11.6.1-snapshot-129

package/es/Text/v2/index.js

@@ -0,0 +1,90 @@
+var _dec, _class, _Text;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { passthroughProps, getElementType } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+/**
+---
+category: components
+---
+**/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+let Text = (_dec = withStyle(generateStyle), _dec(_class = (_Text = class Text extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+      const elementRef = this.props.elementRef;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  checkProps() {
+    const _this$props = this.props,
+      variant = _this$props.variant,
+      lineHeight = _this$props.lineHeight,
+      weight = _this$props.weight,
+      fontStyle = _this$props.fontStyle;
+    if (variant) {
+      if (lineHeight) {}
+      if (weight) {}
+      if (fontStyle) {}
+    }
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.checkProps();
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.checkProps();
+  }
+  render() {
+    var _this$props$styles;
+    const children = this.props.children;
+    const ElementType = getElementType(Text, this.props);
+    return _jsx(ElementType, {
+      ...passthroughProps(this.props),
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.text,
+      ref: this.handleRef,
+      children: children
+    });
+  }
+}, _Text.displayName = "Text", _Text.componentId = 'Text', _Text.allowedProps = allowedProps, _Text.defaultProps = {
+  as: 'span',
+  wrap: 'normal',
+  size: 'medium',
+  letterSpacing: 'normal',
+  children: null
+}, _Text)) || _class);
+export default Text;
+export { Text };

package/es/Text/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['as', 'children', 'color', 'elementRef', 'fontStyle', 'letterSpacing', 'lineHeight', 'size', 'transform', 'variant', 'weight', 'wrap'];
+export { allowedProps };

package/es/Text/v2/styles.js

@@ -0,0 +1,272 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @return The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, params) => {
+  const color = params.color,
+    fontStyle = params.fontStyle,
+    lineHeight = params.lineHeight,
+    letterSpacing = params.letterSpacing,
+    transform = params.transform,
+    size = params.size,
+    variant = params.variant,
+    weight = params.weight,
+    wrap = params.wrap;
+  const variants = {
+    descriptionPage: {
+      fontFamily: componentTheme.descriptionPage.fontFamily,
+      fontWeight: componentTheme.descriptionPage.fontWeight,
+      fontSize: componentTheme.descriptionPage.fontSize,
+      lineHeight: componentTheme.descriptionPage.lineHeight
+    },
+    descriptionSection: {
+      fontFamily: componentTheme.descriptionSection.fontFamily,
+      fontWeight: componentTheme.descriptionSection.fontWeight,
+      fontSize: componentTheme.descriptionSection.fontSize,
+      lineHeight: componentTheme.descriptionSection.lineHeight
+    },
+    content: {
+      fontFamily: componentTheme.content.fontFamily,
+      fontWeight: componentTheme.content.fontWeight,
+      fontSize: componentTheme.content.fontSize,
+      lineHeight: componentTheme.content.lineHeight
+    },
+    contentImportant: {
+      fontFamily: componentTheme.contentImportant.fontFamily,
+      fontWeight: componentTheme.contentImportant.fontWeight,
+      fontSize: componentTheme.contentImportant.fontSize,
+      lineHeight: componentTheme.contentImportant.lineHeight
+    },
+    contentQuote: {
+      fontFamily: componentTheme.contentQuote.fontFamily,
+      fontWeight: componentTheme.contentQuote.fontWeight,
+      fontSize: componentTheme.contentQuote.fontSize,
+      lineHeight: componentTheme.contentQuote.lineHeight
+    },
+    contentSmall: {
+      fontFamily: componentTheme.contentSmall.fontFamily,
+      fontWeight: componentTheme.contentSmall.fontWeight,
+      fontSize: componentTheme.contentSmall.fontSize,
+      lineHeight: componentTheme.contentSmall.lineHeight
+    },
+    legend: {
+      fontFamily: componentTheme.legend.fontFamily,
+      fontWeight: componentTheme.legend.fontWeight,
+      fontSize: componentTheme.legend.fontSize,
+      lineHeight: componentTheme.legend.lineHeight
+    }
+  };
+  const colorVariants = {
+    primary: {
+      color: componentTheme.baseColor
+    },
+    secondary: {
+      color: componentTheme.mutedColor
+    },
+    'primary-inverse': {
+      color: componentTheme.inverseColor
+    },
+    'secondary-inverse': {
+      color: componentTheme.inverseColor
+    },
+    success: {
+      color: componentTheme.successColor
+    },
+    brand: {
+      color: componentTheme.primaryColor
+    },
+    danger: {
+      color: componentTheme.errorColor
+    },
+    warning: {
+      color: componentTheme.warningColor
+    },
+    'primary-on': {
+      color: componentTheme.baseOnColor
+    },
+    'secondary-on': {
+      color: componentTheme.mutedOnColor
+    },
+    'ai-highlight': {
+      color: componentTheme.aiColor,
+      background: componentTheme.aiBackgroundColor
+    }
+  };
+  const wrapStyle = {
+    overflowWrap: 'break-word',
+    wordBreak: 'break-word',
+    hyphens: 'auto'
+  };
+  const weightStyle = {
+    normal: {
+      fontWeight: componentTheme.fontWeightNormal
+    },
+    light: {
+      fontWeight: componentTheme.fontWeightLight
+    },
+    bold: {
+      fontWeight: componentTheme.fontWeightBold
+    },
+    weightRegular: {
+      fontWeight: componentTheme.fontWeightRegular
+    },
+    weightImportant: {
+      fontWeight: componentTheme.fontWeightImportant
+    }
+  };
+  const fontSizeVariants = {
+    'x-small': componentTheme.fontSizeXSmall,
+    small: componentTheme.fontSizeSmall,
+    medium: componentTheme.fontSizeMedium,
+    large: componentTheme.fontSizeLarge,
+    'x-large': componentTheme.fontSizeXLarge,
+    'xx-large': componentTheme.fontSizeXXLarge,
+    // these are deprecated
+    descriptionPage: componentTheme.descriptionPage.fontSize,
+    descriptionSection: componentTheme.descriptionSection.fontSize,
+    content: componentTheme.content.fontSize,
+    contentSmall: componentTheme.contentSmall.fontSize,
+    legend: componentTheme.legend.fontSize
+  };
+  const lineHeightVariants = {
+    default: {
+      lineHeight: componentTheme.lineHeight
+    },
+    fit: {
+      lineHeight: componentTheme.lineHeightFit
+    },
+    condensed: {
+      lineHeight: componentTheme.lineHeightCondensed
+    },
+    double: {
+      lineHeight: componentTheme.lineHeightDouble
+    },
+    lineHeight100: {
+      lineHeight: componentTheme.lineHeight100
+    },
+    lineHeight125: {
+      lineHeight: componentTheme.lineHeight125
+    },
+    lineHeight150: {
+      lineHeight: componentTheme.lineHeight150
+    }
+  };
+  const letterSpacingVariants = {
+    normal: componentTheme.letterSpacingNormal,
+    condensed: componentTheme.letterSpacingCondensed,
+    expanded: componentTheme.letterSpacingExpanded
+  };
+  const calcTextStyles = () => {
+    if (variant) {
+      return variants[variant];
+    }
+    return {
+      ...(weight ? weightStyle[weight] : {}),
+      ...(fontStyle ? {
+        fontStyle: fontStyle
+      } : {}),
+      fontSize: fontSizeVariants[size],
+      ...(lineHeight ? lineHeightVariants[lineHeight] : {})
+    };
+  };
+  const baseStyles = {
+    '&:focus': {
+      outline: 'none'
+    },
+    ...(color ? colorVariants[color] : {
+      color: componentTheme.baseColor
+    }),
+    ...(wrap === 'break-word' ? wrapStyle : {}),
+    letterSpacing: letterSpacingVariants[letterSpacing],
+    ...(transform ? {
+      textTransform: transform
+    } : {}),
+    ...calcTextStyles()
+  };
+  const inputStyles = {
+    ...baseStyles,
+    outline: 0,
+    appearance: 'none',
+    boxSizing: 'border-box',
+    background: 'none',
+    border: 'none',
+    borderRadius: 0,
+    padding: 0,
+    margin: 0,
+    color: 'inherit',
+    height: 'auto',
+    width: '100%',
+    lineHeight: 'inherit',
+    textAlign: 'start',
+    boxShadow: 'none',
+    display: 'block'
+  };
+  return {
+    text: {
+      label: 'text',
+      fontFamily: componentTheme.fontFamily,
+      ...baseStyles,
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because
+      // of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(input)[type]': inputStyles,
+      '&:-webkit-any(input)[type]': inputStyles,
+      'sub, sup': {
+        fontSize: '75%',
+        lineHeight: 0,
+        position: 'relative',
+        verticalAlign: 'baseline'
+      },
+      sup: {
+        top: '-0.4em'
+      },
+      sub: {
+        bottom: '-0.4em'
+      },
+      'pre, code': {
+        all: 'initial',
+        fontFamily: componentTheme.fontFamilyMonospace
+      },
+      'i, em': {
+        fontStyle: 'italic'
+      },
+      'b, strong': {
+        fontWeight: componentTheme.fontWeightBold
+      },
+      p: {
+        display: 'block',
+        padding: 0,
+        margin: componentTheme.paragraphMargin
+      }
+    }
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Text } from "./Text/index.js";
+export { Text } from "../Text/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,5 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Text } from './Text'
-export type { TextProps } from './Text/props'
+export { Text } from "../Text/v2/index.js";

package/lib/Text/v1/index.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = void 0;
+var _react = require("react");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _Text;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components
+---
+**/
+let Text = exports.Text = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Text = class Text extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      this.ref = el;
+      const elementRef = this.props.elementRef;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  checkProps() {
+    const _this$props = this.props,
+      variant = _this$props.variant,
+      lineHeight = _this$props.lineHeight,
+      weight = _this$props.weight,
+      fontStyle = _this$props.fontStyle;
+    if (variant) {
+      if (lineHeight) {}
+      if (weight) {}
+      if (fontStyle) {}
+    }
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props2;
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.checkProps();
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props3;
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    this.checkProps();
+  }
+  render() {
+    var _this$props$styles;
+    const children = this.props.children;
+    const ElementType = (0, _getElementType.getElementType)(Text, this.props);
+    return (0, _jsxRuntime.jsx)(ElementType, {
+      ...(0, _passthroughProps.passthroughProps)(this.props),
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.text,
+      ref: this.handleRef,
+      children: children
+    });
+  }
+}, _Text.displayName = "Text", _Text.componentId = 'Text', _Text.allowedProps = _props.allowedProps, _Text.defaultProps = {
+  as: 'span',
+  wrap: 'normal',
+  size: 'medium',
+  letterSpacing: 'normal',
+  children: null
+}, _Text)) || _class);
+var _default = exports.default = Text;

package/lib/Text/{index.js → v2/index.js}

@@ -10,7 +10,6 @@ var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProp
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _dec, _class, _Text;
@@ -42,7 +41,7 @@ var _dec, _class, _Text;
 category: components
 ---
 **/
-let Text = exports.Text = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Text = class Text extends _react.Component {
+let Text = exports.Text = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Text = class Text extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;

package/lib/Text/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'elementRef', 'fontStyle', 'letterSpacing', 'lineHeight', 'size', 'transform', 'variant', 'weight', 'wrap'];