Skip to content

Commit 7a6d3a5

Browse files
JulianCataldoJulianCataldo
committed
feat: add components for all ui libraries packages
1 parent fc247f6 commit 7a6d3a5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+2165
-0
lines changed

‎packages/carbon/src/widgets/_all.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.theme-carbon {
2+
font-family: var(--cds-font-sans);
3+
font-size: 16px;
4+
}
5+
6+
// @use '@carbon/styles/scss/reset';
7+
// @use '@carbon/styles/scss/theme';
8+
// @use '@carbon/styles/scss/themes';
9+
10+
// :root {
11+
// @include theme.theme(themes.$white);
12+
// background-color: var(--cds-background);
13+
// color: var(--cds-text-primary);
14+
// }
15+
16+
// @use '@carbon/styles/scss/reset';
17+
// @use '@carbon/styles/scss/theme';
18+
// @use '@carbon/styles/scss/themes';
19+
// @use '@carbon/styles/scss/fonts';
20+
21+
// .theme-carbon {
22+
// --cds-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
23+
24+
// @include theme.theme(themes.$g100);
25+
// background-color: var(--cds-background);
26+
// color: var(--cds-text-primary);
27+
// }
28+
29+
// background-color: var(--cds-background);
30+
// color: var(--cds-text-primary);
31+
32+
// @use '@carbon/styles/scss/reset';
33+
// @use '@carbon/styles/scss/theme';
34+
// @use '@carbon/styles/scss/themes';
35+
// // @use '@carbon/styles/scss/fonts';
36+
37+
// // @import '@carbon/type/scss/type';
38+
// // @import '@carbon/type/scss/font-face/mono';
39+
// // @import '@carbon/type/scss/font-face/sans';
40+
41+
// // @include carbon--type-reset();
42+
// // @include carbon--font-face-mono();
43+
// // @include carbon--font-face-sans();
44+
45+
// @import '@carbon/type/scss/font-face/sans';
46+
47+
// @include carbon--font-face-sans();

‎packages/carbon/src/widgets/number.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { html } from 'lit';
2+
import { ifDefined } from 'lit/directives/if-defined.js';
3+
4+
import type { Widgets } from '@j_c/jsfe__types';
5+
6+
import '@carbon/web-components/es/components/number-input/index.js';
7+
import type CDSTextInput from '@carbon/web-components/es/components/number-input/number-input.js';
8+
9+
export const number: Widgets['number'] = (options) => html`
10+
<cds-number-input
11+
.supportingText=${options.helpText}
12+
.id=${options.id}
13+
.label=${options.label}
14+
step=${typeof options.step === 'number' ? options.step : 0.1}
15+
min=${ifDefined(options.min)}
16+
max=${ifDefined(options.max)}
17+
.name=${options.id}
18+
.placeholder=${options.placeholder}
19+
.required=${options.required}
20+
value=${ifDefined(options.value) /* keep-sorted end */}
21+
@input=${(event: CustomEvent) => {
22+
const { valueAsNumber: newValue } = event.target as CDSTextInput;
23+
options.valueChangedCallback?.(newValue);
24+
}}
25+
@keydown=${options.handleKeydown}
26+
>
27+
<style>
28+
md-outlined-text-field {
29+
width: 100%;
30+
}
31+
</style>
32+
</cds-number-input>
33+
`;

‎packages/carbon/src/widgets/object.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.theme-carbon.widget-object {
2+
.widget-object__children {
3+
position: relative;
4+
display: flex;
5+
flex-direction: column;
6+
gap: 2em 0;
7+
padding: 1.5em 1em;
8+
}
9+
// margin: 0;
10+
// font-weight: 300;
11+
// border: none;
12+
// // border: 1px solid transparent;
13+
// border-radius: 1rem;
14+
// transition-timing-function: ease-in-out;
15+
// transition-duration: 250ms;
16+
17+
// legend {
18+
// width: 100%;
19+
// font-size: 1.5em;
20+
// border-bottom: 1px solid ///;
21+
// }
22+
23+
.widget-object__description {
24+
margin: 1rem 0 0rem 0;
25+
opacity: calc(3 / 4);
26+
font-size: var(--cds-label-02-font-size);
27+
}
28+
}

