refactor(accordion): major accordion aria / functionality refactor

Author: thejackshelton

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

.vscode/qwik.code-snippets

@@ -0,0 +1,78 @@
+{
+  "Qwik component (simple)": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "qcomponent$",
+    "description": "Simple Qwik component",
+    "body": [
+      "export const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}} = component$(() => {",
+      "  return <${2:div}>$4</$2>",
+      "});"
+    ]
+  },
+  "Qwik component (props)": {
+    "scope": "typescriptreact",
+    "prefix": "qcomponent$ + props",
+    "description": "Qwik component w/ props",
+    "body": [
+      "export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Props {",
+      "  $2",
+      "}",
+      "",
+      "export const $1 = component$<$1Props>((props) => {",
+      "  const ${2:count} = useSignal(0);",
+      "  return (",
+      "    <${3:div} on${4:Click}$={(ev) => {$5}}>",
+      "      $6",
+      "    </${3}>",
+      "  );",
+      "});"
+    ]
+  },
+  "Qwik signal": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseSignal",
+    "description": "useSignal() declaration",
+    "body": ["const ${1:foo} = useSignal($2);", "$0"]
+  },
+  "Qwik store": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseStore",
+    "description": "useStore() declaration",
+    "body": ["const ${1:state} = useStore({", "  $2", "});", "$0"]
+  },
+  "$ hook": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "q$",
+    "description": "$() function hook",
+    "body": ["$(() => {", "  $0", "});", ""]
+  },
+  "useVisibleTask": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseVisibleTask",
+    "description": "useVisibleTask$() function hook",
+    "body": ["useVisibleTask$(({ track }) => {", "  $0", "});", ""]
+  },
+  "useTask": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseTask$",
+    "description": "useTask$() function hook",
+    "body": [
+      "useTask$(({ track }) => {",
+      "  track(() => $1);",
+      "  $0",
+      "});",
+      ""
+    ]
+  },
+  "useResource": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseResource$",
+    "description": "useResource$() declaration",
+    "body": [
+      "const $1 = useResource$(({ track, cleanup }) => {",
+      "  $0",
+      "});",
+      ""
+    ]
+  }
+}

apps/website/postcss.config.cjs

@@ -2,6 +2,7 @@ const path = require('path');
 
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': 'postcss-nested',
     tailwindcss: {
       config: path.join(__dirname, 'tailwind.config.cjs'),
     },

apps/website/src/routes/docs.css

@@ -1,37 +1,45 @@
 .docs {
-  @apply lg:ml-80 w-full lg:max-w-4xl xl:max-w-6xl py-8 px-8 lg:px-16;
-}
-
-.docs h1 {
-  @apply text-5xl font-bold mb-12;
-}
-
-.docs h2 {
-  @apply text-3xl font-bold mt-20 mb-12 border-b-2;
-}
-
-.docs h3 {
-  @apply text-xl font-bold  mb-6;
-}
-
-.docs h4 {
-  @apply text-lg mb-6;
-}
-
-/* Styles Jack has added / will change */
-.docs a {
-  @apply border-b-2 border-[#00B9FC] font-bold;
-}
-
-/* adds sufficient padding to the table items */
-.docs td article {
-  @apply pt-4 pb-4 mb-0;
-}
-
-.docs p {
-  @apply mb-4;
-}
-
-.docs td p {
-  @apply mb-0;
+  & {
+    @apply lg:ml-80 w-full lg:max-w-4xl xl:max-w-6xl py-8 px-8 lg:px-16;
+  }
+
+  /* 
+    Styles that are direct descendents of .docs
+    this should not affect the styles inside of the tabpanel 
+    A.K.A the components
+  */
+  & > {
+    p {
+      @apply mb-4;
+    }
+
+    h1 {
+      @apply text-5xl font-bold mb-12;
+    }
+
+    h2 {
+      @apply text-3xl font-bold mt-20 mb-12 border-b-2;
+    }
+
+    h3 {
+      @apply text-xl font-bold  mb-6;
+    }
+
+    h4 {
+      @apply text-lg mb-6;
+    }
+
+    a {
+      @apply border-b-2 border-[#00B9FC] font-bold;
+    }
+  }
+
+  /* adds sufficient padding to the table items / API Component */
+  td article {
+    @apply pt-4 pb-4 mb-0;
+  }
+
+  td p {
+    @apply mb-0;
+  }
 }