From 9d1c47449edd2d61ec6539f7839f1532b71e2abe Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Mon, 14 Apr 2025 10:10:54 -0500 Subject: [PATCH] Kj/first pattern launch (#861) * dividing up e-commerce patterns * started invoice table * building out the filter * Initial Commit * switching machines * switching machines * started split image pattern: * commiting to merge in next * commiting to switch machines * upated the product detail patterns * updated product list patterns * updated some patterns * filter work * added utilities to order history * added utilities to order-summary * updated width of container * switching machines * switching machines * fixing conflicts * editing descriptions * updated descriptions * adding some polish * more filter work * updated prouct preview * Revisions to "Product Features" * "Category Filters" revisions + `wa-placeholder` utility * cleaned up product list * tweaked product overview * tweaked order history * tweak category preview * "Checkout Form" revisions * Re-add `navigation` to "Product Features" carousel * cleaned up shopping cart * tweaked order summary * Add missing file extension * Fix typo in file name * Revert checkout form changes in attempt to improve diff * Reimplement checkout form revisions * cleaned up checkout form * Add "What's a Pattern?" and "Using Patterns" to index * Update category descriptions and headings * Add docs layout for patterns with stylesheet * tweaked customer review * Add checkout form example * a little more polish * more tweaks * switching branches to merge * created e-commerce index * unlisted links * updtated content * updated content for category preview * updated order history * committing to bring branches up to next * inital commit * Reorganize app patterns into separate pages * switching machines * Add link style utilities * Refactor product list patterns * more polish * Refactor product overview patterns * switching machines * Refactor shopping cart patterns * committing to pull down changes * updated product preview * updated image * updated incentives * Clean up utility usage and code formatting for category previews * started updating with style utilities * Clean up utilities and formatting, replace placeholder text in order history * updated incentive images * updated reviews * added review variant * more polish * some heavy duty updates * removed store navigation * switching machines : * Clean up utility usage and code formatting for order summaries * Clean up utility usage and code formatting for product previews * big switchover * removed old file * working on sidebar * updated sidebar * created info category * splitting up the old blog page * a little cleanup and adding detail * got three done * updated social share * Quick formatting adjustment * initial paywalls * Use overviews in pattern subcategories (#826) * Do not error if no pages * Automatically set parents and tags for patterns * Update overview.njk * [WIP] Use overview pages for pattern listings * Remove explicit parents --------- Co-authored-by: lindsaym-fa * some newsletter signups * added login patterns * reworked feeds' * a few more * added a few more * add more app patterns * App pattern tweaks (#827) * Fix `patterns.css` reference * Tweaks to action panel patterns * Tweaks to comments patterns * Progress on data display patterns * Progress on empty state patterns * Use email-related data from recent update in `pattern-main` (altered slightly) * Tweaks to data display patterns * Tweaks to empty state patterns * Tweaks to FAQ patterns * Tweaks to feed patterns * Tweaks to grid patterns * Tweaks to pagination patterns * Tweaks to pricing patterns * Tweaks to description list patterns * Tweaks to leaderboard patterns * Add and update names and descriptions * Ensure comments fields have labels * Tweak recent additions * switching machines * catching up with next * added permissions pattern * switching machines * added post articles * having local browset issues * a few more app patterns * took out info patterns * spiffed up the action panels * gave the action panels a once over * added content to data display * updated a few patterns * clean up a few e-commerce patterns * added time componen to reviews --------- Co-authored-by: lindsaym-fa Co-authored-by: Lea Verou Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> --- docs/_includes/svgs/action-panel.njk | 8 + docs/_includes/svgs/preview.njk | 10 + docs/_layouts/patterns.njk | 5 + docs/docs/patterns/app.md | 1047 ----------------- docs/docs/patterns/app/action-panel.md | 69 ++ docs/docs/patterns/app/activity-log.md | 335 ++++++ docs/docs/patterns/app/app.json | 3 + docs/docs/patterns/app/comments.md | 164 +++ docs/docs/patterns/app/data-display.md | 173 +++ docs/docs/patterns/app/description-list.md | 252 ++++ docs/docs/patterns/app/empty-state.md | 206 ++++ docs/docs/patterns/app/faq.md | 118 ++ docs/docs/patterns/app/grid-list.md | 525 +++++++++ docs/docs/patterns/app/index.njk | 8 + docs/docs/patterns/app/leaderboard.md | 265 +++++ docs/docs/patterns/app/pagination.md | 51 + docs/docs/patterns/app/permissions.md | 228 ++++ docs/docs/patterns/app/pricing.md | 167 +++ docs/docs/patterns/blog.md | 1 + docs/docs/patterns/business.md | 1 + .../patterns/ecommerce-category-filter.md | 13 - .../patterns/ecommerce-category-preview.md | 12 - docs/docs/patterns/ecommerce-order-history.md | 14 - docs/docs/patterns/ecommerce-order-summary.md | 13 - .../docs/patterns/ecommerce-product-detail.md | 129 -- docs/docs/patterns/ecommerce-product-list.md | 166 --- .../docs/patterns/ecommerce-product-review.md | 465 -------- docs/docs/patterns/ecommerce-shopping-cart.md | 10 - docs/docs/patterns/ecommerce.md | 1045 ---------------- .../patterns/ecommerce/category-filter.md | 83 ++ .../patterns/ecommerce/category-preview.md | 162 +++ docs/docs/patterns/ecommerce/checkout-form.md | 244 ++++ docs/docs/patterns/ecommerce/ecommerce.json | 3 + docs/docs/patterns/ecommerce/incentives.md | 123 ++ docs/docs/patterns/ecommerce/index.njk | 7 + docs/docs/patterns/ecommerce/order-history.md | 250 ++++ docs/docs/patterns/ecommerce/order-summary.md | 294 +++++ docs/docs/patterns/ecommerce/product-list.md | 182 +++ .../patterns/ecommerce/product-overview.md | 429 +++++++ .../patterns/ecommerce/product-preview.md | 160 +++ docs/docs/patterns/ecommerce/review.md | 211 ++++ docs/docs/patterns/ecommerce/shopping-cart.md | 277 +++++ .../patterns/ecommerce/store-navigation.md | 84 ++ docs/docs/patterns/education.md | 1 + docs/docs/patterns/entertainement.md | 1 + docs/docs/patterns/index.njk | 23 +- docs/docs/patterns/membership.md | 1 + docs/docs/patterns/news.md | 1 + docs/docs/patterns/non-profit.md | 1 + docs/docs/patterns/patterns.css | 7 + docs/docs/patterns/patterns.json | 2 +- docs/docs/patterns/portfolio.md | 1 + docs/docs/patterns/product-landing.md | 1 + src/styles/utilities.css | 1 + src/styles/utilities/placeholder.css | 7 + src/styles/utilities/text.css | 22 + 56 files changed, 5165 insertions(+), 2916 deletions(-) create mode 100644 docs/_includes/svgs/action-panel.njk create mode 100644 docs/_includes/svgs/preview.njk create mode 100644 docs/_layouts/patterns.njk delete mode 100644 docs/docs/patterns/app.md create mode 100644 docs/docs/patterns/app/action-panel.md create mode 100644 docs/docs/patterns/app/activity-log.md create mode 100644 docs/docs/patterns/app/app.json create mode 100644 docs/docs/patterns/app/comments.md create mode 100644 docs/docs/patterns/app/data-display.md create mode 100644 docs/docs/patterns/app/description-list.md create mode 100644 docs/docs/patterns/app/empty-state.md create mode 100644 docs/docs/patterns/app/faq.md create mode 100644 docs/docs/patterns/app/grid-list.md create mode 100644 docs/docs/patterns/app/index.njk create mode 100644 docs/docs/patterns/app/leaderboard.md create mode 100644 docs/docs/patterns/app/pagination.md create mode 100644 docs/docs/patterns/app/permissions.md create mode 100644 docs/docs/patterns/app/pricing.md delete mode 100644 docs/docs/patterns/ecommerce-category-filter.md delete mode 100644 docs/docs/patterns/ecommerce-category-preview.md delete mode 100644 docs/docs/patterns/ecommerce-order-history.md delete mode 100644 docs/docs/patterns/ecommerce-order-summary.md delete mode 100644 docs/docs/patterns/ecommerce-product-detail.md delete mode 100644 docs/docs/patterns/ecommerce-product-list.md delete mode 100644 docs/docs/patterns/ecommerce-product-review.md delete mode 100644 docs/docs/patterns/ecommerce-shopping-cart.md delete mode 100644 docs/docs/patterns/ecommerce.md create mode 100644 docs/docs/patterns/ecommerce/category-filter.md create mode 100644 docs/docs/patterns/ecommerce/category-preview.md create mode 100644 docs/docs/patterns/ecommerce/checkout-form.md create mode 100644 docs/docs/patterns/ecommerce/ecommerce.json create mode 100644 docs/docs/patterns/ecommerce/incentives.md create mode 100644 docs/docs/patterns/ecommerce/index.njk create mode 100644 docs/docs/patterns/ecommerce/order-history.md create mode 100644 docs/docs/patterns/ecommerce/order-summary.md create mode 100644 docs/docs/patterns/ecommerce/product-list.md create mode 100644 docs/docs/patterns/ecommerce/product-overview.md create mode 100644 docs/docs/patterns/ecommerce/product-preview.md create mode 100644 docs/docs/patterns/ecommerce/review.md create mode 100644 docs/docs/patterns/ecommerce/shopping-cart.md create mode 100644 docs/docs/patterns/ecommerce/store-navigation.md create mode 100644 docs/docs/patterns/patterns.css create mode 100644 src/styles/utilities/placeholder.css diff --git a/docs/_includes/svgs/action-panel.njk b/docs/_includes/svgs/action-panel.njk new file mode 100644 index 000000000..514314c31 --- /dev/null +++ b/docs/_includes/svgs/action-panel.njk @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/docs/_includes/svgs/preview.njk b/docs/_includes/svgs/preview.njk new file mode 100644 index 000000000..2ed1a91ed --- /dev/null +++ b/docs/_includes/svgs/preview.njk @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/_layouts/patterns.njk b/docs/_layouts/patterns.njk new file mode 100644 index 000000000..4bd2bd527 --- /dev/null +++ b/docs/_layouts/patterns.njk @@ -0,0 +1,5 @@ +{% extends '../_layouts/block.njk' %} + +{% block head %} + +{% endblock %} \ No newline at end of file diff --git a/docs/docs/patterns/app.md b/docs/docs/patterns/app.md deleted file mode 100644 index 134a280c9..000000000 --- a/docs/docs/patterns/app.md +++ /dev/null @@ -1,1047 +0,0 @@ ---- -title: App -description: TODO ---- - -TODO Page Description - -## Examples - -### Action Plan - -```html {.example} - -

Manage subscription

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae voluptatibus corrupti atque repudiandae nam.

- Change Plan - -``` - -### Feeds - -```html {.example} -
-
- -
- -

Kicked ass and chewed bubblegum

- Oct. 31st -
-
-
- -
- -

Kicked ass and chewed bubblegum

- Oct. 31st -
-
-
- -
- -

Kicked ass and chewed bubblegum

- Oct. 31st -
-
-
- -
- -

Kicked ass and chewed bubblegum

- Oct. 31st -
-
- -
- - -``` - -### Grid - -```html {.example} -
-
    -
  • - -
    -
    - John Carpenter - Admin -

    Master of Horror

    -
    -
    - - -
    -
    -
    -
    - - Email -
    -
    - - - Phone -
    -
    -     -
    • -
  • - -
    -
    - Tobe Hooper - Admin -

    Master of Horror

    -
    -
    - -
    -
    -
    -
    Email
    -
    Phone
    -
    -     -
    • -
  • - -
    -
    - George A. Romero - Admin -

    Master of Horror

    -
    -
    -
    -
    -
    -
    Email
    -
    Phone
    -
    -     -
    • -
  • - -
    -
    - Alfred Hitchcock - Admin -

    Master of Horror

    -
    -
    - -
    -
    - -
    -
    Email
    -
    Phone
    -
    -     -
    • -
  • - -
    -
    - Sam Raimi - Admin -

    Master of Horror

    -
    -
    - -
    -
    -
    -
    Email
    -
    Phone
    -
    -     -
    • -
  • - -
    -
    - Wes Craven - Admin -

    Master of Horror

    -
    -
    - -
    -
    -
    -
    Email
    -
    Phone
    -
    -     -
    • -
-
- -``` - -## Pagination - -### Simple Pagination - -```html {.example} - -
-
- Showing 1 to 10 of 50 Results - - Prev - Next - -
- - -``` -### Multi Page - -```html {.example} - -
-
- Showing 1 to 10 of 50 Results - - - - 1 - 2 - ... - 9 - 10 - - - -
- - -``` - -## Comment Box - -```html{.example} -
- - -
- - - Attach a file -Comment -
- -
- -``` - -## Description List - -```html{.example} -
-
-

Client Information

-

Personal details

-
-
-
-
Beast of Bodmin
-
A large feline inhabiting Bodmin Moor.
-
-
-
Beast of Bodmin
-
A large feline inhabiting Bodmin Moor.
-
-
-
Beast of Bodmin
-
A large feline inhabiting Bodmin Moor.
-
-
-
Beast of Bodmin
-
A large feline inhabiting Bodmin Moor.
-
-
-
- -``` - -## FAQ/Details (WIP) - -```html{.example} -
-
-
-
Beast of Bodmin
-
A large feline inhabiting Bodmin Moor.
-
-
-
-``` - -## Pricing Tiers (WIP) - -```html{.example} -``` - -## Empty States - -### Simple - -```html{.example} -
- -

No Project

-

Get started by one.

- - - New Project - -
- -``` - -### With dashed border - -```html{.example} - -
- -

No DBs

-

Get started by creating a database.

- -
- - -``` -### With starting points - -```html{.example} - -
-

Projects

-

You haven’t created a project yet. Get started by selecting a template or start from an empty project.

-
-
    -
  • -
    -
    - - Create a List - -

    Another to-do system you’ll try but eventually give up on.

    -
    -
    • -
  • -
    -
    - Create a Gallery -

    Another to-do system you’ll try but eventually give up on.

    -
    -
    • -
  • -
    -
    - Create a Spreadsheet -

    Another to-do system you’ll try but eventually give up on.

    -
    -
    • -
  • -
    -
    - Create a Timeline -

    Another to-do system you’ll try but eventually give up on.

    -
    -
    • -
  • -
    -
    - Create a Calendar -

    Another to-do system you’ll try but eventually give up on.

    -
    -
    • -
- - - -``` - -## Data Display - -### With icon - -```html{.example} -
-

Last Week

-
-
- -
-
- -
-

Total Subscribers

-
-
- 71,897 - 122 -
-
- View all -
- - -
-
- -
-

Total Subscribers

-
-
- 71,897 - 122 -
-
- View all -
- -
- - -
- -
- -``` - -### With shared borders -```html{.example} - -
-
-
Total Subscribers
-
-
- 71,897 - from 70,946 -
-
- - 12% - -
-
-
-
-
Total Subscribers
-
-
- 71,897 - from 70,946 -
-
- - 12% - -
-
-
- -
- - -``` - -## Leaderboard (Very rough WIP) -```html{.example} -
-

Collective Activity for Yesterday

- - - - - Items Studied - -
482,813
- - - - - Items Mastered - -
97,303
- - - - - Items Mastered - -
97,303
- - - -
-
- -
- -

Study Leaders

- items mastered last 7 days - -
-
    -
  1. -
    - -
    Title
    - 4,500 -     -
    -
    2. -
  2. -
    - - -
    Title
    - 4,500 -     -
    -
    3. -
  3. -
    - -
    Title
    - 4,500 -     -
    -
    4. -
  4. -
    - -
    Title
    - 4,500 -     -
    -
    5. -
- - -
- -``` - -## Pricing -```html{.example} -
- -
-
Basic Plan
- - $10 - -

per user

-

per month

- - -

Basic features for up to 10 users.

- Get Started - Talk to sales -
-
- Features -

Everything in our free plans plus...

-
    -
  • - - Access to basic features -
    • -
  • - - Basic Reporting and analytics -
    • -
  • - - Up to 10 individual users -
    • -
  • - - 20GB Individual data each user -
    • -
  • - - Basic chat and email support -
    • -
-
- - -
-
Business Plan Most Popular
- - $20 - -

per user

-

per month

- - -

Growing teams up to 20 users.

- Get Started - Talk to sales -
-
- Features -

Everything in Basic plus...

-
    -
  • - - 200+ integrations -
    • -
  • - - Basic Reporting and analytics -
    • -
  • - - Up to 10 individual users -
    • -
  • - - 20GB Individual data each user -
    • -
  • - - Basic chat and email support -
    • -
-
- - -
-
Basic Plan
- - $40 - -

per user

-

per month

- - -

Basic features for up to 10 users.

- Get Started - Talk to sales -
-
- Features -

Everything in our free plans plus...

-
    -
  • - - Access to basic features -
    • -
  • - - Basic Reporting and analytics -
    • -
  • - - Up to 10 individual users -
    • -
  • - - 20GB Individual data each user -
    • -
  • - - Basic chat and email support -
    • -
-
- -
- -``` -```html{.example} -
- -
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - -
- -
-``` -### With templates - -### With recommendations grid diff --git a/docs/docs/patterns/app/action-panel.md b/docs/docs/patterns/app/action-panel.md new file mode 100644 index 000000000..becd5b04e --- /dev/null +++ b/docs/docs/patterns/app/action-panel.md @@ -0,0 +1,69 @@ +--- +title: Action Panel +description: 'Help users complete tasks efficiently with quick access to key actions.' +icon: action-panel +--- + +## Simple + +```html {.example} + + + +``` + +## With Flanked Button + +```html {.example} + + + +``` + +## With Switch + +```html {.example} + + + +``` + +## Avatar and Quick actions + +```html {.example} + + + +``` \ No newline at end of file diff --git a/docs/docs/patterns/app/activity-log.md b/docs/docs/patterns/app/activity-log.md new file mode 100644 index 000000000..b802dff53 --- /dev/null +++ b/docs/docs/patterns/app/activity-log.md @@ -0,0 +1,335 @@ +--- +title: Activity Log +description: 'Track and organize recent user actions or events.' +--- + +## Simple + +```html {.example} + +``` + +## Timeline with Icons + +```html {.example} + +``` + +## With Expandable Details + +```html {.example} + + + + +``` +## Card Separated +```html {.example} + +``` + +## Divider Separated +```html {.example} + + + + +``` \ No newline at end of file diff --git a/docs/docs/patterns/app/app.json b/docs/docs/patterns/app/app.json new file mode 100644 index 000000000..ec69525f8 --- /dev/null +++ b/docs/docs/patterns/app/app.json @@ -0,0 +1,3 @@ +{ + "tags": ["app"] +} diff --git a/docs/docs/patterns/app/comments.md b/docs/docs/patterns/app/comments.md new file mode 100644 index 000000000..d0268690e --- /dev/null +++ b/docs/docs/patterns/app/comments.md @@ -0,0 +1,164 @@ +--- +title: Comments +description: 'Enable users to engage in discussions, provide feedback, or record their thoughts.' +--- + +## Card with Header & Footer + +```html {.example} +
+ +
+ +
+ + + +
+``` + +## Card with Thread + +```html {.example} + + + +``` + +## With Avatar & Additional Actions + +```html {.example} + +``` + +## Rich Card with Multiple Actions + +```html {.example} + +
+ +
+ + + +``` +## With Preview Pane +```html{.example} +
+ + +
+``` \ No newline at end of file diff --git a/docs/docs/patterns/app/data-display.md b/docs/docs/patterns/app/data-display.md new file mode 100644 index 000000000..34cbedf38 --- /dev/null +++ b/docs/docs/patterns/app/data-display.md @@ -0,0 +1,173 @@ +--- +title: Data Display +description: 'Convey insights, metrics, and aggregate data at a glance.' +--- + + +## Simple +```html {.example} + + + +``` + +## Cards with Avatars +```html {.example} + +``` + +## Condensed Card + +```html {.example} + + + + +``` diff --git a/docs/docs/patterns/app/description-list.md b/docs/docs/patterns/app/description-list.md new file mode 100644 index 000000000..f98b24c62 --- /dev/null +++ b/docs/docs/patterns/app/description-list.md @@ -0,0 +1,252 @@ +--- +title: Description List +description: 'Help users digest detailed information in a structured, easy-to-scan format.' +--- + +## Left Aligned + +```html {.example} + +``` + +## Two Column + +```html{.example} + +``` + +## Left Aligned with Actions + +```html {.example} + +``` + +## Condensed + +```html{.example} + + + + +``` diff --git a/docs/docs/patterns/app/empty-state.md b/docs/docs/patterns/app/empty-state.md new file mode 100644 index 000000000..241b40f04 --- /dev/null +++ b/docs/docs/patterns/app/empty-state.md @@ -0,0 +1,206 @@ +--- +title: Empty State +description: 'Guide users with helpful prompts and visuals when no content is available.' +--- + +## Simple + +```html {.example} + +``` + +## With Interactive Placeholder + +```html {.example} + +``` + +## With Templates + +```html {.example} + + + + + +``` +## Add people +```html {.example} + + + +``` \ No newline at end of file diff --git a/docs/docs/patterns/app/faq.md b/docs/docs/patterns/app/faq.md new file mode 100644 index 000000000..7d80d1067 --- /dev/null +++ b/docs/docs/patterns/app/faq.md @@ -0,0 +1,118 @@ +--- +title: FAQ +description: 'Empower users to learn more with a structured list of questions and answers.' +--- + +## With Flanked Heading & Description + +```html {.example} + +``` + +## With Expandable Answers + +```html {.example} + +``` + +## Two Column + +```html {.example} + +``` + +## Multiple Columns +```html{.example} +
+ +

Frequently Asked Questions

+ + + +
+``` diff --git a/docs/docs/patterns/app/grid-list.md b/docs/docs/patterns/app/grid-list.md new file mode 100644 index 000000000..c50441786 --- /dev/null +++ b/docs/docs/patterns/app/grid-list.md @@ -0,0 +1,525 @@ +--- +title: Grid List +description: 'Improve browsing and selection by organizing data in a structured grid layout.' +--- + +## Cards with Footer Actions + +```html {.example} + +``` + +## Cards with Footer Actions & Large Image + +```html {.example} + +``` +## with Images +```html {.example} + +``` +## Linked Cards with Options Menu + +```html{.example} + +``` +## Kanban +```html {.example} +
+

Project #487

+ +
+``` + diff --git a/docs/docs/patterns/app/index.njk b/docs/docs/patterns/app/index.njk new file mode 100644 index 000000000..2bea0367f --- /dev/null +++ b/docs/docs/patterns/app/index.njk @@ -0,0 +1,8 @@ +--- +title: App +description: Pre-built action panels, data displays, and more ready to drop into your web app. +parent: patterns +layout: overview +override:tags: [] +listChildren: true +--- diff --git a/docs/docs/patterns/app/leaderboard.md b/docs/docs/patterns/app/leaderboard.md new file mode 100644 index 000000000..93ae62148 --- /dev/null +++ b/docs/docs/patterns/app/leaderboard.md @@ -0,0 +1,265 @@ +--- +title: Leaderboard +description: 'Engage and motivate users by highlighting top performers, scores, and achievements.' +--- + +## Simple + +```html {.example} + +``` + +## Two Column + +```html {.example} + +``` \ No newline at end of file diff --git a/docs/docs/patterns/app/pagination.md b/docs/docs/patterns/app/pagination.md new file mode 100644 index 000000000..4959485df --- /dev/null +++ b/docs/docs/patterns/app/pagination.md @@ -0,0 +1,51 @@ +--- +title: Pagination +description: 'Improve navigation and performance by breaking long lists or content into manageable pages.' +--- + +## Simple + +```html {.example} + +``` + +## With Button Group + +```html {.example} + +``` \ No newline at end of file diff --git a/docs/docs/patterns/app/permissions.md b/docs/docs/patterns/app/permissions.md new file mode 100644 index 000000000..7e348d396 --- /dev/null +++ b/docs/docs/patterns/app/permissions.md @@ -0,0 +1,228 @@ +--- +title: Permissions +description: 'Permission patterns provide or restrict access to users.' +--- + +## With Form Inputs +```html{.example} + + + + +``` + +## Link Settings +```html {.example} + + + + +``` + +## Role Settings +```html {.example} +
+

Settings

+

Update settings for this server.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameRole
+ + + + Moderator + Contributor + Reader + +
+ + + + Moderator + Contributor + Reader + +
+ + + + Moderator + Contributor + Reader + +
+ + + + Moderator + Contributor + Reader + +
+ + + +
+``` \ No newline at end of file diff --git a/docs/docs/patterns/app/pricing.md b/docs/docs/patterns/app/pricing.md new file mode 100644 index 000000000..86b911bc3 --- /dev/null +++ b/docs/docs/patterns/app/pricing.md @@ -0,0 +1,167 @@ +--- +title: Pricing +description: 'Help users make informed purchasing decisions with clear, structured pricing.' +--- + +## Three Tiers + +```html{.example} + +``` + +## Single Tier + +```html {.example} + + + +``` diff --git a/docs/docs/patterns/blog.md b/docs/docs/patterns/blog.md index dc8aea12e..2ce8c4265 100644 --- a/docs/docs/patterns/blog.md +++ b/docs/docs/patterns/blog.md @@ -1,6 +1,7 @@ --- title: Blog description: TODO +unlisted: true --- TODO Page Description diff --git a/docs/docs/patterns/business.md b/docs/docs/patterns/business.md index 6880e58c9..405d0e4f2 100644 --- a/docs/docs/patterns/business.md +++ b/docs/docs/patterns/business.md @@ -1,6 +1,7 @@ --- title: Business description: TODO +unlisted: true --- TODO Page Description diff --git a/docs/docs/patterns/ecommerce-category-filter.md b/docs/docs/patterns/ecommerce-category-filter.md deleted file mode 100644 index 74f02debc..000000000 --- a/docs/docs/patterns/ecommerce-category-filter.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Category Filter -description: TODO -parent: ecommerce -tags: e-commerce ---- - -TODO Page Description - -## With inline actions and expandable sidebar filters -```html{.example} - -``` diff --git a/docs/docs/patterns/ecommerce-category-preview.md b/docs/docs/patterns/ecommerce-category-preview.md deleted file mode 100644 index 14984beb3..000000000 --- a/docs/docs/patterns/ecommerce-category-preview.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Category Preview -description: TODO -parent: ecommerce -tags: e-commerce ---- - -TODO Page Description - -## Three Column (WIP) - -``` diff --git a/docs/docs/patterns/ecommerce-order-history.md b/docs/docs/patterns/ecommerce-order-history.md deleted file mode 100644 index cc77c5492..000000000 --- a/docs/docs/patterns/ecommerce-order-history.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Order History -description: TODO -parent: ecommerce -tags: e-commerce ---- - -TODO Page Description - -## Invoice panels - -```html{.example} - -``` diff --git a/docs/docs/patterns/ecommerce-order-summary.md b/docs/docs/patterns/ecommerce-order-summary.md deleted file mode 100644 index bcdd38245..000000000 --- a/docs/docs/patterns/ecommerce-order-summary.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Product List -description: TODO -parent: ecommerce -tags: e-commerce ---- - -TODO Page Description - -## With split image -```html{.example} - -``` diff --git a/docs/docs/patterns/ecommerce-product-detail.md b/docs/docs/patterns/ecommerce-product-detail.md deleted file mode 100644 index 7d54115df..000000000 --- a/docs/docs/patterns/ecommerce-product-detail.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Product Detail -description: TODO -parent: ecommerce -tags: e-commerce ---- - -TODO Page Description - -## With color and size selector -```html{.example} -
- -
- Graphic Tank - -
-
- -
- $32 - 36 Reviews - - Black - White - Gray - - - Option 1 - Option 2 - Option 3 - -Medium -
-
- -
- -``` - -## with large selector -```html{.example} - -
-
- -
-
-

Basic Tank

- -
-

$32

-
-

3.9

- - See all 512 Reviews -
-
-
-
- - Black - Gray - - - S - M - L - XL - - Medium - View full details -
-
-
-
- - -``` diff --git a/docs/docs/patterns/ecommerce-product-list.md b/docs/docs/patterns/ecommerce-product-list.md deleted file mode 100644 index 89b3e11f0..000000000 --- a/docs/docs/patterns/ecommerce-product-list.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Product Lists -description: TODO -parent: ecommerce -tags: e-commerce ---- - -TODO Page Description -## With Product Grid - -```html{.example} -
-
- -
Shirt
- - 38 Reviews -
$170
-
-
- -
Shirt
- - 38 Reviews -
$170
-
-
- -
Shirt
- - 38 Reviews -
$170
-
-
- -
Shirt
- - 38 Reviews -
$170
-
-
- -``` -## Card with full details -```html{.example} -
- - -
- Basic Tee 8-pack -

Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.

- 8 colors - $256 -
- - - -
- Basic Tee 8-pack -

Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.

- 8 colors - $256 -
- - - -
- Basic Tee 8-pack -

Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.

- 8 colors - $256 -
- - - -
- Basic Tee 8-pack -

Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.

- 8 colors - $256 -
- -
- -``` -## With color swatches (WIP) -```html{.example} - -``` diff --git a/docs/docs/patterns/ecommerce-product-review.md b/docs/docs/patterns/ecommerce-product-review.md deleted file mode 100644 index 3cbef3640..000000000 --- a/docs/docs/patterns/ecommerce-product-review.md +++ /dev/null @@ -1,465 +0,0 @@ ---- -title: Product Reviews -description: TODO -parent: ecommerce -tags: e-commerce ---- - -TODO Page Description - -## With images grid -```html{.example} -
- - Clothing - Men's - Shirts & Tops - -
- - - - -
-
-

Tank top

-

The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.

-

Highlights

-
    -
  • Hand cut and sewn locally
    • -
- -

Highlights

-

The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming "Charcoal Gray" limited release.

- - $192 -
- - 117 Reviews -
- - Option 1 - Option 2 - Option 3 - - - Option 1 - Option 2 - Option 3 - - Add to Cart -
-
- -``` - -## With Tiered Images - -```html{.example} -
- - Clothing - Men's - Shirts & Tops - -
-
-

Basic Tee

- $35 -
-
- 3.9 - - 117 Reviews -
-
- - - -
-
- - Option 1 - Option 2 - Option 3 - - - Option 1 - Option 2 - Option 3 - - Add to Cart -

Description

-

The Basic tee is an honest new take on a classic. The tee uses super soft, pre-shrunk cotton for true comfort and a dependable fit. They are hand cut and sewn locally, with a special dye technique that gives each tee it's own look.

-

Looking to stock your closet? The Basic tee also comes in a 3-pack or 5-pack at a bundle discount.

-
-

Highlights

-
    -
  • Hand cut and sewn locally
    • -
-
- - -

International delivery

-

Get your order in 2 years

- - - -

International delivery

-

Get your order in 2 years

- - -
-
- -``` -## with images and expandable details - -```html {.example} - - - The sun shines on the mountains and trees (by Adam Kool on Unsplash) - - - A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) - - - The sun is setting over a lavender field (by Leonard Cotte on Unsplash) - - - A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) - - - A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) - - - -
-
- Thumbnail by 1 - Thumbnail by 2 - Thumbnail by 3 - Thumbnail by 4 - Thumbnail by 5 -
-
-
-

