pr360-questionnaire 0.0.1

package/build.mjs

@@ -0,0 +1,64 @@
+import esbuild from 'esbuild';
+import {sassPlugin} from 'esbuild-sass-plugin';
+
+const args = process.argv.slice(2)
+const watch = args.includes('--watch')
+const deploy = args.includes('--deploy')
+
+const loader = {
+  // Add loaders for images/fonts/etc, e.g. { '.svg': 'file' }
+}
+
+const plugins = [
+  sassPlugin({
+    filter: /.lit.s?css$/,
+    type: 'lit-css'
+  }),
+  sassPlugin()
+];
+
+let opts = {
+  entryPoints: ['js/app.js', 'css/app.scss'],
+  bundle: true,
+  target: 'es2020',
+  outdir: '../priv/static/assets',
+  logLevel: 'info',
+  external: ['/fonts/*', '/images/*', '/favicon.ico'],
+  loader,
+  plugins
+}
+
+let packageOpts = {
+  ...opts,
+  outdir: './dist',
+  entryPoints: ['js/index.js']
+}
+
+let testOpts = {
+  ...opts,
+  entryPoints: ['test/questionnaire-test.ts'],
+  outdir: './build'
+}
+
+if (watch) {
+  opts = {
+    ...opts,
+    sourcemap: 'inline'
+  }
+}
+
+if (deploy) {
+  opts = {
+    ...opts,
+    minify: true
+  }
+}
+
+if (watch) {
+  let ctx = await esbuild.context(opts);
+  await ctx.watch();
+} else {
+  esbuild.build(opts);
+  esbuild.build(packageOpts);
+  esbuild.build(testOpts);
+}

package/css/app.scss

@@ -0,0 +1,39 @@
+// BASE STYLES
+@import './base/reset';
+@import './base/variables';
+@import './base/layout';
+@import './base/mixins';
+@import './base/typography';
+
+
+// COMPONENTS
+@import './components/buttons';
+@import './components/inputs';
+@import './components/tables';
+@import './components/tabs';
+@import './components/modal';
+@import './components/flash-messages';
+@import './components/questionnaire';
+
+// Imported last to take precedence in the cascade
+@import './base/utilities';
+
+
+/* LiveView specific classes for your customization */
+.phx-no-feedback.invalid-feedback,
+.phx-no-feedback .invalid-feedback {
+  display: none;
+}
+
+.phx-click-loading {
+  opacity: 0.5;
+  transition: opacity 1s ease-out;
+}
+
+.phx-loading{
+  cursor: wait;
+}
+
+[hidden] {
+  display: none;
+}

package/css/base/_layout.scss

@@ -0,0 +1,56 @@
+body {
+    background-color: $white;
+    display: grid;
+        grid-template-rows: auto 1fr auto;
+        gap: $space-md;
+    width: 100%;
+}
+
+header,
+.header {
+    display: grid;
+        gap: $space-sm;
+        align-items: end;
+        grid-template-columns: 1fr auto auto auto auto;
+    font-size: $small-font-size;
+    padding: $space-sm $space-md;
+
+    @media screen and (max-width: $screen-tablet) {
+        grid-template-columns: auto 1fr;
+        grid-template-rows: auto auto;
+        grid-template-areas: "logo settings"
+        "nav nav";
+
+        nav {
+            grid-area: nav;
+            margin-bottom: $space-xs;
+        }
+
+        .logo {grid-area: logo;}
+
+        .user-links {grid-area: settings;}
+    }
+}
+
+main {
+    margin: 0 auto;
+    max-width: 80rem;
+    padding: 0 $space-md;
+    width: 100%;
+}
+
+footer {
+    border-top: $border;
+    padding: $space-sm $space-md;
+}
+
+.aside-right {
+    display: grid;
+        gap: $space-sm;
+        grid-template-columns: 4fr 3fr;
+        align-items: start;
+
+    @media screen and (max-width: $screen-tablet) {
+        grid-template-columns: 1fr;
+    }
+}

