Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature: add support for multiple elements highlight #2083

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feature: add support for multiple elements highlight #2083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ee7cc3
feature: add support for multiple elements highlight
Sep 16, 2022
d7e67fb
feature: add tests for multiple highlights
Sep 16, 2022
744bec3
(chore) setup prettier for svelte and fix formating issues
Sep 29, 2022
73d102a
Merge branch 'master' into multiple-elements
Nov 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ <h2 class="font-body p-2 text-xl">
<div class="flex justify-center w-full">
<div class="flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap">
<div class="m-4 relative w-full lg:w-1/3">
<div class="border-4 border-navy w-full">
<div class="hero-multiple-select border-4 border-navy w-full">
<img
class="absolute a11y-icon z-20"
src="landing/assets/img/accessibility.svg"
Expand Down Expand Up @@ -130,7 +130,7 @@ <h3 class="p-2 text-2xl text-center uppercase w-full">
</div>

<div class="m-4 relative w-full lg:w-1/3">
<div class="border-4 border-navy w-full">
<div class="hero-multiple-select border-4 border-navy w-full">
<img
class="absolute customizable-icon z-20"
src="landing/assets/img/customizable.svg"
Expand Down Expand Up @@ -162,7 +162,7 @@ <h3 class="p-2 text-2xl text-center uppercase w-full">
</div>

<div class="m-4 relative w-full lg:w-1/3">
<div class="border-4 border-navy w-full">
<div class="hero-multiple-select border-4 border-navy w-full">
<img
class="absolute framework-icon z-20"
src="landing/assets/img/framework.svg"
Expand Down
41 changes: 22 additions & 19 deletions landing/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
@tailwind components;
@tailwind utilities;

