chipsコンポーネントを追加

packages/chip/README.md

@@ -0,0 +1,13 @@
+# Inhouse Chip
+
+## Usage
+
+### Installation
+
+```bash
+$ npm install @pepabo-inhouse/chip
+
+# or
+
+$ yarn add @pepabo-inhouse/chip
+```

packages/chip/_functions.scss

@@ -0,0 +1,38 @@
+@use "sass:list";
+@use "sass:map";
+@use "@pepabo-inhouse/adapter/functions" as adapter;
+@use "./variables";
+
+@function get-border-radius($size: m) {
+  $available-sizes: adapter.get-interactive-component-height-keys();
+
+  @if list.index($available-sizes, $size) == null {
+    @error "$sizeには #{$available-sizes} のいずれかのみ指定できます";
+  }
+
+  @return adapter.get-interactive-component-height($level: $size) * 0.5;
+}
+
+@function get-horizontal-padding($size: m) {
+  @if $size == s or $size == xs {
+    @return adapter.get-spacing-size($level: xs);
+  } @else {
+    @return adapter.get-spacing-size($level: s);
+  }
+}
+
+@function get-outline($state: enabled) {
+  $available-states: adapter.get-states();
+
+  @if list.index($available-states, $state) == null {
+    @error "$stateには #{$available-states} のいずれかのみ指定できます";
+  }
+
+  $focus-ring: adapter.get-focus-ring-outline();
+
+  @if $state == focused {
+    @return $focus-ring;
+  } @else {
+    @return none;
+  }
+}

packages/chip/_functions.test.scss

@@ -0,0 +1,31 @@
+@use "sass:map";
+@use "./functions";
+@use "@gyugyu/assert-sass" as assert;
+
+@function test-get-border-radius() {
+  @return assert.equals(
+    functions.get-border-radius($size: m),
+    1.25rem
+  );
+}
+
+@function test-get-horizontal-padding-m() {
+  @return assert.equals(
+    functions.get-horizontal-padding($size: m),
+    0.75rem
+  );
+}
+
+@function test-get-horizontal-padding-s() {
+  @return assert.equals(
+    functions.get-horizontal-padding($size: s),
+    0.5rem
+  );
+}
+
+@function test-get-outline() {
+  @return assert.equals(
+    "#{functions.get-outline($state: focused)}",
+    "0.25rem solid #3e93de"
+  );
+}

packages/chip/_index.scss

@@ -0,0 +1 @@
+@forward "./mixins" show style, export;

packages/chip/_mixins.scss

@@ -0,0 +1,182 @@
+@use "sass:map";
+@use "sass:list";
+@use "@pepabo-inhouse/adapter/functions" as adapter;
+@use "@pepabo-inhouse/icon/mixins" as icon;
+@use "@pepabo-inhouse/skeleton/mixins" as skeleton;
+@use "./variables";
+@use "./functions";
+
+@mixin export {
+  .in-chip {
+    @include style;
+  }
+
+  .in-skeleton-chip {
+    @include skeleton-style;
+  }
+}
+
+// ソースコードの読みやすさを優先させて、以下のルールのlintの対象から除外する
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-duplicate-selectors */
+
+@mixin style($options: variables.$default-option) {
+  $options: map.merge(variables.$default-option, $options);
+
+  @include -proto($options);
+  @include -color-style(
+    $color: map.get($options, color),
+    $state: enabled
+  );
+  @include -state-ruleset(
+    $color: map.get($options, color)
+  );
+
+  & > * {
+    @include -child-element-style(
+      $size: map.get($options, size)
+    );
+  }
+
+  @each $color in adapter.get-semantic-intentions() {
+    &.-color-#{$color} {
+      @include -color-style(
+        $color: $color,
+        $state: enabled
+      );
+      @include -state-ruleset(
+        $color: $color
+      );
+    }
+  }
+
+  @each $size in adapter.get-interactive-component-height-keys() {
+    &.-size-#{$size} {
+      @include -size-style($size: $size);
+
+      & > * {
+        @include -child-element-style(
+          $size: $size
+        );
+      }
+    }
+  }
+}
+
+@mixin skeleton-style($options: variables.$default-option) {
+  $options: map.merge(variables.$default-option, $options);
+
+  @include skeleton.style;
+
+  width: auto;
+  height: adapter.get-interactive-component-height($level: map.get($options, size));
+  border-radius:
+    functions.get-border-radius(
+      $size: map.get($options, size)
+    );
+
+  @each $size in adapter.get-interactive-component-height-keys() {
+    &.-size-#{$size} {
+      height: adapter.get-interactive-component-height($level: $size);
+      border-radius:
+        functions.get-border-radius(
+          $size: $size
+        );
+    }
+  }
+}
+
+@mixin -proto($options) {
+  position: relative;
+  display: inline-flex;
+  gap: adapter.get-spacing-size($level: xxs);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: adapter.get-interactive-component-height($level: map.get($options, size));
+  padding: 0;
+  overflow: hidden;
+  font-size: adapter.get-font-size($level: map.get($options, size));
+  font-family: inherit;
+  line-height:
+    adapter.get-line-height(
+      $level: map.get($options, size),
+      $density: normal
+    );
+  white-space: nowrap;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  border: adapter.get-border-size($level: m) solid;
+  border-radius:
+    functions.get-border-radius(
+      $size: map.get($options, size)
+    );
+  outline: 0;
+  cursor: pointer;
+  transition: 0;
+  appearance: none;
+  user-select: none;
+}
+
+@mixin -color-style($color, $state) {
+  color: adapter.get-semantic-color($color, 800);
+  background-color: adapter.get-semantic-color($color, 100);
+  border-color: adapter.get-semantic-color($color, 300);
+  outline: functions.get-outline($state: $state);
+  outline-offset: adapter.get-focus-ring-outline-offset();
+}
+
+@mixin -state-ruleset($color) {
+  &:hover,
+  &.--hover {
+    background-color: adapter.get-semantic-color($color, 200);
+  }
+
+  &:active,
+  &.--active {
+    background-color: adapter.get-semantic-color($color, 300);
+  }
+
+  &:focus-visible,
+  &.--focused {
+    @include -color-style(
+      $color: $color,
+      $state: focused
+    );
+  }
+
+  &:disabled,
+  &.--disabled {
+    cursor: default;
+    opacity: adapter.get-disabled-surface-opacity();
+  }
+}
+
+@mixin -size-style($size) {
+  height: adapter.get-interactive-component-height($level: $size);
+  font-size: adapter.get-font-size($level: $size);
+  line-height:
+    adapter.get-line-height(
+      $level: $size,
+      $density: normal
+    );
+  border-radius:
+    functions.get-border-radius(
+      $size: $size
+    );
+}
+
+@mixin -child-element-style($size) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:first-child {
+    margin-left: functions.get-horizontal-padding($size: $size);
+  }
+
+  &:last-child {
+    margin-right: functions.get-horizontal-padding($size: $size);
+  }
+}

