# NC Design Approach

## Basic Recreation

1. Take a basic Webflow element 
2. Add it to a page and publish it
3. Disable JavaScript in the browser
4. Inspect the un-modified HTML 
5. Recreate that as a Component 
6. Use Custom Elements primarily, except where certain property-binding requires special property types;
   1. Use Links when Link properties are important
   2. Use Images when Image properties are important
   3. Consider Videos when Image properties are important

## Basic Initialization 

A few elements have specialized initialization that occurs at design-time.  For example- adding special classes to the initially selected tab. 

These are recreated using component-internal JS. 

{% hint style="success" %}
In this setup, the code is encapsulated as an IIFE and self-targets the component so each instance can run fully independently. 
{% endhint %}

## Extend the Component 

### Basic Extensions ( CC1 ) 

Basic extensions of the component involve exposing key HTML5 element properties that are useful. 

### Deeper Extensions ( CC2 )  

* Add common Finsweet Attributes 
  * e.g. FS Filter attributes on form inputs 
* Add common SA5 Attributes 
* Create specialized component variations for specific use cases 
  * e.g. Color-swatch radio button. 
  * e.g. Button with SVG icon 
  * e.g. Pseudo-disabled input, which appears and behaves as a disabled input element, but participates in form validation. 

## Design-Time UX

Some components have a design-time interface for specialized controls and component-specific settings.  Tabs, Sliders, and Lightboxes are good examples of this. 

Each is unique, and components do not currently offer a comparable feature, so we'll be doing some R\&D around the mechanics of this type of functionality. 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sygnal.gitbook.io/sygnal-webflow-components/nc/native-components-ncs/nc-design-approach.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.