# Legacy Notes

{% hint style="warning" %}
**TERMINOLOGY & APPROACH CHANGES** \
With the introduction of Code Components, our strategy is shifting in how we approach component development, and our terminology is shifting with it. 

A central part of that is that we're repurposing the abbr. CC to indicate **Code Components**, rather than Sygnal's ***Core***** Component** library naming conventions. 

*These notes are kept for alignment with any outdated docs.* 
{% endhint %}

## Project Phases 

The project has 3 Phases, refered to as CC1, CC2, and CC3. 

1. CC1 - [Reproduce the native elements](/sygnal-webflow-components/nc/native-components-ncs/nc-design-approach.md) as closely as possible. 
2. CC2 - Reproduce the native element, plus add minor enhancements to basic functionality. Emphasis on usability, more effective access to HTML5 features, broader use case support, and developer friendliness. 
3. CC3 - Reproduce the native element's functionality, but with a completely modern approach.  Make it more capable, versatile, and robust. 

{% hint style="info" %}
CC1 - Recreating native elements
{% endhint %}

<table><thead><tr><th width="244.99993896484375">Phase </th><th width="261.6666259765625">Functionality </th><th>Tech</th></tr></thead><tbody><tr><td><strong>Core Components 1</strong> <br><strong>( CC1 )</strong><br><br>Reproduce the native element as closely as possible. </td><td><ul><li>Drop in CC1's anywhere an existing native element is used. </li><li>Use in Build Mode slots. </li><li>Better CMS &#x26; Property data-binding </li><li>Basic design-time functional UX</li></ul></td><td><p>Webflow;</p><ul><li>Components </li><li>Custom elements</li><li>Classes </li><li>Variables</li><li>Use Webflow.js where possible </li><li>Use Webflow's built-in internal <code>w-*</code> classes </li></ul><p>Also; </p><ul><li>JS only where needed to bridge gaps</li><li>Custom CSS only where needed to bridge gaps </li></ul></td></tr><tr><td><strong>Core Components 2</strong> <br><strong>( CC2 )</strong><br><br>Reproduce the native element, plus add minor enhancements to basic functionality. <br><br>Emphasis on usability, more effective access to HTML5 features, broader use case support, and developer friendliness. </td><td><ul><li>More complex forms, with more exposed input attributes</li><li>Improved JS support for enable/disable/readonly, validation, etc. </li><li>Improved a11y </li><li><p>Easy integration with key libraries; </p><ul><li>SA5 </li><li>FS Attributes </li></ul></li><li><p>Component variations </p><ul><li>e.g. Icon buttons</li><li>e.g. Swatch radio buttons</li></ul></li></ul></td><td><em>Same as above.</em> </td></tr><tr><td><strong>Core Components 3</strong><br><strong>( CC3 )</strong><br><br>Reproduce the native element's functionality, but with a completely modern approach.  Make it more capable, versatile, and robust.</td><td><ul><li>Advanced components </li><li>Specific Designer mode mechanics. </li><li>Solution for instructions.  </li><li>Solution for styling  </li></ul></td><td><p>Webflow;</p><ul><li>Components</li><li>Custom elements</li><li>Classes</li><li>Variables</li><li>GSAP (likely no Webflow.js for UX)</li></ul><p>Also; </p><ul><li>JavaScript</li><li>3rd party libs, e.g. swiperJS, flatpickr, luxon, etc. </li><li>Isolated CSS?</li><li>Smart variable application?</li></ul></td></tr></tbody></table>

## Goals

### CORE COMPONENTS - PHASE 1

General goals;&#x20;

* Versatility.  Create several variants or versions of the component to suit specific cases&#x20;
* Easier customization, where needed.  "Crack open" fundamental elements to allow more intesting arrangements to occur in a specific project. &#x20;
* Ease of use. Espose special functionality better in a more accessible way.&#x20;
* Deeper a11y control and flexibility&#x20;
* Easier customization, where needed.  "Crack open" fundamental elements to allow more intesting arrangements to occur.&#x20;

Use cases;&#x20;

* Multi-step forms&#x20;
* Customized forms&#x20;
* CMS-compatible sliders and tabs&#x20;

