Story: https://app.intercom.com/a/apps/wpyu0avy/inbox/inbox/all/conversations/26579292314

On Blog, it's less useful to have a static sidebar with variable value marketing offers, compared to Institute, where oft-used sidebar navigation is important to have always within reach.

cxl-app-layout could have theme~="traditional" (name?) which makes document scrollable again, instead of individual content panes.

cc @freudFlintstone

Ref: https://github.com/conversionxl/cxl-2019/pull/65#issuecomment-552070369

Work can be seen here: https://github.com/anoblet/aybolit/tree/vaadin-split-layout

This import is quite heavy https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js brings in a ton of icons we don't use.

We can get a new icon for our own iconset from vaadin-icons, I can help with this process.

But what is a way to avoid importing iron-icons in parent class? Does it mean we have to fork chadweimer/iron-star-rating and assign the dependency our fork on GH?

cc @dominik-stypula-polcode

Native <article> has built in ARIA and whatever semantics. <cxl-whatever> has nothing by default.

https://github.com/web-padawan/aybolit/blob/master/packages/core/src/components/button.js#L40

According to https://developers.google.com/web/fundamentals/web-components/customelements#extendhtml extending native elements directly has been blocked by Safari, so I'm not sure we can do that.

Therefore it becomes a matter of manual curation.

1. Global changes to the card

• Add tag - use lumo styles font size M
• Reduce Avater circle to 64px
• Change CTA to always open

2. Course cards

• Show Course tag
• Tag colour is CXL red lumo-primary-text-color: hsl(355.8, 74.7%, 48%);

3. Minidegree cards

• Show Minidegree tag
• Change colour to var(--lumo-secondary-text-color)

4. Hub cards

• Show Playbook hub tag
• Change colour to var(--lumo-secondary-text-color)
• Link the title of the hub to the Title in the card
• If there is no title, then use the last level as title
• Show playbook and child hub count
• Show section owner (if exists), otherwise empty
• Show about section if exists, otherwise empty
• show the breadcrumb (up to 3 levels only, prioritize last)
• Show open CTA

5. Playbook Cards

• Show Playbook tag
• Tag colour is CXL red lumo-primary-text-color: hsl(355.8, 74.7%, 48%);
• Link the title of the playbook to the Title in the card
• Show total steps
• show author followed by the author name
• show the breadcrumb (up to 3 levels only, prioritize last)
• Show open CTA

Slack Conversation
Syed: For menu, I should use CXL UI marketing nav component?
Leho: Yes. Use everything available in CXL UI first.

Syed: Sure, but I don't remember seeing such styling in storybook for cxl ui, like for images showing shadow (as in CXL Jobs Microsite designs)?

Gallery images on absolute locations (masonry like view) (Home 02-gallery-values.jpg & Job ad-qualifications.jpg) etc. So can you please point me to relevant styles, so I won't code my own css. We can definitely move theme level styles I code to CXL UI, so should I not even bother styling anything in theme to get things going, once done can let you know relevant styles so we can move it to CXL UI?

https://conversionxl.slack.com/archives/C0G52K19U/p1554816779095600

There seems to be confusion about what https://github.com/conversionxl/aybolit monorepo packages is supposed to contain. Let's plan it here.

...
packages/
|- core/
|- cxl-marketing/
   |- scss/
   |- src/
   |- tests/
|- cxl-institute-app/
   |- scss/
   |- src/
   |- tests/
|- cxl-shared/
   |- scss/
   |- src/
|- ...
|- white-label/

• Vaadin components integration?
• #5 Lumo integration, see https://github.com/web-padawan/lit-components/blob/master/packages/accordion-lumo/package.json?
• ...

Hub page layout

Hub page design to follow the MVP Hub Page design on figma

• Use the story book layout [layout=2c-r]
• Use CXL nav and footer from storybook
• The footer should not be "sticky" but be at the bottom of the page.
• Use hub card & playbook accordion cards elements
• Hub cards are always ontop
• Include breadcrumb
  
• Breadcrumb interaction - clicking on a level in the breadcrumb goes to the hub page that matches the levels, including the one pressed. If there is no hub page there, it goes to the next level up.
• Sidebar always shows level 2 as primary and level 3 is nested

Custom elements take time to get upgraded, which means we might see a flash of unstyled content.

https://developers.google.com/web/fundamentals/web-components/customelements#prestyle

Before an element is upgraded you can target it in CSS using the :defined pseudo-class. This is useful for pre-styling a component. For example, you may wish to prevent layout or other visual FOUC by hiding undefined components and fading them in when they become defined.

