@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-462194bf

package/src/navigation/NavList/__stories__/VerticalWithoutDrawer.tsx

@@ -10,9 +10,45 @@ import {
   NavMenuContentListItem,
   NavMenuTitle,
 } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksWithSubmenu.json';
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 
+const links = [
+  { "name": "home", "href": "#home", "label": "Αρχική" },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "subMenuHeading": "Εκπαιδευτικό υλικό",
+    "subMenu": [
+      {
+        "name": "elearning",
+        "href": "#elearning",
+        "label": "Εκπαιδευτική πλατφόρμα"
+      },
+      {
+        "name": "videos",
+        "href": "#videos",
+        "label": "Βίντεο"
+      },
+      {
+        "name": "presentations",
+        "href": "#presentations",
+        "label": "Παρουσιάσεις"
+      },
+      {
+        "name": "promoting",
+        "href": "#promoting",
+        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+      },
+      {
+        "name": "other-texts",
+        "href": "#other-texts",
+        "label": "Άλλα κείμενα"
+      }
+    ]
+  },
+  { "name": "news", "href": "#news", "label": "Νέα" }
+]
+
 export const VerticalWithoutDrawer = () => {
   const layout = 'vertical';
   const border = false;

package/src/navigation/NavList/index.mdx

@@ -3,10 +3,6 @@ id: nav-list
 title: NavList
 ---
 
-```bash
-import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
-```
-
 ## How to use
 
 ### Horizontal NavList
@@ -25,12 +21,20 @@ import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
   story="Vertical.tsx"
 />
 
-### NavListAuto
+### Horizontal NavList with submenu
+
+<Story
+  packageName="@digigov/ui"
+  component="navigation/NavList"
+  story="HorizontalWithoutDrawer.tsx"
+/>
+
+### Vertical NavList with submenu
 
 <Story
   packageName="@digigov/ui"
   component="navigation/NavList"
-  story="UsingNavListAuto.tsx"
+  story="VerticalWithoutDrawer.tsx"
 />
 
 ## Accessibility
@@ -41,4 +45,16 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="NavList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [ "Nav",
+    "NavList",
+    "NavListAction",
+    "NavListItemActionContainer",
+    "NavListItemButton",
+    "NavListItemLink",
+    "NavMenuContainer",
+    "NavMenuContentListBase",
+    "NavMenuContentListItem",
+    "NavMenuTitle",]} /> 

package/src/navigation/NavList/types.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
 import { NavProps } from '@digigov/ui/navigation/NavList';
 
 export type NavListLayout = 'horizontal' | 'vertical';
@@ -26,7 +25,7 @@ export interface NavListAutoProps extends NavProps {
   floating?: boolean;
   subMenu?: boolean;
   links?: NavLinkInterface[];
-  style?: BaseCSSProperties;
+  style?: React.CSSProperties;
 }
 
 export interface NavListHeaderItemType {

package/src/navigation/Pagination/__stories__/PaginationWithSmallFont.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { LabelContainer } from '@digigov/react-core';
+import { LabelContainer } from '@digigov/react-core/LabelContainer';
 import {
   SelectContainer,
   SelectOption,

package/src/navigation/Pagination/__stories__/WithResultsPerPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { LabelContainer } from '@digigov/react-core';
+import { LabelContainer } from '@digigov/react-core/LabelContainer';
 import {
   SelectContainer,
   SelectOption,

package/src/navigation/Pagination/index.mdx

@@ -3,10 +3,6 @@ id: pagination
 title: Pagination
 ---
 
-```bash
-import Pagination from '@digigov/ui/app/Pagination';
-```
-
 ## How to use
 
 <Story
@@ -41,4 +37,12 @@ import Pagination from '@digigov/ui/app/Pagination';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Pagination" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [
+  "Pagination",
+  "PaginationLabel",
+  "PaginationList",
+  "PaginationListItem",
+  ]} /> 

package/src/navigation/Tabs/index.mdx

@@ -5,10 +5,6 @@ title: Tabs
 
 # Tabs
 
-```bash
-import Tabs from '@digigov/ui/navigation/Tabs';
-```
-
 ## How to use
 
 <Story
@@ -24,4 +20,12 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Tabs](https://www
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Tabs" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["Tabs",
+  "TabsHeading",
+  "TabsList",
+  "TabsListItem",
+  "TabsPanel",]} /> 
+

