@zendeskgarden/react-typography 9.0.0-next.2 → 9.0.0-next.21

package/dist/esm/elements/Blockquote.js

@@ -0,0 +1,34 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { SIZE } from '../types/index.js';
+import { StyledBlockquote } from '../styled/StyledBlockquote.js';
+import '../styled/StyledCode.js';
+import '../styled/StyledCodeBlock.js';
+import '../styled/StyledCodeBlockContainer.js';
+import '../styled/StyledCodeBlockLine.js';
+import '../styled/StyledCodeBlockToken.js';
+import '../styled/StyledEllipsis.js';
+import '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import '../styled/StyledParagraph.js';
+
+const Blockquote = forwardRef((props, ref) => React.createElement(StyledBlockquote, Object.assign({
+  ref: ref
+}, props)));
+Blockquote.displayName = 'Blockquote';
+Blockquote.propTypes = {
+  size: PropTypes.oneOf(SIZE)
+};
+Blockquote.defaultProps = {
+  size: 'medium'
+};
+
+export { Blockquote };

package/dist/esm/elements/Code.js

@@ -0,0 +1,43 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { HUE, INHERIT_SIZE } from '../types/index.js';
+import '../styled/StyledBlockquote.js';
+import { StyledCode } from '../styled/StyledCode.js';
+import '../styled/StyledCodeBlock.js';
+import '../styled/StyledCodeBlockContainer.js';
+import '../styled/StyledCodeBlockLine.js';
+import '../styled/StyledCodeBlockToken.js';
+import '../styled/StyledEllipsis.js';
+import '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import '../styled/StyledParagraph.js';
+
+const Code = forwardRef((_ref, ref) => {
+  let {
+    hue,
+    ...other
+  } = _ref;
+  return React.createElement(StyledCode, Object.assign({
+    ref: ref,
+    hue: hue
+  }, other));
+});
+Code.displayName = 'Code';
+Code.propTypes = {
+  hue: PropTypes.oneOf(HUE),
+  size: PropTypes.oneOf(INHERIT_SIZE)
+};
+Code.defaultProps = {
+  hue: 'grey',
+  size: 'inherit'
+};
+
+export { Code };

package/dist/esm/elements/CodeBlock.js

@@ -0,0 +1,124 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
+import { Prism, Highlight } from 'prism-react-renderer';
+import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
+import { useWindow, ThemeProvider } from '@zendeskgarden/react-theming';
+import { LANGUAGES } from '../types/index.js';
+import '../styled/StyledBlockquote.js';
+import '../styled/StyledCode.js';
+import { StyledCodeBlock } from '../styled/StyledCodeBlock.js';
+import { StyledCodeBlockContainer } from '../styled/StyledCodeBlockContainer.js';
+import { StyledCodeBlockLine } from '../styled/StyledCodeBlockLine.js';
+import { StyledCodeBlockToken } from '../styled/StyledCodeBlockToken.js';
+import '../styled/StyledEllipsis.js';
+import '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import '../styled/StyledParagraph.js';
+
+const CodeBlock = React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    containerProps,
+    highlightLines,
+    isLight,
+    isNumbered,
+    language = 'tsx',
+    size = 'medium',
+    ...other
+  } = _ref;
+  const containerRef = useRef(null);
+  const code = Array.isArray(children) ? children[0] : children;
+  const dependency = useMemo(() => [size, children], [size, children]);
+  const containerTabIndex = useScrollRegion({
+    containerRef,
+    dependency
+  });
+  const [isPrismImported, setIsPrismImported] = useState(false);
+  const win = useWindow();
+  const importPrism = useCallback(async () => {
+    if (win && !isPrismImported) {
+      win.Prism = Prism;
+      try {
+        await import('prismjs/components/prism-bash');
+        await import('prismjs/components/prism-diff');
+        await import('prismjs/components/prism-json');
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setIsPrismImported(true);
+      }
+    }
+  }, [win, isPrismImported]);
+  useEffect(() => {
+    importPrism();
+  }, [importPrism]);
+  const getDiff = line => {
+    let retVal;
+    if (language === 'diff') {
+      const token = line.find(value => !(value.empty || value.content === ''));
+      if (token) {
+        if (token.types.includes('deleted')) {
+          retVal = 'delete';
+        } else if (token.types.includes('inserted')) {
+          retVal = 'add';
+        } else if (token.types.includes('coord')) {
+          retVal = 'hunk';
+        } else if (token.types.includes('diff')) {
+          retVal = 'change';
+        }
+      }
+    }
+    return retVal;
+  };
+  return isPrismImported && React.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
+    ref: containerRef,
+    tabIndex: containerTabIndex
+  }), React.createElement(Highlight, {
+    code: code ? code.trim() : '',
+    language: LANGUAGES.includes(language) ? language : 'tsx'
+  }, _ref2 => {
+    let {
+      className,
+      tokens,
+      getLineProps,
+      getTokenProps
+    } = _ref2;
+    return React.createElement(ThemeProvider, {
+      theme: parentTheme => ({
+        ...parentTheme,
+        colors: {
+          ...parentTheme.colors,
+          base: isLight ? 'light' : 'dark'
+        }
+      })
+    }, React.createElement(StyledCodeBlock, Object.assign({
+      className: className,
+      ref: ref
+    }, other), tokens.map((line, index) => React.createElement(StyledCodeBlockLine, Object.assign({}, getLineProps({
+      line
+    }), {
+      key: index,
+      language: language,
+      isHighlighted: highlightLines && highlightLines.includes(index + 1),
+      isNumbered: isNumbered,
+      diff: getDiff(line),
+      size: size,
+      style: undefined
+    }), line.map((token, tokenKey) => React.createElement(StyledCodeBlockToken, Object.assign({}, getTokenProps({
+      token
+    }), {
+      key: tokenKey,
+      style: undefined
+    }), token.empty ? '\n' : token.content))))));
+  }));
+});
+CodeBlock.displayName = 'CodeBlock';
+
+export { CodeBlock };

