@soul-refiner/design-system 0.1.28 → 0.1.29

package/dist/components/card/audio/audio.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P, Rate } from 'components';
+export const AudioEpisodeCard = ({ actions, actionDropdown, content, cta, href, image, logo, numRating, rating, subtitle, supportLabel, sx, title, }) => {
+    const hasLogo = !!logo;
+    return (React.createElement(Wrapper, { "$sx": sx, href: href },
+        React.createElement(Figure, null,
+            actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
+            React.createElement("img", { className: "thumbnail", src: image, alt: "" }),
+            React.createElement(Figcaption, null,
+                React.createElement(Box, { "$display": "block", className: "hidden" }, cta),
+                React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16 },
+                    logo,
+                    React.createElement(Box, { "$dir": "column" },
+                        React.createElement(H, { "$color": "grey-2", "$semiBold": true, "$fontSize": hasLogo ? 18 : 16 }, title),
+                        React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle)),
+                    supportLabel && (React.createElement(P, { className: "not-hover", "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;" }, supportLabel))),
+                React.createElement(P, { "$color": "grey-5", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 6, className: "hidden inline" }, content),
+                React.createElement(Box, { className: "hidden", "$align": "center", "$dir": "row" },
+                    React.createElement(Rate, { isRateable: false, percent: rating, size: "small" }),
+                    React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16, sx: "margin: 0px auto 0px 4px;" },
+                        "(",
+                        numRating,
+                        ")"),
+                    React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 8 }, React.Children.toArray(actions)))))));
+};
+const Wrapper = styled.a `
+  cursor: pointer;
+  display: block;
+  position: relative;
+  user-select: none;
+
+  figure {
+    max-width: 228px;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  &:hover {
+    .hidden {
+      display: flex;
+
+      &.inline {
+        display: -webkit-box;
+      }
+    }
+
+    .not-hover {
+      display: none;
+    }
+
+    .thumbnail {
+      border-radius: 16px 16px 0px 0px;
+    }
+
+    figure {
+      max-width: 280px;
+      aspect-ratio: 280 / 434;
+      box-shadow: var(--elevation-3);
+      background: linear-gradient(
+        0deg,
+        #ffffff 50%,
+        rgba(255, 255, 255, 0.85) 55%,
+        rgba(255, 255, 255, 0.1) 80%
+      );
+    }
+
+    figcaption {
+      margin-top: -80px;
+      padding: 24px;
+    }
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const Figure = styled.figure `
+  margin: 0px;
+  border-radius: 16px;
+
+  .thumbnail {
+    border-radius: 16px;
+    position: relative;
+    z-index: -1;
+    width: 100%;
+    aspect-ratio: 228 / 228;
+  }
+`;
+const Figcaption = styled.figcaption `
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  padding: 8px;
+`;
+const DropdownWrapper = styled.div `
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;

package/dist/components/card/audio/index.js

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

package/dist/components/card/card.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ActionCard } from './action';
+import { AudioEpisodeCard } from './audio';
+import { FeatureCard } from './feature';
+import { PersonCard } from './person';
+import { PriceCard } from './price';
+import { RegularCard } from './regular';
+import { VideoEpisodeCard } from './video';
+import { WrittenEpisodeCard } from './written';
+export const Card = ({ type = 'regular', ...rest }) => {
+    const lookup = {
+        action: React.createElement(ActionCard, { ...rest }),
+        'audio-episode': React.createElement(AudioEpisodeCard, { ...rest }),
+        feature: React.createElement(FeatureCard, { ...rest }),
+        person: React.createElement(PersonCard, { ...rest }),
+        price: React.createElement(PriceCard, { ...rest }),
+        regular: React.createElement(RegularCard, { ...rest }),
+        'video-episode': React.createElement(VideoEpisodeCard, { ...rest }),
+        'written-episode': (React.createElement(WrittenEpisodeCard, { ...rest })),
+    };
+    return lookup[type];
+};

package/dist/components/card/card.stories.js

