liferay-design/liferay.design

This is repository for the artists formerly known as

liferay.design's Issues

"Resources" landing page

Figma wireframe

Random post generator on homepage banner not working

The blog post at the top of the homepage should be a randomly chosen post from the list — which it is, but the url doesn't match the title or the image.

To Reproduce
Steps to reproduce the behavior:

1. Go to dev.liferay.design
2. See post title, and click the link
3. Realize post title does not match
4. Question everything

Expected behavior
The post title matches the link.

Additional context
The 'Featured Post' component generates a random number, then passes that as the 'HeroPost' id.

Update Liferay Commerce Screenshots

Liferay Commerce has a new accelerator design for 1.1. Please update the screenshots at https://liferay.design/blueprints/resources/product-screens/ with the ones we use on liferay.com.

Anything referring to Beryl should be retired.

Add discernible text to footer links

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users.

More info on link text

Add a <title> element to homepage

The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search.

More detailed information about title elements

Unable to log in w/Firefox

Describe the bug
Nothing happens when clicking "Sign in" with Firefox on Mac

To Reproduce
Try to "sign in" with Firefox

Add meta description to head

to improve SEO / accessibility, make sure each page has a meta description tag

meta description

Create a page about hosting events

We want Liferay offices to be places where the design community can be hosted — design a page for each office, with photos of common spaces and specs — and what you need to do to host an event there.

Mobile-Friendly Components

• banner components on the index and team-member pages
• card layouts on index, article, and team
• footer
• header

Set order for markdown files

Please describe.
It's necessary to be able to order the pages

Describe the solution you'd like
Possibly using the frontmatter (see first iteration of blueprints)

Describe alternatives you've considered
Have not considered alternatives - but open to it?

Add Commerce Screenshots to Blueprints

Drive folder

Jira ticket

Social Icons Light/Dark theme not working

Describe the bug
There is a 'light' and 'dark' property in the Footer and FooterMarkdown components — its a pretty basic styling ternary operator, applying a class.

For some reason, the class stopped working for the svg icons — I suspect it might be the Icon component...

Teammate Avatar on Blog Posts Not Centered

sidebar for blueprints

can utilize same design and functionality as it exists live on blueprints.liferay.design (reference clayui.com for most up-to-date code)

this is critical for the blueprints portion of the site, and will also be reused for the design handbook and lexicon portions (in the future).

CSS Reset not working as expected on production

Describe the bug
reset.scss is getting imported at the to of global — and its working in the dev environment, but once it goes to production (dev.liferay.design) it overrides...it.

I think some of it has to do w/the 'inherit' property for links...but there's also some other padding issues, etc.

Expected behavior
the reset file to wipe all styles, but then get overridden by any specified css

Screenshots

Safari on OS-X: 404s

Main page shows a number of 404s.

Mailing List Signup

We have a Mailchimp account, would like to be able to have people sign up for things on the website — maybe a simple form in the footer? Open to ideas

Have Sitename breadcrumb work

currently when you navigate to main pages (liferay.design/blueprints) — it will show the area as a breadcrumb, but clicking goes back to the index, not e.g. blueprints.

Billboard component for Blueprints homepage

"Need Something" component

Social Icons not able to be hovered/clicked

Describe the bug
Mousing over the social icons in any of the footers does not trigger the hover action.

To Reproduce
Steps to reproduce the behavior:

1. Go to liferay.design
2. Scroll to the bottom
3. Hover on social icons

Expected behavior
They should turn blue and scale up — and you should be able to click on it.

Create Component for Downloading Different Formats of a Single Asset

Is your feature request related to a problem? Please describe.
There are often a wide variety of filetypes for assets — (for images — png, jpg, ai, svg, etc) — currently the ImageDownload component can only handle single image files.

Describe the solution you'd like
A component that can handle single or multiple filetypes — this component could have up to 4 or 5 different files based on a single asset.

Describe alternatives you've considered
On the first version of blueprints, we had a card w/a Dropdown button, that worked.

Additional context
To take it to 11 — having a clickable preview would be super awesome.

Logo usage point 7

Blueprints logo usage is a bit strange right now in point 7.
Go to Guidelines > Logo

You are explaining a case that is not used anymore. This can be misleading as any other product or site from Liferay could be expressed by using the waffle and the title. Is that what we want?

I noticed that by looking at the left menu where we used to have waffle + Blueprints as the identity for the site.

Expected behavior
Either remove point 7. Or use the logo as in the previous version.

Screenshots

Desktop (please complete the following information):

• Desktop

Smartphone (please complete the following information):

• Chrome latest

Re-align blueprints homepage w/lexicon

main differences are in the cards: https://lexicondesign.io

Make Navbar Themeable

Is your feature request related to a problem? Please describe.
On the blueprints site — the nav items dont have enough contrast

Describe the solution you'd like
the footer is themeable - follow something like this for consistency?

Alphabetized Team Page

Currently the team members are rendered by their id — would be great if it was alphabetical by last name (from their photo or page url).

Fix Broken Social Scene

