refactor(stories): co-locate stories with components (#2078)

* refactor: move ActionButton component * refactor: move BanUserButton component * refactor: move ChatActionMessage component * refactor: move ChatContainer component * refactor: move AuthModal component * refactor: move BrowserNotifyModal component * refactor: move ChatUserMessage component * refactor: move ChatJoinMessage component * refactor: move ChatTextField component * refactor: move ChatUserBadge component * refactor: move FollowerCollection and SingleFollower components * fix: bad import path * refactor: move FollowModal component * refactor: move Modal component * refactor: move ContentHeader component * refactor: move ChatSystemMessage component * refactor: move Header component * refactor: move Footer component * refactor: move StatusBar component * refactor: move OfflineBanner component * refactor: move OwncastPlayer component * refactor: move IndieAuthModal component * refactor: move SocialLinks component * refactor: move VideoPoster component * refactor: move FollowModal component * refactor: move FediAuthModal.tsx component * refactor: move UserDropdown component * refactor: move ChatSocialMessage component * refactor: move Logo component * refactor: move NotifyReminderPopup component * refactor: move NameChangeModal component * refactor: move FatalErrorStateModal component * refactor: move ChatModeratorNotification component * refactor: move ChatModerationActionMenu and ChatModerationDetailsModal components * refactor: move CustomPageContent component * refactor: move storybook Introduction file * refactor: update storybook story import path * refactor: move storybook preview styles * refactor: move storybook doc pages * refactor: move Color and ImageAsset components * fix: bad import path * fix: bad import path in story file
2022-09-03 20:38:52 +02:00
parent 9f550a87d2
commit 5ebbbb8bf2
82 changed files with 120 additions and 121 deletions
--- a/web/components/Color.tsx
+++ b/web/components/Color.tsx
@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+
+export function Color(props) {
+  const { color } = props;
+  const resolvedColor = getComputedStyle(document.documentElement).getPropertyValue(`--${color}`);
+
+  const containerStyle = {
+    borderRadius: '20px',
+    width: '12vw',
+    height: '12vw',
+    minWidth: '100px',
+    minHeight: '100px',
+    borderWidth: '1.5px',
+    borderStyle: 'solid',
+    borderColor: 'lightgray',
+    overflow: 'hidden',
+    margin: '0.3vw',
+  };
+
+  const colorBlockStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textShadow: '0 0 15px black',
+    height: '70%',
+    width: '100%',
+    backgroundColor: resolvedColor,
+  };
+
+  const colorTextStyle = {
+    color: 'white',
+    alignText: 'center',
+  };
+
+  const colorDescriptionStyle = {
+    margin: '5px',
+    color: 'gray',
+    fontSize: '0.95vw',
+    textAlign: 'center' as 'center',
+    lineHeight: 1.0,
+  };
+
+  return (
+    <figure style={containerStyle}>
+      <div style={colorBlockStyle}>
+        <div style={colorTextStyle}>{resolvedColor}</div>
+      </div>
+      <figcaption style={colorDescriptionStyle}>{color}</figcaption>
+    </figure>
+  );
+}
+
+Color.propTypes = {
+  color: PropTypes.string.isRequired,
+};
+
+const rowStyle = {
+  display: 'flex',
+  flexDirection: 'row' as 'row',
+  flexWrap: 'wrap' as 'wrap',
+  alignItems: 'center',
+};
+
+export function ColorRow(props) {
+  const { colors } = props;
+
+  return (
+    <div style={rowStyle}>
+      {colors.map(color => (
+        <Color key={color} color={color} />
+      ))}
+    </div>
+  );
+}
+
+ColorRow.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+};