creativecommons · obulat · Feb 25, 2020 · Feb 6, 2020 · Feb 6, 2020 · Feb 7, 2020
diff --git a/docs/css/app.7f57ad44.css b/docs/css/app.7f57ad44.css
diff --git a/docs/css/app.eb482f5e.css b/docs/css/app.eb482f5e.css
diff --git a/docs/img/cc-logo_white.525b74af.png b/docs/img/cc-logo_white.525b74af.png
diff --git a/docs/img/fc_approved_small.242519d1.png b/docs/img/fc_approved_small.242519d1.png
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><link rel=icon type=image/png href=https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png sizes=192x192><link rel=apple-touch-icon-precomposed href=https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png><meta name=twitter:card content=summary><meta name=twitter:site content=@creativecommons><meta name=twitter:creator content=@creativecommons><meta property=og:url content=https://beta-chooser.creativecommons.org><meta property=og:title content="Choose a License"><meta property=og:type content=website><meta property=og:description content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><meta property=og:image content=https://mirrors.creativecommons.org/presskit/logos/cc.logo.large.png><meta property=og:locale content=en_US><meta property=og:locale:alternate content=ru_RU><title>Creative Commons License Chooser</title><link href=/css/app.eb482f5e.css rel=preload as=style><link href=/css/chunk-vendors.c29f3e02.css rel=preload as=style><link href=/js/app.7e6af1b9.js rel=preload as=script><link href=/js/chunk-vendors.f29b9692.js rel=preload as=script><link href=/css/chunk-vendors.c29f3e02.css rel=stylesheet><link href=/css/app.eb482f5e.css rel=stylesheet></head><body><noscript><strong>We're sorry but License Chooser doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.f29b9692.js></script><script src=/js/app.7e6af1b9.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><link rel=icon type=image/png href=https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png sizes=192x192><link rel=apple-touch-icon-precomposed href=https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png><meta name=twitter:card content=summary><meta name=twitter:site content=@creativecommons><meta name=twitter:creator content=@creativecommons><meta property=og:url content=https://beta-chooser.creativecommons.org><meta property=og:title content="Choose a License"><meta property=og:type content=website><meta property=og:description content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><meta property=og:image content=https://mirrors.creativecommons.org/presskit/logos/cc.logo.large.png><meta property=og:locale content=en_US><meta property=og:locale:alternate content=ru_RU><title>Creative Commons License Chooser</title><link href=/css/app.7f57ad44.css rel=preload as=style><link href=/css/chunk-vendors.c29f3e02.css rel=preload as=style><link href=/js/app.5f5f4b4f.js rel=preload as=script><link href=/js/chunk-vendors.9e1a82c6.js rel=preload as=script><link href=/css/chunk-vendors.c29f3e02.css rel=stylesheet><link href=/css/app.7f57ad44.css rel=stylesheet></head><body><noscript><strong>We're sorry but License Chooser doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.9e1a82c6.js></script><script src=/js/app.5f5f4b4f.js></script></body></html>
diff --git a/docs/js/app.5f5f4b4f.js b/docs/js/app.5f5f4b4f.js
diff --git a/docs/js/app.5f5f4b4f.js.map b/docs/js/app.5f5f4b4f.js.map
diff --git a/docs/js/app.7e6af1b9.js b/docs/js/app.7e6af1b9.js
diff --git a/docs/js/app.7e6af1b9.js.map b/docs/js/app.7e6af1b9.js.map
diff --git a/docs/js/chunk-vendors.9e1a82c6.js b/docs/js/chunk-vendors.9e1a82c6.js
diff --git a/docs/js/chunk-vendors.9e1a82c6.js.map b/docs/js/chunk-vendors.9e1a82c6.js.map
diff --git a/docs/js/chunk-vendors.f29b9692.js b/docs/js/chunk-vendors.f29b9692.js
diff --git a/docs/js/chunk-vendors.f29b9692.js.map b/docs/js/chunk-vendors.f29b9692.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
         "test:e2e": "vue-cli-service test:e2e",
         "lint": "vue-cli-service lint",
         "test": "vue-cli-service test:unit --coverage",
