stickerコンポーネントを追加

packages/components-web/_index.scss

@@ -28,4 +28,5 @@
 @forward "@pepabo-inhouse/table" as table-*;
 @forward "@pepabo-inhouse/textfield" as textfield-*;
 @forward "@pepabo-inhouse/snackbar" as snackbar-*;
+@forward "@pepabo-inhouse/sticker" as sticker-*;
 @forward "@pepabo-inhouse/validation-message" as validation-message-*;

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

@@ -28,6 +28,7 @@
 @use "@pepabo-inhouse/table";
 @use "@pepabo-inhouse/textfield";
 @use "@pepabo-inhouse/snackbar";
+@use "@pepabo-inhouse/sticker";
 @use "@pepabo-inhouse/validation-message";
 
 // flavor内で@import が存在しているので最初に flavor を読む
@@ -62,4 +63,5 @@
 @include table.export;
 @include textfield.export;
 @include snackbar.export;
+@include sticker.export;
 @include validation-message.export;

packages/components-web/package.json

@@ -41,6 +41,7 @@
     "@pepabo-inhouse/side-navigation": "^4.0.0",
     "@pepabo-inhouse/skeleton": "^4.0.0",
     "@pepabo-inhouse/snackbar": "^4.0.0",
+    "@pepabo-inhouse/sticker": "^4.0.0",
     "@pepabo-inhouse/tab": "^4.0.0",
     "@pepabo-inhouse/table": "^4.0.0",
     "@pepabo-inhouse/textfield": "^4.0.0",

packages/sticker/README.md

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

packages/sticker/_index.scss

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

packages/sticker/_mixins.scss

