[#44] Implement Blueprint Elements #46

joshuapease · 2024-09-24T21:09:15Z

Overview:

Implements all of the items under "Elements" in Blueprint.
Configures Vite to copy SVGs from the /src/icons/ directory
Configures Craft with a filesystem and asset volume (so we can test image related features.
Installs a standalone "Viget Parts Kit" plugin (not 100% certain where we'll go with this, but I'm enjoying breaking up the base module features.

I've left comments on most of the components

Uses `vite-plugin-static-copy` to copy SVGs from src/icons Macro inlines SVG files into page.

joshuapease · 2024-09-24T21:09:30Z

.ddev/config.yaml

@@ -32,7 +32,7 @@ web_extra_exposed_ports:
 web_extra_daemons:
  # Run vite in a separate process
  - name: 'vite'
-    command: 'npm install && npm run dev'
+    command: 'npm install && npm run build && npm run dev'


Ensures that icons are present on start.

Yeah, this works. I had been trying to work around this by either using src/public or the Vite HMR Public Copy plugin — this will work, but I think it won't catch additions or changes you make to that folder while working unless you ddev restart (since this is in a daemon and not a terminal tab where R would reload Vite) — right?

Ah... you know what. I got thrown off by the name.

I thought it would only copy the public directory. But it seems like you can configure it to copy any directory?

https://github.com/davidwebca/vite-plugin-hmr-public-copy?tab=readme-ov-file#copy

I was hesitant to use the public directory for icons, because on some of our more complex sites, we occasionally need to reference icons from JS.

I'll put in a ticket to look into this more deeply.

joshuapease · 2024-09-26T23:32:56Z

.env.example.dev

@@ -30,3 +30,6 @@ CRAFT_SECURITY_KEY=
 CRAFT_DEV_MODE=true
 CRAFT_ALLOW_ADMIN_CHANGES=true
 CRAFT_DISALLOW_ROBOTS=true
+
+# Asset Settings
+ASSET_FILESYSTEM=local


In the future, the env var would let you choose s3 or local depending on your environment or preference.

Future ticket for some default AWS setup

Asset and S3, Imager X Transforms configuration, stress test srcset/sizes #15

joshuapease · 2024-09-26T23:34:03Z

config/tailwind/buttons.js

@@ -0,0 +1,107 @@
+import plugin from 'tailwindcss/plugin'


Exact copy of blueprint (only change was to make an ES Module)

joshuapease · 2024-09-26T23:34:16Z

config/tailwind/dialog.js

Exact copy of blueprint (only change was to make an ES Module)

joshuapease · 2024-09-26T23:34:56Z

tailwind.config.js

@@ -1,8 +1,47 @@
+import buttons from './config/tailwind/buttons'


Mirroring the TW config of blueprint

joshuapease · 2024-09-26T23:36:05Z

templates/_components/accordion.twig

@@ -0,0 +1,48 @@
+{# @var string|null title #}


Corresponding Blueprint Component

https://staging.blueprint.viget.com/elements/accordion/

joshuapease · 2024-09-26T23:36:44Z

templates/_components/alert-banner.twig

https://staging.blueprint.viget.com/elements/alert-banner/

Only change was to use Alpine for dismissible variant.

joshuapease · 2024-09-26T23:51:58Z

templates/_components/image.twig

Curious to hear everyone's thoughts on this.

It's using Imager X's power pack, but wraps that abstraction so if you ever change your image plugin, you don't have to rip it out everywhere.

Main goals for this component.

Minimize the amount of transform config you need to spread around your project.

Reduce the Imager X specific syntax in your project (would make it easier to switch from Imager X if needed).

Use TW screen names in your sizes props.

ppimg() is doing some interesting stuff here.

Here's some further detail on the fillTransforms setting.

{% set minWidth = 320 %} {% set maxWidth = 2200 %} {{ image ? ppimg( image: image, transform: [ minWidth, maxWidth, // [1.] Generate transforms between 320 and 2200 { ratio: ratio, }, ], params: { class: cx(class, 'w-full h-auto'), loading, fillTransforms: 'auto', // [2.] By using fillTransforms 'auto' we fill in between our min/max widths autoFillCount: 5, // [3.] Creates 5 transforms evenly spaced between our min/max widths allowUpscale: false, sizes: sizes, }, ) }}

joshuapease · 2024-09-26T23:52:42Z

templates/_components/tag.twig

https://staging.blueprint.viget.com/elements/tag/

Identical to Blueprint minus the ability to use slots.

joshuapease · 2024-09-26T23:54:20Z

templates/_components/video.twig

https://staging.blueprint.viget.com/elements/video-embed/

Identical to Blueprint

I think over time our clients would benefit from the following:

lazy load the iframe

customizable thumbnail / play button

We also might want to consider using a plugin that parses URLs to get the video ID/Embed URL.

joshuapease · 2024-09-26T23:55:43Z

templates/_macros/icon.twig

Simple wrapper around the svg function in Craft.

Inlines the SVG markup directly into the page.

Provides some icon sizing logic so you don't have to remember to pass size-xyz everywhere. Although there is the option to pass none as the size and use your own TW classes in unique scenarios.

joshuapease · 2024-09-26T23:58:52Z

vite.config.js

+    plugins: [
+      viteStaticCopy({
+        targets: [{ src: 'src/icons/**/*', dest: './assets/icons' }],
+      }),
+    ],


This is how we handle icons on MW and it works pretty well.

Open to other suggestions too. I considered putting them in the public directory. But you loose the ability to bundle SVG with your JS.

joshuapease · 2024-09-27T15:52:06Z

templates/_components/image.twig

+{% set screens = {
+  'sm': '(min-width: 640px)',
+  'md': '(min-width: 768px)',
+  'lg': '(min-width: 1024px)',
+  'xl': '(min-width: 1280px)',
+  '2xl': '(min-width: 1536px)',
+} %}


On some sites (like MW), we actually convert our TW config to JSON and then load it via PHP so we can get at these values.

But.... I'm of the impression lately that it a ton of complexity to save us 5-ish lines of code.

Do screen sizes really change all that much after a project has been started? This might be an acceptable DUPE

ten1seven

Cool!

ten1seven · 2024-09-30T13:29:49Z

templates/_components/card-icon.twig

+  {% if title or description %}
+    <div class="flex flex-col gap-8">
+      {% if title %}
+        <h2 class="text-xl font-bold">{{ title }}</h2>


This H2 should could probably be a variable. I'm also wondering if H3 is a better default if a typical page structure looks like:

H1 Page Title |- H2 My Card List |- H3 Card Title |- H3 Card Title |- H3 Card Title

Good call! I'll update in my next PR

ten1seven · 2024-09-30T13:30:24Z

templates/_components/card-image.twig

+  {% if title or description %}
+    <div class="flex flex-col gap-8">
+      {% if title %}
+        <h2 class="text-xl font-bold">{{ title }}</h2>


Same question re: heading.

- Adds TW class for default site max width

- Uses both image & icon cards

- Update cards & buttons to use new window.

- Simple is just Bold, Italic, Underline plus links - Advanced has more options like headings, styles, lists, etc.

Whoops :)

The nav has a max depth of 3 levels. This simplifies our markup since it doesn't have to be recursive

The desktop and mobile nav markup will be their own partials.

Instead of using a focus trap, we focus on the first element in the sub nav, but allow you to tab out of the list. When focus leaves, we pop the subnav.

joshuapease added 2 commits September 24, 2024 14:08

[#44] Adds icon macro

82acf58

Uses `vite-plugin-static-copy` to copy SVGs from src/icons Macro inlines SVG files into page.

[#44] Adds a button component

dfd45c6

joshuapease marked this pull request as draft September 24, 2024 21:09

joshuapease commented Sep 24, 2024

View reviewed changes

joshuapease added 7 commits September 24, 2024 14:32

[#44] Adds a card component

b91f06c

[#44] Install Alpine JS

4daa7e0

[#44] Adds Alert Banner Component

bf5ca7e

[#44] Adds Accordion Component

c1234fb

[#44] Adds Tag Component

54a42b1

[#44] Adds Dialog Component

476d4ac

[#44] Adds video component

e5cac4c

joshuapease changed the title ~~[#44] Base UI elements~~ [#44] Implement Blueprint Elements Sep 25, 2024

joshuapease commented Sep 26, 2024

View reviewed changes

joshuapease marked this pull request as ready for review September 27, 2024 00:02

joshuapease requested review from ten1seven, maxdmyers and maxfenton September 27, 2024 00:02

joshuapease added 5 commits September 26, 2024 17:08

[#44] Install spacecatninja/imager-x-power-pack

83f4ee0

[#44] Adds image components. Also image card component.

e490944

[#44] Install standalone Viget Parts Kit

6ed09de

[#44] Adds local filesystem and asset volume

659c795

[#44] Tweaks during code review

abde8cc

joshuapease force-pushed the jp/44-base-ui-elements branch from 4fd734d to abde8cc Compare September 27, 2024 00:08

joshuapease commented Sep 27, 2024

View reviewed changes

ten1seven approved these changes Sep 30, 2024

View reviewed changes

This was referenced Oct 3, 2024

Look in to use of Vite Public Directory HMR #49

Open

Add Default Values to Tailwind Config #18

Closed

Responsive Image Best Practices & Techniques #38

Closed

[#45] Adds home entry type

4a18c5b

joshuapease added 27 commits December 18, 2024 05:53

[#45] Adds simple Rich Text block

5e97079

- Adds TW class for default site max width

[#45] Adds Card Grid Block

b03e008

- Uses both image & icon cards

[#45] Adds text with media block

f4c2918

[#45] Rename primaryLink to href. Adds linkText and newWindow fields.

9deef5f

- Update cards & buttons to use new window.

[#45] Adds Call To Action block

6dd0030

[#45] Adds Page Hero block

13ffaad

[#45] Adds advanced / simple CKEditor configs

cd3187b

- Simple is just Bold, Italic, Underline plus links - Advanced has more options like headings, styles, lists, etc.

[#45] Actually use _blocks/index.twig

2437c82

Whoops :)

[n/a] Use real TW class

a6d861a

[#45] Adds rough RTE styling

a070a91

[#45] Adds a simple .container component for setting a site max width.

a08eca2

[#45] Adds a heading block

6b69dcb

[#45] Spacing management on page builder

8315cd9

[#45] Block heading level accessibility

c629657

[#45] Add heading to card grid block. Make card heading levels dynamic

cc9fc46

[#45] More context on container component

4616430

[#45] Misc cleanup

8990b03

[#51] Nav Project Config

2fd99ae

The nav has a max depth of 3 levels. This simplifies our markup since it doesn't have to be recursive

[#51] Basic desktop nav.

fd0b3a3

The desktop and mobile nav markup will be their own partials.

[#51] Adds skip link

cab7d26

[#51] Adds mobile nav

91d06d4

[#51] Adjust focus strategy for desktop nav.

0f375a9

Instead of using a focus trap, we focus on the first element in the sub nav, but allow you to tab out of the list. When focus leaves, we pop the subnav.

[#51] Mobile nav polish

e5493c5

[#51] Footer project config

3e48436

[#51] Footer markup

c2077d2

[#51] Fix tab control edge cases

08e9a42

[#51] Nav styling changes

cebad0d

joshuapease merged commit 6c29947 into 5.x Dec 18, 2024

joshuapease deleted the jp/44-base-ui-elements branch December 18, 2024 13:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#44] Implement Blueprint Elements #46

[#44] Implement Blueprint Elements #46

joshuapease commented Sep 24, 2024 •

edited

Loading

joshuapease Sep 24, 2024

maxfenton Sep 27, 2024 •

edited

Loading

joshuapease Oct 3, 2024

joshuapease Oct 3, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 26, 2024

joshuapease Sep 27, 2024

ten1seven left a comment

ten1seven Sep 30, 2024

joshuapease Oct 3, 2024

ten1seven Sep 30, 2024

		@@ -1,8 +1,47 @@
		import buttons from './config/tailwind/buttons'

[#44] Implement Blueprint Elements #46

[#44] Implement Blueprint Elements #46

Conversation

joshuapease commented Sep 24, 2024 • edited Loading

Overview:

Choose a reason for hiding this comment

maxfenton Sep 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ten1seven left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joshuapease commented Sep 24, 2024 •

edited

Loading

maxfenton Sep 27, 2024 •

edited

Loading