-        "i18n:report": "vue-cli-service i18n:report --src src/**/*.vue --locales src/locales/**.json"
+        "i18n:report": "vue-cli-service i18n:report -v --src src/**/*.vue --locales src/locales/**.json -o output.json"
     },
     "dependencies": {
         "@creativecommons/vocabulary": "0.0.0-alpha.30",
@@ -30,7 +30,8 @@
         "core-js": "^3.6.1",
         "vue": "^2.6.10",
         "vue-analytics": "^5.22.1",
-        "vue-i18n": "^8.15.3"
+        "vue-i18n": "^8.15.3",
+        "vuex": "^3.1.2"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^4.1.0",

diff --git a/src/App.vue b/src/App.vue
@@ -1,29 +1,30 @@
 <template>
     <div id="app">
-        <Header :title="$t('app-title')"/>
-        <Feedback/>
+        <Header :title="$t('app.title')"/>
         <div class="container" id="site-container">
-            <Chooser />
-            <hr>
-            <HelpSection/>
-        </div>
-        <Footer>
-            <div class="panel">
-                <div>
-                    <p>
-                        Built with <a href="https://creativecommons.github.io/cc-vocabulary/">Vocabulary</a>.
-                    </p>
-                    <p>
-                        <a href="https://github.com/creativecommons/cc-chooser">Icons</a> by The Noun Project and
-                        FontAwesome.
-                    </p>
-                    <p>
-                        Contribute on <a href="https://github.com/creativecommons/cc-chooser">Github</a>.
-                    </p>
+            <div class="page-head">
+                <div class="select-license-column">
+                    <h2 class="vocab h2a ha">{{$t('select-license.heading')}}</h2>
+                    <p class="stepper-instructions vocab-body body-bigger">{{$t('select-license.instructions')}}</p>
+                </div>
+                <LocaleChooser />
+            </div>
+            <div class="columns">
+            <Stepper v-model="currentStepId" />
+            <div class="column" >
+                <div class="fixed-right-column">
+                <SelectedLicenseCard
+                    v-if="showLicense"
+                />
+                <LicenseUseCard
+                    v-if="showLicenseUse"
+                />
+                <HelpSection />
                 </div>
-                <Locale/>
             </div>
-        </Footer>
+            </div>
+        </div>
+        <Footer />
     </div>
 </template>
 
@@ -32,34 +33,53 @@
 import '@creativecommons/vocabulary/css/root.css'
 import '@creativecommons/vocabulary/css/index.css'
 
-import Chooser from './components/Chooser'
 import HelpSection from './components/HelpSection'
-import { Header, Footer, Locale } from '@creativecommons/vue-vocabulary'
-import Feedback from './components/Feedback'
+import Stepper from './components/Stepper'
+import SelectedLicenseCard from './components/LicenseDetailsCard'
+import LicenseUseCard from './components/LicenseUseCard'
+import Header from './components/Header.vue'
+import Footer from './components/Footer'
+import LocaleChooser from './components/LocaleChooser'
 
 export default {
     name: 'App',
     components: {
-        Chooser,
         HelpSection,
-        Feedback,
+        Stepper,
+        SelectedLicenseCard,
+        LicenseUseCard,
         Header,
         Footer,
-        Locale
+        LocaleChooser
+    },
+    data() {
+        return {
+            currentStepId: 0,
+            showLicense: false
+        }
+    },
+    computed: {
+        showLicenseUse() {
+            return this.currentStepId === 7
+        }
     },
     created: function() {
         // send home to google analytics
         if (process.env.NODE_ENV === 'production') {
             this.$ga.page('/')
         }
+        this.$store.subscribe((mutation, state) => {
+            if (mutation.type === 'updateAttributesFromShort' || mutation.type === 'setSelected') {
+                this.showLicense = true
+            }
+        })
     }
-}</script>
+}
+</script>
 <style lang="scss">
     // Import Bulma's core
     @import "~bulma/sass/utilities/_all";
-    $primary: hsl(13, 84%, 56%);
-    $background: hsl(0, 0%, 88%);
-    $body-background-color:hsl(0,0%, 88%);
+    $primary: hsl(138, 95%, 33%);
 
     // Links
     $link: $primary;
@@ -71,29 +91,123 @@ export default {
     // Import Bulma and Buefy styles
     @import "~bulma";
     @import "~buefy/src/scss/buefy";
-</style>
-<style>
-
     @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A%20400%2C600%2C700%7CRoboto+Condensed&ver=4.9.8");
 
     #app {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         color: #2c3e50;
+        counter-reset: step-counter;
+    }
+    .fixed-right-column {
+        position: sticky;
+        top: 10px;
     }
-
     #site-container {
         padding-top: 2rem;
         padding-bottom: 2%;
     }
-
+    .page-head {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 1.5rem;
+    }
+    .select-license-column {
+        grid-column: 1;
+    }
+    .locale-chooser {
+        grid-column: 2;
+    }
     .desktop-hide {
         display: none;
     }
 
     .desktop-show {
         display: block;
     }
