Create Card with Variants for Security Config Page

Why are we doing this work

For the redesign of the Security Config Page tracked here, we will need to build a card component with various states as described in the design.

Relevant links

#326926 (closed)

#326926[CONFIG_project-security_testing-tool_states-framework.png]

Implementation plan

Areas of Component

• Heading
• Status
• Description
• Primary Action
• Secondary Section
  • Subheading
  • Description
  • Action

Card Status

• available
  • enabled
  • not enabled
  • unknown (TODO: FOSS #326926 (comment 556803447))
• not available

API of Component

Props:

• Heading Prop String
• Status enum
• availability (include in Status?)
• Description Slot
• Primary Action Slot
• Secondary Heading Prop
• Secondary Description Slot
• Secondary Action Slot

This component will live under gitlab/app/assets/javascripts/security_configuration/components