Pullover Sweater

- $140 - -

The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.

- - - - - -
- Add to cart - -
-
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - -
-
- - - - -``` - -## Split with image - -```html {.example} -
-
- - Clothing - Men's - Shirts & Tops - -

Everyday Ruck Snack

- - $220 | - - 1624 reviews - -

Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.

- In stock and ready to ship - - -
-
- -
-
- - Option 1 - Option 2 - Option 3 - -
-
- -``` -## With tabs - -```html{.example} -
- -

Application UI Icon Pack

- Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles. -

The Application UI Icon Pack comes with over 200 icons in 3 styles: outline, filled, and branded. This playful icon pack is tailored for complex application user interfaces with a friendly and legible look.

- Brand - -Success -
-

Highlights

-
    -
  • 200+ SVG icons in 3 unique styles
    • -
  • Compatible with Figma, Sketch, and Adobe XD
    • -
  • Drawn on 24 x 24 pixel grid
    • -
-
-

License

-

For personal and professional use. You cannot resell or redistribute these icons in their original or modified state. Read full license

-
-

Share

- - - - - - - General - Custom - Advanced - Disabled - - -
-
-

Hector Gibbons

-

July 12, 2021

- -

Blown away by how polished this icon pack is. Everything looks so consistent and each SVG is optimized out of the box so I can use it directly with confidence. It would take me several hours to create a single icon this good, so it's a steal at this price.

