vipassana-design-standards 1.0.0 → 1.1.1

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.
Files changed (10) hide show
  1. package/dist/css/bootstrap5-theme.css +1 -1
  2. package/dist/css/bootstrap5-theme.css.map +1 -1
  3. package/dist/css/bootstrap5-theme.min.css +1 -1
  4. package/dist/css/bootstrap5-theme.rtl.css +1 -1
  5. package/dist/css/bootstrap5-theme.rtl.min.css +1 -1
  6. package/dist/js/helpers.js +7 -24
  7. package/dist/js/react-helpers.js +166 -0
  8. package/dist/js/react-helpers.jsx +3 -2
  9. package/package.json +11 -3
  10. package/src/stylesheets/custom-bootstrap-variables.scss +5 -0
package/dist/js/helpers.js CHANGED
@@ -24,17 +24,13 @@ function vdsAssetUrl(path, localhost = false) {
24
24
  // For localhost dev, just run vscode liveserver
25
25
  if (localhost) return `http://localhost:5500/dist/${path}`
26
26
 
27
- return `https://design-standards.dhamma.org/dist/1.0.0/${path}`
27
+ return `https://design-standards.dhamma.org/dist/1.1.1/${path}`
28
28
  }
29
29
 
30
30
  function stylesheetLinkTag(url) {
31
31
  return `<link rel="stylesheet" type="text/css" href="${url}">`
32
32
  }
33
33
 
34
- function StylesheetLinkTag({ url }) {
35
- return <link rel="stylesheet" type="text/css" href={url} />
36
- }
37
-
38
34
  export function vdsFaviconTag() {
39
35
  return `<link rel="shortcut icon" type="image/x-icon" href="https://design-standards.dhamma.org/dist/favicon.png">`
40
36
  }
@@ -71,19 +67,6 @@ export function vdsBootstrapThemeCssTag(locale, localhost = false) {
71
67
  return tags.join('')
72
68
  }
73
69
 
74
- export function VdsBootstrapThemeCssTag({ locale, localhost = false }) {
75
- locale = fixLocale(locale)
76
- const url = vdsAssetUrl(`css/bootstrap5-theme${isRtl(locale) ? '.rtl' : ''}.min.css`, localhost)
77
- return (
78
- <>
79
- <StylesheetLinkTag url={url} />
80
- {['gu', 'ja', 'km'].includes(locale) && (
81
- <StylesheetLinkTag url={vdsAssetUrl(`css/fonts-${locale}.min.css`)} />
82
- )}
83
- </>
84
- )
85
- }
86
-
87
70
  export function vdsBootstrapThemeJsTag(locale, localhost = false) {
88
71
  return javascriptIncludeTag(vdsAssetUrl('js/bootstrap5-theme.min.js', localhost))
89
72
  }
