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.

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

date stacked component initial commit #373

Merged
merged 15 commits into from
Jun 18, 2019
Merged

date stacked component initial commit #373

merged 15 commits into from
Jun 18, 2019

Conversation

josephgknox
Copy link

@josephgknox josephgknox commented Mar 29, 2019

READY FOR REVIEW

Summary

  • Adding date stacked component

Needed By (Date)

  • N/A

Urgency

  • N/A

Steps to Test

  1. Pull this branch
  2. Compile styleguide
  3. Review design of date stacked component and related code

Affected Projects or Products

  • Decanter

Associated Issues and/or People

See Also

@josephgknox josephgknox requested a review from cjwest March 29, 2019 18:26
@josephgknox josephgknox self-assigned this Mar 29, 2019
Copy link
Member

@cjwest cjwest left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @josephgknox ,

I have a couple comments for you!

@josephgknox josephgknox requested review from cjwest, yvonnetangsu, sherakama and JBCSU and removed request for cjwest April 4, 2019 17:06
@josephgknox
Copy link
Author

Copy link
Collaborator

@JBCSU JBCSU left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your great work on this, Joe! Just a few comments and questions.

core/src/scss/components/date-stacked/_date-stacked.scss Outdated Show resolved Hide resolved
core/src/scss/components/date-stacked/_date-stacked.scss Outdated Show resolved Hide resolved
max-width: 105px;
}
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should these max-widths be limited to the styleguide's rendering? Don't we want a max-width on the actual rendering?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought a little about this one, and wasn't sure if the max-width should be tied to the component itself or just the style guide for display purposes only. I wondered if the components use case might dictate what width someone wants to set for it. That said, we might actually want a sensible default established; one that they can then override. I'll move this.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do think the widths are inherent in the component. But maybe we could do this styling with a placeholder so people can override if necessary?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is a really good question. My initial knee jerk reaction is to leave components at 100% width with the idea that they will be used either in some sort of container or by a developer in which they could then set the widths. What are other style guides doing? Are they using atomic design principles? Are they applying widths to every level (atom -> organism)? I am sure somebody has gone through some learning lessons on this already and it would be good of us to find out.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<div class="su-date-day">{{ day_of_month }}</div>
{% endif %}

</div>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to change the container from a <div> to a <time datetime="...">? (See <time> on MDN.) In that case we might also want a year. The year wouldn't (necessarily) render in the browser, but bots could recognize the actual date.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll explore this more.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That looks handy. It appears it doesn't have IE support and we should still support IE 11 so my question is what would it look like in IE11? My guess is that it isn't supported but probably looks 100% fine and should be usable. I have been tricked before however.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

caniuse > Known issues says:

While the time and data elements can be used and work fine in all browsers, currently only Firefox and Edge 14+ recognize them officially as HTMLTimeElement and HTMLDataElement objects.

In fact, we use it on news.stanford.edu. Go to any story on that site and inspect the date the story was published - it's a <time> tag. We should of course test it in IE, but it should be fine.

I'm not at all clear on how much benefit it offers, but I'd still lean towards using <time datetime="...">.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it's meaningful to just have {{ month_of_year}} or {{ day_of_motnh }} in the datetime attribute - see MDN. You could end up with datetime="9". What would that mean?

I think we should do our best to provide the most specific datetime possible, even if that mean requiring data that doesn't render visually. I think we should at least have datetime="{{ year }}-{{ month_of_year}}-{{ day_of_month }}", which requires a year, even though no year renders visually. (Of course we'd need logic to build the string based on what data we actually have - we don't want dangling dashes.) We might also add some logic to include the time, if provided.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about now?

Copy link
Member

@yvonnetangsu yvonnetangsu Jun 13, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally it would be nice to have just one <time> tag. Also, datetime with just the month alone might not be valid without a year attached? (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time). I'm fine with the current version though, except maybe only emit one datetime attribute so it doesn't repeat, if we're using 2 <time> tags? Other than that GTG.

Update: For the case when either month or day is empty, maybe omit the datetime entirely since that wouldn't be valid anyway?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 hmmm. Perhaps we go back to the <span> tag for safety. I know it would be more semantic/accessible if the field used <time> but if we are to allow for a mix and match approach, I wouldn't want to have tag switching on the component as that could leave to confusing UI or behaviors if they alternated in a list or something.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's true....if you're anticipating cases that either the day or month might be missing, then <span> is a safer choice, since a valid time tag would require both a month and a day 🤔

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, back to plain ol' span until we come up with a better solution.

Copy link
Member

@sherakama sherakama left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

GTG

Copy link
Member

@yvonnetangsu yvonnetangsu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left a comment about the <time> tag - if we could have <span> nested inside <time> perhaps we could go with the approach I suggested? Everything else looks good, we could get the colors from the color map later after master is merged into this branch 👍

@sherakama
Copy link
Member

@yvonnetangsu Have a look and punch the green button when you are happy with the state of this PR.

@yvonnetangsu
Copy link
Member

@yvonnetangsu Have a look and punch the green button when you are happy with the state of this PR.

GTG - merging!

@yvonnetangsu yvonnetangsu merged commit 4a07d44 into master Jun 18, 2019
@yvonnetangsu yvonnetangsu deleted the 201-date-stacked branch June 18, 2019 22:18
JBCSU added a commit that referenced this pull request Jun 19, 2019
* master:
  date stacked component initial commit (#373)
  Add a variant for Card where the whole card is a link and add option to turn headline into a link (#444)
  Create Masthead component (#439)
  Link variants (#450)

# Conflicts:
#	core/src/scss/utilities/mixins/link/_external-link.scss - resolved using master
#	core/src/scss/utilities/mixins/shadow/_box-shadow.scss - manually resolved
sherakama pushed a commit that referenced this pull request Jul 3, 2019
* date stacked component initial commit

* CC FIXUP

* CC FIXUP

* clean up

* updated default styles for component based on new design

* no bg variant

* styleguide responsiveness

* max width and BEM FIXUP

* incorporate time tag

* Update date-stacked.twig

* fixup! color maps

* fixup! build.

* Update date-stacked.twig
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants