jaypack improvements

JayBox325 · Jan 3, 2021 · 012496b · 012496b
1 parent 8efcf5a
commit 012496b
Show file tree

Hide file tree

Showing 15 changed files with 444 additions and 287 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -4,7 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## 3.0.0 -- DEV
+## 3.0.1 -- DEV
+- Converted JS to Typescript
+- Updated form markup
+- Updated Tailwind Breakpoints to match default TW ones (removed XS)
+- Updated generic styles
+
+## 3.0.0
 ### Added
 - Webpack JS audit
 - JS improvement

diff --git a/_src/html/_layout/header.njk b/_src/html/_layout/header.njk
@@ -1,6 +1,6 @@
 <header class="header {{ headerInitTheme }}">
-	<div class="container header__inner">
-		<div class="grid grid-cols-4 md:grid-cols-12 header__grid">
+	<div class="container relative h-full z-10">
+		<div class="grid grid-cols-4 md:grid-cols-12 items-center h-full">
             <div class="col-span-3 md:col-span-4">
                 <h1 class="header__logo title-3">
     				<a href="/">{{ siteDetails.title }}</a>

diff --git a/_src/html/components/accordions.njk b/_src/html/components/accordions.njk
@@ -15,9 +15,9 @@
         {% for item in items %}
             {% set contentElements = item.contentElements %}
             <li class="accordion" data-accordion>
-                <div class="accordion__title" id="{{ accordions.id }}-{{ loop.index }}" data-accordion-title aria-expanded="false" aria-controls="{{ accordions.id }}-{{ loop.index }}">
+                <button class="accordion__title" id="{{ accordions.id }}-{{ loop.index }}" data-accordion-title aria-expanded="false" aria-controls="{{ accordions.id }}-{{ loop.index }}">
                     <{{ accordionHeadingLevel }} class="title-5">{{ item.title }}<{{ accordionHeadingLevel }}>
-                </div>
+                </button>
                 <div class="accordion__body" aria-labelledby="{{ accordions.id }}-{{ loop.index }}"  data-accordion-body id="{{ accordions.id }}-{{ loop.index }}">
                     <div class="pt-4 px-5 pb-10">
                         {% include 'elements/w-content.njk' %}

diff --git a/_src/html/form/fields/select.njk b/_src/html/form/fields/select.njk
@@ -12,6 +12,9 @@
             required
         {% endif %}
     >
+        {% if placeholder %}
+            <option selected disabled>{{ placeholder }}</option>
+        {% endif %}
         {% for option in field.options %}
             <option value="{{ option.value }}">{{ option.label|safe }}</option>
         {% endfor %}

diff --git a/_src/html/pages/index.njk b/_src/html/pages/index.njk
@@ -166,6 +166,26 @@
                 type: 'email',
                 id: 'email'
             },
