@patreon/studio/module/docs/components/DocsNotice/index.jsx

Patreon Studio Design System

import { Unstyled } from '@storybook/blocks';
import React from 'react';
import { css } from 'styled-components';
import { BodyText } from '../../../components/BodyText';
import { HeadingText } from '../../../components/HeadingText';
import { SpacerWithCss } from '../../../components/Spacer';
import { Stack } from '../../../components/Stack';
import { tokens } from '../../../tokens';
import { cssForBodyText } from '../../../utilities/type-bundles';
const variantColors = {
    critical: {
        border: tokens.global.critical.action.default,
        background: tokens.global.critical.muted.default,
        text: tokens.global.critical.onMuted.default,
    },
    warning: {
        border: tokens.global.warning.action.default,
        background: tokens.global.warning.muted.default,
        text: tokens.global.warning.onMuted.default,
    },
    success: {
        border: tokens.global.success.action.default,
        background: tokens.global.success.muted.default,
        text: tokens.global.success.onMuted.default,
    },
    info: {
        border: tokens.global.border.action.default,
        background: tokens.global.bg.baseAlt.default,
        text: tokens.global.content.regular.default,
    },
};
export function DocsNotice({ variant = 'info', title, children }) {
    const colors = variantColors[variant];
    return (<Unstyled>
      <SpacerWithCss p={tokens.global.space.x16} mb={tokens.global.space.x16} css={css `
          border: ${tokens.global.borderWidth.thick} solid ${colors.border};
          border-radius: ${tokens.global.radius.md};
          background-color: ${colors.background};
          color: ${colors.text};

          p {
            margin: 0;
            color: ${colors.text};
          }

          a {
            color: ${colors.text};
            ${cssForBodyText({ size: 'md', weight: 'bold' })}
          }
        `}>
        <Stack gap={tokens.global.space.x8}>
          <HeadingText as="h2" size="lg" color="inherit">
            {title}
          </HeadingText>
          {typeof children === 'string' ? (<BodyText size="lg" color="inherit">
              {children}
            </BodyText>) : (children)}
        </Stack>
      </SpacerWithCss>
    </Unstyled>);
}
//# sourceMappingURL=index.jsx.map