@chanar thoughts?

It's becoming apparent that <cxl-institute-layout> is too narrow of a concept for something that is generally well re-usable across many apps.

Hence we should refactor this component towards <cxl-app-layout> where different modes trigger via element attributes like theme and whatever else we need.

cc @freudFlintstone

https://github.com/vaadin/vaadin-avatar

Explore whether vaadin-context-menu can technically sanely display a context content block

• Across device categories.

• What should the data model be? (Current: https://github.com/conversionxl/aybolit/blob/master/packages/storybook/cxl-ui/cxl-marketing-nav.data.json)

• Identify any potential UX issues.

@lkraav: Even if we can somehow figure out how to render an extra vaadin-context-menu panel

• large devices - sizing of it could be a problem, if first dropdown level doesn't have many items, content panel won't fit much content... it should probably scrollbar itself
• small devices - I don't even have any idea where to display such panel on small devices - vaadin-context-menu turns into a modal dialog there... maybe simply hoist it below menu items?

CURRENT

Target (adds right-most "What are playbooks?" content block):

We probably don't need triple-digit numbers, so this doesn't need to be infinitely extensible.

1.5em sizing seems to work well for double-digit sizing, but flexbox alignments need fine-grained adjustments on multi-level accordion https://conversionxl.github.io/aybolit/?path=/story/cxl-ui-cxl-vaadin-accordion--cxl-vaadin-accordion-theme-minidegree-track

#10 (comment)

I wonder if our layout components should normalize via https://github.com/sindresorhus/modern-normalize or somesuch.

Original design

Steps and Playbooks need ID's in the viewer

• Pendo tagging - Step ID and WP post ID

People might want to share a context menu item link, but the element closes immediately on right-click.

Are we maybe doing too much or too little at https://github.com/conversionxl/aybolit/blob/cxl-ui-0.1.9/packages/cxl-ui/src/components/cxl-marketing-nav.js#L245-248

        // Prevent close on upstream events: clicks, keydown, etc
        contextMenu.addEventListener('item-selected', e => {
          e.stopImmediatePropagation();
        });

CXL Storybook

Ayobilit notes:

• Polymer Is going away - Vaadin is going to get refactored to LitElement https://lit-element.polymer-project.org/
• Originally polymer 2 - that spec went away.
• Continue with Vaadin - extend their components.
• If needed create a couple of our own.
• Anything the UI/UX designers can do to assist/document this
• Transparency of components

Steps

1. Data source (WP REST API, fake JSON files)
2. API (what attributes, what's in shadow DOM, what's in light DOM)
3. Styling (CXL UI scss folder)

Adeft Playbook viewer front-end Compenents to be converted to storybook

• Steps > extend cxl-vaadin-accordion on storybook
• Ratings > CXL star rating
• Embed other components to compose the playbook viewer using CXL layout=2c-l

Criteria for what Is a component:

• Does it have functionality?
• Does it have state?
• If it is just display — then doesn’t need to become a CXL UI component - no "style-only wrapper custom elements" needed
• Usually don’t do wrapper component

When Aybolit pull request is accepted then its ready for APP

Element view specification

Desktop

Main section

1. Breadcrumb
2. Title
3. Author (check with @litill about improvements made here^ regarding hiding Adeft user)
4. Peer reviewed - no avatar. (check with @litill about improvements made here^ regarding hiding user if that user is author, and showing multiple peer reviewers.)
5. Use case
6. Steps

Side bar

1. Rate this playbook
2. Last updated - as is
3. Courses & Lessons- only show if exists - change Label to Related Courses & Lessons
4. Related blogs - only show if exists
5. Tools - only show if exists

Mobile view order

1. Breadcrumb
2. Title
3. Author
4. peer review - no avatar.
5. Use case
6. Steps
7. Sidebar elements in same order^

Feedback

• Move rating to the side bar with a Rate this playbook heading. Follows order above^ Check this video for placement - loom.com/share/749d6f9c1cd148e6838c2e4607ae5758
• Remove arrows from sidebar
  
• Use CXL footer

Follow-up #42

PHP layer has a menu cache which prevents .current-menu-item from correctly identifying the active page for almost all cached hits.

We need to augment #45 further and implement .current-menu-item assignment via JS.

cc @freudFlintstone

cxl-marketing-nav dropped all legacy menu styles, so in-page navigation for landing pages was lost, and we need a new (and improved) web component for it.

See https://github.com/DanielSchaffer/webpack-babel-multi-target-plugin

Storybook link

As a user I want to be able to view all my CXL learning content in a central location so I can easily access items that are of importance to me.

MVP Dashboard Figma

Specifications

Layout

• Use the story book layout [layout=2c-r]
• Use CXL nav and footer from storybook
• The footer should not be "sticky" but be at the bottom of the page.
• Use course/minidegree/playbook accordion cards elements
• Minidegree and hub cards are always ontop

Sidebar

• Use the same component that @litll used in the hub page layout
• Only Minidegrees & Playbooks are expandable.
  
• The rest of the labels are single level: Feed, Roadmap, Courses, Review new contributors
• Minidegrees - Include an item for Each minidegree that is selected by the user
• Playbooks - Include Saved Playbooks, Include an item for Each team you are part of, My drafts and Peer review playbooks.
• On mobile view, after selecting an item from the sidebar, the content view is triggered. Explainer

Tags

• Tags by default are not selected
• Tags show the number of items in each one
• When clicked filter the content
  

Tags by section

• In Feed the tags are: Playbooks, Courses, Minidegrees
• In Roadmap : Include a tag per mini degree, Started, Not started
• In Courses : Include Started, Not started
• InMinidegrees top level: Include Started, Not Started
• In Playbooks top level: include Drafts, Peer review and Saved, include a tag for each team
• In Playbooks sub level: Include Drafts, Peer review and Saved

Object visibility Logic by section - to be done when live with database.

• In Feed show last 10 items the user has interacted with
• In Roadmap: Show courses and minidegrees that the user has selected with the roadmap
• In Courses: Show courses the user has selected outside of the roadmap
• InMinidegreestop level: Include Started and Not Started
• In Playbookstop level: include Drafts, Peer review and Saved, include a tag for each team
• In 'Playbookssub level: IncludeDrafts, Peer reviewandSaved`

https://github.com/conversionxl/aybolit/blob/cxl-ui-0.2.0/packages/cxl-lumo-styles/scss/themes/vaadin-accordion.scss is currently using masonry-style CSS columns. Example URL https://cxl.com/institute/online-courses/

CSS columns present some UX issues so we'd like to experiment with more traditional "fixed-row" grid next.

Main problem with accordion card grid elements is that on horizontal grids, full grid row height changes when any card in the row is opened, creating unattractive whitespace underneath unopened cards.

We need to play with fixed height and overflow to make sure grid row height stays static.

It's probably OK for opened cards to overflow cards in other rows. This is a hypothesis that needs to be proven here.

cc @freudFlintstone

Link to community
team?

After a discussion with CXL Product owner, we thought it would be a simple win, if our headlines on mobile were smaller. Some headlines have long words in them which are awkward to read.

Current situation example from iPhone 8 on content-marketing-research online course sales page

NYT example on mobile

Here's an example of making:
h1: 2em (main header
h2: 1.5em (in-content headers)
h3: 1.3em (accordion elements)
h4: 1.1em (Course curriculum course title on sales page)

The text should probably change with the mobile menu appearing. (around 740px i think)

I did check material.io for their solutions, but I didn't dig too deep. https://material.io/design/typography/the-type-system.html

https://cxl.com/institute/pricing/ hero could use less space hogging, but cxl-section shadowed wrap doesn't allow an override.

Goal

https://github.com/stowball/eqio

WordPress builds navigation context identification classes for each menu item.

It's possible to easily highlight such menu items for improved navigational clarity.

We should probably add this to firstUpdated() https://github.com/conversionxl/aybolit/blob/cxl-ui-0.1.9/packages/cxl-ui/src/components/cxl-marketing-nav.js#L113

cc @freudFlintstone

After opening "Search" context menu item, user needs to make another click to focus search box for input.

Search box should be auto-focused on open.

For some reason,

First target: Aybolit Storybook

Implications for every component:

1. must display itself fully themed, stand-alone (=== not inside a layout component, also we may have to display some styled components in some <iframe> embed, without any layout... unless even that should have a minimal layout component, or are we moving into a general theme mixin territory here - all layout components must mixin some CXL Lumo component)

2. (?) must explicitly import Lumo https://github.com/vaadin/vaadin-button/blob/v2.1.5/theme/lumo/vaadin-button-styles.html (alternative would be "god object layout component imports Lumo, everybody shares benefits", but that would break 1.)

3. Is it possible to architect Vaadin Lumo style overrides https://github.com/vaadin/vaadin-themable-mixin in a logical Aybolit package structure?

With <cxl-icon-nav-item> https://github.com/conversionxl/aybolit/pull/10/files#diff-a3ef6e9529d9dcc640bb39f875fdad25R26 arbitratry HTML rendering here would be a complication.

@chanar can you expand our custom icon set w/ CXL logo?

Analysis

Structure: (minidegree > track[foldable] >)? course[foldable] (> module)? > lesson

Live examples

• minidegree: https://conversionxl.com/institute/certificate/cxl-conversion-optimization/
• modules: https://conversionxl.com/institute/course/personalizing-for-conversion/
• no-modules: https://conversionxl.com/institute/course/creating-a-personalization-project-from-scratch/

Notes

Modules -> start with solving via mini-headings? (non-collapsible)

Track containers need to hold "track time" element, like Total Time: ~40 hrs (edited)

Iteration v1

/certificate/ url displays long minidegree sidebar widget

/course/, /lesson/ display shorter sidebar widget

https://polymer.slack.com/archives/C6ULJ2F7S/p1573588521132400

Bundle build causes missing styles:

The custom element definition for "vaadin-tab" was finalized before a style module was registered. Make sure to add component specific style modules before importing the corresponding custom element.

• Evaluate cxl-redesign setup w/ "load all style modules first, always"
• Decide if we need to go global, or tweak cxl-marketing-nav dependency graph with imports/exports for now

https://www.figma.com/file/Gf1oYUDN3lPXKSd7OCd9VcWh/CXL-Pricing?node-id=35%3A12

What is our strategy, do we go for consistent component sizing between cards (meaning fixed or similar approach), or not that important in MVP? Illustrative image of the issue here, https://i.snag.gy/d6n7T2.jpg.

Error:

Uncaught TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'.
    at HTMLElement.adoptStyles (lit-element.ts:191)
    at HTMLElement.initialize (lit-element.ts:153)
    at HTMLElement.UpdatingElement (updating-element.ts:438)
    at new LitElement (lit-element.ts:61)
    at new <anonymous> (delegate-focus-mixin.js:29)
    at new ButtonElement (button.js:5)
    at new AbwButton (abw-button.js:4)
    at TemplateInstance._clone (template-instance.ts:97)
    at NodePart.__commitTemplateResult (parts.ts:276)
    at NodePart.commit (parts.ts:218)

Research: CSSStyleSheet
Ref: lit/lit-element#715 (comment)

Note:

This is usually caused by some kind of invalid CSS
Probable cause

 - export basically fails

Can start with <cxl-accordion-card> as experiment base.

Source data and design "preview" https://cxl.com/institute/reviews/

• @lkraav provide testimonial data JSON

cc @freudFlintstone

• implement <blockquote> styles
• refactor legacy Material icon mixin -> cxl-lumo-styles Vaadin icon
• create cxl-lumo-icons WOFF build chain https://github.com/vaadin/vaadin-lumo-styles/blob/v1.6.0/gulpfile.js#L166-L219
• add standalone <blockquote> story

Current styles, feel free to optimize

blockquote { --lumo-secondary-text-color: var(--lumo-tint); background-color: var(--lumo-shade); font-style: italic; margin: 0; padding: 1em var(--lumo-space-xl); position: relative;

    @mixin mixin-icon format_quote, before, true { color: var(--lumo-primary-color); font-size: var(--lumo-font-size-xxl); right: 1rem; line-height: 1; position: absolute; };

    p {
        > img { float: left; margin-right: 1em; margin-top: -1em; }
    }

}

Demo clip
https://share.clickup.com/clip/p/t2317190/274a95ec-1f12-4064-a585-7ad5505e26ea/screen-recording-2021-03-17-13:20.webm

Example URL
https://cxl.com/institute/lesson/a-big-list-of-persuasion-techniques/#context-dependent-memory

Scroll is working with scroll="document", but not supported with scroll="panels".

3. Side bar

• Design follows figma element on MVP Hub page
• Use vaadin accordion component
• Sidebar has only 2 levels
  

To start, I'm looking for a clean branch that implements only <cxl-marketing-layout>, nothing else. This should establish a baseline requirement set for everything else.

Ref:

can we replace

"build-styling": "node packages/sass-render/bin/sass-render.js -s 'packages/*/scss/**/*.scss'",

with

"build-styling": "node packages/sass-render/bin/sass-render.js -s \"packages/*/scss/**/*.scss\"",

does this works on linux as well?

Works on windows if double quotes are used.

cc @freudFlintstone

Probably use https://github.com/WickyNilliams/headroom.js

I foresee a scenario where people will request "icon + label" combo, instead of just "icon + hover + tooltip".

WP is easily able to render <cxl-icon-nav-item title="Active Training">, so we could use this value to render a <label> element below the icon. font-size needs to be on the small end of Lumo scale.

  >>>

ROADMAP