diff --git a/apps/site/.stylelintrc.mjs b/apps/site/.stylelintrc.mjs index 3fea6d8b268c8..62bc641415467 100644 --- a/apps/site/.stylelintrc.mjs +++ b/apps/site/.stylelintrc.mjs @@ -15,7 +15,7 @@ const CUSTOM_AT_RULES = [ // Enforces certain selectors to be only in camelCase notation // We use these for id selectors and classname selectors const ONLY_ALLOW_CAMEL_CASE_SELECTORS = [ - /^(?:[a-z]+(?:[A-Z][a-z]*)*)$/, + /^(?:[a-z0-9]+(?:[A-Z][a-z0-9]*)*)$/, { message: s => `Expected '${s}' to be in camelCase` }, ]; diff --git a/apps/site/components/ApiDocs/StabilityIndex/index.module.css b/apps/site/components/ApiDocs/StabilityIndex/index.module.css index 2302f15dd44f2..bb351798043a7 100644 --- a/apps/site/components/ApiDocs/StabilityIndex/index.module.css +++ b/apps/site/components/ApiDocs/StabilityIndex/index.module.css @@ -1,23 +1,23 @@ .stabilityIndex { - @apply py-3 - px-4 - flex + @apply flex flex-row items-center gap-2 - text-white - rounded; + rounded + px-4 + py-3 + text-white; - .indexLelvel { + .indexLevel { @apply rounded-sm - text-sm - px-1.5; + px-1.5 + text-sm; } &.stabilityLevel3 { @apply bg-info-600; - .indexLelvel { + .indexLevel { @apply bg-info-700; } } @@ -25,7 +25,7 @@ &.stabilityLevel2 { @apply bg-green-600; - .indexLelvel { + .indexLevel { @apply bg-green-700; } } @@ -33,7 +33,7 @@ &.stabilityLevel1 { @apply bg-warning-600; - .indexLelvel { + .indexLevel { @apply bg-warning-700; } } @@ -41,7 +41,7 @@ &.stabilityLevel0 { @apply bg-danger-600; - .indexLelvel { + .indexLevel { @apply bg-danger-700; } } diff --git a/apps/site/components/ApiDocs/StabilityIndex/index.stories.tsx b/apps/site/components/ApiDocs/StabilityIndex/index.stories.tsx index 59a77aa67cafd..0cdbd8c5c75a4 100644 --- a/apps/site/components/ApiDocs/StabilityIndex/index.stories.tsx +++ b/apps/site/components/ApiDocs/StabilityIndex/index.stories.tsx @@ -1,6 +1,5 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react'; - import StabilityIndex from '@/components/ApiDocs/StabilityIndex'; type Story = StoryObj; @@ -9,29 +8,33 @@ type Meta = MetaObj; export const Legacy: Story = { args: { level: 3, - children: 'Legacy. Although this feature is unlikely to be removed and is still covered by semantic versioning guarantees, it is no longer actively maintained, and other alternatives are available.' + children: + 'Legacy. Although this feature is unlikely to be removed and is still covered by semantic versioning guarantees, it is no longer actively maintained, and other alternatives are available.', }, -} +}; export const Stable: Story = { args: { level: 2, - children: 'Stable. Compatibility with the npm ecosystem is a high priority.' + children: + 'Stable. Compatibility with the npm ecosystem is a high priority.', }, -} +}; export const Experimental: Story = { args: { level: 1, - children: 'Experimental. The feature is not subject to semantic versioning rules. Non-backward compatible changes or removal may occur in any future release. Use of the feature is not recommended in production environments. Experimental features are subdivided into stages:' + children: + 'Experimental. The feature is not subject to semantic versioning rules. Non-backward compatible changes or removal may occur in any future release. Use of the feature is not recommended in production environments. Experimental features are subdivided into stages:', }, -} +}; export const Deprecated: Story = { args: { level: 0, - children: 'Deprecated. The feature may emit warnings. Backward compatibility is not guaranteed.' + children: + 'Deprecated. The feature may emit warnings. Backward compatibility is not guaranteed.', }, -} +}; export default { component: StabilityIndex } as Meta; diff --git a/apps/site/components/ApiDocs/StabilityIndex/index.tsx b/apps/site/components/ApiDocs/StabilityIndex/index.tsx index 5665d4a113f8b..d53f9a634acfd 100644 --- a/apps/site/components/ApiDocs/StabilityIndex/index.tsx +++ b/apps/site/components/ApiDocs/StabilityIndex/index.tsx @@ -8,12 +8,15 @@ type StabilityIndexProps = PropsWithChildren<{ }>; const StabilityIndex: FC = ({ level, children }) => ( -
- {level}{children} -
- ); - +
+ {level} + {children} +
+); export default StabilityIndex;