Merge pull request #29 from pepabo/add-card

cardを追加

packages/card/README.md

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

packages/card/_index.scss

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

packages/card/_mixins.scss

@@ -0,0 +1,113 @@
+@use "sass:map";
+@use "@pepabo-inhouse/adapter" as adapter;
+@use "@pepabo-inhouse/constants/variables" as constants;
+@use "./variables" as variables;
+
+@function get-available-appearance() {
+  @return variables.$available-appearance;
+}
+
+@function get-available-priority() {
+  @return constants.$priorities;
+}
+
+@function get-available-shape() {
+  @return constants.$shapes;
+}
+
+@mixin style($options: variables.$default-option) {
+  $options: map.merge(variables.$default-option, $options);
+
+  // appearance
+  // $appearance: map.get($options, appearance);
+  @include -appearance-rule($appearance: map.get($options, appearance));
+
+  @each $appearance in get-available-appearance() {
+    &.-appearance-#{$appearance} {
+      @include -appearance-rule($appearance: $appearance);
+    }
+  }
+
+  // color
+  // $color: map.get($options, color);
+  @include -color-rule($color: map.get($options, color));
+
+  @each $priority in get-available-priority() {
+    &.-color-#{$priority} {
+      @include -color-rule($color: $priority);
+    }
+  }
+
+  // gapless
+  // $gapless: map.get($options, gapless);
+  @if map.get($options, gapless) == true {
+    @include -gapless-rule;
+  } @else {
+    padding: adapter.get-spacing-size(m);
+    @include adapter.mq-boundary(up, m) {
+      padding: adapter.get-spacing-size(l);
+    }
+  }
+
+  &.-is-gapless {
+    @include -gapless-rule;
+  }
+
+  // shape
+  // $shape: map.get($options, shape);
+  @include -shape-rule($shape: map.get($options, shape));
+
+  @each $shape in get-available-shape() {
+    &.-shape-#{$shape} {
+      @include -shape-rule($shape: $shape);
+    }
+  }
+
+  ._media {
+    line-height: 0;
+    ._thumbnail {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+}
+
+@mixin export {
+  .in-card {
+    @include style;
+  }
+}
+
+@mixin -appearance-rule($appearance: filled) {
+  @if $appearance == outlined {
+    border: 1px solid adapter.get-border-color($brightness: light, $name: low_emphasis);
+  } @else if $appearance == elevated {
+    @include adapter.elevation(1);
+  } @else if $appearance == filled {
+    // nothing
+  }
+}
+
+@mixin -color-rule($color: primary) {
+  @if $color == primary {
+    background: adapter.get-surface-color($brightness: light, $priority: primary);
+  } @else if $color == secondary {
+    background: adapter.get-surface-color($brightness: light, $priority: secondary);
+  } @else if $color == tertiary {
+    background: adapter.get-surface-color($brightness: light, $priority: tertiary);
+  }
+}
+
+@mixin -gapless-rule {
+  padding: 0;
+}
+
+@mixin -shape-rule($shape: circle) {
+  @if $shape == circle {
+    border-radius: adapter.get-radius-size($level: l);
+    overflow: hidden;
+  } @else if $shape == square {
+    border-radius: 0;
+  }
+}

packages/card/_variables.scss

@@ -0,0 +1,15 @@
+@use "@pepabo-inhouse/adapter/functions" as adapter;
+
+$default-option: (
+  appearance: filled,
+  color: primary,
+  gapless: false,
+  shape: circle,
+);
+
+$available-appearance: (
+  elevated,
+  filled,
+  outlined
+);
+

packages/card/inhouse-card.scss

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

packages/card/package.json

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

packages/components-web/_index.scss

@@ -2,6 +2,7 @@
 @forward "@pepabo-inhouse/app-bar" as app-bar-*;
 @forward "@pepabo-inhouse/avatar" as avatar-*;
 @forward "@pepabo-inhouse/button" as button-*;
+@forward "@pepabo-inhouse/card" as card-*;
 @forward "@pepabo-inhouse/cell" as cell-*;
 @forward "@pepabo-inhouse/checkbox" as checkbox-*;
 @forward "@pepabo-inhouse/container" as container-*;

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

@@ -2,6 +2,7 @@
 @use "@pepabo-inhouse/avatar";
 @use "@pepabo-inhouse/bottom-navigation";
 @use "@pepabo-inhouse/button";
+@use "@pepabo-inhouse/card";
 @use "@pepabo-inhouse/checkbox";
 @use "@pepabo-inhouse/container";
 @use "@pepabo-inhouse/description-list";
@@ -29,6 +30,7 @@
 @include avatar.export;
 @include bottom-navigation.export;
 @include button.export;
+@include card.export;
 @include checkbox.export;
 @include container.export;
 @include description-list.export;

packages/components-web/package.json

@@ -16,6 +16,7 @@
     "@pepabo-inhouse/avatar": "^1.0.0",
     "@pepabo-inhouse/bottom-navigation": "^1.0.0",
     "@pepabo-inhouse/button": "^1.1.0-alpha.0",
+    "@pepabo-inhouse/card": "^1.0.0",
     "@pepabo-inhouse/cell": "^1.0.0",
     "@pepabo-inhouse/checkbox": "^1.1.0-alpha.0",
     "@pepabo-inhouse/constants": "^1.0.0",

packages/stories-web/package.json

@@ -17,6 +17,7 @@
     "@pepabo-inhouse/avatar": "^1.0.0",
     "@pepabo-inhouse/bottom-navigation": "^1.0.0",
     "@pepabo-inhouse/button": "^1.1.0-alpha.0",
+    "@pepabo-inhouse/card": "^1.0.0",
     "@pepabo-inhouse/cell": "^1.0.0",
     "@pepabo-inhouse/checkbox": "^1.1.0-alpha.0",
     "@pepabo-inhouse/components-web": "^1.1.0-alpha.0",

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

@@ -0,0 +1,20 @@
+import type { StoryFn, Meta } from '@storybook/react'
+import React from 'react'
+import Card, { Props } from './components/card/Card'
+import fixture from '../assets/fixture.jpg'
+
+export default {
+  title: 'Components/Card',
+  component: Card
+} as Meta
+
+const Template: StoryFn<Props> = (args) => <Card {...args} />
+
+export const Index = Template.bind({})
+Index.args = {
+  appearance: 'elevated',
+  body: 'Card body',
+  color: 'primary',
+  isGapless: false,
+  shape: 'circle'
+}

packages/stories-web/src/components/card/Card.tsx

@@ -0,0 +1,50 @@
+import React, { FC, ReactNode } from 'react'
+import { Shape } from '../types'
+
+export interface Props {
+  appearance?: 'filled' | 'outlined' | 'elevated';
+  body?: string
+  color?: 'primary' | 'secondary' | 'tertiary';
+  isGapless?: boolean
+  shape?: Shape
+}
+
+const Card: FC<Props> = (props: Props) => {
+  const {
+    appearance,
+    body,
+    color,
+    isGapless,
+    shape,
+    ...rest
+  } = props;
+
+  const classes = [`in-card`]
+
+  if (typeof appearance !== 'undefined') {
+    classes.push(`-appearance-${appearance}`)
+  }
+
+  if (typeof color !== 'undefined') {
+    classes.push(`-color-${color}`)
+  }
+
+  if (isGapless) {
+    classes.push('-is-gapless')
+  }
+
+  if (typeof shape !== 'undefined') {
+    classes.push(`-shape-${shape}`)
+  }
+
+  return (
+    <div
+      className={classes.join(' ')}
+      {...rest}
+    >
+      {body || null}
+    </div>
+  );
+}
+
+export default Card