@bitrise/bitkit 10.1.0-alpha-chakra.1 → 10.1.0-alpha-chakra.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.1.0-alpha-chakra.1",
+  "version": "10.1.0-alpha-chakra.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Old/Input/InputInlineHelp.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import Text, { TextProps } from '../../Components/Text/Text';
+import Text, { Props as TextProps } from '../Text/Text';
 
 export type Props = TextProps;
 
 /** Provides specific styling for an inline input label */
 const InputInlineHelp: React.FunctionComponent<Props> = (props: Props) => {
-  return <Text marginY="8" size="2" color="neutral.50" {...props} />;
+  return <Text margin="x2" size="2" textColor="neutral.50" {...props} />;
 };
 
 export default InputInlineHelp;

package/src/Old/Input/InputLabel.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import Text, { TextProps } from '../../Components/Text/Text';
 
-export type Props = TextProps;
+export type Props = {
+  htmlFor?: string | undefined;
+} & TextProps;
 
 /**
  * Provides specific styling for a label that accompanies an

package/src/Old/Table/TableCell.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import classnames from 'classnames';
-import Box, { BoxProps } from '../../Components/Box/Box';
+import Text, { Props as TextProps } from '../Text/Text';
 
-export interface Props extends BoxProps {
+export interface Props extends TextProps {
   /** Forces the width of the table cell to shrink to the content. */
   shrink?: boolean;
 }
@@ -17,7 +17,7 @@ const TableCell: React.FunctionComponent<Props> = (props: Props) => {
     'Table__cell--shrink': shrink,
   });
 
-  return <Box {...rest} Component="td" className={classes} color="neutral.40" />;
+  return <Text {...rest} Component="td" className={classes} textColor="neutral.40" />;
 };
 
 export default TableCell;

package/src/Old/Table/TableHeaderCell.tsx

@@ -2,14 +2,13 @@ import * as React from 'react';
 import classnames from 'classnames';
 import Flex from '../Flex/Flex';
 import Icon from '../../Components/Icon/Icon';
-import Box, { BoxProps } from '../../Components/Box/Box';
+import Text, { Props as TextProps } from '../Text/Text';
 import Visibility from '../Visibility/Visibility';
 import VisibilityContainer from '../Visibility/VisibilityContainer';
 
 export type TypeTableSort = 'asc' | 'desc';
 
