feat(settings modal)

cypress/integration/settings.js

@@ -0,0 +1,13 @@
+it('should be able to open and close the settings modal', () => {
+    cy.visit('/')
+        .get('[data-testid=component-name]')
+        .get('[data-testid=settings-panel-open-button')
+        .should('be.visible')
+        .click()
+        .get('[data-testid=settings-panel')
+        .should('be.visible')
+        .get('[data-testid=settings-panel-close-button')
+        .click({ force: true }) // Have to force it because of the absolute positioning
+        .get('[data-testid=settings-panel')
+        .should('not.be.visible')
+})

package.json

@@ -45,6 +45,6 @@
         }
     },
     "lint-staged": {
-        "*.{js,css,md}": "prettier --write"
+        "*.{js,css,md,html}": "prettier --write"
     }
 }

packages/shell-chrome/assets/panel.html

@@ -122,6 +122,23 @@
                                 ></path>
                             </svg>
                         </a>
+                        <button
+                            data-testid="settings-panel-open-button"
+                            class="hover:opacity-75 focus:outline-none"
+                            x-show="settingsPanelEnabled"
+                            @click="settingsPanelOpen = true"
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="fill-current w-5 h-5">
+                                <title>Settings</title>
+                                <g stroke="none" stroke-width="1" fill-rule="evenodd">
+                                    <g>
+                                        <path
+                                            d="M3.93830521,6.49683865 C3.63405147,7.02216933 3.39612833,7.5907092 3.23599205,8.19100199 L5.9747955e-16,9 L9.6487359e-16,11 L3.23599205,11.808998 C3.39612833,12.4092908 3.63405147,12.9778307 3.93830521,13.5031614 L2.22182541,16.363961 L3.63603897,17.7781746 L6.49683865,16.0616948 C7.02216933,16.3659485 7.5907092,16.6038717 8.19100199,16.7640079 L9,20 L11,20 L11.808998,16.7640079 C12.4092908,16.6038717 12.9778307,16.3659485 13.5031614,16.0616948 L16.363961,17.7781746 L17.7781746,16.363961 L16.0616948,13.5031614 C16.3659485,12.9778307 16.6038717,12.4092908 16.7640079,11.808998 L20,11 L20,9 L16.7640079,8.19100199 C16.6038717,7.5907092 16.3659485,7.02216933 16.0616948,6.49683865 L17.7781746,3.63603897 L16.363961,2.22182541 L13.5031614,3.93830521 C12.9778307,3.63405147 12.4092908,3.39612833 11.808998,3.23599205 L11,0 L9,0 L8.19100199,3.23599205 C7.5907092,3.39612833 7.02216933,3.63405147 6.49683865,3.93830521 L3.63603897,2.22182541 L2.22182541,3.63603897 L3.93830521,6.49683865 L3.93830521,6.49683865 Z M10,13 C11.6568542,13 13,11.6568542 13,10 C13,8.34314575 11.6568542,7 10,7 C8.34314575,7 7,8.34314575 7,10 C7,11.6568542 8.34314575,13 10,13 L10,13 Z"
+                                        ></path>
+                                    </g>
+                                </g>
+                            </svg>
+                        </button>
                     </div>
                 </div>
 
@@ -395,9 +412,60 @@ <h5 class="flex items-center px-2 leading-7 font-mono whitespace-no-wrap">
                         </div>
                     </div>
                 </div>
+                <div
+                    data-testid="settings-panel"
+                    x-show="settingsPanelEnabled && settingsPanelOpen"
+                    class="inset-0 absolute flex flex-col items-center justify-center z-max"
+                >
+                    <div class="absolute opacity-75 bg-white inset-0"></div>
+                    <div
+                        class="p-8 flex-1 flex items-center justify-center w-full relative z-50"
+                        @click="settingsPanelOpen = false"
+                    >
+                        <div
+                            x-show.transition.in.opacity="settingsPanelOpen"
+                            class="bg-white w-full h-full p-8 shadow-lg relative"
+                            @click.stop
+                        >
+                            <button
+                                data-testid="settings-panel-close-button"
+                                class="absolute top-0 right-0 focus:outline-none block"
+                                @click="settingsPanelOpen = false"
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 20 20"
+                                    class="text-black absolute top-1 right-1 w-5 h-5"
+                                    fill="currentColor"
+                                >
+                                    <path
+                                        fill-rule="evenodd"
+                                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                        clip-rule="evenodd"
+                                    />
+                                </svg>
+                            </button>
+                            <div class="flex space-x-12">
+                                <div>
+                                    <h2 class="text-xl font-light">Settings</h2>
+                                    <nav class="flex flex-col items-start text-ms mt-3 text-cool-gray-500 space-y-1">
+                                        <button>Preferences</button>
+                                        <button>Workspace</button>
+                                        <button>Experiments</button>
+                                    </nav>
+                                </div>
+                                <div class="flex-grow">
+                                    <div class="w-full border-b border-cool-gray-200 mb-6 pb-2">
+                                        <h3 class="text-2xl font-light">Preferences</h3>
+                                    </div>
+                                    <div>Content</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-
         <script src="./panel.js"></script>
     </body>
 </html>

packages/shell-chrome/src/devtools/devtools.js

@@ -35,6 +35,9 @@ export default function devtools() {
 
         themes: themes,
 
+        settingsPanelEnabled: process.env.NODE_ENV !== 'production',
+        settingsPanelOpen: false,
+
         get isLatest() {
             if (!this.version || !this.latest) return null
             return isRequiredVersion(this.latest, this.version)

tailwind.config.js

@@ -60,6 +60,9 @@ module.exports = {
             gridTemplateColumns: {
                 panes: '1fr 1px 1fr',
             },
+            zIndex: {
+                max: '2147483647',
+            },
         },
     },
     variants: {