At the same time, Webflow\.js  &#x20;

### CC2 COMPONENTS

General goals;&#x20;

* Combine components that are very similer
  * e.g. H Flex and V Flex&#x20;
* Split components that deserve distinction&#x20;
* Support common configurations as Variants&#x20;
  * e.g. Grid 2-col and 3-col&#x20;
* Create new basic components for convenience&#x20;
  * e.g. Inline SVG Icon&#x20;

### CC3 COMPONENTS

## Levels of Components&#x20;

All elements can be thought of as consisting of;&#x20;

* HTML, CSS, and possible JS&#x20;

To these we are adding varying degres of;&#x20;

1. Component slots assembly&#x20;
2. Component properties
3. Custom JS&#x20;
   1. "Shivs" to close gaps in current component design&#x20;
4. CSS variables &#x20;

The conceptual evolution is;&#x20;

<table><thead><tr><th width="99.66668701171875"></th><th>CC1</th><th>CC2</th><th>CC3</th></tr></thead><tbody><tr><td>Goal</td><td>Reproduce the native element as closely as possible. </td><td>Reproduce the native element, plus minor enhancements to basic functionality. <br><br>Emphasis on usability.</td><td>Reproduce the native element's functionality, but with a completely modern approach.  Make it more capable, versatile, and robust. </td></tr><tr><td>Value</td><td><ul><li>Tech starting point </li><li>Proof of concept</li><li>Some data-binding advantages, e.g. checkbox binding to a collection list </li></ul></td><td><ul><li>Familiar element</li><li>Key enhancements <br>( see examples ) </li></ul></td><td></td></tr><tr><td></td><td><strong>TECHNICAL APPROACH</strong></td><td></td><td></td></tr><tr><td>HTML</td><td><ul><li>Reproduce the native element as closely as possible. </li><li>Use custom elements primarily, for attribute freedom. </li><li>Use Slots where it makes sense in multi-element assemblies like forms. </li></ul></td><td><p>CC1 plus-<br></p><ul><li>Consider best use of Properties.  Look for ways to utilize Link, Image, Video properties effectively. </li></ul></td><td></td></tr><tr><td>CSS</td><td><ul><li>Utilize the native element's CSS as closely as possible, with no changes. </li></ul></td><td></td><td></td></tr><tr><td>JS</td><td><ul><li>Utilize the native element's JS, with no changes. </li></ul></td><td></td><td></td></tr><tr><td></td><td><strong>COMPONENT FEATURES</strong></td><td></td><td></td></tr><tr><td>Slots</td><td>Limited</td><td>More robust</td><td>Unlimited, when appropriate </td></tr><tr><td>Variables</td><td>No</td><td>Yes</td><td>Yes, extensively </td></tr><tr><td>Variants</td><td>No</td><td>Yes</td><td>Yes</td></tr><tr><td>Build / Lib mode attention</td><td>No</td><td>Some</td><td>100% </td></tr><tr><td></td><td><strong>EXAMPLES</strong> </td><td></td><td></td></tr><tr><td>Button</td><td>Button</td><td><ul><li>Image Icon variant</li><li>Disabled state </li><li>Use of CSS vars and variants for styling </li></ul></td><td></td></tr><tr><td>Form Input</td><td>Form Input</td><td><p></p><ul><li>with default value</li><li>Disabled state </li></ul></td><td></td></tr><tr><td>Slider</td><td>Basic Slider</td><td>CMS-compatible slider</td><td>Possible switch to swiper.js as engine </td></tr><tr><td>Video </td><td>Basic Video Element</td><td><ul><li>Add further properties</li><li>Create versions, like Embedly video, YouTube video, direct Video URL </li></ul></td><td>Seek to create "super" components that handle a range of situations smoothly, so that a single component can be used in a collection list, linking to multiple video types. </td></tr><tr><td>YouTube</td><td>Basic YouTube Element</td><td><ul><li><p>Enhanced handling of special URLs </p><ul><li>YT shorts, and rotated orientation</li></ul></li><li>Better responsiveness? </li></ul></td><td><ul><li>Advanced ops like suppressing the pause screen </li></ul></td></tr></tbody></table>


---

# 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/sygnal-components/legacy-notes.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.