cclkit4svelte 0.2.0 → 0.2.2

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/README.md +1 -1
  2. package/dist/Button.svelte +3 -0
  3. package/dist/Card.svelte +27 -3
  4. package/dist/Card.svelte.d.ts +0 -5
  5. package/dist/Table.svelte +50 -27
  6. package/dist/Table.svelte.d.ts +0 -6
  7. package/package.json +20 -16
package/README.md CHANGED
@@ -9,7 +9,7 @@ CANDY CHUPS Labのサイトで使うコンポーネントのキットです。
9
9
 
10
10
  ## Figma
11
11
 
12
- [Figma](https://www.figma.com/files/project/71337935/CCL_Component?fuid=1036675751093311196)
12
+ [Figma](https://www.figma.com/file/RWLq3IaUeF0soEH666sXQC/Common-Component?type=design&node-id=0%3A1&mode=design&t=ESVNyUtQevAFIe3o-1)
13
13
 
14
14
  ## 利用用途
15
15
 
package/dist/Button.svelte CHANGED
@@ -13,6 +13,9 @@ export let label;
13
13
  padding: 15px 45px;
14
14
  background: var(--bgColor);
15
15
  }
16
+ .buttonWrapper:hover {
17
+ cursor: pointer;
18
+ }
16
19
  .btLabel {
17
20
  flex-direction: column;
18
21
  justify-content: center;
package/dist/Card.svelte CHANGED
@@ -1,5 +1,29 @@
1
- <script>export let borderColor;
2
- export let bgColor;
1
+ <script>import { CCLPastelColor, CCLVividColor } from "./const/config";
2
+ export let borderColor;
3
+ let bodyColor;
4
+ switch (borderColor) {
5
+ case CCLVividColor.STRAWBERRY_PINK:
6
+ bodyColor = CCLPastelColor.PEACH_PINK;
7
+ break;
8
+ case CCLVividColor.PINEAPPLE_YELLOW:
9
+ bodyColor = CCLPastelColor.LEMON_YELLOW;
10
+ break;
11
+ case CCLVividColor.SODA_BLUE:
12
+ bodyColor = CCLPastelColor.SUGAR_BLUE;
13
+ break;
14
+ case CCLVividColor.MELON_GREEN:
15
+ bodyColor = CCLPastelColor.MATCHA_GREEN;
16
+ break;
17
+ case CCLVividColor.GRAPE_PURPLE:
18
+ bodyColor = CCLPastelColor.AKEBI_PURPLE;
19
+ break;
20
+ case CCLVividColor.WRAP_GREY:
21
+ bodyColor = CCLPastelColor.CLOUD_GREY;
22
+ break;
23
+ default:
24
+ bodyColor = CCLPastelColor.PEACH_PINK;
25
+ break;
26
+ }
3
27
  export let src;
4
28
  export let altText;
5
29
  export let title;
@@ -8,7 +32,7 @@ export let cardText;
8
32
 
9
33
  <div class="CardWrapper" style="--border-color: var({borderColor})">
10
34
  <img class="CardImage" src={src} alt={altText} />
11
- <div class="CardInfo" style="--background-color: var({bgColor});">
35
+ <div class="CardInfo" style="--background-color: var({bodyColor});">
12
36
  <div class="CardTextWrapper">
13
37
  <h2 class="CardTitle">{title}</h2>
14
38
  <span class="CardText">{cardText}</span>
package/dist/Card.svelte.d.ts CHANGED
@@ -6,11 +6,6 @@ declare const __propDef: {
6
6
  * @default --strawberry-pink
7
7
  * @type string
8
8
  */ borderColor: string;
9
- /**
10
- * 説明文の背景色
11
- * @default --peach-pink
12
- * @type string
13
- */ bgColor: string;
14
9
  /**
15
10
  * 画像ソース
16
11
  * @type string
package/dist/Table.svelte CHANGED
@@ -1,48 +1,71 @@
1
- <script>export let tableColor;
2
- export let subTableColor;
1
+ <script>import { CCLPastelColor, CCLVividColor } from "./const/config";
2
+ export let tableColor;
3
+ let bodyColor;
4
+ switch (tableColor) {
5
+ case CCLVividColor.STRAWBERRY_PINK:
6
+ bodyColor = CCLPastelColor.PEACH_PINK;
7
+ break;
8
+ case CCLVividColor.PINEAPPLE_YELLOW:
9
+ bodyColor = CCLPastelColor.LEMON_YELLOW;
10
+ break;
11
+ case CCLVividColor.SODA_BLUE:
12
+ bodyColor = CCLPastelColor.SUGAR_BLUE;
13
+ break;
14
+ case CCLVividColor.MELON_GREEN:
15
+ bodyColor = CCLPastelColor.MATCHA_GREEN;
16
+ break;
17
+ case CCLVividColor.GRAPE_PURPLE:
18
+ bodyColor = CCLPastelColor.AKEBI_PURPLE;
19
+ break;
20
+ case CCLVividColor.WRAP_GREY:
21
+ bodyColor = CCLPastelColor.CLOUD_GREY;
22
+ break;
23
+ default:
24
+ bodyColor = CCLPastelColor.PEACH_PINK;
25
+ break;
26
+ }
3
27
  export let dataHeader;
4
28
  export let tableData;
5
29
  </script>
6
30
 
7
31
  <!--汎用テーブル-->
8
- <table class="tableWrapper">
32
+ <table class="table-wrapper">
9
33
  <!--テーブルヘッダー-->
10
- <tr class="tableHeader" style="--bgColor: var({tableColor})">
11
- {#each dataHeader as title, index}
12
- <th>{title}</th>
13
- {/each}
14
- </tr>
15
- {#each tableData as row}
16
- <tr style="--subBgColor: var({subTableColor})">
17
- {#each row as data}
18
- <td>{data}</td>
34
+ <thead class="table-header" style="--bgColor: var({tableColor})">
35
+ <tr>
36
+ {#each dataHeader as title, index}
37
+ <th>{title}</th>
19
38
  {/each}
20
39
  </tr>
21
- {/each}
40
+ </thead>
41
+ <tbody>
42
+ {#each tableData as row}
43
+ <tr class="table-body-style" style="--table-body-color: var({bodyColor})">
44
+ {#each row as data}
45
+ <td>{data}</td>
46
+ {/each}
47
+ </tr>
48
+ {/each}
49
+ </tbody>
22
50
  </table>
23
51
 
24
52
  <style>
25
- tr {
26
- color: var(--wrap-grey);
27
- }
28
-
29
- tr:nth-child(even) {
30
- background-color: var(--subBgColor);
31
- }
32
-
33
53
  th {
34
54
  padding: 5px 60px;
35
55
  }
36
56
 
37
- td {
38
- text-align: center;
39
- }
40
-
41
- .tableWrapper {
57
+ .table-wrapper {
42
58
  border-collapse: collapse;
43
59
  }
44
- .tableHeader {
60
+ .table-header {
45
61
  background-color: var(--bgColor);
46
62
  color: #ffffff;
47
63
  }
64
+ .table-body-style {
65
+ text-align: center;
66
+ color: var(--wrap-grey);
67
+ }
68
+ .table-body-style:nth-child(odd) {
69
+ background-color: var(--table-body-color);
70
+ }
48
71
  </style>
package/dist/Table.svelte.d.ts CHANGED
@@ -7,12 +7,6 @@ declare const __propDef: {
7
7
  * @default --strawberry-pink
8
8
  * @type string
9
9
  */ tableColor: string;
10
- /**
11
- * テーブルサブカラー
12
- * CCLPasterColorの中から指定する(本当は自動調整されるようにしたい)
13
- * @default --peach-pink
14
- * @type string
15
- */ subTableColor: string;
16
10
  /**
17
11
  * テーブルのヘッダー
18
12
  * 一次元配列で自由長、
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cclkit4svelte",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "author": "reiji1020 <sk@reiji1020.info>",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -25,7 +25,8 @@
25
25
  "lint": "prettier --check . && eslint .",
26
26
  "format": "prettier --write .",
27
27
  "storybook": "storybook dev -p 6006",
28
- "build-storybook": "storybook build -o ./public/storybook"
28
+ "build-storybook": "storybook build -o ./public/storybook",
29
+ "chromatic": "chromatic"
29
30
  },
30
31
  "exports": {
31
32
  ".": {
@@ -34,22 +35,25 @@
34
35
  }
35
36
  },
36
37
  "devDependencies": {
38
+ "@chromatic-com/storybook": "^1.2.26",
37
39
  "@semantic-release/changelog": "^6.0.3",
38
40
  "@semantic-release/git": "^10.0.1",
39
- "@storybook/addon-actions": "^8.0.0",
40
- "@storybook/addon-essentials": "^8.0.0",
41
- "@storybook/addon-interactions": "^8.0.0",
42
- "@storybook/addon-links": "^8.0.0",
43
- "@storybook/addon-viewport": "^8.0.0",
44
- "@storybook/blocks": "^8.0.0",
45
- "@storybook/svelte": "^8.0.0",
46
- "@storybook/sveltekit": "^8.0.0",
47
- "@storybook/test": "^8.0.0",
41
+ "@storybook/addon-actions": "^8.0.5",
42
+ "@storybook/addon-essentials": "^8.0.5",
43
+ "@storybook/addon-interactions": "^8.0.5",
44
+ "@storybook/addon-links": "^8.0.5",
45
+ "@storybook/addon-mdx-gfm": "8.0.5",
46
+ "@storybook/addon-viewport": "^8.0.5",
47
+ "@storybook/blocks": "^8.0.5",
48
+ "@storybook/svelte": "^8.0.5",
49
+ "@storybook/sveltekit": "^8.0.5",
50
+ "@storybook/test": "^8.0.5",
48
51
  "@sveltejs/adapter-auto": "^2.1.1",
49
52
  "@sveltejs/kit": "^1.30.4",
50
53
  "@sveltejs/package": "^2.3.0",
51
54
  "@typescript-eslint/eslint-plugin": "^6.21.0",
52
55
  "@typescript-eslint/parser": "^6.21.0",
56
+ "chromatic": "^11.3.0",
53
57
  "eslint": "^8.57.0",
54
58
  "eslint-config-prettier": "^9.1.0",
55
59
  "eslint-plugin-storybook": "^0.6.15",
@@ -58,14 +62,14 @@
58
62
  "prettier-plugin-svelte": "^3.2.2",
59
63
  "react": "^18.2.0",
60
64
  "react-dom": "^18.2.0",
61
- "semantic-release": "^23.0.4",
62
- "storybook": "^8.0.0",
65
+ "semantic-release": "^23.0.6",
66
+ "storybook": "^8.0.5",
63
67
  "svelte": "^4.2.12",
64
- "svelte-check": "^3.6.7",
68
+ "svelte-check": "^3.6.9",
65
69
  "svelte2tsx": "^0.6.27",
66
70
  "tslib": "^2.6.2",
67
- "typescript": "^5.4.2",
68
- "vite": "^4.5.2"
71
+ "typescript": "^5.4.3",
72
+ "vite": "^4.5.3"
69
73
  },
70
74
  "volta": {
71
75
  "node": "20.11.1",