Merge pull request #34 from pepabo/inhouse-alert

アプリケーションのステータスを表示する目的として利用されるAlertを追加

packages/alert/README.md

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

packages/alert/_index.scss

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

packages/alert/_mixins.scss

@@ -0,0 +1,75 @@
+@use "sass:map";
+@use "sass:list";
+@use "@pepabo-inhouse/adapter/functions" as adapter;
+@use "./variables";
+
+@mixin style($options: variables.$default-options) {
+  display: flex;
+  $options: map.merge(variables.$default-options, $options);
+  padding: adapter.get-spacing-size(map.get($options, size));
+  border-radius: adapter.get-radius-size(map.get($options, size));
+  box-shadow: adapter.get-elevation-box-shadow(1);
+  font-size: adapter.get-font-size(map.get($options, size));
+  line-height: adapter.get-line-height($level: map.get($options, size), $density: normal);
+
+  ._leading {
+    padding-right: adapter.get-spacing-size(s);
+  }
+
+  ._title {
+    margin-top: 0;
+  }
+
+  @include -state-style(map-get($options, color));
+  @include -size-style(map-get($options, size));
+
+  &.-color-informative {
+    @include -state-style(informative);
+  }
+
+  &.-color-positive {
+    @include -state-style(positive);
+  }
+
+  &.-color-negative {
+    @include -state-style(negative);
+  }
+
+  &.-color-notice {
+    @include -state-style(notice);
+  }
+
+  @each $size in 's', 'm', 'l' {
+    &.-size-#{$size} {
+      @include -size-style($size);
+    }
+  }
+}
+
+@mixin -state-style($state) {
+  background-color: adapter.get-semantic-color($state, 100);
+  color: adapter.get-semantic-color($state, 800);
+
+  ._leading:after {
+    content: map-get(variables.$icon-map, $state);
+  }
+}
+
+@mixin -size-style($size) {
+  font-size: adapter.get-font-size($size);
+  line-height: adapter.get-line-height($level: $size, $density: normal);
+
+  ._leading {
+    line-height: adapter.get-line-height($level: $size, $density: normal);
+  }
+
+  ._title {
+    padding-bottom: adapter.get-spacing-size(map-get(variables.$title-margin-map, $size));
+  }
+}
+
+@mixin export {
+  .in-alert {
+    @include style;
+  }
+}

packages/alert/_variables.scss

@@ -0,0 +1,17 @@
+$default-options: (
+  color: informative,
+  size: m
+);
+
+$icon-map: (
+  informative: "info_on_circle",
+  positive: "check",
+  notice: "exclamation_on_triangle",
+  negative: "exclamation_on_triangle",
+);
+
+$title-margin-map: (
+  s: xxs,
+  m: xs,
+  l: s
+)

packages/alert/inhouse-alert.scss

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

packages/alert/package.json

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

packages/components-web/_index.scss

@@ -23,3 +23,4 @@
 @forward "@pepabo-inhouse/table" as table-*;
 @forward "@pepabo-inhouse/textfield" as textfield-*;
 @forward "@pepabo-inhouse/snackbar" as snackbar-*;
+@forward "@pepabo-inhouse/alert" as alert-*;

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

@@ -22,6 +22,7 @@
 @use "@pepabo-inhouse/table";
 @use "@pepabo-inhouse/textfield";
 @use "@pepabo-inhouse/snackbar";
+@use "@pepabo-inhouse/alert";
 
 // @import が存在しているので最初に flavor を読む
 // see: https://git.pepabo.com/inhouse/components-web/issues/355
@@ -47,3 +48,4 @@
 @include table.export;
 @include textfield.export;
 @include snackbar.export;
+@include alert.export;

packages/components-web/package.json

@@ -40,6 +40,7 @@
     "@pepabo-inhouse/table": "^1.2.0",
     "@pepabo-inhouse/textfield": "^1.2.0",
     "@pepabo-inhouse/thumbnail": "^1.2.0",
+    "@pepabo-inhouse/alert": "^1.2.0",
     "@pepabo-inhouse/tokens": "^0.17.0",
     "autoprefixer": "10.4.14",
     "cssnano": "5.1.15",

packages/stories-web/package.json

@@ -42,6 +42,7 @@
     "@pepabo-inhouse/table": "^1.2.0",
     "@pepabo-inhouse/textfield": "^1.2.0",
     "@pepabo-inhouse/thumbnail": "^1.2.0",
+    "@pepabo-inhouse/alert": "^1.2.0",
     "@pepabo-inhouse/tokens": "^0.17.0",
     "@storybook/addon-essentials": "^7.0.6",
     "@storybook/react": "^7.0.6",

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

@@ -0,0 +1,29 @@
+import type { StoryFn, Meta } from '@storybook/react'
+import React from 'react'
+import Alert, { Props } from './components/Alert'
+
+export default {
+  title: 'Components/Alert',
+  component: Alert,
+  size: 'm',
+} as Meta
+
+const Template: StoryFn<Props> = (args) => <Alert {...args} ></Alert>
+
+export const Index = Template.bind({})
+Index.args = {
+  children: <>通知を確認してください</>
+}
+
+export const Multiline = Template.bind({})
+Multiline.args = {
+  children: <>
+    <div className="_title">更新に失敗しました</div>
+    以下の入力内容を確認してください。
+    <ul>
+      <li>郵便番号が入力されていません</li>
+      <li>決済方法が選択されていません</li>
+    </ul>
+  </>,
+  color: "negative"
+}

packages/stories-web/src/components/Alert.tsx

@@ -0,0 +1,34 @@
+import React, { FC, ReactNode } from 'react'
+import { SemanticColor, Size } from './types';
+
+export interface Props {
+  children: ReactNode;
+  color?: Extract<
+    SemanticColor,
+    "informative" | "positive" | "negative" | "notice"
+  >;
+  size?: Extract<Size, 's' | 'm' | 'l'>;
+}
+
+const Alert: FC<Props> = (props: Props) => {
+  const wrapperClasses = ['in-alert']
+  const {
+    color = "informative",
+    size = "m",
+    children
+  } = props
+
+  wrapperClasses.push(`-color-${color}`)
+  wrapperClasses.push(`-size-${size}`)
+
+  return (
+    <div className={wrapperClasses.join(' ')}>
+      <span className="in-icon _leading"></span>
+      <div className="_content">
+        { children }
+      </div>
+    </div>
+  )
+}
+
+export default Alert