+    .vocab.ha {
+        font-family: Roboto Condensed,sans-serif;
+        font-weight: bold;
+        font-style: normal;
+        letter-spacing: 0.02em;
+        padding-bottom: 0.5rem;
+    }
+    .vocab.hb {
+        font-family: Source Sans Pro,sans-serif;
+        font-weight: bold;
+        font-style: normal;
+        padding-bottom: 0.5rem;
+    }
+    .vocab.h2a {
+        color: black;
+        font-size: 36px;
+        line-height: 47px;
+    }
+    .vocab.h3a {
+        font-size: 28px;
+        line-height: 36px;
+        color: black;
+    }
+    .vocab.h3b {
+        font-size: 28px;
+        line-height: 33px;
+    }
+    .vocab.h4a {
+        font-size: 23px;
+        line-height: 30px;
+    }
+    .vocab.h4b {
+        font-size: 23px;
+        line-height: 27px;
+    }
+    .vocab.h5a {
+        font-size: 20px;
+        line-height: 30px;
+    }
+    .vocab.h5b {
+        font-size: 20px;
+        line-height: 26px;
+    }
+    .vocab-tomato {
+        color: #ED592F!important;
+    }
+    .vocab-body {
+        font-style: normal;
+        font-weight: normal;
+        color: #333333;
+        padding-bottom: 8px;
+    }
+    .vocab-body.body-bigger {
+        font-size: 23px;
+        line-height: 33px;
+        color: black;
+    }
+    .vocab-body.body-big {
+        font-size: 18px;
+        line-height: 25px;
+    }
+    .vocab-body.body-normal {
+        font-size: 16px;
+        line-height: 24px;
+    }
+    .vocab-caption {
+        font-style: normal;
+        font-weight: 600;
+        font-size: 13px;
+        line-height: 19px;
+        padding-bottom: 8px;
+    }
+    .normal-gray {
+        color: #D8D8D8!important;
+    }
+    .slate-gray {
+        color: #333333;
+    }
+    .selected-license-card {
+        margin-bottom: 32px;
+    }
+    .help-section {
+    }
 
     @media only screen and (max-width: 1025px) {
         #site-container {
@@ -109,6 +223,24 @@ export default {
             display: block;
         }
     }
+    @media only screen and (max-width: 768px) {
+        #site-container {
+            padding-top: 0;
+        }
+        .page-head {
+            grid-template-columns: 100%;
+            grid-gap: 1rem;
+        }
+        .select-license-column {
+            order: 2;
+        }
+        .locale-chooser {
+            padding-top: 1rem;
+            height: auto;
+            grid-column: auto;
+            order: 1;
+        }
+    }
 
     @media only screen and (max-width: 670px) {
         #site-container {
@@ -149,17 +281,3 @@ export default {
         margin-top: 1rem;
     }
 </style>
-<style scoped>
-    p {
-        margin-bottom: .5em;
-    }
-
-    #custom .panel > div:first-child {
-        margin-bottom: 10vh;
-    }
-
-    .vocab.footer {
-        font-family: Source Sans Pro, Noto Sans, Arial, Helvetica Neue, Helvetica, sans-serif;
-        line-height: 1.2;
-    }
-</style>
diff --git a/src/assets/arrow-right.png b/src/assets/arrow-right.png
diff --git a/src/assets/language.png b/src/assets/language.png
diff --git a/src/assets/license-icons/icon-by-white.png b/src/assets/license-icons/icon-by-white.png
diff --git a/src/assets/license-icons/icon-by-white.svg b/src/assets/license-icons/icon-by-white.svg
diff --git a/src/assets/license-icons/icon-cc-white.svg b/src/assets/license-icons/icon-cc-white.svg
diff --git a/src/assets/license-icons/icon-cc_white.png b/src/assets/license-icons/icon-cc_white.png
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><link rel=icon type=image/png href=https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png sizes=192x192><link rel=apple-touch-icon-precomposed href=https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png><meta name=twitter:card content=summary><meta name=twitter:site content=@creativecommons><meta name=twitter:creator content=@creativecommons><meta property=og:url content=https://beta-chooser.creativecommons.org><meta property=og:title content="Choose a License"><meta property=og:type content=website><meta property=og:description content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><meta property=og:image content=https://mirrors.creativecommons.org/presskit/logos/cc.logo.large.png><meta property=og:locale content=en_US><meta property=og:locale:alternate content=ru_RU><title>Creative Commons License Chooser</title><link href=/css/app.eb482f5e.css rel=preload as=style><link href=/css/chunk-vendors.c29f3e02.css rel=preload as=style><link href=/js/app.7e6af1b9.js rel=preload as=script><link href=/js/chunk-vendors.f29b9692.js rel=preload as=script><link href=/css/chunk-vendors.c29f3e02.css rel=stylesheet><link href=/css/app.eb482f5e.css rel=stylesheet></head><body><noscript><strong>We're sorry but License Chooser doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.f29b9692.js></script><script src=/js/app.7e6af1b9.js></script></body></html>
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><link rel=icon type=image/png href=https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png sizes=192x192><link rel=apple-touch-icon-precomposed href=https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png><meta name=twitter:card content=summary><meta name=twitter:site content=@creativecommons><meta name=twitter:creator content=@creativecommons><meta property=og:url content=https://beta-chooser.creativecommons.org><meta property=og:title content="Choose a License"><meta property=og:type content=website><meta property=og:description content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><meta property=og:image content=https://mirrors.creativecommons.org/presskit/logos/cc.logo.large.png><meta property=og:locale content=en_US><meta property=og:locale:alternate content=ru_RU><title>Creative Commons License Chooser</title><link href=/css/app.7f57ad44.css rel=preload as=style><link href=/css/chunk-vendors.c29f3e02.css rel=preload as=style><link href=/js/app.5f5f4b4f.js rel=preload as=script><link href=/js/chunk-vendors.9e1a82c6.js rel=preload as=script><link href=/css/chunk-vendors.c29f3e02.css rel=stylesheet><link href=/css/app.7f57ad44.css rel=stylesheet></head><body><noscript><strong>We're sorry but License Chooser doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.9e1a82c6.js></script><script src=/js/app.5f5f4b4f.js></script></body></html>