Cell - add Cell card / Circular button

Author: ryanlanciaux

src/Cell/Cell.css

@@ -0,0 +1,36 @@
+.cell-box {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  background: #FFFFFF;
+  border: 1px solid #EEEFF0;
+  box-shadow: 0px 2px 4px rgba(41, 49, 58, 0.075);
+  border-radius: 4px;
+  font-family: 'Source Code Pro', sans-serif;
+}
+
+.cell-box:focus, .cell-box:focus-within {
+  outline: 0;
+  background: #FFFFFF;
+  border: 1px solid #E2E5E7;
+
+  box-shadow: 0px 2px 8px rgba(41, 49, 58, 0.15);
+  border-radius: 4px;
+}
+
+.cell-gutter {
+  padding: 8px 0 0 8px;
+  height: 100%;
+}
+
+.cell-gutter > * {
+  margin-bottom: 4px;
+}
+
+.cell-box.no-gutter {
+  padding-left: 52px;
+}
+
+.cell-body {
+  padding: 16px;
+}

src/Cell/Cell.tsx

@@ -0,0 +1,30 @@
+import React, { FC, HTMLAttributes, useRef } from 'react';
+import classnames from 'classnames';
+
+import './Cell.css';
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode | React.ReactNodeArray;
+  gutter?: React.ReactNode | React.ReactNodeArray;
+}
+
+export const Cell: FC<Props> = ({ children, gutter }) => {
+  const el = useRef(null);
+
+  const className = classnames('cell-box', { 'no-gutter': !gutter });
+
+  return (
+    <div tabIndex={-1} className={className} ref={el}>
+      {gutter}
+      {children}
+    </div>
+  );
+};
+
+export const CellBody: FC<HTMLAttributes<HTMLDivElement>> = ({ children }) => (
+  <div className="cell-body">{children}</div>
+);
+
+export const CellGutter: FC<HTMLAttributes<HTMLDivElement>> = ({
+  children,
+}) => <div className="cell-gutter">{children}</div>;

src/Cell/index.ts

@@ -0,0 +1 @@
+export * from './Cell';

src/CircularButton/CircularButton.css

