From 0cefe24f69a11c9a7829b31dadd150d84edbd5a5 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Mon, 23 Dec 2024 11:15:57 +0100 Subject: [PATCH] update from feedback --- apps/site/.stylelintrc.mjs | 2 +- .../ApiDocs/StabilityIndex/index.stories.tsx | 40 ---------- .../ApiDocs/StabilityIndex/index.tsx | 22 ------ .../InfoBox}/index.module.css | 39 +++++++--- .../Common/InfoBox/index.stories.tsx | 73 +++++++++++++++++++ apps/site/components/Common/InfoBox/index.tsx | 24 ++++++ 6 files changed, 125 insertions(+), 75 deletions(-) delete mode 100644 apps/site/components/ApiDocs/StabilityIndex/index.stories.tsx delete mode 100644 apps/site/components/ApiDocs/StabilityIndex/index.tsx rename apps/site/components/{ApiDocs/StabilityIndex => Common/InfoBox}/index.module.css (56%) create mode 100644 apps/site/components/Common/InfoBox/index.stories.tsx create mode 100644 apps/site/components/Common/InfoBox/index.tsx diff --git a/apps/site/.stylelintrc.mjs b/apps/site/.stylelintrc.mjs index 62bc641415467..3fea6d8b268c8 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-z0-9]+(?:[A-Z][a-z0-9]*)*)$/, + /^(?:[a-z]+(?:[A-Z][a-z]*)*)$/, { message: s => `Expected '${s}' to be in camelCase` }, ]; diff --git a/apps/site/components/ApiDocs/StabilityIndex/index.stories.tsx b/apps/site/components/ApiDocs/StabilityIndex/index.stories.tsx deleted file mode 100644 index 0cdbd8c5c75a4..0000000000000 --- a/apps/site/components/ApiDocs/StabilityIndex/index.stories.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import type { Meta as MetaObj, StoryObj } from '@storybook/react'; - -import StabilityIndex from '@/components/ApiDocs/StabilityIndex'; - -type Story = StoryObj; -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.', - }, -}; - -export const Stable: Story = { - args: { - level: 2, - 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:', - }, -}; - -export const Deprecated: Story = { - args: { - level: 0, - 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 deleted file mode 100644 index d53f9a634acfd..0000000000000 --- a/apps/site/components/ApiDocs/StabilityIndex/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import classNames from 'classnames'; -import type { FC, PropsWithChildren } from 'react'; - -import styles from './index.module.css'; - -type StabilityIndexProps = PropsWithChildren<{ - level: number; -}>; - -const StabilityIndex: FC = ({ level, children }) => ( -
- {level} - {children} -
-); - -export default StabilityIndex; diff --git a/apps/site/components/ApiDocs/StabilityIndex/index.module.css b/apps/site/components/Common/InfoBox/index.module.css similarity index 56% rename from apps/site/components/ApiDocs/StabilityIndex/index.module.css rename to apps/site/components/Common/InfoBox/index.module.css index bb351798043a7..706e62e36c439 100644 --- a/apps/site/components/ApiDocs/StabilityIndex/index.module.css +++ b/apps/site/components/Common/InfoBox/index.module.css @@ -1,4 +1,4 @@ -.stabilityIndex { +.infoBox { @apply flex flex-row items-center @@ -6,42 +6,57 @@ rounded px-4 py-3 + text-sm text-white; - .indexLevel { + &.small { + @apply gap-1 + py-2 + text-xs; + + .title { + @apply px-1; + } + } + + .title { @apply rounded-sm - px-1.5 - text-sm; + px-1.5; + } + + svg { + @apply inline + size-5; } - &.stabilityLevel3 { + &.info { @apply bg-info-600; - .indexLevel { + .title { @apply bg-info-700; } } - &.stabilityLevel2 { + &.success { @apply bg-green-600; - .indexLevel { + .title { @apply bg-green-700; } } - &.stabilityLevel1 { + &.warning { @apply bg-warning-600; - .indexLevel { + .title { @apply bg-warning-700; } } - &.stabilityLevel0 { + &.error { @apply bg-danger-600; - .indexLevel { + .title { @apply bg-danger-700; } } diff --git a/apps/site/components/Common/InfoBox/index.stories.tsx b/apps/site/components/Common/InfoBox/index.stories.tsx new file mode 100644 index 0000000000000..f1d233a5406dc --- /dev/null +++ b/apps/site/components/Common/InfoBox/index.stories.tsx @@ -0,0 +1,73 @@ +import { ExclamationCircleIcon } from '@heroicons/react/24/solid'; +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; + +import InfoBox from '@/components/Common/InfoBox'; + +type Story = StoryObj; +type Meta = MetaObj; + +export const Info: Story = { + args: { + level: 'info', + title: '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.', + size: 'default', + }, +}; + +export const Success: Story = { + args: { + level: 'success', + title: '2', + children: + 'Stable. Compatibility with the npm ecosystem is a high priority.', + size: 'default', + }, +}; + +export const Warning: Story = { + args: { + level: 'warning', + title: '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:', + size: 'default', + }, +}; + +export const Error: Story = { + args: { + level: 'error', + title: '0', + children: + 'Deprecated. The feature may emit warnings. Backward compatibility is not guaranteed.', + size: 'default', + }, +}; + +export const WithIcon: Story = { + args: { + level: 'info', + title: '3', + children: ( +

+ Lorem ipsum dolor sit amet consectetur + adipisicing elit. Inventore, quasi doloremque. Totam, earum velit, sunt + voluptates fugiat beatae praesentium quis magni explicabo repudiandae + nam aut molestias ex ad sequi eum! +

+ ), + size: 'default', + }, +}; + +export default { + component: InfoBox, + argTypes: { + size: { + options: ['default', 'small'], + control: { type: 'radio' }, + }, + }, +} as Meta; diff --git a/apps/site/components/Common/InfoBox/index.tsx b/apps/site/components/Common/InfoBox/index.tsx new file mode 100644 index 0000000000000..ee4fe3f11aef6 --- /dev/null +++ b/apps/site/components/Common/InfoBox/index.tsx @@ -0,0 +1,24 @@ +import classNames from 'classnames'; +import type { FC, PropsWithChildren } from 'react'; + +import styles from './index.module.css'; + +type InfoBoxProps = PropsWithChildren<{ + level: 'info' | 'success' | 'warning' | 'error'; + title: string; + size?: 'default' | 'small'; +}>; + +const InfoBox: FC = ({ + level, + title, + children, + size = 'default', +}) => ( +
+ {title} + {children} +
+); + +export default InfoBox;