@mirai/ui 1.0.238 → 1.0.239
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/build/components/Slider/Slider.module.css +1 -0
- package/build/primitives/Text/Text.js +4 -2
- package/build/primitives/Text/Text.js.map +1 -1
- package/build/primitives/Text/Text.module.css +8 -0
- package/build/primitives/Text/Text.stories.js +1 -0
- package/build/primitives/Text/Text.stories.js.map +1 -1
- package/build/primitives/Text/__tests__/__snapshots__/Text.test.js.snap +10 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -313,6 +313,7 @@ A primitive for displaying text. It receives the following props:
|
|
|
313
313
|
- `accent:boolean` use theme's accent color
|
|
314
314
|
- `action:boolean` modifying font-size
|
|
315
315
|
- `bold:boolean` modifying font-weight
|
|
316
|
+
- `capitalize:boolean` capitalize the first word of a sentence
|
|
316
317
|
- `children:string`
|
|
317
318
|
- `headline:boolean` modifying font-size
|
|
318
319
|
- `level:number` assign the level of heading (1, 2, 3 or 4)
|
|
@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
|
|
|
11
11
|
var _Primitive = require("../Primitive");
|
|
12
12
|
var _helpers2 = require("./helpers");
|
|
13
13
|
var _TextModule = _interopRequireDefault(require("./Text.module.css"));
|
|
14
|
-
var _excluded = ["accent", "action", "bold", "children", "headline", "level", "lighten", "markdown", "small", "tag", "tiny", "underline", "upperCase", "wide"];
|
|
14
|
+
var _excluded = ["accent", "action", "bold", "capitalize", "children", "headline", "level", "lighten", "markdown", "small", "tag", "tiny", "underline", "upperCase", "wide"];
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
17
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -24,6 +24,7 @@ var Text = function Text(_ref) {
|
|
|
24
24
|
var accent = _ref.accent,
|
|
25
25
|
action = _ref.action,
|
|
26
26
|
bold = _ref.bold,
|
|
27
|
+
capitalize = _ref.capitalize,
|
|
27
28
|
children = _ref.children,
|
|
28
29
|
headline = _ref.headline,
|
|
29
30
|
_ref$level = _ref.level,
|
|
@@ -41,7 +42,7 @@ var Text = function Text(_ref) {
|
|
|
41
42
|
return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
|
|
42
43
|
role: others.role || 'text',
|
|
43
44
|
tag: tag || (headline ? "h".concat(level) : 'span'),
|
|
44
|
-
className: (0, _helpers.styles)(_TextModule.default.text, accent && _TextModule.default.accent, bold && _TextModule.default.bold, headline ? _TextModule.default["headline-".concat(level)] : action ? _TextModule.default.action : small ? _TextModule.default.small : tiny ? _TextModule.default.tiny : _TextModule.default.paragraph, lighten && _TextModule.default.lighten, underline && _TextModule.default.underline, upperCase && _TextModule.default.upperCase, wide && _TextModule.default.wide, others.className)
|
|
45
|
+
className: (0, _helpers.styles)(_TextModule.default.text, accent && _TextModule.default.accent, bold && _TextModule.default.bold, capitalize && _TextModule.default.capitalize, headline ? _TextModule.default["headline-".concat(level)] : action ? _TextModule.default.action : small ? _TextModule.default.small : tiny ? _TextModule.default.tiny : _TextModule.default.paragraph, lighten && _TextModule.default.lighten, underline && _TextModule.default.underline, upperCase && _TextModule.default.upperCase, wide && _TextModule.default.wide, others.className)
|
|
45
46
|
}), markdown ? (0, _helpers2.parseMarkdown)(children) : children);
|
|
46
47
|
};
|
|
47
48
|
exports.Text = Text;
|
|
@@ -50,6 +51,7 @@ Text.propTypes = {
|
|
|
50
51
|
accent: _propTypes.default.bool,
|
|
51
52
|
action: _propTypes.default.bool,
|
|
52
53
|
bold: _propTypes.default.bool,
|
|
54
|
+
capitalize: _propTypes.default.bool,
|
|
53
55
|
children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
|
|
54
56
|
headline: _propTypes.default.bool,
|
|
55
57
|
level: _propTypes.default.number,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","names":["Text","accent","action","bold","children","headline","level","lighten","markdown","small","tag","tiny","underline","upperCase","wide","others","React","createElement","Primitive","role","className","styles","style","text","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n accent,\n action,\n bold,\n children,\n headline,\n level = 3,\n lighten,\n markdown = true,\n small,\n tag,\n tiny,\n underline,\n upperCase,\n wide,\n ...others\n}) =>\n React.createElement(\n Primitive,\n {\n ...others,\n role: others.role || 'text',\n tag: tag || (headline ? `h${level}` : 'span'),\n className: styles(\n style.text,\n accent && style.accent,\n bold && style.bold,\n headline\n ? style[`headline-${level}`]\n : action\n ? style.action\n : small\n ? style.small\n : tiny\n ? style.tiny\n : style.paragraph,\n lighten && style.lighten,\n underline && style.underline,\n upperCase && style.upperCase,\n wide && style.wide,\n others.className,\n ),\n },\n markdown ? parseMarkdown(children) : children,\n );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n accent: PropTypes.bool,\n action: PropTypes.bool,\n bold: PropTypes.bool,\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n headline: PropTypes.bool,\n level: PropTypes.number,\n lighten: PropTypes.bool,\n markdown: PropTypes.bool,\n small: PropTypes.bool,\n tag: PropTypes.string,\n tiny: PropTypes.bool,\n underline: PropTypes.bool,\n upperCase: PropTypes.bool,\n wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IACRC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,OAAO,QAAPA,OAAO;IAAA,qBACPC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IACfC,KAAK,QAALA,KAAK;IACLC,GAAG,QAAHA,GAAG;IACHC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACDC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;IAC3BT,GAAG,EAAEA,GAAG,KAAKL,QAAQ,cAAOC,KAAK,IAAK,MAAM,CAAC;IAC7Cc,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,
|
|
1
|
+
{"version":3,"file":"Text.js","names":["Text","accent","action","bold","capitalize","children","headline","level","lighten","markdown","small","tag","tiny","underline","upperCase","wide","others","React","createElement","Primitive","role","className","styles","style","text","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n accent,\n action,\n bold,\n capitalize,\n children,\n headline,\n level = 3,\n lighten,\n markdown = true,\n small,\n tag,\n tiny,\n underline,\n upperCase,\n wide,\n ...others\n}) =>\n React.createElement(\n Primitive,\n {\n ...others,\n role: others.role || 'text',\n tag: tag || (headline ? `h${level}` : 'span'),\n className: styles(\n style.text,\n accent && style.accent,\n bold && style.bold,\n capitalize && style.capitalize,\n headline\n ? style[`headline-${level}`]\n : action\n ? style.action\n : small\n ? style.small\n : tiny\n ? style.tiny\n : style.paragraph,\n lighten && style.lighten,\n underline && style.underline,\n upperCase && style.upperCase,\n wide && style.wide,\n others.className,\n ),\n },\n markdown ? parseMarkdown(children) : children,\n );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n accent: PropTypes.bool,\n action: PropTypes.bool,\n bold: PropTypes.bool,\n capitalize: PropTypes.bool,\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n headline: PropTypes.bool,\n level: PropTypes.number,\n lighten: PropTypes.bool,\n markdown: PropTypes.bool,\n small: PropTypes.bool,\n tag: PropTypes.string,\n tiny: PropTypes.bool,\n underline: PropTypes.bool,\n upperCase: PropTypes.bool,\n wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IACRC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,OAAO,QAAPA,OAAO;IAAA,qBACPC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IACfC,KAAK,QAALA,KAAK;IACLC,GAAG,QAAHA,GAAG;IACHC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACDC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;IAC3BT,GAAG,EAAEA,GAAG,KAAKL,QAAQ,cAAOC,KAAK,IAAK,MAAM,CAAC;IAC7Cc,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVvB,MAAM,IAAIsB,mBAAK,CAACtB,MAAM,EACtBE,IAAI,IAAIoB,mBAAK,CAACpB,IAAI,EAClBC,UAAU,IAAImB,mBAAK,CAACnB,UAAU,EAC9BE,QAAQ,GACJiB,mBAAK,oBAAahB,KAAK,EAAG,GAC1BL,MAAM,GACNqB,mBAAK,CAACrB,MAAM,GACZQ,KAAK,GACLa,mBAAK,CAACb,KAAK,GACXE,IAAI,GACJW,mBAAK,CAACX,IAAI,GACVW,mBAAK,CAACE,SAAS,EACnBjB,OAAO,IAAIe,mBAAK,CAACf,OAAO,EACxBK,SAAS,IAAIU,mBAAK,CAACV,SAAS,EAC5BC,SAAS,IAAIS,mBAAK,CAACT,SAAS,EAC5BC,IAAI,IAAIQ,mBAAK,CAACR,IAAI,EAClBC,MAAM,CAACK,SAAS;EACjB,IAEHZ,QAAQ,GAAG,IAAAiB,uBAAa,EAACrB,QAAQ,CAAC,GAAGA,QAAQ,CAC9C;AAAA;AAAC;AAEJL,IAAI,CAAC2B,WAAW,GAAG,gBAAgB;AAEnC3B,IAAI,CAAC4B,SAAS,GAAG;EACf3B,MAAM,EAAE4B,kBAAS,CAACC,IAAI;EACtB5B,MAAM,EAAE2B,kBAAS,CAACC,IAAI;EACtB3B,IAAI,EAAE0B,kBAAS,CAACC,IAAI;EACpB1B,UAAU,EAAEyB,kBAAS,CAACC,IAAI;EAC1BzB,QAAQ,EAAEwB,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,MAAM,EAAEJ,kBAAS,CAACK,KAAK,CAAC,CAAC;EACpF5B,QAAQ,EAAEuB,kBAAS,CAACC,IAAI;EACxBvB,KAAK,EAAEsB,kBAAS,CAACI,MAAM;EACvBzB,OAAO,EAAEqB,kBAAS,CAACC,IAAI;EACvBrB,QAAQ,EAAEoB,kBAAS,CAACC,IAAI;EACxBpB,KAAK,EAAEmB,kBAAS,CAACC,IAAI;EACrBnB,GAAG,EAAEkB,kBAAS,CAACG,MAAM;EACrBpB,IAAI,EAAEiB,kBAAS,CAACC,IAAI;EACpBjB,SAAS,EAAEgB,kBAAS,CAACC,IAAI;EACzBhB,SAAS,EAAEe,kBAAS,CAACC,IAAI;EACzBf,IAAI,EAAEc,kBAAS,CAACC;AAClB,CAAC"}
|
|
@@ -18,6 +18,14 @@
|
|
|
18
18
|
font-weight: var(--mirai-ui-font-bold-weight);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
.capitalize {
|
|
22
|
+
text-transform: lowercase;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.capitalize::first-letter {
|
|
26
|
+
text-transform: uppercase;
|
|
27
|
+
}
|
|
28
|
+
|
|
21
29
|
.headline-1 {
|
|
22
30
|
font-size: var(--mirai-ui-font-size-headline-1);
|
|
23
31
|
line-height: var(--mirai-ui-line-height-headline-1);
|
|
@@ -28,6 +28,7 @@ Story.args = {
|
|
|
28
28
|
accent: false,
|
|
29
29
|
action: false,
|
|
30
30
|
bold: false,
|
|
31
|
+
capitalize: false,
|
|
31
32
|
children: 'children',
|
|
32
33
|
childrenMarkdown: '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',
|
|
33
34
|
headline: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","action","bold","children","headline","level","lighten","small","tag","tiny","underline","upperCase","wide","testId","style","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n <>\n <Text {...props} />\n <Text {...props} children={childrenMarkdown} />\n </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n accent: false,\n action: false,\n bold: false,\n children: 'children',\n childrenMarkdown:\n '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n headline: false,\n level: 3,\n lighten: false,\n small: false,\n tag: 'span',\n tiny: false,\n underline: false,\n upperCase: false,\n wide: false,\n // inherited properties\n testId: 'test-story',\n style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,UAAU;
|
|
1
|
+
{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","action","bold","capitalize","children","headline","level","lighten","small","tag","tiny","underline","upperCase","wide","testId","style","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n <>\n <Text {...props} />\n <Text {...props} children={childrenMarkdown} />\n </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n accent: false,\n action: false,\n bold: false,\n capitalize: false,\n children: 'children',\n childrenMarkdown:\n '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n headline: false,\n level: 3,\n lighten: false,\n small: false,\n tag: 'span',\n tiny: false,\n underline: false,\n upperCase: false,\n wide: false,\n // inherited properties\n testId: 'test-story',\n style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,UAAU;EACpBR,gBAAgB,EACd,8HAA8H;EAChIS,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,CAAC;EACRC,OAAO,EAAE,KAAK;EACdC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDpB,KAAK,CAACqB,QAAQ,GAAG,CAAC,CAAC"}
|
|
@@ -40,6 +40,16 @@ exports[`primitive:<Text> prop:bold 1`] = `
|
|
|
40
40
|
</DocumentFragment>
|
|
41
41
|
`;
|
|
42
42
|
|
|
43
|
+
exports[`primitive:<Text> prop:capitalize 1`] = `
|
|
44
|
+
<DocumentFragment>
|
|
45
|
+
<span
|
|
46
|
+
class="text capitalize paragraph"
|
|
47
|
+
>
|
|
48
|
+
Lorem Ipsum
|
|
49
|
+
</span>
|
|
50
|
+
</DocumentFragment>
|
|
51
|
+
`;
|
|
52
|
+
|
|
43
53
|
exports[`primitive:<Text> prop:headline & level:1 1`] = `
|
|
44
54
|
<DocumentFragment>
|
|
45
55
|
<h1
|