@@ -128,27 +111,27 @@ export function vdsLogo({
128
111
  }
129
112
 
130
113
  // Some icons from bootstrap icons, so all websites use the same
131
- export function vdsIconLocale() {
114
+ export function vdsIconLocale(size) {
132
115
  return `
133
- <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" viewBox="0 0 16 16">
116
+ <svg xmlns="http://www.w3.org/2000/svg" width="${size}em" height="${size}em" fill="currentColor" viewBox="0 0 16 16">
134
117
  <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"/>
135
118
  <path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"/>
136
119
  </svg>
137
120
  `
138
121
  }
139
122
 
140
- export function vdsIconAccount() {
123
+ export function vdsIconAccount(size) {
141
124
  return `
142
- <svg xmlns="http://www.w3.org/2000/svg" width="2.2em" height="2.2em" fill="currentColor" viewBox="0 0 16 16">
125
+ <svg xmlns="http://www.w3.org/2000/svg" width="${size}em" height="${size}em" fill="currentColor" viewBox="0 0 16 16">
143
126
  <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
144
127
  <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
145
128
  </svg>
146
129
  `
147
130
  }
148
131
 
149
- export function vdsIconMenu() {
132
+ export function vdsIconMenu(size) {
150
133
  return `
151
- <svg xmlns="http://www.w3.org/2000/svg" width="1.8em" height="1.8em" fill="currentColor" viewBox="0 0 16 16">
134
+ <svg xmlns="http://www.w3.org/2000/svg" width="${size}em" height="${size}em" fill="currentColor" viewBox="0 0 16 16">
152
135
  <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
153
136
  </svg>
154
137
  `
package/dist/js/react-helpers.js ADDED
@@ -0,0 +1,166 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.VdsBootstrapThemeCssTag = VdsBootstrapThemeCssTag;
7
+ exports.VdsBootstrapThemeJsTag = VdsBootstrapThemeJsTag;
8
+ exports.VdsFaviconTag = VdsFaviconTag;
9
+ exports.VdsIconAccount = VdsIconAccount;
10
+ exports.VdsIconLocale = VdsIconLocale;
11
+ exports.VdsIconMenu = VdsIconMenu;
12
+ exports.VdsLogo = VdsLogo;
13
+ exports.isRtl = isRtl;
14
+ var _i18n = _interopRequireDefault(require("./i18n.js"));
15
+ var _react = _interopRequireDefault(require("react"));
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
17
+ function fixLocale(locale) {
18
+ locale = (locale || 'en').toLowerCase();
19
+ var mapping = {
20
+ zh: 'zh-HANS',
21
+ 'zh-hans': 'zh-HANS',
22
+ 'zh-hant': 'zh-HANT',
23
+ 'zh-hant-hk': 'zh-HANT-HK',
24
+ 'zh-hk': 'zh-HANT-HK',
25
+ 'zh-cn': 'zh-HANS',
26
+ 'zh-tw': 'zh-HANT'
27
+ };
28
+ if (mapping[locale]) locale = mapping[locale]; // zh-Hans -> zh-HANS
29
+ else locale = locale.split('-')[0]; // fr-CA -> fr
30
+ return locale;
31
+ }
32
+ function isRtl(locale) {
33
+ return ['ar', 'fa', 'he'].includes(locale);
34
+ }
35
+ function vdsAssetUrl(path) {
36
+ var localhost = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
37
+ // For localhost dev, just run vscode liveserver
38
+ if (localhost) return "http://localhost:5500/dist/".concat(path);
39
+ return "https://design-standards.dhamma.org/dist/1.1.1/".concat(path);
40
+ }
41
+ function StylesheetLinkTag(_ref) {
42
+ var url = _ref.url;
43
+ return /*#__PURE__*/_react["default"].createElement("link", {
44
+ rel: "stylesheet",
45
+ type: "text/css",
46
+ href: url
47
+ });
48
+ }
49
+ function VdsFaviconTag() {
50
+ return /*#__PURE__*/_react["default"].createElement("link", {
51
+ rel: "shortcut icon",
52
+ type: "image/x-icon",
53
+ href: "https://design-standards.dhamma.org/dist/favicon.png"
54
+ });
55
+ }
56
+ function VdsBootstrapThemeCssTag(_ref2) {
57
+ var locale = _ref2.locale,
58
+ _ref2$localhost = _ref2.localhost,
59
+ localhost = _ref2$localhost === void 0 ? false : _ref2$localhost;
60
+ locale = fixLocale(locale);
61
+ var url = vdsAssetUrl("css/bootstrap5-theme".concat(isRtl(locale) ? '.rtl' : '', ".min.css"), localhost);
62
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StylesheetLinkTag, {
63
+ url: url
64
+ }), ['ar', 'fa', 'gu', 'he', 'ja', 'km', 'ko', 'or', 'si', 'ta', 'te', 'th', 'zh-HANS', 'zh-HANT', 'zh-HANT-HK'].includes(locale) && /*#__PURE__*/_react["default"].createElement(StylesheetLinkTag, {
65
+ url: vdsAssetUrl("css/fonts-".concat(locale, ".min.css"))
66
+ }));
67
+ }
68
+ function VdsBootstrapThemeJsTag(_ref3) {
69
+ var _ref3$localhost = _ref3.localhost,
70
+ localhost = _ref3$localhost === void 0 ? false : _ref3$localhost;
71
+ var url = vdsAssetUrl('js/bootstrap5-theme.min.js', localhost);
72
+ return /*#__PURE__*/_react["default"].createElement("script", {
73
+ type: "text/javascript",
74
+ src: url
75
+ });
76
+ }
77
+ function VdsLogo(_ref4) {
78
+ var locale = _ref4.locale,
79
+ _ref4$disposition = _ref4.disposition,
80
+ disposition = _ref4$disposition === void 0 ? 'default' : _ref4$disposition,
81
+ _ref4$size = _ref4.size,
82
+ size = _ref4$size === void 0 ? '17' : _ref4$size,
83
+ _ref4$tagline = _ref4.tagline,
84
+ tagline = _ref4$tagline === void 0 ? true : _ref4$tagline,
85
+ _ref4$dark = _ref4.dark,
86
+ dark = _ref4$dark === void 0 ? false : _ref4$dark;
87
+ locale = fixLocale(locale);
88
+ var trans = _i18n["default"][locale] || _i18n["default"].en;
89
+ if (disposition == 'mobile') {
90
+ disposition = 'left-two-lines';
91
+ tagline = false;
92
+ }
93
+ return /*#__PURE__*/_react["default"].createElement("div", {
94
+ className: "vipassana-logo",
95
+ "data-lang": locale,
96
+ "data-disposition": disposition,
97
+ "data-tagline": tagline,
98
+ "data-dark-mode": dark,
99
+ "data-reverse": trans.reverse,
100
+ style: {
101
+ fontSize: "".concat(size, "px")
102
+ }
103
+ }, /*#__PURE__*/_react["default"].createElement("img", {
104
+ className: "logo-wheel",
105
+ src: "https://design-standards.dhamma.org/dist/dhamma-wheel.svg"
106
+ }), /*#__PURE__*/_react["default"].createElement("div", {
107
+ className: "logo-text"
108
+ }, /*#__PURE__*/_react["default"].createElement("h1", {
109
+ className: "logo-title"
110
+ }, /*#__PURE__*/_react["default"].createElement("span", {
111
+ "data-start-with": trans.vipassana_meditation.charAt(0).toLowerCase()
112
+ }, trans.vipassana_meditation), /*#__PURE__*/_react["default"].createElement("span", {
113
+ className: "logo-space"
114
+ }, "\xA0"), /*#__PURE__*/_react["default"].createElement("span", null, trans.as_taught), /*#__PURE__*/_react["default"].createElement("span", {
115
+ className: "vipassana-as-taught"
116
+ }, trans.vipassana_as_taught)), /*#__PURE__*/_react["default"].createElement("div", {
117
+ className: "logo-subtitle"
118
+ }, trans.in_the_tradition)));
119
+ }
120
+
121
+ // Some icons from bootstrap icons, so all websites use the same
122
+ function VdsIconLocale(_ref5) {
123
+ var _ref5$size = _ref5.size,
124
+ size = _ref5$size === void 0 ? 1.2 : _ref5$size;
125
+ return /*#__PURE__*/_react["default"].createElement("svg", {
126
+ xmlns: "http://www.w3.org/2000/svg",
127
+ width: "".concat(size, "em"),
128
+ height: "".concat(size, "em"),
129
+ fill: "currentColor",
130
+ viewBox: "0 0 16 16"
131
+ }, /*#__PURE__*/_react["default"].createElement("path", {
132
+ d: "M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"
133
+ }), /*#__PURE__*/_react["default"].createElement("path", {
134
+ d: "M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"
135
+ }));
136
+ }
137
+ function VdsIconAccount(_ref6) {
138
+ var _ref6$size = _ref6.size,
139
+ size = _ref6$size === void 0 ? 2.2 : _ref6$size;
140
+ return /*#__PURE__*/_react["default"].createElement("svg", {
141
+ xmlns: "http://www.w3.org/2000/svg",
142
+ width: "".concat(size, "em"),
143
+ height: "".concat(size, "em"),
144
+ fill: "currentColor",
145
+ viewBox: "0 0 16 16"
146
+ }, /*#__PURE__*/_react["default"].createElement("path", {
147
+ d: "M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"
148
+ }), /*#__PURE__*/_react["default"].createElement("path", {
149
+ fillRule: "evenodd",
150
+ d: "M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
151
+ }));
152
+ }
153
+ function VdsIconMenu(_ref7) {
154
+ var _ref7$size = _ref7.size,
155
+ size = _ref7$size === void 0 ? 1.8 : _ref7$size;
156
+ return /*#__PURE__*/_react["default"].createElement("svg", {
157
+ xmlns: "http://www.w3.org/2000/svg",
158
+ width: "".concat(size, "em"),
159
+ height: "".concat(size, "em"),
160
+ fill: "currentColor",
161
+ viewBox: "0 0 16 16"
162
+ }, /*#__PURE__*/_react["default"].createElement("path", {
163
+ fillRule: "evenodd",
164
+ d: "M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
165
+ }));
166
+ }
package/dist/js/react-helpers.jsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import i18n from './i18n.js'
2
+ import React from 'react'
2
3
 
3
4
  function fixLocale(locale) {
4
5
  locale = (locale || 'en').toLowerCase()
@@ -16,7 +17,7 @@ function fixLocale(locale) {
16
17
  return locale
17
18
  }
18
19
 
19
- function isRtl(locale) {
20
+ export function isRtl(locale) {
20
21
  return ['ar', 'fa', 'he'].includes(locale)
21
22
  }
22
23
 
@@ -24,7 +25,7 @@ function vdsAssetUrl(path, localhost = false) {
24
25
  // For localhost dev, just run vscode liveserver
25
26
  if (localhost) return `http://localhost:5500/dist/${path}`
26
27
 
27
- return `https://design-standards.dhamma.org/dist/1.0.0/${path}`
28
+ return `https://design-standards.dhamma.org/dist/1.1.1/${path}`
28
29
  }
29
30
 
30
31
  function StylesheetLinkTag({ url }) {
package/package.json CHANGED
@@ -1,12 +1,20 @@
1
1
  {
2
2
  "name": "vipassana-design-standards",
3
- "version": "1.0.0",
3
+ "version": "1.1.1",
4
4
  "description": "Vipassana design standards materials",
5
5
  "homepage": "https://design-standards.dhamma.org",
6
6
  "author": "Dhamma Workers",
7
7
  "dependencies": {
8
8
  "@popperjs/core": "^2.9.1",
9
- "bootstrap5": "npm:bootstrap@5"
9
+ "bootstrap5": "npm:bootstrap@5.2.3"
10
+ },
11
+ "devDependencies": {
12
+ "@babel/cli": "^7.24.1",
13
+ "@babel/core": "^7.24.4",
14
+ "@babel/preset-env": "^7.24.4",
15
+ "@babel/preset-react": "^7.24.1",
16
+ "react": "^18.2.0",
17
+ "react-dom": "^18.2.0"
10
18
  },
11
19
  "files": [
12
20
  "dist/js",
@@ -24,7 +32,7 @@
24
32
  "build-css": "rm -f dist/css/* && npm run build-fonts && npm run build-logo && npm run build-sass && npm run build-rtl && npm run build-min",
25
33
  "build-js": "rm -f dist/js/* && npm run build-js-bootstrap && npm run build-js-helper",
26
34
  "build-js-bootstrap": "concat -o dist/js/bootstrap5-theme.min.js node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js src/javascripts/auto-resize.js && cp node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js.map dist/js/bootstrap5-theme.min.js.map",
27
- "build-js-helper": "cp src/javascripts/helpers.js dist/js && cp src/javascripts/react-helpers.jsx dist/js && cp src/javascripts/i18n.js dist/js && node replace-version.js",
35
+ "build-js-helper": "cp src/javascripts/helpers.js dist/js && cp src/javascripts/react-helpers.jsx dist/js && cp src/javascripts/i18n.js dist/js && node replace-version.js && npx babel dist/js/react-helpers.jsx --out-file dist/js/react-helpers.js",
28
36
  "build": "npm run build-css && npm run build-js",
29
37
  "dist": "npm run build && npm run dist-version-folder && npm publish && npm run dist-gem",
30
38
  "dist-gem": "gem build vipassana-design-standards.gemspec && gem push vipassana-design-standards-$npm_package_version.gem && rm vipassana-design-standards-$npm_package_version.gem",
package/src/stylesheets/custom-bootstrap-variables.scss CHANGED
@@ -1,3 +1,5 @@
1
+ // https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
2
+
1
3
  // Color Palette
2
4
  $blue-100: #f8f9fa; // #f8f9fa; // #ececec; // primevue #e8eaf6 //#f1eff1;
3
5
  $blue-150: #f0f2f4; //#e6e5ec;
@@ -91,6 +93,8 @@ $headings-line-height: 1.5;
91
93
  $font-weight-semibold: 500;
92
94
  $font-weight-bold: 600;
93
95
 
96
+
97
+
94
98
  $border-radius: 0.25rem;
95
99
  $border-color: $blue-200;
96
100
  $body-bg: $gold-100;
@@ -115,6 +119,7 @@ $card-cap-padding-y: 0.75rem;
115
119
  $card-border-width: 0;
116
120
 
117
121
  $accordion-padding-x: $spacer-x;
122
+ $accordion-bg: white;
118
123
 
119
124
  $list-group-item-padding-x: $spacer-x;
120
125