@digigov/ui 2.0.0-b4cd6916 → 2.0.0-c6d0b3b8

package/src/content/Table/Table.stories.js

@@ -1,27 +0,0 @@
-import Table from '@digigov/ui/content/Table';
-export default {
-  title: 'Digigov UI/content/Table',
-  description:
-    'Use the table component to make information easier to compare and scan for users.',
-  link: 'https://guide.services.gov.gr/docs/components/table',
-  component: Table,
-  displayName: 'Table',
-};
-export { Default } from '@digigov/ui/content/Table/__stories__/Default';
-export { TableCaptions } from '@digigov/ui/content/Table/__stories__/TableCaptions';
-export { NoData } from '@digigov/ui/content/Table/__stories__/NoData';
-export { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';
-export { ZebraProp } from '@digigov/ui/content/Table/__stories__/ZebraProp';
-export { NumericDataType } from '@digigov/ui/content/Table/__stories__/NumericDataType';
-export { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalBorders';
-export { Stacked } from '@digigov/ui/content/Table/__stories__/Stacked';
-export { DarkVariant } from '@digigov/ui/content/Table/__stories__/DarkVariant';
-export { DarkVariantWithVerticalHeaders } from '@digigov/ui/content/Table/__stories__/DarkVariantWithVerticalHeaders';
-export { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
-export { DefinedWidth } from '@digigov/ui/content/Table/__stories__/DefinedWidth';
-export { Densed } from '@digigov/ui/content/Table/__stories__/Densed';
-export { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
-export { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';
-export { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
-export { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
-export { Full } from '@digigov/ui/content/Table/__stories__/Full';

package/src/content/Table/index.mdx

@@ -1,111 +0,0 @@
----
-id: table
-title: Table
----
-
-# Table
-
-## How to use
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="Default.tsx"
-/>
-
-### Table with dark header
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="DarkVariant.tsx"
-/>
-
-### Table captions
-
-Use the `<TableCaption>` element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="TableCaptions.tsx"
-/>
-
-### Numbers in a table
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="NumericDataType.tsx"
-/>
-
-### Zebra rows
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="ZebraProp.tsx"
-/>
-
-### Rows with primary or secondary color
-
-The prop `color='primary'` or `color='secondary'` is only functional when Table component has `variant='default'`.
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="RowColors.tsx"
-/>
-
-### Vertical lines
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="VerticalBorders.tsx"
-/>
-
-### Dense tables
-
-<Story packageName="@digigov/ui" component="content/Table" story="Densed.tsx" />
-
-### Custom column widths
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="DefinedWidth.tsx"
-/>
-
-### No data
-
-<Story packageName="@digigov/ui" component="content/Table" story="NoData.tsx" />
-
-### Using loader
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="WithLoader.tsx"
-/>
-
-## Accessibility
-
-You can read more about the accessibility patterns used in our Table
-implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={[
-  "TableContainer",
-  "Table",
-  "TableCaption",
-  "TableHead",
-  "TableRow",
-  "TableBody",
-  "TableHeadCell",
-  "TableDataCell"
-  ]
-} />

package/src/feedback/CopyToClipboard/CopyToClipboard.stories.js

@@ -1,9 +0,0 @@
-import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
-export default {
-  title: 'Digigov UI/feedback/CopyToClipboard',
-  component: CopyToClipboard,
-  displayName: 'CopyToClipboard',
-};
-export { Default } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Default';
-export { Banner } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Banner';
-export { Dense } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';

package/src/feedback/CopyToClipboard/index.mdx

@@ -1,28 +0,0 @@
----
-id: copy-to-clipboard
-title: CopyToClipboard
----
-
-## How to use
-
-### Default
-
-<Story
-  packageName="@digigov/ui"
-  component="feedback/CopyToClipboard"
-  story="Default.tsx"
-/>
-
-### Banner
-
-<Story
-  packageName="@digigov/ui"
-  component="feedback/CopyToClipboard"
-  story="Banner.tsx"
-/>
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={["CopyToClipboardContainer"]} /> 

package/src/feedback/ErrorSummary/ErrorSummary.stories.js

@@ -1,15 +0,0 @@
-import ErrorSummary from '@digigov/ui/feedback/ErrorSummary';
-export default {
-  title: 'Digigov UI/feedback/ErrorSummary',
-  description:
-    'Use this component at the top of a page to summarise any errors a user has made.',
-  link: 'https://guide.services.gov.gr/docs/components/error-summary',
-  component: ErrorSummary,
-  displayName: 'ErrorSummary',
-};
-export { Default } from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
-export { Dense } from '@digigov/ui/feedback/ErrorSummary/__stories__/Dense';
-export { LinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
-export { LinkedToField } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
-export { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
-export { WithBackLinkAndButton } from '@digigov/ui/feedback/ErrorSummary/__stories__/WithBackLinkAndButton';

package/src/feedback/PhaseBanner/PhaseBanner.stories.js

@@ -1,11 +0,0 @@
-import PhaseBanner from '@digigov/ui/feedback/PhaseBanner';
-export default {
-  title: 'Digigov UI/feedback/PhaseBanner',
-  description:
-    'Use the phase banner component to show users your service is still being worked on.',
-  link: 'https://guide.services.gov.gr/docs/components/phase-banner',
-  component: PhaseBanner,
-  displayName: 'PhaseBanner',
-};
-export { Default } from '@digigov/ui/feedback/PhaseBanner/__stories__/Default';
-export { Underlined } from '@digigov/ui/feedback/PhaseBanner/__stories__/Underlined';

package/src/form/AutoComplete/AutoComplete.stories.js

@@ -1,16 +0,0 @@
-import AutoComplete from '@digigov/ui/form/AutoComplete';
-export default {
-  title: 'Digigov UI/form/AutoComplete',
-  component: AutoComplete,
-  displayName: 'AutoComplete',
-};
-export { Default } from '@digigov/ui/form/AutoComplete/__stories__/Default';
-export { Multiple } from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
-export { MultipleWithDefaultValues } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithDefaultValues';
-export { MultipleShowingTwoSelected } from '@digigov/ui/form/AutoComplete/__stories__/MultipleShowingTwoSelected';
-export { MultipleWithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/MultipleWithMinLength';
-export { WithAutoSelect } from '@digigov/ui/form/AutoComplete/__stories__/WithAutoSelect';
-export { WithDefaultValue } from '@digigov/ui/form/AutoComplete/__stories__/WithDefaultValue';
-export { WithPlaceHolder } from '@digigov/ui/form/AutoComplete/__stories__/WithPlaceHolder';
-export { WithShowAllValues } from '@digigov/ui/form/AutoComplete/__stories__/WithShowAllValues';
-export { WithMinLength } from '@digigov/ui/form/AutoComplete/__stories__/WithMinLength';

package/src/form/AutoComplete/index.mdx

@@ -1,70 +0,0 @@
----
-id: auto-complete
-title: AutoComplete
----
-
-Autocomplete is a feature in which an input field suggests a word based on user input. This allows users to quickly search
-through, select from large collections of options and help services get more consistent data.
-
-## Usage
-
-### AutoComplete
-
-<Story packageName="@digigov/ui" component="form/AutoComplete" story="Default.tsx" />
-
-### AutoComplete with auto select
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithAutoSelect.tsx"
-/>
-
-### AutoComplete with default value
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithDefaultValue.tsx"
-/>
-
-### AutoComplete with placeholder
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithPlaceHolder.tsx"
-/>
-
-### AutoComplete with all option's values
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithShowAllValues.tsx"
-/>
-
-### AutoComplete with min length
-
-This is the minimum number of characters that should be entered before the autocomplete will attempt to suggest options(in above example is 2)
-
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithMinLength.tsx"
-/>
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={
-  ["AutoCompleteWrapper",
-  "AutoCompleteStatus",
-  "AutoCompleteStatusWrapper",
-  "AutoCompleteInputTypeahead",
-  "AutoCompleteInput",
-  "AutoCompleteResultList",
-  "AutoCompleteResultListItem",
-  "AutoCompleteAssistiveHint"
-  ]} /> 

package/src/form/Checkbox/Checkbox.stories.js

@@ -1,19 +0,0 @@
-import Checkbox from '@digigov/ui/form/Checkbox';
-export default {
-  title: 'Digigov UI/form/Checkbox',
-  description:
-    'Let users select one or more options by using the checkboxes component.',
-  link: 'https://guide.services.gov.gr/docs/components/checkboxes',
-  component: Checkbox,
-  displayName: 'Checkbox',
-};
-export { Default } from '@digigov/ui/form/Checkbox/__stories__/Default';
-export { Inline } from '@digigov/ui/form/Checkbox/__stories__/Inline';
-export { InlineWithDivider } from '@digigov/ui/form/Checkbox/__stories__/InlineWithDivider';
-export { MultipleQuestions } from '@digigov/ui/form/Checkbox/__stories__/MultipleQuestions';
-export { WithHint } from '@digigov/ui/form/Checkbox/__stories__/WithHint';
-export { NoneAnswer } from '@digigov/ui/form/Checkbox/__stories__/NoneAnswer';
-export { NoneAnswerWithError } from '@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError';
-export { WithErrorMessage } from '@digigov/ui/form/Checkbox/__stories__/WithErrorMessage';
-export { ConditionalReveal } from '@digigov/ui/form/Checkbox/__stories__/ConditionalReveal';
-export { Dense } from '@digigov/ui/form/Checkbox/__stories__/Dense';

package/src/form/DateInputContainer/DateInputContainer.stories.js

@@ -1,14 +0,0 @@
-import DateInputContainer from '@digigov/ui/form/DateInputContainer';
-export default {
-  title: 'Digigov UI/form/DateInputContainer',
-  description:
-    'Use the date input component to help users enter a memorable date or one they can easily look up.',
-  link: 'https://guide.services.gov.gr/docs/components/date-input',
-  component: DateInputContainer,
-  displayName: 'DateInputContainer',
-};
-export { Default } from '@digigov/ui/form/DateInputContainer/__stories__/Default';
-export { MultipleQuestions } from '@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions';
-export { WithErrorMessage } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage';
-export { WithErrorMessageForSingleField } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
-export { Dense } from '@digigov/ui/form/DateInputContainer/__stories__/Dense';

package/src/form/ErrorMessage/ErrorMessage.stories.js

@@ -1,12 +0,0 @@
-import ErrorMessage from '@digigov/ui/form/ErrorMessage';
-export default {
-  title: 'Digigov UI/form/ErrorMessage',
-  description:
-    'Show an error message next to the field and in the error summary when there is a validation error.',
-  link: 'https://guide.services.gov.gr/docs/components/error-message',
-  component: ErrorMessage,
-  displayName: 'ErrorMessage',
-};
-export { Default } from '@digigov/ui/form/ErrorMessage/__stories__/Default';
-export { DateInputError } from '@digigov/ui/form/ErrorMessage/__stories__/DateInputError';
-export { ErrorMessageOnly } from '@digigov/ui/form/ErrorMessage/__stories__/ErrorMessageOnly';

package/src/form/RadioContainer/RadioContainer.stories.js

@@ -1,19 +0,0 @@
-import RadioContainer from '@digigov/ui/form/RadioContainer';
-export default {
-  title: 'Digigov UI/form/RadioContainer',
-  description:
-    'Use the radios component when users can only select one option from a list.',
-  link: 'https://guide.services.gov.gr/docs/components/radio',
-  component: RadioContainer,
-  displayName: 'RadioContainer',
-};
-export { Default } from '@digigov/ui/form/RadioContainer/__stories__/Default';
-export { WithMediumLegend } from '@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend';
-export { MultipleQuestions } from '@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions';
-export { Inline } from '@digigov/ui/form/RadioContainer/__stories__/Inline';
-export { WithHints } from '@digigov/ui/form/RadioContainer/__stories__/WithHints';
-export { NoneAnswer } from '@digigov/ui/form/RadioContainer/__stories__/NoneAnswer';
-export { WithErrorMessage } from '@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage';
-export { ConditionalReveal } from '@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal';
-export { InlineWithDivider } from '@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider';
-export { Dense } from '@digigov/ui/form/RadioContainer/__stories__/Dense';

package/src/form/SelectContainer/SelectContainer.stories.js

@@ -1,13 +0,0 @@
-import SelectContainer from '@digigov/ui/form/SelectContainer';
-export default {
-  title: 'Digigov UI/form/SelectContainer',
-  description:
-    'The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.',
-  link: 'https://guide.services.gov.gr/docs/components/select',
-  component: SelectContainer,
-  displayName: 'SelectContainer',
-};
-export { Default } from '@digigov/ui/form/SelectContainer/__stories__/Default';
-export { DisabledInput } from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';
-export { WithHint } from '@digigov/ui/form/SelectContainer/__stories__/WithHint';
-export { Dense } from '@digigov/ui/form/SelectContainer/__stories__/Dense';

package/src/form/SingleCharacterInputs/SingleCharacterInput.stories.js

@@ -1,13 +0,0 @@
-import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
-export default {
-  title: 'Digigov UI/form/SingleCharacterInputs',
-  description:
-    'Use the One-time password input component to help users enter a memorable digital character for One-time password.',
-  link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',
-  component: SingleCharacterInputs,
-  displayName: 'SingleCharacterInputs',
-};
-export { Default } from '@digigov/ui/form/SingleCharacterInputs/__stories__/Default';
-export { WithDefaultError } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError';
-export { WithErrorMessageInvalidCode } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode';
-export { WithErrorMessageLessDigit } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit';

package/src/form/TextArea/TextArea.stories.js

@@ -1,17 +0,0 @@
-import TextArea from '@digigov/ui/form/TextArea';
-export default {
-  title: 'Digigov UI/form/TextArea',
-  description:
-    'Use the textarea component when you need to let users enter an amount of text that’s longer than a single line.',
-  link: 'https://guide.services.gov.gr/docs/components/textarea',
-  component: TextArea,
-  displayName: 'TextArea',
-};
-export { Default } from '@digigov/ui/form/TextArea/__stories__/Default';
-export { WithHint } from '@digigov/ui/form/TextArea/__stories__/WithHint';
-export { WithDeclaredRows } from '@digigov/ui/form/TextArea/__stories__/WithDeclaredRows';
-export { MultipleQuestions } from '@digigov/ui/form/TextArea/__stories__/MultipleQuestions';
-export { LimitedCharacters } from '@digigov/ui/form/TextArea/__stories__/LimitedCharacters';
-export { WithErrorMessage } from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
-export { DisabledInput } from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
-export { Dense } from '@digigov/ui/form/TextArea/__stories__/Dense';

package/src/form/TextArea/index.mdx

@@ -1,74 +0,0 @@
----
-id: text-area
-title: TextArea
----
-
-# TextArea
-
-## How to use
-
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="Default.tsx"
-/>
-
-### Use appropriately-sized textareas
-
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithDeclaredRows.tsx"
-/>
-
-### If you’re asking more than one question on the page
-
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="MultipleQuestions.tsx"
-/>
-
-### Limiting the number of characters
-
-If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
-
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="LimitedCharacters.tsx"
-/>
-
-### Hint text
-
-Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
-
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithHint.tsx"
-/>
-
-### Error message
-
-Error messages should be styled like this:
-
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithErrorMessage.tsx"
-/>
-
-### Disabled input
-
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="DisabledInput.tsx"
-/>
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={["TextArea"]} /> 

package/src/form/TextInput/TextInput.stories.js

@@ -1,19 +0,0 @@
-import TextInput from '@digigov/ui/form/TextInput';
-export default {
-  title: 'Digigov UI/form/TextInput',
-  description:
-    'Use the text input component when you need to let users enter text that’s no longer than a single line.',
-  link: 'https://guide.services.gov.gr/docs/components/TextInput',
-  component: TextInput,
-  displayName: 'TextInput',
-};
-export { Default } from '@digigov/ui/form/TextInput/__stories__/Default';
-export { MultipleQuestions } from '@digigov/ui/form/TextInput/__stories__/MultipleQuestions';
-export { FixedWidths } from '@digigov/ui/form/TextInput/__stories__/FixedWidths';
-export { FluidWidths } from '@digigov/ui/form/TextInput/__stories__/FluidWidths';
-export { WithHint } from '@digigov/ui/form/TextInput/__stories__/WithHint';
-export { AskingForNumbers } from '@digigov/ui/form/TextInput/__stories__/AskingForNumbers';
-export { WithErrorMessage } from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
-export { DisabledInput } from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
-export { DisabledInputWithValue } from '@digigov/ui/form/TextInput/__stories__/DisabledInputWithValue';
-export { Dense } from '@digigov/ui/form/TextInput/__stories__/Dense';

package/src/govgr/Footer/index.mdx

@@ -1,101 +0,0 @@
----
-title: Footer
-parent: docs/ui/components
----
-
-## Default Footer
-
-#
-
-```jsx
-import Bottom from '@digigov/ui/layouts/Basic';
-import GovGRFooter from '@digigov/ui/govgr/Footer';
-```
-
-### Example
-
-```jsx live
-<Bottom>
-  <GovGRFooter />
-</Bottom>
-```
-
-## Customizable Footer
-
-#
-
-```jsx
-import Copyright from '@digigov/ui/govgr/Footer/Copyright';
-import LicenseCCSA from '@digigov/ui/govgr/Footer/LicenseCCSA';
-```
-
-### Example
-
-```jsx live
-<Bottom>
-  <GovGRFooter>
-    <div>Custom info 1</div>
-    <Copyright />
-    <div>Custom info 2</div>
-    <LicenseCCSA />
-    <div>Custom info 3</div>
-  </GovGRFooter>
-</Bottom>
-```
-
-## Using custom grid
-
-#
-
-```jsx
-import Grid from '@digigov/ui/layouts/Grid';
-import Copyright from '@digigov/ui/govgr/Footer/Copyright';
-import LicenseCCSA from '@digigov/ui/govgr/Footer/LicenseCCSA';
-import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-```
-
-### Example using custom Grid with composable components
-
-```jsx
-<Bottom>
-  <GovGRFooter>
-    <Grid item xs={12} sm={8}>
-      <Copyright />
-      <LicenseCCSA />
-    </Grid>
-    <Grid item xs={12} sm={4}>
-      <HellenicRepublicLogo />
-    </Grid>
-  </GovGRFooter>
-</Bottom>
-```
-
-## Asking users for feedback
-
-#
-
-```jsx
-import { Feedback } from '@digigov/ui/govgr/Footer';
-```
-
-### Example for user feedback
-
-```jsx live
-<Bottom>
-  <Feedback />
-  <GovGRFooter />
-</Bottom>
-```
-
-### Example for reporting bugs
-
-```jsx live
-<Bottom>
-  <Feedback reportBugs />
-  <GovGRFooter />
-</Bottom>
-```
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.

package/src/layouts/Basic/Masthead/index.tsx

@@ -1,5 +0,0 @@
-export * from '@digigov/react-core/Masthead';
-export * from '@digigov/react-core/MastheadBody';
-export * from '@digigov/react-core/MastheadLogo';
-import Masthead from '@digigov/react-core/Masthead';
-export default Masthead;

package/src/layouts/Basic/Top/index.mdx

@@ -1,23 +0,0 @@
----
-id: top
-title: Top
-parent: docs/ui/components
----
-
-# Top
-
-The Top component is used to group the Header components.
-
-## How to use
-
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic/Top"
-  story="Default.tsx"
-/>
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={["Top"]} />