feature/code

.storybook/preview.js

@@ -87,6 +87,10 @@ export const parameters = {
             ['Documentation', 'Live', 'Without style', 'Class based'],
             'Paragraph',
             ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Blockquote',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
+            'CodeSnippet',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
             'Label',
             ['Documentation', 'Live', 'Without style', 'Class based'],
             'Link',

src/codesnippet/CodeSnippet.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { classNames } from '../common/utils';
+
+
+type CodeSnippetProps = {
+    /**
+   * optional CSS class name
+   */
+    className?: string;
+    /**
+   * content of the code snippet
+   */
+    value: string | number;
+    /**
+   * Additional props/attributes
+   */
+    props?: React.HTMLAttributes<HTMLElement>;
+};
+
+
+export const CodeSnippet = ({ className, value, props }: CodeSnippetProps) => {
+    const dynamicClassName = classNames(['dcx-code', className]);
+
+    return (
+        <code className={dynamicClassName} {...props}>
+                {value}
+        </code>
+        );
+};

src/codesnippet/__tests__/CodeSnippet.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { CodeSnippet } from '../CodeSnippet';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+describe('CodeSnippet', () => {
+  it('should render', () => {
+    const { container } = render(
+      <CodeSnippet value="CodeSnippet value" />
+    );
+    expect(container.querySelector('code')).toBeInTheDocument();
+  });
+  it('should allow to pass a value', () => {
+    render(
+      <CodeSnippet
+        className="code"
+        value="Code snippet text"
+      />
+    );
+    expect(screen.getByText('Code snippet text')).toBeInTheDocument();
+  });
+
+  it('should provide the ability to specify arbitrary props', () => {
+    const { container } = render(
+      <CodeSnippet
+        className="code"
+        value="Code snippet text"
+        props={{ id: 'my-code' }}
+      />
+    );
+    expect(container.querySelector('#my-code')).toBeInTheDocument();
+  });
+
+  it('should contains a class called dcx-code', () => {
+    const { container } = render(
+      <CodeSnippet value="Code snippet value"/>
+    );
+    expect(container.querySelector('.dcx-code')).toBeInTheDocument();
+  });
+  it('should contains the class dcx-code and the class decided by the developer', () => {
+    const { container } = render(
+      <CodeSnippet
+        className="my-classname"
+        value="Code snippet value"
+      />
+    );
+    expect(container.querySelector('.dcx-code')).toBeInTheDocument();
+    expect(container.querySelector('.my-classname')).toBeInTheDocument();
+  });
+});

src/codesnippet/index.ts

@@ -0,0 +1 @@
+export { CodeSnippet } from './CodeSnippet';

stories/CodeSnippet/ClassBased.stories.js

@@ -0,0 +1,24 @@
+import { CodeSnippet } from '../../src/codesnippet/CodeSnippet';
+import './style.css';
+/**
+ * In this section we're using the CodeSnippet component providing the relative `className and value` . Feel free to use your own css and style the CodeSnippet as you prefer.
+ */
+export default {
+  title: 'DCXLibrary/Typography/CodeSnippet/Class based',
+  component: CodeSnippet,
+  parameters: {
+    options: {
+      showPanel: true,
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export const Basic = {
+  name: 'Basic',
+  args: {
+    className: 'codesnippet',
+    value: 'This is the content of the code snippet.'
+  },
+};
+

stories/CodeSnippet/Documentation.mdx

@@ -0,0 +1,26 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as CodeSnippetStories from './UnStyled.stories';
+
+<Meta title="DCXLibrary/Typography/CodeSnippet/Documentation" />
+
+# CodeSnippet
+
+A CodeSnippet component ready to use in your Typography.  
+CodeSnippet is UI/UX agnostic so you need to provide your style to have the look and feel you prefer.  
+When you import the CodeSnippet component without providing any className or style associated will looks as following:  
+
+<Canvas of={CodeSnippetStories.Unstyled} />
+
+A more complex example with all the possible properties is:
+
+```js
+<CodeSnippet
+  value="This is the content of the CodeSnippet."
+  className="my-classname"
+  props={{ id: 'my-code' }}
+/>
+```
+
+Below a list of all the available properties:
+
+<ArgTypes of={CodeSnippetStories} />

stories/CodeSnippet/Live.stories.js

@@ -0,0 +1,23 @@
+import CodeSnippetLive from '../liveEdit/CodeSnippetLive';
+import { CodeSnippet } from '../../src/codesnippet/CodeSnippet';
+
+export default {
+  title: 'DCXLibrary/Typography/CodeSnippet/Live',
+  component: CodeSnippet,
+
+  parameters: {
+    options: {
+      showPanel: false,
+    },
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  },
+};
+
+export const Live = {
+  render: () => <CodeSnippetLive />
+};

stories/CodeSnippet/UnStyled.stories.js

@@ -0,0 +1,17 @@
+import { CodeSnippet } from '../../src/codesnippet/CodeSnippet';
+
+export default {
+  title: 'DCXLibrary/Typography/CodeSnippet/Without style',
+  component: CodeSnippet,
+  parameters: {
+    options: {
+      showPanel: true,
+    },
+  },
+};
+
+export const Unstyled = {
+  args: {
+    value: 'This is the content of the code snippet.'
+  },
+};

stories/CodeSnippet/style.css

@@ -0,0 +1,9 @@
+.codesnippet {
+    color:black;
+    margin: 0;
+    padding: 15px;
+    background: #eee;
+    borderRadius: 5px;
+    width: 500px;
+    border-radius: 3px;
+}

stories/liveEdit/CodeSnippetLive.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import { CodeSnippet } from '../../src/codesnippet/CodeSnippet';
+
+const CodeSnippetDemo = `
+function CodeSnippetDemo() {
+    const style = {
+    color:'red'
+    }
+    return (
+    <CodeSnippet 
+        className="code"
+        value="This is the content of the code snippet."
+        props={{ id: 'my-code', style }} 
+    />
+    )
+}
+`.trim();
+
+const CodeSnippetLive = () => {
+    const scope = { CodeSnippet };
+    return (
+    <LiveProvider code={CodeSnippetDemo} scope={scope}>
+        <div className="container">
+            <LiveEditor className="liveEditor" aria-label="editor" />
+            <LivePreview className="livePreview" aria-label="preview" />
+        </div>
+        <LiveError className="liveError" aria-label="error" />
+    </LiveProvider>
+    );
+};
+
+export default CodeSnippetLive;