@meduza/ui-kit-2 0.0.1 → 0.1.1

package/src/SimpleBlock/SimpleBlock.module.css

@@ -0,0 +1,393 @@
+@import '../vars.css';
+@import './FootnoteLink';
+
+.p {
+  margin: 0 0 14px;
+
+  font-family: $primaryFont;
+  font-size: 18px;
+  line-height: 24px;
+
+  @media $mobile {
+    margin: 0 0 20px;
+
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+.p a,
+.h2 a,
+.h3 a,
+.h4 a,
+.lead a,
+.lead_hr a,
+.context_p a {
+  text-decoration: none;
+
+  color: inherit;
+  box-shadow: inset 0 -1px $gold;
+}
+
+.p a:hover,
+.h2 a:hover,
+.h3 a:hover,
+.h4 a:hover,
+.lead a:hover,
+.lead_hr a:hover,
+.context_p a:hover {
+  color: $gold;
+}
+
+.h3:first-child,
+.h4:first-child,
+.p:first-child,
+.lead:first-child,
+.blockquote:first-child {
+  margin-top: 0;
+}
+
+.p:last-child,
+.blockquote:last-child,
+.lead:last-child,
+.game.lead:last-child,
+.slide.lead:last-child,
+.h2:last-child {
+  margin-bottom: 0;
+}
+
+.h2 {
+  max-width: 520px;
+  margin: 0 0 15px;
+
+  font-family: $primaryFont;
+  font-size: 25px;
+  font-weight: bold;
+  line-height: 28px;
+
+  @media $mobile {
+    margin: 0 0 45px;
+
+    font-size: 37px;
+    line-height: 39px;
+  }
+}
+
+.h2 + figure {
+  margin-top: 15px;
+
+  @media $mobile {
+    margin-top: -20px;
+  }
+}
+
+.h3 {
+  margin-top: 29px;
+  margin-bottom: 10px;
+
+  font-family: $secondaryFont;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 24px;
+
+  @media $mobile {
+    margin-top: 45px;
+    margin-bottom: 15px;
+
+    font-size: 28px;
+    line-height: 34px;
+  }
+}
+
+.h4 {
+  margin-top: 26px;
+  margin-bottom: 11px;
+
+  font-family: $secondaryFont;
+  font-size: 17px;
+  font-weight: bold;
+  line-height: 21px;
+
+  @media $mobile {
+    margin-top: 45px;
+    margin-bottom: 15px;
+
+    font-size: 21px;
+    line-height: 28px;
+  }
+}
+
+.h3 + .h3,
+.h2 + .h2 {
+  margin-top: 0;
+}
+
+.h3 + .h4 {
+  margin-top: 15px;
+
+  @media $mobile {
+    margin-top: 15px;
+  }
+}
+
+.p + ul,
+.p + ol,
+.game.lead + ul,
+.game.lead + ol {
+  margin-top: -9px;
+}
+
+.blockquote {
+  margin: 16px 0;
+  padding: 12px 12px 13px;
+
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  background: #fff8c4;
+
+  font-family: $secondaryFont;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 22px;
+
+  @media $mobile {
+    margin: 25px 0;
+    padding: 12px 15px 13px;
+
+    font-size: 18px;
+    line-height: 26px;
+  }
+}
+
+.blockquote a {
+  text-decoration: none;
+
+  color: #000;
+  box-shadow: inset 0 -1px #000;
+}
+
+.blockquote a:hover {
+  color: $gold;
+  box-shadow: inset 0 -1px $gold;
+}
+
+.blockquote.dark {
+  color: #000;
+}
+
+.lead {
+  position: relative;
+
+  margin-top: 30px;
+  margin-bottom: 0;
+
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 22px;
+
+  @media $mobile {
+    margin-top: 25px;
+
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+.lead [data-body] {
+  padding-top: 1px;
+}
+
+.lead_hr {
+  display: block;
+
+  width: 100%;
+  max-width: 650px;
+  margin: 30px auto;
+
+  border-bottom: 1px solid #e5e5e5;
+
+  @media $mobile {
+    margin: 45px auto;
+  }
+}
+
+mark {
+  position: relative;
+
+  white-space: pre-wrap;
+
+  background-color: $highlighter;
+
+  font-weight: inherit;
+  font-style: inherit;
+
+  @media $mobile {
+    padding-bottom: 1px;
+  }
+}
+
+a mark {
+  z-index: 1;
+
+  padding-bottom: 0;
+
+  color: inherit;
+  box-shadow: inset 0 -1px $gold, 0 1px $highlighter;
+}
+
+.context_p {
+  position: relative;
+
+  margin: 0 0 15px;
+  padding: 0 0 0 23px;
+
+  font-family: $primaryFont;
+  font-size: 18px;
+  line-height: 22px;
+
+  @media $portraitTablet {
+    padding: 0 0 0 38px;
+
+    font-size: 20px;
+    line-height: 27px;
+  }
+}
+
+.context_p::before {
+  position: absolute;
+  top: 0;
+  left: 5px;
+
+  width: 8px;
+
+  content: '\2022';
+  text-align: center;
+
+  color: $gold;
+
+  font-size: 18px;
+  line-height: inherit;
+
+  @media $portraitTablet {
+    left: 0;
+
+    width: 36px;
+
+    text-align: center;
+
+    font-size: 20px;
+  }
+}
+
+.isInIntro.lead::after {
+  content: none;
+}
+
+.center {
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.center.lead {
+  @media $portraitTablet {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+.game.lead {
+  margin-bottom: 18px;
+
+  @media $portraitTablet {
+    margin-top: 27px;
+    margin-bottom: 20px;
+
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+.slide.lead {
+  margin-bottom: 15px;
+
+  @media $portraitTablet {
+    margin-top: 20px;
+
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+.slide.lead + .lead,
+.game.lead + .lead {
+  margin-top: 0;
+}
+
+.isInImportantLead {
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 22px;
+
+  @media $portraitTablet {
+    font-size: 18px;
+    line-height: 26px;
+  }
+}
+
+.slide {
+  max-width: 650px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.isInAnswer.p {
+  margin-top: 6px;
+  margin-bottom: 6px;
+
+  font-family: $secondaryFont;
+  font-size: 16px;
+  line-height: 22px;
+
+  @media $portraitTablet {
+    margin-top: 12px;
+    margin-bottom: 12px;
+
+    font-size: 18px;
+    line-height: 26px;
+  }
+}
+
+.isInAnswer.blockquote {
+  margin-top: 12px;
+  margin-bottom: 12px;
+
+  @media $portraitTablet {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+
+.isInAnswer:first-child {
+  margin-top: 6px;
+}
+
+.isInAnswer:last-child {
+  margin-bottom: 0;
+}
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}

package/src/SimpleBlock/SimpleBlock.stories.module.css

@@ -0,0 +1,5 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}

package/src/SimpleBlock/SimpleBlock.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { SimpleBlock } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './SimpleBlock.stories.module.css'
+
+export default {
+  title: 'Main / SimpleBlock',
+  component: SimpleBlock,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <SimpleBlock />
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/SimpleBlock/SimpleBlock.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { SimpleBlock } from './'
+import { SimpleBlockProps } from './SimpleBlock.types'
+import styles from './SimpleBlock.module.css'
+
+describe('Simple Block', () => {
+  let props: SimpleBlockProps
+
+  const renderComponent = () => render(<SimpleBlock {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const simpleBlock = getByTestId('simple-block')
+
+    expect(simpleBlock).toHaveClass(styles.root)
+  })
+})

package/src/SimpleBlock/SimpleBlock.types.ts

@@ -0,0 +1,4 @@
+export interface SimpleBlockProps {
+  block: any,
+  styleContext?: string[] | string
+}

package/src/SimpleBlock/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { SimpleBlockProps } from './SimpleBlock.types'
+
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+import DangerousHTML from '../utils/DangerousHtml'
+
+import styles from './SimpleBlock.module.css'
+
+export const SimpleBlock: React.FC<SimpleBlockProps> = ({
+  block: { data, type, only_on: onlyOn },
+  styleContext
+}) => {
+  let tagName
+
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles[type], !!type && !!styles[type]],
+    [styles[onlyOn], true]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  switch (type) {
+    case 'context_p':
+    case 'lead':
+    case 'note_caption':
+    case 'note_credit': {
+      tagName = 'p'
+      break
+    }
+    case 'lead_hr': {
+      tagName = 'div'
+      break
+    }
+    default:
+      tagName = type
+  }
+  return (
+    <DangerousHTML
+      className={makeClassName(classNames)}
+      html={data || ''}
+      tagName={tagName}
+    />
+  )
+}

package/src/SimpleTitle/SimpleTitle.module.css

@@ -0,0 +1,33 @@
+@import '../vars.css';
+
+.root {
+  margin: 0 0 18px;
+
+  font-family: $primaryFont;
+  font-size: 20px;
+  font-weight: normal;
+  line-height: 23px;
+
+  @media $portraitTablet {
+    margin-bottom: 15px;
+
+    font-size: 36px;
+    line-height: 40px;
+  }
+}
+
+/* VISIBILITY */
+
+.mobile {
+  @media $mobile {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media $mobile {
+    display: block;
+  }
+}

package/src/SimpleTitle/SimpleTitle.stories.module.css

@@ -0,0 +1,5 @@
+@import '../vars.css';
+
+.root {
+  display: block;
+}

package/src/SimpleTitle/SimpleTitle.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { SimpleTitle } from './'
+import { PreviewWrapper } from '../_storybook/PreviewWrapper'
+import styles from './SimpleTitle.stories.module.css'
+
+export default {
+  title: 'Main / SimpleTitle',
+  component: SimpleTitle,
+  parameters: {
+    themeWrapperSideBySide: true
+  }
+}
+
+const Example: React.FC = () => {
+  return (
+    <>
+      <div className={styles.root}>
+        <SimpleTitle />
+      </div>
+    </>
+  )
+}
+
+export const Default: React.FC = () => (
+  <>
+    <PreviewWrapper theme="light">
+      <Example />
+    </PreviewWrapper>
+    <PreviewWrapper theme="dark">
+      <Example />
+    </PreviewWrapper>
+  </>
+)

package/src/SimpleTitle/SimpleTitle.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { SimpleTitle } from './'
+import { SimpleTitleProps } from './SimpleTitle.types'
+import styles from './SimpleTitle.module.css'
+
+describe('Simple Title', () => {
+  let props: SimpleTitleProps
+
+  const renderComponent = () => render(<SimpleTitle {...props} />)
+
+  it('should have root style', () => {
+    const { getByTestId } = renderComponent()
+
+    const simpleTitle = getByTestId('simple-title')
+
+    expect(simpleTitle).toHaveClass(styles.root)
+  })
+})

package/src/SimpleTitle/SimpleTitle.types.ts

@@ -0,0 +1,4 @@
+export interface SimpleTitleProps {
+  block: any,
+  styleContext?: string[] | string
+}

package/src/SimpleTitle/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { SimpleTitleProps } from './SimpleTitle.types'
+import makeClassName from '../utils/makeClassName'
+import makeStyleContext from '../utils/makeStyleContext'
+
+import styles from './SimpleTitle.module.css'
+
+export const SimpleTitle: React.FC<SimpleTitleProps> = ({
+  block: {
+    data: { first },
+    only_on: onlyOn
+  },
+  styleContext
+}) => {
+  let classNames: (string[] | string | boolean)[][] = [
+    [styles.root, true],
+    [styles[onlyOn], true]
+  ]
+
+  if (styleContext) {
+    classNames = makeStyleContext(classNames, styleContext, styles)
+  }
+
+  return (
+    <div data-testid="simple-title" className={makeClassName(classNames)}>
+      {first}
+    </div>
+  )
+}