Merge pull request #170 from t3n/punchline

add punchline to storybook

packages/components/src/Punchline/Punchline.d.ts

@@ -0,0 +1 @@
+export declare const Punchline: import("styled-components").StyledComponent<"h1", any, import("../Heading").HeadingProps, never>;

packages/components/src/Punchline/Punchline.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { renderWithTheme } from '../helper/renderWithTheme';
+import { Punchline } from './Punchline';
+
+test('Punchline machtes snapshot', () => {
+  const { container } = renderWithTheme(
+    <>
+      <Punchline>Test</Punchline>
+    </>,
+    {}
+  );
+
+  expect(container.firstChild).toMatchSnapshot();
+});

packages/components/src/Punchline/Punchline.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { space, typography, color } from 'styled-system';
+import { Heading } from '../Heading';
+
+export const Punchline = styled(Heading)`
+  ${({ theme }) =>
+    typography({
+      theme,
+      fontSize: [8, '3rem', '3.5rem', '4rem'],
+      textAlign: 'left',
+      lineHeight: ['1.5em', '1.5em', '1.6em', '1.6em']
+    })};
+  ${({ theme }) => space({ theme, pb: [0, 0, 1, 1] })};
+  ${({ theme }) => color({ theme, color: 'text.inverse', bg: 'shades.black' })};
+
+  box-shadow: 0.625rem 0 0 #000, -0.625rem 0 0 #000;
+  display: inline;
+`;

packages/components/src/Punchline/__snapshots__/Punchline.test.tsx.snap

@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Punchline machtes snapshot 1`] = `
+.c0 {
+  font-family: "adelle-sans",sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.333em;
+  font-size: 2.5rem;
+  text-align: left;
+  line-height: 1.5em;
+  padding-bottom: 0;
+  color: #fff;
+  background-color: #000;
+  box-shadow: 0.625rem 0 0 #000,-0.625rem 0 0 #000;
+  display: inline;
+}
+
+@media screen and (min-width:30rem) {
+  .c0 {
+    font-size: 1.75rem;
+  }
+}
+
+@media screen and (min-width:48rem) {
+  .c0 {
+    font-size: 2rem;
+  }
+}
+
+@media screen and (min-width:61.25rem) {
+  .c0 {
+    font-size: 2.25rem;
+  }
+}
+
+@media screen and (min-width:90rem) {
+  .c0 {
+    font-size: 2.5rem;
+  }
+}
+
+@media screen and (min-width:30rem) {
+  .c0 {
+    line-height: 1.333em;
+  }
+}
+
+@media screen and (min-width:48rem) {
+  .c0 {
+    line-height: 1.333em;
+  }
+}
+
+@media screen and (min-width:61.25rem) {
+  .c0 {
+    line-height: 1.25em;
+  }
+}
+
+@media screen and (min-width:90rem) {
+  .c0 {
+    line-height: 1.25em;
+  }
+}
+
+@media screen and (min-width:30rem) {
+  .c0 {
+    font-size: 3rem;
+    line-height: 1.5em;
+  }
+}
+
+@media screen and (min-width:48rem) {
+  .c0 {
+    font-size: 3.5rem;
+    line-height: 1.6em;
+  }
+}
+
+@media screen and (min-width:61.25rem) {
+  .c0 {
+    font-size: 4rem;
+    line-height: 1.6em;
+  }
+}
+
+@media screen and (min-width:30rem) {
+  .c0 {
+    padding-bottom: 0;
+  }
+}
+
+@media screen and (min-width:48rem) {
+  .c0 {
+    padding-bottom: 4px;
+  }
+}
+
+@media screen and (min-width:61.25rem) {
+  .c0 {
+    padding-bottom: 4px;
+  }
+}
+
+<h1
+  class="c0"
+>
+  Test
+</h1>
+`;

packages/components/src/Punchline/index.d.ts

@@ -0,0 +1 @@
+export * from './Punchline';

packages/components/src/Punchline/index.ts

@@ -0,0 +1 @@
+export * from './Punchline';

packages/components/src/index.d.ts

@@ -4,6 +4,7 @@ export { Alert, AlertText } from './Alert';
 export { Avatar } from './Avatar';
 export { Badge } from './Badge';
 export { Box } from './Box';
+export { Punchline } from './Punchline';
 export { Button } from './Button';
 export { Card } from './Card';
 export { CardHeader } from './CardHeader';

packages/components/src/index.ts

@@ -4,6 +4,7 @@ export { Alert, AlertText } from './Alert';
 export { Avatar } from './Avatar';
 export { Badge } from './Badge';
 export { Box } from './Box';
+export { Punchline } from './Punchline';
 export { Button } from './Button';
 export { Card } from './Card';
 export { CardHeader } from './CardHeader';

packages/storybook/src/stories/components/typography/punchline/punchline.stories.tsx

@@ -1,17 +1,56 @@
 import React from 'react';
-
-import { Text } from '@t3n/components';
-
-import { storyContainerDecorator } from '../../../../utils/decorators';
+import {
+  Punchline,
+  Grid,
+  GridItem,
+  VisualSection,
+  Box,
+  Section
+} from '@t3n/components';
+import { storyContainerContentDecorator } from '../../../../utils/decorators';
 
 export default {
   title: 'Components|Typografie/Punchline',
-  component: Text,
-  decorators: [storyContainerDecorator]
+  component: Text
 };
 
-export const defaultStory = () => <Text>todo</Text>;
+export const defaultStory = () => <Punchline>Punchline</Punchline>;
 
 defaultStory.story = {
-  name: 'Default'
+  name: 'Default',
+  decorators: [storyContainerContentDecorator]
+};
+
+export const lineBreakStory = () => (
+  <>
+    <Section variant="primary" innerGap={9}>
+      <Grid>
+        <GridItem>
+          <Box width="500px" pl={3}>
+            <Punchline>Punchline mit Zeilenumbruch</Punchline>
+          </Box>
+        </GridItem>
+      </Grid>
+    </Section>
+  </>
+);
+
+lineBreakStory.story = {
+  name: 'Zeilenumbruch'
+};
+
+export const visualSectionStory = () => (
+  <Grid>
+    <GridItem width={[1]}>
+      <VisualSection variant="highlight" innerGap={9}>
+        <Box p={3}>
+          <Punchline>Punchline in Visual-Section</Punchline>
+        </Box>
+      </VisualSection>
+    </GridItem>
+  </Grid>
+);
+
+visualSectionStory.story = {
+  name: 'Visual Section'
 };