phares3757/oi-metrology
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Static Site

Browse Source
This commit is contained in:
Mike Phares
2024-06-14 16:51:30 -07:00
parent 3aed250488
commit 6737ddfb59
1706 changed files with 628 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
Static/package/dist/collection/components/progress-bar/progress-bar.css vendored Normal file
View File

@ -0,0 +1,58 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
display: flex;
width: 100%;
}
.progress-bar {
height: 16px;
bottom: 0;
right: 0;
top: 0;
left: 0;
display: flex;
height: 16px;
border-radius: 1px;
width: 100%;
overflow: hidden;
background-color: #EEEDED;
font-family: var(--ifx-font-family, sans-serif);
}
.progress-bar .label {
height: 17px;
border-radius: 1px 0px 0px 1px;
}
.progress-bar.s {
height: 4px;
}
.progress-bar .progress {
height: 100%;
background-color: #0A8276;
position: relative;
transition: width 0.2s ease;
}
.progress-bar .progress:after {
content: "";
background-color: #EEEDED;
height: 100%;
position: absolute;
}
.progress-bar .label {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
font-style: normal;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
color: #FFFFFF;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

47
Static/package/dist/collection/components/progress-bar/progress-bar.e2e.js vendored Normal file
View File

@ -0,0 +1,47 @@
import { newE2EPage } from "@stencil/core/testing";
describe('ifx-progress-bar', () => {
it('should render component', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-progress-bar></ifx-progress-bar>');
const element = await page.find('ifx-progress-bar');
expect(element).toHaveClass('hydrated');
});
it('should reflect value and label props', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-progress-bar value="70" label="Progress"></ifx-progress-bar>');
const progressBar = await page.find('ifx-progress-bar');
const value = await progressBar.getProperty('value');
const label = await progressBar.getProperty('label');
expect(value).toBe(70);
expect(label).toBe('Progress');
});
it('should show label when showLabel is true', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-progress-bar value="60"></ifx-progress-bar>');
const progressBar = await page.find('ifx-progress-bar');
await progressBar.setProperty('showLabel', true);
await page.waitForChanges();
const showLabel = await progressBar.getProperty('showLabel');
const labelElement = await page.find('ifx-progress-bar >>> .label');
expect(showLabel).toBe(true);
expect(labelElement).not.toBeNull();
});
it('should not show label when size is "s"', async () => {
const page = await newE2EPage();
await page.setContent('<ifx-progress-bar value="50" size="s" showLabel="true"></ifx-progress-bar>');
const progressBar = await page.find('ifx-progress-bar');
const size = await progressBar.getProperty('size');
const labelElement = await page.find('ifx-progress-bar >>> .label');
expect(size).toBe('s');
expect(labelElement).toBeNull();
});
it('should reflect the progress percentage in the width style of the progress bar', async () => {
const page = await newE2EPage();
await page.setContent('<div style="width: 1000px;"><ifx-progress-bar value="50"></ifx-progress-bar></div>');
const progressBar = await page.find('ifx-progress-bar >>> .progress');
const computedStyle = await progressBar.getComputedStyle();
const width = computedStyle['width'];
expect(width).toEqual('500px'); // 50% of 1000px
});
});
//# sourceMappingURL=progress-bar.e2e.js.map

1
Static/package/dist/collection/components/progress-bar/progress-bar.e2e.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"progress-bar.e2e.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-progress-bar', () => {\n it('should render component', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-progress-bar></ifx-progress-bar>');\n\n const element = await page.find('ifx-progress-bar');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should reflect value and label props', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-progress-bar value=\"70\" label=\"Progress\"></ifx-progress-bar>');\n\n const progressBar = await page.find('ifx-progress-bar');\n const value = await progressBar.getProperty('value');\n const label = await progressBar.getProperty('label');\n\n expect(value).toBe(70);\n expect(label).toBe('Progress');\n });\n\n it('should show label when showLabel is true', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-progress-bar value=\"60\"></ifx-progress-bar>');\n\n const progressBar = await page.find('ifx-progress-bar');\n await progressBar.setProperty('showLabel', true);\n await page.waitForChanges();\n\n const showLabel = await progressBar.getProperty('showLabel');\n const labelElement = await page.find('ifx-progress-bar >>> .label');\n\n expect(showLabel).toBe(true);\n expect(labelElement).not.toBeNull();\n });\n\n\n it('should not show label when size is \"s\"', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-progress-bar value=\"50\" size=\"s\" showLabel=\"true\"></ifx-progress-bar>');\n\n const progressBar = await page.find('ifx-progress-bar');\n const size = await progressBar.getProperty('size');\n\n const labelElement = await page.find('ifx-progress-bar >>> .label');\n\n expect(size).toBe('s');\n expect(labelElement).toBeNull();\n });\n\n it('should reflect the progress percentage in the width style of the progress bar', async () => {\n const page = await newE2EPage();\n await page.setContent('<div style=\"width: 1000px;\"><ifx-progress-bar value=\"50\"></ifx-progress-bar></div>');\n\n const progressBar = await page.find('ifx-progress-bar >>> .progress');\n const computedStyle = await progressBar.getComputedStyle();\n const width = computedStyle['width'];\n\n expect(width).toEqual('500px'); // 50% of 1000px\n });\n\n\n});\n"]}

