From 55afe583ae426cc86f944a02ed479d761cc41459 Mon Sep 17 00:00:00 2001
From: JD Solanki
Date: Wed, 4 Jan 2023 16:28:11 +0530
Subject: [PATCH] feat(typography): added `a-title` & `a-subtitle` classes
---
docs/components/Api.vue | 2 +-
.../demos/card/DemoCardVariants.vue | 4 +-
.../typography/DemoTypographyClasses.vue | 8 +++
.../typography/DemoTypographyConfigArray.vue | 4 --
.../demos/typography/DemoTypographySizing.vue | 15 ++----
docs/components/ui/misc/UIMiscComments.vue | 11 +++--
docs/guide/base-components/typography.md | 49 +++++++++++++++++--
docs/ui/misc.md | 1 -
.../src/components/data-table/ADataTable.vue | 7 +--
.../src/components/typography/ATypography.vue | 6 +--
packages/anu-vue/src/composables/useLayer.ts | 8 +--
.../test/__snapshots__/ABtn.test.ts.snap | 12 ++---
.../test/__snapshots__/ATable.test.ts.snap | 18 ++-----
packages/preset-theme-default/src/index.ts | 7 ++-
packages/preset-theme-default/src/rules.ts | 8 +--
.../preset-theme-default/src/scss/index.scss | 10 ++--
.../preset-theme-default/src/shortcuts.ts | 5 +-
17 files changed, 99 insertions(+), 76 deletions(-)
create mode 100644 docs/components/demos/typography/DemoTypographyClasses.vue
diff --git a/docs/components/Api.vue b/docs/components/Api.vue
index 6ca7e4c7..4b323d04 100644
--- a/docs/components/Api.vue
+++ b/docs/components/Api.vue
@@ -18,7 +18,7 @@ const propsHeader = Object.keys(props.api.props[0])
class="not-last-mb-4"
>
{{ prop.name.replace('?', '') }}
: {{ prop.type.replace(/\s*\| (undefined)$/, '') }}
+ >
+ Awesome
+
+
+ Title
+
+
+ Subtitle
+
+
diff --git a/docs/components/demos/typography/DemoTypographyConfigArray.vue b/docs/components/demos/typography/DemoTypographyConfigArray.vue
index ced81151..8d66e2b7 100644
--- a/docs/components/demos/typography/DemoTypographyConfigArray.vue
+++ b/docs/components/demos/typography/DemoTypographyConfigArray.vue
@@ -8,7 +8,6 @@
class="rounded-lg text-[1.25rem]"
/>
@@ -21,7 +20,6 @@
class="rounded-lg text-[1.25rem]"
/>
@@ -35,7 +33,6 @@
class="rounded-lg text-[1.25rem]"
/>
@@ -49,7 +46,6 @@
class="rounded-lg text-[1.25rem]"
/>
diff --git a/docs/components/demos/typography/DemoTypographySizing.vue b/docs/components/demos/typography/DemoTypographySizing.vue
index fedc11a4..f1fe275d 100644
--- a/docs/components/demos/typography/DemoTypographySizing.vue
+++ b/docs/components/demos/typography/DemoTypographySizing.vue
@@ -11,10 +11,7 @@
subtitle="last payment"
class="text-sm"
/>
-
+ +$789
-
+ -$13.6
-
+ 4 minutes ago
diff --git a/docs/components/ui/misc/UIMiscComments.vue b/docs/components/ui/misc/UIMiscComments.vue
index 5ec59cdd..de0863bc 100644
--- a/docs/components/ui/misc/UIMiscComments.vue
+++ b/docs/components/ui/misc/UIMiscComments.vue
@@ -48,7 +48,9 @@ const comments = [
class="text-base"
:src="comment.avatar"
/>
-
+
+ {{ comment.name }}
+
@@ -57,10 +59,9 @@ const comments = [
-
+
+ {{ comment.time }}
+
diff --git a/docs/guide/base-components/typography.md b/docs/guide/base-components/typography.md
index 542f46f0..dc8d1e22 100644
--- a/docs/guide/base-components/typography.md
+++ b/docs/guide/base-components/typography.md
@@ -4,12 +4,23 @@ import api from '@anu/component-meta/ATypography.json';
# Typography
+
+::::card Classes
+
+Anu provides useful classes like `.a-title` & `.a-subtitle` for rendering typography with consistency.
+
+:::code DemoTypographyClasses
+<<< @/components/demos/typography/DemoTypographyClasses.vue
+:::
+
+::::
+
::::card Basic
-`ATypography` provides customizable typography for any needs.
+`ATypography` component provides customizable typography to render title, subtitle & text using single component.
-This will completely change how you work with typography.
+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.
:::code DemoTypographyBasic
<<< @/components/demos/typography/DemoTypographyBasic.vue
@@ -17,6 +28,36 @@ This will completely change how you work with typography.
::::
+:::details `ATypography`'s `text` prop
+`text` prop is for convenience so you don't have to do this:
+
+```vue
+
+
+ This is text
+
+
+```
+
+Instead you can just insert text using `text` prop.
+
+```vue
+
+
+
+
+```
+
+When you use `text` prop of `ATypography` component, it adds class `.a-text` to customize that particular text rendered using `ATypography` component.
+:::
+
::::card Sizing
@@ -25,7 +66,7 @@ Want to create a list with title and subtitle no worries, Just add `text-sm`.
You can use other font-size utilities to change typography size.
:::code DemoTypographySizing
-<<< @/components/demos/typography/DemoTypographySizing.vue{7,12,16,23,28,32,39,44,48}
+<<< @/components/demos/typography/DemoTypographySizing.vue{7,12,14,20,25,27,33,38,40}
:::
::::
@@ -40,7 +81,7 @@ First element of array will be treated as content and rest of them will be class
It greatly improves DX and keep you code a bit DRY.
:::code DemoTypographyConfigArray
-<<< @/components/demos/typography/DemoTypographyConfigArray.vue{12-13,25-26,39-40,53-54}
+<<< @/components/demos/typography/DemoTypographyConfigArray.vue{11-12,23-24,36-37,49-50}
:::
::::
diff --git a/docs/ui/misc.md b/docs/ui/misc.md
index 138f6d7e..5579d0f3 100644
--- a/docs/ui/misc.md
+++ b/docs/ui/misc.md
@@ -3,7 +3,6 @@