From 3e1f512c73441b4b9d729af692d3c8e0af3316b6 Mon Sep 17 00:00:00 2001 From: Daniel Olabemiwo Date: Sat, 17 Jun 2023 19:25:18 +0100 Subject: [PATCH 1/3] feat: heading component documentation --- .../content/examples/heading/BasicHeading.vue | 7 ++ .../examples/heading/CompositionHeading.vue | 16 +++ .../examples/heading/OverrideHeading.vue | 9 ++ .../content/examples/heading/SizesHeading.vue | 26 +++++ .../examples/heading/TruncatedHeading.vue | 9 ++ content/4.components/heading.md | 109 ++++++++++++++++++ 6 files changed, 176 insertions(+) create mode 100644 components/content/examples/heading/BasicHeading.vue create mode 100644 components/content/examples/heading/CompositionHeading.vue create mode 100644 components/content/examples/heading/OverrideHeading.vue create mode 100644 components/content/examples/heading/SizesHeading.vue create mode 100644 components/content/examples/heading/TruncatedHeading.vue create mode 100644 content/4.components/heading.md diff --git a/components/content/examples/heading/BasicHeading.vue b/components/content/examples/heading/BasicHeading.vue new file mode 100644 index 0000000..c5a0431 --- /dev/null +++ b/components/content/examples/heading/BasicHeading.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/components/content/examples/heading/CompositionHeading.vue b/components/content/examples/heading/CompositionHeading.vue new file mode 100644 index 0000000..8ec621b --- /dev/null +++ b/components/content/examples/heading/CompositionHeading.vue @@ -0,0 +1,16 @@ + + + \ No newline at end of file diff --git a/components/content/examples/heading/OverrideHeading.vue b/components/content/examples/heading/OverrideHeading.vue new file mode 100644 index 0000000..6a04aa7 --- /dev/null +++ b/components/content/examples/heading/OverrideHeading.vue @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/components/content/examples/heading/SizesHeading.vue b/components/content/examples/heading/SizesHeading.vue new file mode 100644 index 0000000..07f2c8d --- /dev/null +++ b/components/content/examples/heading/SizesHeading.vue @@ -0,0 +1,26 @@ + + + \ No newline at end of file diff --git a/components/content/examples/heading/TruncatedHeading.vue b/components/content/examples/heading/TruncatedHeading.vue new file mode 100644 index 0000000..cd140dd --- /dev/null +++ b/components/content/examples/heading/TruncatedHeading.vue @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/content/4.components/heading.md b/content/4.components/heading.md new file mode 100644 index 0000000..4ae29bd --- /dev/null +++ b/content/4.components/heading.md @@ -0,0 +1,109 @@ +--- +title: Heading +description: Heading component +version: 2.0+ +--- + +# Heading + +Headings are used for rendering semantic HTML heading elements. + +Heading composes `CBox` so you can use all the style props and add responsive styles as well. It renders an `

