@popsure/dirty-swan 0.51.3 → 0.53.0

package/src/lib/components/markdown/index.stories.tsx

@@ -1,185 +0,0 @@
-import { render } from 'sass';
-import { Markdown, MarkdownProps } from '.';
-
-const story = {
-  title: 'JSX/Markdown',
-  component: Markdown,
-  argTypes: {
-    
-    children: {
-      description: 'MD content to be rendered in the component.',
-    },
-    className: {
-      description: 'This property allows to add custom styles to the component.',
-    },
-    renderRawMarkdownChild: {
-      description: 'This property allows to render the raw markdown child as a component.',
-    },
-    openLinksInNewTab: {
-      description: 'Wether link components rendered inside Markdown should open in a new tab (`target="_blank"`).',
-    },
-    styling: {
-      desription: 'This property allows to customize the styling of the markdown content.',
-    }
-  },
-  args: {
-    children: '## Title \n This is **our content**.',
-    className: '',
-    renderRawMarkdownChild: false,
-    openLinksInNewTab: false,
-    styling: {},
-  },
-  parameters: {
-    componentSubtitle: (
-      <>
-        Display markdown text based on <a href="https://github.com/remarkjs/react-markdown" target='_blank' rel="noreferrer">react-markdown</a> with custom styling.
-      </>
-    ),
-  },
-};
-
-export const MarkdownStory = ({ children, className }: MarkdownProps) => (
-  <Markdown className={className}>
-    {children}
-  </Markdown>
-);
-
-MarkdownStory.storyName = "Markdown";
-
-export const AvailableMDComponents = ({ className }: MarkdownProps) => (
-  <Markdown className={className}>
-    {`
-## Headers
-The header options range from h1 to h4.
-
-\`\`\`
-# H1
-## H2
-### H3
-#### H4
-\`\`\`
-
-# H1 Lorem ipsum non sunt qui sunt
-
-## H2 Lorem ipsum non sunt qui sunt
-
-### H3 Lorem ipsum non sunt qui sunt
-
-#### H4 Lorem ipsum non sunt qui sunt
-
-## Emphasis
-
-\`\`\`
-Emphasis or italics, use *asterisk* or _underscore_.
-Strong emphasis or bold, use **asterisks** or __underscores__.
-Combined emphasis, use **_asterisks and underscores_**.
-\`\`\`
-
-Emphasis or italics, use _asterisk_ or _underscore_.
-
-Strong emphasis or bold, use **asterisks** or **underscores**.
-
-Combined emphasis, use **_asterisks and underscores_**.
-
-## Lists
-
-\`\`\`
-1. First ordered list item
-2. Another item
-3. Actual numbers don't matter, just that it's a number
-4. And another item.
-
-* Unordered list can use asterisks
-- Or minuses
-+ Or pluses
-\`\`\`
-
-1. First ordered list item
-2. Another item
-3. Actual numbers don't matter, just that it's a number
-4. And another item.
-
-- Unordered list can use asterisks
-- Or minuses
-- Or pluses
-
-## Links
-
-For links markdown syntax should be used.
-
-\`\`\`
-[This is an inline link](https://feather-insurance.com)
-\`\`\`
-
-[This is an inline link](https://feather-insurance.com)
-
-## Inline code block
-
-Inline code block can be set by using backtick or \`\`\`
-
-\`\`\`
-It is usefull to define a \`variable\` inside a text
-\`\`\`
-
-It is usefull to define a \`variable\` inside a text
-
-## Quote
-
-You can use quote markdown by using \`>\` at the beginning of your text
-
-\`\`\`
-> The busy man is least busy with living. - Seneca
-\`\`\`
-
-> The busy man is least busy with living. - Seneca
-
-## Images
-
-Images markdown syntax is the following
-\`\`\`
-![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)
-\`\`\`
-
-![Feather logo](https://feather-website.cdn.prismic.io/feather-website/88519fe0-d85f-47d3-83d7-20a74ee94591_feather-logo-icon.svg)
-
-## Tables
-
-Defining a table in markdown is a bit tricky. You can use websites such as [tablesgenerator.com](https://www.tablesgenerator.com/markdown_tables) for help
-
-\`\`\`
-| Department | Yearly spend | Category |
-|------------|--------------|----------|
-| Marketing  | 150k€        | \`c\`    |
-| Sales      | 200k€        | \`e\`    |
-| Product    | 84k€         | \`f\`    |
-\`\`\`
-
-| Department | Yearly spend | Category |
-|------------|--------------|----------|
-| Marketing  | 150k€        | \`c\`    |
-| Sales      | 200k€        | \`e\`    |
-| Product    | 84k€         | \`f\`    |
-
-`}
-  </Markdown>
-);
-
-export const AddingCustomComponents = ({ 
-  className,
-  openLinksInNewTab,
-  renderRawMarkdownChild
- }: MarkdownProps) => (
-  <Markdown
-    className={className}
-    openLinksInNewTab={openLinksInNewTab}
-    styling={{
-      h6: 'tc-red-500'
-    }}
-    renderRawMarkdownChild={renderRawMarkdownChild}
-
-  >
-    ###### This is a custom H6 that will always be red
-  </Markdown>
-);
-
-export default story;

package/src/lib/components/markdown/index.tsx