-
- - This is the custom tab panel. - This is the advanced tab panel. - This is a disabled tab panel. - - -
- -``` diff --git a/docs/docs/patterns/ecommerce-shopping-cart.md b/docs/docs/patterns/ecommerce-shopping-cart.md deleted file mode 100644 index 11242e867..000000000 --- a/docs/docs/patterns/ecommerce-shopping-cart.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Shopping Cart -description: TODO -parent: ecommerce -tags: e-commerce ---- - -TODO Page Description - -## Examples diff --git a/docs/docs/patterns/ecommerce.md b/docs/docs/patterns/ecommerce.md deleted file mode 100644 index b6bb134a0..000000000 --- a/docs/docs/patterns/ecommerce.md +++ /dev/null @@ -1,1045 +0,0 @@ ---- -title: E-commerce -description: TODO -layout: page -tags: e-commerce ---- - -TODO Page Description - -## Examples - -## Coupon - -```html{.example} - -
- -
- help us start you off on the right foot. -

Get 15% Off...*

-

...your first online order when you signup for emails.

- -
What would you link like people to call you?
- - Email me discount -

*The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

-
-
- - -Open Dialog - - - - -``` - -## Mega Menu - -```html{.example} - - Shop - -
- Shop by Department - Mens - Womens - Kids - - Infants - - Newborns - 6 Months - 12 Months - - - Big & Tall -
-
- Shop by Category - Shirts - Pants - Shoes -
- -
- Just Arrived - - - - - - - - - - - -
- - - -
-

