import TextCollapse from '.';

export default {
  title: 'Deprecated/TextCollapse',

  parameters: {
    readme: {
      sidebar: '<!-- PROPS -->',
    },
  },
};

export function WithDefaultOptions() {
  return (
    <>
      <TextCollapse maxWidth={180}>this text will collapse from middle</TextCollapse>
      <hr />
      <TextCollapse maxWidth={180} fontType="monospace">
        this text will collapse from middle
      </TextCollapse>
    </>
  );
}

WithDefaultOptions.storyName = 'with default options';

export function WithSmallerEndChars() {
  return (
    <>
      <TextCollapse maxWidth={180} endChars={4}>
        this text will collapse from middle
      </TextCollapse>
      <hr />
      <TextCollapse maxWidth={180} endChars={4} fontType="monospace">
        this text will collapse from middle
      </TextCollapse>
    </>
  );
}

WithSmallerEndChars.storyName = 'with smaller end chars';

export function WithLargerStartChars() {
  return (
    <div style={{ color: 'red' }}>
      <TextCollapse maxWidth={120} startChars={18} endChars={4}>
        this text will collapse from middle
      </TextCollapse>
      <hr />
      <TextCollapse maxWidth={120} startChars={18} endChars={4} fontType="monospace">
        this text will collapse from middle
      </TextCollapse>
    </div>
  );
}

WithLargerStartChars.storyName = 'with larger start chars';

export function WithLargerFontSize() {
  return (
    <div style={{ fontSize: 30 }}>
      <TextCollapse maxWidth={360} startChars={('startChars', 8)} endChars={4}>
        this text will collapse from middle
      </TextCollapse>
      <hr />
      <TextCollapse maxWidth={360} startChars={8} endChars={4} fontType="monospace">
        this text will collapse from middle
      </TextCollapse>
    </div>
  );
}

WithLargerFontSize.storyName = 'with larger font size';
