Merge remote-tracking branch 'torchbox/main' into jinja

.github/workflows/ci.yml

@@ -9,14 +9,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-python@v3
+      - run: pipx install "poetry>=1.1.12,<2"
+      - uses: actions/setup-python@v4
         with:
-          python-version: "3.10"
-      - uses: Gr1n/setup-poetry@v7
-        with:
-          poetry-version: '1.1.12'
+          python-version-file: pyproject.toml
+          cache: 'poetry'
       - run: pip install tox
-      - run: tox -e lint,py310-dj40
+      - run: tox -e lint,py311-dj42
   test_compatibility:
     needs: test
     runs-on: ubuntu-latest
@@ -26,27 +25,26 @@ jobs:
           # Test with all supported Django versions, for all compatible Python versions.
           # See https://docs.djangoproject.com/en/4.0/faq/install/#what-python-version-can-i-use-with-django for the official matrix.
           # Additionally test on Django’s main branch with the most recent Python version.
-          - python: "3.7"
-            toxenv: py37-dj32
           - python: "3.8"
-            toxenv: py38-dj32,py38-dj40,py38-dj41
+            toxenv: py38-dj32,py38-dj41,py38-dj42
           - python: "3.9"
-            toxenv: py39-dj32,py39-dj40,py39-dj41
+            toxenv: py39-dj32,py39-dj41,py39-dj42
           - python: "3.10"
             # Skip testing Django 4.0, already tested in previous workflow job.
-            toxenv: py310-dj32,py310-dj41,py310-djmain
-            # Tentative support for next Python pre-release. For the correct specifier,
-            # Check: https://raw.githubusercontent.com/actions/python-versions/main/versions-manifest.json.
-          - python: "3.11.0-beta.2"
-            toxenv: py311-dj41
+            toxenv: py310-dj32,py310-dj41,py310-dj42,py310-djmain
+          - python: "3.11"
+            toxenv: py311-dj41,py311-dj42,py311-djmain
+            # Tentative support for next Python pre-release.
+            # When django supports the version, uncomment this
+            # - python: "3.12"
+            #   toxenv: py312-dj41
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-python@v3
+      - run: pipx install "poetry>=1.1.12,<2"
+      - uses: actions/setup-python@v4
         with:
           python-version: ${{ matrix.python }}
-      - uses: Gr1n/setup-poetry@v7
-        with:
-          poetry-version: '1.1.12'
+          allow-prereleases: true
       - run: pip install tox
       - run: tox -q
         env:
@@ -62,24 +60,17 @@ jobs:
       - id: node-cache
         uses: actions/cache@v2
         with:
+          # Cache node_modules rather than the npm cache, as we rarely update npm packages.
           path: node_modules
           key: ${{ runner.os }}-node-${{ hashFiles('**/.nvmrc') }}-${{ hashFiles('**/package-lock.json') }}
       - if: steps.node-cache.outputs.cache-hit != 'true'
         run: npm ci --no-audit
       - run: npm run build
-      - uses: actions/setup-python@v3
-        with:
-          python-version: "3.10"
-      - uses: Gr1n/setup-poetry@v7
-        with:
-          poetry-version: '1.1.12'
-      - uses: actions/cache@v3
+      - run: pipx install "poetry>=1.1.12,<2"
+      - uses: actions/setup-python@v4
         with:
-          path: ~/.cache/pip
-          key: ${{ runner.os }}-python-py310-${{ hashFiles('**/pyproject.toml') }}
-          restore-keys: |
-            ${{ runner.os }}-python-py310-
-      - run: poetry config virtualenvs.create false
+          python-version-file: pyproject.toml
+          cache: 'poetry'
       - run: poetry install
       - run: poetry run django-admin runserver --settings=tests.settings.production --pythonpath=. &
       # Docs website build.
@@ -95,20 +86,19 @@ jobs:
       - run: cat pyproject.toml | awk '{sub(/^version = .+/,"version = \"0.0.0.dev\"")}1' > pyproject.toml.tmp && mv pyproject.toml.tmp pyproject.toml
       - run: poetry build
       - run: mv dist site
-      - uses: actions/upload-artifact@v3
+      - uses: actions/configure-pages@v3
+      - uses: actions/upload-pages-artifact@v2
         with:
-          name: site
           path: site
-          retention-days: 1
   deploy_site:
-    runs-on: ubuntu-latest
     needs: build_site
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     if: github.event_name == 'push' && github.ref == 'refs/heads/main'
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/download-artifact@v3
-      - uses: JamesIves/[email protected]
-        with:
-          branch: gh-pages
-          folder: site
-          clean: true
+      - uses: actions/deploy-pages@v2

.github/workflows/codeql-analysis.yml

@@ -3,9 +3,19 @@ name: "CodeQL"
 on:
   push:
     branches: [main]
+    paths-ignore:
+      - '**/*.md'
+      - '**/*.yml'
+      - '**/*.html'
+      - '**/*.scss'
   pull_request:
     # The branches below must be a subset of the branches above
     branches: [main]
