Docs update

finlay-x · Jan 21, 2024 · 7f7bd91 · 7f7bd91
1 parent 2360854
commit 7f7bd91
Show file tree

Hide file tree

Showing 26 changed files with 358 additions and 80 deletions.
diff --git a/docs/assets/scripts/app.min.js b/docs/assets/scripts/app.min.js
diff --git a/docs/assets/scripts/app.min.js.map b/docs/assets/scripts/app.min.js.map
diff --git a/docs/assets/vendor/scripts/prism.js b/docs/assets/vendor/scripts/prism.js
diff --git a/docs/assets/vendor/styles/prism.css b/docs/assets/vendor/styles/prism.css
diff --git a/docs/index.html b/docs/index.html
@@ -8,28 +8,110 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="description" content="Meta description of this page.">
         <title>f11y</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
         <link rel="stylesheet" rel="preload" as="style" href="../docs/assets/styles/app.min.css"/>
+        <link rel="stylesheet" rel="preload" as="style" href="../docs/assets/vendor/styles/prism.css"/>
     </head>
     <body class="">
         <a class="is-visually-hidden skip-content" role="link" title="Skip to content" href="#content">Skip To Content</a>
         <div id="page" class="site-content">
             <header id="masthead" class="site-header">
                 <div class="content-width base-layout">
-                    <h1 class="has-no-margin">f11y</h1>
+                    <h1 class="has-no-margin x-l-b">
+                        <span class="is-visually-hidden">f11y</span>
+                        <img alt="f11y logo" width="85" src="../docs/assets/f11y-logo.svg">
+                    </h1> 
+                    <h2 class="is-margin-centered is-text-centered x-l-b f11y-white weight-200 is-italic">A functionality component library written in pure JavaScript <sup class="weight-600 s-b">+JSDoc</sup> for pure JavaScript <sup class="weight-600 s-b">with TS support</sup></h2>
                 </div>
             </header>
             <main id="content" class="entry-content">
-                <article class="hentry">Hello
+                <article class="hentry">
+<section>
+<div class="component--title f11y-white">
+    <span class="x-l-h uses-garamond weight-700">#</span>
+    <h2 class="h-h uses-garamond">Accordion</h2>
+</div>
+    <div>
+        <div class="f11y--tabs">
+            <div role="tablist" aria-labelledby="tablist">
+                <button id="tab-html-88130884" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-html-88130884">
+                    HTML
+                </button>
+                <button id="tab-css-88130884" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-css-88130884">
+                    CSS
+                </button>
+                <button id="tab-js-88130884" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-js-88130884">
+                    JavaScript
+                </button>
+            </div>
+
+            <div id="tabpanel-html-88130884" role="tabpanel" aria-labelledby="tab-html-88130884">
+                <pre id="pre-html-88130884" class="line-numbers linkable-line-numbers" data-line="3,6,9">
+                    <code class="language-markup line-numbers"><!--
+                        <div class="f11y--tabs">
+                            <div role="tablist" aria-labelledby="tablist">
+                                <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
+                                    Tab Item 1
+                                </button>
+                                <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2">
+                                    Tab Item 2
+                                </button>
+                                <button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3">
+                                    Tab Item 3
+                                </button>
+                            </div>
+                        
+                            <div id="tabpanel-1" role="tabpanel" aria-labelledby="tab-1">
+                                <p>Tab Panel Content 1</p>
+                            </div>
+                            <div id="tabpanel-2" role="tabpanel" aria-labelledby="tab-2">
+                                <p>Tab Panel Content 2</p>
+                            </div>
+                            <div id="tabpanel-3" role="tabpanel" aria-labelledby="tab-3">
+                                <p>Tab Panel Content 3</p>
+                            </div>
+                        </div>
+                    --></code>
+                </pre>
+            </div>
+            <div id="tabpanel-css-88130884" role="tabpanel" aria-labelledby="tab-css-88130884">
+                <pre id="pre-css-88130884" class="line-numbers linkable-line-numbers">
+                    <code class="language-css line-numbers">
+
+                    </code>
+                </pre>
+            </div>
+            <div id="tabpanel-js-88130884" role="tabpanel" aria-labelledby="tab-js-88130884">
+                <pre id="pre-js-88130884" class="line-numbers linkable-line-numbers">
+                    <code class="language-javascript line-numbers">
+                        const tabList = document.querySelector(".f11y--tabs");
+                        new f11y.TabList(
+                            tabList,
+                            {
+                                onChange: () => { },
+                                orientation: "horizontal",
+                                disableActiveTab: false 
+                            }
+                        );
+                    </code>
+                </pre>
+            </div>
+        </div>
+    </div>
+</section>
+
             </article> <!-- END OF .hentry -->
         </main> <!-- END OF .entry-content -->
