@kiwicom/orbit-components/lib/Text/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _consts = require("./consts");
var _tailwind = require("../common/tailwind");
var _twClasses = require("./helpers/twClasses");
/**
 * @orbit-doc-start
 * README
 * ----------
 * # Text
 *
 * To implement Text component into your project you'll need to add the import:
 *
 * ```jsx
 * import Text from "@kiwicom/orbit-components/lib/Text";
 * ```
 *
 * After adding import into your project you can use it simply like:
 *
 * ```jsx
 * <Text>Hello World!</Text>
 * ```
 *
 * ## Props
 *
 * Table below contains all types of the props available in the Text component.
 *
 * | Name           | Type                         | Default     | Description                                                   |
 * | :------------- | :--------------------------- | :---------- | :------------------------------------------------------------ |
 * | as             | [`enum`](#enum)              | `"p"`       | The element used for the root node.                           |
 * | align          | [`enum`](#enum)              | `"left"`    | The align of the Text.                                        |
 * | children       | `React.Node`                 |             | The content of the Text.                                      |
 * | dataTest       | `string`                     |             | Optional prop for testing purposes.                           |
 * | id             | `string`                     |             | The `id` HTML attribute.                                      |
 * | italic         | `boolean`                    | `false`     | If `true`, the Text will be in italic style.                  |
 * | **size**       | [`enum`](#enum)              | `"normal"`  | The size of the Text.                                         |
 * | **type**       | [`enum`](#enum)              | `"primary"` | The color type of the Text.                                   |
 * | uppercase      | `boolean`                    | `false`     | If `true`, the Text will be in uppercase style.               |
 * | strikeThrough  | `boolean`                    | `false`     | If `true`, the Text will have `text-transform: line-through`. |
 * | **weight**     | [`enum`](#enum)              | `"regular"` | The weight of the Text.                                       |
 * | withBackground | `boolean`                    |             | If specified, Text will have background                       |
 * | margin         | `string \| number \| Object` | `"0"`       | Utility property to set margin.                               |
 *
 * ### enum
 *
 * | type          | align       | as       | size           | weight     |
 * | :------------ | :---------- | :------- | :------------- | :--------- |
 * | `"primary"`   | `"start"`   | `"p"`    | `"small"`      | `"normal"` |
 * | `"secondary"` | `"end"`     | `"span"` | `"normal"`     | `"medium"` |
 * | `"info"`      | `"left"`    | `"div"`  | `"large"`      | `"bold"`   |
 * | `"success"`   | `"center"`  |          | `"extraLarge"` |            |
 * | `"warning"`   | `"right"`   |          |                |            |
 * | `"critical"`  | `"justify"` |          |                |            |
 * | `"white"`     |             |          |                |            |
 *
 *
 * @orbit-doc-end
 */
const Text = ({
  type = _consts.TYPE_OPTIONS.PRIMARY,
  size = _consts.SIZE_OPTIONS.NORMAL,
  weight = _consts.WEIGHT_OPTIONS.NORMAL,
  align = _consts.ALIGN_OPTIONS.START,
  margin,
  as: Component = _consts.ELEMENT_OPTIONS.P,
  uppercase,
  italic,
  strikeThrough,
  dataTest,
  spaceAfter,
  children,
  withBackground,
  id
}) => {
  const {
    vars: cssVars,
    classes: marginClasses
  } = (0, _tailwind.getMargin)(margin);
  return /*#__PURE__*/React.createElement(Component, {
    id: id,
    "data-test": dataTest,
    className: (0, _clsx.default)("orbit-text font-base", uppercase && "uppercase", strikeThrough && "line-through", italic && "italic", _twClasses.sizeClasses[size], _twClasses.weightClasses[weight], _twClasses.typeClasses[type], withBackground && _twClasses.backgroundClasses[type], _tailwind.textAlignClasses[align], spaceAfter && _tailwind.spaceAfterClasses[spaceAfter], ...marginClasses, ..._twClasses.textLinkCommonClasses),
    style: cssVars
  }, children);
};
var _default = exports.default = Text;