feat: Article card #1027

[mturoci]

API to review:

/** Create an article card for longer texts. */
interface State {
  /** The card’s title, displayed at the top. */
  title: S
  /** The card's subtitle, displayed under the title. */
  subtitle?: S
  /** The card's caption, displayed under the subtitle. */
  caption?: S
  /** Markdown text. */
  content?: S
}

Used card-wide commands prop that is auto-added to every card and hid the rendered menu in top right corner. wdyt @lo5 ?

Design notes:

• Didn't implement the dot separator. IIRC, @lo5 mentioned in his feedback he doesn't want it.
• Couldn't really align title and toolbar as the design doesn't account for hover effects:
  - what would be the best to do in this case? - cc @sandruparo @shihan007 @shanaka-rajitha

Closes #1027

[shihan007]

@mturoci better to align title and toolbar with base line of the font. and reduce space between heading 1 and paragraph.

cc: @shanaka-rajitha @sandruparo

[mturoci]

better to align title and toolbar with base line of the font

Even for price of breaking the card's padding?

[shihan007]

@mturoci like this

[mturoci]

@shihan007 this doesn't answer my previous question. The hover effect will ignore the 24px card padding if I do it. Is it okay?

and reduce space between heading 1 and paragraph.

The spaces are based on the design - 24px top and 16px bottom margin for title. What should be the correct values then?

[shihan007]

@mturoci why do we need a toolbar for this card layout? It wasn't in the requirement doc or in the design

[mturoci]

It was there all the time, the card just got renamed.

Also in the design:

[shihan007]

@mturoci these are icons which does not take more that 24px x 24px space. placing buttons like that takes lot of space.

[shihan007]

@mturoci if we are placing icons lets middle align icons with the title. Hover effect not a issue

[mturoci]

Thanks @shihan007, what about the correct spacing between title and paragraph?

[shihan007]

@mturoci for cards like these better to have a small size toolbar (height set to 24px, font size 12px). For containers and pages we can use normal toolbar (font size:14px and default spacing)

Space between title section(title+subtitle) and paragraph = 16px
within two sections we can use 24px space

[mturoci]

@shihan007 should be good now - 24px toolbar

[shihan007]

@mturoci yeah this is great. Apply mentioned spacing on title and paragraph too

[mturoci]

Already done, I updated the latest screenshots in a PR description, feel free to check.

[lo5]

Agree with @shihan007 - The large toolbar doesn't fit in here. This is meant to be a card for long-form content, with only minor actions (upvote / share) associated with it, if any. The full / right-aligned toolbar seems overbearing. I'd prefer what was requested in the original design (link) - a title, no subtitle, no caption, a de-emphasized set of icon-links, and content (markdown).

[lo5]

Also see comment about ui.mini_buttons(): #1033 (comment)

[mturoci]

Implemented with ui.mini_buttons:

API

/** Create a set of mini buttons laid out horizontally. */
export interface MiniButtons {
  /** The buttons in this set. */
  items: MiniButton[]
}

/** Create a mini button - same as regular button, but smaller in size. */
export interface MiniButton {
  /** An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked. */
  name: Id
  /** The text displayed on the button. */
  label: S
  /** An optional icon to display next to the button label. */
  icon?: S
}

/** Create an article card for longer texts. */
interface State {
  /** The card’s title, displayed at the top. */
  title: S
  /** Markdown text. */
  content?: S
  /** Collection of small buttons rendered on the other side of card's title. */
  mini_buttons?: MiniButtons
}

[lo5]

@mturoci Looks good. Minor changes:

• Place mini-buttons directly below title, left-aligned like in the original design.
• Change State.mini_buttons to State.items (consistent with form_card).
• Use H2 onwards in example content so that there is visual distinction between the card's title and the top-level headings inside the content.

[mturoci]

All comments addressed:

cc @lo5 for final design review

[shihan007]

@lo5 @mturoci I think icons should align to right top to maintain consistency with other cards. And I can see subtitle also missing here. wdyat?

cc: @sandruparo @shanaka-rajitha