footer with something cool in it

- Signup now -
- - - - - - - - -``` -### Slide Over - -```html {.example} - -
- Shopping Cart - -
-
- -
-
- AJ1 - $170.00 -
-
Off-white Jordan One
-
- Qty: 1 - Remove -
-
-
-
- -
-
- The Trails - $35.00 -
-
50/50 Cotton Poly Blend
-
- Qty: 1 - Remove -
-
-
-
- -
-
- Outcast - $27.00 -
-
100% Cotton
-
- Qty: 1 - Remove -
-
-
- -
-
- Subtotal - $232.00 -
-
Shipping and taxes calculated at checkout.
- Medium - or Continue shopping -
- - - - -``` - -### Two Column Cart - -```html {.example} -
-

Shopping Cart

-
-
- -
-
-
- Classic -
White - L
- $15.00 -
- - - 1 - 2 - 3 - - - -
-
- In Stock -
- -
-
-
- -
-
-
- Button Up -
Blue - L
- $20.00 -
- - - 1 - 2 - 3 - - - -
-
- In Stock -
- -
-
-
- -
-
-
- Kitten -
Egg - L
- $20.00 -
- - - 1 - 2 - 3 - - - -
-
- In Stock -
- -
-
- - -
- -
- Order Summary - -
-
- Subtotal - $55.00 -
-
- Shipping - $5.00 -
-
- Tax - $5.50 -
-
- Order Total - $65.50 -
- - Checkout - - - - - - - -
-``` - -### Single Column Cart - -```html {.example} -
-

