{"size": 3303, "ext": "js", "max_stars_repo_path": "packages/storybook/stories/nds-callout.stories.js", "max_stars_repo_name": "sarah-lee-ux/nice-design-system", "max_stars_repo_stars_event_min_datetime": "2018-01-23T13:34:03.000Z", "max_stars_repo_stars_event_max_datetime": "2019-10-04T09:46:45.000Z", "max_issues_repo_path": "packages/storybook/stories/nds-callout.stories.js", "max_issues_repo_name": "nhsevidence/NICE.Bootstrap2", "max_issues_repo_issues_event_min_datetime": "2019-11-05T11:52:13.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-16T09:32:27.000Z", "max_forks_repo_path": "packages/storybook/stories/nds-callout.stories.js", "max_forks_repo_name": "nhsevidence/NICE.Bootstrap2", "max_forks_repo_forks_event_min_datetime": "2021-04-06T17:01:38.000Z", "max_forks_repo_forks_event_max_datetime": "2021-05-19T08:19:01.000Z"}
{"max_stars_count": 5, "max_issues_count": 71, "max_forks_count": 5, "avg_line_length": 29.7567567568, "max_line_length": 505, "alphanum_fraction": 0.6067211626}
import React from "react";

import { storiesOf } from "@storybook/react";
import { withKnobs, text } from "@storybook/addon-knobs";
import { Grid, GridItem } from "@nice-digital/nds-grid";
import { Callout, CalloutBody, CalloutImage } from "@nice-digital/nds-callout";

const callouts = [
	{
		title: "Article one with a shortish title",
		text:
			"Consequuntur est iure quis sapiente? Animi, asperiores atque commodi corporis cum delectus deserunt eveniet fugiat fugit id in inventore magnam magni maiores molestiae natus nesciunt, Officia praesentium quae quidem repellendus repudiandae sed sunt tempora totam unde."
	},
	{
		title: "Article one with a longish title that goes on a bit",
		text: "Consequuntur est iure quis sapiente?"
	},
	{
		title: "Very short!",
		text:
			"Consequuntur est iure quis sapiente? Animi, asperiores atque commodi corporis cum delectus deserunt eveniet fugiat fugit id in inventore magnam magni maiores molestiae natus nesciunt, Officia praesentium quae quidem repellendus repudiandae sed sunt tempora totam unde. Animi, asperiores atque commodi corporis cum delectus deserunt eveniet fugiat fugit id in inventore magnam magni maiores molestiae natus nesciunt, Officia praesentium quae quidem repellendus repudiandae sed sunt tempora totam unde."
	}
];

storiesOf("Components/Callout", module)
	.addDecorator(withKnobs)
	.add("Default (unrestricted width)", () => (
		<Callout>
			<CalloutImage>
				<img src="http://placehold.it/800x450?text=Callout" alt={""} />
			</CalloutImage>
			<CalloutBody>
				<h2 className="h4">
					<a href="#link">This is is the title</a>
				</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium
					dignissimos ex, excepturi in ipsam non quia quidem quo rem voluptas.
				</p>
			</CalloutBody>
		</Callout>
	))
	.add("Three various sizes, in grid", () => {
		return (
			<Grid>
				{callouts.map((item, index) => {
					return (
						<GridItem key={item.title} cols={12} md={4} sm={6}>
							<Callout>
								<CalloutImage>
									<img
										alt={item.title}
										src={`http://placehold.it/800x450?text=Callout ${index +
											1}`}
									/>
								</CalloutImage>
								<CalloutBody>
									<h2 className="h4">
										<a href="#hello"> {item.title}</a>
									</h2>
									<p>{item.text}</p>
								</CalloutBody>
							</Callout>
						</GridItem>
					);
				})}
			</Grid>
		);
	})
	.add("Try it out", () => {
		return (
			<Grid>
				<GridItem
					cols={8}
					push={2}
					md={{ cols: 4, push: 4 }}
					sm={{ cols: 6, push: 3 }}
				>
					<Callout>
						<CalloutImage>
							<img
								alt=""
								src={text(
									"Image source",
									"http://placehold.it/800x450?text=Callout"
								)}
							/>
						</CalloutImage>
						<CalloutBody>
							<h2 className="h4">
								<a
									rel="noopener noreferrer"
									target="_blank"
									href={text("Link destination", "https://www.nice.org.uk")}
								>
									{text("Link text", "This is the title")}
								</a>
							</h2>
							<p>
								{text(
									"Extra paragraph",
									"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, facilis."
								)}
							</p>
						</CalloutBody>
					</Callout>
				</GridItem>
			</Grid>
		);
	});