html, body {
font-family: "Pier Sans", "proxima-nova", "Helvetica Neue", sans-serif;
html,
body {
font-family: 'Pier Sans', 'proxima-nova', 'Helvetica Neue', sans-serif;
}

body {
Expand Down Expand Up @@ -39,7 +40,7 @@ a {
}

.button:hover {
background: #F3F5F5;
background: #f3f5f5;
transform: translateX(10px) translateY(-10px);
}

Expand Down Expand Up @@ -80,12 +81,12 @@ a {
}

.footer-icon path {
fill: #16202D;
fill: #16202d;
transition: 0.25s ease-in-out;
}

.footer-icon:hover path {
fill: #959FAC;
fill: #959fac;
}

.footer-logo {
Expand All @@ -104,12 +105,12 @@ pre {

.shepherd-button {
background: #ffffff;
border-top: solid 4px #16202D;
border-top: solid 4px #16202d;
border-radius: 0;
color: #16202D;
color: #16202d;
display: flex;
flex-grow: 1;
font-family: "GT Pressura", sans-serif;
font-family: 'GT Pressura', sans-serif;
font-size: 1rem;
justify-content: center;
margin: 0;
Expand All @@ -119,25 +120,25 @@ pre {
}

.shepherd-button:hover {
background: #16202D;
background: #16202d;
color: #ffffff;
}

.shepherd-button.shepherd-button-secondary {
background: #CAD5D5;
background: #cad5d5;
}

.shepherd-button.shepherd-button-secondary:hover {
color: #CAD5D5;
background: #16202D;
color: #cad5d5;
background: #16202d;
}

.shepherd-cancel-icon {
font-family: "GT Pressura", sans-serif;
font-family: 'GT Pressura', sans-serif;
}

.shepherd-element {
border: solid 4px #16202D;
border: solid 4px #16202d;
}

.shepherd-element,
Expand Down Expand Up @@ -199,7 +200,7 @@ pre {
}

.shepherd-footer button:not(:last-of-type) {
border-right: solid 4px #16202D;
border-right: solid 4px #16202d;
}

.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
Expand All @@ -208,7 +209,7 @@ pre {

.shepherd-has-title .shepherd-content .shepherd-header {
background: transparent;
font-family: "GT Pressura", sans-serif;
font-family: 'GT Pressura', sans-serif;
padding-bottom: 0;
padding-left: 2rem;
}
Expand All @@ -223,15 +224,17 @@ pre {
padding: 2rem;
}

.shepherd-text a, .shepherd-text a:visited,
.shepherd-text a,
.shepherd-text a:visited,
.shepherd-text a:active {
border-bottom: 1px dotted;
border-bottom-color: rgba(0, 0, 0, 0.75);
color: rgba(0, 0, 0, 0.75);
text-decoration: none;
}

.shepherd-text a:hover, .shepherd-text a:visited:hover,
.shepherd-text a:hover,
.shepherd-text a:visited:hover,
.shepherd-text a:active:hover {
border-bottom-style: solid;
}
}
43 changes: 23 additions & 20 deletions landing/css/welcome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
*/

/*
Expand Down Expand Up @@ -848,8 +848,9 @@ video {
text-decoration-line: underline;
}

html, body {
font-family: "Pier Sans", "proxima-nova", "Helvetica Neue", sans-serif;
html,
body {
font-family: 'Pier Sans', 'proxima-nova', 'Helvetica Neue', sans-serif;
}

body {
Expand Down Expand Up @@ -885,7 +886,7 @@ a {
}

.button:hover {
background: #F3F5F5;
background: #f3f5f5;
transform: translateX(10px) translateY(-10px);
}

Expand Down Expand Up @@ -926,12 +927,12 @@ a {
}

.footer-icon path {
fill: #16202D;
fill: #16202d;
transition: 0.25s ease-in-out;
}

.footer-icon:hover path {
fill: #959FAC;
fill: #959fac;
}

.footer-logo {
Expand All @@ -950,12 +951,12 @@ pre {

.shepherd-button {
background: #ffffff;
border-top: solid 4px #16202D;
border-top: solid 4px #16202d;
border-radius: 0;
color: #16202D;
color: #16202d;
display: flex;
flex-grow: 1;
font-family: "GT Pressura", sans-serif;
font-family: 'GT Pressura', sans-serif;
font-size: 1rem;
justify-content: center;
margin: 0;
Expand All @@ -965,25 +966,25 @@ pre {
}

.shepherd-button:hover {
background: #16202D;
background: #16202d;
color: #ffffff;
}

.shepherd-button.shepherd-button-secondary {
background: #CAD5D5;
background: #cad5d5;
}

.shepherd-button.shepherd-button-secondary:hover {
color: #CAD5D5;
background: #16202D;
color: #cad5d5;
background: #16202d;
}

.shepherd-cancel-icon {
font-family: "GT Pressura", sans-serif;
font-family: 'GT Pressura', sans-serif;
}

.shepherd-element {
border: solid 4px #16202D;
border: solid 4px #16202d;
}

.shepherd-element,
Expand Down Expand Up @@ -1045,7 +1046,7 @@ pre {
}

.shepherd-footer button:not(:last-of-type) {
border-right: solid 4px #16202D;
border-right: solid 4px #16202d;
}

.shepherd-has-title .shepherd-content .shepherd-cancel-icon {
Expand All @@ -1054,7 +1055,7 @@ pre {

.shepherd-has-title .shepherd-content .shepherd-header {
background: transparent;
font-family: "GT Pressura", sans-serif;
font-family: 'GT Pressura', sans-serif;
padding-bottom: 0;
padding-left: 2rem;
}
Expand All @@ -1069,15 +1070,17 @@ pre {
padding: 2rem;
}

.shepherd-text a, .shepherd-text a:visited,
.shepherd-text a,
.shepherd-text a:visited,
.shepherd-text a:active {
border-bottom: 1px dotted;
border-bottom-color: rgba(0, 0, 0, 0.75);
color: rgba(0, 0, 0, 0.75);
text-decoration: none;
}

.shepherd-text a:hover, .shepherd-text a:visited:hover,
.shepherd-text a:hover,
.shepherd-text a:visited:hover,
.shepherd-text a:active:hover {
border-bottom-style: solid;
}
Expand Down Expand Up @@ -1177,4 +1180,4 @@ pre {
.lg\:pr-10 {
padding-right: 2.5rem;
}
}
}
44 changes: 38 additions & 6 deletions landing/js/welcome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
'use strict';

(function() {
(function () {
function init() {
var shepherd = setupShepherd();
setTimeout(function() {
setTimeout(function () {
shepherd.start();
}, 400);
}
Expand Down Expand Up @@ -50,7 +50,8 @@
});

const element = document.createElement('p');
element.innerText = 'Including Shepherd is easy! Just include shepherd.js. The styles are bundled with the JS.';
element.innerText =
'Including Shepherd is easy! Just include shepherd.js. The styles are bundled with the JS.';

// These steps should be added via `addSteps`
const steps = [
Expand Down Expand Up @@ -80,7 +81,9 @@
},
{
title: 'Creating a Shepherd Tour',
text: 'Creating a Shepherd tour is easy. too! ' + 'Just create a \`Tour\` instance, and add as many steps as you want.',
text:
'Creating a Shepherd tour is easy. too! ' +
'Just create a `Tour` instance, and add as many steps as you want.',
attachTo: {
element: '.hero-example',
on: 'right'
Expand Down Expand Up @@ -125,6 +128,31 @@
}
],
id: 'attaching'
},
{
title: 'Highliting multiple Elements',
text: 'Your tour steps can highlight multiple elements (like this step).',
attachTo: {
element: '.hero-multiple-select',
on: 'bottom',
multiple: true
},
buttons: [
{
action: function () {
return this.back();
},
secondary: true,
text: 'Back'
},
{
action: function () {
return this.next();
},
text: 'Next'
}
],
id: 'multiple-select'
}
];

Expand Down Expand Up @@ -181,12 +209,16 @@
}

function ready() {
if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') {
if (
document.attachEvent
? document.readyState === 'complete'
: document.readyState !== 'loading'
) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
}

ready();
}).call(void 0);
}.call(void 0));
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
"postcss": "^8.4.31",
"postinstall-postinstall": "^2.1.0",
"prettier": "^3.1.0",
"prettier-plugin-svelte": "^3.1.2",
"release-it": "^15.11.0",
"release-it-lerna-changelog": "^5.0.0",
"replace": "^1.2.2",
Expand Down
Loading