now-design-atoms/dist/icon/Icon.stories.js

Atomic UI components for now-design.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.Spinning = exports.MixedUsage = exports.Disabled = exports.DirectValues = exports.Default = exports.CustomSizeColor = exports.AllDirections = void 0;
var _react = _interopRequireDefault(require("react"));
var _Icon = _interopRequireDefault(require("./Icon"));
var _nowDesignIcons = require("now-design-icons");
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/Icon',
  component: _Icon["default"],
  parameters: {
    docs: {
      description: {
        component: 'A universal icon atom supporting tokens, accessibility, and all icon use cases. Now supports both token names and direct values for size and color.'
      }
    }
  },
  argTypes: {
    icon: {
      control: false,
      description: 'Icon component to render (required)'
    },
    color: {
      control: 'text',
      description: 'Token name or direct color value (e.g., icon-primary, #FF0000, rgb(255,0,0))'
    },
    size: {
      control: 'text',
      description: 'Token name or direct size value (e.g., icon-md, 24, 32px)'
    },
    ariaLabel: {
      control: 'text',
      description: 'Accessibility label for screen readers'
    },
    title: {
      control: 'text',
      description: 'Tooltip or accessible title'
    },
    className: {
      control: 'text'
    },
    style: {
      control: 'object'
    },
    onClick: {
      action: 'clicked'
    },
    tabIndex: {
      control: 'number'
    },
    role: {
      control: 'text'
    },
    spin: {
      control: 'boolean'
    },
    disabled: {
      control: 'boolean'
    },
    direction: {
      control: 'select',
      options: ['up', 'right', 'down', 'left', undefined]
    },
    strokeWidth: {
      control: 'text'
    },
    fill: {
      control: 'text'
    },
    focusable: {
      control: 'boolean'
    }
  }
};
var Template = function Template(args) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], _objectSpread({}, args));
};
var Default = exports.Default = Template.bind({});
Default.args = {
  icon: _nowDesignIcons.SystemAddFill,
  color: 'icon-primary',
  size: 'icon-md',
  ariaLabel: 'Add'
};
var AllDirections = exports.AllDirections = function AllDirections() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      display: 'flex',
      gap: 24
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.WeatherSunLine,
      direction: "up",
      ariaLabel: "Up"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.WeatherSunLine,
      direction: "right",
      ariaLabel: "Right"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.WeatherSunLine,
      direction: "down",
      ariaLabel: "Down"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.WeatherSunLine,
      direction: "left",
      ariaLabel: "Left"
    })]
  });
};
var Spinning = exports.Spinning = Template.bind({});
Spinning.args = {
  icon: _nowDesignIcons.SystemAddFill,
  spin: true,
  ariaLabel: 'Loading'
};
var Disabled = exports.Disabled = Template.bind({});
Disabled.args = {
  icon: _nowDesignIcons.SystemAddFill,
  disabled: true,
  ariaLabel: 'Disabled'
};
var CustomSizeColor = exports.CustomSizeColor = Template.bind({});
CustomSizeColor.args = {
  icon: _nowDesignIcons.SystemAddFill,
  color: 'icon-danger',
  size: '32px',
  ariaLabel: 'Danger'
};
var DirectValues = exports.DirectValues = function DirectValues() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      display: 'flex',
      gap: 16,
      alignItems: 'center'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.SystemAddFill,
      size: 16,
      color: "#FF0000",
      ariaLabel: "Small red"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.SystemAddFill,
      size: 24,
      color: "rgb(0,255,0)",
      ariaLabel: "Medium green"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.SystemAddFill,
      size: 32,
      color: "#0000FF",
      ariaLabel: "Large blue"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.SystemAddFill,
      size: 48,
      color: "hsl(60,100%,50%)",
      ariaLabel: "Extra large yellow"
    })]
  });
};
var MixedUsage = exports.MixedUsage = function MixedUsage() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    style: {
      display: 'flex',
      gap: 16,
      alignItems: 'center'
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.WeatherSunLine,
      size: "icon-sm",
      color: "icon-primary",
      ariaLabel: "Token size and color"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.WeatherSunLine,
      size: 20,
      color: "icon-success",
      ariaLabel: "Direct size, token color"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.WeatherSunLine,
      size: "24px",
      color: "#FF6B35",
      ariaLabel: "Direct size and color"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
      icon: _nowDesignIcons.WeatherSunLine,
      size: "icon-lg",
      color: "#8B5CF6",
      ariaLabel: "Token size, direct color"
    })]
  });
};