-
+        <!--
         <footer id="colophon" class="site-footer">
-            <div class="content-width base-layout bp-white">
+            <div class="content-width base-layout f11y-white">
                 <p>f11y</p>
             </div>
         </footer>
-
+        -->
+        <script src="../docs/assets/vendor/scripts/prism.js" defer></script>
         <script src="../docs/assets/scripts/app.min.js" defer></script>
-
     </body>
 </html>
diff --git a/docs/index.php b/docs/index.php
@@ -10,7 +10,10 @@
     array()
 );
 
-echo 'Hello';
+render_partial(
+    'sections/section-accordion', 
+    array()
+);
 
 render_partial(
     'footer', 

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -19,6 +19,7 @@
         "browser-sync": "^2.29.3",
         "cssnano": "^6.0.1",
         "del": "6.1.1",
+        "f11y": "^0.0.6",
         "gulp": "^4.0.2",
         "gulp-esbuild": "^0.11.2",
         "gulp-postcss": "^9.0.1",

diff --git a/docs/src/js/app.js b/docs/src/js/app.js
@@ -0,0 +1,11 @@
+import f11y from 'f11y';
+
+const tabList = document.querySelector(".f11y--tabs");
+new f11y.TabList(
+    tabList,
+    {
+        onChange: () => { },
+        orientation: 'horizontal',
+        disableActiveTab: false 
+    }
+);
diff --git a/docs/src/scss/core/_reset.scss b/docs/src/scss/core/_reset.scss
@@ -6,7 +6,8 @@
 html {
     -webkit-text-size-adjust: 100%;
     font-family: v.$body-font;
-    color: rgba(v.$bp-black,1);
+    color: rgba(v.$f11y-dark,1);
+    background-color: rgba(v.$f11y-blue,1);
     scroll-behavior: smooth;
     font-size:1em;
 }
@@ -19,7 +20,7 @@ html {
 }
 
 *:focus-visible{
-    outline: 2px solid v.$bp-black;
+    outline: 2px solid v.$f11y-dark;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -56,7 +57,7 @@ hr {
     height: 1px;
     overflow: visible;
     width: 100%;
-    background-color: rgba(v.$bp-black,1);
+    background-color: rgba(v.$f11y-dark,1);
     border: none;
 }
 
@@ -104,11 +105,17 @@ ol ol{
 
 code,
 kbd,
-samp {
-    font-family: monospace, monospace;
+samp,
+:root code *{
+    font-family: monospace, monospace !important;
     font-size: 1em;
 }
 
+:not(pre) > code[class*="language-"], pre[class*="language-"]{
+    background-color: v.$f11y-dark !important;
+    color: v.$f11y-white !important;
+}
+
 small {
     font-size: 80%;
 }
@@ -153,7 +160,7 @@ textarea {
 ::-moz-placeholder,
 ::placeholder,
 ::-webkit-input-placeholder{
-    color: rgba(v.$bp-black,0.75);
+    color: rgba(v.$f11y-dark,0.75);
 }
 
 input:focus::placeholder,
@@ -254,7 +261,7 @@ figure{
 
 figure > video + figcaption,
 figure > img + figcaption{
-    @extend .small-body;
+    @extend .s-b;
 }
 
 figure > video + figcaption{

diff --git a/docs/src/scss/helpers/_classes.scss b/docs/src/scss/helpers/_classes.scss
@@ -64,6 +64,10 @@
     text-align:center;
 }
 
+.is-italic{
+    font-style: italic;
+}
+
 .is-visually-hidden {
     border: 0;
     clip: rect(1px,1px,1px,1px);
@@ -82,6 +86,12 @@
     overflow: hidden;
 }
 
+:root .uses-garamond{
+    font-family: "EB Garamond", serif !important;
+    font-optical-sizing: auto;
+    font-style: normal;
+    letter-spacing: -0.03em;
+}
 
 /* ------------------------------------------------
     Grid Column Classes

diff --git a/docs/src/scss/helpers/_mixins.scss b/docs/src/scss/helpers/_mixins.scss
@@ -8,14 +8,15 @@
 @mixin heading {
     font-family: v.$heading-font;
     font-style: normal;
-    color: rgba(v.$bp-black,1);
+    line-height: 155%;
+    color: rgba(v.$f11y-dark,1);
     margin: .3rem 0 .67rem;
 }
 
 @mixin body {
     font-family: v.$body-font;
-    line-height: 150%;
-    color:rgba(v.$bp-black,1);
+    line-height: 155%;
+    color:rgba(v.$f11y-dark,1);
     font-weight: 300;
 }
 

diff --git a/docs/src/scss/helpers/_variables.scss b/docs/src/scss/helpers/_variables.scss
@@ -2,43 +2,43 @@
     Breakpoints
 -------------------------------------------------*/
 $mobile-breakpoint: 400;
-$desktop-breakpoint: 1200;
+$desktop-breakpoint: 1180;
 $tablet-size: calc($desktop-breakpoint - $mobile-breakpoint);
 
 
 /* ------------------------------------------------
     Typography
 -------------------------------------------------*/
 /* Fonts */
-$heading-font: 'Trebuchet MS' , sans-serif;
-$body-font: 'Arial' , sans-serif;
+$heading-font: 'Figtree' , serif;
+$body-font: 'Figtree' , sans-serif;
 
 /* Font Sizes */
 $heading-sizes: (
     "h1" : (
         "slug" : "h",
         "mobile" : 45px,
-        "desktop" : 66px,
+        "desktop" : 161px,
     ),
     "h2" : (
         "slug" : "x-l",
         "mobile" : 38px,
-        "desktop" : 55px
+        "desktop" : 128px
     ),
     "h3" : (
         "slug" : "l",
         "mobile" : 31px,
-        "desktop" : 46px
+        "desktop" : 100px
     ),
     "h4" : (
         "slug" : "m",
         "mobile" : 26px,
-        "desktop" : 38px
+        "desktop" : 70px
     ),
     "h5" : (
         "slug" : "n",
         "mobile" : 22px,
-        "desktop" : 32px
+        "desktop" : 40px
     ),
     "h6" : (
         "slug" : "s",
@@ -49,24 +49,24 @@ $heading-sizes: (
 
 $body-sizes: (
     "h" : (
-        "mobile" : 27px,
-        "desktop" : 33px,
+        "mobile" : 20px,
+        "desktop" : 22px,
     ),
     "x-l" : (
-        "mobile" : 23px,
-        "desktop" : 27px
+        "mobile" : 18px,
+        "desktop" : 20px
     ),
     "l" : (
-        "mobile" : 19px,
-        "desktop" : 24px
+        "mobile" : 16px,
+        "desktop" : 18px
     ),
     "m" : (
         "mobile" : 16px,
-        "desktop" : 20px
+        "desktop" : 16px
     ),
     "n" : (
-        "mobile" : 16px,
-        "desktop" : 16px
+        "mobile" : 15px,
+        "desktop" : 15px
     ),
     "s" : (
         "mobile" : 14px,
@@ -105,13 +105,15 @@ $font-weights: (
 /* ------------------------------------------------
     Colours
 -------------------------------------------------*/
-$bp-black: #000000;
-$bp-white: #FFFFFF;
+$f11y-blue: #0046F0;
+$f11y-dark: #161D27;
+$f11y-white: #E2DBD7;
 
 /* SCSS Colours Maps */
 $colours: (
-    bp-black: $bp-black,
-    bp-white: $bp-white
+    f11y-blue: $f11y-blue,
+    f11y-dark: $f11y-dark,
+    f11y-white: $f11y-white
 );