package/css/base/_mixins.scss

@@ -0,0 +1,31 @@
+@mixin focus-visible {
+    &:focus-visible {
+        outline: 2px solid $color-info;
+        outline-offset: 2px;
+    }
+}
+
+@mixin icon-styles {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;  /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+  
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+  
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+  
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+}

package/css/base/_reset.scss

@@ -0,0 +1,52 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+    box-sizing: border-box;
+  }
+  /*
+    2. Remove default margin
+  */
+  * {
+    margin: 0;
+  }
+  /*
+    3. Allow percentage-based heights in the application
+  */
+  html, body {
+    height: 100%;
+  }
+  /*
+    Typographic tweaks!
+    4. Add accessible line-height
+    5. Improve text rendering
+  */
+  body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  /*
+    6. Improve media defaults
+  */
+  img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+  }
+  /*
+    7. Remove built-in form typography styles
+  */
+  input, button, textarea, select {
+    font: inherit;
+  }
+  /*
+    8. Avoid text overflows
+  */
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+  /*
+    9. Create a root stacking context
+  */
+  #root, #__next {
+    isolation: isolate;
+  }

package/css/base/_typography.scss

@@ -0,0 +1,118 @@
+body {
+    color: $black;
+    font-family: $font-family-body;
+    font-size: $base-font-size;
+    font-size: $clamp-font-size;
+    line-height: $base-line-height;
+}
+
+* {
+    &:focus-visible {
+        @include focus-visible;
+    }
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+    font-family: $font-family-header;
+    line-height: $header-line-height;
+    margin: $space-md 0 $space-xxs 0;
+
+    &:first-child {
+        margin-top: 0;
+    }
+}
+
+h1, .h1 {
+    font-size: $h1-font-size;
+    font-weight: $header-bold;
+}
+
+h2, .h2 {
+    font-size: $h2-font-size;
+    font-weight: $header-md;
+}
+
+h3, .h3 {
+    font-size: $h3-font-size;
+}
+
+h4, .h4 {
+    font-size: $h4-font-size;
+}
+
+h5, .h5 {
+    font-size: $h5-font-size;
+}
+
+h6, .h6 {
+    font-size: $h6-font-size;
+}
+
+p {
+    margin: 0 0 $space-sm 0;
+}
+
+.p-sm {
+    font-size: 14px;
+    margin-bottom: 0px;
+    color: $gray-dark;
+}
+a,
+.text-link {
+    background:
+        linear-gradient(
+        to right,
+        transparent,
+        transparent
+        ),
+        linear-gradient(
+        to right,
+        $color-primary,
+        $color-primary
+    );
+    background-size: 100% 2px, 0 2px;
+    background-position: 100% 100%, 0 100%;
+    background-repeat: no-repeat;
+    border: 0;
+    border-radius: unset;
+    box-shadow: none;
+    color: $color-primary;
+    display: inline-block;
+    font-size: $base-font-size;
+    font-weight: $body-regular;
+    padding: 0;
+    text-decoration: none;
+    transition: all .2s ease;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-size: 0 2px, 100% 2px;
+    }
+
+    &[phx-click] {
+        cursor: pointer;
+    }
+
+    &[href]:empty {
+        color: $color-error !important;
+    }
+
+    &[disabled] {
+        background: transparent !important;
+        cursor: not-allowed;
+        color: $gray-dark;
+
+        &:hover,
+        &:active,
+        &:focus {
+            background: transparent;
+        }
+    }
+}
+

package/css/base/_utilities.scss