Shopping Cart

-
-
- -
- - Convertible - $32.00 - -
Eggplant
- -
- In Stock - Remove -
-
- - -
-
- -
- - Pickup - $32.00 - -
Sky Blue
- -
- In Stock - Remove -
-
- - -
-
- -
- - Volkswagon T2 - $32.00 - -
Red/White
- -
- In Stock - Remove -
-
- - -
-
-
- Subtotal - $96.00 -
-
Shipping and taxes calculated at checkout.
- Medium - or Continue shopping -
- -
-
- -``` - - - -### With Carousel - -```html {.example} - - - The sun shines on the mountains and trees (by Adam Kool on Unsplash) - - - A waterfall in the middle of a forest (by Thomas Kelly on Unsplash) - - - The sun is setting over a lavender field (by Leonard Cotte on Unsplash) - - - A field of grass with the sun setting in the background (by Sapan Patel on Unsplash) - - - A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash) - - - -
-
- Thumbnail by 1 - Thumbnail by 2 - Thumbnail by 3 - Thumbnail by 4 - Thumbnail by 5 -
-
-
-

Pullover Sweater

- $140 - -

The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.

- - Black - - White - Gray - -
- Add to cart - -
-
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - -
-
- - - - - -``` - -### Product Review - -```html {.example} -
-
-

