feat(layout): add Text component, test, examples

Author: koca

packages/layout/examples/base-text.vue

@@ -0,0 +1,27 @@
+<template>
+  <c-stack spacing="{3}">
+    <c-text fontSize="6xl">(6xl) In love with React & Next</c-text>
+    <c-text fontSize="5xl">(5xl) In love with React & Next</c-text>
+    <c-text fontSize="4xl">(4xl) In love with React & Next</c-text>
+    <c-text fontSize="3xl">(3xl) In love with React & Next</c-text>
+    <c-text fontSize="2xl">(2xl) In love with React & Next</c-text>
+    <c-text fontSize="xl">(xl) In love with React & Next</c-text>
+    <c-text fontSize="lg">(lg) In love with React & Next</c-text>
+    <c-text fontSize="md">(md) In love with React & Next</c-text>
+    <c-text fontSize="sm">(sm) In love with React & Next</c-text>
+    <c-text fontSize="xs">(xs) In love with React & Next</c-text>
+  </c-stack>
+  <c-divider my="4" />
+  <c-text>truncated:</c-text>
+  <c-text maxW="sm" isTruncated>
+    Lorem ipsum is placeholder text commonly used in the graphic, print, and
+    publishing industries for previewing layouts and visual mockups.
+  </c-text>
+  <c-divider my="4" />
+  <c-text>line clamp:</c-text>
+  <c-text :noOfLines="[1, 2, 3]" maxW="sm">
+    "The quick brown fox jumps over the lazy dog" is an English-language
+    pangram—a sentence that contains all of the letters of the English alphabet.
+    Owing to its existence, Chakra was created.
+  </c-text>
+</template>

packages/layout/src/index.ts

@@ -13,3 +13,4 @@ export * from './kbd'
 export * from './simple-grid'
 export * from './spacer'
 export * from './stack'
+export * from './text'

packages/layout/src/text.ts

@@ -0,0 +1,78 @@
+import { filterUndefined } from '@chakra-ui/utils'
+import {
+  chakra,
+  HTMLChakraProps,
+  ThemingProps,
+  SystemProps,
+  useStyleConfig,
+  DOMElements,
+} from '@chakra-ui/vue-system'
+import { SNAO, vueThemingProps } from '@chakra-ui/vue-utils'
+import {
+  computed,
+  defineComponent,
+  h,
+  PropType,
+  ComponentOptionsWithObjectProps,
+  ComponentPropsOptions,
+} from '@vue/runtime-core'
+
+export interface TextProps extends HTMLChakraProps<'p'>, ThemingProps<'Text'> {
+  /**
+   * The CSS `text-align` property
+   * @type SystemProps["textAlign"]
+   */
+  align?: SystemProps['textAlign']
+  /**
+   * The CSS `text-decoration` property
+   * @type SystemProps["textDecoration"]
+   */
+  decoration?: SystemProps['textDecoration']
+  /**
+   * The CSS `text-transform` property
+   * @type SystemProps["textTransform"]
+   */
+  casing?: SystemProps['textTransform']
+}
+
+/**
+ * Used to render texts or paragraphs.
+ *
+ * @see Docs https://vue.chakra-ui.com/docs/typography/text
+ */
+export const CText = defineComponent({
+  props: {
+    as: {
+      type: [Object, String] as PropType<DOMElements>,
+      default: 'p',
+    },
+    align: SNAO as PropType<TextProps['textAlign']>,
+    decoration: SNAO as PropType<TextProps['textDecoration']>,
+    casing: SNAO as PropType<TextProps['textTransform']>,
+    ...vueThemingProps,
+  },
+  setup(props, { slots, attrs }) {
+    const styles = useStyleConfig('Text', props)
+
+    const aliasedProps = computed(() =>
+      filterUndefined({
+        textAlign: props.align,
+        textDecoration: props.decoration,
+        textTransform: props.casing,
+      })
+    )
+
+    return () => {
+      return h(
+        chakra(props.as, {
+          label: 'text',
+          ...aliasedProps.value,
+          __css: styles.value,
+          ...attrs,
+        }),
+        {},
+        slots
+      )
+    }
+  },
+})

packages/layout/tests/__snapshots__/layout.test.ts.snap

@@ -468,3 +468,38 @@ exports[`<CStack /> should render properly 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`<CText /> should render properly 1`] = `
+<DocumentFragment>
+  <p
+    class="chakra-text css-0"
+  >
+    normal:
+  </p>
+  <p
+    class="chakra-text css-n2bes8"
+  >
+    (6xl) In love with Vue & Vite & Nuxt
+  </p>
+  <p
+    class="chakra-text css-0"
+  >
+    truncated:
+  </p>
+  <p
+    class="chakra-text css-3urtkt"
+  >
+     Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. 
+  </p>
+  <p
+    class="chakra-text css-0"
+  >
+    line clamp:
+  </p>
+  <p
+    class="chakra-text css-3jijpv"
+  >
+     "The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the English alphabet. Owing to its existence, Chakra was created. 
+  </p>
+</DocumentFragment>
+`;

packages/layout/tests/layout.test.ts

@@ -24,6 +24,7 @@ import {
   COrderedList,
   CUnorderedList,
   CListIcon,
+  CText,
 } from '../src'
 import { CFlex } from '@chakra-ui/vue-next'
 import { render, testA11y } from '../../test-utils/src'
@@ -376,3 +377,30 @@ describe('<CSpacer />', () => {
     expect(asFragment()).toMatchSnapshot()
   })
 })
+
+describe('<CText />', () => {
+  const renderComponent = () =>
+    render({
+      components: { CText },
+      template: `
+      <c-text>normal:</c-text>
+      <c-text fontSize="6xl">(6xl) In love with Vue & Vite & Nuxt</c-text>
+      <c-text>truncated:</c-text>
+      <c-text maxW="sm" isTruncated>
+        Lorem ipsum is placeholder text commonly used in the graphic, print, and
+        publishing industries for previewing layouts and visual mockups.
+      </c-text>
+      <c-text>line clamp:</c-text>
+      <c-text :noOfLines="[1, 2, 3]" maxW="sm">
+        "The quick brown fox jumps over the lazy dog" is an English-language
+        pangram—a sentence that contains all of the letters of the English alphabet.
+        Owing to its existence, Chakra was created.
+      </c-text>
+      `,
+    })
+
+  it('should render properly', async () => {
+    const { asFragment } = renderComponent()
+    expect(asFragment()).toMatchSnapshot()
+  })
+})