Animate wizard trigger, move instructions text to make things clearer

ui/app/styles/components/ui-wizard.scss

@@ -8,6 +8,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  transition: padding $speed;
 }
 
 .ui-wizard-container .app-content.wizard-open {
@@ -32,7 +33,7 @@
   overflow: auto;
 
   p {
-    line-height: 1.2;
+    line-height: 1.33;
   }
 
   .dismiss-collapsed {
@@ -64,7 +65,9 @@
 }
 
 .wizard-header {
-  margin-bottom: $size-5;
+  border-bottom: $light-border;
+  padding-bottom: $size-8;
+  margin-bottom: $size-4;
   position: relative;
 
   .icon {
@@ -81,6 +84,7 @@
 }
 
 .ui-wizard.collapsed {
+  animation: drop-fade-above $speed-slow;
   color: $white;
   background: $black;
   bottom: auto;
@@ -142,3 +146,7 @@
   margin-top: $size-4;
   border-top: 1px solid $grey-light;
 }
+
+.wizard-instructions {
+  margin: $size-4 0;
+}

ui/app/styles/utils/_bulma_variables.scss

@@ -69,9 +69,8 @@ $menu-item-hover-color: $white;
 
 $progress-bar-background-color: lighten($grey-light, 15%);
 
-$base-border: 1px solid $grey-light;
+$base-border: 1px solid $ui-gray-300;
-$component-border: 1px solid $grey;
+$light-border: 1px solid $ui-gray-200;
-$layout-border: $base-border;
 
 //menu
 $menu-item-hover-color: $text;

ui/app/templates/components/wizard-section.hbs

@@ -6,6 +6,12 @@
     {{headerText}}
   </h2>
   {{yield}}
+  {{#if instructions}}
+    <div class="wizard-instructions">
+      <h2 class="title is-6">What to do</h2>
+      <p>{{instructions}}</p>
+    </div>
+  {{/if}}
   {{#if docText}}
     <DocLink @path={{docPath}}>
       <ICon @glyph='learn' @size=16 /> {{docText}}

ui/app/templates/components/wizard/auth-details.hbs

@@ -1,5 +1,5 @@
-<WizardSection 
+<WizardSection
-  @headerText="Auth Method Details" 
+  @headerText="Auth Method Details"
   @docText="Docs: Authentication Methods"
   @docPath="/docs/auth/index.html"
 >
@@ -7,7 +7,7 @@
     Fantastic! Now you're ready to use your new {{mountName}} auth method!
   </p>
 </WizardSection>
-<WizardSection 
+<WizardSection
   @headerText="Want to start again or move on?"
   @class="wizard-details"
 >
@@ -17,4 +17,4 @@
   <button type="button"  class="button next-feature-step" {{action onAdvance}}>
     {{nextFeature}} <ICon @glyph="chevron-right"  @size=10 @class="is-pulled-right" />
   </button>
-</WizardSection>
+</WizardSection>

ui/app/templates/components/wizard/auth-edit.hbs

@@ -1,9 +1,10 @@
-<WizardSection 
+<WizardSection
-  @headerText="Editing Your Auth Method" 
+  @headerText="Editing Your Auth Method"
   @docText="Docs: Authentication Methods"
   @docPath="/docs/auth/index.html"
+  @instructions='Click the "View method" link to see its details.'
 >
   <p>
-    You can update your new auth method configuration here. Click the "View method" link to see its details.
+    You can update your new auth method configuration here.
   </p>
-</WizardSection>
+</WizardSection>

ui/app/templates/components/wizard/auth-enable.hbs

@@ -1,9 +1,10 @@
-<WizardSection 
+<WizardSection
-  @headerText="Entering Auth Method details" 
+  @headerText="Entering Auth Method details"
   @docText="Docs: Authentication Methods"
   @docPath="/docs/auth/index.html"
+  @instructions='Customize your new method and click "Enable Method".'
 >
   <p>
     Great! Now you can customize this method with a name and description that makes sense for your team, and fill out any options that are specific to this method.
   </p>
-</WizardSection>
+</WizardSection>

ui/app/templates/components/wizard/auth-idle.hbs

@@ -2,8 +2,9 @@
   @headerText="Enabling an Auth Method"
   @docText="Docs: Authentication Methods"
   @docPath="/docs/auth/index.html"
+  @instructions='Choose an authentication method and click "Next" to get started.'
 >
   <p>
-    Controlling who can see your secrets is important. Let's set up a an authentication method for you and your team to use. Don't worry, you can add more methods later. Choose an authentication method to get started.
+    Controlling who can see your secrets is important. Let's set up a an authentication method for you and your team to use. Don't worry, you can add more methods later.
   </p>
 </WizardSection>

ui/app/templates/components/wizard/auth-list.hbs

@@ -1,9 +1,10 @@
-<WizardSection 
+<WizardSection
-  @headerText="Auth Method List" 
+  @headerText="Auth Method List"
   @docText="Docs: Authentication Methods"
   @docPath="/docs/auth/index.html"
+  @instructions='Click the ellipsis menu for your method and then click "View Configuration" to see its details.'
 >
   <p>
-    Awesome! Now you can see your new auth method in the list. Click the ellipsis menu for your method and then click "View Configuration" to see its details.
+    Awesome! Now you can see your new auth method in the list.
   </p>
-</WizardSection>
+</WizardSection>

ui/app/templates/components/wizard/policies-create.hbs

@@ -3,6 +3,7 @@
     @headerText="Creating a policy"
     @docText="Docs: Policies"
     @docPath="/docs/concepts/policies.html"
+    @instructions='Fill in your policy details and click "Create Policy".'
   >
     <p>
       Let's use "<code>my-new-policy</code>" for your policy name. Copy the policy below to try it out:

ui/app/templates/components/wizard/policies-delete.hbs

@@ -1,11 +1,12 @@
 <WizardContent @headerText="Policies" @glyph="tour">
-  <WizardSection 
+  <WizardSection
-    @headerText="Deleting your policy" 
+    @headerText="Deleting your policy"
     @docText="Docs: Policies"
     @docPath="/docs/concepts/policies.html"
+    @instructions='Click on "Delete" to remove the policy that you created.'
   >
     <p>
-      You can delete your test policy by clicking the "..." icon to the right of the policy name. Click on "Delete" to remove it.
+      You can delete your test policy by clicking the "..." icon to the right of the policy name.
     </p>
   </WizardSection>
-</WizardContent>
+</WizardContent>

ui/app/templates/components/wizard/policies-details.hbs

@@ -1,11 +1,12 @@
 <WizardContent @headerText="Policies" @glyph="tour">
-  <WizardSection 
+  <WizardSection
-    @headerText="Your new policy" 
+    @headerText="Your new policy"
     @docText="Docs: Policies"
     @docPath="/docs/concepts/policies.html"
+    @instructions='Click on "ACL Policies" in the sidebar to go back to the list of policies.'
   >
     <p>
-      Good job! Here you can see your new policy. If you'd like to edit it, you'd just click the "Edit" toggle. Let's go back to the list of policies by clicking on "ACL Policies" in the sidebar.
+      Good job! Here you can see your new policy. If you'd like to edit it, you'd just click the "Edit" toggle.
     </p>
   </WizardSection>
-</WizardContent>
+</WizardContent>

ui/app/templates/components/wizard/policies-intro.hbs

@@ -1,11 +1,12 @@
 <WizardContent @headerText="Policies" @glyph="tour">
-  <WizardSection 
+  <WizardSection
-    @headerText="Choosing a policy type" 
+    @headerText="Choosing a policy type"
     @docText="Docs: Policies"
     @docPath="/docs/concepts/policies.html"
+    @instructions='To get started with something simple, click on "Create ACL policy".'
   >
     <p>
-      Policies in Vault are a way for you to control what data can be accessed, including things like creating new secrets, listing users, or even entire Vault features. To get started with something simple, click on "Create ACL policy"
+      Policies in Vault are a way for you to control what data can be accessed, including things like creating new secrets, listing users, or even entire Vault features.
     </p>
   </WizardSection>
-</WizardContent>
+</WizardContent>

ui/app/templates/components/wizard/replication-details.hbs

@@ -5,7 +5,7 @@
     @docPath="/docs/internals/replication.html"
   >
     <p>
-      Here you can see the details about your new replication cluster, manage or disable replication, and handle secondary clusters. You can also get a quick status by hovering over the "Replication" link at the top. 
+      Here you can see the details about your new replication cluster, manage or disable replication, and handle secondary clusters. You can also get a quick status by hovering over the "Replication" link at the top.
     </p>
   </WizardSection>
   <div class="wizard-details">

ui/app/templates/components/wizard/replication-setup.hbs

@@ -3,9 +3,10 @@
     @headerText="Setting up Replication"
     @docText="Docs: Replication"
     @docPath="/docs/internals/replication.html"
+    @instructions='Choose the one that is right for your needs and click "Enable Replication"'
   >
     <p>
-      Vault has two kinds of replication, each for a different purpose. Do you want to keep a backup of your data, or are you more interested in speed of access? Choose the one that is right for your needs.
+      Vault has two kinds of replication, each for a different purpose. Do you want to keep a backup of your data, or are you more interested in speed of access?
     </p>
   </WizardSection>
   <WizardSection @headerText="Cluster mode" @class="wizard-details">

ui/app/templates/components/wizard/secrets-details.hbs

@@ -1,11 +1,12 @@
 <WizardSection
   @headerText="Your Secrets Engine"
+  @instructions='Click on the link to add a {{nextStep}} in the page header'
 >
   <p>
     {{#if needsEncryption}}
       The Transit Secrets Engine uses encryption keys to provide "encryption as a service". Click on "Create Encryption Key" at the top to create one.
     {{else}}
-      Now that we've mounted the {{secretType}} Secrets Engine, let's add a {{nextStep}}. Click on the link in the page header.
+      Now that we've mounted the {{secretType}} Secrets Engine, let's add a {{nextStep}}.
     {{/if}}
   </p>
 </WizardSection>

ui/app/templates/components/wizard/secrets-enable.hbs

@@ -1,9 +1,10 @@
-<WizardSection 
+<WizardSection
-  @headerText="Entering Secrets Engine details" 
+  @headerText="Entering Secrets Engine details"
   @docText="Docs: Secrets Engines"
   @docPath="/docs/secrets/index.html"
+  @instructions='Fill in the details for your engine and click "Enable Engine"'
 >
   <p>
     Good choice! Now you can customize your engine with a name and description that makes sense for your team, as well as options for replication and caching.
   </p>
-</WizardSection>
+</WizardSection>

ui/app/templates/components/wizard/secrets-idle.hbs

@@ -1,9 +1,10 @@
-<WizardSection 
+<WizardSection
-  @headerText="Enabling a Secrets Engine" 
+  @headerText="Enabling a Secrets Engine"
   @docText="Docs: Secrets Engines"
   @docPath="/docs/secrets/index.html"
+  @instructions='Select an engine and click "Next"'
 >
   <p>
     Vault is all about managing secrets, so let's set up your first secrets engine. You can use a static engine to store your secrets locally in Vault, or connect to a cloud backend with one of the dynamic engines.
   </p>
-</WizardSection>
+</WizardSection>

ui/app/templates/components/wizard/secrets-list.hbs

@@ -1,7 +1,8 @@
-<WizardSection 
+<WizardSection
-  @headerText="Viewing engine configuration" 
+  @headerText="Viewing engine configuration"
+  @instructions='Find the engine in the list and click on "View Configuration" in the menu on the right.'
 >
   <p>
-    This engine isn't fully supported in the Vault UI yet, but you can view and edit the configuration and use the Vault Browser CLI to interact with the engine just like you would on the command-ine. Find the engine in the list and click on "View Configuration" in the menu on the right. 
+    This engine isn't fully supported in the Vault UI yet, but you can view and edit the configuration and use the Vault Browser CLI to interact with the engine just like you would on the command-line.
   </p>
-</WizardSection>
+</WizardSection>

ui/app/templates/components/wizard/secrets-role.hbs

@@ -1,7 +1,8 @@
 <WizardSection
   @headerText="Adding a role"
+  @instructions='Enter your role details and click "Save"'
 >
   <p>
-    A role grants permissions that specify what an identity can and cannot do. A role is typically shared among many users who are then granted credentials with that are granted the policy permissions. Enter your role details and save it.
+    A role grants permissions that specify what an identity can and cannot do. A role is typically shared among many users who are then granted credentials with that are granted the policy permissions.
   </p>
 </WizardSection>

ui/app/templates/components/wizard/secrets-secret.hbs

@@ -1,7 +1,8 @@
-<WizardSection 
+<WizardSection
-  @headerText="Adding a secret" 
+  @headerText="Adding a secret"
+  @instructions='Enter the details of your secret and click "Save"'
 >
   <p>
-    Enter the details of your secret and save it.
+    Here you can specify the path of your secret and include the key/value pairs to include.
   </p>
-</WizardSection>
+</WizardSection>

ui/app/templates/components/wizard/tools-info.hbs

@@ -1,11 +1,12 @@
 <WizardContent @headerText="Tools" @glyph="tour">
-  <WizardSection 
+  <WizardSection
-    @headerText="Information about your data" 
+    @headerText="Information about your data"
     @docText="API: Lookup Data"
     @docPath="/api/system/wrapping-lookup.html"
+    @instructions='Click on "Rewrap" in the sidebar.'
   >
     <p>
-      Good job! You can see some basic information about your wrapped data, including the expiration time. Next up, we'll take the token you still have in your clipboard and rewrap it to keep it active and extend that expiration time. Click on "Rewrap" in the sidebar.
+      Good job! You can see some basic information about your wrapped data, including the expiration time. Next up, we'll take the token you still have in your clipboard and rewrap it to keep it active and extend that expiration time.
     </p>
   </WizardSection>
-</WizardContent>
+</WizardContent>

ui/app/templates/components/wizard/tools-lookup.hbs

@@ -1,11 +1,12 @@
 <WizardContent @headerText="Tools" @glyph="tour">
-  <WizardSection 
+  <WizardSection
-    @headerText="Lookup wrapped data" 
+    @headerText="Lookup wrapped data"
     @docText="API: Lookup Data"
     @docPath="/api/system/wrapping-lookup.html"
+    @instructions='Paste the token that you copied and click "Lookup Token".'
   >
     <p>
       Lookup lets you see information about your token without unwrapping it or changing it. Paste your token here and click "Lookup". If you find that your data didn't copy for some reason, you can always go back and do it again.
     </p>
   </WizardSection>
-</WizardContent>
+</WizardContent>

ui/app/templates/components/wizard/tools-rewrap.hbs

@@ -1,11 +1,12 @@
 <WizardContent @headerText="Tools" @glyph="tour">
-  <WizardSection 
+  <WizardSection
-    @headerText="Rewrapping your data" 
+    @headerText="Rewrapping your data"
     @docText="API: Rewrap Data"
     @docPath="/api/system/wrapping-rewrap.html"
+    @instructions='Paste your token into the input and click "Rewrap Token" to transform your token into a new one.'
   >
     <p>
-      Paste your token into the input and click "Rewrap Token" to transform your token into a new one. Don't worry though, it will still have the same data.
+      You can rewrap your data to rotate the token, but it will still have the same creation time and TTL. Don't worry, the new token will still have the same data.
     </p>
   </WizardSection>
-</WizardContent>
+</WizardContent>

ui/app/templates/components/wizard/tools-rewrapped.hbs

@@ -1,11 +1,12 @@
 <WizardContent @headerText="Tools" @glyph="tour">
-  <WizardSection 
+  <WizardSection
-    @headerText="Your rewrapped data" 
+    @headerText="Your rewrapped data"
     @docText="API: Rewrap Data"
     @docPath="/api/system/wrapping-rewrap.html"
+    @instructions='Copy this token and then click on "Unwrap" in the sidebar to verify the data is still in there.'
   >
     <p>
-      It's a subtle transformation, but your old token has been revoked and this new one has taken its place. Copy this one and then click on "Unwrap" in the sidebar to make sure the data is still in there.
+      It's a subtle transformation, but your old token has been revoked and this new one has taken its place.
     </p>
   </WizardSection>
-</WizardContent>
+</WizardContent>

ui/app/templates/components/wizard/tools-unwrap.hbs

@@ -1,11 +1,12 @@
 <WizardContent @headerText="Tools" @glyph="tour">
-  <WizardSection 
+  <WizardSection
-    @headerText="Unwrapping your data" 
+    @headerText="Unwrapping your data"
     @docText="API: Unwrap Data"
     @docPath="/api/system/wrapping-unwrap.html"
+    @instructions='Paste your token into the input and click "Unwrap Data".'
   >
     <p>
-      We saved this step for the end because unwrapping the token will revoke it, so we can only do this once. Paste your token into the input and click "Unwrap Data"
+      We saved this step for the end because unwrapping the token will revoke it, so we can only do this once.
     </p>
   </WizardSection>
-</WizardContent>
+</WizardContent>

ui/app/templates/components/wizard/tools-unwrapped.hbs

@@ -1,6 +1,6 @@
 <WizardContent @headerText="Tools" @glyph="tour">
-  <WizardSection 
+  <WizardSection
-    @headerText="Your unwrapped data" 
+    @headerText="Your unwrapped data"
     @docText="API: Unwrap Data"
     @docPath="/api/system/wrapping-unwrap.html"
   >
@@ -11,4 +11,4 @@
   <button type="button"  class="button next-feature-step" {{action onAdvance}}>
     {{nextFeature}} <ICon @glyph="chevron-right"  @size=10 @class="is-pulled-right" />
   </button>
-</WizardContent>
+</WizardContent>

ui/app/templates/components/wizard/tools-wrap.hbs

@@ -1,11 +1,12 @@
 <WizardContent @headerText="Tools" @glyph="tour">
-  <WizardSection 
+  <WizardSection
-    @headerText="Wrapping data" 
+    @headerText="Wrapping data"
     @docText="API: Wrap Data"
     @docPath="/api/system/wrapping-wrap.html"
+    @instructions='Enter some data in JSON format and click "Wrap Data".'
   >
     <p>
       Vault provides several ways to create or wrap data, and manage it from there. Here you can wrap a token (or anything you like) in JSON format. Give it a try.
     </p>
   </WizardSection>
-</WizardContent>
+</WizardContent>

ui/app/templates/components/wizard/tools-wrapped.hbs

@@ -1,11 +1,12 @@
 <WizardContent @headerText="Tools" @glyph="tour">
-  <WizardSection 
+  <WizardSection
-    @headerText="Copying your wrapped token" 
+    @headerText="Copying your wrapped token"
     @docText="API: Wrap Data"
     @docPath="/api/system/wrapping-wrap.html"
+    @instructions='Copy the token and then click on "Lookup" in the sidebar.'
   >
     <p>
-      Your data is now encrypted. You can recover the data using the token on this page, but be careful because if you lose the token you won't be able to retrieve your data! We will use this token for the next few steps, so copy the token and then click on "Lookup" in the sidebar.
+      Your data is now encrypted. You can recover the data using the token on this page, but be careful because if you lose the token you won't be able to retrieve your data! We will use this token for the next few steps.
     </p>
   </WizardSection>
-</WizardContent>
+</WizardContent>