‎packages/carbon/src/widgets/object.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { nothing, html } from 'lit';
2+
import type { Widgets } from '@j_c/jsfe__types';
3+
4+
import '@carbon/web-components/es/components/form-group/index.js';
5+
import '@carbon/web-components/es/components/stack/index.js';
6+
7+
export const object: Widgets['object'] = (options) => html`
8+
<cds-form-group
9+
.legendText=${options.label ?? ''}
10+
id=${options.id}
11+
class="theme-carbon widget-object"
12+
part="widget-object"
13+
>
14+
<!-- .message=${true}
15+
.messageText=$ {options.helpText} -->
16+
<!-- -->
17+
${options.helpText
18+
? html`<div class="widget-object__description">${options.helpText}</div>`
19+
: nothing}
20+
<div class="widget-object__children">${options.children}</div>
21+
</cds-form-group>
22+
`;

‎packages/carbon/src/widgets/submit.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.theme-carbon.widget-submit {
2+
display: flex;
3+
justify-content: center;
4+
margin: 2.5rem 0;
5+
font-size: 4em;
6+
}

‎packages/carbon/src/widgets/submit.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { html } from 'lit';
2+
3+
import type { Widgets } from '@j_c/jsfe__types';
4+
5+
import '@carbon/web-components/es/components/button/index.js';
6+
7+
export const submit: Widgets['submit'] = (options) => html`
8+
<!-- -->
9+
<div id=${options.id} class="theme-carbon widget-submit">
10+
<cds-button type="submit" isExpressive size="lg">Submit</cds-button>
11+
</div>
12+
`;

‎packages/carbon/src/widgets/text.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.theme-carbon.widget-text {
2+
//
3+
}

‎packages/carbon/src/widgets/text.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { html } from 'lit';
2+
import { ifDefined } from 'lit/directives/if-defined.js';
3+
4+
import type { Widgets } from '@j_c/jsfe__types';
5+
6+
import '@carbon/web-components/es/components/text-input/index.js';
7+
import type CDSTextInput from '@carbon/web-components/es/components/text-input/text-input.js';
8+
9+
export const text: Widgets['text'] = (options) => html`
10+
<cds-text-input
11+
class="theme-carbon widget-text"
12+
.type=${'text' /* keep-sorted start */}
13+
.helperText=${options.helpText ?? ''}
14+
.id=${options.id}
15+
.label=${options.label ?? ''}
16+
maxCount=${ifDefined(options.maxLength)}
17+
minCount=${ifDefined(options.minLength)}
18+
.name=${options.id}
19+
.enableCounter=${true}
20+
pattern=${ifDefined(options.pattern)}
21+
.placeholder=${options.placeholder ?? ''}
22+
.required=${options.required ?? false}
23+
.value=${options.value ?? '' /* keep-sorted end */}
24+
@input=${(event: CustomEvent) => {
25+
const { value: newValue } = event.target as CDSTextInput;
26+
options.valueChangedCallback?.(newValue);
27+
}}
28+
@keydown=${options.handleKeydown}
29+
>
30+
</cds-text-input>
31+
`;

‎packages/carbon/src/widgets/textarea.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { html } from 'lit';
2+
import { ifDefined } from 'lit/directives/if-defined.js';
3+
4+
import type { Widgets } from '@j_c/jsfe__types';
5+
6+
import '@carbon/web-components/es/components/textarea/index.js';
7+
import type CDSTextArea from '@carbon/web-components/es/components/textarea/textarea.js';
8+
9+
export const textarea: Widgets['text'] = (options) => html`
10+
<cds-textarea
11+
class="theme-carbon widget-textarea"
12+
.type=${'text'}
13+
.helperText=${options.helpText ?? ''}
14+
.id=${options.id}
15+
.label=${options.label ?? ''}
16+
maxLength=${ifDefined(options.maxLength)}
17+
minLength=${ifDefined(options.minLength)}
18+
.name=${options.id}
19+
pattern=${ifDefined(options.pattern)}
20+
.placeholder=${options.placeholder ?? ''}
21+
.required=${options.required ?? false}
22+
.value=${options.value ?? ''}
23+
@input=${(event: CustomEvent) => {
24+
const { value: newValue } = event.target as CDSTextArea;
25+
options.valueChangedCallback?.(newValue);
26+
}}
27+
@keydown=${options.handleKeydown}
28+
>
29+
</cds-textarea>
30+
`;

‎packages/material/src/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
@import './widgets/_all.scss';
33
@import './widgets/callout.scss';
44
@import './widgets/object.scss';
5+
@import './widgets/range.scss';
56
@import './widgets/submit.scss';
67
// keep-sorted end

0 commit comments

Comments
 (0)