+    paths-ignore:
+      - '**/*.md'
+      - '**/*.yml'
+      - '**/*.html'
+      - '**/*.scss'
   schedule:
     - cron: "28 20 * * 5"
 

.gitignore

@@ -34,7 +34,6 @@ var/
 *.egg-info/
 .installed.cfg
 *.egg
-poetry.lock
 # PyInstaller
 #  Usually these files are written by a python script from a template
 #  before PyInstaller builds the exe, so as to inject date/other infos into it.

CHANGELOG.md

@@ -1,8 +1,34 @@
 # Changelog
 
-## [Unreleased]
+## [1.1.0](https://github.com/torchbox/django-pattern-library/releases/tag/v1.1.0) - 2023-10-25
+
+### Added
+
+- Add support for Django 4.2 ([#231](https://github.com/torchbox/django-pattern-library/pull/231))
+
+### Changed
+
+- Switch to the `poetry-core` build backend ([#232](https://github.com/torchbox/django-pattern-library/pull/232))
+
+### Removed
+
+- Drop support for Python 3.7 ([#231](https://github.com/torchbox/django-pattern-library/pull/231))
+- Drop support for Django 4.0 ([#231](https://github.com/torchbox/django-pattern-library/pull/231))
+
+### Fixed
+
+- Ensure the project root is on `sys.path` so tests etc. can be run in by Docker Compose ([#233](https://github.com/torchbox/django-pattern-library/issues/233), [#234](https://github.com/torchbox/django-pattern-library/pull/234))
+- Fix URL pattern matching for template with dashes in the file name ([#229](https://github.com/torchbox/django-pattern-library/issues/229), [#230](https://github.com/torchbox/django-pattern-library/pull/230))
+
+## [1.0.1](https://github.com/torchbox/django-pattern-library/releases/tag/v1.0.1) - 2023-08-19
+
+### Fixed
 
 - Disable pointer events on menu chevron to allow clicks ([#202](https://github.com/torchbox/django-pattern-library/issues/202), [#205](https://github.com/torchbox/django-pattern-library/pull/205))
+- Improve menu accessibility by using buttons for menu items ([#202](https://github.com/torchbox/django-pattern-library/issues/202), [#207](https://github.com/torchbox/django-pattern-library/pull/207)).
+- Fix pattern name URL regex to account for Windows paths with backslash ([#222](https://github.com/torchbox/django-pattern-library/issues/222), [#223](https://github.com/torchbox/django-pattern-library/pull/223))
+- Use the correct iframe width with resize buttons ([#226](https://github.com/torchbox/django-pattern-library/issues/226), [#225](https://github.com/torchbox/django-pattern-library/pull/225)).
+- Update the project’s test matrix for upcoming Django 4.2 support ([#212](https://github.com/torchbox/django-pattern-library/issues/212),[#220](https://github.com/torchbox/django-pattern-library/pull/220)).
 
 ## [1.0.0](https://github.com/torchbox/django-pattern-library/releases/tag/v1.0.0) - 2022-06-10
 

Dockerfile

@@ -7,6 +7,7 @@ RUN useradd --create-home dpl && \
     chown -R dpl:dpl /venv/ /app/
 
 ENV PATH=/venv/bin:/home/dpl/.local/bin:$PATH \
+    PYTHONPATH=/app/ \
     VIRTUAL_ENV=/venv/ \
     DJANGO_SETTINGS_MODULE=tests.settings.dev
 

docs/community/related-projects.md

@@ -8,7 +8,7 @@ Here are other projects that are related to django-pattern-library, and may be r
 - [django-components](https://github.com/EmilStenstrom/django-components/) – Reusable UI components for Django, going further than template partials.
 - [django-component-tags](https://github.com/syse-i/django-component-tags) – Create advanced HTML components using Django Tags.
 - [slippers](https://github.com/mixxorz/slippers) – Reusable components for Django, without writing a single line of Python.
-- (Jinja only, incompatible but interesting) [Template Components (tcom)](https://tcom.scaletti.dev/) – Write server-side components as single Jinja template files. Use them as HTML tags without doing any importing.
+- (Jinja only, incompatible but interesting) [JinjaX](https://jinjax.scaletti.dev/) – Write server-side components as single Jinja template files. Use them as HTML tags without doing any importing.
 
 ## Alternatives
 

pattern_library/static/pattern_library/src/js/components/navigation.js

@@ -1,10 +1,11 @@
 export function toggleNavItems() {
-    const headings = document.querySelectorAll('.js-toggle-pattern');
-    headings.forEach(heading => {
-        heading.addEventListener('click', e => {
+    const categoryButtons = document.querySelectorAll('.js-toggle-pattern');
+
+    categoryButtons.forEach((button) => {
+        button.addEventListener('click', (e) => {
             e.target.classList.toggle('is-open');
-            for ( const element of e.target.parentNode.childNodes ) {
-                if ( element.nodeName === "UL" ){
+            for (const element of e.target.closest('.js-list-item').childNodes) {
+                if (element.nodeName === 'UL') {
                     element.classList.toggle('is-open');
                 }
             }

pattern_library/static/pattern_library/src/scss/components/_iframe.scss

@@ -1,4 +1,5 @@
 .iframe {
+    box-sizing: content-box;
     width: 100%;
     border: 1px solid $light-grey;
     margin: 20px 0;

pattern_library/static/pattern_library/src/scss/components/_list.scss

@@ -19,23 +19,24 @@
         padding-left: 15px;
     }
 
-    &__item-heading {
+    &__button {
         display: flex;
         align-items: center;
         margin: 10px 0;
         user-select: none;
-        font-weight: 500;
         font-size: 19px;
+        appearance: none;
+        background-color: transparent;
+        border: 0;
+        gap: 5px;
+        padding: 0;
 
         &:hover {
             cursor: pointer;
         }
 
-        &--light {
-            font-weight: 200;
-        }
-
-        &--small{
+        &--child {
+            color: $mid-grey;
             font-size: 13px;
         }
     }
@@ -44,7 +45,8 @@
         width: 15px;
         height: 15px;
         pointer-events: none;
-
+        transition: transform 0.15s ease-in-out;
+
         .is-open > & {
             transform: rotate(90deg);
         }

pattern_library/static/pattern_library/src/scss/layout/_sidebar.scss

@@ -1,12 +1,15 @@
 .sidebar {
     background-color: $off-white;
-    padding: 20px;
     height: 100vh;
     margin-left: 0;
     overflow: auto;
     -ms-grid-column: 1;
     -ms-grid-row: 2;
 
+    &__inner {
+        padding: 20px;
+    }
+
     &__search {
         width: 100%;
         padding: 10px;

pattern_library/templates/pattern_library/base.html

@@ -22,24 +22,26 @@ <h1 class="header__title">
         </h1>
     </header>
     <aside class="sidebar">
-        <label for="js-pattern-search-input" class="is-hidden">Search pattern library</label>
-        <input type="text" class="sidebar__search" id="js-pattern-search-input" placeholder="Search library...">
-        <div class="sidebar__search-results" id="js-pattern-search-results-container"></div>
-        <nav class="sidebar__nav" id="sidebar-nav">
-            <ul class="list">
-                {% for pattern_type_group, pattern_templates in pattern_templates.template_groups.items %}
-                <li class="list__item">
-                    <h2 class="list__item-heading js-toggle-pattern">
-                        <svg class="list__item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
-                            <path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" />
-                        </svg>
-                        {{ pattern_type_group|title }}
-                    </h2>
-                    {% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %}
-                </li>
-                {% endfor %}
-            </ul>
-        </nav>
+        <div class="sidebar__inner">
+            <label for="js-pattern-search-input" class="is-hidden">Search pattern library</label>
+            <input type="text" class="sidebar__search" id="js-pattern-search-input" placeholder="Search library...">
+            <div class="sidebar__search-results" id="js-pattern-search-results-container"></div>
+            <nav class="sidebar__nav" id="sidebar-nav">
+                <ul class="list">
+                    {% for pattern_type_group, pattern_templates in pattern_templates.template_groups.items %}
+                    <li class="list__item js-list-item">
+                        <button class="list__button list__button--parent js-toggle-pattern">
+                            <svg class="list__item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
+                                <path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" />
+                            </svg>
+                            {{ pattern_type_group|title }}
+                        </button>
+                        {% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %}
+                    </li>
+                    {% endfor %}
+                </ul>
+            </nav>
+        </div>
     </aside>
     <main class="main">
         {% block content %}{% endblock %}

pattern_library/templates/pattern_library/pattern_group.html

@@ -1,12 +1,12 @@
 <ul class="list list--child">
     {% for group_name, pattern_templates in groups.items %}
-    <li class="list__item">
-        <h3 class="list__item-heading list__item-heading--small list__item-heading--light js-toggle-pattern">
+    <li class="list__item js-list-item">
+        <button class="list__button list__button--child js-toggle-pattern">
             <svg class="list__item-icon list__item-icon--small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
-                <path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" />
+                <path d="M88 80l-48 48 16 16 64-64-64-64-16 16 48 48z" fill="currentColor" />
             </svg>
             {{ group_name }}
-        </h3>
+        </button>
         {% if pattern_templates.template_groups %}
             {% include "pattern_library/pattern_group.html" with groups=pattern_templates.template_groups %}
         {% endif %}

pattern_library/urls.py

@@ -7,14 +7,14 @@
     # UI
     re_path(r"^$", views.IndexView.as_view(), name="index"),
     re_path(
-        r"^pattern/(?P<pattern_template_name>[\w./-]+%s)$"
+        r"^pattern/(?P<pattern_template_name>[\w./\-\\]+%s)$"
         % (get_pattern_template_suffix()),
         views.IndexView.as_view(),
         name="display_pattern",
     ),
     # iframe rendering
     re_path(
-        r"^render-pattern/(?P<pattern_template_name>[\w./-]+%s)$"
+        r"^render-pattern/(?P<pattern_template_name>[\w./\-\\]+%s)$"
         % (get_pattern_template_suffix()),
         views.RenderPatternView.as_view(),
         name="render_pattern",