now-design-atoms/dist/typography/Typography.stories.js

Atomic UI components for now-design.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.LongText = exports.Interactive = exports.FontWeights = exports.Default = exports.Colors = exports.AllVariants = exports.Alignment = void 0;
var _react = _interopRequireDefault(require("react"));
var _Typography = _interopRequireDefault(require("./Typography"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var _default = exports["default"] = {
  title: 'Atoms/Typography',
  component: _Typography["default"],
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component: 'Typography component that provides consistent text styling using design tokens.'
      }
    }
  },
  argTypes: {
    variant: {
      control: {
        type: 'select'
      },
      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'body-sm', 'body-lg', 'caption', 'overline'],
      description: 'Typography variant to apply'
    },
    children: {
      control: {
        type: 'text'
      },
      description: 'Text content to display'
    },
    color: {
      control: {
        type: 'color'
      },
      description: 'Text color'
    },
    align: {
      control: {
        type: 'select'
      },
      options: ['left', 'center', 'right', 'justify'],
      description: 'Text alignment'
    },
    weight: {
      control: {
        type: 'select'
      },
      options: ['normal', 'bold', 'lighter', 'bolder'],
      description: 'Font weight'
    },
    className: {
      control: {
        type: 'text'
      },
      description: 'Additional CSS classes'
    }
  }
};
var Template = function Template(args) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], _objectSpread({}, args));
};
var Default = exports.Default = Template.bind({});
Default.args = {
  variant: 'body',
  children: 'This is default typography text'
};
var AllVariants = exports.AllVariants = function AllVariants() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: '16px',
      textAlign: 'left'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h1",
      children: "Heading 1 - Main Title"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h2",
      children: "Heading 2 - Section Title"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h3",
      children: "Heading 3 - Subsection Title"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h4",
      children: "Heading 4 - Minor Title"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h5",
      children: "Heading 5 - Small Title"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h6",
      children: "Heading 6 - Tiny Title"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "body-lg",
      children: "Body Large - Important content"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "body",
      children: "Body - Regular content"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "body-sm",
      children: "Body Small - Secondary content"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "caption",
      children: "Caption - Supporting text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "overline",
      children: "Overline - Small labels"
    })]
  });
};
var Colors = exports.Colors = function Colors() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: '16px'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h3",
      color: "#FF0000",
      children: "Red Text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h3",
      color: "#00FF00",
      children: "Green Text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h3",
      color: "#0000FF",
      children: "Blue Text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h3",
      color: "#FFA500",
      children: "Orange Text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h3",
      color: "#800080",
      children: "Purple Text"
    })]
  });
};
var Alignment = exports.Alignment = function Alignment() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: '16px',
      width: '100%'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h3",
      align: "left",
      children: "Left Aligned Text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h3",
      align: "center",
      children: "Center Aligned Text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h3",
      align: "right",
      children: "Right Aligned Text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "body",
      align: "justify",
      children: "Justified text that spreads across the full width of the container. This creates a clean, aligned appearance on both sides of the text block."
    })]
  });
};
var FontWeights = exports.FontWeights = function FontWeights() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: '16px'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "body",
      weight: "normal",
      children: "Normal Weight Text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "body",
      weight: "bold",
      children: "Bold Weight Text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "body",
      weight: "lighter",
      children: "Lighter Weight Text"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "body",
      weight: "bolder",
      children: "Bolder Weight Text"
    })]
  });
};
var Interactive = exports.Interactive = Template.bind({});
Interactive.args = {
  variant: 'body',
  children: 'Interactive typography - use controls below to change properties',
  color: '#333333',
  align: 'left',
  weight: 'normal'
};
var LongText = exports.LongText = function LongText() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      maxWidth: '600px'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "h2",
      align: "center",
      style: {
        marginBottom: '16px'
      },
      children: "Article Title"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "body",
      align: "justify",
      style: {
        marginBottom: '16px'
      },
      children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "body",
      align: "justify",
      style: {
        marginBottom: '16px'
      },
      children: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography["default"], {
      variant: "caption",
      align: "center",
      color: "#666666",
      children: "Published on July 31, 2024"
    })]
  });
};