Merge pull request #1516 from EnergySage/ced-1784-EsErrorPage-v3

feat: add EsErrorPage v3

es-ds-components/components/es-error-page.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import IconContactUs from './icon/contact-us.vue';
+import IconCommunitySolar from './icon/community-solar.vue';
+import IconInfoBlogPost from './icon/info-blog-post.vue';
+import IconMarketplace from './icon/marketplace.vue';
+
+const ES_DOMAIN = process.env.ES_DOMAIN || 'https://www.energysage.com';
+const linkItems = [
+    {
+        icon: IconContactUs,
+        link: 'mailto:[email protected]',
+        label: 'Contact us',
+    },
+    {
+        icon: IconCommunitySolar,
+        link: `${ES_DOMAIN}/solar/`,
+        label: 'Learn about solar',
+    },
+    {
+        icon: IconInfoBlogPost,
+        link: `${ES_DOMAIN}/blog/`,
+        label: 'EnergySage blog',
+    },
+    {
+        icon: IconMarketplace,
+        link: `${ES_DOMAIN}/shop/home-solar/`,
+        label: 'EnergySage marketplace',
+    },
+];
+
+const props = defineProps({
+    errorType: {
+        type: String,
+        required: true,
+    },
+});
+
+interface ErrorCode {
+    shortMessage?: string;
+    longMessage: string;
+}
+
+interface ErrorCodeMap {
+    [key: string]: ErrorCode;
+}
+
+const errorCodeToMessages: ErrorCodeMap = {
+    403: {
+        shortMessage: 'Access denied',
+        longMessage:
+            "Oops! If you're seeing this message, there's a good chance you have cookies or " +
+            'referrers turned off in your browser.',
+    },
+    404: {
+        shortMessage: 'Page not found',
+        longMessage: 'Oops! We are terribly sorry, but there is nothing bright to see here.',
+    },
+    500: {
+        shortMessage: 'Internal server error',
+        longMessage: 'Oops! We are terribly sorry, but our server is not so bright today. Please try again.',
+    },
+    503: {
+        shortMessage: 'Service unavailable',
+        longMessage: 'The page you are requesting is temporarily unavailable.',
+    },
+    default: {
+        longMessage: 'Oops! Something went wrong!',
+    },
+};
+
+const messages: ErrorCode = errorCodeToMessages[props.errorType];
+
+const errorShortMessage = messages?.shortMessage || props.errorType;
+
+const errorLongMessage = messages?.longMessage || errorCodeToMessages.default.longMessage;
+</script>
+
+<template>
+    <div class="bg-gray-50">
+        <b-container class="py-500 py-lg-800">
+            <b-row>
+                <b-col
+                    md="7"
+                    class="my-500 mx-auto text-center">
+                    <h1 class="post1 text-gray-600">
+                        {{ errorShortMessage }}
+                    </h1>
+                    <p
+                        id="msgError"
+                        class="font-size-lg text-gray-600">
+                        {{ errorLongMessage }}
+                    </p>
+                </b-col>
+            </b-row>
+            <b-row>
+                <b-col
+                    v-for="(item, index) in linkItems"
+                    :key="index"
+                    cols="6"
+                    md="3">
+                    <a
+                        class="align-items-center d-flex flex-column justify-content-center text-center"
+                        :href="item.link">
+                        <div
+                            class="bg-white d-flex justify-content-center mb-50 rounded-circle"
+                            align-v="center">
+                            <div class="m-100 text-orange">
+                                <component
+                                    :is="item.icon"
+                                    height="53px"
+                                    width="53px" />
+                            </div>
+                        </div>
+                        <p class="mb-200 mb-md-0">{{ item.label }}</p>
+                    </a>
+                </b-col>
+            </b-row>
+        </b-container>
+    </div>
+</template>

es-ds-docs/components/ds-link-list.vue

@@ -17,6 +17,12 @@
             </div>
             <ds-molecules-list class="mb-100" />
         </li>
+        <li>
+            <div class="h4">
+                <ds-link to="/organisms"> Organisms </ds-link>
+            </div>
+            <ds-organisms-list class="mb-100" />
+        </li>
         <li>
             <div class="h4">
                 <ds-link to="/examples"> Examples </ds-link>

es-ds-docs/components/ds-organisms-list.vue

@@ -0,0 +1,7 @@
+<template>
+    <ul class="list-unstyled pl-100">
+        <li>
+            <ds-link to="/organisms/error-page"> Error page </ds-link>
+        </li>
+    </ul>
+</template>

es-ds-docs/pages/index.vue

@@ -30,6 +30,9 @@
             <li>
                 <nuxt-link to="/molecules"> Molecules </nuxt-link>
             </li>
+            <li>
+                <nuxt-link to="/organisms"> Organisms </nuxt-link>
+            </li>
         </ul>
     </div>
 </template>

es-ds-docs/pages/organisms/error-page.vue

@@ -0,0 +1,61 @@
+<script setup>
+definePageMeta({
+    layout: 'full-width-component',
+});
+
+const propTableRows = [['errorType', 'String', 'n/a', 'The type of error to display.']];
+const { $prism } = useNuxtApp();
+const compCode = ref('');
+const docCode = ref('');
+
+if ($prism) {
+    /* eslint-disable import/no-self-import */
+    const compSource = await import('@energysage/es-ds-components/components/es-error-page.vue?raw');
+    const docSource = await import('./error-page.vue?raw');
+    /* eslint-enable import/no-self-import */
+
+    compCode.value = $prism.normalizeCode(compSource.default);
+    docCode.value = $prism.normalizeCode(docSource.default);
+    $prism.highlight();
+}
+</script>
+
+<template>
+    <div>
+        <h1>Error page</h1>
+        <p>
+            The Error Page component is intended to be used in error pages across nuxt apps. The four types of error
+            codes explicitly handled include 403, 404, 500 and 503. This component is intended to take over the entire
+            page between the header and footer.
+        </p>
+        <div class="my-500">
+            <h2>Error 403</h2>
+            <es-error-page error-type="403" />
+        </div>
+        <div class="my-500">
+            <h2>Error 404</h2>
+            <es-error-page error-type="404" />
+        </div>
+        <div class="my-500">
+            <h2>Error 500</h2>
+            <es-error-page error-type="500" />
+        </div>
+        <div class="my-500">
+            <h2>Error 503</h2>
+            <es-error-page error-type="503" />
+        </div>
+        <div class="my-500">
+            <h2>Error 418 (and how other errors look)</h2>
+            <es-error-page error-type="418" />
+        </div>
+        <div class="mb-500">
+            <h2>EsErrorPage props</h2>
+            <ds-prop-table :rows="propTableRows" />
+        </div>
+        <ds-doc-source
+            :comp-code="compCode"
+            comp-source="es-ds-components/src/lib-components/es-error-page.vue"
+            :doc-code="docCode"
+            doc-source="es-ds-docs/pages/organisms/error-page.vue" />
+    </div>
+</template>

es-ds-docs/pages/organisms/index.vue

@@ -0,0 +1,6 @@
+<template>
+    <div>
+        <h1>Organisms</h1>
+        <ds-organisms-list />
+    </div>
+</template>