Skip to content

addresses INK ui documentation 24d #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

addresses INK ui documentation 24d #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 28 additions & 13 deletions packages/ink-ui-src/src/format/color.ink
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,60 @@
<script>

// NEW COLOR.ink SOURCE FOR HIDING THE BOX COLOR

import StyleSet from '@stackpress/ink/dist/style/StyleSet';
import setBold from '../utilities/style/bold';
import setDisplay from '../utilities/style/display';
import setSize from '../utilities/style/size';
//extract props

// Extract props
const { value } = this.props;
//sub-props (box size, text size)
// Sub-props (box size, text size)
let { box, text } = this.propsTree;
if (!box && text !== false) {

// Only set defaults if box is undefined (not explicitly false), preserve box={false}
if (box === undefined && text !== false) {
box = {};
text = true;
}
//override default styles

// Override default styles
const styles = new StyleSet();
this.styles = () => styles.toString();
//determine display

// Determine display
const display = setDisplay(this.props, styles, 'inline-flex');
if (display === 'flex' || display === 'inline-flex') {
styles.add(':host', 'align-items', 'center');
}
//determine size

// Determine size for text
setSize(this.props, styles, false, ':host', 'font-size');
//determine font weight

// Determine font weight
setBold(this.props, styles, ':host');
//if there is box props

// If there is box props (truthy, excludes false)
if (box) {
//build box class list
// Build box class list
styles.add(':host .box', 'display', 'inline-block');
styles.add(':host .box', 'border-radius', '4px');
styles.add(':host .box', 'border', '1px solid var(--black)');
styles.add(':host .box', 'background-color', value);
//determine box class size
// Determine box class size
setSize(box, styles, '16px', '.box', 'width');
setSize(box, styles, '16px', '.box', 'height');
}
//if there is text props

// If there is text props
if (text) {
//add margin right to the box class list
styles.add(':host .box', 'margin-right', '5px');
// Add margin-right to the box class list only if box is present
if (box) {
styles.add(':host .box', 'margin-right', '5px');
}
}
</script>

<if true={box}>
<span class="box"></span>
</if>
Expand Down
6 changes: 5 additions & 1 deletion packages/ink-ui-src/src/format/country.ink
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<script>

// NEW COUNTRY.ink SOURCE FOR HIDING THE COUNTRY FLAG

import StyleSet from '@stackpress/ink/dist/style/StyleSet';
import setBold from '../utilities/style/bold';
import setColor from '../utilities/style/color';
Expand All @@ -9,7 +12,8 @@
const { value } = this.props;
//sub-props (box size, text size)
let { flag, text } = this.propsTree;
if (!flag && text !== false) {
// Only set defaults if flag is undefined (not explicitly false), preserve flag={false}
if (flag === undefined && text !== false) {
flag = {};
text = true;
}
Expand Down
35 changes: 20 additions & 15 deletions packages/ink-ui-src/src/format/currency.ink
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,52 @@
<script>

// NEW CURRENCY.ink SOURCE FOR HIDING THE CURRENCY FLAG


import StyleSet from '@stackpress/ink/dist/style/StyleSet';
import setBold from '../utilities/style/bold';
import setColor from '../utilities/style/color';
import setDisplay from '../utilities/style/display';
import setSize from '../utilities/style/size';
import intl from '../utilities/intl.json';
//extract props
// extract props
const { value } = this.props;
//sub-props (box size, text size)
// sub-props (box size, text size)
let { flag, text } = this.propsTree;
if (!flag && text !== false) {
// Only set defaults if flag is undefined (not explicitly false), preserve flag={false}
if (flag === undefined && text !== false) {
flag = {};
text = true;
}
//override default styles
// override default styles
const styles = new StyleSet();
this.styles = () => styles.toString();
//determine display
// determine display
const display = setDisplay(this.props, styles, 'inline-flex');
if (display === 'flex' || display === 'inline-flex') {
styles.add(':host', 'align-items', 'center');
}
//determine color
// determine color
setColor(this.props, styles, false, ':host', 'color');
//determine size
// determine size
setSize(this.props, styles, false, ':host', 'font-size');
//determine font weight
// determine font weight
setBold(this.props, styles, ':host');
//if there is flag props
// if there is flag props
if (flag) {
//build flag class list
// build flag class list
styles.add('img', 'display', 'inline-block');
//determine box class size
// determine box class size
setSize(flag, styles, '16px', 'img', 'height');
}
//if there is text props
// if there is text props
if (text) {
//add margin right to the box class list
// add margin right to the box class list
styles.add('img', 'margin-right', '5px');
}
//get lower case currency code
// get lower case currency code
const currency = value.toLowerCase();
//find the country currency in question
// find the country currency in question
const country = intl.find(
country => (
currency !== 'usd' && country.currencyCode.toLowerCase() === currency
Expand Down
2 changes: 1 addition & 1 deletion packages/ink-ui-src/src/format/markdown.ink
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script>
import StyleSet from '@stackpress/ink/dist/style/StyleSet';
import setDisplay from '../utilities/style/display';
import marked from 'marked';
import {marked} from 'marked';
import purify from 'dompurify';
//extract props
const { value } = this.props;
Expand Down
38 changes: 36 additions & 2 deletions packages/ink-web/src/components/html/aside.ink
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,12 +119,46 @@
</a>
</if>
<if true={url === '/docs/developer-tools.html'}>
<a class="block tx-info py-10 pl-10 tx-bold mb-100" href="/ink/docs/developer-tools.html">
<a class="block tx-info py-10 pl-10 tx-bold" href="/ink/docs/developer-tools.html">
{_('Developer Tools')}
</a>
<else />
<a class="block tx-info py-10 pl-10 mb-100" href="/ink/docs/developer-tools.html">
<a class="block tx-info py-10 pl-10" href="/ink/docs/developer-tools.html">
{_('Developer Tools')}
</a>
</if>


<h6 class="bt-1 bt-solid bt-t-1 tx-black tx-14 mb-0 mt-20 pt-20 pb-10 pl-10 tx-upper">
{_('UI')}
</h6>
<if true={url === '/ui/index.html'}>
<a class="block tx-info py-10 pl-10 tx-bold" href="/ink/ui/index.html">
{_('Components')}
</a>
<else />
<a class="block tx-info py-10 pl-10" href="/ink/ui/index.html">
{_('Components')}
</a>
</if>

<if true={url === '/ui/form/index.html'}>
<a class="block tx-info py-10 pl-10 tx-bold" href="/ink/ui/form/index.html">
{_('Forms and Fields')}
</a>
<else />
<a class="block tx-info py-10 pl-10" href="/ink/ui/form/index.html">
{_('Forms and Fields')}
</a>
</if>

<if true={url === '/ui/format/index.html'}>
<a class="block tx-info py-10 pl-10 tx-bold" href="/ink/ui/format/index.html">
{_('Formats')}
</a>
<else />
<a class="block tx-info py-10 pl-10 mb-100" href="/ink/ui/format/index.html">
{_('Formats')}
</a>
</if>
</nav>
22 changes: 11 additions & 11 deletions packages/ink-web/src/pages/500.ink
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<link rel="import" type="template" href="@/components/html/head" name="html-head" />
<link rel="import" type="template" href="@/components/html/header" name="html-header" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/table" name="table-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/table/head" name="table-head" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/table/row" name="table-row" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/table/col" name="table-col" />
<link rel="import" type="component" href="@/components/ide/app" name="ide-app" />
<link rel="import" type="component" href="@/components/ide/code" name="ide-code" />
<link rel="import" type="component" href="@/components/ide/preview" name="ide-preview" />
<link rel="import" type="component" href="@/components/i18n/translate" name="i18n-translate" />
<link rel="import" type="template" href="@/components/html/head.ink" name="html-head" />
<link rel="import" type="template" href="@/components/html/header.ink" name="html-header" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel.ink" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/table.ink" name="table-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/table/head.ink" name="table-head" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/table/row.ink" name="table-row" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/table/col.ink" name="table-col" />
<link rel="import" type="component" href="@/components/ide/app.ink" name="ide-app" />
<link rel="import" type="component" href="@/components/ide/code.ink" name="ide-code" />
<link rel="import" type="component" href="@/components/ide/preview.ink" name="ide-preview" />
<link rel="import" type="component" href="@/components/i18n/translate.ink" name="i18n-translate" />
<style>
@ink theme;
@ink reset;
Expand Down
20 changes: 10 additions & 10 deletions packages/ink-web/src/pages/docs/client-api.ink
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<link rel="import" type="template" href="@/components/html/head" name="html-head" />
<link rel="import" type="template" href="@/components/html/header" name="html-header" />
<link rel="import" type="template" href="@/components/html/aside" name="html-aside" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/alert" name="element-alert" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/icon" name="element-icon" />
<link rel="import" type="component" href="@/components/api/docs" name="api-docs" />
<link rel="import" type="component" href="@/components/api/ui" name="api-ui" />
<link rel="import" type="component" href="@/components/ide/code" name="ide-code" />
<link rel="import" type="component" href="@/components/i18n/translate" name="i18n-translate" />
<link rel="import" type="template" href="@/components/html/head.ink" name="html-head" />
<link rel="import" type="template" href="@/components/html/header.ink" name="html-header" />
<link rel="import" type="template" href="@/components/html/aside.ink" name="html-aside" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel.ink" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/alert.ink" name="element-alert" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/icon.ink" name="element-icon" />
<link rel="import" type="component" href="@/components/api/docs.ink" name="api-docs" />
<link rel="import" type="component" href="@/components/api/ui.ink" name="api-ui" />
<link rel="import" type="component" href="@/components/ide/code.ink" name="ide-code" />
<link rel="import" type="component" href="@/components/i18n/translate.ink" name="i18n-translate" />
<style>
@ink theme;
@ink reset;
Expand Down
18 changes: 9 additions & 9 deletions packages/ink-web/src/pages/docs/compiler-api.ink
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<link rel="import" type="template" href="@/components/html/head" name="html-head" />
<link rel="import" type="template" href="@/components/html/header" name="html-header" />
<link rel="import" type="template" href="@/components/html/aside" name="html-aside" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/icon" name="element-icon" />
<link rel="import" type="component" href="@/components/api/docs" name="api-docs" />
<link rel="import" type="component" href="@/components/api/ui" name="api-ui" />
<link rel="import" type="component" href="@/components/ide/code" name="ide-code" />
<link rel="import" type="component" href="@/components/i18n/translate" name="i18n-translate" />
<link rel="import" type="template" href="@/components/html/head.ink" name="html-head" />
<link rel="import" type="template" href="@/components/html/header.ink" name="html-header" />
<link rel="import" type="template" href="@/components/html/aside.ink" name="html-aside" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel.ink" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/icon.ink" name="element-icon" />
<link rel="import" type="component" href="@/components/api/docs.ink" name="api-docs" />
<link rel="import" type="component" href="@/components/api/ui.ink" name="api-ui" />
<link rel="import" type="component" href="@/components/ide/code.ink" name="ide-code" />
<link rel="import" type="component" href="@/components/i18n/translate.ink" name="i18n-translate" />
<style>
@ink theme;
@ink reset;
Expand Down
30 changes: 15 additions & 15 deletions packages/ink-web/src/pages/docs/component-publisher.ink
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<link rel="import" type="template" href="@/components/html/head" name="html-head" />
<link rel="import" type="template" href="@/components/html/header" name="html-header" />
<link rel="import" type="template" href="@/components/html/aside" name="html-aside" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/icon" name="element-icon" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/tab" name="element-tab" />
<link rel="import" type="component" href="@/components/api/docs" name="api-docs" />
<link rel="import" type="component" href="@/components/ide/app/head" name="app-head" />
<link rel="import" type="component" href="@/components/ide/app/left" name="app-left" />
<link rel="import" type="component" href="@/components/ide/app/main" name="app-main" />
<link rel="import" type="component" href="@/components/ide/app" name="ide-app" />
<link rel="import" type="component" href="@/components/ide/code" name="ide-code" />
<link rel="import" type="component" href="@/components/i18n/translate" name="i18n-translate" />
<link rel="import" type="template" href="@/components/html/head.ink" name="html-head" />
<link rel="import" type="template" href="@/components/html/header.ink" name="html-header" />
<link rel="import" type="template" href="@/components/html/aside.ink" name="html-aside" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel.ink" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/icon.ink" name="element-icon" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/tab.ink" name="element-tab" />
<link rel="import" type="component" href="@/components/api/docs.ink" name="api-docs" />
<link rel="import" type="component" href="@/components/ide/app/head.ink" name="app-head" />
<link rel="import" type="component" href="@/components/ide/app/left.ink" name="app-left" />
<link rel="import" type="component" href="@/components/ide/app/main.ink" name="app-main" />
<link rel="import" type="component" href="@/components/ide/app.ink" name="ide-app" />
<link rel="import" type="component" href="@/components/ide/code.ink" name="ide-code" />
<link rel="import" type="component" href="@/components/i18n/translate.ink" name="i18n-translate" />
<style>
@ink theme;
@ink reset;
Expand Down Expand Up @@ -168,10 +168,10 @@
"build": "ts-node ./src/build.ts"
},
"dependencies": {
"@stackpress/ink": "0.4.6"
"@stackpress/ink": "0.3.30"
},
"devDependencies": {
"@stackpress/ink-dev": "0.4.6",
"@stackpress/ink-dev": "0.3.30",
"@types/node": "22.1.0",
"ts-node": "10.9.2",
"typescript": "5.5.4"
Expand Down
30 changes: 15 additions & 15 deletions packages/ink-web/src/pages/docs/component-strategy.ink
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<link rel="import" type="template" href="@/components/html/head" name="html-head" />
<link rel="import" type="template" href="@/components/html/header" name="html-header" />
<link rel="import" type="template" href="@/components/html/aside" name="html-aside" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/alert" name="element-alert" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/icon" name="element-icon" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/tab" name="element-tab" />
<link rel="import" type="component" href="@/components/api/docs" name="api-docs" />
<link rel="import" type="component" href="@/components/api/ui" name="api-ui" />
<link rel="import" type="component" href="@/components/ide/app/head" name="app-head" />
<link rel="import" type="component" href="@/components/ide/app/left" name="app-left" />
<link rel="import" type="component" href="@/components/ide/app/main" name="app-main" />
<link rel="import" type="component" href="@/components/ide/app" name="ide-app" />
<link rel="import" type="component" href="@/components/ide/code" name="ide-code" />
<link rel="import" type="component" href="@/components/i18n/translate" name="i18n-translate" />
<link rel="import" type="template" href="@/components/html/head.ink" name="html-head" />
<link rel="import" type="template" href="@/components/html/header.ink" name="html-header" />
<link rel="import" type="template" href="@/components/html/aside.ink" name="html-aside" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel.ink" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/alert.ink" name="element-alert" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/icon.ink" name="element-icon" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/tab.ink" name="element-tab" />
<link rel="import" type="component" href="@/components/api/docs.ink" name="api-docs" />
<link rel="import" type="component" href="@/components/api/ui.ink" name="api-ui" />
<link rel="import" type="component" href="@/components/ide/app/head.ink" name="app-head" />
<link rel="import" type="component" href="@/components/ide/app/left.ink" name="app-left" />
<link rel="import" type="component" href="@/components/ide/app/main.ink" name="app-main" />
<link rel="import" type="component" href="@/components/ide/app.ink" name="ide-app" />
<link rel="import" type="component" href="@/components/ide/code.ink" name="ide-code" />
<link rel="import" type="component" href="@/components/i18n/translate.ink" name="i18n-translate" />
<style>
@ink theme;
@ink reset;
Expand Down
18 changes: 9 additions & 9 deletions packages/ink-web/src/pages/docs/developer-tools.ink
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<link rel="import" type="template" href="@/components/html/head" name="html-head" />
<link rel="import" type="template" href="@/components/html/header" name="html-header" />
<link rel="import" type="template" href="@/components/html/aside" name="html-aside" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/icon" name="element-icon" />
<link rel="import" type="component" href="@/components/api/docs" name="api-docs" />
<link rel="import" type="component" href="@/components/ide/app" name="ide-app" />
<link rel="import" type="component" href="@/components/ide/code" name="ide-code" />
<link rel="import" type="component" href="@/components/i18n/translate" name="i18n-translate" />
<link rel="import" type="template" href="@/components/html/head.ink" name="html-head" />
<link rel="import" type="template" href="@/components/html/header.ink" name="html-header" />
<link rel="import" type="template" href="@/components/html/aside.ink" name="html-aside" />
<link rel="import" type="component" href="@stackpress/ink-ui/layout/panel.ink" name="panel-layout" />
<link rel="import" type="component" href="@stackpress/ink-ui/element/icon.ink" name="element-icon" />
<link rel="import" type="component" href="@/components/api/docs.ink" name="api-docs" />
<link rel="import" type="component" href="@/components/ide/app.ink" name="ide-app" />
<link rel="import" type="component" href="@/components/ide/code.ink" name="ide-code" />
<link rel="import" type="component" href="@/components/i18n/translate.ink" name="i18n-translate" />
<style>
@ink theme;
@ink reset;
Expand Down
Loading