"use strict";

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