feat: 🚧 webcomponents WIP on adding export target

examples/webcomponents/components/footer.js

@@ -0,0 +1,78 @@
+const footer = document.getElementById('footer')
+footer.id = '123'
+footer.nav = [
+  {
+    text: 'Your Services',
+    url: '#services',
+    single: true,
+    items: [
+      {
+        text: 'Law and safety',
+        url: '#'
+      }
+    ]
+  },
+  {
+    text: 'About us',
+    url: '#about',
+    single: true
+  },
+  {
+    text: 'Latest News',
+    url: '#news',
+    single: true
+  },
+  {
+    text: 'Upcoming Events',
+    url: '#events',
+    single: true
+  },
+  {
+    text: 'Connect with us',
+    url: '',
+    items: [
+      {
+        text: 'DH Twitter',
+        url: '#',
+        icon: 'icon-x'
+      },
+      {
+        text: 'DFFH LinkedIn',
+        url: '#',
+        icon: 'icon-linkedin'
+      },
+      {
+        text: 'DFFH Facebook',
+        url: '#',
+        icon: 'icon-facebook'
+      }
+    ]
+  }
+]
+
+footer.links = [
+  {
+    text: 'Privacy',
+    url: '#'
+  },
+  {
+    text: 'Disclaimer',
+    url: '#'
+  },
+  {
+    text: 'Terms of use',
+    url: '#'
+  },
+  {
+    text: 'Sitemap',
+    url: '#'
+  },
+  {
+    text: 'Accessibility Statement',
+    url: '#'
+  },
+  {
+    text: 'Help',
+    url: '#'
+  }
+]

examples/webcomponents/components/heroheader.js

@@ -0,0 +1,20 @@
+const heroHeader = document.getElementById('hero-header-container')
+heroHeader.primaryAction = { text: 'Primary action', url: '#primary' }
+heroHeader.secondaryAction = {
+  title: 'Find out more',
+  text: 'Secondary action',
+  url: '#secondary'
+}
+heroHeader.background = {
+  src: 'img/image-landscape-s.jpg',
+  srcSet:
+    '/img/image-landscape-s.jpg 640w, /img/image-landscape-m.jpg 960w , /img/image-landscape-l.jpg 1240w',
+  sizes:
+    '(min-width: 640px) 640px, (min-width: 960px) 960px, (min-width: 1240px) 1240px',
+  height: 1920,
+  width: 2880,
+  focalPoint: {
+    x: 2620,
+    y: 620
+  }
+}

examples/webcomponents/components/page.js

@@ -0,0 +1,8 @@
+if (window.$rplEventBus) {
+  const evtKeys = Object.keys(eventListeners)
+  if (evtKeys.length > 0) {
+    evtKeys.forEach((key) => {
+      window.$rplEventBus.on(key, eventListeners[key]())
+    })
+  }
+}

examples/webcomponents/components/primarynav.js

@@ -0,0 +1,120 @@
+const primaryNav = document.getElementById('rpl-primary-nav')
+const navItems = [
+  {
+    id: '1',
+    text: 'First level A',
+    url: '#',
+    items: [
+      {
+        id: '2',
+        text: 'Second level A',
+        url: '#',
+        items: [
+          {
+            id: '3',
+            text: 'Third level A link with some text that will need to wrap',
+            url: '#',
+            items: [{ id: '4', text: 'Fourth level A', url: '#' }]
+          }
+        ]
+      },
+      { id: '4', text: 'Second level B', url: '#' },
+      { id: '5', text: 'Second level C', url: '#' },
+      { id: '6', text: 'Second level D', url: '#' },
+      {
+        id: '7',
+        text: 'Second level E',
+        url: '#',
+        items: [
+          { id: '7.1', text: 'Third level B', url: '#' },
+          { id: '7.2', text: 'Third level C', url: '#' },
+          { id: '7.3', text: 'Third level D', url: '#' },
+          { id: '7.4', text: 'Third level E', url: '#' },
+          {
+            id: '7.5',
+            text: 'Third level F',
+            url: '#',
+            items: [
+              { id: '7.6', text: 'Fourth level A', url: '#' },
+              { id: '7.7', text: 'Fourth level B', url: '#' },
+              { id: '7.8', text: 'Fourth level C', url: '#' },
+              { id: '7.9', text: 'Fourth level D', url: '#' }
+            ]
+          },
+          { id: '7.10', text: 'Third level G', url: '#' },
+          { id: '7.11', text: 'Third level H', url: '#' },
+          { id: '7.12', text: 'Third level I', url: '#' }
+        ]
+      },
+
+      { id: '8', text: 'Second level F', url: '#' },
+      { id: '9', text: 'Second level G', url: '#' },
+      { id: '10', text: 'Second level H', url: '#' },
+      { id: '11', text: 'Second level I', url: '#' },
+      { id: '12', text: 'Second level J', url: '#' },
+      { id: '13', text: 'Second level K', url: '#' },
+      { id: '14', text: 'Second level L', url: '#' },
+      { id: '15', text: 'Second level M', url: '#' },
+      { id: '16', text: 'Second level N', url: '#' },
+      { id: '17', text: 'Second level O', url: '#' },
+      { id: '18', text: 'Second level P', url: '#' },
+      { id: '19', text: 'Second level Q', url: '#' }
+    ]
+  },
+  {
+    id: '20',
+    text: 'First level B',
+    url: '#',
+    items: [
+      {
+        id: '21',
+        text: 'Second level',
+        url: '#',
+        items: [
+          {
+            id: '22',
+            text: 'Third level link with some text that will need to wrap',
+            url: '#',
+            items: [{ id: '23', text: 'Fourth level', url: '#' }]
+          },
+          {
+            id: '22.5',
+            text: 'Another third level link',
+            url: '#'
+          }
+        ]
+      },
+      { id: '24', text: 'Second level', url: '#' },
+      { id: '25', text: 'Second level', url: '#' }
+    ]
+  },
+  { id: '26', text: 'First level C', url: '#' },
+  {
+    id: '27',
+    text: 'First level D',
+    url: '#',
+    items: [
+      {
+        id: '28',
+        text: 'Second level',
+        url: '#',
+        items: [
+          {
+            id: '29',
+            text: 'Third level link with some text that will need to wrap',
+            url: '#',
+            items: [{ id: '30', text: 'Fourth level', url: '#' }]
+          }
+        ]
+      },
+      { id: '31', text: 'Second level', url: '#' },
+      { id: '32', text: 'Second level', url: '#' }
+    ]
+  },
+  { id: '26', text: 'First level E', url: '#' }
+]
+primaryNav.items = navItems
+primaryNav.primaryLogo = {
+  href: '#',
+  altText: 'Primary logo alt text'
+}