@@ -1,163 +0,0 @@
-import { ReactNode } from 'react';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import remarkDirective from 'remark-directive';
-import remarkGfm from 'remark-gfm';
-
-import { MarkdownStyling, defaultStyling } from './config';
-
-type ComponentProps = {
-  children?: ReactNode;
-}
-
-export interface MarkdownProps {
-  children: string;
-  className?: string;
-  openLinksInNewTab?: boolean;
-  styling?: Partial<MarkdownStyling>;
-  renderRawMarkdownChild?: boolean;
-}
-
-const Markdown = ({
-  children: rawMarkdownChild,
-  className = '',
-  openLinksInNewTab = false,
-  styling: rawStyling,
-  renderRawMarkdownChild = false
-}: MarkdownProps) => {
-  const styling = { ...defaultStyling, ...rawStyling };
-
-  if (renderRawMarkdownChild) {
-    return <>{rawMarkdownChild}</>;
-  }
-
-  const Link = ({ children, href }: ComponentProps & { href?: string }) =>
-    openLinksInNewTab ? (
-      <a href={href} className={styling.a} target="_blank" rel="noreferrer">
-        {children}
-      </a>
-    ) : (
-      <a href={href} className={styling.a}>
-        {children}
-      </a>
-    );
-
-  const Paragraph = ({ children }: ComponentProps) => (
-    <p className={styling.p}>{children}</p>
-  );
-
-  const Heading = ({
-    children,
-    node,
-  }: ComponentProps & { node?: { tagName: string } }) => {
-    switch (node?.tagName) {
-      case 'h1':
-        return <h1 className={styling.h1}>{children}</h1>;
-      case 'h2':
-        return <h2 className={styling.h2}>{children}</h2>;
-      case 'h3':
-        return <h3 className={styling.h3}>{children}</h3>;
-      case 'h4':
-        return <h4 className={styling.h4}>{children}</h4>;
-      case 'h5':
-        return <h5 className={styling.h5}>{children}</h5>;
-      case 'h6':
-        return <h6 className={styling.h6}>{children}</h6>;
-      default:
-        return <p>{children}</p>;
-    }
-  };
-
-  const UList = ({ children }: ComponentProps) => {
-    return <ul className={styling.ul}>{children}</ul>;
-  };
-
-  const OList = ({ children }: ComponentProps) => {
-    return <ol className={styling.ol}>{children}</ol>;
-  };
-
-  const Strong = ({ children }: ComponentProps) => {
-    return <strong className={styling.strong}>{children}</strong>;
-  };
-
-  const Emphasis = ({ children }: ComponentProps) => {
-    return <em className={styling.em}>{children}</em>;
-  };
-
-  const Table = ({ children }: ComponentProps) => {
-    return <table className={styling.table}>{children}</table>;
-  };
-
-  const TableRow = ({ children }: ComponentProps) => {
-    return <tr className={styling.tr}>{children}</tr>;
-  };
-
-  const TableCell = ({ children }: ComponentProps) => {
-    return <td className={styling.td}>{children}</td>;
-  };
-
-  const TableHeader = ({ children }: ComponentProps) => {
-    return <th className={styling.th}>{children}</th>;
-  };
-
-  const Image = ({
-    src,
-    alt,
-    ...props
-  }: {
-    src?: string | undefined;
-    alt?: string | undefined;
-  }) => {
-    return (
-      <a href={src} target="_blank" rel="noreferrer noreferrer">
-        <img style={{ maxWidth: '100%' }} src={src} alt={alt} {...props} />
-      </a>
-    );
-  };
-
-  const BlockQuote = ({ children }: ComponentProps) => {
-    return <blockquote className={styling.blockquote}>{children}</blockquote>;
-  };
-
-  const Pre = ({ children }: ComponentProps) => {
-    return <pre className={styling.pre}>{children}</pre>;
-  };
-
-  const Code = ({ children }: ComponentProps) => {
-    return <code className={styling.code}>{children}</code>;
-  };
-
-  return (
-    <ReactMarkdown
-      className={className}
-      components={{
-        a: Link,
-        p: Paragraph,
-        h1: Heading,
-        h2: Heading,
-        h3: Heading,
-        h4: Heading,
-        h5: Heading,
-        h6: Heading,
-        ol: OList,
-        ul: UList,
-        strong: Strong,
-        em: Emphasis,
-        table: Table,
-        th: TableHeader,
-        tr: TableRow,
-        td: TableCell,
-        blockquote: BlockQuote,
-        img: Image,
-        code: Code,
-        pre: Pre,
-      }}
-      rehypePlugins={[rehypeRaw]}
-      remarkPlugins={[remarkDirective, remarkGfm]}
-    >
-      {rawMarkdownChild}
-    </ReactMarkdown>
-  );
-};
-
-export { Markdown };

package/src/lib/components/markdown/styles.module.scss

@@ -1,37 +0,0 @@
-@use "../../scss/public/colors" as *;
-
-.ulist {
-  list-style-type: disc;
-  list-style-position: outside;
-  padding-left: 16px;
-
-  > li {
-    padding-left: 8px;
-  }
-}
-
-.olist {
-  list-style-type: decimal;
-  list-style-position: inside;
-}
-
-.table td,
-.table th {
-  border: 1px solid $ds-grey-300;
-}
-
-.pre {
-  line-height: 24px;
-}
-
-.code {
-  font-family: monospace;
-  padding: 2px 4px;
-}
-
-:not(.pre) > .code {
-  border: 1px solid $ds-grey-400;
-  background-color: $ds-grey-200;
-  color: $ds-red-500;
-  border-radius: 4px;
-}