Skip to content

Commit f95ec07

Browse files
anuragxxdanuragxxd
committed
feat: code component
1 parent f46ed88 commit f95ec07

File tree

7 files changed

+125
-335
lines changed

7 files changed

+125
-335
lines changed

‎apps/documentation/components/packages/design/code/codeIndentation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const EccUtilsDesignCode = dynamic(() => import('@elixir-cloud/design/dist/react
1313
export default function Code() {
1414
return (
1515
<div>
16-
<EccUtilsDesignCode indentation={8} />
16+
<EccUtilsDesignCode />
1717
</div>
1818
);
1919
}

‎apps/documentation/components/packages/design/code/codeJSON.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const EccUtilsDesignCode = dynamic(() => import('@elixir-cloud/design/dist/react
1313
export default function Code() {
1414
return (
1515
<div>
16-
<EccUtilsDesignCode language='JSON' />
16+
<EccUtilsDesignCode language='json' />
1717
</div>
1818
);
1919
}

‎package-lock.json‎

Lines changed: 13 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ecc-utils-design/demo/code/index.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<!DOCTYPE html>
22
<html lang="en-GB">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="./logo-elixir-cloud-aai.svg" type="image/x-icon">
6-
<style></style>
7-
<title>ecc-utils-design</title>
8-
<script src="https://cdn.tailwindcss.com"></script>
9-
</head>
10-
<body>
11-
<div class="p-10">
12-
<div id="demo"></div>
13-
</div>
14-
<script type="module">
15-
import { html, render } from "lit";
16-
import "../../dist/components/code/index.js";
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="./logo-elixir-cloud-aai.svg" type="image/x-icon" />
6+
<style></style>
7+
<title>ecc-utils-design</title>
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
</head>
10+
<body>
11+
<div class="p-10">
12+
<div id="demo"></div>
13+
</div>
14+
<script type="module">
15+
import { html, render } from "lit";
16+
import "../../dist/components/code/index.js";
1717

18-
render(
19-
html`<ecc-utils-design-code> </ecc-utils-design-code> `,
20-
document.querySelector("#demo")
21-
);
22-
</script>
23-
</body>
18+
render(
19+
html`<ecc-utils-design-code> </ecc-utils-design-code> `,
20+
document.querySelector("#demo")
21+
);
22+
</script>
23+
</body>
2424
</html>

‎packages/ecc-utils-design/package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
"module": "./dist/index.mjs",
88
"types": "./dist/index.d.ts",
99
"exports": {
10-
".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
10+
".": {
11+
"types": "./dist/index.d.ts",
12+
"import": "./dist/index.js"
13+
},
1114
"./dist/custom-elements.json": "./dist/custom-elements.json",
1215
"./dist/index.js": "./dist/index.js",
1316
"./dist/components/*": "./dist/components/*",
@@ -40,10 +43,11 @@
4043
},
4144
"devDependencies": {
4245
"@custom-elements-manifest/analyzer": "^0.8.4",
46+
"@elixir-cloud/eslint-config": "*",
4347
"@lit/react": "*",
4448
"@open-wc/eslint-config": "*",
4549
"@open-wc/testing": "*",
46-
"@types/js-yaml": "^4.0.9",
50+
"@types/ace": "^0.0.52",
4751
"@types/lodash-es": "^4.17.10",
4852
"@web/dev-server": "*",
4953
"@web/dev-server-esbuild": "^0.4.3",
@@ -54,7 +58,6 @@
5458
"custom-element-vs-code-integration": "*",
5559
"esbuild": "0.18.20",
5660
"eslint": "*",
57-
"@elixir-cloud/eslint-config": "*",
5861
"eslint-plugin-prettier": "^4.2.1",
5962
"globby": "^14.0.0",
6063
"react": "*",
@@ -64,7 +67,7 @@
6467
},
6568
"dependencies": {
6669
"@shoelace-style/shoelace": "^2.8.0",
67-
"js-yaml": "^4.1.0",
70+
"ace-builds": "^1.35.0",
6871
"lit": "^2.8.0",
6972
"lodash-es": "^4.17.21"
7073
}

‎packages/ecc-utils-design/src/components/code/code.styles.ts‎

Lines changed: 36 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,46 @@
11
import { css } from "lit";
22

33
const codeStyles = css`
4-
sl-textarea::part(form-control-label) {
5-
display: flex;
6-
gap: var(--sl-spacing-x-small);
7-
}
84
#label {
5+
color: var(--ecc-input-label-color);
6+
font-size: var(--ecc-input-label-font-size-medium);
7+
font-family: var(--ecc-font-sans);
8+
font-weight: var(--ecc-input-font-weight);
9+
letter-spacing: var(--ecc-input-letter-spacing);
10+
}
11+
#editor {
12+
width: 100%;
13+
height: 12.5ex;
14+
resize: vertical;
15+
overflow: auto;
16+
font-family: var(--ecc-font-mono);
17+
background-color: var(--ecc-input-background-color);
18+
border: solid var(--ecc-input-border-width) var(--ecc-input-border-color);
19+
border-radius: var(--ecc-input-border-radius-medium);
20+
font-size: var(--ecc-input-font-size-medium);
21+
margin-top: var(--ecc-spacing-medium);
22+
margin-bottom: var(--ecc-spacing-medium);
23+
}
24+
#editor:hover {
25+
background-color: var(--ecc-input-background-color-hover);
26+
border-color: var(--ecc-input-border-color-hover);
27+
}
28+
#editor:focus {
29+
background-color: var(--ecc-input-background-color-focus);
30+
border-color: var(--ecc-input-border-color-focus);
31+
box-shadow: 0 0 0 var(--ecc-focus-ring-width)
32+
var(--ecc-input-focus-ring-color);
33+
}
34+
.disabled {
35+
background-color: var(--ecc-input-background-color-disabled);
36+
border-color: var(--ecc-input-border-color-disabled);
37+
opacity: 0.5;
38+
cursor: not-allowed !important;
39+
}
40+
.header {
941
display: flex;
1042
justify-content: space-between;
1143
align-items: center;
12-
gap: var(--sl-spacing-x-small);
1344
}
1445
`;
1546

0 commit comments

Comments
 (0)