Ocelot-Social/maintenance/lib/styleguide/components/typography/Text/Text.vue

<template>
  <component
    :is="tag"
    class="ds-text"
    :class="[
      size && `ds-text-size-${size}`,
      color && `ds-text-${color}`,
      bold && `ds-text-bold`,
      inline && `ds-text-inline`,
      align && `ds-text-${align}`,
      uppercase && `ds-text-uppercase`
    ]"
  >
    <slot />
  </component>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

/**
 * Text is used for styling and grouping paragraphs or words.
 * Defaults to a `p` tag. If nested inside of another text
 * component it defaults to a `span` tag.
 * @version 1.0.0
 */
export default defineComponent({
  name: 'DsText',

  provide() {
    return {
      $parentText: this
    }
  },

  inject: {
    $parentText: {
      default: null
    }
  },

  props: {
    /**
     * The color used for the text.
     * @options default|soft|softer|primary|inverse|success|warning|danger
     */
    color: {
      type: String,
      default: null,
      validator: (value: string) => {
        return value.match(
          /(default|soft|softer|primary|inverse|success|warning|danger)/
        )
      }
    },
    /**
     * Whether the text is bold.
     */
    bold: {
      type: Boolean,
      default: null
    },
    /**
     * Whether the text is inline.
     * @default false
     */
    inline: {
      type: Boolean,
      default() {
        return !!this.$parentText
      }
    },
    /**
     * The size used for the text.
     * @options small|base|large|x-large|xx-large|xxx-large
     */
    size: {
      type: String,
      default: null,
      validator: value => {
        return value.match(/(small|base|large|x-large|xx-large|xxx-large)/)
      }
    },
    /**
     * The html tag used for the text.
     */
    tag: {
      type: String,
      default(): string {
        return this.inline ? 'span' : 'p'
      }
    },
    /**
     * Align Text
     * `left, center, right
     */
    align: {
      type: String,
      default: null,
      validator: value => {
        return value.match(/(left|center|right)/)
      }
    },
    /**
     * Text in Uppdercase
     */
    uppercase: {
      type: Boolean,
      default: false
    }
  },
});
</script>

<style lang="scss" src="./style.scss">
</style>