aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/layout
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/layout')
-rw-r--r--src/components/molecules/layout/branding.stories.tsx9
-rw-r--r--src/components/molecules/layout/code.stories.tsx8
-rw-r--r--src/components/molecules/layout/code.tsx36
-rw-r--r--src/components/molecules/layout/meta.stories.tsx34
-rw-r--r--src/components/molecules/layout/widget.stories.tsx50
5 files changed, 50 insertions, 87 deletions
diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx
index 1637c99..d2e0694 100644
--- a/src/components/molecules/layout/branding.stories.tsx
+++ b/src/components/molecules/layout/branding.stories.tsx
@@ -1,5 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
import Branding from './branding';
/**
@@ -10,6 +9,7 @@ export default {
component: Branding,
args: {
isHome: false,
+ withLink: false,
},
argTypes: {
baseline: {
@@ -72,13 +72,6 @@ export default {
},
},
},
- decorators: [
- (Story) => (
- <IntlProvider locale="en">
- <Story />
- </IntlProvider>
- ),
- ],
} as ComponentMeta<typeof Branding>;
const Template: ComponentStory<typeof Branding> = (args) => (
diff --git a/src/components/molecules/layout/code.stories.tsx b/src/components/molecules/layout/code.stories.tsx
index a2a6b2c..ac0e98f 100644
--- a/src/components/molecules/layout/code.stories.tsx
+++ b/src/components/molecules/layout/code.stories.tsx
@@ -1,5 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
import CodeComponent from './code';
/**
@@ -70,13 +69,6 @@ export default {
},
},
},
- decorators: [
- (Story) => (
- <IntlProvider locale="en">
- <Story />
- </IntlProvider>
- ),
- ],
} as ComponentMeta<typeof CodeComponent>;
const Template: ComponentStory<typeof CodeComponent> = (args) => (
diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
index f5b60b9..30351b9 100644
--- a/src/components/molecules/layout/code.tsx
+++ b/src/components/molecules/layout/code.tsx
@@ -1,38 +1,10 @@
-import usePrism, { OptionalPrismPlugin } from '@utils/hooks/use-prism';
+import usePrism, {
+ type OptionalPrismPlugin,
+ type PrismLanguage,
+} from '@utils/hooks/use-prism';
import { FC, useRef } from 'react';
import styles from './code.module.scss';
-export type PrismLanguage =
- | 'apacheconf'
- | 'bash'
- | 'css'
- | 'diff'
- | 'docker'
- | 'editorconfig'
- | 'ejs'
- | 'git'
- | 'graphql'
- | 'html'
- | 'ignore'
- | 'ini'
- | 'javascript'
- | 'jsdoc'
- | 'json'
- | 'jsx'
- | 'makefile'
- | 'markup'
- | 'php'
- | 'phpdoc'
- | 'regex'
- | 'scss'
- | 'shell-session'
- | 'smarty'
- | 'tcl'
- | 'toml'
- | 'tsx'
- | 'twig'
- | 'yaml';
-
export type CodeProps = {
/**
* The code to highlight.
diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx
index a1755a0..c33680f 100644
--- a/src/components/molecules/layout/meta.stories.tsx
+++ b/src/components/molecules/layout/meta.stories.tsx
@@ -1,3 +1,5 @@
+import descriptionListItemStories from '@components/atoms/lists/description-list-item.stories';
+import descriptionListStories from '@components/atoms/lists/description-list.stories';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import MetaComponent, { MetaData } from './meta';
@@ -7,7 +9,12 @@ import MetaComponent, { MetaData } from './meta';
export default {
title: 'Molecules/Layout',
component: MetaComponent,
+ args: {
+ itemsLayout: 'inline-values',
+ withSeparator: false,
+ },
argTypes: {
+ className: descriptionListStories.argTypes?.className,
data: {
description: 'The page metadata.',
type: {
@@ -16,34 +23,23 @@ export default {
value: {},
},
},
+ groupClassName: descriptionListStories.argTypes?.groupClassName,
itemsLayout: {
- control: {
- type: 'select',
- },
- description: 'The items layout.',
- options: ['inline', 'inline-values', 'stacked'],
+ ...descriptionListItemStories.argTypes?.layout,
table: {
- category: 'Options',
+ ...descriptionListItemStories.argTypes?.layout?.table,
defaultValue: { summary: 'inline-values' },
},
- type: {
- name: 'string',
- required: false,
- },
},
+ labelClassName: descriptionListStories.argTypes?.labelClassName,
+ layout: descriptionListStories.argTypes?.layout,
+ valueClassName: descriptionListStories.argTypes?.valueClassName,
withSeparator: {
- control: {
- type: 'boolean',
- },
- description: 'Add a slash as separator between multiple values.',
+ ...descriptionListStories.argTypes?.withSeparator,
table: {
- category: 'Options',
+ ...descriptionListStories.argTypes?.withSeparator?.table,
defaultValue: { summary: true },
},
- type: {
- name: 'boolean',
- required: true,
- },
},
},
} as ComponentMeta<typeof MetaComponent>;
diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx
index c113db9..dd5a30b 100644
--- a/src/components/molecules/layout/widget.stories.tsx
+++ b/src/components/molecules/layout/widget.stories.tsx
@@ -1,5 +1,5 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
+import headingButtonStories from '../buttons/heading-button.stories';
import Widget from './widget';
/**
@@ -10,6 +10,7 @@ export default {
component: Widget,
args: {
withBorders: false,
+ withScroll: false,
},
argTypes: {
children: {
@@ -22,6 +23,19 @@ export default {
required: true,
},
},
+ className: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set additional classnames to the widget wrapper.',
+ table: {
+ category: 'Styles',
+ },
+ type: {
+ name: 'string',
+ required: false,
+ },
+ },
expanded: {
control: {
type: 'boolean',
@@ -36,18 +50,7 @@ export default {
required: false,
},
},
- level: {
- control: {
- type: 'number',
- min: 1,
- max: 6,
- },
- description: 'The heading level.',
- type: {
- name: 'number',
- required: true,
- },
- },
+ level: headingButtonStories.argTypes?.level,
title: {
control: {
type: 'text',
@@ -72,14 +75,21 @@ export default {
required: false,
},
},
+ withScroll: {
+ control: {
+ type: 'boolean',
+ },
+ description: 'Define if the widget should be scrollable',
+ table: {
+ category: 'Options',
+ defaultValue: { summary: false },
+ },
+ type: {
+ name: 'boolean',
+ required: false,
+ },
+ },
},
- decorators: [
- (Story) => (
- <IntlProvider locale="en">
- <Story />
- </IntlProvider>
- ),
- ],
} as ComponentMeta<typeof Widget>;
const Template: ComponentStory<typeof Widget> = (args) => <Widget {...args} />;