package/src/registry.js

@@ -44,6 +44,7 @@ import * as _digigov_ui_app_QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 import * as _digigov_ui_app_QrCodeViewer_qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
 import * as _digigov_ui_app_QrCodeViewer_types from '@digigov/ui/app/QrCodeViewer/types';
 import * as _digigov_ui_app_QrCodeViewer_utils from '@digigov/ui/app/QrCodeViewer/utils';
+import * as _digigov_ui_app_Skeleton from '@digigov/ui/app/Skeleton';
 import * as _digigov_ui_app_ThemeOptions from '@digigov/ui/app/ThemeOptions';
 import * as _digigov_ui_content_Accordion_auto from '@digigov/ui/content/Accordion/auto';
 import * as _digigov_ui_content_Accordion_hooks from '@digigov/ui/content/Accordion/hooks';
@@ -136,7 +137,6 @@ import * as _digigov_ui_layouts_Screen from '@digigov/ui/layouts/Screen';
 import * as _digigov_ui_layouts_Section from '@digigov/ui/layouts/Section';
 import * as _digigov_ui_layouts_SectionBreak from '@digigov/ui/layouts/SectionBreak';
 import * as _digigov_ui_layouts_Stack from '@digigov/ui/layouts/Stack';
-import * as _digigov_ui_misc_KitchenSink from '@digigov/ui/misc/KitchenSink';
 import * as _digigov_ui_navigation_BackLink from '@digigov/ui/navigation/BackLink';
 import * as _digigov_ui_navigation_BackToTopLink from '@digigov/ui/navigation/BackToTopLink';
 import * as _digigov_ui_navigation_Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
@@ -169,6 +169,7 @@ import * as _digigov_ui_typography_Hint from '@digigov/ui/typography/Hint';
 import * as _digigov_ui_typography from '@digigov/ui/typography';
 import * as _digigov_ui_typography_NormalText from '@digigov/ui/typography/NormalText';
 import * as _digigov_ui_typography_Paragraph from '@digigov/ui/typography/Paragraph';
+import * as _digigov_ui_typography_Typography from '@digigov/ui/typography/Typography';
 import * as _digigov_ui_utils_Base from '@digigov/ui/utils/Base';
 import * as _digigov_ui_utils_hooks_useDebounce from '@digigov/ui/utils/hooks/useDebounce';
 import * as _digigov_ui_utils_hooks_useKeypress from '@digigov/ui/utils/hooks/useKeypress';
@@ -177,11 +178,6 @@ import * as _digigov_ui_utils_hooks_useScreen from '@digigov/ui/utils/hooks/useS
 import * as _digigov_ui_utils_hooks_useSearch from '@digigov/ui/utils/hooks/useSearch';
 import * as _digigov_ui_utils_hooks_useTogglableTab from '@digigov/ui/utils/hooks/useTogglableTab';
 import * as _digigov_ui_utils from '@digigov/ui/utils';
-import * as _digigov_ui_utils_Kitchensink_AllComponents from '@digigov/ui/utils/Kitchensink/AllComponents';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkByCategory from '@digigov/ui/utils/Kitchensink/KitchensinkByCategory';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkByLetter from '@digigov/ui/utils/Kitchensink/KitchensinkByLetter';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkComponent from '@digigov/ui/utils/Kitchensink/KitchensinkComponent';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkDashboard from '@digigov/ui/utils/Kitchensink/KitchensinkDashboard';
 import * as _digigov_ui_utils_SvgIcon from '@digigov/ui/utils/SvgIcon';
 import * as _digigov_ui_utils_Typography from '@digigov/ui/utils/Typography';
 import * as _digigov_ui_utils_VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