Customer Reviews

-
- Based on 1624 reviews -
-
- -

Share your Thoughts

-

If you’ve used this product, share your thoughts with other customers

- Write a Review -
-
-
-
-
- - - Mark Henry - -

I initially had my doubts, but once I got the widgets and played around with them, I became a believer.

-
-
- - - Liz Michaels - -

I'd definitely but these again.

-
-
- - - Todd Smith - -

It was everything I wanted and more, would totally recommend.

-
-
-
-
- - -``` - -### Order History - -```html {.example} -
-

Order History

-

Check the status of recent orders, manage returns, and download invoices.

-
- - Order number - WU88191111 - - - Date placed - January 22, 2021 - - - Total amount - $95.00 - - - View Order - View Invoice - -
-
-
- -
- - Kitchen Stool - $55.00 - -

TODO: add a description

- - View Product | Buy Again - -
- Out for Delivery -
-
-
- -
- - Succulent - $5.00 - -

TODO: add a description

- - View Product | Buy Again - -
- Out for Delivery -
-
-
- -
- - French Roast - $35.00 - -

TODO: add a description

- - View Product | Buy Again - -
- Out for Delivery -
-
-
-
- -``` - -### Checkout - -```html {.example} -
-
-

Contact Info

- -
-

Shipping Information

- - - - - - - Option 1 - Option 2 - Option 3 - - - - -
- - Standard - Express - -
-

Payment

- - Credit Card - Paypal - - - - - -
-
-

Order Summary

- -
- -
- - Dolce Runners - - - Cream/Seafoam -
- 12.5 - - $0.00 - - 1 - 2 - 3 - - -
-
-
-
- -
- - Dunk High - - - Sand/Amber/Black -
- 12.5 - - $180.00 - - 1 - 2 - 3 - - -
-
-
-
- -
- - NB Runner - - - Forrest Green -
- 12.5 - - $48.99 - - 1 - 2 - 3 - - -
-
-
- Confirm Order - -
-
- - -``` diff --git a/docs/docs/patterns/ecommerce/category-filter.md b/docs/docs/patterns/ecommerce/category-filter.md new file mode 100644 index 000000000..081450020 --- /dev/null +++ b/docs/docs/patterns/ecommerce/category-filter.md @@ -0,0 +1,83 @@ +--- +title: Category Filter +description: 'Helps the user find the right products with filters to refine search results by specific attributes.' +icon: checkbox +--- + +## Sidebar with Checkboxes & Expandable Filters + +```html{.example} +

New Arrivals

+ + +``` + +## Sidebar with Dropdowns + +```html{.example} +

New Arrivals

