imlement changes from review

- moved docs into the forms folder - created and applied the badge DEPRECATED - added Headings for Examples - changed Component Import
swisspost · Feb 1, 2024 · ef5f7f7 · ef5f7f7
1 parent dde0871
commit ef5f7f7
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 8 deletions.
diff --git a/packages/documentation/.storybook/constants.ts b/packages/documentation/.storybook/constants.ts
@@ -5,4 +5,5 @@ export const BADGE = {
   TODO: 'to-do',
   SINCE_V1: 'Since v1',
   WEB_COMPONENT_CANDIDATE: 'Web Component Candidate',
+  DEPRECATED: 'Deprecated',
 };
diff --git a/packages/documentation/.storybook/helpers/bages-config.ts b/packages/documentation/.storybook/helpers/bages-config.ts
@@ -68,4 +68,15 @@ export const badgesConfig: BadgesConfig = {
       desc: 'This component may be replaced by a web component in the future.',
     },
   },
+  [BADGE.DEPRECATED]: {
+    styles: {
+      backgroundColor: 'var(--post-warning)',
+      color: '#000',
+      borderColor: 'transparent',
+    },
+    title: 'Deprecated',
+    tooltip: {
+      desc: 'The contents of this page are deprecated and will be removed in the future',
+    },
+  },
 };
diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
@@ -44,7 +44,6 @@ const preview: Preview = {
             'Card',
             'Carousel',
             'Collapsible',
-            'Custom-Select',
             'Datepicker',
             'Dropdown',
             'Forms',

diff --git a/...om-select/custom-select-basic.sample.html → ...om-select/custom-select-basic.sample.html b/...om-select/custom-select-basic.sample.html → ...om-select/custom-select-basic.sample.html
diff --git a/...stom-select/custom-select-basic.sample.ts → ...stom-select/custom-select-basic.sample.ts b/...stom-select/custom-select-basic.sample.ts → ...stom-select/custom-select-basic.sample.ts
diff --git a/...select/custom-select-floating.sample.html → ...select/custom-select-floating.sample.html b/...select/custom-select-floating.sample.html → ...select/custom-select-floating.sample.html
diff --git a/...m-select/custom-select-floating.sample.ts → ...m-select/custom-select-floating.sample.ts b/...m-select/custom-select-floating.sample.ts → ...m-select/custom-select-floating.sample.ts
diff --git a/...ents/custom-select/custom-select.docs.mdx → ...orms/custom-select/custom-select.docs.mdx b/...ents/custom-select/custom-select.docs.mdx → ...orms/custom-select/custom-select.docs.mdx
@@ -1,6 +1,7 @@
 import { Meta, Source } from '@storybook/blocks';
 import * as CustomSelectStories from './custom-select.stories.ts';
-import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import StylesPackageImport from '../../../../shared/styles-package-import.mdx';
+import NgbComponentImport from '../../../../shared/nb-bootstrap/ngb-component-import.mdx';
 import { PostAlert, PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react';
 import SampleBasicHTML from './custom-select-basic.sample.html?raw';
 import SampleBasicTS from './custom-select-basic.sample.ts?raw';
@@ -41,9 +42,7 @@ import SampleFloatingTS from './custom-select-floating.sample.ts?raw';
   </li>
 </ul>
 
-## Component Import
-
-This component uses the [Dropdown](/?path=/docs/components-dropdown--docs) component that we also documented. There is no additional NgBootstrap import required.
+<NgbComponentImport component="dropdown"/>
 
 <StylesPackageImport components={["forms", "form-select"]}
                      required={{ 'floating-label': true }} />
@@ -53,12 +52,16 @@ This component uses the [Dropdown](/?path=/docs/components-dropdown--docs) compo
 <PostTabs>
   <PostTabHeader slot="tabs" panel="sampleBasic">Basic example</PostTabHeader>
   <PostTabPanel name="sampleBasic">
+    ### HTML
     <Source code={SampleBasicHTML} language="html" />
+    ### Typescript
     <Source code={SampleBasicTS} language="typescript"/>
   </PostTabPanel>
   <PostTabHeader slot="tabs" panel="sampleFloating">Floating example</PostTabHeader>
   <PostTabPanel name="sampleFloating">
+    ### HTML
     <Source code={SampleFloatingHTML} language="html" />
+    ### Typescript
     <Source code={SampleFloatingTS} language="typescript"/>
   </PostTabPanel>
 </PostTabs>

diff --git a/...ts/custom-select/custom-select.stories.ts → ...ms/custom-select/custom-select.stories.ts b/...ts/custom-select/custom-select.stories.ts → ...ms/custom-select/custom-select.stories.ts
@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { BADGE } from '../../../../.storybook/constants';
+import { BADGE } from '../../../../../.storybook/constants';
 
 const meta: Meta = {
-  title: 'Components/Custom-Select',
+  title: 'Components/Forms/Custom-Select',
   parameters: {
-    badges: [BADGE.NEEDS_REVISION],
+    badges: [BADGE.DEPRECATED],
   },
 };