Skip to content

Commit 55afe58

Browse files
jd-solankijd-solanki
committed
feat(typography): added a-title & a-subtitle classes
1 parent 55a2478 commit 55afe58

File tree

17 files changed

+99
-76
lines changed

17 files changed

+99
-76
lines changed

‎docs/components/Api.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const propsHeader = Object.keys(props.api.props[0])
1818
class="not-last-mb-4"
1919
>
2020
<span
21-
class="font-semibold text-[hsla(var(--a-typography-title-color),var(--a-typography-title-opacity))]"
21+
class="font-semibold text-[hsla(var(--a-title-color),var(--a-title-opacity))]"
2222
>{{ prop.name.replace('?', '') }}</span>
2323
<span class="text-[hsla(var(--a-base-color),var(--a-text-emphasis-light-opacity))]"> : {{ prop.type.replace(/\s*\| (undefined)$/, '') }}</span>
2424
<span

‎docs/components/demos/card/DemoCardVariants.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
variant="light"
1818
color="primary"
1919
class="shadow-none"
20-
/>
20+
>
21+
<p>Awesome</p>
22+
</ACard>
2123

2224
<!-- 👉 Outline -->
2325
<ACard

‎docs/components/demos/typography/DemoTypographyClasses.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<p class="a-title">
3+
Title
4+
</p>
5+
<p class="a-subtitle">
6+
Subtitle
7+
</p>
8+
</template>

‎docs/components/demos/typography/DemoTypographyConfigArray.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
class="rounded-lg text-[1.25rem]"
99
/>
1010
<ATypography
11-
class="!children:leading-tight"
1211
:title="['Sales', 'text-sm font-normal !text-medium-emphasis']"
1312
:subtitle="['2.5k', 'text-xl font-bold !text-high-emphasis']"
1413
/>
@@ -21,7 +20,6 @@
2120
class="rounded-lg text-[1.25rem]"
2221
/>
2322
<ATypography
24-
class="!children:leading-tight"
2523
:title="['Revenue', 'text-sm !text-medium-emphasis font-normal']"
2624
:subtitle="['$816', 'text-xl font-bold !text-high-emphasis']"
2725
/>
@@ -35,7 +33,6 @@
3533
class="rounded-lg text-[1.25rem]"
3634
/>
3735
<ATypography
38-
class="!children:leading-tight"
3936
:title="['Customers', 'text-sm !text-medium-emphasis font-normal']"
4037
:subtitle="['1.5', 'text-xl font-bold !text-high-emphasis']"
4138
/>
@@ -49,7 +46,6 @@
4946
class="rounded-lg text-[1.25rem]"
5047
/>
5148
<ATypography
52-
class="!children:leading-tight"
5349
:title="['Returns', 'text-sm !text-medium-emphasis font-normal']"
5450
:subtitle="['1.5', 'text-xl font-bold !text-high-emphasis']"
5551
/>

‎docs/components/demos/typography/DemoTypographySizing.vue

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@
1111
subtitle="last payment"
1212
class="text-sm"
1313
/>
14-
<ATypography
15-
:text="['+$789', 'text-success']"
16-
class="text-sm font-semibold place-self-end"
17-
/>
14+
<span class="text-success text-sm font-semibold ms-auto">+$789</span>
1815

1916
<!-- 👉 Credit card -->
2017
<AAvatar
@@ -27,10 +24,7 @@
2724
subtitle="ordered books"
2825
class="text-sm"
2926
/>
30-
<ATypography
31-
:text="['-$13.6', 'text-danger']"
32-
class="text-sm font-semibold place-self-end"
33-
/>
27+
<span class="text-danger text-sm font-semibold ms-auto">-$13.6</span>
3428

3529
<!-- 👉 Server storage -->
3630
<AAvatar
@@ -43,9 +37,6 @@
4337
subtitle="90% storage used"
4438
class="text-sm"
4539
/>
46-
<ATypography
47-
:text="['4 minutes ago', 'text-warning']"
48-
class="text-sm font-semibold place-self-end"
49-
/>
40+
<span class="text-warning text-sm font-semibold ms-auto">4 minutes ago</span>
5041
</div>
5142
</template>