-export interface Props extends BoxProps {
-  align?: 'start' | 'middle' | 'end' | 'around' | 'between';
+export interface Props extends TextProps {
   /**
    * Indicates that the cell is sortable, the provided value is what is
    * indicated as the sort direction when clicked.
@@ -26,13 +25,13 @@ export interface Props extends BoxProps {
  * The header cell. Should be a direct descendant of the TableHeaderRow component.
  */
 const TableHeaderCell: React.FunctionComponent<Props> = (props: Props) => {
-  const { align, children, sortable, sorted, ...rest } = props;
+  const { align, children, sortable, sorted } = props;
   const classes = classnames('Table__header-cell', {
     'Table__header-cell--sortable': sortable,
   });
 
   return (
-    <Box {...rest} as="th" className={classes}>
+    <Text {...props} Component="th" className={classes}>
       <VisibilityContainer
         alignChildrenHorizontal={align}
         alignChildrenVertical="middle"
@@ -56,7 +55,7 @@ const TableHeaderCell: React.FunctionComponent<Props> = (props: Props) => {
           </Visibility>
         )}
       </VisibilityContainer>
-    </Box>
+    </Text>
   );
 };
 

package/src/Old/Text/Text.css

@@ -0,0 +1,33 @@
+.Text--align-start  { text-align: left; }
+.Text--align-middle { text-align: center; }
+.Text--align-end    { text-align: right; }
+
+.Text--break-all  { word-break: break-all; }
+.Text--break-none { white-space: nowrap; }
+.Text--break-word { word-wrap: break-word; }
+
+.Text--letter-spacing-x1 { letter-spacing: var(--letter-spacing--x1); }
+.Text--letter-spacing-x2 { letter-spacing: var(--letter-spacing--x2); }
+.Text--letter-spacing-x3 { letter-spacing: var(--letter-spacing--x3); }
+.Text--letter-spacing-x4 { letter-spacing: var(--letter-spacing--x4); }
+.Text--letter-spacing-x5 { letter-spacing: var(--letter-spacing--x5); }
+
+.Text--weight-bold { font-weight: var(--fontWeights-bold); }
+
+.Text--ellipsis {
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.Text--emphasis { font-style: italic; }
+
+.Text--titlecase { text-transform: capitalize; }
+.Text--uppercase { text-transform: uppercase; }
+
+.Text--monospace {
+  font-family: var(--font-family-monospace);
+}
+
+.Text--monospace.Text--weight-bold { font-weight: var(--font-weight-monospace--bold); }

package/src/Old/Text/Text.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import Base, { Props as BaseProps } from '../Base/Base';
+import './TextSizes.css';
+import './Text.css';
+
+export type TypeTextLetterSpacing = 'x1' | 'x2' | 'x3' | 'x4' | 'x5';
+export type TypeTextSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+export type TypeTextWeight = 'bold' | 'normal';
+
+export interface Props extends BaseProps {
+  /**
+   * Sets the type of component to be rendered. Can be a
+   * string for an HTML tag or a React component.
+   * */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component?: string | React.ComponentType<any>;
+  /* Horizontal alignment of the child text */
+  align?: 'start' | 'middle' | 'end';
+  /* Sets how the text should break across lines when reaching the container width */
+  breakOn?: 'all' | 'none' | 'word';
+  /** @ignore */
+  className?: string;
+  /** Clips overflowing text with an ellipsis */
+  ellipsis?: boolean;
+  /** Empahsises text with an italic style */
+  emphasis?: boolean;
+  /** Sets the text to you inline layout */
+  inline?: boolean;
+  /** Adjusts the texts letter spacing to one of the curated values */
+  letterSpacing?: TypeTextLetterSpacing;
+  /** Sets the text to use a monospaced font family */
+  monospace?: boolean;
+  /* Shortcut for setting the correct combination of props for valid typeography design */
+  size?: TypeTextSize;
+  /** Sets the text to use title casing (first letter of each word is uppercase) */
+  titlecase?: boolean;
+  /** Sets the text to use uppercasing (every letter of each word is uppercase) */
+  uppercase?: boolean;
+  /** Adjusts the text weighting */
+  weight?: TypeTextWeight;
+}
+
+const InlineComponentMap = (props: Props) =>
+  (props.weight === 'bold' && 'strong') || (props.emphasis && 'em') || 'span';
+
+/**
+ * Generic text component that applies a wide variety of textual
+ * styling.
+ */
+const Text: React.FunctionComponent<Props> = (props: Props) => {
+  const {
+    Component,
+    align,
+    breakOn,
+    className,
+    ellipsis,
+    emphasis,
+    inline,
+    letterSpacing,
+    monospace,
+    size = '3',
+    titlecase,
+    uppercase,
+    weight,
+    ...rest
+  } = props;
+
+  const classes = classnames(className, 'Text', {
+    'Text--ellipsis': ellipsis,
+    'Text--emphasis': emphasis,
+    'Text--monospace': monospace,
+    'Text--titlecase': titlecase,
+    'Text--uppercase': uppercase,
+    [`Text--align-${align}`]: align,
+    [`Text--break-${breakOn}`]: breakOn,
+    [`Text--letter-spacing-${letterSpacing}`]: letterSpacing,
+    [`Text--size-${size}`]: size,
+    'Text--weight-bold': weight === 'bold',
+  });
+
+  const component = inline ? InlineComponentMap(props) : Component;
+
+  return <Base {...rest} Component={component} className={classes} />;
+};
+
+export default Text;