@@ -251,6 +247,7 @@ export default {
   '@digigov/ui/app/QrCodeViewer/qrcodegen': lazyImport(_digigov_ui_app_QrCodeViewer_qrcodegen),
   '@digigov/ui/app/QrCodeViewer/types': lazyImport(_digigov_ui_app_QrCodeViewer_types),
   '@digigov/ui/app/QrCodeViewer/utils': lazyImport(_digigov_ui_app_QrCodeViewer_utils),
+  '@digigov/ui/app/Skeleton': lazyImport(_digigov_ui_app_Skeleton),
   '@digigov/ui/app/ThemeOptions': lazyImport(_digigov_ui_app_ThemeOptions),
   '@digigov/ui/content/Accordion/auto': lazyImport(_digigov_ui_content_Accordion_auto),
   '@digigov/ui/content/Accordion/hooks': lazyImport(_digigov_ui_content_Accordion_hooks),
@@ -343,7 +340,6 @@ export default {
   '@digigov/ui/layouts/Section': lazyImport(_digigov_ui_layouts_Section),
   '@digigov/ui/layouts/SectionBreak': lazyImport(_digigov_ui_layouts_SectionBreak),
   '@digigov/ui/layouts/Stack': lazyImport(_digigov_ui_layouts_Stack),
-  '@digigov/ui/misc/KitchenSink': lazyImport(_digigov_ui_misc_KitchenSink),
   '@digigov/ui/navigation/BackLink': lazyImport(_digigov_ui_navigation_BackLink),
   '@digigov/ui/navigation/BackToTopLink': lazyImport(_digigov_ui_navigation_BackToTopLink),
   '@digigov/ui/navigation/Breadcrumbs': lazyImport(_digigov_ui_navigation_Breadcrumbs),
@@ -376,6 +372,7 @@ export default {
   '@digigov/ui/typography': lazyImport(_digigov_ui_typography),
   '@digigov/ui/typography/NormalText': lazyImport(_digigov_ui_typography_NormalText),
   '@digigov/ui/typography/Paragraph': lazyImport(_digigov_ui_typography_Paragraph),
+  '@digigov/ui/typography/Typography': lazyImport(_digigov_ui_typography_Typography),
   '@digigov/ui/utils/Base': lazyImport(_digigov_ui_utils_Base),
   '@digigov/ui/utils/hooks/useDebounce': lazyImport(_digigov_ui_utils_hooks_useDebounce),
   '@digigov/ui/utils/hooks/useKeypress': lazyImport(_digigov_ui_utils_hooks_useKeypress),
@@ -384,11 +381,6 @@ export default {
   '@digigov/ui/utils/hooks/useSearch': lazyImport(_digigov_ui_utils_hooks_useSearch),
   '@digigov/ui/utils/hooks/useTogglableTab': lazyImport(_digigov_ui_utils_hooks_useTogglableTab),
   '@digigov/ui/utils': lazyImport(_digigov_ui_utils),
-  '@digigov/ui/utils/Kitchensink/AllComponents': lazyImport(_digigov_ui_utils_Kitchensink_AllComponents),
-  '@digigov/ui/utils/Kitchensink/KitchensinkByCategory': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkByCategory),
-  '@digigov/ui/utils/Kitchensink/KitchensinkByLetter': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkByLetter),
-  '@digigov/ui/utils/Kitchensink/KitchensinkComponent': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkComponent),
-  '@digigov/ui/utils/Kitchensink/KitchensinkDashboard': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkDashboard),
   '@digigov/ui/utils/SvgIcon': lazyImport(_digigov_ui_utils_SvgIcon),
   '@digigov/ui/utils/Typography': lazyImport(_digigov_ui_utils_Typography),
   '@digigov/ui/utils/VisuallyHidden': lazyImport(_digigov_ui_utils_VisuallyHidden),
@@ -405,6 +397,7 @@ import * as _digigov_ui_app_Panel_Panel_stories from '@digigov/ui/app/Panel/Pane
 import * as _digigov_ui_app_PhaseBannerHeader_PhaseBannerHeader_stories from '@digigov/ui/app/PhaseBannerHeader/PhaseBannerHeader.stories';
 import * as _digigov_ui_app_QrCodeScanner_QrCodeScanner_stories from '@digigov/ui/app/QrCodeScanner/QrCodeScanner.stories';
 import * as _digigov_ui_app_QrCodeViewer_QRCode_stories from '@digigov/ui/app/QrCodeViewer/QRCode.stories';