120
Static/package/dist/collection/components/progress-bar/progress-bar.js vendored Normal file
View File

@ -0,0 +1,120 @@
import { h } from "@stencil/core";
export class ProgressBar {
constructor() {
this.value = 0;
this.label = '';
this.size = undefined;
this.showLabel = false;
this.internalValue = undefined;
}
valueChanged(newValue, oldValue) {
if (newValue !== oldValue) {
this.internalValue = newValue;
}
}
componentWillLoad() {
this.internalValue = this.value;
}
render() {
return (h("div", { "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && h("span", { class: "label" }, `${this.internalValue}%`))));
}
static get is() { return "ifx-progress-bar"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["progress-bar.scss"]
};
}
static get styleUrls() {
return {
"$": ["progress-bar.css"]
};
}
static get properties() {
return {
"value": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "value",
"reflect": false,
"defaultValue": "0"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "size",
"reflect": false
},
"showLabel": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "show-label",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"internalValue": {}
};
}
static get watchers() {
return [{
"propName": "value",
"methodName": "valueChanged"
}];
}
}
//# sourceMappingURL=progress-bar.js.map

1
Static/package/dist/collection/components/progress-bar/progress-bar.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOjE,MAAM,OAAO,WAAW;;iBACE,CAAC;iBACD,EAAE;;qBAEG,KAAK;;;EAKlC,YAAY,CAAC,QAAgB,EAAE,QAAgB;IAC7C,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;EAClC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,yBAAgB,gBAAgB,gBAAa,IAAI,CAAC,KAAK,EAAG,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE;MAC1F,WAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,IAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,YAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,aAAa,GAAG,CAAQ,CACzF,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true\n})\nexport class ProgressBar {\n @Prop() value: number = 0;\n @Prop() label: string = '';\n @Prop() size: string;\n @Prop() showLabel: boolean = false;\n\n @State() internalValue: number;\n\n @Watch('value')\n valueChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n render() {\n return (\n <div aria-label='a progress bar' aria-value={this.value} class={`progress-bar ${this.size}`}>\n <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\n {this.showLabel && this.size !== \"s\" && <span class=\"label\">{`${this.internalValue}%`}</span>}\n </div>\n </div>\n );\n }\n}\n"]}

47
Static/package/dist/collection/components/progress-bar/progress-bar.stories.js vendored Normal file
View File

@ -0,0 +1,47 @@
export default {
title: 'Components/Progress Bar',
tags: ['autodocs'],
args: {
size: "m",
percentage: 50,
showLabel: false,
},
argTypes: {
percentage: {
control: { type: 'range', min: 0, max: 100 },
},
size: {
description: "Size options: s (36px) and m (40px) - default: m",
options: ['s', 'm'],
control: { type: 'radio' },
},
},
};
const Template = (args) => {
const wrapper = document.createElement('div');
wrapper.innerHTML = `
<ifx-progress-bar
value="${args.percentage}"
size="${args.size}"
show-label="${args.showLabel}"
></ifx-progress-bar>
`;
return wrapper.innerHTML;
};
export const Default = Template.bind({});
Default.args = {
size: 'm',
percentage: 50,
showLabel: false,
};
export const Small = Template.bind({});
Small.args = {
percentage: 75,
size: 's',
};
export const WithLabel = Template.bind({});
WithLabel.args = {
percentage: 25,
showLabel: true,
};
//# sourceMappingURL=progress-bar.stories.js.map

1
Static/package/dist/collection/components/progress-bar/progress-bar.stories.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"progress-bar.stories.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.stories.ts"],"names":[],"mappings":"AACA,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,IAAI,EAAE,GAAG;IACT,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,KAAK;GACjB;EACD,QAAQ,EAAE;IACR,UAAU,EAAE;MACV,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;KAC7C;IACD,IAAI,EAAE;MACJ,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;MACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GACF;CACF,CAAC;AAGF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAC9C,OAAO,CAAC,SAAS,GAAG;;eAEP,IAAI,CAAC,UAAU;cAChB,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;;GAE/B,CAAC;EAEF,OAAO,OAAO,CAAC,SAAS,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;EACb,IAAI,EAAE,GAAG;EACT,UAAU,EAAE,EAAE;EACd,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,UAAU,EAAE,EAAE;EACd,IAAI,EAAE,GAAG;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;EACf,UAAU,EAAE,EAAE;EACd,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["\nexport default {\n title: 'Components/Progress Bar',\n tags: ['autodocs'],\n\n args: {\n size: \"m\",\n percentage: 50,\n showLabel: false,\n },\n argTypes: {\n percentage: {\n control: { type: 'range', min: 0, max: 100 },\n },\n size: {\n description: \"Size options: s (36px) and m (40px) - default: m\",\n options: ['s', 'm'],\n control: { type: 'radio' },\n },\n },\n};\n\n\nconst Template = (args) => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `\n <ifx-progress-bar\n value=\"${args.percentage}\"\n size=\"${args.size}\"\n show-label=\"${args.showLabel}\"\n ></ifx-progress-bar>\n `;\n\n return wrapper.innerHTML;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n size: 'm',\n percentage: 50,\n showLabel: false,\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n percentage: 75,\n size: 's',\n};\n\nexport const WithLabel = Template.bind({});\nWithLabel.args = {\n percentage: 25,\n showLabel: true,\n}; "]}