From 8e49d99d99f863da866d12a9dd9dc52615c663c2 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Fri, 5 Apr 2024 08:03:15 -0500 Subject: [PATCH 1/3] e-commerce patterns --- docs/src/content/docs/patterns/app.md | 4 + docs/src/content/docs/patterns/blog.md | 4 + docs/src/content/docs/patterns/business.md | 4 + docs/src/content/docs/patterns/ecommerce.md | 716 ++++++++++++++++++ .../content/docs/patterns/entertainement.md | 4 + docs/src/content/docs/patterns/membership.md | 4 + docs/src/content/docs/patterns/news.md | 4 + docs/src/content/docs/patterns/non-profit.md | 4 + docs/src/content/docs/patterns/portfolio.md | 4 + .../content/docs/patterns/product-landing.md | 4 + 10 files changed, 752 insertions(+) create mode 100644 docs/src/content/docs/patterns/app.md create mode 100644 docs/src/content/docs/patterns/blog.md create mode 100644 docs/src/content/docs/patterns/business.md create mode 100644 docs/src/content/docs/patterns/ecommerce.md create mode 100644 docs/src/content/docs/patterns/entertainement.md create mode 100644 docs/src/content/docs/patterns/membership.md create mode 100644 docs/src/content/docs/patterns/news.md create mode 100644 docs/src/content/docs/patterns/non-profit.md create mode 100644 docs/src/content/docs/patterns/portfolio.md create mode 100644 docs/src/content/docs/patterns/product-landing.md diff --git a/docs/src/content/docs/patterns/app.md b/docs/src/content/docs/patterns/app.md new file mode 100644 index 000000000..6d97bd534 --- /dev/null +++ b/docs/src/content/docs/patterns/app.md @@ -0,0 +1,4 @@ +--- +title: App +description: TODO +--- diff --git a/docs/src/content/docs/patterns/blog.md b/docs/src/content/docs/patterns/blog.md new file mode 100644 index 000000000..736ac9fee --- /dev/null +++ b/docs/src/content/docs/patterns/blog.md @@ -0,0 +1,4 @@ +--- +title: Blog +description: TODO +--- diff --git a/docs/src/content/docs/patterns/business.md b/docs/src/content/docs/patterns/business.md new file mode 100644 index 000000000..75e0cba8c --- /dev/null +++ b/docs/src/content/docs/patterns/business.md @@ -0,0 +1,4 @@ +--- +title: Business +description: TODO +--- diff --git a/docs/src/content/docs/patterns/ecommerce.md b/docs/src/content/docs/patterns/ecommerce.md new file mode 100644 index 000000000..ceda6aa12 --- /dev/null +++ b/docs/src/content/docs/patterns/ecommerce.md @@ -0,0 +1,716 @@ +--- +title: E-commerce +description: TODO +--- + +TODO Page Description + +## Examples + +### Slide Over + +```html:preview + +
+ 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:preview +
+

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:preview +
+

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 +
+ +
+
+ +``` + +### Product Quickview + +```html:preview + +
+ Quickview + +
+
+ +
+

Quality Cotton Tee

