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 2 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
17 changes: 17 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.

30 changes: 30 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,30 @@
@charset "UTF-8";

//
// Date Stacked
//
// Abbreviated month stacked on top of numerical day of the month.
//
// Markup: ../templates/components/date-stacked/date-stacked.twig
//
// Style guide: Components.Date Stacked
//
.su-date-stacked {
@include box-shadow('shallow');
@include margin(null 0 null null);
@include padding(20px 25px);
background: $color-black;
color: $color-white;
text-align: center;

.su-date-month {
JBCSU marked this conversation as resolved.
Show resolved Hide resolved
@include modular-typography(1);
font-weight: $font-x-light;
line-height: $displays-line-height;
text-transform: uppercase;
}

.su-date-day {
JBCSU marked this conversation as resolved.
Show resolved Hide resolved
font-weight: $font-regular;
josephgknox marked this conversation as resolved.
Show resolved Hide resolved
}
}
8 changes: 8 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,8 @@
@charset "UTF-8";

///
/// ROLL UP
///

@import
'date-stacked';
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 %}
<div class="su-date-month">{{ month_of_year }}</div>
{% endif %}

{% if day_of_month is not empty %}
<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 •
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.

3 changes: 3 additions & 0 deletions kss/builder/decanter/kss-assets/css/kss.css
View file
Open in desktop

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

7 changes: 7 additions & 0 deletions kss/builder/decanter/scss/_date-stacked.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@charset "UTF-8";

#kssref-components-date-stacked {
.su-date-stacked {
max-width: 93px;
}
}
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.

A couple of examples to digest:

1 change: 1 addition & 0 deletions kss/builder/decanter/scss/kss.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
'colors-demo',
'content',
'cta',
'date-stacked',
'flex-grid',
'fullscreen',
'global-footer',
Expand Down
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.