+ +``` diff --git a/docs/docs/patterns/ecommerce/category-preview.md b/docs/docs/patterns/ecommerce/category-preview.md new file mode 100644 index 000000000..9efeb7cb5 --- /dev/null +++ b/docs/docs/patterns/ecommerce/category-preview.md @@ -0,0 +1,162 @@ +--- +title: Category Preview +description: 'Help shoppers discover your product offerings with showcases of product categories.' +icon: preview +--- + +## Split with Image Grid + +```html {.example} + +``` + +## Columns with Tall Images + +```html {.example} + +``` + +## Columns with Cards + +```html {.example} + +``` + +## Square Image Grid + +```html {.example} + +``` diff --git a/docs/docs/patterns/ecommerce/checkout-form.md b/docs/docs/patterns/ecommerce/checkout-form.md new file mode 100644 index 000000000..4e9e736f2 --- /dev/null +++ b/docs/docs/patterns/ecommerce/checkout-form.md @@ -0,0 +1,244 @@ +--- +title: Checkout Form +description: 'Let shoppers checkout with ease with streamlined forms to capture shipping and payment info.' +--- + + +## Full Form with Order Summary Card + +```html {.example} + +``` + +## Short Form with Order Summary + +```html {.example} + +``` diff --git a/docs/docs/patterns/ecommerce/ecommerce.json b/docs/docs/patterns/ecommerce/ecommerce.json new file mode 100644 index 000000000..be5dbdf49 --- /dev/null +++ b/docs/docs/patterns/ecommerce/ecommerce.json @@ -0,0 +1,3 @@ +{ + "tags": ["ecommerce"] +} diff --git a/docs/docs/patterns/ecommerce/incentives.md b/docs/docs/patterns/ecommerce/incentives.md new file mode 100644 index 000000000..18b603358 --- /dev/null +++ b/docs/docs/patterns/ecommerce/incentives.md @@ -0,0 +1,123 @@ +--- +title: Incentives +description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.' +--- + +## 3 Column + +```html{.example} + +``` +## 2 Column with Cards + +```html{.example} + +``` + +## 4 Column + +```html{.example} +
+ +
+``` diff --git a/docs/docs/patterns/ecommerce/index.njk b/docs/docs/patterns/ecommerce/index.njk new file mode 100644 index 000000000..1e93a34e3 --- /dev/null +++ b/docs/docs/patterns/ecommerce/index.njk @@ -0,0 +1,7 @@ +--- +title: Ecommerce +description: Pre-built product overviews, shopping carts, and more to help you build high-converting storefronts. +parent: patterns +layout: overview +override:tags: [] +--- diff --git a/docs/docs/patterns/ecommerce/order-history.md b/docs/docs/patterns/ecommerce/order-history.md new file mode 100644 index 000000000..1a5055fb9 --- /dev/null +++ b/docs/docs/patterns/ecommerce/order-history.md @@ -0,0 +1,250 @@ +--- +title: Order History +description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.' +--- + +## List + +```html {.example} + +``` + +## Invoice Table + +```html {.example} + +``` +## Card separated +```html{.example} + +``` \ No newline at end of file diff --git a/docs/docs/patterns/ecommerce/order-summary.md b/docs/docs/patterns/ecommerce/order-summary.md new file mode 100644 index 000000000..566e1ca31 --- /dev/null +++ b/docs/docs/patterns/ecommerce/order-summary.md @@ -0,0 +1,294 @@ +--- +title: Order Summary +description: 'Give shoppers confidence in their purchases with summaries of everything included in their order.' +--- + +## Simple +```html {.example} + +``` + +## With Details + +```html {.example} + +``` + +## With Status & Description + +```html {.example} + +``` diff --git a/docs/docs/patterns/ecommerce/product-list.md b/docs/docs/patterns/ecommerce/product-list.md new file mode 100644 index 000000000..570b01f6b --- /dev/null +++ b/docs/docs/patterns/ecommerce/product-list.md @@ -0,0 +1,182 @@ +--- +title: Product Lists +description: 'Let shoppers browse and compare products with detailed lists of the products in your store.' +--- + +## Simple Grid with Ratings + +```html {.example} + +``` + +## Even Card Grid with Details + +```html {.example} + +``` diff --git a/docs/docs/patterns/ecommerce/product-overview.md b/docs/docs/patterns/ecommerce/product-overview.md new file mode 100644 index 000000000..8d803da92 --- /dev/null +++ b/docs/docs/patterns/ecommerce/product-overview.md @@ -0,0 +1,429 @@ +--- +title: Product Overview +description: 'Showcase your products with overviews including images, ratings, features, options, and more.' +--- + +## Split with Image + +```html {.example} + +``` + +## With Image Grid + +```html {.example} + +``` + +## With Tiered Images + +```html {.example} + +``` + +## With Carousel and Collapsible Details + +```html {.example} + +``` + + +## With Tabs + +```html {.example} + +``` diff --git a/docs/docs/patterns/ecommerce/product-preview.md b/docs/docs/patterns/ecommerce/product-preview.md new file mode 100644 index 000000000..55e62233e --- /dev/null +++ b/docs/docs/patterns/ecommerce/product-preview.md @@ -0,0 +1,160 @@ +--- +title: Product Preview +description: 'Give shoppers a quick look at your products as they browse with modal previews.' +icon: preview +--- + +## With Product Options + +```html {.example} + + + + +``` + +## With Description & Details + +```html{.example} + + + + +``` diff --git a/docs/docs/patterns/ecommerce/review.md b/docs/docs/patterns/ecommerce/review.md new file mode 100644 index 000000000..bb4c1e03e --- /dev/null +++ b/docs/docs/patterns/ecommerce/review.md @@ -0,0 +1,211 @@ +--- +title: Product Reviews +description: 'Help shoppers make informed decisions with ratings, reviews, and testimonials from your customers.' +--- +## Multi column + +```html{.example} +
+ + + + + + + + + +
+``` +## With Ratings Distribution + +```html {.example} +
+ +
+``` + +## Two Column + +```html{.example} + +``` diff --git a/docs/docs/patterns/ecommerce/shopping-cart.md b/docs/docs/patterns/ecommerce/shopping-cart.md new file mode 100644 index 000000000..61ccfb182 --- /dev/null +++ b/docs/docs/patterns/ecommerce/shopping-cart.md @@ -0,0 +1,277 @@ +--- +title: Shopping Cart +description: 'Give shoppers an overview of selected items with shopping carts that let them edit items and proceed to checkout.' +--- + +## Two Columns with Summary Card + +```html {.example} + + +``` + +## Single Column + +```html {.example} + +``` + +## Drawer + +```html {.example viewport} + + + + +``` diff --git a/docs/docs/patterns/ecommerce/store-navigation.md b/docs/docs/patterns/ecommerce/store-navigation.md new file mode 100644 index 000000000..4a9c32503 --- /dev/null +++ b/docs/docs/patterns/ecommerce/store-navigation.md @@ -0,0 +1,84 @@ +--- +title: Store Navigation +description: 'Help shoppers explore categories and find products with all of the links they need to navigate your store.' +unlisted: true +--- + +## Popup Menu + +```html{.example} + + Shop + +
+ Shop by Department + Mens + Womens + Kids + + Infants + + Newborns + 6 Months + 12 Months + + + Big & Tall +
+
+ Shop by Category + Shirts + Pants + Shoes +
+ +
+ Just Arrived + + + + + + + + + + + +
+ + + +
+

