docs(storybook): include Kbd component in theme generator and gallery

Author: var-poro

packages/storybook/src/components/themeGenerator/themeGeneratorPreview/ThemeGeneratorPreview.tsx

@@ -16,6 +16,7 @@ import * as FileUploadStories from '../../../../stories/components/file-upload/f
 import * as FormFieldStories from '../../../../stories/components/form-field/form-field.stories';
 import * as IconStories from '../../../../stories/components/icon/icon.stories';
 import * as InputStories from '../../../../stories/components/input/input.stories';
+import * as KbdStories from '../../../../stories/components/kbd/kbd.stories';
 import * as LinkStories from '../../../../stories/components/link/link.stories';
 import * as MediumStories from '../../../../stories/components/medium/medium.stories';
 import * as MessageStories from '../../../../stories/components/message/message.stories';
@@ -63,6 +64,7 @@ const THEME_STORY_MODULES = {
   FormField: FormFieldStories,
   Icon: IconStories,
   Input: InputStories,
+  Kbd: KbdStories,
   Link: LinkStories,
   Medium: MediumStories,
   Message: MessageStories,
@@ -120,6 +122,7 @@ const THEME_PREVIEW_COMPONENTS: ThemePreviewItem[] = [
   { key: 'FormField', kind: REACT_COMPONENTS_TITLE.formField, label: 'Form Field' },
   { key: 'Icon', kind: REACT_COMPONENTS_TITLE.icon, label: 'Icon' },
   { key: 'Input', kind: REACT_COMPONENTS_TITLE.input, label: 'Input' },
+  { key: 'Kbd', kind: REACT_COMPONENTS_TITLE.kbd, label: 'Kbd' },
   { key: 'Link', kind: REACT_COMPONENTS_TITLE.link, label: 'Link' },
   { key: 'Medium', kind: REACT_COMPONENTS_TITLE.medium, label: 'Medium' },
   { key: 'Message', kind: REACT_COMPONENTS_TITLE.message, label: 'Message' },

packages/storybook/src/constants/meta.ts

@@ -49,6 +49,7 @@ enum REACT_COMPONENTS_TITLE {
   formField = `${SECTION.reactComponents}/Form Field`,
   icon = `${SECTION.reactComponents}/Icon`,
   input = `${SECTION.reactComponents}/Input`,
+  kbd = `${SECTION.reactComponents}/Kbd`,
   link = `${SECTION.reactComponents}/Link`,
   medium = `${SECTION.reactComponents}/Medium`,
   menu = `${SECTION.reactComponents}/Menu`,

packages/storybook/stories/components/gallery.mdx

@@ -15,6 +15,7 @@ import { Overview as FileUpload } from './file-upload/file-upload.stories';
 import { Overview as FormField } from './form-field/form-field.stories';
 import { Overview as Icon } from './icon/icon.stories';
 import { Overview as Input } from './input/input.stories';
+import { Overview as Kbd } from './kbd/kbd.stories';
 import { Overview as Link } from './link/link.stories';
 import { Overview as Medium } from './medium/medium.stories';
 import { Overview as Message } from './message/message.stories';
@@ -72,6 +73,7 @@ import { REACT_COMPONENTS_TITLE } from '../../src/constants/meta';
   { kind: REACT_COMPONENTS_TITLE.formField, name: 'Form Field', story: FormField },
   { kind: REACT_COMPONENTS_TITLE.icon, name: 'Icon', story: Icon },
   { kind: REACT_COMPONENTS_TITLE.input, name: 'Input', story: Input },
+  { kind: REACT_COMPONENTS_TITLE.kbd, name: 'Kbd', story: Kbd },
   { kind: REACT_COMPONENTS_TITLE.link, name: 'Link', story: Link },
   { kind: REACT_COMPONENTS_TITLE.medium, name: 'Medium', story: Medium },
   { kind: REACT_COMPONENTS_TITLE.message, name: 'Message', story: Message },

packages/storybook/stories/components/kbd/kbd.stories.tsx

@@ -49,3 +49,10 @@ export const Overview: Story = {
     </>
   ),
 };
+
+export const ThemeGenerator: Story = {
+  tags: ['!dev'],
+  render: ({}) => (
+    <Kbd>Cmd</Kbd>
+  ),
+};