Skip to content

Commit f0c6bfe

Browse files
jd-solankijd-solanki
committed
feat(card)!: prefixed a- to card classes & updated card text font size
1 parent a779c84 commit f0c6bfe

File tree

9 files changed

+35
-31
lines changed

9 files changed

+35
-31
lines changed

‎packages/anu-vue/src/components/card/ACard.tsx

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { defineComponent, reactive, toRef, toRefs } from 'vue'
1+
import { defineComponent, toRef } from 'vue'
22
import { ATypography } from '../typography'
3+
import type { ConfigurableValue } from '@/composables/useConfigurable'
4+
import { useConfigurable } from '@/composables/useConfigurable'
35
import { useLayer, useProps as useLayerProps } from '@/composables/useLayer'
46
import { spacingProp, useSpacing } from '@/composables/useSpacing'
5-
import { extractTypographyProp, isTypographyUsed, useTypographyProps } from '@/composables/useTypography'
7+
import { isTypographyUsed, useTypographyProps } from '@/composables/useTypography'
68

79
export const ACard = defineComponent({
810
name: 'ACard',
@@ -32,34 +34,26 @@ export const ACard = defineComponent({
3234
toRef(props, 'states'),
3335
)
3436

35-
const typographyProps = extractTypographyProp<typeof props>(toRefs(props))
36-
3737
// TODO [v0.2.0]: Find another way to check typography component usage
3838
// TODO: Check => Do we need to pass toRefs(props)
3939
const _isTypographyUsed = isTypographyUsed(props, slots)
4040

4141
// Modify text prop to have `text-sm`
42-
const propText = typographyProps.text?.value
43-
if (propText) {
44-
if (typeof propText === 'string') { typographyProps.text.value = [propText, 'text-sm'] }
45-
else {
46-
const [textContent, textClasses] = propText as string[]
47-
typographyProps.text.value = [textContent, `${textClasses} text-sm`]
48-
}
49-
}
42+
const _textProp = useConfigurable(toRef(props, 'text'))
43+
if (Array.isArray(_textProp.value.classes))
44+
_textProp.value.classes = [..._textProp.value.classes, 'uno-layer-base-text-sm']
45+
else
46+
_textProp.value.classes += ' uno-layer-base-text-sm'
5047

5148
return () => <div style={[...styles.value, { '--a-spacing': spacing.value / 100 }]} class={['a-card overflow-hidden uno-layer-base-bg-[hsl(var(--a-layer))]', ...classes.value]}>
5249
{/* 👉 Image */}
5350
{props.img ? <img src={props.img} alt="card-img"></img> : null}
5451

5552
{/* 👉 Typography */}
56-
{/* TODO: Improve usage of components inside another component */}
5753
{
5854
_isTypographyUsed
59-
60-
// `not-last:pb-4` will set bottom padding to 1 rem instead of 1.5 if card-padding is not last of type
6155
? <div class="a-card-typography-wrapper">
62-
<ATypography {...reactive(typographyProps)}>
56+
<ATypography title={props.title} subtitle={props.subtitle} text={Object.values(_textProp.value) as ConfigurableValue}>
6357
{{ ...slots, default: null }}
6458
</ATypography>
6559
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const ATypography = defineComponent({
3434
{slots.title || props.title || slots.subtitle || props.subtitle || slots.headerRight ? typographyHeader : null}
3535
{
3636
slots.default || props.text
37-
? <props.textTag {...text.value.attrs} class={['em:uno-layer-base-text-base uno-layer-base-text-[hsla(var(--a-typography-text-color),var(--a-typography-text-opacity))]', text.value.classes]}>{slots.default ? slots.default() : text.value.content}</props.textTag>
37+
? <props.textTag {...text.value.attrs} class={['uno-layer-base-text-[hsla(var(--a-typography-text-color),var(--a-typography-text-opacity))]', text.value.classes]}>{slots.default ? slots.default() : text.value.content}</props.textTag>
3838
: null
3939
}
4040
</div>

‎packages/anu-vue/src/presets/theme-default/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,10 @@ const themeShortcuts: Exclude<Preset['shortcuts'], undefined> = [
8686

8787
// 👉 Card
8888
'a-card': 'em:spacing:rounded-lg shadow-lg',
89-
'a-card-typography-wrapper': 'card-padding next:pt-0 em:spacing:not-last:pb-4',
90-
'card-padding': 'em:spacing:p-5',
91-
'card-spacer': 'not-last-children-mb-$a-card-spacer',
92-
'card-body': 'card-padding',
89+
'a-card-typography-wrapper': 'a-card-padding next:pt-0 em:spacing:not-last:pb-4',
90+
'a-card-padding': 'em:spacing:p-5',
91+
'a-card-spacer': 'not-last-children-mb-$a-card-spacer',
92+
'a-card-body': 'a-card-padding',
9393

9494
// 👉 Checkbox
9595
'a-checkbox-box': 'border-solid h-5 w-5 border-(2 a-border rounded) transition duration-200 mr-2',

‎packages/documentation/docs/components/Api.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const propsHeader = Object.keys(props.api.props[0])
1111
title="Props"
1212
class="shadow-none border border-a-border"
1313
>
14-
<div class="card-body">
14+
<div class="a-card-body">
1515
<div
1616
v-for="prop in props.api.props"
1717
:key="prop.name"

‎packages/documentation/docs/demos/card/DemoCardBasic.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@
99

1010
<!-- 👉 Using custom content (without props) -->
1111
<ACard>
12-
<div class="card-body card-spacer">
12+
<div class="a-card-body a-card-spacer">
1313
<ATypography
1414
title="Card title"
1515
subtitle="Chocolate cake tiramisu donut"
1616
/>
17-
<span>Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar.</span>
17+
<p class="text-sm">
18+
Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar.
19+
</p>
1820
</div>
1921
</ACard>
2022
</div>

‎packages/documentation/docs/demos/card/DemoCardVariousElements.vue

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@
1010
alt="girl"
1111
>
1212

13-
<div class="card-body card-spacer">
14-
<p>Macaroon cake powder pie cake cake gingerbread oat cake chocolate cake.</p>
13+
<div class="a-card-body a-card-spacer">
14+
<p class="text-sm">
15+
Macaroon cake powder pie cake cake gingerbread oat cake chocolate cake.
16+
</p>
1517
<ABtn>Read more</ABtn>
1618
</div>
1719
</ACard>
@@ -23,7 +25,7 @@
2325
text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
2426
img="/images/demo/minimal-2.jpg"
2527
>
26-
<div class="card-body">
28+
<div class="a-card-body">
2729
<ABtn>Read more</ABtn>
2830
</div>
2931
</ACard>
@@ -38,7 +40,7 @@
3840
alt="minimal-3"
3941
>
4042
<!-- Information -->
41-
<div class="card-body card-spacer">
43+
<div class="a-card-body a-card-spacer">
4244
<ATypography
4345
title="Awesome mobile"
4446
subtitle="Biscuit liquorice apple pie candy canes"

‎packages/documentation/docs/demos/dialog/DemoDialogPersistent.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const isDialogShown = ref(false)
1212
text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
1313
persistent
1414
>
15-
<div class="card-body">
15+
<div class="a-card-body">
1616
<ABtn
1717
variant="light"
1818
class="text-sm"

‎packages/documentation/docs/demos/drawer/DemoDrawerPersistent.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const isDrawerShown = ref(false)
1212
text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
1313
persistent
1414
>
15-
<div class="card-body">
15+
<div class="a-card-body">
1616
<ABtn
1717
variant="light"
1818
class="text-sm"

‎packages/documentation/docs/guide/components/card.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" setup>
2-
import api from '@anu-vue/component-meta/ACard.json'
2+
import api from '@anu-vue/component-meta/ACard.json';
33
</script>
44

55
# Card
@@ -19,6 +19,12 @@ You can use `.card-spacer` helper class to add margin bottom to each of its chil
1919

2020
::::
2121

22+
:::details Card text font size
23+
If you pass `text` prop directly on `ACard` then `ACard` will add `text-sm` class before passing down it to `ATypography`. Hence, when you don't use `text` prop and manually write text as show in second card, for small text you have to add `text-sm` class.
24+
25+
This way if you want 16px font for your card text instead of 14px you can omit adding `text-sm` to `p` tag;
26+
:::
27+
2228
:::tip
2329
You can customize the applied `margin-bottom` by configuring `--a-card-spacer` CSS variable.
2430
:::

0 commit comments

Comments
 (0)