+import * as _digigov_ui_app_Skeleton_Skeleton_stories from '@digigov/ui/app/Skeleton/Skeleton.stories';
 import * as _digigov_ui_content_Accordion_Accordion_stories from '@digigov/ui/content/Accordion/Accordion.stories';
 import * as _digigov_ui_content_Blockquote_Blockquote_stories from '@digigov/ui/content/Blockquote/Blockquote.stories';
 import * as _digigov_ui_content_Card_Card_stories from '@digigov/ui/content/Card/Card.stories';
@@ -465,6 +458,7 @@ import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digig
   '@digigov/ui/app/PhaseBannerHeader/PhaseBannerHeader.stories': _digigov_ui_app_PhaseBannerHeader_PhaseBannerHeader_stories,
   '@digigov/ui/app/QrCodeScanner/QrCodeScanner.stories': _digigov_ui_app_QrCodeScanner_QrCodeScanner_stories,
   '@digigov/ui/app/QrCodeViewer/QRCode.stories': _digigov_ui_app_QrCodeViewer_QRCode_stories,
+  '@digigov/ui/app/Skeleton/Skeleton.stories': _digigov_ui_app_Skeleton_Skeleton_stories,
   '@digigov/ui/content/Accordion/Accordion.stories': _digigov_ui_content_Accordion_Accordion_stories,
   '@digigov/ui/content/Blockquote/Blockquote.stories': _digigov_ui_content_Blockquote_Blockquote_stories,
   '@digigov/ui/content/Card/Card.stories': _digigov_ui_content_Card_Card_stories,

package/src/typography/Heading/index.mdx

@@ -3,10 +3,6 @@ id: heading
 title: Heading
 ---
 
-```bash
-import Heading from '@digigov/ui/typography/Heading';
-```
-
 ## How to use
 
 <Story
@@ -17,4 +13,6 @@ import Heading from '@digigov/ui/typography/Heading';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Heading" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Heading"]} /> 

package/src/typography/HeadingCaption/index.mdx

@@ -3,10 +3,6 @@ id: heading-caption
 title: HeadingCaption
 ---
 
-```bash
-import HeadingCaption from '@digigov/ui/typography/HeadingCaption';
-```
-
 ## How to use
 
 <Story
@@ -19,4 +15,6 @@ import HeadingCaption from '@digigov/ui/typography/HeadingCaption';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="HeadingCaption" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["HeadingCaption"]} /> 

package/src/typography/Hint/index.mdx

@@ -3,10 +3,6 @@ id: hint
 title: Hint
 ---
 
-```bash
-import Hint from '@digigov/ui/typography/Hint';
-```
-
 ## How to use
 
 <Story
@@ -25,4 +21,6 @@ import Hint from '@digigov/ui/typography/Hint';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Hint" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Hint"]} /> 

package/src/typography/NormalText/index.mdx

@@ -3,10 +3,6 @@ id: normal-text
 title: NormalText
 ---
 
-```bash
-import NormalText from '@digigov/ui/typography/NormalText';
-```
-
 ## How to use
 
 <Story
@@ -43,4 +39,6 @@ import NormalText from '@digigov/ui/typography/NormalText';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="NormalText" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["NormalText"]} /> 

package/src/typography/Paragraph/index.mdx

@@ -3,51 +3,30 @@ id: paragraph
 title: Paragraph
 ---
 
-```bash
-import Paragraph from '@digigov/ui/typography/Paragraph';
-```
-
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="Default.tsx" />
 
 ### Lead paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="LeadVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="LeadVariant.tsx" />
 
 ### Small paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="SmallVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="SmallVariant.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontSizes.tsx" />
 
 ### Font weight
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="FontWeight.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontWeight.tsx" />
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Paragraph" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Paragraph"]} /> 

package/src/typography/Typography/index.mdx

@@ -0,0 +1,12 @@
+---
+id: typography
+title: Typography
+---
+
+Typography compoment is a HOC (Higher-Order Component) for typography components such as `NormalText` compoment.
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Typography"]} /> 

package/src/typography/Typography/index.tsx

@@ -0,0 +1,4 @@
+import Typography from '@digigov/react-core/Typography';
+
+export * from '@digigov/react-core/Typography';
+export default Typography;

package/src/typography/index.ts

