import React from 'react';
import { Flexbox, Typography } from '../..';
import { Display } from '../../common/Display';
var meta = {
  title: 'Atoms / Typography',
  component: Typography
};
export default meta;
var AllComponent = function AllComponent() {
  return React.createElement(Flexbox, {
    container: true,
    direction: "column"
  }, React.createElement(Typography, {
    type: "hero"
  }, "Hero 48/52px extrabold (46/48px mobile)"), React.createElement(Typography, {
    type: "title1"
  }, "Title1 28/32px extrabold (24/28px mobile)"), React.createElement(Typography, {
    type: "title2"
  }, "Title2 24/28px extrabold (20/24px mobile)"), React.createElement(Typography, {
    type: "title3"
  }, "Title3 20/24px extrabold (18/24px mobile)"), React.createElement(Typography, {
    type: "primary"
  }, "Primary 16/24px regular"), React.createElement(Typography, {
    type: "secondary"
  }, "Secondary 14/20px regular"), React.createElement(Typography, {
    type: "tertiary"
  }, "Tertiary 12/16px regular"), React.createElement(Typography, {
    type: "caption"
  }, "Caption 10/16px regular"));
};
export var All = {
  render: function render() {
    return React.createElement(AllComponent, null);
  }
};
export var Primary = function Primary() {
  return React.createElement(Display, {
    items: [{
      title: 'Primary default',
      component: React.createElement(Typography, null, "Primary text")
    }, {
      title: 'Primary with bold text',
      component: React.createElement(Typography, {
        type: "primary",
        weight: "bold"
      }, "Primary bold text")
    }, {
      title: 'Primary with extrabold text',
      component: React.createElement(Typography, {
        type: "primary",
        weight: "extrabold"
      }, "Primary extrabold text")
    }]
  });
};
export var Secondary = function Secondary() {
  return React.createElement(Display, {
    items: [{
      title: 'Secondary',
      component: React.createElement(Typography, {
        type: "secondary"
      }, "Secondary text")
    }, {
      title: 'Secondary with bold text',
      component: React.createElement(Typography, {
        type: "secondary",
        weight: "bold"
      }, "Secondary bold text")
    }]
  });
};
export var Tertiary = function Tertiary() {
  return React.createElement(Display, {
    items: [{
      title: 'Tertiary Default',
      component: React.createElement(Typography, {
        type: "tertiary"
      }, "Tertiary text")
    }, {
      title: 'Tertiary with bold text',
      component: React.createElement(Typography, {
        type: "tertiary",
        weight: "bold"
      }, "Tertiary bold text")
    }]
  });
};
export var Caption = function Caption() {
  return React.createElement(Display, {
    items: [{
      title: 'Caption Default',
      component: React.createElement(Typography, {
        type: "caption"
      }, "Caption text")
    }, {
      title: 'Caption with bold text',
      component: React.createElement(Typography, {
        type: "caption",
        weight: "bold"
      }, "Caption bold text")
    }]
  });
};
export var Title1 = {
  render: function render() {
    return React.createElement(Display, {
      items: [{
        title: 'Title1 Default',
        component: React.createElement(Typography, {
          type: "title1"
        }, "Title1 text")
      }, {
        title: 'With regular font weight',
        component: React.createElement(Typography, {
          type: "title1",
          weight: "regular"
        }, "Title1 text")
      }, {
        title: 'With bold font weight',
        component: React.createElement(Typography, {
          type: "title1",
          weight: "bold"
        }, "Title1 text")
      }]
    });
  }
};
export var Title2 = {
  render: function render() {
    return React.createElement(Display, {
      items: [{
        title: 'Title2 Default',
        component: React.createElement(Typography, {
          type: "title2"
        }, "Title2 text")
      }, {
        title: 'With regular font weight',
        component: React.createElement(Typography, {
          type: "title2",
          weight: "regular"
        }, "Title2 text")
      }, {
        title: 'With bold font weight',
        component: React.createElement(Typography, {
          type: "title2",
          weight: "bold"
        }, "Title2 text")
      }]
    });
  }
};
export var Title3 = {
  render: function render() {
    return React.createElement(Display, {
      items: [{
        title: 'Title3 Default',
        component: React.createElement(Typography, {
          type: "title3"
        }, "Title3 text")
      }, {
        title: 'With regular font weight',
        component: React.createElement(Typography, {
          type: "title3",
          weight: "regular"
        }, "Title3 text")
      }, {
        title: 'With bold font weight',
        component: React.createElement(Typography, {
          type: "title3",
          weight: "bold"
        }, "Title3 text")
      }]
    });
  }
};
export var Hero = function Hero() {
  return React.createElement(Display, {
    items: [{
      title: 'Hero Default',
      component: React.createElement(Typography, {
        type: "hero"
      }, "Hero text")
    }, {
      title: 'With bold font weight',
      component: React.createElement(Typography, {
        type: "hero",
        weight: "bold"
      }, "Hero text")
    }]
  });
};
export var AriaAttributes = {
  render: function render() {
    return React.createElement(Display, {
      items: [{
        title: 'with aria-hidden',
        component: React.createElement(Typography, {
          "aria-hidden": true
        }, "I'm hidden")
      }]
    });
  }
};
export var Colors = function Colors() {
  return React.createElement(Display, {
    items: [{
      title: 'Default',
      component: React.createElement(Typography, {
        type: "primary"
      }, "Default")
    }, {
      title: 'Color: neutral.text_default',
      component: React.createElement(Typography, {
        type: "primary",
        color: function color(t) {
          return t.colorTokens.neutral.text_default;
        }
      }, "Text")
    }, {
      title: 'Color: positive.text_default',
      component: React.createElement(Typography, {
        type: "primary",
        color: function color(t) {
          return t.colorTokens.positive.text_default;
        }
      }, "Positive")
    }, {
      title: 'Color: negative.text_default',
      component: React.createElement(Typography, {
        type: "primary",
        color: function color(t) {
          return t.colorTokens.negative.text_default;
        }
      }, "Negative")
    }, {
      title: 'Color: warning.text_default',
      component: React.createElement(Typography, {
        type: "primary",
        color: function color(t) {
          return t.colorTokens.warning.text_default;
        }
      }, "Warning")
    }, {
      title: 'Color: action.text_default',
      component: React.createElement(Typography, {
        type: "primary",
        color: function color(t) {
          return t.colorTokens.action.text_default;
        }
      }, "CTA")
    }, {
      title: 'Color: neutral.text_weak',
      component: React.createElement(Typography, {
        type: "primary",
        color: function color(t) {
          return t.colorTokens.neutral.text_weak;
        }
      }, "Label")
    }]
  });
};
export var TextAlign = function TextAlign() {
  return React.createElement(Flexbox, {
    container: true,
    direction: "column"
  }, React.createElement(Typography, {
    type: "primary"
  }, "Default"), React.createElement(Typography, {
    type: "primary",
    textAlign: "center"
  }, "Text align center"), React.createElement(Typography, {
    type: "primary",
    textAlign: "right"
  }, "Text align right"));
};
export var WhiteSpace = {
  args: {
    type: 'primary',
    whiteSpace: 'normal',
    children: 'This text \nshould have \nline breaks.'
  }
};