fix: sd-datepicker css properties not showing in storybook

[martascorreia]

Description:

closes: #3053

The issue is that the JSDoc comments (@summary, @dependency, @dependency, @cssproperty, etc) are the documentation for the @CustomElement, and therefore have to be immediately before this element.

For the fix, I could've moved the converter classes to before the JSDocs, but for readability and maintainability, I created a new file. Let me know if this is the best approach or if you rather have them at the top. They have to be put before the @CustomElement, otherwise it can't read them.

Definition of Reviewable:

• Documentation is created/updated
• Migration Guide is created/updated

• E2E tests (features, a11y, bug fixes) are created/updated

• Stories (features, a11y) are created/updated
• relevant tickets are linked

[changeset-bot]

🦋 Changeset detected

Latest commit: 03da8ce

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@solid-design-system/components	Patch
@solid-design-system/styles	Patch
@solid-design-system/tokens	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🚀 Storybook has been deployed for branch fix_missing-ccs-properties

• View Storybook

[tega-ekakitie]

Hi @martascorreia for sd-datepicker, this is fine now but I checked all the components and noticed there is no css property for the following components, let me know if they're not supposed to have;

• sd-carousel-item
• sd-checkbox-group
• sd-icon
• sd-loader
• sd-menu

Also for the sd-expandable, this error is being returned importing a module script failed. See screenshot

[martascorreia]

Hi @martascorreia for sd-datepicker, this is fine now but I checked all the components and noticed there is no css property for the following components, let me know if they're not supposed to have;

* sd-carousel-item

* sd-checkbox-group

* sd-icon

* sd-loader

* sd-menu

Also for the sd-expandable, this error is being returned importing a module script failed. See screenshot

Hey @tega-ekakitie,
Not all components have currently css properties, only the ones we define figma token variables for. So in this case, the sd-carousel-item, sd-carousel-item, sd-icon, sd-loader and the sd-menu don't have them.
Example of sd-badge, that has css properties:

Example of sd-checkbox-group, that doesn't have any css properties:

As for the sd-expandable issue, could you check again, I can't seem to reproduce it. Does it appear as soon as you enter the "Docs" page?

[tega-ekakitie]

@martascorreia looks good to me