footer with something cool in it

+ Signup now +
+ + + + + + + + +``` diff --git a/docs/docs/patterns/education.md b/docs/docs/patterns/education.md index 6880e58c9..405d0e4f2 100644 --- a/docs/docs/patterns/education.md +++ b/docs/docs/patterns/education.md @@ -1,6 +1,7 @@ --- title: Business description: TODO +unlisted: true --- TODO Page Description diff --git a/docs/docs/patterns/entertainement.md b/docs/docs/patterns/entertainement.md index a7e2c23af..0c501426f 100644 --- a/docs/docs/patterns/entertainement.md +++ b/docs/docs/patterns/entertainement.md @@ -1,6 +1,7 @@ --- title: Entertainment description: TODO +unlisted: true --- TODO Page Description diff --git a/docs/docs/patterns/index.njk b/docs/docs/patterns/index.njk index e51a1f6ce..ec87fb460 100644 --- a/docs/docs/patterns/index.njk +++ b/docs/docs/patterns/index.njk @@ -1,6 +1,27 @@ --- title: Patterns -description: Patterns are reusable solutions to common design problems. +description: Patterns are reusable UI solutions to common design problems, ready to copy and paste into any project. layout: overview override:tags: [] --- + +
+{% markdown %} + +## What's a Pattern? + +A pattern is a code snippet composed of components, style utilities, and native HTML that you can copy and paste into any project that uses Web Awesome. +It's a chunk of a user interface, rather than a single component, that allows you to implement UI solutions without designing something from scratch. + +Patterns are designed according to proven usability practices so they're responsive, accessible, and cohesive out-of-the-box. Importantly, patterns don't handle business logic or functionality like form submissions, data processing, encryption, etc. It's up to you to implement the logic you need for your project. + +Patterns are written as standard HTML, so you can use them just as you would any ol' HTML and customize them to fit your specific needs. + +## Using Patterns + +To use a pattern in your project, refer to each pattern's docs for a copyable code snippet. Paste the snippet wherever you'd like the pattern to appear in your project. + +Because patterns use a combination of Web Awesome features, they work best when you have [native styles](/docs/native), [style utilities](/docs/utilities), and a [theme](/docs/themes) installed in addition to Web Awesome [components](/docs/components). Refer to the [Installation page](/docs/installation) to set up all of these features in your project. + +{% endmarkdown %} +
diff --git a/docs/docs/patterns/membership.md b/docs/docs/patterns/membership.md index 93aeec6fd..00e2eee94 100644 --- a/docs/docs/patterns/membership.md +++ b/docs/docs/patterns/membership.md @@ -1,6 +1,7 @@ --- title: Membership description: TODO +unlisted: true --- TODO Page Description diff --git a/docs/docs/patterns/news.md b/docs/docs/patterns/news.md index 39ab6b1a4..4fe02cf80 100644 --- a/docs/docs/patterns/news.md +++ b/docs/docs/patterns/news.md @@ -1,6 +1,7 @@ --- title: News description: TODO +unlisted: true --- TODO Page Description diff --git a/docs/docs/patterns/non-profit.md b/docs/docs/patterns/non-profit.md index 2d9978bc5..e166c0929 100644 --- a/docs/docs/patterns/non-profit.md +++ b/docs/docs/patterns/non-profit.md @@ -1,6 +1,7 @@ --- title: Non-profit description: TODO +unlisted: true --- TODO Page Description diff --git a/docs/docs/patterns/patterns.css b/docs/docs/patterns/patterns.css new file mode 100644 index 000000000..8be14be4a --- /dev/null +++ b/docs/docs/patterns/patterns.css @@ -0,0 +1,7 @@ +.anchor-heading:has(+ wa-code-demo, + template + wa-code-demo) { + font-size: var(--wa-font-size-l); +} + +wa-code-demo:has(+ .anchor-heading) { + margin-block-end: var(--wa-space-3xl); +} diff --git a/docs/docs/patterns/patterns.json b/docs/docs/patterns/patterns.json index c396b3a12..2bf1d6dc6 100644 --- a/docs/docs/patterns/patterns.json +++ b/docs/docs/patterns/patterns.json @@ -1,5 +1,5 @@ { - "layout": "block.njk", + "layout": "patterns.njk", "tags": ["patterns"], "wide": true, "noAlpha": true diff --git a/docs/docs/patterns/portfolio.md b/docs/docs/patterns/portfolio.md index 078bceeb2..fac165ba4 100644 --- a/docs/docs/patterns/portfolio.md +++ b/docs/docs/patterns/portfolio.md @@ -1,6 +1,7 @@ --- title: Portfolio description: TODO +unlisted: true --- TODO Page Description diff --git a/docs/docs/patterns/product-landing.md b/docs/docs/patterns/product-landing.md index 67f70f5e7..a9f8dd813 100644 --- a/docs/docs/patterns/product-landing.md +++ b/docs/docs/patterns/product-landing.md @@ -1,6 +1,7 @@ --- title: Product Landing description: TODO +unlisted: true --- TODO Page Description diff --git a/src/styles/utilities.css b/src/styles/utilities.css index d5e510f71..465e49220 100644 --- a/src/styles/utilities.css +++ b/src/styles/utilities.css @@ -1,6 +1,7 @@ @import url('utilities/fouce.css'); @import url('utilities/visually-hidden.css'); @import url('utilities/scroll-lock.css'); +@import url('utilities/placeholder.css'); @import url('utilities/align-items.css'); @import url('utilities/border-radius.css'); @import url('utilities/gap.css'); diff --git a/src/styles/utilities/placeholder.css b/src/styles/utilities/placeholder.css new file mode 100644 index 000000000..b29153d7f --- /dev/null +++ b/src/styles/utilities/placeholder.css @@ -0,0 +1,7 @@ +.wa-placeholder { + align-self: stretch; + background-color: var(--wa-color-neutral-fill-quiet); + border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal); + border-radius: var(--wa-border-radius-l); + padding: var(--wa-space-3xl); +} diff --git a/src/styles/utilities/text.css b/src/styles/utilities/text.css index 50b973dfe..9dff31861 100644 --- a/src/styles/utilities/text.css +++ b/src/styles/utilities/text.css @@ -99,3 +99,25 @@ .wa-caption-xl { font-size: var(--wa-font-size-l); } + +.wa-link { + color: var(--wa-color-text-link); + text-decoration: var(--wa-link-decoration-default); + -webkit-text-decoration: var(--wa-link-decoration-default); + + &:hover { + color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover)); + text-decoration: var(--wa-link-decoration-hover); + -webkit-text-decoration: var(--wa-link-decoration-hover); + } +} + +.wa-link-plain { + color: var(--wa-color-text-normal); + text-decoration: none; + + &:hover { + color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); + text-decoration: none; + } +}