@caseparts-org/caseblocks 0.0.7 → 0.0.9

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 (8) hide show
  1. package/README.md +16 -1
  2. package/dist/assets/ChipSelector.css +1 -1
  3. package/dist/assets/ToggleView.css +1 -1
  4. package/dist/molecules/ToggleView/ToggleView.js +12 -12
  5. package/dist/molecules/ToggleView/ToggleView.stories.js +1 -1
  6. package/dist/organisms/ChipSelector/ChipSelector.js +9 -9
  7. package/dist/organisms/ChipSelector/ChipSelector.stories.js +24 -7
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -43,4 +43,19 @@ button {
43
43
  }
44
44
  ```
45
45
 
46
- CSS IntelliSense: Use an extension like 'CSS Variable Autocomplete' for better IntelliSense and easier access to design tokens.
46
+ ### CSS Variable Autocomplete
47
+
48
+ 1. Install `CSS Variable Autocomplete` vs code extension
49
+ 2. Go to VS Code settings (Ctrl + ,)
50
+ 3. Look for a setting like "Css Variables: Lookup Files" or similar
51
+ 4. Add the path to your tokens.css file
52
+
53
+ ```json
54
+ {
55
+ "cssVariables.lookupFiles": [
56
+ "node_modules/@caseparts-org/caseblocks/dist/styles/tokens.css"
57
+ ]
58
+ }
59
+ ```
60
+
61
+ ![CSS Variable Autocomplete in action](./assets/css-autocomplete.png)
package/dist/assets/ChipSelector.css CHANGED
@@ -1 +1 @@
1
- ._chipSelector_1k7dl_1{column-gap:var(--spacing-1);row-gap:var(--spacing-0-75);flex-wrap:wrap}
1
+ ._chipSelector_butnu_1{column-gap:var(--spacing-0-5);row-gap:var(--spacing-0-5);flex-wrap:wrap}
package/dist/assets/ToggleView.css CHANGED
@@ -1 +1 @@
1
- ._toggleView_1qbhe_1{flex-wrap:wrap}._toggleOption_1qbhe_5{border:none;padding:var(--spacing-0-25) var(--spacing-1);gap:var(--spacing-0-125);cursor:pointer;border:1px solid var(--border-border-primary)}._toggleOption_1qbhe_5._selected_1qbhe_13{color:var(--text-text-invert);border:1px solid var(--color-brand-primary-primary-teal-blue);background-color:var(--color-brand-primary-primary-teal-blue)}._toggleOption_1qbhe_5._selected_1qbhe_13 path{fill:var(--icons-icon-invert)}
1
+ ._toggleView_1voum_1{flex-wrap:wrap}._toggleOption_1voum_5{border:none;padding:var(--spacing-0-125) var(--spacing-0-5);gap:var(--spacing-0-125);cursor:pointer;border-top:1px solid var(--border-border-primary);border-bottom:1px solid var(--border-border-primary)}._toggleOption_1voum_5._selected_1voum_15{color:var(--text-text-invert);border-color:var(--color-brand-primary-primary-teal-blue);background-color:var(--color-brand-primary-primary-teal-blue)}._toggleOption_1voum_5._selected_1voum_15 path{fill:var(--icons-icon-invert)}._toggleOption_1voum_5:first-child{border-left:1px solid var(--border-border-primary);border-radius:2px 0 0 2px}._toggleOption_1voum_5:last-child{border-right:1px solid var(--border-border-primary);border-radius:0 2px 2px 0}._toggleOption_1voum_5:not(:last-child){border-right:1px solid var(--border-border-primary)}._toggleOption_1voum_5._selected_1voum_15+._toggleOption_1voum_5{border-left:none}
package/dist/molecules/ToggleView/ToggleView.js CHANGED
@@ -2,18 +2,18 @@ import { jsx as e, jsxs as d } from "react/jsx-runtime";
2
2
  import g from "react";
3
3
  import { Flex as f } from "../../atoms/Flex/Flex.js";
4
4
  import { Icon as l } from "../../atoms/Icon/Icon.js";
5
- import { Text as b } from "../../atoms/Text/Text.js";
6
- import { getHideAtStyles as x } from "../../atoms/HideAt.js";
5
+ import { Text as x } from "../../atoms/Text/Text.js";
6
+ import { getHideAtStyles as O } from "../../atoms/HideAt.js";
7
7
  import { c as p } from "../../clsx-OuTLNxxd.js";
8
- import '../../assets/ToggleView.css';const O = "_toggleView_1qbhe_1", y = "_toggleOption_1qbhe_5", I = "_selected_1qbhe_13", m = {
9
- toggleView: O,
10
- toggleOption: y,
11
- selected: I
12
- }, _ = {
8
+ import '../../assets/ToggleView.css';const y = "_toggleView_1voum_1", I = "_toggleOption_1voum_5", _ = "_selected_1voum_15", m = {
9
+ toggleView: y,
10
+ toggleOption: I,
11
+ selected: _
12
+ }, T = {
13
13
  grid: "GRID",
14
14
  list: "LIST",
15
15
  table: "TABLE"
16
- }, T = {
16
+ }, b = {
17
17
  grid: /* @__PURE__ */ e(l, { iconKey: "fa-regular fa-grid-2", size: "sm" }),
18
18
  list: /* @__PURE__ */ e(l, { iconKey: "fa-regular fa-list-ul", size: "sm" }),
19
19
  table: /* @__PURE__ */ e(l, { iconKey: "fa-regular fa-table-cells", size: "sm" })
@@ -31,7 +31,7 @@ function s({
31
31
  {
32
32
  flexDirection: "row",
33
33
  alignItems: "center",
34
- className: p(m.toggleView, x(a), n),
34
+ className: p(m.toggleView, O(a), n),
35
35
  ...r,
36
36
  children: g.Children.map(o, (i) => g.isValidElement(i) ? g.cloneElement(i, {
37
37
  isSelected: i.props.id === c,
@@ -53,8 +53,8 @@ function w({
53
53
  u,
54
54
  {
55
55
  id: c,
56
- label: _[t],
57
- icon: T[t],
56
+ label: T[t],
57
+ icon: b[t],
58
58
  isSelected: n,
59
59
  onClick: o,
60
60
  ...r
@@ -87,7 +87,7 @@ function u({
87
87
  ...i,
88
88
  children: [
89
89
  n,
90
- /* @__PURE__ */ e(b, { size: "xxs", children: t })
90
+ /* @__PURE__ */ e(x, { size: "xxs", children: t })
91
91
  ]
92
92
  }
93
93
  );
package/dist/molecules/ToggleView/ToggleView.stories.js CHANGED
@@ -9,7 +9,7 @@ const l = {
9
9
  tags: ["autodocs"]
10
10
  }, r = {
11
11
  args: {
12
- selectedId: "table",
12
+ selectedId: "grid",
13
13
  onToggle: (o) => console.log(`Option ${o} selected`),
14
14
  children: [
15
15
  /* @__PURE__ */ e(t.Option, { id: "grid", variant: "grid" }, "grid"),
package/dist/organisms/ChipSelector/ChipSelector.js CHANGED
@@ -1,27 +1,27 @@
1
- import { jsx as l } from "react/jsx-runtime";
1
+ import { jsx as o } from "react/jsx-runtime";
2
2
  import { c as m } from "../../clsx-OuTLNxxd.js";
3
3
  import { getHideAtStyles as n } from "../../atoms/HideAt.js";
4
4
  import { Flex as s } from "../../atoms/Flex/Flex.js";
5
5
  import { Chip as f } from "../../molecules/Chip/Chip.js";
6
- import '../../assets/ChipSelector.css';const x = "_chipSelector_1k7dl_1", i = {
6
+ import '../../assets/ChipSelector.css';const x = "_chipSelector_butnu_1", u = {
7
7
  chipSelector: x
8
8
  };
9
9
  function g({
10
- chips: o,
10
+ chips: l,
11
11
  onChipSelect: e,
12
12
  onChipDismiss: r,
13
13
  className: a,
14
- hideAt: d,
15
- ...c
14
+ hideAt: c,
15
+ ...d
16
16
  }) {
17
- return /* @__PURE__ */ l(
17
+ return /* @__PURE__ */ o(
18
18
  s,
19
19
  {
20
20
  flexDirection: "row",
21
21
  alignItems: "center",
22
- className: m(i.chipSelector, n(d), a),
23
- ...c,
24
- children: o.map((t) => /* @__PURE__ */ l(
22
+ className: m(u.chipSelector, n(c), a),
23
+ ...d,
24
+ children: l.map((t) => /* @__PURE__ */ o(
25
25
  f,
26
26
  {
27
27
  text: t.text,
package/dist/organisms/ChipSelector/ChipSelector.stories.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as i } from "react/jsx-runtime";
2
2
  import { ChipSelector as t } from "./ChipSelector.js";
3
- const a = {
3
+ const s = {
4
4
  title: "Case Parts/Organisms/ChipSelector",
5
5
  component: t,
6
6
  parameters: {
@@ -9,17 +9,34 @@ const a = {
9
9
  },
10
10
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
11
11
  tags: ["autodocs"]
12
- }, o = {
12
+ }, c = {
13
13
  args: {
14
14
  chips: [
15
15
  { id: 1, text: "Chip 1", variant: "selectable", selected: !0 },
16
16
  { id: 2, text: "Chip 2", variant: "selectable", selected: !0 },
17
- { id: 3, text: "Chip 3", variant: "selectable", selected: !0 }
17
+ { id: 3, text: "Chip 3", variant: "selectable", selected: !0 },
18
+ { id: 4, text: "Chip 4", variant: "selectable", selected: !0 },
19
+ { id: 5, text: "Chip 5", variant: "selectable", selected: !0 },
20
+ { id: 6, text: "Chip 6", variant: "selectable", selected: !0 },
21
+ { id: 7, text: "Chip 7", variant: "selectable", selected: !0 },
22
+ { id: 8, text: "Chip 8", variant: "selectable", selected: !0 },
23
+ { id: 9, text: "Chip 9", variant: "selectable", selected: !0 },
24
+ { id: 10, text: "Chip 10", variant: "selectable", selected: !0 },
25
+ { id: 11, text: "Chip 11", variant: "selectable", selected: !0 },
26
+ { id: 12, text: "Chip 12", variant: "selectable", selected: !0 },
27
+ { id: 13, text: "Chip 13", variant: "selectable", selected: !1 },
28
+ { id: 14, text: "Chip 14", variant: "selectable", selected: !1 },
29
+ { id: 15, text: "Chip 15", variant: "selectable", selected: !1 },
30
+ { id: 16, text: "Chip 16", variant: "selectable", selected: !1 },
31
+ { id: 17, text: "Chip 17", variant: "selectable", selected: !0 },
32
+ { id: 18, text: "Chip 18", variant: "selectable", selected: !0 },
33
+ { id: 19, text: "Chip 19", variant: "selectable", selected: !1 },
34
+ { id: 20, text: "Chip 20", variant: "selectable", selected: !1 }
18
35
  ],
19
36
  onChipSelect: (e) => console.log(`Chip ${e} selected`),
20
37
  onChipDismiss: (e) => console.log(`Chip ${e} dismissed`)
21
38
  }
22
- }, c = {
39
+ }, d = {
23
40
  render: () => /* @__PURE__ */ i(
24
41
  t,
25
42
  {
@@ -45,7 +62,7 @@ const a = {
45
62
  )
46
63
  };
47
64
  export {
48
- o as AllProps,
49
- c as Variants,
50
- a as default
65
+ c as AllProps,
66
+ d as Variants,
67
+ s as default
51
68
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@caseparts-org/caseblocks",
3
3
  "private": false,
4
- "version": "0.0.7",
4
+ "version": "0.0.9",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",