@@ -0,0 +1,289 @@
+// MARGIN
+.u-push {
+    margin: $space-md;
+
+    &--none {
+        margin: 0;
+    }
+
+    &--xs {
+        margin: $space-xs;
+    }
+    &--sm {
+        margin: $space-sm;
+    }
+    &--lg {
+        margin: $space-lg;
+    }
+    &--xl {
+        margin: $space-xl;
+    }
+
+    &-top {
+        margin-top: $space-md;
+
+        &--none {
+            margin-top: 0;
+        }
+
+        &--xs {
+            margin-top: $space-xs !important;
+        }
+        &--sm {
+            margin-top: $space-sm;
+        }
+        &--lg {
+            margin-top: $space-lg;
+        }
+        &--xl {
+            margin-top: $space-xl;
+        }
+    }
+
+    &-right {
+        margin-right: $space-md;
+
+        &--none {
+            margin-right: 0;
+        }
+
+        &--xs {
+            margin-right: $space-xs;
+        }
+        &--sm {
+            margin-right: $space-sm;
+        }
+        &--lg {
+            margin-right: $space-lg;
+        }
+        &--xl {
+            margin-right: $space-xl;
+        }
+    }
+
+    &-bottom {
+        margin-bottom: $space-md;
+
+        &--none {
+            margin-bottom: 0;
+        }
+
+        &--xs {
+            margin-bottom: $space-xs;
+        }
+        &--sm {
+            margin-bottom: $space-sm;
+        }
+        &--lg {
+            margin-bottom: $space-lg;
+        }
+        &--xl {
+            margin-bottom: $space-xl;
+        }
+    }
+
+    &-left {
+        margin-left: $space-md;
+
+        &--none {
+            margin-left: 0;
+        }
+
+        &--xs {
+            margin-left: $space-xs;
+        }
+        &--sm {
+            margin-left: $space-sm;
+        }
+        &--lg {
+            margin-left: $space-lg;
+        }
+        &--xl {
+            margin-left: $space-xl;
+        }
+    }
+}
+
+
+// PADDING
+.u-pad {
+    padding: $space-md;
+
+    &--none {
+        padding: 0;
+    }
+
+    &--xs {
+        padding: $space-xs;
+    }
+    &--sm {
+        padding: $space-sm;
+    }
+    &--lg {
+        padding: $space-lg;
+    }
+    &--xl {
+        padding: $space-xl;
+    }
+
+    &-top {
+        padding-top: $space-md;
+
+        &--none {
+            padding-top: 0;
+        }
+
+        &--xs {
+            padding-top: $space-xs;
+        }
+        &--sm {
+            padding-top: $space-sm;
+        }
+        &--lg {
+            padding-top: $space-lg;
+        }
+        &--xl {
+            padding-top: $space-xl;
+        }
+    }
+
+    &-right {
+        padding-right: $space-md;
+
+        &--none {
+            padding-right: 0;
+        }
+
+        &--xs {
+            padding-right: $space-xs;
+        }
+        &--sm {
+            padding-right: $space-sm;
+        }
+        &--lg {
+            padding-right: $space-lg;
+        }
+        &--xl {
+            padding-right: $space-xl;
+        }
+    }
+
+    &-bottom {
+        padding-bottom: $space-md;
+
+        &--none {
+            padding-bottom: 0;
+        }
+
+        &--xs {
+            padding-bottom: $space-xs;
+        }
+        &--sm {
+            padding-bottom: $space-sm;
+        }
+        &--lg {
+            padding-bottom: $space-lg;
+        }
+        &--xl {
+            padding-bottom: $space-xl;
+        }
+    }
+
+    &-left {
+        padding-left: $space-md;
+
+        &--none {
+            padding-left: 0;
+        }
+
+        &--xs {
+            padding-left: $space-xs;
+        }
+        &--sm {
+            padding-left: $space-sm;
+        }
+        &--lg {
+            padding-left: $space-lg;
+        }
+        &--xl {
+            padding-left: $space-xl;
+        }
+    }
+}
+
+
+// WIDTH 
+.u-width {
+
+    &--contained {
+        max-width: $contained-width;
+        width: 100%;
+    }
+}
+
+
+// TYPE SIZES
+.u-font-sm {
+    font-size: $small-font-size !important;
+}
+
+
+// FLEX
+.u-flex {
+    display: flex;
+        gap: $space-xs;
+        align-items: baseline;
+
+    &--between {
+        justify-content: space-between;
+    }
+
+    &--justify-end {
+        justify-content: end;
+    }
+
+    &--sm-gap {
+        gap: $space-sm;
+    }
+}
+
+
+// GRID
+.u-grid {
+    display: grid;
+        gap: 0 $space-xs;
+        align-items: baseline;
+        justify-items: start;
+
+        @media screen and (max-width:$screen-mobile) {
+            grid-template-columns: 1fr;
+        }
+    
+    &--3 {
+        grid-template-columns: 1fr 2fr auto;
+    }
+}
+
+
+// DISPLAY
+.u-block {
+    display: block;
+}
+
+.u-inline-block {
+    display: inline-block;
+}
+
+
+// POSITION
+.u-relative {
+    position: relative;
+}
+
+
+// COLORS
+.u-color {
+    &-error {
+        color: $color-error;
+    }
+}

