@kth/style 0.0.5 → 0.0.7

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 (7) hide show
  1. package/dist/cjs/components/Select.d.ts +2 -2
  2. package/dist/cjs/index.js +5 -8
  3. package/dist/esm/components/Select.d.ts +2 -2
  4. package/dist/esm/index.js +5 -8
  5. package/package.json +2 -3
  6. package/scss/components/button.scss +52 -0
  7. package/scss/components/{select.scss → form.scss} +11 -2
package/dist/cjs/components/Select.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  interface SelectProps {
3
- /** HTML form `name` */
3
+ /** Equivalent to HTML `name` */
4
4
  name: string;
5
5
  /** Label for the select */
6
6
  label: string;
@@ -11,7 +11,7 @@ interface SelectProps {
11
11
  /** Called when the select value changes */
12
12
  onChange(value: string): void;
13
13
  /** Options */
14
- children: React.ReactElement<OptionProps | OptionGroupProps> | React.ReactElement<OptionProps | OptionGroupProps>[];
14
+ children: React.ReactNode;
15
15
  }
16
16
  interface OptionProps {
17
17
  /** The value for the option */
package/dist/cjs/index.js CHANGED
@@ -107,21 +107,18 @@ function Tab({ children }) {
107
107
  return React.createElement(React.Fragment, null, children);
108
108
  }
109
109
 
110
- const SelectContext = React.createContext("");
111
110
  function Select({ name, label, description, value, onChange, children, }) {
112
111
  const id = `select-${name}`;
113
- return (React.createElement(SelectContext.Provider, { value: value },
114
- React.createElement("div", { className: "kth-select" },
115
- React.createElement("label", { htmlFor: id }, label),
116
- description && React.createElement("p", { id: `${id}-description` }, description),
117
- React.createElement("select", { id: id, "aria-describedby": description && `${id}-description`, name: name, value: value, onChange: (e) => onChange(e.target.value) }, children))));
112
+ return (React.createElement("div", { className: "kth-select" },
113
+ React.createElement("label", { htmlFor: id }, label),
114
+ description && React.createElement("p", { id: `${id}-description` }, description),
115
+ React.createElement("select", { id: id, "aria-describedby": description && `${id}-description`, name: name, value: value, onChange: (e) => onChange(e.target.value) }, children)));
118
116
  }
119
117
  function OptionGroup({ label, children }) {
120
118
  return React.createElement("optgroup", { label: label }, children);
121
119
  }
122
120
  function Option({ value, children }) {
123
- const selectedValue = React.useContext(SelectContext);
124
- return (React.createElement("option", { value: value, selected: value === selectedValue }, children));
121
+ return React.createElement("option", { value: value }, children);
125
122
  }
126
123
 
127
124
  exports.ContentTabs = ContentTabs;
package/dist/esm/components/Select.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  interface SelectProps {
3
- /** HTML form `name` */
3
+ /** Equivalent to HTML `name` */
4
4
  name: string;
5
5
  /** Label for the select */
6
6
  label: string;
@@ -11,7 +11,7 @@ interface SelectProps {
11
11
  /** Called when the select value changes */
12
12
  onChange(value: string): void;
13
13
  /** Options */
14
- children: React.ReactElement<OptionProps | OptionGroupProps> | React.ReactElement<OptionProps | OptionGroupProps>[];
14
+ children: React.ReactNode;
15
15
  }
16
16
  interface OptionProps {
17
17
  /** The value for the option */
package/dist/esm/index.js CHANGED
@@ -105,21 +105,18 @@ function Tab({ children }) {
105
105
  return React.createElement(React.Fragment, null, children);
106
106
  }
107
107
 
108
- const SelectContext = React.createContext("");
109
108
  function Select({ name, label, description, value, onChange, children, }) {
110
109
  const id = `select-${name}`;
111
- return (React.createElement(SelectContext.Provider, { value: value },
112
- React.createElement("div", { className: "kth-select" },
113
- React.createElement("label", { htmlFor: id }, label),
114
- description && React.createElement("p", { id: `${id}-description` }, description),
115
- React.createElement("select", { id: id, "aria-describedby": description && `${id}-description`, name: name, value: value, onChange: (e) => onChange(e.target.value) }, children))));
110
+ return (React.createElement("div", { className: "kth-select" },
111
+ React.createElement("label", { htmlFor: id }, label),
112
+ description && React.createElement("p", { id: `${id}-description` }, description),
113
+ React.createElement("select", { id: id, "aria-describedby": description && `${id}-description`, name: name, value: value, onChange: (e) => onChange(e.target.value) }, children)));
116
114
  }
117
115
  function OptionGroup({ label, children }) {
118
116
  return React.createElement("optgroup", { label: label }, children);
119
117
  }
120
118
  function Option({ value, children }) {
121
- const selectedValue = React.useContext(SelectContext);
122
- return (React.createElement("option", { value: value, selected: value === selectedValue }, children));
119
+ return React.createElement("option", { value: value }, children);
123
120
  }
124
121
 
125
122
  export { ContentTabs, NavigationTabs, Option, OptionGroup, Select, Tab };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kth/style",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "scripts": {
@@ -46,6 +46,5 @@
46
46
  },
47
47
  "peerDependencies": {
48
48
  "react": "*"
49
- },
50
- "gitHead": "27fc1ecc1982cbb162ddc6dbab504ced561af7d3"
49
+ }
51
50
  }
package/scss/components/button.scss ADDED
@@ -0,0 +1,52 @@
1
+ @use "../tokens/" as t;
2
+
3
+ @layer kth-style {
4
+ .kth-button {
5
+ padding-inline: var(--kth-0-clickable-padding-inline);
6
+ padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
7
+ border: 1px solid t.$color-neutral-10;
8
+ border-radius: t.$space-4;
9
+
10
+ &.primary {
11
+ font-weight: t.$font-weight-bold;
12
+ background: t.$color-primary-5;
13
+ border-color: t.$color-primary-5;
14
+ color: t.$color-neutral-0;
15
+
16
+ &:hover {
17
+ background: t.$color-primary-6;
18
+ border-color: t.$color-primary-6;
19
+ }
20
+ }
21
+ }
22
+
23
+ .kth-select,
24
+ .kth-input {
25
+ margin-block: t.$space-24;
26
+
27
+ label {
28
+ display: inline-block;
29
+ font-weight: 600;
30
+ }
31
+
32
+ p {
33
+ margin: t.$space-4 0;
34
+ }
35
+
36
+ select {
37
+ margin-top: t.$space-8;
38
+ padding-inline: var(--kth-0-clickable-padding-inline);
39
+ padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
40
+ border-radius: t.$space-4;
41
+ border: 1px solid t.$color-neutral-10;
42
+ }
43
+
44
+ input {
45
+ margin-top: t.$space-8;
46
+ padding-inline: var(--kth-0-clickable-padding-inline);
47
+ padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
48
+ border-radius: t.$space-4;
49
+ border: 1px solid t.$color-neutral-10;
50
+ }
51
+ }
52
+ }
package/scss/components/{select.scss → form.scss} RENAMED
@@ -1,7 +1,8 @@
1
1
  @use "../tokens/" as t;
2
2
 
3
3
  @layer kth-style {
4
- .kth-select {
4
+ .kth-select,
5
+ .kth-input {
5
6
  margin-block: t.$space-24;
6
7
 
7
8
  label {
@@ -18,7 +19,15 @@
18
19
  padding-inline: var(--kth-0-clickable-padding-inline);
19
20
  padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
20
21
  border-radius: t.$space-4;
21
- border-block: 1px solid t.$color-neutral-10;
22
+ border: 1px solid t.$color-neutral-10;
23
+ }
24
+
25
+ input {
26
+ margin-top: t.$space-8;
27
+ padding-inline: var(--kth-0-clickable-padding-inline);
28
+ padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
29
+ border-radius: t.$space-4;
30
+ border: 1px solid t.$color-neutral-10;
22
31
  }
23
32
  }
24
33
  }