diff --git a/.changeset/page-title-card-subtitle-components.md b/.changeset/page-title-card-subtitle-components.md new file mode 100644 index 000000000..cb0543a7a --- /dev/null +++ b/.changeset/page-title-card-subtitle-components.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": minor +--- + +Added a `PageTitle` component and used it with `CardSubtitle` in place of raw `.page-title` and `.card-subtitle` markup. diff --git a/preview/pages/accordion.astro b/preview/pages/accordion.astro index 1810bf951..b126e88fc 100644 --- a/preview/pages/accordion.astro +++ b/preview/pages/accordion.astro @@ -4,15 +4,17 @@ import Accordion from '@ui/Accordion.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import CardSubtitle from '@ui/CardSubtitle.astro' import Icon from '@ui/Icon.astro' import { getDocsUrl } from '@shared/lib/string-format' +import PageTitle from '@ui/PageTitle.astro' const accordionDocsUrl = getDocsUrl('/ui/components/accordion') ---
-

Accordion

+ Accordion Docs @@ -23,7 +25,7 @@ const accordionDocsUrl = getDocsUrl('/ui/components/accordion') Default -
The base accordion — one panel open at a time.
+ The base accordion — one panel open at a time. @@ -32,7 +34,7 @@ const accordionDocsUrl = getDocsUrl('/ui/components/accordion') Flush -
Add flush to remove the card border and rounded corners.
+ Add flush to remove the card border and rounded corners. @@ -41,7 +43,7 @@ const accordionDocsUrl = getDocsUrl('/ui/components/accordion') Tabs -
Add tabs for a tab-like header instead of the default style.
+ Add tabs for a tab-like header instead of the default style. @@ -50,7 +52,7 @@ const accordionDocsUrl = getDocsUrl('/ui/components/accordion') Inverted -
Add inverted to flip the toggle icon to the start of the header.
+ Add inverted to flip the toggle icon to the start of the header. @@ -59,7 +61,7 @@ const accordionDocsUrl = getDocsUrl('/ui/components/accordion') Inverted with plus icon -
Combine inverted with a custom toggleIcon.
+ Combine inverted with a custom toggleIcon. @@ -68,7 +70,7 @@ const accordionDocsUrl = getDocsUrl('/ui/components/accordion') With icons -
Add showIcon to show an icon next to each panel's title.
+ Add showIcon to show an icon next to each panel's title. diff --git a/preview/pages/alerts.astro b/preview/pages/alerts.astro index bb750e8ad..6abd37628 100644 --- a/preview/pages/alerts.astro +++ b/preview/pages/alerts.astro @@ -4,15 +4,17 @@ import Alert from '@ui/Alert.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import CardSubtitle from '@ui/CardSubtitle.astro' import Icon from '@ui/Icon.astro' import { getDocsUrl } from '@shared/lib/string-format' +import PageTitle from '@ui/PageTitle.astro' const alertDocsUrl = getDocsUrl('/ui/components/alert') ---
-

Alerts

+ Alerts Docs @@ -23,7 +25,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert') Basic -
A title and a color are enough to show the status of an action.
+ A title and a color are enough to show the status of an action. @@ -35,7 +37,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert') With action -
Add a link with the action prop to give users something to do next.
+ Add a link with the action prop to give users something to do next. @@ -47,7 +49,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert') Dismissible -
Add showClose to let users close the alert.
+ Add showClose to let users close the alert. @@ -59,7 +61,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert') With a description -
Add a description or a list when the title alone isn't enough context.
+ Add a description or a list when the title alone isn't enough context. @@ -71,7 +73,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert') Important -
Add important for a bolder style that stands out from the rest of the page.
+ Add important for a bolder style that stands out from the rest of the page. @@ -83,7 +85,7 @@ const alertDocsUrl = getDocsUrl('/ui/components/alert') Minor -
Add minor for a quieter style that fits inline with other content.
+ Add minor for a quieter style that fits inline with other content. diff --git a/preview/pages/avatars.astro b/preview/pages/avatars.astro index f2baf84ce..b2cd5a727 100644 --- a/preview/pages/avatars.astro +++ b/preview/pages/avatars.astro @@ -6,10 +6,12 @@ import AvatarList from '@ui/AvatarList.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import CardSubtitle from '@ui/CardSubtitle.astro' import Icon from '@ui/Icon.astro' import people from '@data/people.json' import { site } from '@shared/lib/site' import { firstLetters, getDocsUrl } from '@shared/lib/string-format' +import PageTitle from '@ui/PageTitle.astro' const iconIcons = ['user', 'settings', 'car', 'balloon', 'users', 'users-group', 'apps', 'ghost'] @@ -29,7 +31,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
-

Avatars

