Add Tag Filter

[Kartik1397]

Fixes #10

Screenshot

[google-cla]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[Kartik1397]

@googlebot I signed it!

[nucliweb]

Hello @Kartik1397, thank you for your proposal 😊

I have a few suggestions:

Colors

• The (x) button to remove the filter doesn't have a good contrast in dark mode theme
• Is difficult for me to see the current tag selected

Accessibility

Can you add title to tags

User eXperience

Can you remove the # navigation?
Really the user doesn't change the URL, and has a bad experience when he/she wants to back.

[nucliweb]

Duplicated property

Suggested change

margin: 0;

[Kartik1397]

🤐

[nucliweb]

An approach to simplify this file will be:

import { Component } from "preact";
import style from "./style.module.css";

const APIS = [
  { label: "paint", style: "paint", text: "Paint" },
  {
    label: "properties and values",
    style: "props",
    text: "Properties & Values",
  },
  { label: "typed object model", style: "typed", text: "Typed Object Model" },
  { label: "layout", style: "layout", text: "Layout" },
  { label: "animation", style: "animation", text: "Animation" },
];
export default class Tag extends Component {
  render(props) {
    const TAG = APIS.map((api) =>
      api.label === props.label ? api : null
    ).filter((api) => api != undefined)[0];

    return (
      <li
        class={`${style.tag} ${
          props.selected === false
            ? style[TAG.style]
            : style[`${TAG.style}-active`]
        }`}
      >
        <a
          href="javascript:void(0)"
          onClick={(e) => {
            e.preventDefault();
            props.setFilter(TAG.label);
          }}
          title={TAG.text}
        >
          {TAG.text}
        </a>
      </li>
    );
  }
}

[Kartik1397]

Yeah, this is better than a bunch of if statements.

[una]

Hi @Kartik1397! Did you have a chance to review @nucliweb's suggestions?

[Kartik1397]

Hi @una, Thanks for pointing this, it completely slipped my mind. Will try to do this as soon as possible.

[google-cla]

All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.

We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.

Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).

ℹ️ Googlers: Go here for more info.

[Kartik1397]

Hi @nucliweb, Thank you for reviewing this PR.
For me, everything seems good in dark mode.

I have tested this on Ubuntu and macOS with chrome v89.0.4389.82

[nucliweb]

Hi @nucliweb, Thank you for reviewing this PR.
For me, everything seems good in dark mode.

I have tested this on Ubuntu and macOS with chrome v89.0.4389.82

macOS Big Sur in Dark mode

[nucliweb]

@una Can you see the X in white color with Dark mode?