imbric-theme 0.1.1

package/atoms/Icon/Icon.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { mapSize } from './helpers'
+
+import styles from './Icon.module.css'
+import { options, iconsMap } from './constants'
+import withStyles from '../../hocs/withStyles'
+
+const handleClick = ({ onClick }) => (event) => {
+  onClick(event)
+}
+
+export const Icon = ({
+  id,
+  className,
+  onClick,
+  name,
+  size,
+  isClickable,
+  getStyles,
+}) => {
+  const icon = iconsMap[name]
+  const mappedSize = mapSize(size)
+
+  return (
+    <div
+      id={id}
+      className={getStyles(className, 'icon', ['color', 'size', 'background'], {
+        'is-clickable': isClickable || !!onClick,
+      })}
+      style={{ width: mappedSize, height: mappedSize }}
+      onClick={onClick && handleClick({ onClick })}
+    >
+      <svg
+        viewBox={icon.viewBox}
+        xmlns="http://www.w3.org/2000/svg"
+        width={mappedSize}
+        height={mappedSize}
+      >
+        {icon.svg}
+      </svg>
+    </div>
+  )
+}
+
+Icon.propTypes = {
+  name: PropTypes.oneOf(options.names).isRequired,
+  getStyles: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
+  size: PropTypes.oneOf(options.sizes),
+  color: PropTypes.oneOf(options.colors),
+  background: PropTypes.oneOf(options.backgrounds),
+  id: PropTypes.string,
+  className: PropTypes.string,
+  isClickable: PropTypes.bool,
+}
+
+Icon.defaultProps = {
+  size: 'md',
+  color: 'base',
+  background: 'transparent',
+  isClickable: false,
+  getStyles: () => {},
+}
+
+export default withStyles(styles)(Icon)

package/atoms/Icon/Icon.module.css

@@ -0,0 +1,112 @@
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+
+.size-sm {
+  padding: 5px;
+}
+
+.size-md {
+  padding: 8px;
+}
+
+.size-lg {
+  padding: 12px;
+}
+
+.size-xl {
+  padding: 15px;
+}
+
+.color-base path,
+.color-base circle {
+  fill: var(--color-font-base);
+}
+
+.color-base line,
+.color-base rect {
+  stroke: var(--color-font-base);
+}
+
+.color-highlight path,
+.color-highlight circle {
+  fill: var(--color-font-highlight);
+}
+
+.color-highlight line,
+.color-highlight rect {
+  stroke: var(--color-font-highlight);
+}
+
+.color-muted path,
+.color-muted circle {
+  fill: var(--color-font-muted);
+}
+
+.color-muted line,
+.color-muted rect {
+  stroke: var(--color-font-muted);
+}
+
+.color-primary path,
+.color-primary circle {
+  fill: var(--color-primary);
+}
+
+.color-primary line,
+.color-primary rect {
+  stroke: var(--color-primary);
+}
+
+.color-inverted path,
+.color-inverted circle {
+  fill: var(--color-primary-inverted);
+}
+
+.color-inverted line,
+.color-inverted rect {
+  stroke: var(--color-primary-inverted);
+}
+
+.icon rect:global(.transparent) {
+  fill: var(--color-base-transparent) !important;
+}
+
+.background-base {
+  background: var(--color-gray-100);
+  border-radius: var(--border-radius-full);
+}
+
+.background-transparent {
+  background: var(--color-base-transparent);
+}
+
+.background-highlight {
+  background: var(--color-primary-highlight);
+  border-radius: var(--border-radius-full);
+}
+
+.background-muted {
+  background: var(--color-primary-muted);
+  border-radius: var(--border-radius-full);
+}
+
+.background-inverted {
+  border: var(--picture-border);
+  background: var(--color-font-inverted);
+  border-radius: var(--border-radius-full);
+  box-shadow: var(--box-shadow-sm);
+}
+
+.background-spotlight {
+  background: var(--color-yellow-100);
+  border-radius: var(--border-radius-full);
+  box-shadow: var(--box-shadow-sm);
+}
+
+.is-clickable {
+  cursor: pointer;
+}

package/atoms/Icon/Icon.stories.js

@@ -0,0 +1,48 @@
+import { Icon, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Icon, styles)
+const ListTemplate = getListTemplate(Icon, styles)
+
+export default {
+  title: 'Atoms/Icon',
+  component: Icon,
+  args: {
+    name: 'arrowRight',
+  },
+  argTypes: {
+    color: getOptionsArgTypes(options.colors),
+    size: getOptionsArgTypes(options.sizes),
+    name: getOptionsArgTypes(options.names),
+    background: getOptionsArgTypes(options.backgrounds),
+  },
+  parameters: { __sb: { fd: 'row' } },
+}
+
+export const Default = Template.bind({})
+
+export const Clickable = Template.bind({})
+Clickable.args = { isClickable: true }
+
+export const Names = ListTemplate.bind({})
+Names.args = {
+  items: options.names.map((name) => ({ name })),
+}
+
+export const Sizes = ListTemplate.bind({})
+Sizes.args = { items: options.sizes.map((size) => ({ size })) }
+
+export const Colors = ListTemplate.bind({})
+Colors.args = {
+  items: options.colors.map((color) => ({ color })),
+}
+
+export const Backgrounds = ListTemplate.bind({})
+Backgrounds.args = {
+  items: options.backgrounds.map((background) => ({ background })),
+}