cclkit4svelte 0.1.4 → 0.1.6

package/README.md

@@ -1,4 +1,6 @@
 # ccl-component-kit4svelte
+[![Release Storybook to GitHubPages](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/storybook-release.yaml/badge.svg?branch=main)](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/storybook-release.yaml)
+[![Publish Package to npmjs](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/publish-package.yaml/badge.svg?branch=main)](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/publish-package.yaml)
 
 CANDY CHUPS Labのサイトで使うコンポーネントのキットです。
 元々Reactコンポーネントで開発していたのをSvelteに移行しました。
@@ -7,7 +9,7 @@ CANDY CHUPS Labのサイトで使うコンポーネントのキットです。
 
 ## Figma
 
-<https://www.figma.com/files/project/71337935/CCL_Component?fuid=1036675751093311196>
+https://www.figma.com/files/project/71337935/CCL_Component?fuid=1036675751093311196>
 
 ## 利用用途
 
@@ -29,14 +31,14 @@ or
 
 ## 本ライブラリの開発について
 
-コンポーネントライブラリの開発には、Node.jsのVersion18以降の環境が必要です。パッケージマネージャにはnpmを使用します。詳細なバージョンについては`package.json`に記載をしていますのでご確認ください。
+コンポーネントライブラリの開発には、Node.jsのVersion20以降の環境が必要です。パッケージマネージャにはnpmを使用します。詳細なバージョンについては`package.json`に記載をしていますのでご確認ください。
 
 Node.jsのバージョン切り替えには[Volta](https://volta.sh/)をおすすめします。
 
 ```zsh
 volta install node
 # or
-volta install node@18
+volta install node@20
 
 node -v
 #任意のNodeのバージョンが表示されればOK
@@ -65,7 +67,7 @@ Everything you need to build a Svelte project, powered by [`create-svelte`](http
 
 ## Figma
 
-<https://www.figma.com/files/project/71337935/CCL_Component?fuid=1036675751093311196>
+https://www.figma.com/files/project/71337935/CCL_Component?fuid=1036675751093311196>
 
 ## Usage
 
@@ -87,14 +89,14 @@ or
 
 ## About the development of this library
 
-The development of component libraries requires a Node.js environment with Version 18 or higher. Use npm as the package manager. Please check the `package.json` for detailed version information.
+The development of component libraries requires a Node.js environment with Version 20 or higher. Use npm as the package manager. Please check the `package.json` for detailed version information.
 
 We recommend [Volta](https://volta.sh/) for switching Node.js versions.
 
 ```zsh
 volta install node
 # or
-volta install node@18
+volta install node@20
 
 node -v
 #Once the desired Node version is displayed, it is OK.

package/dist/Button.svelte

@@ -3,7 +3,7 @@ export let label;
 </script>
 
 <!--汎用ボタン-->
-<button class="buttonWrapper" style="background: var({bgColor})"><span class="btLabel">{label}</span></button>
+<button class="buttonWrapper" style="--bgColor: var({bgColor})"><span class="btLabel">{label}</span></button>
 
 <style>
     .buttonWrapper {
@@ -11,6 +11,7 @@ export let label;
         border-radius: 50px;
         border: none;
         padding: 15px 45px;
+        background: var(--bgColor);
     }
     .btLabel {
         flex-direction: column;

package/dist/Card.svelte

@@ -0,0 +1,69 @@
+<script>export let borderColor;
+export let bgColor;
+export let src;
+export let altText;
+export let title;
+export let cardText;
+</script>
+
+<div class="CardWrapper" style="--border-color: var({borderColor})">
+    <img class="CardImage" src={src} alt={altText} />
+    <div class="CardInfo" style="--background-color: var({bgColor});">
+        <div class="CardTextWrapper">
+            <h2 class="CardTitle">{title}</h2>
+            <span class="CardText">{cardText}</span>
+        </div>
+    </div>
+</div>
+
+
+<style>
+    .CardWrapper {
+        height: 500px;
+        width: 300px;
+        position: relative;
+        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25); border-radius: 25px;
+        border: 5px solid var(--border-color);
+        z-index: -1;
+    }
+
+    .CardImage {
+        height: auto;
+        max-width: 100%;
+        top: 0;
+        position: absolute;
+        border-top-left-radius: 20px;
+        border-top-right-radius: 20px;
+    }
+
+    .CardInfo {
+        height: 195px;
+        width: 300px;
+        position: absolute;
+        background: var(--background-color);
+        top: 300px;
+        border-bottom-left-radius: 20px;
+        border-bottom-right-radius: 20px;
+        border-top: 5px solid var(--border-color);
+        z-index: 1;
+    }
+
+    .CardTextWrapper {
+        height: auto;
+        max-width: 95%;
+        position: absolute;
+        top: -5%;
+        left: 5%;
+        overflow-wrap: break-word;
+    }
+
+    .CardTitle {
+        color: var(--border-color);
+    }
+
+    .CardText {
+        color: var(--wrap-grey);
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+</style>

package/dist/Card.svelte.d.ts

@@ -0,0 +1,41 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * 枠線の色
+             * @default --strawberry-pink
+             * @type string
+             */ borderColor: string;
+        /**
+             * 説明文の背景色
+             * @default --peach-pink
+             * @type string
+             */ bgColor: string;
+        /**
+             * 画像ソース
+             * @type string
+             */ src: string;
+        /**
+             * alt属性に指定する値
+             * @type string
+             */ altText: string;
+        /**
+             * 記事の見出し
+             * @type string
+             */ title: string;
+        /**
+             * カードの詳細テキスト(140字程度推奨)
+             * @type string
+             */ cardText: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
+}
+export {};

package/dist/Footer.svelte

@@ -5,18 +5,20 @@ const year = date.getFullYear();
 
 <!--汎用フッター-->
 <footer>
-    <div class="wrapper" style="background: var({bgColor});">
+    <div class="wrapper" style="--bgColor: var({bgColor});">
         <span class="copy">Copyright © 2015-{year} CANDY CHUPS Lab. All Rights Reserved.</span>
     </div>
 </footer>
 
 <style>
+
     .wrapper {
         display: flex;
         padding: 0 298px;
         height: 30px;
         justify-content: center;
         align-items: center;
+        background: var(--bgColor);
     }
 
     .copy {

package/dist/Header.svelte

@@ -4,7 +4,7 @@ export let height;
 
 <!--汎用ヘッダー-->
 <header>
-    <div class="wrapper" style="background: var({bgColor}); height: var({height})">
+    <div class="wrapper" style="--bgColor: var({bgColor}); --height: var({height})">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 768">
             <title>CANDY CHUPS Lab.</title>
             <path class="a"
@@ -45,6 +45,8 @@ export let height;
         padding: 0 298px;
         justify-content: center;
         align-items: center;
+        background: var(--bgColor);
+        height: var(--height);
     }
 
     svg {

package/dist/Thumbnail.svelte

@@ -0,0 +1,23 @@
+<script>export let imageSize;
+export let borderColor;
+export let src;
+export let altText;
+</script>
+
+<div class="ThumbnailWrapper" style="--imageSize: {imageSize}">
+    <img src={src} alt={altText} class="Thumbnail" style="--borderColor: var({borderColor})" />
+</div>
+
+<style>
+    .ThumbnailWrapper {
+        height: var(--imageSize);
+        width: var(--imageSize);
+    }
+
+    .Thumbnail {
+        height: var(--imageSize);
+        width: var(--imageSize);
+        border-radius: 320px;
+        border: 5px solid var(--borderColor);
+    }
+</style>

package/dist/Thumbnail.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * サムネイル画像の大きさ
+             * @type number
+             */ imageSize: string;
+        /**
+             * 枠線の色
+             * @default --strawberry-pink
+             * @type string
+             */ borderColor: string;
+        /**
+             * 画像ソース
+             * @type string
+             */ src: string;
+        /**
+             * alt属性に指定する値
+             * @type string
+             */ altText: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThumbnailProps = typeof __propDef.props;
+export type ThumbnailEvents = typeof __propDef.events;
+export type ThumbnailSlots = typeof __propDef.slots;
+export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
+}
+export {};

package/dist/const/config.d.ts

@@ -7,7 +7,7 @@ export declare const CCLVividColor: {
     readonly WRAP_GREY: "--wrap-grey";
 };
 export declare const CCLPastelColor: {
-    readonly PEACH_PINK: "--peach-yellow";
+    readonly PEACH_PINK: "--peach-pink";
     readonly LEMON_YELLOW: "--lemon-yellow";
     readonly SUGAR_BLUE: "--sugar-blue";
     readonly MATCHA_GREEN: "--matcha-green";

package/dist/const/config.js

@@ -7,7 +7,7 @@ export const CCLVividColor = {
     WRAP_GREY: '--wrap-grey'
 };
 export const CCLPastelColor = {
-    PEACH_PINK: '--peach-yellow',
+    PEACH_PINK: '--peach-pink',
     LEMON_YELLOW: '--lemon-yellow',
     SUGAR_BLUE: '--sugar-blue',
     MATCHA_GREEN: '--matcha-green',

package/dist/const/variables.css

@@ -8,7 +8,7 @@
     --grape-purple: #9707DB;
     --wrap-grey: #5F5F60;
     /*Pastel*/
-    --peach-yellow: #FFB4C3;
+    --peach-pink: #FFB4C3;
     --lemon-yellow: #FFF27A;
     --sugar-blue: #AEE4FF;
     --matcha-green: #D8FF85;

package/dist/index.d.ts

@@ -2,3 +2,5 @@ import './const/variables.css';
 export { default as Header } from './Header.svelte';
 export { default as Button } from './Button.svelte';
 export { default as Footer } from './Footer.svelte';
+export { default as Thumbnail } from './Thumbnail.svelte';
+export { default as Card } from './Card.svelte';

package/dist/index.js

@@ -3,3 +3,5 @@ import './const/variables.css'; // カスタムプロパティ読み込み用
 export { default as Header } from './Header.svelte';
 export { default as Button } from './Button.svelte';
 export { default as Footer } from './Footer.svelte';
+export { default as Thumbnail } from './Thumbnail.svelte';
+export { default as Card } from './Card.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cclkit4svelte",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "author": "reiji1020 <sk@reiji1020.info>",
   "license": "MIT",
   "type": "module",
@@ -14,38 +14,6 @@
   },
   "homepage": "https://github.com/reiji1020/ccl-component-kit4svelte#readme",
   "description": "Component kit for CANDY CHUPS Lab.",
-  "release": {
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      [
-        "@semantic-release/changelog",
-        {
-          "changelogFile": "docs/CHANGELOG.md"
-        }
-      ],
-      "@semantic-release/npm",
-      [
-        "@semantic-release/git",
-        {
-          "assets": ["docs/CHANGELOG.md"]
-        }
-      ]
-    ],
-    "main": [
-      "main"
-    ]
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "vite dev",
@@ -66,8 +34,8 @@
     }
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.6.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
     "@storybook/addon-actions": "^7.6.10",
     "@storybook/addon-essentials": "^7.6.3",
     "@storybook/addon-interactions": "^7.6.3",