@@ -0,0 +1,284 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Card } from './card';
+import { Avatar, Box, Button, H, P } from 'components';
+import { Calendar, Clock, ForwardBold, GraduationCap, Play, Plus } from 'icons';
+/************************************************************************
+ * Global config
+ */
+const meta = {
+    title: 'Cards/Card',
+    parameters: {
+        layout: 'centered',
+    },
+};
+/************************************************************************
+ * Example styled components
+ */
+const Logo = styled.img `
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+`;
+const IconButton = styled.button `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  outline: none;
+  background-color: var(--color-white);
+  border-radius: 50%;
+  padding: 0px;
+  margin: 0px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-grey-10);
+  }
+`;
+/************************************************************************
+ * Story function
+ */
+const Story = (args) => React.createElement(Card, { ...args });
+/************************************************************************
+ * Pages
+ */
+export const Action = Story.bind({});
+Action.argTypes = {
+    actions: {
+        control: 'none',
+    },
+    logo: {
+        control: 'none',
+    },
+};
+Action.args = {
+    type: 'action',
+    editable: true,
+    href: '#',
+    actions: (React.createElement(Button, { size: "small", sx: "flex:1;" }, "Button")),
+    content: 'A group about the freedom we have in Christ. This is a short description about this group',
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    logo: (React.createElement(Logo, { src: "https://f005.backblazeb2.com/file/sr-platform/logo.png", alt: "" })),
+    subtitle: '14 connections in common',
+    sx: 'width: 310px',
+    title: 'Card Label',
+};
+export const AudioEpisode = Story.bind({});
+AudioEpisode.argTypes = {
+    actions: {
+        control: 'none',
+    },
+    cta: {
+        control: 'none',
+    },
+    logo: {
+        control: 'none',
+    },
+    rating: {
+        type: 'number',
+        control: {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+        },
+    },
+};
+AudioEpisode.args = {
+    type: 'audio-episode',
+    actions: [
+        React.createElement(IconButton, null,
+            React.createElement(Play, null)),
+        React.createElement(IconButton, null,
+            React.createElement(Plus, null)),
+        React.createElement(IconButton, null,
+            React.createElement(ForwardBold, null)),
+    ],
+    content: 'The Conquer Series, unrivaled in its scope and authority, lays out the process to permanently stop watching porn with proven strategies and tools that have helped thousands and lorem ipsum il dunc morem estem link',
+    cta: (React.createElement(Box, { "$dir": "column" },
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Watch with Soul Refiner"),
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Rent $129"))),
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    logo: (React.createElement(Avatar, { as: "div", image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 40 })),
+    numRating: 15,
+    rating: 66,
+    subtitle: '6 ep',
+    supportLabel: 'Text',
+    title: 'Legacy',
+};
+export const Feature = Story.bind({});
+Feature.argTypes = {
+    uploadModal: {
+        control: 'none',
+    },
+};
+Feature.args = {
+    type: 'feature',
+    content: 'A group about the freedom we have in Christ. This is a short description about this group',
+    editable: true,
+    href: '#',
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    // eslint-disable-next-line
+    onSave: (title, content) => undefined,
+    sx: '',
+    title: 'Card Label',
+    uploadModal: React.createElement(React.Fragment, null),
+};
+export const Person = Story.bind({});
+Person.argTypes = {
+    actions: {
+        control: 'none',
+    },
+    uploadModal: {
+        control: 'none',
+    },
+};
+Person.args = {
+    type: 'person',
+    actions: [
+        React.createElement(Button, { size: "small", sx: "flex:1;", type: "secondary" }, "Button"),
+        React.createElement(Button, { size: "small", sx: "flex:1;" }, "Button"),
+    ],
+    content: 'A group about the freedom we have in Christ. This is a short description about this group',
+    editable: true,
+    href: '#',
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    // eslint-disable-next-line
+    onSave: (title, content) => undefined,
+    subtitle: '14 connections in common',
+    sx: '',
+    title: 'Card Label',
+    uploadModal: React.createElement(React.Fragment, null),
+};
+export const Price = Story.bind({});
+Price.argTypes = {
+    actions: {
+        control: 'none',
+    },
+};
+Price.args = {
+    type: 'price',
+    actions: (React.createElement(Button, { size: "small", sx: "flex:1;" }, "Button")),
+    content: 'Credibly reintermediate client focused growth strategies with functional initiatives.',
+    featureTitle: 'Title',
+    features: [
+        '911 people responded',
+        '911 people responded',
+        '911 people responded',
+        '911 people responded',
+        '911 people responded',
+    ],
+    price: '$15.00',
+    title: 'Pro',
+};
+export const Regular = Story.bind({});
+Regular.argTypes = {
+    children: {
+        control: 'none',
+    },
+};
+Regular.args = {
+    type: 'regular',
+    children: (React.createElement(React.Fragment, null,
+        React.createElement(H.Six, { "$textAlign": "center" }, "Card Label"),
+        React.createElement(Box, { "$dir": "column", "$gap": 8 },
+            React.createElement(Box, { "$align": "center", "$gap": 8 },
+                React.createElement(GraduationCap, null),
+                React.createElement(P, null, "911 People responded")),
+            React.createElement(Box, { "$align": "center", "$gap": 8 },
+                React.createElement(Calendar, null),
+                React.createElement(P, null, "911 People responded")),
+            React.createElement(Box, { "$align": "center", "$gap": 8 },
+                React.createElement(Clock, null),
+                React.createElement(P, null, "911 People responded"))))),
+    href: '#',
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    sx: 'width: 352px;',
+};
+export const VideoEpisode = Story.bind({});
+VideoEpisode.argTypes = {
+    actions: {
+        control: 'none',
+    },
+    cta: {
+        control: 'none',
+    },
+    logo: {
+        control: 'none',
+    },
+    rating: {
+        type: 'number',
+        control: {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+        },
+    },
+};
+VideoEpisode.args = {
+    actions: [
+        React.createElement(IconButton, null,
+            React.createElement(Play, null)),
+        React.createElement(IconButton, null,
+            React.createElement(Plus, null)),
+        React.createElement(IconButton, null,
+            React.createElement(ForwardBold, null)),
+    ],
+    content: 'The Conquer Series, unrivaled in its scope and authority, lays out the process to permanently stop watching porn with proven strategies and tools that have helped thousands and lorem ipsum il dunc morem estem link',
+    cta: (React.createElement(Box, { "$dir": "row", "$justify": "space-between", sx: "width: 100%;" },
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Watch with Soul Refiner"),
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Rent $129"))),
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    logo: (React.createElement(Avatar, { as: "div", image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 40 })),
+    numRating: 15,
+    rating: 66,
+    subtitle: 'by Soul Refiner',
+    supportLabel: '6 episodes',
+    title: 'Warpath',
+    type: 'video-episode',
+};
+export const WrittenEpisode = Story.bind({});
+WrittenEpisode.argTypes = {
+    actions: {
+        control: 'none',
+    },
+    cta: {
+        control: 'none',
+    },
+    logo: {
+        control: 'none',
+    },
+    rating: {
+        type: 'number',
+        control: {
+            type: 'range',
+            min: 0,
+            max: 100,
+            step: 1,
+        },
+    },
+};
+WrittenEpisode.args = {
+    type: 'written-episode',
+    actions: [
+        React.createElement(IconButton, null,
+            React.createElement(Play, null)),
+        React.createElement(IconButton, null,
+            React.createElement(Plus, null)),
+        React.createElement(IconButton, null,
+            React.createElement(ForwardBold, null)),
+    ],
+    content: 'The Conquer Series, unrivaled in its scope and authority, lays out the process to permanently stop watching porn with proven strategies and tools that have helped thousands and lorem ipsum il dunc morem estem link',
+    cta: (React.createElement(Box, { "$dir": "column" },
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Watch with Soul Refiner"),
+        React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true }, "Rent $129"))),
+    image: 'https://f005.backblazeb2.com/file/sr-platform/card.jpg',
+    logo: (React.createElement(Avatar, { as: "div", image: "https://f005.backblazeb2.com/file/sr-platform/avatar.jpg", size: 40 })),
+    numRating: 15,
+    rating: 66,
+    subtitle: '6 ep',
+    supportLabel: 'Text',
+    title: 'Legacy',
+};
+export default meta;

package/dist/components/card/feature/feature.js

@@ -0,0 +1,168 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, Button, Modal } from 'components';
+import { Camera, Checkmark, Close, Pencil } from 'icons';
+export const FeatureCard = ({ content = '', editable, href, image, onSave, sx, title = '', uploadModal, }) => {
+    const [editing, setEditing] = React.useState(false);
+    const [editingTitle, setTitle] = React.useState(() => title);
+    const [editingContent, setContent] = React.useState(() => content);
+    const handleSetEditing = () => setEditing(true);
+    const handleCancelEdit = () => {
+        setTitle(title);
+        setContent(content);
+        setEditing(false);
+    };
+    const handleSave = () => {
+        setEditing(false);
+        onSave && onSave(editingTitle, editingContent);
+    };
+    const handleTitleChange = (event) => {
+        setTitle(event.target.value);
+    };
+    const handleContentChange = (event) => {
+        setContent(event.target.value);
+    };
+    const showEditIcon = !editing && editable;
+    const isLink = !!href;
+    return (React.createElement(Wrapper, { as: isLink ? 'div' : 'a', href: href },
+        React.createElement(Figure, { "$editing": editing, "$isLink": isLink, "$sx": sx },
+            React.createElement("img", { alt: title, src: image }),
+            !editing && (React.createElement(Title, null,
+                editingTitle,
+                React.createElement("figure", null,
+                    React.createElement(Content, null, editingContent)),
+                showEditIcon && (React.createElement(Pencil, { className: "edit", onClick: handleSetEditing })),
+                editable && uploadModal && (React.createElement(Modal, null,
+                    React.createElement(Modal.Trigger, null,
+                        React.createElement(Button, { icon: React.createElement(Camera, null), type: "outlined", size: "small", sx: "position: absolute; right: 8px; top: -72px;" }, "Edit")),
+                    React.createElement(Modal.Content, null, uploadModal))))),
+            editing && (React.createElement(Box, { "$align": "flex-end", "$display": "flex", "$dir": "column", "$gap": 8, sx: "position: relative;" },
+                React.createElement(EditTitle, { onChange: handleTitleChange, value: editingTitle }),
+                React.createElement(EditContent, { onChange: handleContentChange, value: editingContent }),
+                React.createElement(Box, { "$gap": 8 },
+                    React.createElement(Checkmark, { onClick: handleSave, sx: `
+                  padding: 8px;
+                  border-radius: 4px;
+                  cursor: pointer;
+                  background-color: var(--color-white); 
+                  box-shadow: var(--elevation-1);
+                  &:hover {
+                    background-color: var(--color-grey-10);
+                  }
+                ` }),
+                    React.createElement(Close, { onClick: handleCancelEdit, sx: `
+                  padding: 8px;
+                  border-radius: 4px;
+                  cursor: pointer;
+                  background-color: var(--color-white); 
+                  box-shadow: var(--elevation-1);
+                  &:hover {
+                    background-color: var(--color-grey-10);
+                  }
+                ` })))))));
+};
+const Wrapper = styled.div `
+  text-decoration: none;
+`;
+const Figure = styled.figure `
+  max-width: 352px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 16px;
+  padding: 16px;
+  margin: 0px;
+  border-radius: 16px;
+  box-shadow: var(--elevation-1);
+  border: 1px solid var(--color-white);
+
+  &:hover {
+    ${({ $isLink }) => $isLink
+    ? 'border: 1px solid var(--color-primary-blue-3); cursor: pointer;'
+    : 'cursor: arrow;'}
+
+    button {
+      display: flex;
+    }
+
+    .edit {
+      display: block;
+    }
+  }
+
+  img {
+    max-width: 352px;
+    aspect-ratio: 1/1;
+  }
+
+  figure {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 4px;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  button {
+    display: none;
+  }
+
+  .edit {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    display: none;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--color-grey-10);
+    }
+  }
+
+  ${({ $editing }) => $editing
+    ? `
+    background-color: var(--color-grey-9);`
+    : `
+    background-color: var(--color-white);`}
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const Title = styled.figcaption `
+  position: relative;
+  padding-right: 32px;
+  color: var(--color-grey-2);
+  font-size: 18px;
+  font-family: Inter;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: -0.252px;
+  user-select: none;
+`;
+const Content = styled.figcaption `
+  font-size: 14px;
+  font-family: Inter;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+`;
+const EditTitle = styled.input `
+  width: calc(100% - 24px);
+  padding: 12px;
+  background-color: var(--color-white);
+  font-size: 18px;
+  font-family: Inter;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: -0.252px;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+`;
+const EditContent = styled(EditTitle) `
+  padding: 6px 12px;
+  font-size: 14px;
+  font-family: Inter;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+`;

package/dist/components/card/feature/index.js

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

package/dist/components/card/index.js

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

package/dist/components/card/person/index.js

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

package/dist/components/card/person/person.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P } from 'components';
+export const PersonCard = ({ actions, href, image, subtitle, sx, title, }) => {
+    return (React.createElement(Wrapper, { "$image": image, as: href ? 'a' : 'div' },
+        React.createElement(Person, { "$sx": sx },
+            React.createElement(Shadow, null,
+                React.createElement("img", { src: image, alt: "" })),
+            React.createElement(Figcaption, null,
+                React.createElement(H, { as: "span", "$bold": true, "$color": "white", "$fontSize": 24, "$lineHeight": 36 }, title),
+                React.createElement(P, { as: "span", "$color": "white", "$fontSize": 14, "$lineHeight": 20 }, subtitle),
+                actions && (React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 16px;" }, React.Children.toArray(actions)))))));
+};
+const Wrapper = styled.div `
+  width: 312px;
+  height: 400px;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 16px;
+  }
+`;
+const Shadow = styled.div `
+  border-radius: 16px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66.67%, #000 98.25%),
+    transparent 50% / cover no-repeat;
+`;
+const Person = styled.figure `
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  border-radius: 16px;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const Figcaption = styled.figcaption `
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px;
+`;

package/dist/components/card/price/index.js

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