Pkg: Implement buttons

[xak]

Inputs

https://github.com/SAP/techne/issues/787 https://sapse.invisionapp.com/share/DTBXJCSJW#/243857402_Techne_2-0_Square_Button_Guidelines https://sapse.invisionapp.com/share/DTBXJCSJW#/243857401_Techne_2-0_Text_Buttons

Schema (see example)

{
    "title": "tn-button",
    "type": "object",
    "properties": {
        "modifier": {
            "type": "array",
            "maxItems": 2,
            "items": {
                "oneOf": [
                        {                            
                            "type": "string",
                            "enum": ["small", "large"]
                        },
                        {
                            "type": "string",
                            "enum": ["text"]
                        }               
                ]
            }
        },
        "state": {     
                "type": "string",
                "enum": ["disabled", "hover", "focus", "active"]
         },
        "label": {
            "type": "string",
            "format": "text",
            "default": "Button Label"
        },
        "icon": {
            "properties": {
                "modifier": {
                    "type": "string",
                    "enum": ["top", "before", "after"]
                },
                "name": {
                    "type": "string",
                    "format": "string"
                }
            }
        }
  },
  "required": [
      "label"
  ]
}

Outputs

This story includes standard and text buttons. The base tn-button will be the filled-in button type.

• Buttons should be available as a button or an a element.
• The medium should be the default
• Each button type is also available in a small and large version
• Additionally, large buttons can have an icon above the label. It would be useful to understand more about how icons will work with other button types, e.g., before, after or icon only.

[xak]

This is mildly blocked until icons are complete. Recommend creating an example icon implementation now that can be changed later to use actual icons.

[xak]

@LeoT7508 There are only two screens of buttons in Invision and no PSD on Box. Are these ready to go or still in-progress?