examples/webcomponents/index.html

@@ -5,18 +5,59 @@
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
+    <script type="module" src="/main.js"></script>
+    <style>
+      body {
+        --rpl-clr-primary: #FF9900;
+        --rpl-clr-primary-alt: #E37109;
+        --rpl-clr-primary-alpha: rgba(172,48,119,0.5);
+        --rpl-clr-accent: #465870;
+        --rpl-clr-accent-alt: #ECEEF1;
+        --rpl-clr-link: #E37109;
+        --rpl-clr-focus: #75D9A0;
+        --rpl-clr-gradient-vertical: linear-gradient(180deg, #D61634 0%, #D42B8B 40%, #652484 80%);
+        --rpl-clr-gradient-horizontal: linear-gradient(90deg, #D61634 0%, #D42B8B 40%, #652484 80%);
+        --rpl-clr-type-primary-accessible: #E37109;
+        --rpl-clr-type-primary-alt-accessible: #E37109;
+        --rpl-clr-footer: #3C4A60;
+        --rpl-clr-footer-alt: #E37109;
+        --rpl-clr-type-footer-accessible: #E37109;
+        --rpl-clr-type-footer-contrast: #FFFFFF;
+      }
+    </style>
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="/main.js"></script>
-    <div class="rpl-container rpl-u-margin-t-6 rpl-u-margin-b-6">
-      <h1 class="rpl-type-h1 rpl-u-margin-b-3">Web components test page</h1>
-      <p class="rpl-type-p rpl-u-margin-b-3">
-        A short paragraph with a
-        <rpl-text-link url="https://www.google.com">text link</rpl-text-link> in
-        the middle.
-      </p>
-      <rpl-button>Test button</rpl-button>
-    </div>
+    <rpl-page>
+      <rpl-layout>
+        <div slot="primary-nav" style="height: 0;">
+          <rpl-primary-nav id="rpl-primary-nav"></rpl-primary-nav>
+        </div>
+        <div slot="above-body">
+          <rpl-hero-header
+            id="hero-header-container"
+            title="Web components test page"
+            corner-top="false"
+            corner-bottom="false"
+          >
+            Access services and find out what's on in your local area and have
+            your say on government decisions.
+          </rpl-hero-header>
+        </div>
+        <div slot="body">
+          <h2 class="rpl-type-h1 rpl-u-margin-b-3">Web components test page</h2>
+          <p class="rpl-type-p rpl-u-margin-b-3">
+            A short paragraph with a
+            <rpl-text-link url="https://www.google.com"
+              >text link</rpl-text-link
+            >
+            in the middle.
+          </p>
+          <rpl-button>Test button</rpl-button>
+          <rpl-accordion id="accordion1"></rpl-accordion>
+          </div>
+        </div>
+      </rpl-layout>
+    </rpl-page>
   </body>
+  <rpl-footer id="footer"> </rpl-footer>
 </html>

examples/webcomponents/main.js

@@ -1,6 +1,15 @@
 import { registerRplWebComponents } from '@dpc-sdp/ripple-ui-core/webcomponents'
 import '@dpc-sdp/ripple-ui-core/style'
-import '@dpc-sdp/ripple-ui-core/style/components'
+import '@dpc-sdp/ripple-ui-core/components/button/RplButton.css'
 
+window.$rplFeatureFlags = {
+  disablePrimaryLogo: false,
+  disableFooterLogo: true
+}
 // Loads all ripple components
 registerRplWebComponents()
+
+import './components/analytics.js'
+import './components/primarynav.js'
+import './components/heroheader.js'
+import './components/footer.js'

examples/webcomponents/package.json

@@ -10,5 +10,8 @@
   },
   "dependencies": {
     "@dpc-sdp/ripple-ui-core": "workspace:*"
+  },
+  "devDependencies": {
+    "vite-svg-loader": "^4.0.0"
   }
 }