package/css/base/_variables.scss

@@ -0,0 +1,79 @@
+// SCREEN SIZES
+$screen-mobile: 480px;
+$screen-tablet: 900px;
+$screen-desktop: 1024px;
+
+
+// COLORS
+$color-primary: #0d61af;
+$color-primary-hover: hsl(209, 95%, 25%);
+$color-action: $color-primary;
+$color-action-hover: $color-primary-hover;
+$color-info: #73CCBF;
+$color-error: darken(hsl(7, 75%, 65%), 17%);
+$color-success: #75D481;
+
+// Neutrals are desaturated variants of brand white
+$white: hsl(46, 3%, 98%);
+$gray-lightest: hsl(46, 3%, 93%);
+$gray-lighter: hsl(46, 3%, 85%);
+$gray-light: hsl(46, 3%, 75%);
+$gray: hsl(46, 3%, 58%);
+$gray-dark: hsl(46, 3%, 35%);
+$gray-darkest: hsl(46, 3%, 25%);
+$black: #02215E;
+
+
+// SPACING
+$space-xxs: clamp(.2rem, 1vmin,.25rem);
+$space-xs: clamp(.25rem, 1vmin, .5rem);
+$space-sm: clamp(.5rem, 3vmin, 1rem);
+$space-md: clamp(1rem, 8vmin, 2rem);
+$space-lg: clamp(2rem, 12vmin, 4rem);
+$space-xl: clamp(4rem, 18vmin, 8rem);
+
+$contained-width: 35rem;
+
+
+// BORDERS
+$border: 1px solid $gray-light;
+$border-thick: 2px solid $gray-light;
+
+$border-radius: .25rem;
+$border-radius-pill: 5rem;
+
+
+// TYPOGRAPHY
+$font-family-header: 'Bitter', Georgia, serif;
+$font-family-body: 'Lato', Helvetica, sans-serif;
+
+$body-regular: 400;
+$body-bold: 900;
+$body-md: 700;
+$header-bold: 700;
+$header-md: 500;
+$header-regular: 400;
+
+
+$base-font-size: 16px;
+$clamp-font-size: clamp(14px, 3.5vmin, $base-font-size);
+$small-font-size: .9em;
+$large-font-size: 1.5em;
+$h1-font-size: clamp(1.75rem, 8vmin, 2.25rem);
+$h2-font-size: clamp(1.3rem, 6vmin, 1.5rem);
+$h3-font-size: clamp(1.2rem, 5vmin, 1.3rem);;
+$h4-font-size: clamp(1rem, 4vmin, 1.2rem);;
+$h5-font-size: 1rem;
+$h6-font-size: 1rem;
+
+$base-line-height: 1.5;
+$small-line-height: 1.3;
+$header-line-height: 1.2;
+
+
+// ANIMATION
+$transition: all .2s ease;
+
+
+// SHADOWS
+$box-shadow: 0px 3px 12px transparentize($color-primary, 0.7);