packages/chip/_variables.scss

@@ -0,0 +1,6 @@
+@use "@pepabo-inhouse/adapter/functions" as adapter;
+
+$default-option: (
+  color: neutral,
+  size: m,
+);

packages/chip/inhouse-chip.scss

@@ -0,0 +1,2 @@
+@use "./mixins";
+@include mixins.export;

packages/chip/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@pepabo-inhouse/chip",
+  "description": "Inhouse Components for the web chip component",
+  "version": "4.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pepabo/inhouse-components-web.git",
+    "directory": "packages/chip"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@pepabo-inhouse/adapter": "^4.0.0",
+    "@pepabo-inhouse/icon": "^4.0.0",
+    "@pepabo-inhouse/skeleton": "^4.0.0"
+  },
+  "devDependencies": {
+    "@pepabo-inhouse/constants": "^4.0.0",
+    "@pepabo-inhouse/flavor": "^4.0.0",
+    "@pepabo-inhouse/tokens": "^2.4.0"
+  }
+}

packages/components-web/inhouse-components-web.scss

@@ -6,6 +6,7 @@
 @use "@pepabo-inhouse/callout";
 @use "@pepabo-inhouse/card";
 @use "@pepabo-inhouse/checkbox";
+@use "@pepabo-inhouse/chip";
 @use "@pepabo-inhouse/container";
 @use "@pepabo-inhouse/description-list";
 @use "@pepabo-inhouse/dialog";
@@ -40,6 +41,7 @@
 @include callout.export;
 @include card.export;
 @include checkbox.export;
+@include chip.export;
 @include container.export;
 @include description-list.export;
 @include dialog.export;

packages/components-web/package.json

@@ -21,6 +21,7 @@
     "@pepabo-inhouse/card": "^4.0.0",
     "@pepabo-inhouse/cell": "^4.0.0",
     "@pepabo-inhouse/checkbox": "^4.0.0",
+    "@pepabo-inhouse/chip": "^4.0.0",
     "@pepabo-inhouse/constants": "^4.0.0",
     "@pepabo-inhouse/container": "^4.0.0",
     "@pepabo-inhouse/description-list": "^4.0.0",

packages/stories-web/src/chip.stories.tsx

@@ -0,0 +1,21 @@
+import type { StoryFn, Meta } from '@storybook/react'
+import React from 'react'
+import ChipDemo, { Props } from './components/demo/ChipDemo'
+import SkeletonChip, { Props as SkeletonChipProps } from './components/chip/SkeletonChip'
+
+export default {
+  title: 'Components/Chip',
+  component: ChipDemo
+} as Meta
+
+const Template: StoryFn<Props> = (args) => <ChipDemo {...args} />
+const SkeletonTemplate: StoryFn<SkeletonChipProps> = (args) => <SkeletonChip {...args} />
+
+export const Index = Template.bind({})
+Index.args = {}
+
+export const Skeleton = SkeletonTemplate.bind({})
+Skeleton.args = {
+  size: 'm',
+  width: '5rem'
+}