Merge pull request #537 from openameba/feat/bottom-button

feat(spindle-ui): create BottomButton

packages/spindle-ui/src/BottomButton/BottomButton.css

@@ -0,0 +1,28 @@
+:root {
+  --BottomButton-z-index: 1;
+  --BottomButton-backgroundColor: var(--color-surface-primary);
+}
+
+/*
+ * Bottom Button
+*/
+.spui-BottomButton {
+  background: var(--BottomButton-backgroundColor);
+  bottom: 0;
+  left: 0;
+  z-index: var(--BottomButton-z-index);
+}
+
+.spui-BottomButton-wrap {
+  padding: 16px 16px calc(env(safe-area-inset-bottom) + 16px);
+}
+
+/* Position */
+.spui-BottomButton--fixed {
+  position: fixed;
+  width: 100%;
+}
+
+.spui-BottomButton--sticky {
+  position: sticky;
+}

packages/spindle-ui/src/BottomButton/BottomButton.stories.mdx

@@ -0,0 +1,86 @@
+import { Description, Meta, Story, Source } from '@storybook/addon-docs/blocks';
+import { Button } from '../Button';
+import { BottomButton } from './BottomButton';
+
+# Bottom Button
+
+<Meta title="BottomButton" component={BottomButton} />
+
+![stability-stable](https://img.shields.io/badge/stability-stable-green.svg)
+
+<Source
+  language='javascript'
+  code={`import { BottomButton } from '@openameba/spindle-ui/BottomButton'`}
+/>
+
+<Source
+  language='css'
+  code={`@import './node_modules/@openameba/spindle-ui/BottomButton/BottomButton.css'`}
+/>
+
+<Source
+  language='html'
+  code={`<link rel="stylesheet" href="https://unpkg.com/@openameba/spindle-ui/BottomButton/BottomButton.css">`}
+/>
+
+## Fixed Position
+<Description>画面下部に配置されます</Description>
+
+<Preview withSource="open">
+  <Story name="Fixed Position">
+    <div style={{ ["--BottomButton-z-index"]: 2 }}>
+      <BottomButton position="fixed">
+        <Button size="large" variant="contained" layout="fullWidth">fixed button</Button>
+      </BottomButton>
+    </div>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<BottomButton position="fixed">
+  <Button size="large" variant="contained" layout="fullWidth">fixed button</Button>
+</BottomButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<div class="spui-BottomButton spui-BottomButton--fixed">
+  <div class="spui-BottomButton-wrap">
+    <button class="spui-Button spui-Button--large spui-Button--contained">fixed button</button>
+  </div>
+</div>
+  `}
+/>
+
+## Sticky Position
+<Description>上部のコンテンツがスクロール中に画面下部に固定され、スクロールし終わると固定が解除されます</Description>
+
+<Preview withSource="open">
+  <Story name="Sticky Position">
+    <BottomButton position="sticky">
+      <Button size="large" variant="contained" layout="fullWidth">sticky button</Button>
+    </BottomButton>
+  </Story>
+</Preview>
+
+<Source
+  code={`
+<BottomButton position="sticky">
+  <Button size="large" variant="contained" layout="fullWidth">sticky button</Button>
+</BottomButton>
+  `}
+/>
+
+<Source
+  language='html'
+  code={`
+<div class="spui-BottomButton spui-BottomButton--sticky">
+  <div class="spui-BottomButton-wrap">
+    <button class="spui-Button spui-Button--fullWidth spui-Button--large spui-Button--contained">sticky button</button>
+  </div>
+</div>
+  `}
+/>

packages/spindle-ui/src/BottomButton/BottomButton.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+
+type Position = 'fixed' | 'sticky';
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+  position?: Position;
+};
+
+const BLOCK_NAME = 'spui-BottomButton';
+
+export const BottomButton: React.FC<Props> = ({
+  children,
+  className = '',
+  position = 'fixed',
+}: Props) => {
+  const classnames = [BLOCK_NAME, `${BLOCK_NAME}--${position}`, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={classnames}>
+      <div className={`${BLOCK_NAME}-wrap`}>{children}</div>
+    </div>
+  );
+};

packages/spindle-ui/src/BottomButton/index.ts

@@ -0,0 +1 @@
+export { BottomButton } from './BottomButton';

packages/spindle-ui/src/index.css

@@ -1,6 +1,7 @@
 /* stylelint-disable plugin/selector-bem-pattern */
 @import 'ameba-color-palette.css';
 @import './Breadcrumb/Breadcrumb.css';
+@import './BottomButton/BottomButton.css';
 @import './Button/Button.css';
 @import './ButtonGroup/ButtonGroup.css';
 @import './Dialog/Dialog.css';