package/dist/esm/elements/Ellipsis.js

@@ -0,0 +1,50 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '../styled/StyledBlockquote.js';
+import '../styled/StyledCode.js';
+import '../styled/StyledCodeBlock.js';
+import '../styled/StyledCodeBlockContainer.js';
+import '../styled/StyledCodeBlockLine.js';
+import '../styled/StyledCodeBlockToken.js';
+import { StyledEllipsis } from '../styled/StyledEllipsis.js';
+import '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import '../styled/StyledParagraph.js';
+
+const Ellipsis = forwardRef((_ref, ref) => {
+  let {
+    children,
+    title,
+    tag,
+    ...other
+  } = _ref;
+  let textContent = undefined;
+  if (title !== undefined) {
+    textContent = title;
+  } else if (typeof children === 'string') {
+    textContent = children;
+  }
+  return React.createElement(StyledEllipsis, Object.assign({
+    as: tag,
+    ref: ref,
+    title: textContent
+  }, other), children);
+});
+Ellipsis.displayName = 'Ellipsis';
+Ellipsis.propTypes = {
+  title: PropTypes.string,
+  tag: PropTypes.any
+};
+Ellipsis.defaultProps = {
+  tag: 'div'
+};
+
+export { Ellipsis };

package/dist/esm/elements/LG.js

@@ -0,0 +1,43 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '../styled/StyledBlockquote.js';
+import '../styled/StyledCode.js';
+import '../styled/StyledCodeBlock.js';
+import '../styled/StyledCodeBlockContainer.js';
+import '../styled/StyledCodeBlockLine.js';
+import '../styled/StyledCodeBlockToken.js';
+import '../styled/StyledEllipsis.js';
+import { StyledFont } from '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import '../styled/StyledParagraph.js';
+
+const LG = forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
+  return React.createElement(StyledFont, Object.assign({
+    as: tag,
+    ref: ref,
+    size: "large"
+  }, other));
+});
+LG.displayName = 'LG';
+LG.propTypes = {
+  tag: PropTypes.any,
+  isBold: PropTypes.bool,
+  isMonospace: PropTypes.bool
+};
+LG.defaultProps = {
+  tag: 'div'
+};
+
+export { LG };

package/dist/esm/elements/MD.js