+ $45.00 +
+ + See all ratings +
+ + White + Gray + Black + + + Small + Medium + Large + + Add to Cart + +
+
+ +``` + +### Product Review + +```html:preview +
+
+

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:preview +
+

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:preview +
+
+

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/src/content/docs/patterns/entertainement.md b/docs/src/content/docs/patterns/entertainement.md new file mode 100644 index 000000000..801d85ad5 --- /dev/null +++ b/docs/src/content/docs/patterns/entertainement.md @@ -0,0 +1,4 @@ +--- +title: Entertainment +description: TODO +--- diff --git a/docs/src/content/docs/patterns/membership.md b/docs/src/content/docs/patterns/membership.md new file mode 100644 index 000000000..7e3e13642 --- /dev/null +++ b/docs/src/content/docs/patterns/membership.md @@ -0,0 +1,4 @@ +--- +title: Membership +description: TODO +--- diff --git a/docs/src/content/docs/patterns/news.md b/docs/src/content/docs/patterns/news.md new file mode 100644 index 000000000..f5a30fcdf --- /dev/null +++ b/docs/src/content/docs/patterns/news.md @@ -0,0 +1,4 @@ +--- +title: News +description: TODO +--- diff --git a/docs/src/content/docs/patterns/non-profit.md b/docs/src/content/docs/patterns/non-profit.md new file mode 100644 index 000000000..bce00817d --- /dev/null +++ b/docs/src/content/docs/patterns/non-profit.md @@ -0,0 +1,4 @@ +--- +title: Non-profit +description: TODO +--- diff --git a/docs/src/content/docs/patterns/portfolio.md b/docs/src/content/docs/patterns/portfolio.md new file mode 100644 index 000000000..e5275586c --- /dev/null +++ b/docs/src/content/docs/patterns/portfolio.md @@ -0,0 +1,4 @@ +--- +title: Portfolio +description: TODO +--- diff --git a/docs/src/content/docs/patterns/product-landing.md b/docs/src/content/docs/patterns/product-landing.md new file mode 100644 index 000000000..a75be52fa --- /dev/null +++ b/docs/src/content/docs/patterns/product-landing.md @@ -0,0 +1,4 @@ +--- +title: Product Landing +description: TODO +--- From 1f8640b5f2606896c23585098c4e417a2e4606b0 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Fri, 5 Apr 2024 08:13:53 -0500 Subject: [PATCH 2/3] added folder to config --- docs/astro.config.mjs | 7 +- .../src/content/docs/experimental/patterns.md | 111 ++++++++++++++++++ 2 files changed, 115 insertions(+), 3 deletions(-) create mode 100644 docs/src/content/docs/experimental/patterns.md diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 3867a2b11..6abb3887f 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -1,7 +1,7 @@ +import * as path from 'node:path'; +import * as url from 'node:url'; import { defineConfig } from 'astro/config'; import starlight from '@astrojs/starlight'; -import * as url from 'node:url'; -import * as path from 'node:path'; // const __filename = url.fileURLToPath(import.meta.url); const __dirname = url.fileURLToPath(new URL('.', import.meta.url)); @@ -9,9 +9,9 @@ import FullReload from 'vite-plugin-full-reload'; import { customElementsManifest } from './src/js/cem.js'; import { RemarkPluginFindAndReplace } from 'remark-plugin-find-and-replace'; +import GithubAutolink from './src/plugins/github-autolink.ts'; import rehypeExternalLinks from 'rehype-external-links'; import remarkCodeHighlighter from './src/plugins/prism'; -import GithubAutolink from './src/plugins/github-autolink.ts'; const version = customElementsManifest().package.version; const cdndir = 'cdn'; @@ -126,6 +126,7 @@ export default defineConfig({ label: 'Components', autogenerate: { directory: 'components' } }, + { label: 'Patterns', autogenerate: { directory: 'patterns' } }, { label: 'Design Tokens', autogenerate: { directory: 'tokens' } diff --git a/docs/src/content/docs/experimental/patterns.md b/docs/src/content/docs/experimental/patterns.md new file mode 100644 index 000000000..526dd85c8 --- /dev/null +++ b/docs/src/content/docs/experimental/patterns.md @@ -0,0 +1,111 @@ +--- +title: Patterns +description: TODO +--- + +Adding the `wa-valid` or `wa-invalid` class to a form control will change its appearance. This is useful for applying validation styles to server-rendered form controls. + +## Blog + +### Test + +```html:preview + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Close + + +Open Drawer + + +``` + +## Hero + +```html:preview +HI + +``` + +## E-commerce + +### Shopping Cart + +### Product Overview + +### Product List + +### Promo Section + +### Order Summaries + +### Reviews + +### Product Features + +### Category Section + +### Store Navigation + +### Order History + +### Incentives + +```html:preview + + + +``` + +
+
+

Valid

+
+ +
+
+
+

+
+

+
+ Submit Form +
+
+

Invalid

+
+ +
+
+
+

+
+

+
+ Submit Form +
+
+``` From 6856362174fd945bf4adedeafa24b0eb4f424a85 Mon Sep 17 00:00:00 2001 From: Kelsey Jackson Date: Wed, 10 Apr 2024 10:01:13 -0500 Subject: [PATCH 3/3] addressed feedback --- .../src/content/docs/experimental/patterns.md | 107 ------------------ 1 file changed, 107 deletions(-) diff --git a/docs/src/content/docs/experimental/patterns.md b/docs/src/content/docs/experimental/patterns.md index 526dd85c8..2bc5897bb 100644 --- a/docs/src/content/docs/experimental/patterns.md +++ b/docs/src/content/docs/experimental/patterns.md @@ -2,110 +2,3 @@ title: Patterns description: TODO --- - -Adding the `wa-valid` or `wa-invalid` class to a form control will change its appearance. This is useful for applying validation styles to server-rendered form controls. - -## Blog - -### Test - -```html:preview - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Close - - -Open Drawer - - -``` - -## Hero - -```html:preview -HI - -``` - -## E-commerce - -### Shopping Cart - -### Product Overview - -### Product List - -### Promo Section - -### Order Summaries - -### Reviews - -### Product Features - -### Category Section - -### Store Navigation - -### Order History - -### Incentives - -```html:preview - - - -``` - -
-
-

Valid

-
- -
-
-
-

-
-

-
- Submit Form -
-
-

Invalid

-
- -
-
-
-

-
-

-
- Submit Form -
-
-```