‎docs/components/ui/misc/UIMiscComments.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ const comments = [
4848
class="text-base"
4949
:src="comment.avatar"
5050
/>
51-
<ATypography :title="[comment.name, 'text-base']" />
51+
<p class="a-title text-base">
52+
{{ comment.name }}
53+
</p>
5254
</div>
5355

5456
<!-- Comment -->
@@ -57,10 +59,9 @@ const comments = [
5759
</p>
5860

5961
<!-- Comment time -->
60-
<ATypography
61-
class="text-xs mt-1"
62-
:subtitle="comment.time"
63-
/>
62+
<p class="a-subtitle text-xs mt-1">
63+
{{ comment.time }}
64+
</p>
6465
</div>
6566

6667
<ATextarea v-model="input" />

‎docs/guide/base-components/typography.md

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,60 @@ import api from '@anu/component-meta/ATypography.json';
44

55
# Typography
66

7+
<!-- 👉 Classes -->
8+
::::card Classes
9+
10+
Anu provides useful classes like `.a-title` & `.a-subtitle` for rendering typography with consistency.
11+
12+
:::code DemoTypographyClasses
13+
<<< @/components/demos/typography/DemoTypographyClasses.vue
14+
:::
15+
16+
::::
17+
718
<!-- 👉 Basic -->
819
::::card Basic
920

10-
`ATypography` provides customizable typography for any needs.
21+
`ATypography` component provides customizable typography to render title, subtitle & text using single component.
1122

12-
This will completely change how you work with typography.
23+
You might feel like this is useless but this greatly improves DX and boosts component reusability. This will completely change how you work with typography.
1324

1425
:::code DemoTypographyBasic
1526
<<< @/components/demos/typography/DemoTypographyBasic.vue
1627
:::
1728

1829
::::
1930

31+
:::details `ATypography`'s `text` prop
32+
`text` prop is for convenience so you don't have to do this:
33+
34+
```vue
35+
<template>
36+
<ATypography
37+
title="Title"
38+
subtitle="This is subtitle"
39+
>
40+
<p>This is text</p>
41+
</ATypography>
42+
</template>
43+
```
44+
45+
Instead you can just insert text using `text` prop.
46+
47+
```vue
48+
<template>
49+
<ATypography
50+
title="Title"
51+
subtitle="This is subtitle"
52+
text="This is text"
53+
/>
54+
</template>
55+
56+
```
57+
58+
When you use `text` prop of `ATypography` component, it adds class `.a-text` to customize that particular text rendered using `ATypography` component.
59+
:::
60+
2061
<!-- 👉 Sizing -->
2162
::::card Sizing
2263

@@ -25,7 +66,7 @@ Want to create a list with title and subtitle no worries, Just add `text-sm`.
2566
You can use other font-size utilities to change typography size.
2667

2768
:::code DemoTypographySizing
28-
<<< @/components/demos/typography/DemoTypographySizing.vue{7,12,16,23,28,32,39,44,48}
69+
<<< @/components/demos/typography/DemoTypographySizing.vue{7,12,14,20,25,27,33,38,40}
2970
:::
3071

3172
::::
@@ -40,7 +81,7 @@ First element of array will be treated as content and rest of them will be class
4081
It greatly improves DX and keep you code a bit DRY.
4182

4283
:::code DemoTypographyConfigArray
43-
<<< @/components/demos/typography/DemoTypographyConfigArray.vue{12-13,25-26,39-40,53-54}
84+
<<< @/components/demos/typography/DemoTypographyConfigArray.vue{11-12,23-24,36-37,49-50}
4485
:::
4586

4687
::::

‎docs/ui/misc.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<!-- 👉 Comments -->
44
<!--
55
TODO:
6-
- We should create classes like `.a-title` & `.a-subtitle` to easily get styles for `ATypography` element.
76
This will prevent use of component if we just want to render single element.
87
After finishing this task, make sure to add "info" about when to use `ATypography` component and when to use typography classes.
98
- Create new rule `s-\d+` then provide height & width. This is useful if we want fixed height & width of avatar instead of eye bowling it.

‎packages/anu-vue/src/components/data-table/ADataTable.vue

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { defu } from 'defu'
33
import type { ExtractPropTypes, Ref } from 'vue'
44
import type { DataTablePropColumn, ItemsFunction } from './props'
55
import { dataTableColDefaults, dataTableProps } from './props'
6-
import { ABtn, AInput, ASelect, ATable, ATypography } from '@/components'
6+
import { ABtn, AInput, ASelect, ATable } from '@/components'
77
import { tableProps } from '@/components/table'
88
import { useSearch } from '@/composables/useSearch'
99
import type { typeSortBy } from '@/composables/useSort'
@@ -306,10 +306,7 @@ const paginationMeta = computed(() => {
306306
<!-- 👉 Pagination -->
307307
<template #after-table>
308308
<div class="a-data-table-pagination flex items-center w-full">
309-
<ATypography
310-
class="a-data-table-pagination-meta"
311-
:subtitle="paginationMeta"
312-
/>
309+
<span class="a-subtitle a-data-table-pagination-meta">{{ paginationMeta }}</span>
313310
<div class="flex-grow" />
314311
<div class="a-data-table-per-page flex items-center">
315312
<span class="sm:inline hidden">per page</span>

‎packages/anu-vue/src/components/typography/ATypography.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const text = useConfigurable(toRef(props, 'text'))
2626
:is="props.titleTag"
2727
v-if="(Array.isArray(props.title) ? props.title[0] : props.title) || $slots.title"
2828
v-bind="title.attrs"
29-
class="a-typography-title font-medium block em:text-lg text-[hsla(var(--a-typography-title-color),var(--a-typography-title-opacity))]"
29+
class="a-title"
3030
:class="[title.classes]"
3131
>
3232
<slot name="title">
@@ -39,7 +39,7 @@ const text = useConfigurable(toRef(props, 'text'))
3939
:is="props.subtitleTag"
4040
v-if="(Array.isArray(props.subtitle) ? props.subtitle[0] : props.subtitle) || $slots.subtitle"
4141
v-bind="subtitle.attrs"
42-
class="a-typography-subtitle block em:text-sm text-[hsla(var(--a-typography-subtitle-color),var(--a-typography-subtitle-opacity))]"
42+
class="a-subtitle"
4343
:class="[subtitle.classes]"
4444
>
4545
<slot name="subtitle">
@@ -57,7 +57,7 @@ const text = useConfigurable(toRef(props, 'text'))
5757
:is="props.textTag"
5858
v-if="(Array.isArray(props.text) ? props.text[0] : props.text) || $slots.text"
5959
v-bind="text.attrs"
60-
class="a-typography-text text-[hsla(var(--a-typography-text-color),var(--a-typography-text-opacity))]"
60+
class="a-text"
6161
:class="[text.classes]"
6262
>
6363
<slot>

0 commit comments

Comments
 (0)