Merge pull request #1516 from jadu/develop

develop to main

.gitattributes

@@ -1,6 +1,7 @@
 /.sass-cache                export-ignore
 /app/                       export-ignore
 /coverage/                  export-ignore
+/docs/                      export-ignore
 /features/                  export-ignore
 /hook/                      export-ignore
 /node_modules/              export-ignore
@@ -32,4 +33,4 @@
 ##
 ## /images/
 ##
-/images/src/logo-coloured.ai                                    export-ignore
+/images/src/logo-coloured.ai export-ignore

.github/workflows/docs.yml

@@ -0,0 +1,36 @@
+name: deploy-docusaurus
+
+on:
+  push:
+    branches: [develop]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - name: Check out repo
+        uses: actions/checkout@v3
+      # Node is required for npm
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      # Install and build Docusaurus website
+      - name: Build Docusaurus website
+        run: |
+          cd docs
+          npm install
+          npm run build
+      - name: Deploy to GitHub Pages
+        if: success()
+        uses: crazy-max/ghaction-github-pages@v3
+        with:
+          target_branch: gh-pages
+          build_dir: docs/build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/js.yml

@@ -9,23 +9,26 @@ on:
   pull_request:
     branches: [ develop ]
 
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
 jobs:
   build:
 
     runs-on: ubuntu-latest
 
     strategy:
-      matrix:
-        node-version: [16.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+       matrix:
+         node-version: [14, 16, 18]
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
-    - run: npm ci
+    - run: npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_TOKEN }}"
+    - run: npm install
     - run: npm run build --if-present
     - run: npm test

.github/workflows/php.yml

@@ -19,10 +19,18 @@ jobs:
   build:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        php-versions: ['8.1']
 
     steps:
     - uses: actions/checkout@v2
 
+    - name: PHP ${{ matrix.php-versions }}
+      uses: shivammathur/setup-php@v2
+      with:
+        php-version: ${{ matrix.php-versions }}
+
     - name: Validate composer.json and composer.lock
       run: composer validate --strict
 
@@ -43,3 +51,5 @@ jobs:
       with:
         configuration: phpunit.xml.dist
         memory_limit: 256M
+        version: '9.5.10'
+        php_version: ${{ matrix.php-versions }}

.gitignore

@@ -21,7 +21,8 @@ pulsar.zip
 /shots
 /fonts
 /fonts/_config.fonts.scss
-/docs
+/docs/node_modules
+/docs/.docusaurus
 
 /.csscomb.json
 /validation-status.json
@@ -36,3 +37,6 @@ pulsar.zip
 /ngrok
 /.vagrant
 /phpunit
+/docs
+.phpunit.result.cache
+*.cache

.npmrc

@@ -0,0 +1 @@
+@fortawesome:registry=https://npm.fontawesome.com/

README.md

@@ -12,7 +12,7 @@ Watch a Jadu Academy session presented by Paul Stanton, Pulsar Product Owner whi
 
 ## Documentation
 
-Documentation is available online at [https://jadu.github.io/pulsar/docs](https://jadu.github.io/pulsar/docs), we welcome any feedback on areas which may need improvement.
+Documentation is available online at [https://jadu.github.io/pulsar](https://jadu.github.io/pulsar), we welcome any feedback on areas which may need improvement.
 
 ## Contributing
 

VERSION

@@ -1,3 +1,3 @@
 {
-	"version": "13.0.6"
+	"version": "13.1.0"
 }

composer.json

@@ -8,7 +8,7 @@
         }
     },
     "require": {
-        "twig/twig": "^1.21"
+        "twig/twig": "^2.0"
     },
     "require-dev": {
         "symfony/yaml": "*"

docker-compose.yml

@@ -1,9 +1,9 @@
 version: '2'
 services:
     web:
-        image: php:7.2-apache
+        image: php:8.1-apache
         working_dir: /var/www/html
         volumes:
-          - ./:/var/www/html/:cached        
+          - ./:/var/www/html/:cached
         ports:
           - 9000:80

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/docs/components/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Components",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "Pulsar HTML components"
+  }
+}

docs/docs/components/badge.mdx

@@ -0,0 +1,142 @@
+---
+id: badge
+title: Badge
+sidebar_label: Badge
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Badges can be used to highlight new or unread items, Limited usage is recommended, mainly for displaying numeric values in combination with other data to provide context. Do not use in place of labels, or any other similar element.
+
+<div className="d-example">
+  <span className="badge">123</span>
+</div>
+
+## Basic usage
+
+<Tabs
+  groupID="example"
+  defaultValue="twig"
+  values={[
+    { label: 'Twig', value: 'twig', },
+    { label: 'React', value: 'react', },
+    { label: 'HTML', value: 'html', },
+  ]
+}>
+<TabItem value="twig">
+
+```twig
+{{
+    html.badge({
+        'label': '123'
+    })
+}}
+```
+
+</TabItem>
+<TabItem value="react">
+
+```jsx
+<Badge>123</Badge>
+```
+
+</TabItem>
+<TabItem value="html">
+
+```html
+<span class="badge">123</span>
+```
+
+</TabItem>
+</Tabs>
+
+## Accessibility
+
+Badges strongly rely on the context in which they’re presented to properly communicate what the badge means. You should not rely on colour alone to indicate what a badge means.
+
+Ideally, treat badges as a secondary piece of information, which is visually associated with an obvious text label, or a screenreader friendly label.
+
+<Tabs
+  groupID="example"
+  defaultValue="twig"
+  values={[
+    { label: 'Twig', value: 'twig', },
+    { label: 'React', value: 'react', },
+    { label: 'HTML', value: 'html', },
+  ]
+}>
+<TabItem value="twig">
+
+```twig
+{{
+  html.button({
+    'label': 'Notifications ' ~
+      html.badge({
+        'label': '7'
+      })
+  })
+}}
+```
+
+</TabItem>
+<TabItem value="react">
+
+```jsx
+<Button>
+  Notifications <Badge>7</Badge>
+</Button>
+```
+
+</TabItem>
+<TabItem value="html">
+
+```html
+<button class="btn">Notifications <span class="badge">7</span></button>
+```
+
+</TabItem>
+</Tabs>
+
+### Screenreader friendly labels
+
+Badges may be confusing to users of screen readers and other assistive technologies where they may not be able to rely on visual cues or positioning to judge the context of the numbers.
+
+Unless an associated text label is close enough to make it clear what the badge is counting, such as ‘Notifications (8)’, consider adding additional information with a visually hidden label.
+
+<Tabs
+  groupID="example"
+  defaultValue="twig"
+  values={[
+    { label: 'Twig', value: 'twig', },
+    { label: 'React', value: 'react', },
+    { label: 'HTML', value: 'html', },
+  ]
+}>
+<TabItem value="twig">
+
+```twig
+{{
+  html.badge({
+    'label': '7 <span class="hide">unread items</span>',
+    'class': 'badge--danger'
+  })
+}}
+```
+
+</TabItem>
+<TabItem value="react">
+
+```jsx
+<Badge>7 <span className="hide">unread items</span></Badge>
+```
+
+</TabItem>
+<TabItem value="html">
+
+```html
+<span class="badge badge--danger">7 <span class="hide">unread items</span></span>
+```
+
+</TabItem>
+</Tabs>