**Scope** **Note** this spec only covers the card (and hero) format. Implementation for the list format will be covered in another ticket. **Note** We should be able to support other messaging in the future **Note** messaging should not appear on SPOC units. This is in accordance with original New Tab *Messaging covers the following actions* * Saving to Pocket * Archiving in Pocket * Deleting from Pocket * Bookmarking * Removing from Bookmarks **Implementation Details** * A footer element should be added to the bottom of the card to contain states messaging and future features like time to read. * Footer height should be 32px * Text and icon should be vertically centered in footer * Text and icon color should be `gray-50` * Icon dimensions `height: 16px`, `width: 16px` * Text properties `font-size: 13px`, `line-height: 20px` * Use `cubic-bezier(.07,.95,0,1)` with timing of `150ms` for the fade in animation * If a message is already visible, it should disappear and the new message shown with the animation described above **Suggested Markup** ```html <footer class="story-context"> <span class="story-context-icon icon icon-saved-to-pocket"></span> <div class="story-context-label">Saved to Pocket</div> </footer> ``` **Design Spec** https://www.figma.com/file/V4p40RBBtp1939AxwqAFyWTe/New-Tab-Spec-for-Fx-v69?node-id=41%3A1
Bug 1540842 Comment 4 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
**Scope** **Note** this spec only covers the card (and hero) format. Implementation for the list format will be covered in another ticket. **Note** We should be able to support other messaging in the future **Note** messaging should not appear on SPOC units. This is in accordance with original New Tab *Messaging covers the following actions* * Saving to Pocket * Archiving in Pocket * Deleting from Pocket * Bookmarking * Removing from Bookmarks **Implementation Details** * A footer element should be added to the bottom of the card to contain states messaging and future features like time to read. * Footer height should be 32px * Text and icon should be vertically centered in footer * Text and icon color should be `gray-50` * Icon dimensions `height: 16px`, `width: 16px` * Text properties `font-size: 13px`, `line-height: 20px` * Use `cubic-bezier(.07,.95,0,1)` with timing of `150ms` for the fade in animation * If a message is already visible, it should disappear and the new message shown with the animation described above **Suggested Markup** ```html <footer class="story-context"> <span class="icon icon-small-spacer icon-saved-to-pocket"></span> <div class="story-context-label">Saved to Pocket</div> </footer> ``` **Design Spec** https://www.figma.com/file/V4p40RBBtp1939AxwqAFyWTe/New-Tab-Spec-for-Fx-v69?node-id=41%3A1
**Scope**
**Note** this spec only covers the card (and hero) format. Implementation for the list format will be covered in another ticket.
**Note** We should be able to support other messaging in the future
**Note** messaging should not appear on SPOC units. This is in accordance with original New Tab
*Messaging covers the following actions*
* Saving to Pocket
* Archiving in Pocket
* Deleting from Pocket
* Bookmarking
* Removing from Bookmarks
**Implementation Details**
* A footer element should be added to the bottom of the card to contain states messaging and future features like time to read.
* Footer height should be 24px
* Text and icon should be vertically centered in footer
* Text and icon color should be `gray-50`
* Icon dimensions `height: 16px`, `width: 16px`
* Text properties `font-size: 13px`, `line-height: 24px`
* If a message is already visible, it should disappear and the new message shown with the animation described above
**Suggested Markup**
```html
<footer class="story-footer">
<div class="view-count">
9.9m views
</div>
<div class="status-message">
Saved to Pocket
</div>
</footer>
```
**Transition**
Transition is described in this code pen. It shows what the transition looks when when there is a view count and when there isn't. Click on the footer element to see the transition.
https://codepen.io/otbog/pen/EBJGJW
**Design Spec**
https://www.figma.com/file/eGdZVYlZ5evvePHUCtKnYg7u/New-Tab-Spec-for-Fx-70?node-id=91%3A0
**Scope**
**Note** this spec only covers the card (and hero) format. Implementation for the list format will be covered in another ticket.
**Note** We should be able to support other messaging in the future
**Note** messaging should not appear on SPOC units. This is in accordance with original New Tab
*Messaging covers the following actions*
* Saving to Pocket
* Archiving in Pocket
* Deleting from Pocket
* Bookmarking
* Removing from Bookmarks
**Implementation Details**
* A footer element should be added to the bottom of the card to contain states messaging and future features like time to read.
* Footer height should be 24px
* Text and icon should be vertically centered in footer
* Text and icon color should be `gray-50`
* Icon dimensions `height: 16px`, `width: 16px`
* Text properties `font-size: 13px`, `line-height: 24px`
* If a message is already visible, it should disappear and the new message shown with the animation described above
**Suggested Markup**
```html
<footer class="story-footer">
<div class="view-count">
9.9m views
</div>
<div class="status-message">
Saved to Pocket
</div>
</footer>
```
The view count referenced above is being implemented in this ticket https://bugzilla.mozilla.org/show_bug.cgi?id=1565709
**Transition**
Transition is described in this code pen. It shows what the transition looks when when there is a view count and when there isn't. Click on the footer element to see the transition.
https://codepen.io/otbog/pen/EBJGJW
**Design Spec**
https://www.figma.com/file/eGdZVYlZ5evvePHUCtKnYg7u/New-Tab-Spec-for-Fx-70?node-id=91%3A0
**Scope**
**Note** this spec only covers the card (and hero) format. Implementation for the list format will be covered in another ticket.
**Note** We should be able to support other messaging in the future
**Note** messaging should not appear on SPOC units. This is in accordance with original New Tab
*Messaging covers the following actions*
* Saving to Pocket
* Archiving in Pocket
* Deleting from Pocket
* Bookmarking
* Removing from Bookmarks
**Implementation Details**
* A footer element should be added to the bottom of the card to contain states messaging and future features like time to read.
* Footer height should be 24px
* Text and icon should be vertically centered in footer
* Text and icon color should be `gray-50`
* Icon dimensions `height: 16px`, `width: 16px`
* Text properties `font-size: 13px`, `line-height: 24px`
* If a message is already visible, it should disappear and the new message shown with the animation described above
**Suggested Markup**
```html
<footer class="story-footer">
<div class="view-count">
9.9m views
</div>
<div class="status-message">
span class="saved-to-pocket-icon"></span> Saved to Pocket
</div>
</footer>
```
The view count referenced above is being implemented in this ticket https://bugzilla.mozilla.org/show_bug.cgi?id=1565709
**Transition**
Transition is described in this code pen. It shows what the transition looks when when there is a view count and when there isn't. Click on the footer element to see the transition.
https://codepen.io/otbog/pen/EBJGJW
**Design Spec**
https://www.figma.com/file/eGdZVYlZ5evvePHUCtKnYg7u/New-Tab-Spec-for-Fx-70?node-id=91%3A0
**Scope**
**Note** this spec only covers the card (and hero) format. Implementation for the list format will be covered in another ticket.
**Note** We should be able to support other messaging in the future
**Note** messaging should not appear on SPOC units. This is in accordance with original New Tab
*Messaging covers the following actions*
* Saving to Pocket
* Archiving in Pocket
* Deleting from Pocket
* Bookmarking
* Removing from Bookmarks
**Implementation Details**
* A footer element should be added to the bottom of the card to contain states messaging and future features like time to read.
* Footer height should be 24px
* Text and icon should be vertically centered in footer
* Text and icon color should be `gray-50`
* Icon dimensions `height: 16px`, `width: 16px`
* Text properties `font-size: 13px`, `line-height: 24px`
* If a message is already visible, it should disappear and the new message shown with the animation described above
**Suggested Markup**
```html
<footer class="story-footer">
<div class="view-count">
9.9m views
</div>
<div class="status-message">
<span class="saved-to-pocket-icon"></span> Saved to Pocket
</div>
</footer>
```
The view count referenced above is being implemented in this ticket https://bugzilla.mozilla.org/show_bug.cgi?id=1565709
**Transition**
Transition is described in this code pen. It shows what the transition looks when when there is a view count and when there isn't. Click on the footer element to see the transition.
https://codepen.io/otbog/pen/EBJGJW
**Design Spec**
https://www.figma.com/file/eGdZVYlZ5evvePHUCtKnYg7u/New-Tab-Spec-for-Fx-70?node-id=91%3A0
**Scope**
**Note** this spec only covers the card (and hero) format. Implementation for the list format will be covered in another ticket.
**Note** We should be able to support other messaging in the future
**Note** messaging should not appear on SPOC units. This is in accordance with original New Tab
*Messaging covers the following actions*
* Saving to Pocket
* Archiving in Pocket
* Deleting from Pocket
* Bookmarking
* Removing from Bookmarks
**Implementation Details**
* A footer element should be added to the bottom of the card to contain states messaging and future features like time to read.
* Footer height should be 24px
* Text and icon should be vertically centered in footer
* Text and icon color should be `gray-50`
* Icon dimensions `height: 16px`, `width: 16px`
* Text properties `font-size: 13px`, `line-height: 24px`
* If a message is already visible, it should disappear and the new message shown with the animation described above
**Suggested Markup**
```html
<footer class="story-footer">
<div class="view-count">
9.9m views
</div>
<div class="status-message">
<span class="saved-to-pocket-icon"></span> Saved to Pocket
</div>
</footer>
```
The view count referenced above is being implemented in this ticket https://bugzilla.mozilla.org/show_bug.cgi?id=1565709
**Transition**
Transition is described in this code pen. It shows what the transition looks when when there is a view count and when there isn't. Click on the footer element to see the transition.
*Updated Codepen*
https://codepen.io/otbog/pen/aepXLo
**Design Spec**
https://www.figma.com/file/eGdZVYlZ5evvePHUCtKnYg7u/New-Tab-Spec-for-Fx-70?node-id=91%3A0