@@ -0,0 +1,66 @@
+
+.circular-button {
+  position: relative;
+  --background-color: rgba(0,0,0, 0);
+  --border-color: #BABFC4;
+  --radius: 16px;
+  --fill-color: #757F88;
+  width: calc(var(--radius) * 2);
+  height: calc(var(--radius) * 2);
+  border-radius: var(--radius);
+  border: 1px solid var(--border-color);
+  background-color: var(--background-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.circular-button svg:not(.progress-ring) * {
+  fill: var(--fill-color);
+}
+
+.circular-button svg * {
+  stroke: var(--fill-color);
+}
+
+.circular-button:hover {
+  --background-color: #EEEFF0;
+  --border-color:#8F969D;
+  --fill-color: #29313A;
+}
+
+.circular-button:focus, .circular-button.active {
+  outline: 0;
+}
+
+.circular-button:focus, .circular-button.active {
+  --fill-color: #6100FF;
+  --border-color: #6100FF;
+}
+
+.circular-button.error {
+  --fill-color: #E53935;
+  --border-color: #E53935;
+}
+
+.circular-button.error:hover {
+  --fill-color: rgb(233, 82, 79);
+  --border-color: rgb(233, 82, 79);
+}
+
+.circular-button > svg.progress-ring {
+  display: none;
+}
+
+.circular-button.progress {
+  border: none;
+}
+.circular-button.progress > .progress-ring {
+  display: block;
+}
+
+.progress-ring {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

src/CircularButton/CircularButton.tsx

@@ -0,0 +1,33 @@
+import React, { FC, HTMLAttributes, useRef } from 'react';
+import classnames from 'classnames';
+
+import { ProgressRing } from './ProgressRing';
+import './CircularButton.css';
+
+export interface Props extends HTMLAttributes<HTMLButtonElement> {
+  showPercent?: boolean;
+  percent?: number;
+  children?: React.ReactNode | React.ReactNodeArray;
+}
+
+export const CircularButton: FC<Props> = ({
+  showPercent,
+  percent,
+  children,
+  className: additionalClasses,
+  ...props
+}) => {
+  const buttonRef = useRef(null);
+  const classes = classnames(
+    'circular-button',
+    { progress: showPercent },
+    additionalClasses
+  );
+
+  return (
+    <button ref={buttonRef} className={classes} {...props}>
+      <ProgressRing radius={16} stroke={1} progress={percent || 0} />
+      {children}
+    </button>
+  );
+};

src/CircularButton/ProgressRing.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+
+interface ProgressRingProps {
+  radius: number;
+  stroke: number;
+  progress: number;
+}
+
+// Based on https://css-tricks.com/building-progress-ring-quickly/
+export const ProgressRing: FC<ProgressRingProps> = ({
+  radius,
+  stroke,
+  progress,
+}) => {
+  const normalizedRadius = radius - stroke;
+  const circumference = normalizedRadius * 2 * Math.PI;
+  const strokeDashoffset = circumference - (progress / 100) * circumference;
+
+  return (
+    <svg height={radius * 2} width={radius * 2} className="progress-ring">
+      <circle
+        stroke="#000"
+        fill="transparent"
+        strokeWidth={stroke}
+        strokeDasharray={circumference + ' ' + circumference}
+        style={{ strokeDashoffset }}
+        stroke-width={stroke}
+        r={normalizedRadius}
+        cx={radius}
+        cy={radius}
+      />
+    </svg>
+  );
+};

src/CircularButton/icons.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export const Play = () => {
+  return (
+    <svg
+      width="9"
+      height="10"
+      viewBox="0 0 9 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.13165 4.45728L1.9792 0.612C1.55293 0.34558 1 0.65204 1 1.15472V8.84528C1 9.34796 1.55293 9.65442 1.9792 9.388L8.13165 5.54272C8.53272 5.29205 8.53272 4.70795 8.13165 4.45728Z"
+        fill="#757F88"
+        stroke="#757F88"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export const More = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="8" cy="8" r="1" fill="#757F88" />
+      <circle cx="4" cy="8" r="1" fill="#757F88" />
+      <circle cx="12" cy="8" r="1" fill="#757F88" />
+    </svg>
+  );
+};

src/CircularButton/index.ts

@@ -0,0 +1,2 @@
+export * from './CircularButton';
+export * from './icons';

stories/Cell.stories.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Cell, CellBody, CellGutter, Props } from '../src/Cell';
+import { CircularButton, Play, More } from '../src/CircularButton';
+
+export default {
+  title: 'Cell',
+};
+
+export const WithSidebarItemsList = (props?: Partial<Props>) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [percentComplete, setPercentComplete] = useState(0);
+
+  // This is for the Storybook only and
+  // not production style code
+  useEffect(() => {
+    if (isLoading) {
+      const interval = window.setInterval(() => {
+        if (percentComplete === 99) {
+          setIsLoading(false);
+          window.clearInterval(interval);
+          setPercentComplete(0);
+          return;
+        }
+
+        setPercentComplete(previous => previous + 1);
+      }, 60);
+
+      return () => {
+        clearInterval(interval);
+      };
+    }
+  }, [isLoading, percentComplete]);
+
+  return (
+    <Cell
+      gutter={
+        <CellGutter>
+          <CircularButton
+            showPercent={isLoading}
+            onClick={() => {
+              setIsLoading(p => !p);
+            }}
+            percent={percentComplete}
+          >
+            <Play />
+          </CircularButton>
+          <CircularButton>
+            <More />
+          </CircularButton>
+        </CellGutter>
+      }
+    >
+      <CellBody>
+        Enim reprehenderit in nulla laboris duis laboris anim tempor cupidatat
+        excepteur. Nostrud amet nostrud excepteur adipisicing nulla non mollit
+        irure eiusmod magna occaecat. Adipisicing voluptate ex voluptate irure
+        deserunt non excepteur sit voluptate excepteur fugiat.
+      </CellBody>
+    </Cell>
+  );
+};

stories/CircularButton.stories.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { CircularButton, Props, Play } from '../src/CircularButton';
+
+export default {
+  title: 'CircularButton',
+};
+
+export const Standard = (props?: Partial<Props>) => (
+  <CircularButton onClick={action('Clicked')}>
+    <Play />
+  </CircularButton>
+);
+
+export const Progress = (props?: Partial<Props>) => {
+  const [complete, setComplete] = useState(0);
+
+  useEffect(() => {
+    window.setInterval(() => {
+      setComplete(previous => (previous + 1 === 100 ? 0 : previous + 1));
+    }, 60);
+  }, []);
+
+  return (
+    <CircularButton
+      onClick={action('Clicked')}
+      className="active"
+      showPercent={true}
+      percent={complete}
+    >
+      <Play />
+    </CircularButton>
+  );
+};