` tag by default. + +## Imports + +```js +import { CHeading } from '@chakra-ui/vue-next'; +``` + +## Usage + +::showcase +:basic-heading +:: + + +```html +I'm a Heading +``` + +### Changing font size + +To increase the size of the heading, you can use the `font-size` or `size` prop. If you use the `size` prop, the font size of the heading will automatically decrease in size for smaller screens. + +::showcase +:sizes-heading +:: + +```html + + + In love with Vue & Nuxt + + + In love with Vue & Nuxt + + + In love with Vue & Nuxt + + + In love with Vue & Nuxt + + + In love with Vue & Nuxt + + + In love with Vue & Nuxt + + +``` + +### Truncate heading + +Pass the `is-truncated` prop to render an ellipsis when the headings exceed + +::showcase +:truncated-heading +:: + +```html + + Basic text writing, including headings, body text, lists, and more. + +``` + +### Override style + +You can override the size of the Heading component by passing the `font-size` prop. + +::showcase +:override-heading +:: + +## Composition + +::showcase +:composition-heading +:: + +```html + + Modern online and offline payments for Africa + + Paystack helps businesses in Africa get paid by anyone, anywhere in the + world + + + Create a free account + + +``` + +## Props + +> The `CHeading` composes the `CBox` component. So it accepts all Box props along with the related CSS grid props. See Box component for list of props. + +| Name | Values | Default | Description | +|--------|-------------------------------------|---------|--------------------------| +| `size` | `2xl`, `xl`, `lg`, `md`, `sm`, `xs` | `xl` | The size of the heading. | +| `as` | `h1`, `h2`, `h3`, `h4`, `h5`, `h6` | `h2` | The final tag rendered. | \ No newline at end of file From ec78e7ca14432d97a441ff0766d60960983b264f Mon Sep 17 00:00:00 2001 From: Daniel Olabemiwo Date: Fri, 7 Jul 2023 09:02:20 +0100 Subject: [PATCH 2/3] refactor: change name casing heading --- content/4.components/heading.md | 48 ++++++++++++++++----------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/content/4.components/heading.md b/content/4.components/heading.md index 4ae29bd..ed03cc3 100644 --- a/content/4.components/heading.md +++ b/content/4.components/heading.md @@ -24,7 +24,7 @@ import { CHeading } from '@chakra-ui/vue-next'; ```html -I'm a Heading +I'm a Heading ``` ### Changing font size @@ -36,26 +36,26 @@ To increase the size of the heading, you can use the `font-size` or `size` prop. :: ```html - - + + In love with Vue & Nuxt - - + + In love with Vue & Nuxt - - + + In love with Vue & Nuxt - - + + In love with Vue & Nuxt - - + + In love with Vue & Nuxt - - + + In love with Vue & Nuxt - - + + ``` ### Truncate heading @@ -67,9 +67,9 @@ Pass the `is-truncated` prop to render an ellipsis when the headings exceed :: ```html - + Basic text writing, including headings, body text, lists, and more. - + ``` ### Override style @@ -87,16 +87,16 @@ You can override the size of the Heading component by passing the `font-size` pr :: ```html - - Modern online and offline payments for Africa - + + Modern online and offline payments for Africa + Paystack helps businesses in Africa get paid by anyone, anywhere in the world - - + + Create a free account - - + + ``` ## Props From 8fa72f209791e7db3ee44657bec840dccbad7f2c Mon Sep 17 00:00:00 2001 From: Daniel Olabemiwo Date: Fri, 14 Jul 2023 14:43:11 +0100 Subject: [PATCH 3/3] refactor: change name casing heading --- .../content/examples/heading/BasicHeading.vue | 8 ++--- .../examples/heading/CompositionHeading.vue | 20 +++++------ .../examples/heading/OverrideHeading.vue | 10 ++---- .../content/examples/heading/SizesHeading.vue | 34 ++++++++----------- .../examples/heading/TruncatedHeading.vue | 10 ++---- 5 files changed, 31 insertions(+), 51 deletions(-) diff --git a/components/content/examples/heading/BasicHeading.vue b/components/content/examples/heading/BasicHeading.vue index c5a0431..fabb364 100644 --- a/components/content/examples/heading/BasicHeading.vue +++ b/components/content/examples/heading/BasicHeading.vue @@ -1,7 +1,3 @@ - - \ No newline at end of file + I'm a Heading + \ No newline at end of file diff --git a/components/content/examples/heading/CompositionHeading.vue b/components/content/examples/heading/CompositionHeading.vue index 8ec621b..3f9422c 100644 --- a/components/content/examples/heading/CompositionHeading.vue +++ b/components/content/examples/heading/CompositionHeading.vue @@ -1,16 +1,12 @@ - - \ No newline at end of file + + + \ No newline at end of file diff --git a/components/content/examples/heading/OverrideHeading.vue b/components/content/examples/heading/OverrideHeading.vue index 6a04aa7..bd906ec 100644 --- a/components/content/examples/heading/OverrideHeading.vue +++ b/components/content/examples/heading/OverrideHeading.vue @@ -1,9 +1,5 @@ - - \ No newline at end of file + + \ No newline at end of file diff --git a/components/content/examples/heading/SizesHeading.vue b/components/content/examples/heading/SizesHeading.vue index 07f2c8d..5027f0b 100644 --- a/components/content/examples/heading/SizesHeading.vue +++ b/components/content/examples/heading/SizesHeading.vue @@ -1,26 +1,22 @@ - - \ No newline at end of file + + + \ No newline at end of file diff --git a/components/content/examples/heading/TruncatedHeading.vue b/components/content/examples/heading/TruncatedHeading.vue index cd140dd..59e1e82 100644 --- a/components/content/examples/heading/TruncatedHeading.vue +++ b/components/content/examples/heading/TruncatedHeading.vue @@ -1,9 +1,5 @@ - - \ No newline at end of file + + \ No newline at end of file