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

package/dist/esm/styled/StyledFont.js

@@ -0,0 +1,76 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { hideVisually, math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { SIZE } from '../types/index.js';
+
+const COMPONENT_ID = 'typography.font';
+[...SIZE, 'extralarge', '2xlarge', '3xlarge'];
+const THEME_SIZES = {
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+  extralarge: 'xl',
+  '2xlarge': 'xxl',
+  '3xlarge': 'xxxl'
+};
+const fontStyles = _ref => {
+  let {
+    hue,
+    isBold,
+    isMonospace,
+    size,
+    theme
+  } = _ref;
+  const monospace = isMonospace && ['inherit', 'small', 'medium', 'large'].indexOf(size) !== -1;
+  const fontFamily = monospace && theme.fonts.mono;
+  const direction = theme.rtl ? 'rtl' : 'ltr';
+  let fontSize;
+  let fontWeight;
+  let lineHeight;
+  let color;
+  if (monospace) {
+    if (size === 'inherit') {
+      fontSize = 'calc(1em - 1px)';
+      lineHeight = 'normal';
+    } else {
+      const themeSize = THEME_SIZES[size];
+      fontSize = math(`${theme.fontSizes[themeSize]} - 1px`);
+      lineHeight = math(`${theme.lineHeights[themeSize]} - 1px`);
+    }
+  } else if (size !== 'inherit') {
+    const themeSize = THEME_SIZES[size];
+    fontSize = theme.fontSizes[themeSize];
+    lineHeight = theme.lineHeights[themeSize];
+  }
+  if (isBold === true) {
+    fontWeight = theme.fontWeights.semibold;
+  } else if (isBold === false || size !== 'inherit') {
+    fontWeight = theme.fontWeights.regular;
+  }
+  if (hue) {
+    color = getColor({
+      hue,
+      theme
+    });
+  }
+  return css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
+};
+const StyledFont = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledFont",
+  componentId: "sc-1iildbo-0"
+})(["", ";&[hidden]{display:inline;", ";}", ";"], props => !props.hidden && fontStyles(props), hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledFont.defaultProps = {
+  theme: DEFAULT_THEME,
+  size: 'inherit'
+};
+
+export { StyledFont, THEME_SIZES };

package/dist/esm/styled/StyledIcon.js

@@ -0,0 +1,27 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'typography.icon';
+const sizeStyles = props => {
+  const margin = props.$isStart && `${props.theme.space.base * 2}px`;
+  const size = props.theme.iconSizes.md;
+  return css(["margin-", ":", ";width:", ";height:", ";"], props.theme.rtl ? 'left' : 'right', margin, size, size);
+};
+const StyledIcon = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledIcon",
+  componentId: "sc-10rfb5b-0"
+})(["position:relative;top:-1px;vertical-align:middle;", ";", ";"], props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledIcon };

package/dist/esm/styled/StyledList.js

@@ -0,0 +1,37 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const listStyles = props => {
+  const rtl = props.theme.rtl;
+  return css(["direction:", ";margin:0;margin-", ":24px;padding:0;list-style-position:outside;list-style-type:", ";"], rtl ? 'rtl' : 'ltr', rtl ? 'right' : 'left', props.listType);
+};
+const ORDERED_ID = 'typography.ordered_list';
+const StyledOrderedList = styled.ol.attrs({
+  'data-garden-id': ORDERED_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledList__StyledOrderedList",
+  componentId: "sc-jdbsfi-0"
+})(["", ";", ";"], props => listStyles(props), props => retrieveComponentStyles(ORDERED_ID, props));
+StyledOrderedList.defaultProps = {
+  theme: DEFAULT_THEME
+};
+const UNORDERED_ID = 'typography.unordered_list';
+const StyledUnorderedList = styled.ul.attrs({
+  'data-garden-id': UNORDERED_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledList__StyledUnorderedList",
+  componentId: "sc-jdbsfi-1"
+})(["", ";", ";"], props => listStyles(props), props => retrieveComponentStyles(UNORDERED_ID, props));
+StyledUnorderedList.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledOrderedList, StyledUnorderedList };

package/dist/esm/styled/StyledListItem.js