+            {
+                label: 'Select field',
+                placeholder: 'This is the placeholder',
+                type: 'select',
+                options: [
+                    {
+                        value: 'option-1',
+                        label: 'Option 1'
+                    },
+                    {
+                        value: 'option-2',
+                        label: 'Option 2'
+                    },
+                    {
+                        value: 'option-3',
+                        label: 'Option 3'
+                    }
+                ],
+                id: 'name'
+            },
             {
                 label: 'Telephone',
                 placeholder: '+44 1234 567 890',

diff --git a/_src/scripts/default/accordions.ts b/_src/scripts/default/accordions.ts
@@ -1,13 +1,20 @@
 export default function accordions() {
     const accordions = document.querySelectorAll('[data-accordion]')
     const accordionTitles = document.querySelectorAll('[data-accordion-title]')
-    const activeClass = 'is-active'
+    const hiddenClass = 'is-hidden'
     let thisGroup
+    let accordionBody
+    let accordionHeight
 
     if (accordions) {
         accordionTitles.forEach(accordionTitle => {
+            accordionBody = accordionTitle.nextElementSibling
+            accordionHeight = accordionBody.offsetHeight
+            accordionBody.dataset.height = accordionHeight
+            accordionTitle.parentElement.classList.add('is-hidden')
+
             accordionTitle.addEventListener('click', function(el) {
-                if (this.parentElement.classList.contains(activeClass)) {
+                if (!this.parentElement.classList.contains(hiddenClass)) {
                     closeAccordion(this)
                 } else {
                     openAccordion(this)
@@ -17,19 +24,27 @@ export default function accordions() {
     }
 
     function openAccordion(title) {
+        // Enable this to close other accordions when one is opened.
+        // closeOthers(title)
+        accordionHeight = title.nextElementSibling.dataset.height
+        console.log(accordionHeight)
+        title.nextElementSibling.style.height = `${accordionHeight}px`
+        title.parentElement.classList.remove(hiddenClass)
+        title.setAttribute('aria-expanded', true)
+    }
+
+    function closeAccordion(title) {
+        title.parentElement.classList.add(hiddenClass)
+        title.nextElementSibling.style.height = null
+        title.setAttribute('aria-expanded', false)
+    }
+
+    function closeOthers(title) {
         thisGroup = title.closest('[data-accordion-wrap]')
         thisGroup = thisGroup.querySelectorAll('[data-accordion]')
 
         thisGroup.forEach(accordion => {
             closeAccordion(accordion.querySelector('[data-accordion-title]'))
         })
-
-        title.parentElement.classList.add(activeClass)
-        title.setAttribute('aria-expanded', true)
-    }
-
-    function closeAccordion(title) {
-        title.parentElement.classList.remove(activeClass)
-        title.setAttribute('aria-expanded', false)
     }
 }
diff --git a/_src/styles/_core/mixins/font-size.scss b/_src/styles/_core/mixins/font-size.scss
@@ -5,8 +5,8 @@
 }
 
 // @include resp-font-size('sm', 'lg', 'xl, '4xl');
-@mixin resp-font-size($xs, $sm: $xs, $md: $sm, $lg: $md, $xl: $lg) {
-    @each $break, $size in (xs: $xs, sm: $sm, md: $md, lg: $lg, xl: $xl) {
+@mixin resp-font-size($sm, $md: $sm, $lg: $md, $xl: $lg, $xxl: $xl) {
+    @each $break, $size in (sm: $sm, md: $md, lg: $lg, xl: $xl, 2xl: $xxl) {
         @screen #{$break} {
             @apply text-#{$size};
         }

diff --git a/_src/styles/elements/accordion.scss b/_src/styles/elements/accordion.scss
@@ -5,19 +5,23 @@
     }
 
     &__title {
-        @apply p-4 text-white bg-indigo-500 rounded-lg hover:bg-indigo-600 transition-colors;
+        @apply p-4 text-white bg-indigo-500 rounded-lg transition-colors block w-full text-left;
         cursor: pointer;
 
-        .is-active & {
-            @apply bg-red-500 hover:bg-red-600;
+        &:hover,
+        &:focus {
+            @apply bg-indigo-600;
         }
     }
 
     &__body {
-        @apply hidden;
+        @apply overflow-hidden;
+        transition: height .4s ease-in-out;
+        visible: visible;
 
-        .is-active & {
-            @apply block;
+        .is-hidden & {
+            visible: hidden;
+            height: 0;
         }
     }
 }
diff --git a/_src/styles/form/field.scss b/_src/styles/form/field.scss
@@ -13,11 +13,29 @@
         @apply flex h-10 items-center;
     }
 
+    &__select-wrap {
+        @apply w-full block relative;
+
+        &:after {
+            @apply absolute right-0 mr-3;
+            pointer-events: none;
+            top: 50%;
+            transform: translate3d(0,-50%,0);
+            content: '↓',
+        }
+    }
+
     &__input {
-        @apply border-2 transition-colors text-black rounded-lg border-gray-300 block bg-white hover:border-gray-400 focus:border-gray-600;
+        @apply border-2 transition-colors text-black rounded-lg border-gray-300 block bg-white;
         appearance: none;
 
+        &:hover {
+            @apply border-gray-800;
+        }
+
         &:focus {
+            @apply border-gray-600;
+
             &:valid {
                 @apply border-green-500;
             }

diff --git a/_src/styles/layout/header.scss b/_src/styles/layout/header.scss
@@ -25,17 +25,4 @@
         width: calc(100% + 4rem);
         transform: translateX(-2rem);
     }
-
-    &__inner {
-        @apply relative h-full;
-        z-index: 2;
-    }
-
-    &__grid {
-        @apply items-center h-full;
-    }
-
-    &__logo {
-        @apply italic;
-    }
 }
diff --git a/_src/styles/typography/base.scss b/_src/styles/typography/base.scss
@@ -21,8 +21,8 @@ body {
     }
 
     a {
-        @apply border-b border-current;
-        border-spacing: unset;
+        @apply underline;
+        text-underline-offset: 2px;
         transition: color .2s ease-in-out;
 
         &:hover {

diff --git a/_src/styles/typography/headings.scss b/_src/styles/typography/headings.scss
@@ -1,29 +1,29 @@
-h1,.title-1 {
+h1, .title-1 {
     @apply font-bold leading-none font-sans text-2xl;
     @include resp-font-size('4xl','5xl','6xl','7xl','7xl');
 }
 
-h2,.title-2 {
+h2, .title-2 {
     @apply font-bold leading-none font-sans text-xl;
     @include resp-font-size('2xl','3xl','4xl','5xl','6xl');
 }
 
-h3,.title-3 {
+h3, .title-3 {
     @apply font-bold leading-none font-sans text-lg;
     @include resp-font-size('xl','2xl','3xl','3xl','4xl');
 }
 
-h4,.title-4 {
+h4, .title-4 {
     @apply font-bold leading-none font-sans text-lg;
     @include resp-font-size('xl','xl','2xl','2xl','3xl');
 }
 
-h5,.title-5 {
+h5, .title-5 {
     @apply font-bold leading-none font-sans text-base;
     @include resp-font-size('lg','lg','xl','xl','2xl');
 }
 
-h6,.title-6 {
+h6, .title-6 {
     @apply font-bold leading-none font-sans text-base;
     @include resp-font-size('base','lg','lg','lg','xl');
 }