diff --git a/src/disclaimer/Disclaimer.story.mdx b/src/disclaimer/Disclaimer.story.mdx new file mode 100644 index 0000000000..b006c050d1 --- /dev/null +++ b/src/disclaimer/Disclaimer.story.mdx @@ -0,0 +1,82 @@ +import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks' + +import { Button, ButtonStatus } from '../button' + +import { Disclaimer } from './index' + + + +# Disclaimer + +provide information that don’t need a bigger emphasis + +### Short Text and Info Icon + + + + + + Some short disclaimer and  + + + + + + +### Long Text + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed utrum hortandus es nobis, Luci, + inquit, an etiam tua sponte propensus es? Ego autem tibi, Piso, assentior usu hoc venire, ut + acrius aliquanto et attentius de claris viris locorum admonitu cogitemus. Sed vobis voluptatum + perceptarum recordatio vitam beatam facit, et quidem corpore perceptarum. Re mihi non aeque + satisfacit, et quidem locis pluribus. Videmusne ut pueri ne verberibus quidem a contemplandis + rebus perquirendisque deterreantur? + + + + +### Not a Caption + + + + + Some short text disclaimer, not styled as a caption + + + + +### Deprecated Help URL + + + + + Some disclaimer with help button icon. + + + + +## Specifications + +> Behavior + +Use it to provide information that don’t need a bigger emphasis, like legal disclaimers (with or +without links), footnotes or timestamps. + +> Long texts + +There’s no limitation on the number of lines. + +## Usage + +```jsx +import { Disclaimer } from '@blablacar/ui-library' + +My disclaimer text here +``` + + diff --git a/src/disclaimer/Disclaimer.tsx b/src/disclaimer/Disclaimer.tsx index ee277ef1c5..750bdc0820 100644 --- a/src/disclaimer/Disclaimer.tsx +++ b/src/disclaimer/Disclaimer.tsx @@ -1,4 +1,5 @@ import React from 'react' +import styled from 'styled-components' import { Item } from '../_internals/item' import { color } from '../_utils/branding' @@ -20,6 +21,12 @@ export interface DisclaimerProps { readonly deprecatedHelpUrl?: string } +const StyledDisclaimer = styled(Item)` + .kirk-item { + color: ${color.lightMidningGreen}; + } +` + const deprecatedHelpButtonIcon = (deprecatedHelpUrl: string): JSX.Element => ( - - - - Some short text disclaimer - - - Some short text disclaimer, not styled as a caption - - -)) - -const longDisclaimer = 'Some long disclaimer text'.repeat(10) -stories.add('Without info icon', () => ( -
- Some short text disclaimer - {longDisclaimer} -
-)) - -stories.add('With deprecated help url', () => ( -
- - Some disclaimer with help button icon. - -
-))