@@ -3,3 +3,4 @@ export * from '@digigov/ui/typography/HeadingCaption';
 export * from '@digigov/ui/typography/Paragraph';
 export * from '@digigov/ui/typography/NormalText';
 export * from '@digigov/ui/typography/Hint';
+export * from '@digigov/ui/typography/Typography';

package/src/utils/Base/index.mdx

@@ -0,0 +1,13 @@
+---
+id: base
+title: Base
+---
+
+Base component is the `parent` component from which all `digigov` components inherit 
+
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Base"]} /> 

package/src/utils/VisuallyHidden/index.mdx

@@ -8,12 +8,17 @@ them access information and context.
 
 VisuallyHidden is a web accessibility technique used to hide content from the visual client, but keep it readable for screen readers.
 
-```bash
-import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
-```
-
 ## How to use
 
+<Story
+  packageName="@digigov/ui"
+  component="utils/VisuallyHidden"
+  story="Default.tsx"
+/>
+
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="VisuallyHidden" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["VisuallyHidden"]} /> 

package/typography/Heading/index.mdx

@@ -3,10 +3,6 @@ id: heading
 title: Heading
 ---
 
-```bash
-import Heading from '@digigov/ui/typography/Heading';
-```
-
 ## How to use
 
 <Story
@@ -17,4 +13,6 @@ import Heading from '@digigov/ui/typography/Heading';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Heading" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Heading"]} /> 

package/typography/HeadingCaption/index.mdx

@@ -3,10 +3,6 @@ id: heading-caption
 title: HeadingCaption
 ---
 
-```bash
-import HeadingCaption from '@digigov/ui/typography/HeadingCaption';
-```
-
 ## How to use
 
 <Story
@@ -19,4 +15,6 @@ import HeadingCaption from '@digigov/ui/typography/HeadingCaption';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="HeadingCaption" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["HeadingCaption"]} /> 

package/typography/Hint/index.mdx

@@ -3,10 +3,6 @@ id: hint
 title: Hint
 ---
 
-```bash
-import Hint from '@digigov/ui/typography/Hint';
-```
-
 ## How to use
 
 <Story
@@ -25,4 +21,6 @@ import Hint from '@digigov/ui/typography/Hint';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Hint" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Hint"]} /> 

package/typography/NormalText/index.mdx

@@ -3,10 +3,6 @@ id: normal-text
 title: NormalText
 ---
 
-```bash
-import NormalText from '@digigov/ui/typography/NormalText';
-```
-
 ## How to use
 
 <Story
@@ -43,4 +39,6 @@ import NormalText from '@digigov/ui/typography/NormalText';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="NormalText" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["NormalText"]} /> 

package/typography/Paragraph/index.mdx

@@ -3,51 +3,30 @@ id: paragraph
 title: Paragraph
 ---
 
-```bash
-import Paragraph from '@digigov/ui/typography/Paragraph';
-```
-
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="Default.tsx" />
 
 ### Lead paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="LeadVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="LeadVariant.tsx" />
 
 ### Small paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="SmallVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="SmallVariant.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontSizes.tsx" />
 
 ### Font weight
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="FontWeight.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontWeight.tsx" />
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Paragraph" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Paragraph"]} /> 

package/typography/Typography/index.d.ts

@@ -0,0 +1,3 @@
+import Typography from '@digigov/react-core/Typography';
+export * from '@digigov/react-core/Typography';
+export default Typography;

package/typography/Typography/index.js

@@ -0,0 +1,3 @@
+import Typography from '@digigov/react-core/Typography';
+export * from '@digigov/react-core/Typography';
+export default Typography;

package/typography/Typography/index.mdx

@@ -0,0 +1,12 @@
+---
+id: typography
+title: Typography
+---
+
+Typography compoment is a HOC (Higher-Order Component) for typography components such as `NormalText` compoment.
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Typography"]} /> 

package/typography/Typography/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../cjs/typography/Typography/index.js"
+}

package/typography/index.d.ts

@@ -3,3 +3,4 @@ export * from '@digigov/ui/typography/HeadingCaption';
 export * from '@digigov/ui/typography/Paragraph';
 export * from '@digigov/ui/typography/NormalText';
 export * from '@digigov/ui/typography/Hint';
+export * from '@digigov/ui/typography/Typography';