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

date stacked component initial commit #373

Merged
merged 15 commits into from
Jun 18, 2019
Merged

date stacked component initial commit #373

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
446bb13
date stacked component initial commit
Mar 29, 2019
c9f9dfe
CC FIXUP
Mar 29, 2019
12662ad
Merge branch 'master' into 201-date-stacked
Apr 4, 2019
a867df3
CC FIXUP
Apr 4, 2019
350f758
clean up
Apr 4, 2019
a763dad
updated default styles for component based on new design
Apr 11, 2019
90003c1
no bg variant
Apr 11, 2019
bc63216
styleguide responsiveness
Apr 15, 2019
ac2def3
max width and BEM FIXUP
Apr 15, 2019
69a37c6
incorporate time tag
Apr 18, 2019
3ead959
Update date-stacked.twig
sherakama Jun 13, 2019
7684205
fixup!
sherakama Jun 18, 2019
ff43b19
fixup! color maps
sherakama Jun 18, 2019
9a7290e
fixup! build.
sherakama Jun 18, 2019
bdd75b4
Update date-stacked.twig
sherakama Jun 18, 2019
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
43 changes: 43 additions & 0 deletions core/dist/css/decanter.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions core/src/scss/components/date-stacked/_date-stacked--no-background.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@charset "UTF-8";

//
// Date Stacked No Background
//

.su-date-stacked--no-background {
@include padding(0);
background: none;
color: $color-black;
yvonnetangsu marked this conversation as resolved.
Show resolved Hide resolved
}
39 changes: 39 additions & 0 deletions core/src/scss/components/date-stacked/_date-stacked.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
@charset "UTF-8";

//
// Date Stacked
//
// Abbreviated month stacked on top of numerical day of the month.
//
// .su-date-stacked--no-background - Black type on transparent background
//
// Markup: ../templates/components/date-stacked/date-stacked.twig
//
// Style guide: Components.Date Stacked
//
.su-date-stacked {
@include modular-spacing('padding', 0);
background: $color-black;
color: $color-white;
max-width: 87px;
text-align: center;

@include grid-media-only('md') {
max-width: 101px;
sherakama marked this conversation as resolved.
Show resolved Hide resolved
}

@include grid-media-only('2xl') {
max-width: 105px;
}

.su-date-stacked__month {
@include big-paragraph;
display: block;
}

.su-date-stacked__day {
@include types;
@include type-b;
display: block;
}
}
9 changes: 9 additions & 0 deletions core/src/scss/components/date-stacked/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@charset "UTF-8";

///
/// ROLL UP
///

@import
'date-stacked',
'date-stacked--no-background';
1 change: 1 addition & 0 deletions core/src/scss/components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
'button/index',
'card/index',
'cta/index',
'date-stacked/index',
'global-footer/index',
'hero/index',
'link/index',
Expand Down
4 changes: 4 additions & 0 deletions core/src/templates/components/date-stacked/date-stacked.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"month_of_year": "Oct",
"day_of_month": "31"
}
24 changes: 24 additions & 0 deletions core/src/templates/components/date-stacked/date-stacked.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{#
/**
* @file
* Date Stacked Component.
*
* Abbreviated month stacked on top of numerical day of the month.
*
* Available variables:
* - attributes: For additional HTML attributes not already provided.
* - modifier_class: Additional css classes to change look and behaviour.
* - month_of_year: The abbreviated month of the year.
* - day_of_month: The day of the month in digit form.
josephgknox marked this conversation as resolved.
Show resolved Hide resolved
*/
#}
<div{{ attributes }} class="su-date-stacked {{ modifier_class }}">
{% if month_of_year is not empty %}
<time class="su-date-stacked__month" datetime="{{ month_of_year }}">{{ month_of_year }}</time>
{% endif %}

{% if day_of_month is not empty %}
<time class="su-date-stacked__day" datetime="{{ day_of_month }}">{{ day_of_month }}</time>
{% 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 •
edited
Loading

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.

2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.