@@ -0,0 +1,43 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '../styled/StyledBlockquote.js';
+import '../styled/StyledCode.js';
+import '../styled/StyledCodeBlock.js';
+import '../styled/StyledCodeBlockContainer.js';
+import '../styled/StyledCodeBlockLine.js';
+import '../styled/StyledCodeBlockToken.js';
+import '../styled/StyledEllipsis.js';
+import { StyledFont } from '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import '../styled/StyledParagraph.js';
+
+const MD = forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
+  return React.createElement(StyledFont, Object.assign({
+    as: tag,
+    ref: ref,
+    size: "medium"
+  }, other));
+});
+MD.displayName = 'MD';
+MD.propTypes = {
+  tag: PropTypes.any,
+  isBold: PropTypes.bool,
+  isMonospace: PropTypes.bool
+};
+MD.defaultProps = {
+  tag: 'div'
+};
+
+export { MD };

package/dist/esm/elements/Paragraph.js

@@ -0,0 +1,34 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { SIZE } from '../types/index.js';
+import '../styled/StyledBlockquote.js';
+import '../styled/StyledCode.js';
+import '../styled/StyledCodeBlock.js';
+import '../styled/StyledCodeBlockContainer.js';
+import '../styled/StyledCodeBlockLine.js';
+import '../styled/StyledCodeBlockToken.js';
+import '../styled/StyledEllipsis.js';
+import '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import { StyledParagraph } from '../styled/StyledParagraph.js';
+
+const Paragraph = forwardRef((props, ref) => React.createElement(StyledParagraph, Object.assign({
+  ref: ref
+}, props)));
+Paragraph.displayName = 'Paragraph';
+Paragraph.propTypes = {
+  size: PropTypes.oneOf(SIZE)
+};
+Paragraph.defaultProps = {
+  size: 'medium'
+};
+
+export { Paragraph };

package/dist/esm/elements/SM.js

@@ -0,0 +1,43 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '../styled/StyledBlockquote.js';
+import '../styled/StyledCode.js';
+import '../styled/StyledCodeBlock.js';
+import '../styled/StyledCodeBlockContainer.js';
+import '../styled/StyledCodeBlockLine.js';
+import '../styled/StyledCodeBlockToken.js';
+import '../styled/StyledEllipsis.js';
+import { StyledFont } from '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import '../styled/StyledParagraph.js';
+
+const SM = forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
+  return React.createElement(StyledFont, Object.assign({
+    as: tag,
+    ref: ref,
+    size: "small"
+  }, other));
+});
+SM.displayName = 'SM';
+SM.propTypes = {
+  tag: PropTypes.any,
+  isBold: PropTypes.bool,
+  isMonospace: PropTypes.bool
+};
+SM.defaultProps = {
+  tag: 'div'
+};
+
+export { SM };

package/dist/esm/elements/XL.js

@@ -0,0 +1,42 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '../styled/StyledBlockquote.js';
+import '../styled/StyledCode.js';
+import '../styled/StyledCodeBlock.js';
+import '../styled/StyledCodeBlockContainer.js';
+import '../styled/StyledCodeBlockLine.js';
+import '../styled/StyledCodeBlockToken.js';
+import '../styled/StyledEllipsis.js';
+import { StyledFont } from '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import '../styled/StyledParagraph.js';
+
+const XL = forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
+  return React.createElement(StyledFont, Object.assign({
+    as: tag,
+    ref: ref,
+    size: "extralarge"
+  }, other));
+});
+XL.displayName = 'XL';
+XL.propTypes = {
+  tag: PropTypes.any,
+  isBold: PropTypes.bool
+};
+XL.defaultProps = {
+  tag: 'div'
+};
+
+export { XL };

package/dist/esm/elements/XXL.js

@@ -0,0 +1,42 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '../styled/StyledBlockquote.js';
+import '../styled/StyledCode.js';
+import '../styled/StyledCodeBlock.js';
+import '../styled/StyledCodeBlockContainer.js';
+import '../styled/StyledCodeBlockLine.js';
+import '../styled/StyledCodeBlockToken.js';
+import '../styled/StyledEllipsis.js';
+import { StyledFont } from '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import '../styled/StyledParagraph.js';
+
+const XXL = forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
+  return React.createElement(StyledFont, Object.assign({
+    as: tag,
+    ref: ref,
+    size: "2xlarge"
+  }, other));
+});
+XXL.displayName = 'XXL';
+XXL.propTypes = {
+  tag: PropTypes.any,
+  isBold: PropTypes.bool
+};
+XXL.defaultProps = {
+  tag: 'div'
+};
+
+export { XXL };