@@ -0,0 +1,137 @@
+@use "sass:map";
+@use "@pepabo-inhouse/adapter/functions" as adapter;
+@use "@pepabo-inhouse/skeleton/mixins" as skeleton;
+@use "./variables";
+
+@mixin export {
+  .in-sticker {
+    @include style;
+  }
+
+  .in-skeleton-sticker {
+    @include skeleton-style;
+  }
+}
+
+@mixin style($options: variables.$default-option) {
+  $options: map.merge(variables.$default-option, $options);
+
+  @include -proto;
+  @include -color-style(
+    $color: map.get($options, color),
+    $appearance: map.get($options, appearance)
+  );
+  @include -size-style(
+    $size: map.get($options, size)
+  );
+
+  & > * {
+    @include -child-element-style;
+  }
+
+  @each $color in adapter.get-semantic-intentions() {
+    &.-color-#{$color} {
+      @include -color-style(
+        $color: $color,
+        $appearance: map.get($options, appearance)
+      );
+
+      @each $appearance in variables.$available-appearances {
+        &.-appearance-#{$appearance} {
+          @include -color-style(
+            $color: $color,
+            $appearance: $appearance
+          );
+        }
+      }
+    }
+  }
+
+  @each $appearance in variables.$available-appearances {
+    &.-appearance-#{$appearance} {
+      @include -color-style(
+        $color: map.get($options, color),
+        $appearance: $appearance
+      );
+    }
+  }
+
+  @each $size in adapter.get-interactive-component-height-keys() {
+    &.-size-#{$size} {
+      @include -size-style($size: $size);
+    }
+  }
+}
+
+@mixin skeleton-style($options: variables.$default-option) {
+  $options: map.merge(variables.$default-option, $options);
+
+  @include skeleton.style;
+
+  display: inline-block;
+  width: auto;
+  height:
+    calc(
+      adapter.get-line-height(
+        $level: map.get($options, size),
+        $density: normal
+      ) + adapter.get-spacing-size($level: xs)
+    );
+  border-radius: 4px;
+
+  @each $size in adapter.get-interactive-component-height-keys() {
+    &.-size-#{$size} {
+      height:
+        calc(
+          adapter.get-line-height(
+            $level: $size,
+            $density: normal
+          ) + adapter.get-spacing-size($level: xs)
+        );
+    }
+  }
+}
+
+@mixin -proto {
+  display: inline-flex;
+  gap: adapter.get-spacing-size($level: xxs);
+  align-items: center;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+@mixin -child-element-style {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin -color-style($color, $appearance) {
+  @if $appearance == fill-only {
+    color: #fff;
+    background-color: adapter.get-semantic-color($color, 700);
+  } @else if $appearance == fill-with-outlined {
+    color: adapter.get-semantic-color($color, 800);
+    background-color: adapter.get-semantic-color($color, 100);
+    border: 1px solid adapter.get-semantic-color($color, 300);
+  } @else if $appearance == outlined {
+    color: adapter.get-semantic-color($color, 800);
+    background-color: #fff;
+    border: 1px solid adapter.get-semantic-color($color, 300);
+  } @else if $appearance == text-only {
+    color: adapter.get-semantic-color($color, 800);
+    background-color: transparent;
+  }
+}
+
+@mixin -size-style($size) {
+  font-size: adapter.get-font-size($level: $size);
+  line-height:
+    adapter.get-line-height(
+      $level: $size,
+      $density: normal
+    );
+  padding-block: calc(adapter.get-spacing-size($level: xs) / 2);
+  padding-inline: adapter.get-spacing-size($level: s);
+  border-radius: 4px;
+}

packages/sticker/_variables.scss

@@ -0,0 +1,12 @@
+$default-option: (
+  color: informative,
+  size: m,
+  appearance: fill-only,
+);
+
+$available-appearances: (
+  fill-only,
+  fill-with-outlined,
+  outlined,
+  text-only,
+);

packages/sticker/inhouse-sticker.scss

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

packages/sticker/package.json

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

packages/stories-web/src/components/demo/StickerDemo.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from 'react'
+import Sticker, { Props as StickerProps } from '../sticker/Sticker'
+import Icon from '../Icon'
+
+export type Props = Pick<StickerProps, 'color' | 'size'>
+
+const StickerDemo: FC<Props> = (props: Props) => (
+  <>
+    <Sticker {...props} appearance='fill-only' body='label' />
+    <Sticker {...props} appearance='fill-with-outlined' body='label' />
+    <Sticker {...props} appearance='outlined' body='label' />
+    <Sticker {...props} appearance='text-only' body='label' />
+    <Sticker
+      {...props}
+      appearance='fill-only'
+      body='label'
+      leading={<Icon className='_icon' icon='heart' />}
+    />
+    <Sticker
+      {...props}
+      appearance='fill-with-outlined'
+      body='label'
+      leading={<Icon className='_icon' icon='heart' />}
+    />
+    <Sticker
+      {...props}
+      appearance='outlined'
+      body='label'
+      leading={<Icon className='_icon' icon='heart' />}
+    />
+    <Sticker
+      {...props}
+      appearance='text-only'
+      body='label'
+      leading={<Icon className='_icon' icon='heart' />}
+    />
+  </>
+)
+
+export default StickerDemo

packages/stories-web/src/components/sticker/SkeletonSticker.tsx

@@ -0,0 +1,43 @@
+import React, { CSSProperties, FC } from 'react'
+import { Size } from '../types'
+
+type TextUnit = 'rem'
+type TextLength = `${number}${TextUnit}`
+
+export interface Props {
+  size?: Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl'>
+  width?: TextLength
+}
+
+const SkeletonSticker: FC<Props> = (props: Props) => {
+  const {
+    size,
+    width,
+    ...rest
+  } = props
+
+  const classes = ['in-skeleton-sticker']
+  let style: CSSProperties = {}
+
+  if (typeof size !== 'undefined') {
+    classes.push(`-size-${size}`)
+  }
+
+  if (typeof width !== 'undefined') {
+    style = {
+      ...style,
+      width: width,
+    }
+  }
+
+  return (
+    <div
+      className={classes.join(' ')}
+      style={style}
+      {...rest}
+    >
+    </div>
+  )
+}
+
+export default SkeletonSticker