initial commit

src/app/atoms/segmented-controls/SegmentedControls.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './SegmentedControls.scss';
+
+import { blurOnBubbling } from '../button/script';
+
+import Text from '../text/Text';
+import RawIcon from '../system-icons/RawIcon';
+
+function SegmentedControls({
+  selected, segments, onSelect,
+}) {
+  const [select, setSelect] = useState(selected);
+
+  function selectSegment(segmentIndex) {
+    setSelect(segmentIndex);
+    onSelect(segmentIndex);
+  }
+
+  return (
+    <div className="segmented-controls">
+      {
+        segments.map((segment, index) => (
+          <button
+            key={Math.random().toString(20).substr(2, 6)}
+            className={`segment-btn${select === index ? ' segment-btn--active' : ''}`}
+            type="button"
+            onClick={() => selectSegment(index)}
+            onMouseUp={(e) => blurOnBubbling(e, '.segment-btn')}
+          >
+            <div className="segment-btn__base">
+              {segment.iconSrc && <RawIcon size="small" src={segment.iconSrc} />}
+              {segment.text && <Text variant="b2">{segment.text}</Text>}
+            </div>
+          </button>
+        ))
+      }
+    </div>
+  );
+}
+
+SegmentedControls.propTypes = {
+  selected: PropTypes.number.isRequired,
+  segments: PropTypes.arrayOf(PropTypes.shape({
+    iconSrc: PropTypes.string,
+    text: PropTypes.string,
+  })).isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default SegmentedControls;

src/app/atoms/segmented-controls/SegmentedControls.scss

@@ -0,0 +1,61 @@
+@use '../button/state';
+
+.segmented-controls {
+  background-color: var(--bg-surface-low);
+  border-radius: var(--bo-radius);
+  border: 1px solid var(--bg-surface-border);
+
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.segment-btn {
+  padding: var(--sp-extra-tight) 0;
+  cursor: pointer;
+  @include state.hover(var(--bg-surface-hover));
+  @include state.active(var(--bg-surface-active));
+
+  &__base {
+    padding: 0 var(--sp-normal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: 1px solid var(--bg-surface-border);
+    
+    [dir=rtl] & {
+      border-left: none;
+      border-right: 1px solid var(--bg-surface-border);
+    }
+
+    & .text:nth-child(2) {
+      margin: 0 var(--sp-extra-tight);
+    }
+  }
+  &:first-child &__base {
+    border: none;
+  }
+
+  &--active {
+    background-color: var(--bg-surface);
+    border: 1px solid var(--bg-surface-border);
+    border-width: 0 1px 0 1px;
+
+    & .segment-btn__base,
+    & + .segment-btn .segment-btn__base {
+      border: none;
+    }
+    &:first-child{
+      border-left: none;
+    }
+    &:last-child {
+      border-right: none;
+    }
+    [dir=rtl] & {
+      border-left: 1px solid var(--bg-surface-border);
+      border-right: 1px solid var(--bg-surface-border);
+
+      &:first-child { border-right: none;}
+      &:last-child { border-left: none;}
+    }
+  }
+}