[ ] - Instagram account is https://www.instagram.com/liferay_ux/ but the URL addresses to https://www.instagram.com/liferay_uxd/
[ ] - Linkedin is also going the wrong URL (linkedin.com/company/liferay-inc is the old one, updated url is https://www.linkedin.com/company/83609)

Replace WeDeploy Auth

Is your feature request related to a problem? Please describe.
WeDeploy Auth is going away on April 22 — we need a solution in place before then.

Folders / Components Affected

• utils/index is where Auth is imported
• templates/PrivatePage is where most of the Auth logic lives
• molecules/AuthContainer and LogoutContainer might not be affected, but those are the login/logout components

Automatic redirect once you sign in

Is your feature request related to a problem? Please describe.
Once you sign in, to the Private Page component, it just replaces the "sign in" with your avatar — due to the way the component is built — instead, it would be better if you were redirected to the page you were trying to get to before being prompted to sign in.

Logos do's and don'ts

I would change logos page, usage section to something more visual rather than a plain list. Maybe this is something that you already have in mind.
This is how we do it in Lexicon Site:

Consolidate Team and Article Templates

• card component
• page layout

Style Auth Container

src > components > organisms

Add an "Author" attribute for Event recaps

Is your feature request related to a problem? Please describe.
The event recaps are written by humans, and it's helpful to know who!

Banner h1 text should wrap in hi-res

Banner in h1 running across the image and over the figcaption on higher resolution screens.

To reproduce, open site on high-res monitor

Dead link for logo guidelines

Navigate to: https://liferay.design/blueprints/resources/logo-files

The link for logo guidelines gives a 404 error.

Doesn't the footer violate logo guidelines?

Footer has the old style, multi color grid.

Add [alt] attributes to images

Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute.

More info about alt attributes

Add Headline Capitalization Tool to blueprints

Add this headline capitalization tool to the top of the capitalization style guide page -- https://headlinecapitalization.com/

Copy can be something like, "Not sure how to capitalize a title? Enter your headline into this tool and choose Associated Press style."

Emojis break markdown links

The readme.md links that start with emojis do not correctly jump me down to the anchor point on the page.

e.g. I click on "💁 What do all these files do?" and my url changes to https://github.com/liferay-design/liferay.design#💁-what-do-all-these-files-do but I am not redirected to that section on the page.

FAQ: Incomplete

FAQ is missing responses.

Blueprints Mobile SiteName is white

Describe the bug
On mobile, the title area has white text — its unreadable, need to provide for this case:

A place to start is the SiteName component, in the styles module — I think it could be as simple as modifying the '.dark' class.

Add a [lang] attribute to the html element

If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly.

More info on lang attributes

Source Team Headshots

Ask Abel, Naoki, or Paul for the link to the internal repo of employee photos — there should be headshots for everyone.

There is a folder of test headshots in a new, cool style that needs to be edited.

Then all headshots need to be cropped in a consistent way and saved for web.

GDAACMS MVP

Is your feature request related to a problem? Please describe.
We have a lot of content that we need to publish — the genesis of this content is generally Google Docs. This is necessary because it goes through a lot of iterations, and Google Apps is our preferred collaboration platform.

Describe the solution you'd like
Once we've decided that a document is good enough to be published, we'd like anyone on our team to be able to do it with a minimal process.

Best case (limited to my imagination):
I've decided to publish a blog post (or job listing, or some handbook content), I go to google sheets and enter necessary metadata (author information, url, etc) and click "publish" from some imaginary dropdown (because google allows custom apps?) — and the blog post is updated on the site.

User email is not possible to read on user dropdown

Describe the bug
The user email is not possible to read in the user dropdown due to not enough contrast between the background color and the font-color

To Reproduce

1. Login
2. Click on user face

Expected behavior
Enough contrast at least or another solution for it :)

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 69.0.3497.100

Add Font Troubleshooting

Is your feature request related to a problem? Please describe.
People run into issues all the time with fonts — different OS's handle type differently, so we'd like to provide a place that has a few ways to troubleshoot and solve these problems.

Describe the solution you'd like
A list describing the error, and then steps to solve the problem.

Sample Errors

One issue that I keep on having with all presentations is the font (I keep on getting an error that all those fonts are not supported on my machine). Any idea how to fix it? When I’m reading about the issue it mentions two options for the font error:
There are two main reasons why a font can't be embedded in a PowerPoint presentation

It's an unsupported type of font, such as Adobe PostScript Type 1 or Apple Advanced Typography (AAT). We recommend trying a different font instead.

Permission to embed the font wasn't granted by the creator. Even though the font is a supported TrueType or OpenType font, the font’s creator doesn't allow it to be embedded. This situation can't be changed for that font.

Nice Auth Page

The page you hit if you're not signed in could be improved a lot.

Utilize react components in the markdown files

Describe the solution you'd like
When create markdown pages, I'd like to be able to call some components (i.e. cards for all the colors) so I don't have to write a bunch of html

mdxjs seems to be the preferred library for Gatsby, but open to strong contenders.

Describe alternatives you've considered
Having the components render on a sample page, then copying/pasting the html into markdown

Favicon needed

I believe we need a favicon. Probably Liferay logo would be ok. I think we don't have our own logo yet and I don't know if we will have it.

Broken Breadcrumb Nav Functionality

To Reproduce
Steps to reproduce the behavior:

1. Go to liferay.design/events or /articles
2. Click on any event or article
3. Click on the "/events" or "/articles" breadcrumb in the top left nav
4. 404 error

Expected behavior
It would go back to "/events" or "/articles"

Additional context
Seems like there's some incorrect logic in the SiteName component...but it used to work fine, I think this might have been caused by the updated "Link" component that's designed to automatically parse and handle internal vs external links.

beef up h1 line-height

increase h1 line-height from .9 to 1.2

more. beef.