@axeptio/design-system/src/Core/Typography/Code/code.stories.jsx

Design System for Axeptio

import React from 'react';
import Code from './index';

export default {
  title: 'Core/Typography/Code',
  component: Code
};

const Template = args => <Code {...args}>{args?.children}</Code>;

const exampleCodeBlock = `// React Component
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);`;

export const Default = Template.bind({});
Default.args = {
  code: exampleCodeBlock,
  decoration: '',
  language: 'javascript'
};

export const Style = Template.bind({});
Style.args = {
  code: exampleCodeBlock,
  decoration: '',
  language: 'javascript',
  style: 'codepen-embed'
};

export const ShowLines = Template.bind({});
ShowLines.args = {
  code: exampleCodeBlock,
  decoration: '',
  language: 'javascript',
  showlines: true
};

export const OtherLanguage = Template.bind({});
OtherLanguage.args = {
  code: 'SELECT name FROM table WHERE ',
  decoration: '',
  language: 'sql',
  showlines: true
};