+ Avatars Docs @@ -40,7 +42,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar') Default avatar -
The base .avatar element — a placeholder box for a photo, icon, or initials.
+ The base .avatar element — a placeholder box for a photo, icon, or initials. @@ -49,7 +51,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar') Avatar with icon -
Use an icon instead of a photo with the icon prop.
+ Use an icon instead of a photo with the icon prop.
{iconIcons.map((icon) => )}
@@ -60,7 +62,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar') Avatar icon colors -
Combine an icon avatar with any theme color.
+ Combine an icon avatar with any theme color.
{colors.map((color) => )}
@@ -71,7 +73,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar') Simple avatar -
Pass a person object to render their photo.
+ Pass a person object to render their photo.
{people8.map((person) => )}
@@ -82,7 +84,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar') Avatar placeholder -
Fall back to initials with the placeholder prop when there's no photo.
+ Fall back to initials with the placeholder prop when there's no photo.
{people8.map((person) => )}
@@ -93,7 +95,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar') Avatar shapes -
Square by default — add .rounded-circle or .rounded-0 to change the shape.
+ Square by default — add .rounded-circle or .rounded-0 to change the shape.
@@ -106,7 +108,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar') Avatar sizes -
Six sizes from xxs to xl, for both photos and placeholders.
+ Six sizes from xxs to xl, for both photos and placeholders.
@@ -126,7 +128,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar') Avatar lists -
Stack avatars with <AvatarList> to show a group at a glance.
+ Stack avatars with <AvatarList> to show a group at a glance.
{ listSizes.map((size) => ( @@ -158,7 +160,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar') Avatar upload -
An upload control styled as an avatar, for profile photo pickers.
+ An upload control styled as an avatar, for profile photo pickers. {uploadSizes.map((size) => )} @@ -167,7 +169,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar') Avatar statuses -
Add a status dot to show online, away, or busy state.
+ Add a status dot to show online, away, or busy state. {statusColors.map((color, i) => )} @@ -176,7 +178,7 @@ const avatarDocsUrl = getDocsUrl('/ui/components/avatar') Avatar brands -
Show a recognizable brand icon instead of a person.
+ Show a recognizable brand icon instead of a person. {brands.map((brand, i) => )} diff --git a/preview/pages/badges.astro b/preview/pages/badges.astro index e0c528951..0e4e7b377 100644 --- a/preview/pages/badges.astro +++ b/preview/pages/badges.astro @@ -8,9 +8,11 @@ import ButtonList from '@ui/ButtonList.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import CardSubtitle from '@ui/CardSubtitle.astro' import DropdownMenu from '@ui/DropdownMenu.astro' import site from '@data/site.json' import { ucFirst, getDocsUrl } from '@shared/lib/string-format' +import PageTitle from '@ui/PageTitle.astro' const colors = ['default', ...Object.keys(site.colors), 'dark', 'light'] const sizes = ['sm', 'md', 'lg'] @@ -20,7 +22,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge')
-

Badges

+ Badges Docs @@ -31,7 +33,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge') In headings -
A badge scales with the heading level it sits next to.
+ A badge scales with the heading level it sits next to.

Example heading New

Example heading New

Example heading New

@@ -45,7 +47,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge') Sizes -
Three sizes, with an optional icon before or after the label.
+ Three sizes, with an optional icon before or after the label.
{ sizes.map((size) => ( @@ -72,7 +74,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge') Positioned -
Attach a count or a dot to a button with .badge-notification.
+ Attach a count or a dot to a button with .badge-notification. @@ -111,7 +113,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge') In a dropdown -
A badge inside a dropdown item.
+ A badge inside a dropdown item. @@ -120,7 +122,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge') On buttons -
Pair any badge color with a button label.
+ Pair any badge color with a button label. { colors.map((color, index) => ( @@ -137,7 +139,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge') Notification dot -
A pill-shaped counter positioned on the corner of a button.
+ A pill-shaped counter positioned on the corner of a button. { colors.map((color, index) => ( @@ -154,7 +156,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge') Blinking notification -
Add .badge-blink to draw attention to unread activity.
+ Add .badge-blink to draw attention to unread activity. { colors.map((color) => ( @@ -174,7 +176,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge') Basic -
Fill a badge with a theme or extended color.
+ Fill a badge with a theme or extended color. {colors.map((color) => {ucFirst(color)})} @@ -185,7 +187,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge') Light -
A tinted background for a softer, secondary badge.
+ A tinted background for a softer, secondary badge. {colors.map((color) => {ucFirst(color)})} @@ -196,7 +198,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge') Outline -
A colored border with a transparent background.
+ A colored border with a transparent background. {colors.map((color) => {ucFirst(color)})} @@ -207,7 +209,7 @@ const badgeDocsUrl = getDocsUrl('/ui/components/badge') With icons -
Add an icon before the label to reinforce its meaning.
+ Add an icon before the label to reinforce its meaning. { colors.map((color) => ( diff --git a/preview/pages/buttons.astro b/preview/pages/buttons.astro index f1284626d..75d629644 100644 --- a/preview/pages/buttons.astro +++ b/preview/pages/buttons.astro @@ -6,8 +6,10 @@ import ButtonList from '@ui/ButtonList.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import CardSubtitle from '@ui/CardSubtitle.astro' import site from '@data/site.json' import { getDocsUrl } from '@shared/lib/string-format' +import PageTitle from '@ui/PageTitle.astro' type ColorEntry = [string, { title: string; icon?: string }] @@ -25,7 +27,7 @@ const buttonDocsUrl = getDocsUrl('/ui/components/button')
-

Buttons

+ Buttons Docs @@ -36,7 +38,7 @@ const buttonDocsUrl = getDocsUrl('/ui/components/button') Basic -
Add an icon to the left, the right, or drop the label for an icon-only button.
+ Add an icon to the left, the right, or drop the label for an icon-only button.