package/dist/esm/elements/XXXL.js

@@ -0,0 +1,42 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '../styled/StyledBlockquote.js';
+import '../styled/StyledCode.js';
+import '../styled/StyledCodeBlock.js';
+import '../styled/StyledCodeBlockContainer.js';
+import '../styled/StyledCodeBlockLine.js';
+import '../styled/StyledCodeBlockToken.js';
+import '../styled/StyledEllipsis.js';
+import { StyledFont } from '../styled/StyledFont.js';
+import '../styled/StyledIcon.js';
+import '../styled/StyledList.js';
+import '../styled/StyledListItem.js';
+import '../styled/StyledParagraph.js';
+
+const XXXL = forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
+  return React.createElement(StyledFont, Object.assign({
+    as: tag,
+    ref: ref,
+    size: "3xlarge"
+  }, other));
+});
+XXXL.displayName = 'XXXL';
+XXXL.propTypes = {
+  tag: PropTypes.any,
+  isBold: PropTypes.bool
+};
+XXXL.defaultProps = {
+  tag: 'div'
+};
+
+export { XXXL };

package/dist/esm/elements/lists/OrderedList.js

@@ -0,0 +1,53 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Item } from './OrderedListItem.js';
+import { SIZE, TYPE_ORDERED_LIST } from '../../types/index.js';
+import { OrderedListContext } from '../../utils/useOrderedListContext.js';
+import '../../styled/StyledBlockquote.js';
+import '../../styled/StyledCode.js';
+import '../../styled/StyledCodeBlock.js';
+import '../../styled/StyledCodeBlockContainer.js';
+import '../../styled/StyledCodeBlockLine.js';
+import '../../styled/StyledCodeBlockToken.js';
+import '../../styled/StyledEllipsis.js';
+import '../../styled/StyledFont.js';
+import '../../styled/StyledIcon.js';
+import { StyledOrderedList } from '../../styled/StyledList.js';
+import '../../styled/StyledListItem.js';
+import '../../styled/StyledParagraph.js';
+
+const OrderedListComponent = React.forwardRef((_ref, ref) => {
+  let {
+    size,
+    type,
+    ...other
+  } = _ref;
+  const value = useMemo(() => ({
+    size: size
+  }), [size]);
+  return React.createElement(OrderedListContext.Provider, {
+    value: value
+  }, React.createElement(StyledOrderedList, Object.assign({
+    ref: ref,
+    listType: type
+  }, other)));
+});
+OrderedListComponent.displayName = 'OrderedList';
+OrderedListComponent.propTypes = {
+  size: PropTypes.oneOf(SIZE),
+  type: PropTypes.oneOf(TYPE_ORDERED_LIST)
+};
+OrderedListComponent.defaultProps = {
+  size: 'medium',
+  type: 'decimal'
+};
+const OrderedList = OrderedListComponent;
+OrderedList.Item = Item;
+
+export { OrderedList };

package/dist/esm/elements/lists/OrderedListItem.js

@@ -0,0 +1,34 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import useOrderedListContext from '../../utils/useOrderedListContext.js';
+import '../../styled/StyledBlockquote.js';
+import '../../styled/StyledCode.js';
+import '../../styled/StyledCodeBlock.js';
+import '../../styled/StyledCodeBlockContainer.js';
+import '../../styled/StyledCodeBlockLine.js';
+import '../../styled/StyledCodeBlockToken.js';
+import '../../styled/StyledEllipsis.js';
+import '../../styled/StyledFont.js';
+import '../../styled/StyledIcon.js';
+import '../../styled/StyledList.js';
+import { StyledOrderedListItem } from '../../styled/StyledListItem.js';
+import '../../styled/StyledParagraph.js';
+
+const OrderedListItem = forwardRef((props, ref) => {
+  const {
+    size
+  } = useOrderedListContext();
+  return React.createElement(StyledOrderedListItem, Object.assign({
+    ref: ref,
+    space: size
+  }, props));
+});
+OrderedListItem.displayName = 'OrderedList.Item';
+const Item = OrderedListItem;
+
+export { Item };