What type of PR is this? (check all applicable)

• [ ] Refactor
• [x] Feature
• [ ] Bug Fix
• [ ] Optimization
• [ ] Documentation Update

Description

Added the comment subscription feature using then new better surface UI.

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Just some screenshots for responsiveness

The Feature in Action

Added tests?

• [x] yes
• [ ] no, because they aren't needed
• [ ] no, because I need help

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

What type of PR is this? (check all applicable)

• [ ] Refactor
• [x] Feature
• [ ] Bug Fix
• [ ] Optimization
• [ ] Documentation Update

Description

This PR gives us the following application components. <Snackbar /> and <SnackbarItem /> and <SnackbarPoller />.

How the Snackbar works.

• You can have at most 3 snackbar items in the snackbar
• If more than 3 are added, the 3 newest are the ones that remain.
• The last snackbar item added is the first one to appear at the bottom in the snackbar.
• snackbar items have a default lifespan of 5 seconds which is configurable via the lifespan prop on the <SnackbarPoller /> component. Once the lifespan has completed, the snackbar item is removed from the snackbar
• If a user mouses over the snackbar, all lifespans of snackbar items are paused.
• If a use mouses out of the snackbar area, the lifespan of snackbar items resumes.

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

<SnackbarItem /> Component

<Snackbar /> Component

<SnackbarPoller /> Component

Added tests?

• [x] yes
• [ ] no, because they aren't needed
• [ ] no, because I need help

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

What type of PR is this? (check all applicable)

• [ ] Refactor
• [x] Feature
• [ ] Bug Fix
• [ ] Optimization
• [ ] Documentation Update

Description

This is the comment subscription component that will be used on the article page. Available on the latest Storybook.

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added tests?

• [x] yes
• [ ] no, because they aren't needed
• [ ] no, because I need help

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

What type of PR is this? (check all applicable)

• [ ] Refactor
• [x] Feature
• [ ] Bug Fix
• [ ] Optimization
• [ ] Documentation Update

Description

Converted the design system button group to a Preact component.

Here is the ButtonGroup in Storybook

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

An example usage of the component.

Added tests?

• [x] yes
• [ ] no, because they aren't needed
• [ ] no, because I need help

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

What type of PR is this? (check all applicable)

• [ ] Refactor
• [x] Feature
• [ ] Bug Fix
• [ ] Optimization
• [ ] Documentation Update

Description

Design system buttons are now available as Preact button components. See the latest Storybook to see button components in action.

By default the <Button /> component renders as an HTML button element, <button ... />, but you can also render it as an HTML anchor element, <a ... />, via the as prop of the <Button /> component. I used as as this is what styled-components used. I basically couldn't think of a better prop name. 😄

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Primary

<Button {...props} />

Secondary

<Button variant="secondary" {...props} />

Outlined

<Button variant="outlined" {...props} />

Danger

<Button variant="danger" {...props} />

Added tests?

• [x] yes
• [ ] no, because they aren't needed
• [ ] no, because I need help

Added to documentation?

• [ ] docs.dev.to
• [ ] readme
• [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?