@@ -0,0 +1,48 @@
+/**
+* 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 styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+import { StyledOrderedList, StyledUnorderedList } from './StyledList.js';
+import { StyledFont } from './StyledFont.js';
+
+const listItemPaddingStyles = props => {
+  const base = props.theme.space.base;
+  const paddingTop = props.space === 'large' ? `${base * 2}px` : `${base}px`;
+  return css(["padding-top:", ";", " > &:first-child,", " > &:first-child{padding-top:0;}", " ", " > &:first-child,", " ", " > &:first-child,", " ", " > &:first-child,", " ", " > &:first-child{padding-top:", ";}"], paddingTop, StyledOrderedList, StyledUnorderedList, StyledOrderedList, StyledOrderedList, StyledOrderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, StyledUnorderedList, paddingTop);
+};
+const listItemStyles = props => {
+  return css(["line-height:", ";", ";"], getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md), props.space !== 'small' && listItemPaddingStyles(props));
+};
+const ORDERED_ID = 'typography.ordered_list_item';
+const StyledOrderedListItem = styled(StyledFont).attrs({
+  'data-garden-id': ORDERED_ID,
+  'data-garden-version': '9.0.0-next.21',
+  as: 'li'
+}).withConfig({
+  displayName: "StyledListItem__StyledOrderedListItem",
+  componentId: "sc-9rsipg-0"
+})(["margin-", ":", ";padding-", ":", ";", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * -1px`), props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 1px`), props => listItemStyles(props), props => retrieveComponentStyles(ORDERED_ID, props));
+StyledOrderedListItem.defaultProps = {
+  space: 'medium',
+  theme: DEFAULT_THEME
+};
+const UNORDERED_ID = 'typography.unordered_list_item';
+const StyledUnorderedListItem = styled(StyledFont).attrs({
+  'data-garden-id': UNORDERED_ID,
+  'data-garden-version': '9.0.0-next.21',
+  as: 'li'
+}).withConfig({
+  displayName: "StyledListItem__StyledUnorderedListItem",
+  componentId: "sc-9rsipg-1"
+})(["", ";", ";"], props => listItemStyles(props), props => retrieveComponentStyles(UNORDERED_ID, props));
+StyledUnorderedListItem.defaultProps = {
+  space: 'medium',
+  theme: DEFAULT_THEME
+};
+
+export { StyledOrderedListItem, StyledUnorderedListItem };

package/dist/esm/styled/StyledParagraph.js

@@ -0,0 +1,23 @@
+/**
+* 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 styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { THEME_SIZES } from './StyledFont.js';
+
+const COMPONENT_ID = 'typography.paragraph';
+const StyledParagraph = styled.p.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledParagraph",
+  componentId: "sc-zkuftz-0"
+})(["margin:0;padding:0;direction:", ";& + &,blockquote + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledParagraph.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledParagraph };

package/dist/esm/types/index.js

@@ -0,0 +1,14 @@
+/**
+* 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.
+*/
+const HUE = ['grey', 'red', 'green', 'yellow'];
+const SIZE = ['small', 'medium', 'large'];
+const INHERIT_SIZE = ['inherit', ...SIZE];
+const TYPE_ORDERED_LIST = ['decimal', 'decimal-leading-zero', 'lower-alpha', 'lower-roman', 'upper-alpha', 'upper-roman'];
+const TYPE_UNORDERED_LIST = ['circle', 'disc', 'square'];
+const LANGUAGES = ['bash', 'css', 'diff', 'graphql', 'javascript', 'json', 'jsx', 'markdown', 'markup', 'python', 'typescript', 'tsx', 'yaml'];
+
+export { HUE, INHERIT_SIZE, LANGUAGES, SIZE, TYPE_ORDERED_LIST, TYPE_UNORDERED_LIST };

package/dist/esm/utils/useOrderedListContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+const OrderedListContext = createContext(undefined);
+const useOrderedListContext = () => {
+  const listContext = useContext(OrderedListContext);
+  if (!listContext) {
+    throw new Error('This component must be rendered within an `OrderedList` component.');
+  }
+  return listContext;
+};
+
+export { OrderedListContext, useOrderedListContext as default };

package/dist/esm/utils/useUnorderedListContext.js

@@ -0,0 +1,18 @@
+/**
+* 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 { createContext, useContext } from 'react';
+
+const UnorderedListContext = createContext(undefined);
+const useUnorderedListContext = () => {
+  const listContext = useContext(UnorderedListContext);
+  if (!listContext) {
+    throw new Error('This component must be rendered within an `UnorderedList` component.');
+  }
+  return listContext;
+};
+
+export { UnorderedListContext, useUnorderedListContext as default };